1 /* TODO: Add Social Network Sharing and from field */ |
1 /* TODO: Add Social Network Sharing, Finish Current Timecode Sync & Arrow Takeover */ |
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 this.lastAnnotation = false; |
|
6 }; |
5 }; |
7 |
6 |
8 IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget(); |
7 IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget(); |
9 |
8 |
10 IriSP.Widgets.CreateAnnotation.prototype.defaults = { |
9 IriSP.Widgets.CreateAnnotation.prototype.defaults = { |
11 show_title_field : true, |
10 show_title_field : false, /* For the moment, titles can't be sent to ldtplatform */ |
|
11 show_creator_field : true, |
|
12 start_visible : true, |
|
13 always_visible : true, |
|
14 sync_on_slice_widget : true, /* If false, syncs on current timecode */ |
|
15 takeover_arrow : false, |
|
16 minimize_annotation_widget : false, |
12 creator_name : "", |
17 creator_name : "", |
13 creator_avatar : "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png", |
18 creator_avatar : "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png", |
14 tags : false, |
19 tags : false, |
|
20 pause_on_write : true, |
15 max_tags : 8, |
21 max_tags : 8, |
16 polemics : [{ |
22 polemics : [{ |
17 keyword: "++", |
23 keyword: "++", |
18 background_color: "#00a000", |
24 background_color: "#00a000", |
19 text_color: "#ffffff" |
25 text_color: "#ffffff" |
39 |
45 |
40 IriSP.Widgets.CreateAnnotation.prototype.messages = { |
46 IriSP.Widgets.CreateAnnotation.prototype.messages = { |
41 en: { |
47 en: { |
42 from_time: "from", |
48 from_time: "from", |
43 to_time: "to", |
49 to_time: "to", |
|
50 at_time: "at", |
44 submit: "Submit", |
51 submit: "Submit", |
45 add_keywords_: "Add keywords:", |
52 add_keywords_: "Add keywords:", |
46 add_polemic_keywords_: "Add polemic keywords:", |
53 add_polemic_keywords_: "Add polemic keywords:", |
47 your_name: "Your name", |
54 your_name_: "Your name:", |
48 no_title: "Annotate this video", |
55 no_title: "Annotate this video", |
49 type_title: "Annotation title", |
56 type_title: "Annotation title", |
50 type_description: "Type the full description of your annotation here.", |
57 type_description: "Type the full description of your annotation here.", |
51 wait_while_processing: "Please wait while your request is being processed...", |
58 wait_while_processing: "Please wait while your request is being processed...", |
52 error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.", |
59 error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.", |
59 close_widget: "Cacher la zone de création d'annotations" |
66 close_widget: "Cacher la zone de création d'annotations" |
60 }, |
67 }, |
61 fr: { |
68 fr: { |
62 from_time: "de", |
69 from_time: "de", |
63 to_time: "à", |
70 to_time: "à", |
|
71 at_time: "à", |
64 submit: "Envoyer", |
72 submit: "Envoyer", |
65 add_keywords_: "Ajouter des mots-clés :", |
73 add_keywords_: "Ajouter des mots-clés :", |
66 add_polemic_keywords_: "Ajouter des mots-clés polémiques :", |
74 add_polemic_keywords_: "Ajouter des mots-clés polémiques :", |
67 your_name: "Votre nom", |
75 your_name_: "Votre nom :", |
68 no_title: "Annoter cette vidéo", |
76 no_title: "Annoter cette vidéo", |
69 type_title: "Titre de l'annotation", |
77 type_title: "Titre de l'annotation", |
70 type_description: "Rédigez le contenu de votre annotation ici.", |
78 type_description: "Rédigez le contenu de votre annotation ici.", |
71 wait_while_processing: "Veuillez patienter pendant le traitement de votre requête...", |
79 wait_while_processing: "Veuillez patienter pendant le traitement de votre requête...", |
72 error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée", |
80 error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée", |
83 IriSP.Widgets.CreateAnnotation.prototype.template = |
91 IriSP.Widgets.CreateAnnotation.prototype.template = |
84 '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">' |
92 '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">' |
85 + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">' |
93 + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">' |
86 + '<h3>{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title" placeholder="{{l10n.type_title}}" />{{/show_title_field}}' |
94 + '<h3>{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title" placeholder="{{l10n.type_title}}" />{{/show_title_field}}' |
87 + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}} </span>{{/show_title_field}}' |
95 + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}} </span>{{/show_title_field}}' |
88 + ' <span class="Ldt-CreateAnnotation-Times">{{l10n.from_time}} <span class="Ldt-CreateAnnotation-Begin"></span>' |
96 + ' <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>' |
89 + ' {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End"></span></span></h3>' |
97 + '{{#sync_on_slice_widget}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">00:00</span>{{/sync_on_slice_widget}}</span></h3>' |
|
98 + '{{#show_creator_field}}<h3>{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator" value="{{creator_name}}" /></h3>{{/show_creator_field}}' |
90 + '<textarea class="Ldt-CreateAnnotation-Description" placeholder="{{l10n.type_description}}"></textarea>' |
99 + '<textarea class="Ldt-CreateAnnotation-Description" placeholder="{{l10n.type_description}}"></textarea>' |
91 + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>' |
100 + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>' |
92 + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />' |
101 + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />' |
93 + '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">' |
102 + '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">' |
94 + '{{#tags}}<li class="Ldt-CreateAnnotation-TagLi" tag-id="{{id}}"><span class="Ldt-CreateAnnotation-TagButton">{{title}}</span></li>{{/tags}}</ul></div>{{/tags.length}}' |
103 + '{{#tags}}<li class="Ldt-CreateAnnotation-TagLi" tag-id="{{id}}"><span class="Ldt-CreateAnnotation-TagButton">{{title}}</span></li>{{/tags}}</ul></div>{{/tags.length}}' |
95 + '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">' |
104 + '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">' |
96 + '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}' |
105 + '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}' |
97 + '<div style="clear: both;"></div></form>' |
106 + '<div style="clear: both;"></div></form>' |
98 + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Wait"><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.wait_while_processing}}</div></div>' |
107 + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Wait"><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.wait_while_processing}}</div></div>' |
99 + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Error"><a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.error_while_contacting}}</div></div>' |
108 + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Error">{{^always_visible}}<a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a>{{/always_visible}}<div class="Ldt-CreateAnnotation-InnerBox">{{l10n.error_while_contacting}}</div></div>' |
100 + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Saved"><a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.annotation_saved}}</div></div>' |
109 + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Saved">{{^always_visible}}<a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a>{{/always_visible}}<div class="Ldt-CreateAnnotation-InnerBox">{{l10n.annotation_saved}}</div></div>' |
101 + '</div></div>'; |
110 + '</div></div>'; |
102 |
111 |
103 IriSP.Widgets.CreateAnnotation.prototype.draw = function() { |
112 IriSP.Widgets.CreateAnnotation.prototype.draw = function() { |
104 if (!this.tags) { |
113 if (!this.tags) { |
105 this.tags = this.source.getTags() |
114 this.tags = this.source.getTags() |
124 }); |
133 }); |
125 this.$.find(".Ldt-CreateAnnotation-Description").bind("change keyup input paste", this.functionWrapper("onDescriptionChange")); |
134 this.$.find(".Ldt-CreateAnnotation-Description").bind("change keyup input paste", this.functionWrapper("onDescriptionChange")); |
126 if (this.show_title_field) { |
135 if (this.show_title_field) { |
127 this.$.find(".Ldt-CreateAnnotation-Title").bind("change keyup input paste", this.functionWrapper("onTitleChange")); |
136 this.$.find(".Ldt-CreateAnnotation-Title").bind("change keyup input paste", this.functionWrapper("onTitleChange")); |
128 } |
137 } |
129 |
138 if (this.show_creator_field) { |
130 this.$.hide(); |
139 this.$.find(".Ldt-CreateAnnotation-Creator").bind("change keyup input paste", this.functionWrapper("onCreatorChange")); |
131 this.hide(); |
140 } |
|
141 |
|
142 if (this.start_visible) { |
|
143 this.show(); |
|
144 } else { |
|
145 this.$.hide(); |
|
146 this.hide(); |
|
147 } |
|
148 |
132 this.bindPopcorn("IriSP.CreateAnnotation.toggle","toggle"); |
149 this.bindPopcorn("IriSP.CreateAnnotation.toggle","toggle"); |
133 this.bindPopcorn("IriSP.Slice.boundsChanged","onBoundsChanged"); |
150 this.bindPopcorn("IriSP.Slice.boundsChanged","onBoundsChanged"); |
134 this.begin = new IriSP.Model.Time(); |
151 this.begin = new IriSP.Model.Time(); |
135 this.end = this.source.getDuration(); |
152 this.end = this.source.getDuration(); |
136 this.$.find("form").submit(this.functionWrapper("onSubmit")); |
153 this.$.find("form").submit(this.functionWrapper("onSubmit")); |
143 |
160 |
144 IriSP.Widgets.CreateAnnotation.prototype.show = function() { |
161 IriSP.Widgets.CreateAnnotation.prototype.show = function() { |
145 this.visible = true; |
162 this.visible = true; |
146 this.showScreen('Main'); |
163 this.showScreen('Main'); |
147 this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666"); |
164 this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666"); |
148 this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666"); |
165 if (this.show_title_field) { |
|
166 this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666"); |
|
167 } |
|
168 if (this.show_creator_field) { |
|
169 this.$.find(".Ldt-CreateAnnotation-Creator").val(this.creator_name).css("border-color", "#666666"); |
|
170 } |
149 this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected"); |
171 this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected"); |
150 this.$.slideDown(); |
172 this.$.slideDown(); |
151 this.player.popcorn.trigger("IriSP.Annotation.minimize"); |
173 if (this.minimize_annotation_widget) { |
|
174 this.player.popcorn.trigger("IriSP.Annotation.minimize"); |
|
175 } |
152 this.player.popcorn.trigger("IriSP.Slice.show"); |
176 this.player.popcorn.trigger("IriSP.Slice.show"); |
153 } |
177 } |
154 |
178 |
155 IriSP.Widgets.CreateAnnotation.prototype.hide = function() { |
179 IriSP.Widgets.CreateAnnotation.prototype.hide = function() { |
156 this.visible = false; |
180 if (!this.always_visible) { |
157 this.$.slideUp(); |
181 this.visible = false; |
158 this.player.popcorn.trigger("IriSP.Annotation.maximize"); |
182 this.$.slideUp(); |
159 this.player.popcorn.trigger("IriSP.Slice.hide"); |
183 if (this.minimize_annotation_widget) { |
|
184 this.player.popcorn.trigger("IriSP.Annotation.maximize"); |
|
185 } |
|
186 this.player.popcorn.trigger("IriSP.Slice.hide"); |
|
187 } |
160 } |
188 } |
161 |
189 |
162 IriSP.Widgets.CreateAnnotation.prototype.toggle = function() { |
190 IriSP.Widgets.CreateAnnotation.prototype.toggle = function() { |
163 if (this.visible) { |
191 if (!this.always_visible) { |
164 this.hide(); |
192 if (this.visible) { |
165 } else { |
193 this.hide(); |
166 this.show(); |
194 } else { |
|
195 this.show(); |
|
196 } |
167 } |
197 } |
168 } |
198 } |
169 |
199 |
170 IriSP.Widgets.CreateAnnotation.prototype.onBoundsChanged = function(_values) { |
200 IriSP.Widgets.CreateAnnotation.prototype.onBoundsChanged = function(_values) { |
171 this.begin = new IriSP.Model.Time(_values[0] || 0); |
201 this.begin = new IriSP.Model.Time(_values[0] || 0); |
182 ? _contents.replace(_rx,"") |
212 ? _contents.replace(_rx,"") |
183 : _contents + " " + _keyword |
213 : _contents + " " + _keyword |
184 ); |
214 ); |
185 _field.val(_contents.replace(/\s{2,}/g,' ').replace(/(^\s+|\s+$)/g,'')); |
215 _field.val(_contents.replace(/\s{2,}/g,' ').replace(/(^\s+|\s+$)/g,'')); |
186 this.onDescriptionChange(); |
216 this.onDescriptionChange(); |
|
217 } |
|
218 |
|
219 IriSP.Widgets.CreateAnnotation.prototype.pauseOnWrite = function() { |
|
220 if (this.pause_on_write && !this.player.popcorn.media.paused) { |
|
221 this.player.popcorn.pause(); |
|
222 } |
187 } |
223 } |
188 |
224 |
189 IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function() { |
225 IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function() { |
190 var _field = this.$.find(".Ldt-CreateAnnotation-Description"), |
226 var _field = this.$.find(".Ldt-CreateAnnotation-Description"), |
191 _contents = _field.val(); |
227 _contents = _field.val(); |
196 IriSP.jQuery(this).addClass("selected"); |
232 IriSP.jQuery(this).addClass("selected"); |
197 } else { |
233 } else { |
198 IriSP.jQuery(this).removeClass("selected"); |
234 IriSP.jQuery(this).removeClass("selected"); |
199 } |
235 } |
200 }); |
236 }); |
|
237 this.pauseOnWrite(); |
201 return !!_contents; |
238 return !!_contents; |
202 } |
239 } |
203 |
240 |
204 IriSP.Widgets.CreateAnnotation.prototype.onTitleChange = function() { |
241 IriSP.Widgets.CreateAnnotation.prototype.onTitleChange = function() { |
205 var _field = this.$.find(".Ldt-CreateAnnotation-Title"), |
242 var _field = this.$.find(".Ldt-CreateAnnotation-Title"), |
206 _contents = _field.val(); |
243 _contents = _field.val(); |
207 _field.css("border-color", !!_contents ? "#666666" : "#ff0000"); |
244 _field.css("border-color", !!_contents ? "#666666" : "#ff0000"); |
|
245 this.pauseOnWrite(); |
208 return !!_contents; |
246 return !!_contents; |
209 } |
247 } |
210 |
248 |
|
249 |
|
250 IriSP.Widgets.CreateAnnotation.prototype.onCreatorChange = function() { |
|
251 var _field = this.$.find(".Ldt-CreateAnnotation-Creator"), |
|
252 _contents = _field.val(); |
|
253 _field.css("border-color", !!_contents ? "#666666" : "#ff0000"); |
|
254 this.pauseOnWrite(); |
|
255 return !!_contents; |
|
256 } |
|
257 |
211 IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() { |
258 IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() { |
212 if (!this.onDescriptionChange() || (!this.onTitleChange() && this.show_title_field)) { |
259 if (!this.onDescriptionChange() || (this.show_title_field && !this.onTitleChange()) || (this.show_creator_field && !this.onCreatorChange())) { |
213 return; |
260 return; |
214 } |
261 } |
215 |
262 |
216 var _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager); |
263 var _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager); |
217 _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), |
264 _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), |
228 _annotation.setBegin(this.begin); |
275 _annotation.setBegin(this.begin); |
229 _annotation.setEnd(this.end); |
276 _annotation.setEnd(this.end); |
230 _annotation.setMedia(this.source.currentMedia.id); |
277 _annotation.setMedia(this.source.currentMedia.id); |
231 _annotation.setAnnotationType(_annotationType.id); |
278 _annotation.setAnnotationType(_annotationType.id); |
232 if (this.show_title_field) { |
279 if (this.show_title_field) { |
233 _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val() |
280 _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val(); |
234 } |
281 } |
235 _annotation.created = new Date(); |
282 _annotation.created = new Date(); |
236 _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); |
283 _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); |
237 _annotation.setTags(this.$.find(".Ldt-CreateAnnotation-TagLi.selected").map(function() { return IriSP.jQuery(this).attr("tag-id")})); |
284 _annotation.setTags(this.$.find(".Ldt-CreateAnnotation-TagLi.selected").map(function() { return IriSP.jQuery(this).attr("tag-id")})); |
238 |
285 |
239 _export.creator = this.creator_name; |
286 if (this.show_creator_field) { |
|
287 _export.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val(); |
|
288 } else { |
|
289 _export.creator = this.creator_name; |
|
290 } |
240 _export.created = new Date(); |
291 _export.created = new Date(); |
241 _exportedAnnotations.push(_annotation); |
292 _exportedAnnotations.push(_annotation); |
242 _export.addList("annotation",_exportedAnnotations); |
293 _export.addList("annotation",_exportedAnnotations); |
243 |
294 |
244 var _this = this; |
295 var _this = this; |
253 window.setTimeout(_this.functionWrapper("hide"),_this.close_widget_timeout); |
304 window.setTimeout(_this.functionWrapper("hide"),_this.close_widget_timeout); |
254 } |
305 } |
255 _export.getAnnotations().removeElement(_annotation, true); |
306 _export.getAnnotations().removeElement(_annotation, true); |
256 _export.deSerialize(_data); |
307 _export.deSerialize(_data); |
257 _this.source.merge(_export); |
308 _this.source.merge(_export); |
|
309 if (this.pause_on_write && this.player.popcorn.media.paused) { |
|
310 this.player.popcorn.play(); |
|
311 } |
258 _this.player.popcorn.trigger("IriSP.AnnotationsList.refresh"); |
312 _this.player.popcorn.trigger("IriSP.AnnotationsList.refresh"); |
259 }, |
313 }, |
260 error: function(_xhr, _error, _thrown) { |
314 error: function(_xhr, _error, _thrown) { |
261 IriSP.log("Error when sending annotation", _thrown); |
315 IriSP.log("Error when sending annotation", _thrown); |
262 _export.getAnnotations().removeElement(_annotation, true); |
316 _export.getAnnotations().removeElement(_annotation, true); |