1 /* TODO: Add Social Network Sharing, Finish Current Timecode Sync & Arrow Takeover */ |
1 /* TODO: Add Social Network Sharing */ |
2 |
2 |
3 IriSP.Widgets.CreateAnnotation = function(player, config) { |
3 IriSP.Widgets.CreateAnnotation = function(player, config) { |
4 IriSP.Widgets.Widget.call(this, player, config); |
4 IriSP.Widgets.Widget.call(this, player, config); |
5 }; |
5 }; |
6 |
6 |
9 IriSP.Widgets.CreateAnnotation.prototype.defaults = { |
9 IriSP.Widgets.CreateAnnotation.prototype.defaults = { |
10 show_title_field : false, /* For the moment, titles can't be sent to ldtplatform */ |
10 show_title_field : false, /* For the moment, titles can't be sent to ldtplatform */ |
11 show_creator_field : true, |
11 show_creator_field : true, |
12 start_visible : true, |
12 start_visible : true, |
13 always_visible : false, |
13 always_visible : false, |
14 sync_on_slice_widget : true, /* If false, syncs on current timecode */ |
14 show_slice : true, |
15 takeover_arrow : false, |
15 show_arrow : true, |
16 minimize_annotation_widget : true, |
16 minimize_annotation_widget : true, |
17 creator_name : "", |
17 creator_name : "", |
18 creator_avatar : "", |
18 creator_avatar : "", |
19 tags : false, |
19 tags : false, |
20 tag_titles : false, |
20 tag_titles : false, |
35 },{ |
35 },{ |
36 keyword: "==", |
36 keyword: "==", |
37 background_color: "#f0e000", |
37 background_color: "#f0e000", |
38 text_color: "#000000" |
38 text_color: "#000000" |
39 }], |
39 }], |
|
40 slice_annotation_type: "chap", |
40 annotation_type: "Contributions", |
41 annotation_type: "Contributions", |
41 api_serializer: "ldt_annotate", |
42 api_serializer: "ldt_annotate", |
42 api_endpoint_template: "", |
43 api_endpoint_template: "", |
43 api_method: "PUT", |
44 api_method: "PUT", |
44 after_send_timeout: 0, |
45 after_send_timeout: 0, |
89 close_widget: "Hide the annotation creating block" |
90 close_widget: "Hide the annotation creating block" |
90 } |
91 } |
91 } |
92 } |
92 |
93 |
93 IriSP.Widgets.CreateAnnotation.prototype.template = |
94 IriSP.Widgets.CreateAnnotation.prototype.template = |
94 '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">' |
95 '{{#show_slice}}<div class="Ldt-CreateAnnotation-Slice"></div>{{/show_slice}}' |
|
96 + '{{^show_slice}}{{#show_arrow}}<div class="Ldt-CreateAnnotation-Arrow"></div>{{/show_arrow}}{{/show_slice}}' |
|
97 + '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">' |
95 + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">' |
98 + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">' |
96 + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title" placeholder="{{l10n.type_title}}" />{{/show_title_field}}' |
99 + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title" placeholder="{{l10n.type_title}}" />{{/show_title_field}}' |
97 + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}} </span>{{/show_title_field}}' |
100 + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}} </span>{{/show_title_field}}' |
98 + ' <span class="Ldt-CreateAnnotation-Times">{{#sync_on_slice_widget}}{{l10n.from_time}} {{/sync_on_slice_widget}}{{^sync_on_slice_widget}}{{l10n.at_time}} {{/sync_on_slice_widget}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>' |
101 + ' <span class="Ldt-CreateAnnotation-Times">{{#show_slice}}{{l10n.from_time}} {{/show_slice}}{{^show_slice}}{{l10n.at_time}} {{/show_slice}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>' |
99 + '{{#sync_on_slice_widget}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">00:00</span>{{/sync_on_slice_widget}}</span></span>' |
102 + '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">00:00</span>{{/show_slice}}</span></span>' |
100 + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator" value="{{creator_name}}" /></h3>{{/show_creator_field}}' |
103 + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator" value="{{creator_name}}" /></h3>{{/show_creator_field}}' |
101 + '<textarea class="Ldt-CreateAnnotation-Description" placeholder="{{l10n.type_description}}"></textarea>' |
104 + '<textarea class="Ldt-CreateAnnotation-Description" placeholder="{{l10n.type_description}}"></textarea>' |
102 + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>' |
105 + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>' |
103 + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />' |
106 + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />' |
104 + '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">' |
107 + '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">' |
136 return _tag; |
139 return _tag; |
137 }); |
140 }); |
138 /* We have to use the map function because Mustache doesn't like our tags object */ |
141 /* We have to use the map function because Mustache doesn't like our tags object */ |
139 } |
142 } |
140 this.renderTemplate(); |
143 this.renderTemplate(); |
|
144 if (this.show_slice) { |
|
145 this.insertSubwidget( |
|
146 this.$.find(".Ldt-CreateAnnotation-Slice"), |
|
147 { |
|
148 type: "Slice", |
|
149 show_arrow: this.show_arrow, |
|
150 annotation_type: this.slice_annotation_type, |
|
151 onBoundsChanged: function(_from, _to) { |
|
152 _this.begin = new IriSP.Model.Time(_from || 0); |
|
153 _this.end = new IriSP.Model.Time(_to || 0); |
|
154 _this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString()); |
|
155 _this.$.find(".Ldt-CreateAnnotation-End").html(_this.end.toString()); |
|
156 } |
|
157 }, |
|
158 "slice" |
|
159 ); |
|
160 } else { |
|
161 if (this.show_arrow) { |
|
162 this.insertSubwidget(this.$.find(".Ldt-CreateAnnotation-Arrow"), {type: "Arrow"},"arrow"); |
|
163 } |
|
164 this.onMediaEvent("timeupdate", function(_time) { |
|
165 _this.begin = new IriSP.Model.Time(_time || 0); |
|
166 _this.end = new IriSP.Model.Time(_time || 0); |
|
167 _this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString()); |
|
168 if (_this.arrow) { |
|
169 _this.arrow.moveToTime(_time); |
|
170 } |
|
171 }); |
|
172 } |
141 this.$.find(".Ldt-CreateAnnotation-Close").click(function() { |
173 this.$.find(".Ldt-CreateAnnotation-Close").click(function() { |
142 _this.close_after_send |
174 _this.close_after_send |
143 ? _this.hide() |
175 ? _this.hide() |
144 : _this.showScreen("Main"); |
176 : _this.showScreen("Main"); |
145 return false; |
177 return false; |
162 this.$.hide(); |
194 this.$.hide(); |
163 this.hide(); |
195 this.hide(); |
164 } |
196 } |
165 |
197 |
166 this.onMdpEvent("CreateAnnotation.toggle","toggle"); |
198 this.onMdpEvent("CreateAnnotation.toggle","toggle"); |
167 this.onMdpEvent("Slice.boundsChanged","onBoundsChanged"); |
|
168 this.begin = new IriSP.Model.Time(); |
199 this.begin = new IriSP.Model.Time(); |
169 this.end = this.source.getDuration(); |
200 this.end = this.source.getDuration(); |
170 this.$.find("form").submit(this.functionWrapper("onSubmit")); |
201 this.$.find("form").submit(this.functionWrapper("onSubmit")); |
171 } |
202 } |
172 |
203 |
188 this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected"); |
219 this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected"); |
189 this.$.slideDown(); |
220 this.$.slideDown(); |
190 if (this.minimize_annotation_widget) { |
221 if (this.minimize_annotation_widget) { |
191 this.player.trigger("Annotation.minimize"); |
222 this.player.trigger("Annotation.minimize"); |
192 } |
223 } |
193 this.player.trigger("Slice.show"); |
|
194 } |
224 } |
195 |
225 |
196 IriSP.Widgets.CreateAnnotation.prototype.hide = function() { |
226 IriSP.Widgets.CreateAnnotation.prototype.hide = function() { |
197 if (!this.always_visible) { |
227 if (!this.always_visible) { |
198 this.visible = false; |
228 this.visible = false; |
199 this.$.slideUp(); |
229 this.$.slideUp(); |
200 if (this.minimize_annotation_widget) { |
230 if (this.minimize_annotation_widget) { |
201 this.player.trigger("Annotation.maximize"); |
231 this.player.trigger("Annotation.maximize"); |
202 } |
232 } |
203 this.player.trigger("Slice.hide"); |
|
204 } |
233 } |
205 } |
234 } |
206 |
235 |
207 IriSP.Widgets.CreateAnnotation.prototype.toggle = function() { |
236 IriSP.Widgets.CreateAnnotation.prototype.toggle = function() { |
208 if (!this.always_visible) { |
237 if (!this.always_visible) { |
210 this.hide(); |
239 this.hide(); |
211 } else { |
240 } else { |
212 this.show(); |
241 this.show(); |
213 } |
242 } |
214 } |
243 } |
215 } |
|
216 |
|
217 IriSP.Widgets.CreateAnnotation.prototype.onBoundsChanged = function(_values) { |
|
218 this.begin = new IriSP.Model.Time(_values[0] || 0); |
|
219 this.end = new IriSP.Model.Time(_values[1] || 0); |
|
220 this.$.find(".Ldt-CreateAnnotation-Begin").html(this.begin.toString()); |
|
221 this.$.find(".Ldt-CreateAnnotation-End").html(this.end.toString()); |
|
222 } |
244 } |
223 |
245 |
224 IriSP.Widgets.CreateAnnotation.prototype.addKeyword = function(_keyword) { |
246 IriSP.Widgets.CreateAnnotation.prototype.addKeyword = function(_keyword) { |
225 var _field = this.$.find(".Ldt-CreateAnnotation-Description"), |
247 var _field = this.$.find(".Ldt-CreateAnnotation-Description"), |
226 _rx = IriSP.Model.regexpFromTextOrArray(_keyword), |
248 _rx = IriSP.Model.regexpFromTextOrArray(_keyword), |