|
1 /* TODO: Add Social Network Sharing, Finish Current Timecode Sync & Arrow Takeover */ |
|
2 |
|
3 IriSP.Widgets.CreateAnnotation = function(player, config) { |
|
4 IriSP.Widgets.Widget.call(this, player, config); |
|
5 }; |
|
6 |
|
7 IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget(); |
|
8 |
|
9 IriSP.Widgets.CreateAnnotation.prototype.defaults = { |
|
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 : false, |
|
14 sync_on_slice_widget : true, /* If false, syncs on current timecode */ |
|
15 takeover_arrow : false, |
|
16 minimize_annotation_widget : true, |
|
17 creator_name : "", |
|
18 creator_avatar : "", |
|
19 tags : false, |
|
20 tag_titles : false, |
|
21 pause_on_write : true, |
|
22 max_tags : 8, |
|
23 polemics : [{ |
|
24 keyword: "++", |
|
25 background_color: "#00a000", |
|
26 text_color: "#ffffff" |
|
27 },{ |
|
28 keyword: "--", |
|
29 background_color: "#c00000", |
|
30 text_color: "#ffffff" |
|
31 },{ |
|
32 keyword: "??", |
|
33 background_color: "#0000e0", |
|
34 text_color: "#ffffff" |
|
35 },{ |
|
36 keyword: "==", |
|
37 background_color: "#f0e000", |
|
38 text_color: "#000000" |
|
39 }], |
|
40 annotation_type: "Contributions", |
|
41 api_serializer: "ldt_annotate", |
|
42 api_endpoint_template: "", |
|
43 api_method: "PUT", |
|
44 after_send_timeout: 0, |
|
45 close_after_send: false, |
|
46 } |
|
47 |
|
48 IriSP.Widgets.CreateAnnotation.prototype.messages = { |
|
49 en: { |
|
50 from_time: "from", |
|
51 to_time: "to", |
|
52 at_time: "at", |
|
53 submit: "Submit", |
|
54 add_keywords_: "Add keywords:", |
|
55 add_polemic_keywords_: "Add polemic keywords:", |
|
56 your_name_: "Your name:", |
|
57 no_title: "Annotate this video", |
|
58 type_title: "Annotation title", |
|
59 type_description: "Type the full description of your annotation here.", |
|
60 wait_while_processing: "Please wait while your request is being processed...", |
|
61 error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.", |
|
62 empty_annotation: "Your annotation is empty. Please write something before submitting.", |
|
63 annotation_saved: "Thank you, your annotation has been saved.", |
|
64 share_annotation: "Would you like to share it on social networks ?", |
|
65 share_on: "Share on", |
|
66 more_tags: "More tags", |
|
67 cancel: "Cancel", |
|
68 close_widget: "Cacher la zone de création d'annotations" |
|
69 }, |
|
70 fr: { |
|
71 from_time: "de", |
|
72 to_time: "à", |
|
73 at_time: "à", |
|
74 submit: "Envoyer", |
|
75 add_keywords_: "Ajouter des mots-clés :", |
|
76 add_polemic_keywords_: "Ajouter des mots-clés polémiques :", |
|
77 your_name_: "Votre nom :", |
|
78 no_title: "Annoter cette vidéo", |
|
79 type_title: "Titre de l'annotation", |
|
80 type_description: "Rédigez le contenu de votre annotation ici.", |
|
81 wait_while_processing: "Veuillez patienter pendant le traitement de votre requête...", |
|
82 error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée", |
|
83 empty_annotation: "Votre annotation est vide. Merci de rédiger un texte avant de l'envoyer.", |
|
84 annotation_saved: "Merci, votre annotation a été enregistrée.", |
|
85 share_annotation: "Souhaitez-vous la partager sur les réseaux sociaux ?", |
|
86 share_on: "Partager sur", |
|
87 more_tags: "Plus de mots-clés", |
|
88 cancel: "Cancel", |
|
89 close_widget: "Hide the annotation creating block" |
|
90 } |
|
91 } |
|
92 |
|
93 IriSP.Widgets.CreateAnnotation.prototype.template = |
|
94 '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">' |
|
95 + '<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}}' |
|
97 + '{{^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>' |
|
99 + '{{#sync_on_slice_widget}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">00:00</span>{{/sync_on_slice_widget}}</span></span>' |
|
100 + '{{#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>' |
|
102 + '<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}}" />' |
|
104 + '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">' |
|
105 + '{{#tags}}<li class="Ldt-CreateAnnotation-TagLi" tag-id="{{id}}"><span class="Ldt-CreateAnnotation-TagButton">{{title}}</span></li>{{/tags}}</ul></div>{{/tags.length}}' |
|
106 + '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">' |
|
107 + '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}' |
|
108 + '<div style="clear: both;"></div></form>' |
|
109 + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Wait"><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.wait_while_processing}}</div></div>' |
|
110 + '<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>' |
|
111 + '<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>' |
|
112 + '</div></div>'; |
|
113 |
|
114 IriSP.Widgets.CreateAnnotation.prototype.draw = function() { |
|
115 var _this = this; |
|
116 if (this.tag_titles && !this.tags) { |
|
117 this.tags = IriSP._(this.tag_titles).map(function(_tag_title) { |
|
118 var _tag, |
|
119 _tags = _this.source.getTags().searchByTitle(_tag_title); |
|
120 if (_tags.length) { |
|
121 _tag = _tags[0]; |
|
122 } else { |
|
123 _tag = new IriSP.Model.Tag(false, _this.source); |
|
124 _tag.title = _tag_title; |
|
125 } |
|
126 return _tag; |
|
127 }); |
|
128 } |
|
129 if (!this.tags) { |
|
130 this.tags = this.source.getTags() |
|
131 .sortBy(function (_tag) { |
|
132 return -_tag.getAnnotations().length; |
|
133 }) |
|
134 .slice(0, this.max_tags) |
|
135 .map(function(_tag) { |
|
136 return _tag; |
|
137 }); |
|
138 /* We have to use the map function because Mustache doesn't like our tags object */ |
|
139 } |
|
140 this.renderTemplate(); |
|
141 this.$.find(".Ldt-CreateAnnotation-Close").click(function() { |
|
142 _this.close_after_send |
|
143 ? _this.hide() |
|
144 : _this.showScreen("Main"); |
|
145 return false; |
|
146 }); |
|
147 this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").click(function() { |
|
148 _this.addKeyword(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); |
|
149 return false; |
|
150 }); |
|
151 this.$.find(".Ldt-CreateAnnotation-Description").bind("change keyup input paste", this.functionWrapper("onDescriptionChange")); |
|
152 if (this.show_title_field) { |
|
153 this.$.find(".Ldt-CreateAnnotation-Title").bind("change keyup input paste", this.functionWrapper("onTitleChange")); |
|
154 } |
|
155 if (this.show_creator_field) { |
|
156 this.$.find(".Ldt-CreateAnnotation-Creator").bind("change keyup input paste", this.functionWrapper("onCreatorChange")); |
|
157 } |
|
158 |
|
159 if (this.start_visible) { |
|
160 this.show(); |
|
161 } else { |
|
162 this.$.hide(); |
|
163 this.hide(); |
|
164 } |
|
165 |
|
166 this.bindPopcorn("IriSP.CreateAnnotation.toggle","toggle"); |
|
167 this.bindPopcorn("IriSP.Slice.boundsChanged","onBoundsChanged"); |
|
168 this.begin = new IriSP.Model.Time(); |
|
169 this.end = this.source.getDuration(); |
|
170 this.$.find("form").submit(this.functionWrapper("onSubmit")); |
|
171 } |
|
172 |
|
173 IriSP.Widgets.CreateAnnotation.prototype.showScreen = function(_screenName) { |
|
174 this.$.find('.Ldt-CreateAnnotation-' + _screenName).show() |
|
175 .siblings().hide(); |
|
176 } |
|
177 |
|
178 IriSP.Widgets.CreateAnnotation.prototype.show = function() { |
|
179 this.visible = true; |
|
180 this.showScreen('Main'); |
|
181 this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666"); |
|
182 if (this.show_title_field) { |
|
183 this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666"); |
|
184 } |
|
185 if (this.show_creator_field) { |
|
186 this.$.find(".Ldt-CreateAnnotation-Creator").val(this.creator_name).css("border-color", "#666666"); |
|
187 } |
|
188 this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected"); |
|
189 this.$.slideDown(); |
|
190 if (this.minimize_annotation_widget) { |
|
191 this.player.popcorn.trigger("IriSP.Annotation.minimize"); |
|
192 } |
|
193 this.player.popcorn.trigger("IriSP.Slice.show"); |
|
194 } |
|
195 |
|
196 IriSP.Widgets.CreateAnnotation.prototype.hide = function() { |
|
197 if (!this.always_visible) { |
|
198 this.visible = false; |
|
199 this.$.slideUp(); |
|
200 if (this.minimize_annotation_widget) { |
|
201 this.player.popcorn.trigger("IriSP.Annotation.maximize"); |
|
202 } |
|
203 this.player.popcorn.trigger("IriSP.Slice.hide"); |
|
204 } |
|
205 } |
|
206 |
|
207 IriSP.Widgets.CreateAnnotation.prototype.toggle = function() { |
|
208 if (!this.always_visible) { |
|
209 if (this.visible) { |
|
210 this.hide(); |
|
211 } else { |
|
212 this.show(); |
|
213 } |
|
214 } |
|
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 } |
|
223 |
|
224 IriSP.Widgets.CreateAnnotation.prototype.addKeyword = function(_keyword) { |
|
225 var _field = this.$.find(".Ldt-CreateAnnotation-Description"), |
|
226 _rx = IriSP.Model.regexpFromTextOrArray(_keyword), |
|
227 _contents = _field.val(); |
|
228 _contents = ( !!_contents.match(_rx) |
|
229 ? _contents.replace(_rx,"") |
|
230 : _contents + " " + _keyword |
|
231 ); |
|
232 _field.val(_contents.replace(/\s{2,}/g,' ').replace(/(^\s+|\s+$)/g,'')); |
|
233 this.onDescriptionChange(); |
|
234 } |
|
235 |
|
236 IriSP.Widgets.CreateAnnotation.prototype.pauseOnWrite = function() { |
|
237 if (this.pause_on_write && !this.player.popcorn.media.paused) { |
|
238 this.player.popcorn.pause(); |
|
239 } |
|
240 } |
|
241 |
|
242 IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function() { |
|
243 var _field = this.$.find(".Ldt-CreateAnnotation-Description"), |
|
244 _contents = _field.val(); |
|
245 _field.css("border-color", !!_contents ? "#666666" : "#ff0000"); |
|
246 this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").each(function() { |
|
247 var _rx = IriSP.Model.regexpFromTextOrArray(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); |
|
248 if (_contents.match(_rx)) { |
|
249 IriSP.jQuery(this).addClass("selected"); |
|
250 } else { |
|
251 IriSP.jQuery(this).removeClass("selected"); |
|
252 } |
|
253 }); |
|
254 this.pauseOnWrite(); |
|
255 return !!_contents; |
|
256 } |
|
257 |
|
258 IriSP.Widgets.CreateAnnotation.prototype.onTitleChange = function() { |
|
259 var _field = this.$.find(".Ldt-CreateAnnotation-Title"), |
|
260 _contents = _field.val(); |
|
261 _field.css("border-color", !!_contents ? "#666666" : "#ff0000"); |
|
262 this.pauseOnWrite(); |
|
263 return !!_contents; |
|
264 } |
|
265 |
|
266 |
|
267 IriSP.Widgets.CreateAnnotation.prototype.onCreatorChange = function() { |
|
268 var _field = this.$.find(".Ldt-CreateAnnotation-Creator"), |
|
269 _contents = _field.val(); |
|
270 _field.css("border-color", !!_contents ? "#666666" : "#ff0000"); |
|
271 this.pauseOnWrite(); |
|
272 return !!_contents; |
|
273 } |
|
274 |
|
275 /* Fonction effectuant l'envoi des annotations */ |
|
276 IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() { |
|
277 /* Si les champs obligatoires sont vides, on annule l'envoi */ |
|
278 if (!this.onDescriptionChange() || (this.show_title_field && !this.onTitleChange()) || (this.show_creator_field && !this.onCreatorChange())) { |
|
279 return; |
|
280 } |
|
281 |
|
282 var _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */ |
|
283 _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* Création d'un objet source utilisant un sérialiseur spécifique pour l'export */ |
|
284 _annotation = new IriSP.Model.Annotation(false, _export), /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */ |
|
285 _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type), /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */ |
|
286 _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)), /* Si le Type d'Annotation n'existe pas, il est créé à la volée */ |
|
287 _url = Mustache.to_html(this.api_endpoint_template, {id: this.source.projectId}); /* Génération de l'URL à laquelle l'annotation doit être envoyée, qui doit inclure l'ID du projet */ |
|
288 |
|
289 /* Si nous avons dû générer un ID d'annotationType à la volée... */ |
|
290 if (!_annotationTypes.length) { |
|
291 /* Il ne faudra pas envoyer l'ID généré au serveur */ |
|
292 _annotationType.dont_send_id = true; |
|
293 /* Il faut inclure le titre dans le type d'annotation */ |
|
294 _annotationType.title = this.annotation_type; |
|
295 } |
|
296 |
|
297 /* |
|
298 * Nous remplissons les données de l'annotation générée à la volée |
|
299 * ATTENTION: Si nous sommes sur un MASHUP, ces éléments doivent se référer AU MEDIA D'ORIGINE |
|
300 * */ |
|
301 _annotation.setBegin(this.begin); /*Timecode de début */ |
|
302 _annotation.setEnd(this.end); /* Timecode de fin */ |
|
303 _annotation.setMedia(this.source.currentMedia.id); /* Id du média annoté */ |
|
304 |
|
305 _annotation.setAnnotationType(_annotationType.id); /* Id du type d'annotation */ |
|
306 if (this.show_title_field) { |
|
307 /* Champ titre, seulement s'il est visible */ |
|
308 _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val(); |
|
309 } |
|
310 _annotation.created = new Date(); /* Date de création de l'annotation */ |
|
311 _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Champ description */ |
|
312 _annotation.setTags(this.$.find(".Ldt-CreateAnnotation-TagLi.selected") |
|
313 .map(function() { return IriSP.jQuery(this).attr("tag-id")})); /*Liste des ids de tags */ |
|
314 |
|
315 /* Les données créateur/date de création sont envoyées non pas dans l'annotation, mais dans le projet */ |
|
316 if (this.show_creator_field) { |
|
317 _export.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val(); |
|
318 } else { |
|
319 _export.creator = this.creator_name; |
|
320 } |
|
321 _export.created = new Date(); |
|
322 _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */ |
|
323 _export.addList("annotation",_exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */ |
|
324 |
|
325 var _this = this; |
|
326 /* Envoi de l'annotation via AJAX au serveur ! */ |
|
327 IriSP.jQuery.ajax({ |
|
328 url: _url, |
|
329 type: this.api_method, |
|
330 contentType: 'application/json', |
|
331 data: _export.serialize(), /* L'objet Source est sérialisé */ |
|
332 success: function(_data) { |
|
333 _this.showScreen('Saved'); /* Si l'appel a fonctionné, on affiche l'écran "Annotation enregistrée" */ |
|
334 if (_this.after_send_timeout) { /* Selon les options de configuration, on revient à l'écran principal ou on ferme le widget, ou rien */ |
|
335 window.setTimeout( |
|
336 function() { |
|
337 _this.close_after_send |
|
338 ? _this.hide() |
|
339 : _this.showScreen("Main"); |
|
340 }, |
|
341 _this.after_send_timeout |
|
342 ); |
|
343 } |
|
344 _export.getAnnotations().removeElement(_annotation, true); /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */ |
|
345 _export.deSerialize(_data); /* On désérialise les données reçues pour les réinjecter */ |
|
346 _this.source.merge(_export); /* On récupère les données réimportées dans l'espace global des données */ |
|
347 if (_this.pause_on_write && _this.player.popcorn.media.paused) { |
|
348 _this.player.popcorn.play(); |
|
349 } |
|
350 _this.player.popcorn.trigger("IriSP.AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */ |
|
351 }, |
|
352 error: function(_xhr, _error, _thrown) { |
|
353 IriSP.log("Error when sending annotation", _thrown); |
|
354 _export.getAnnotations().removeElement(_annotation, true); |
|
355 _this.showScreen('Error'); |
|
356 window.setTimeout(function(){ |
|
357 _this.showScreen("Main") |
|
358 }, |
|
359 (_this.after_send_timeout || 5000)); |
|
360 } |
|
361 }); |
|
362 this.showScreen('Wait'); |
|
363 |
|
364 return false; |
|
365 } |
|
366 |