|
1 /* Internationalization for this widget */ |
|
2 |
|
3 IriSP.i18n.addMessages( |
|
4 { |
|
5 "en": { |
|
6 "submit": "Submit", |
|
7 "add_keywords": "Add keywords", |
|
8 "add_polemic_keywords": "Add polemic keywords", |
|
9 "your_name": "Your name", |
|
10 "type_here": "Type your annotation here.", |
|
11 "wait_while_processed": "Please wait while your request is being processed...", |
|
12 "error_while_contacting": "An error happened while contacting the server. Your annotation has not been saved.", |
|
13 "empty_annotation": "Your annotation is empty. Please write something before submitting.", |
|
14 "annotation_saved": "Thank you, your annotation has been saved.", |
|
15 "share_annotation": "Would you like to share it on social networks ?", |
|
16 "share_on": "Share on", |
|
17 "more_tags": "More tags" |
|
18 }, |
|
19 "fr": { |
|
20 "submit": "Envoyer", |
|
21 "add_keywords": "Ajouter des mots-clés", |
|
22 "add_polemic_keywords": "Ajouter des mots-clés polémiques", |
|
23 "your_name": "Votre nom", |
|
24 "type_here": "Rédigez votre annotation ici.", |
|
25 "wait_while_processed": "Veuillez patienter pendant le traitement de votre requête...", |
|
26 "error_while_contacting": "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée", |
|
27 "empty_annotation": "Votre annotation est vide. Merci de rédiger un texte avant de l'envoyer.", |
|
28 "annotation_saved": "Merci, votre annotation a été enregistrée.", |
|
29 "share_annotation": "Souhaitez-vous la partager sur les réseaux sociaux ?", |
|
30 "share_on": "Partager sur", |
|
31 "more_tags": "Plus de mots-clés" |
|
32 } |
|
33 } |
|
34 ); |
|
35 |
|
36 IriSP.createAnnotationWidget = function(Popcorn, config, Serializer) { |
|
37 IriSP.Widget.call(this, Popcorn, config, Serializer); |
|
38 this._hidden = true; |
|
39 |
|
40 if (!IriSP.null_or_undefined(IriSP.user)) { |
|
41 if (!IriSP.null_or_undefined(IriSP.user.avatar)) { |
|
42 this.user_avatar = IriSP.user.avatar; |
|
43 } |
|
44 if (!IriSP.null_or_undefined(IriSP.user.name)) { |
|
45 this.user_name = IriSP.user.name; |
|
46 } |
|
47 } |
|
48 |
|
49 /* variables to save the current position of the slicer */ |
|
50 if (this.cinecast_version) { |
|
51 this.sliceLeft = 0; |
|
52 this.sliceWidth = 0; |
|
53 } |
|
54 }; |
|
55 |
|
56 |
|
57 IriSP.createAnnotationWidget.prototype = new IriSP.Widget(); |
|
58 |
|
59 IriSP.createAnnotationWidget.prototype.clear = function() { |
|
60 this.selector.find(".Ldt-SaTitle").text(""); |
|
61 this.selector.find(".Ldt-SaDescription").text(""); |
|
62 this.selector.find(".Ldt-SaKeywordText").text(""); |
|
63 }; |
|
64 |
|
65 IriSP.createAnnotationWidget.prototype.draw = function() { |
|
66 var _this = this; |
|
67 if (typeof this.remote_tags == "object") { |
|
68 IriSP.jQuery.getJSON((typeof this.remote_tags.alias == "string" ? this.remote_tags.alias : this.remote_tags.url), function(_json) { |
|
69 _this.tags = _json.tags; |
|
70 _this.drawCallback(); |
|
71 }); |
|
72 } else { |
|
73 this.drawCallback(); |
|
74 } |
|
75 } |
|
76 |
|
77 IriSP.createAnnotationWidget.prototype.drawCallback = function() { |
|
78 var _this = this; |
|
79 |
|
80 var annotationMarkup = IriSP.templToHTML(IriSP.createAnnotationWidget_template, |
|
81 this); |
|
82 |
|
83 this.selector.append(annotationMarkup); |
|
84 |
|
85 if (!this.cinecast_version) |
|
86 this.selector.hide(); |
|
87 else { |
|
88 this.showStartScreen(); |
|
89 } |
|
90 |
|
91 if (this.random_tags) { |
|
92 this.selector.find(".Ldt-createAnnotation-keywords li").hide(); |
|
93 this.showMoreTags(); |
|
94 this.selector.find('.Ldt-createAnnotation-moar-keywordz').click(function() { |
|
95 _this.showMoreTags(); |
|
96 }) |
|
97 } |
|
98 // Add onclick event to both polemic and keywords buttons |
|
99 |
|
100 this.selector.find(".Ldt-createAnnotation-keyword-button, .Ldt-createAnnotation-polemic-button").click(function() { |
|
101 _this.addKeyword(IriSP.jQuery(this).text()); |
|
102 return false; |
|
103 }); |
|
104 |
|
105 // js_mod is a custom event because there's no simple way to test for a js |
|
106 // change in a textfield. |
|
107 this.selector.find(".Ldt-createAnnotation-Description") |
|
108 .bind("propertychange keyup input paste click js_mod", IriSP.wrap(this, this.handleTextChanges)) |
|
109 .keyup(function(_e) { |
|
110 console.log(_e); |
|
111 }); |
|
112 |
|
113 /* the cinecast version of the player is supposed to pause when the user clicks on the button */ |
|
114 |
|
115 /* the cinecast version expects the user to comment on a defined segment. |
|
116 As the widget is always shown, we need a way to update it's content as |
|
117 time passes. We do this like we did with the annotationsWidget : we schedule |
|
118 a .code start function which will be called at the right time. |
|
119 */ |
|
120 if (this.cinecast_version) { |
|
121 var legal_ids; |
|
122 if (typeof(this._serializer.getChapitrage()) !== "undefined") |
|
123 legal_id = this._serializer.getChapitrage(); |
|
124 else |
|
125 legal_id = this._serializer.getNonTweetIds()[0]; |
|
126 |
|
127 var annotations = this._serializer._data.annotations; |
|
128 var i; |
|
129 |
|
130 for (i in annotations) { |
|
131 var annotation = annotations[i]; |
|
132 if (typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined" |
|
133 && legal_id !== annotation.meta["id-ref"]) { |
|
134 continue; |
|
135 } |
|
136 |
|
137 code = {start: annotation.begin / 1000, end: annotation.end / 1000, |
|
138 onStart: function(annotation) { return function() { |
|
139 if (typeof(annotation.content) !== "undefined") |
|
140 _this.selector.find(".Ldt-createAnnotation-Title").html(annotation.content.title); |
|
141 |
|
142 _this._currentAnnotation = annotation; |
|
143 var beginTime = IriSP.msToTime(annotation.begin); |
|
144 var endTime = IriSP.msToTime(annotation.end); |
|
145 var timeTemplate = IriSP.templToHTML("- ({{begin}} - {{ end }})", {begin: beginTime, end: endTime }); |
|
146 _this.selector.find(".Ldt-createAnnotation-TimeFrame").html(timeTemplate); |
|
147 } }(annotation) |
|
148 }; |
|
149 |
|
150 this._Popcorn.code(code); |
|
151 } |
|
152 } |
|
153 |
|
154 this.selector.find(".Ldt-createAnnotation-submitButton").click(IriSP.wrap(this, this.handleButtonClick)); |
|
155 |
|
156 if (!this.cinecast_version) { |
|
157 this._Popcorn.listen("IriSP.PlayerWidget.AnnotateButton.clicked", |
|
158 IriSP.wrap(this, this.handleAnnotateSignal)); |
|
159 |
|
160 // handle clicks on the cancel button too. |
|
161 this.selector.find(".Ldt-createAnnotation-Minimize").click(IriSP.wrap(this, |
|
162 function() { |
|
163 // we've got to simulate the pressing of the button because there's no |
|
164 // other way to minimize the widget and show the widgets that were hidden |
|
165 // same time |
|
166 this._Popcorn.trigger("IriSP.PlayerWidget.AnnotateButton.clicked"); |
|
167 } |
|
168 )); |
|
169 } |
|
170 }; |
|
171 |
|
172 IriSP.createAnnotationWidget.prototype.showMoreTags = function() { |
|
173 for (var j=0; j < this.random_tags; j++) { |
|
174 var _jq = this.selector.find(".Ldt-createAnnotation-keywords li:hidden"); |
|
175 if (_jq.length > 1) { |
|
176 IriSP.jQuery(_jq[Math.floor(_jq.length*Math.random())]).show(); |
|
177 } else { |
|
178 _jq.show(); |
|
179 break; |
|
180 } |
|
181 } |
|
182 if (this.selector.find(".Ldt-createAnnotation-keywords li:hidden").length == 0) { |
|
183 this.selector.find('.Ldt-createAnnotation-moar-keywordz').hide(); |
|
184 } |
|
185 } |
|
186 |
|
187 /* Handles adding keywords and polemics */ |
|
188 IriSP.createAnnotationWidget.prototype.addKeyword = function(_keyword) { |
|
189 var _field = this.selector.find(".Ldt-createAnnotation-Description"), |
|
190 _rx = IriSP.regexpFromText(_keyword), |
|
191 _contents = _field.val(); |
|
192 _contents = ( _rx.test(_contents) |
|
193 ? _contents.replace(_rx,"").replace(" "," ").trim() |
|
194 : _contents.trim() + " " + _keyword |
|
195 ); |
|
196 _field.val(_contents.trim()); |
|
197 _field.trigger("js_mod"); |
|
198 } |
|
199 |
|
200 /** handles clicks on the annotate button. Works only for the non-cinecast version */ |
|
201 IriSP.createAnnotationWidget.prototype.handleAnnotateSignal = function() { |
|
202 |
|
203 if (this._hidden == false && this._state == 'startScreen') { |
|
204 this.selector.hide(); |
|
205 this._hidden = true; |
|
206 |
|
207 // free the arrow. |
|
208 this._Popcorn.trigger("IriSP.ArrowWidget.releaseArrow"); |
|
209 this._Popcorn.trigger("IriSP.SliceWidget.hide"); |
|
210 this._Popcorn.trigger("IriSP.AnnotationsWidget.show"); |
|
211 |
|
212 } else { |
|
213 this._Popcorn.trigger("IriSP.AnnotationsWidget.hide"); |
|
214 this.showStartScreen(); |
|
215 this.selector.show(); |
|
216 this._hidden = false; |
|
217 var currentTime = this._Popcorn.currentTime(); |
|
218 |
|
219 // block the arrow. |
|
220 this._Popcorn.trigger("IriSP.ArrowWidget.blockArrow"); |
|
221 |
|
222 var duration = this.getDuration(); |
|
223 |
|
224 var currentChapter = this._serializer.currentChapitre(currentTime); |
|
225 |
|
226 if (IriSP.null_or_undefined(currentChapter)) { |
|
227 var left = this.selector.width() / 2; |
|
228 var width = this.selector.width() / 10; |
|
229 } else { |
|
230 var left = (currentChapter.begin / duration) * this.selector.width(); |
|
231 var width = (currentChapter.end / duration) * this.selector.width() - left; |
|
232 } |
|
233 |
|
234 // slider position and length is kept in percents. |
|
235 this.sliceLeft = (left / this.selector.width()) * 100; |
|
236 this.sliceWidth = (width / this.selector.width()) * 100; |
|
237 |
|
238 this._Popcorn.trigger("IriSP.SliceWidget.position", [left, width]); |
|
239 this._Popcorn.listen("IriSP.SliceWidget.zoneChange", IriSP.wrap(this, this.handleSliderChanges)); |
|
240 this._Popcorn.trigger("IriSP.SliceWidget.show"); |
|
241 |
|
242 if (!IriSP.null_or_undefined(currentChapter)) { |
|
243 this.selector.find(".Ldt-createAnnotation-Title").html(currentChapter.content.title); |
|
244 |
|
245 this._currentcurrentChapter = currentChapter; |
|
246 var beginTime = IriSP.msToTime(currentChapter.begin); |
|
247 var endTime = IriSP.msToTime(currentChapter.end); |
|
248 var timeTemplate = IriSP.templToHTML("- ({{begin}} - {{ end }})", {begin: beginTime, end: endTime }); |
|
249 this.selector.find(".Ldt-createAnnotation-TimeFrame").html(timeTemplate); |
|
250 } |
|
251 } |
|
252 }; |
|
253 |
|
254 |
|
255 /** watch for changes in the textfield and change the buttons accordingly */ |
|
256 IriSP.createAnnotationWidget.prototype.handleTextChanges = function(event) { |
|
257 var contents = this.selector.find(".Ldt-createAnnotation-Description").val(); |
|
258 if (this.cinecast_version) { |
|
259 this._Popcorn.pause(); |
|
260 } |
|
261 this.selector.find(".Ldt-createAnnotation-btnblock button").each(function() { |
|
262 var _rx = IriSP.regexpFromText(IriSP.jQuery(this).text()); |
|
263 if (_rx.test(contents)) { |
|
264 IriSP.jQuery(this).parent().addClass("Ldt-createAnnotation-active-button"); |
|
265 } else { |
|
266 IriSP.jQuery(this).parent().removeClass("Ldt-createAnnotation-active-button"); |
|
267 } |
|
268 }); |
|
269 |
|
270 }; |
|
271 |
|
272 IriSP.createAnnotationWidget.prototype.showStartScreen = function() { |
|
273 this.selector.find(".Ldt-createAnnotation-screen").hide(); |
|
274 this.selector.find(".Ldt-createAnnotation-startScreen").show(); |
|
275 |
|
276 var jqTextfield = this.selector.find(".Ldt-createAnnotation-Description"); // handle on the textfield. used for the closure |
|
277 |
|
278 /* test if the browser supports the placeholder attribute */ |
|
279 if (!IriSP.null_or_undefined(jqTextfield.get(0).placeholder)) { |
|
280 jqTextfield.attr("placeholder", IriSP.i18n.getMessage('type_here')); |
|
281 } else { |
|
282 jqTextfield.val(IriSP.i18n.getMessage('type_here')); |
|
283 jqTextfield.one("click", IriSP.wrap(this, function() { jqTextfield.val(""); })); |
|
284 } |
|
285 |
|
286 |
|
287 |
|
288 this._state = "startScreen"; |
|
289 }; |
|
290 |
|
291 IriSP.createAnnotationWidget.prototype.showWaitScreen = function() { |
|
292 this.selector.find(".Ldt-createAnnotation-screen").hide(); |
|
293 this.selector.find(".Ldt-createAnnotation-waitScreen").show(); |
|
294 this._state = "waitScreen"; |
|
295 }; |
|
296 |
|
297 IriSP.createAnnotationWidget.prototype.showErrorScreen = function() { |
|
298 this.selector.find(".Ldt-createAnnotation-screen").hide(); |
|
299 this.selector.find(".Ldt-createAnnotation-errorScreen").show(); |
|
300 this._state = "errorScreen"; |
|
301 var _this = this; |
|
302 window.setTimeout(function() { _this.showStartScreen(); }, 2000); |
|
303 }; |
|
304 |
|
305 /** update show the final screen with links to share the created annotation */ |
|
306 IriSP.createAnnotationWidget.prototype.showEndScreen = function(annotation) { |
|
307 this.selector.find(".Ldt-createAnnotation-screen").hide(); |
|
308 |
|
309 if (this.cinecast_version) { |
|
310 this.selector.find(".Ldt-createAnnotation-Title").parent().show(); |
|
311 } |
|
312 |
|
313 var url = ( (typeof annotation.meta == "object" && typeof annotation.meta.url == "string" && annotation.meta.url.length) |
|
314 ? annotation.meta.url |
|
315 : ( document.location.href + "#id=" + annotation.id ) ); |
|
316 var twStatus = IriSP.mkTweetUrl(url); |
|
317 var gpStatus = IriSP.mkGplusUrl(url); |
|
318 var fbStatus = IriSP.mkFbUrl(url); |
|
319 |
|
320 this.selector.find(".Ldt-createAnnotation-endScreen-TweetLink").attr("href", twStatus); |
|
321 this.selector.find(".Ldt-createAnnotation-endScreen-FbLink").attr("href", fbStatus); |
|
322 this.selector.find(".Ldt-createAnnotation-endScreen-GplusLink").attr("href", gpStatus); |
|
323 |
|
324 this.selector.find(".Ldt-createAnnotation-endScreen").show(); |
|
325 this._state = "endScreen"; |
|
326 }; |
|
327 |
|
328 /** handle clicks on "send annotation" button */ |
|
329 IriSP.createAnnotationWidget.prototype.handleButtonClick = function(event) { |
|
330 var _this = this; |
|
331 var textfield = this.selector.find(".Ldt-createAnnotation-Description"); |
|
332 var contents = textfield.val(); |
|
333 |
|
334 if (contents === "") { |
|
335 if (this.selector.find(".Ldt-createAnnotation-errorMessage").length === 0) { |
|
336 this.selector.find(".Ldt-createAnnotation-Container") |
|
337 .after(IriSP.templToHTML(IriSP.createAnnotation_errorMessage_template)); |
|
338 textfield.css("background-color", "#d93c71"); |
|
339 } else { |
|
340 this.selector.find(".Ldt-createAnnotation-errorMessage").show(); |
|
341 } |
|
342 |
|
343 textfield.one("js_mod propertychange keyup input paste", IriSP.wrap(this, function() { |
|
344 var contents = textfield.val(); |
|
345 |
|
346 if (contents !== "") { |
|
347 this.selector.find(".Ldt-createAnnotation-errorMessage").hide(); |
|
348 textfield.css("background-color", ""); |
|
349 } |
|
350 })); |
|
351 } else { |
|
352 this.showWaitScreen(); |
|
353 |
|
354 this.sendLdtData(contents, function(annotation) { |
|
355 if (_this.cinecast_version) { |
|
356 if (_this._Popcorn.media.paused) |
|
357 _this._Popcorn.play(); |
|
358 } |
|
359 |
|
360 if (_this._state == "waitScreen") { |
|
361 _this.showEndScreen(annotation); |
|
362 if (_this.cinecast_version) { |
|
363 window.setTimeout(function() { _this.showStartScreen(); }, 5000); |
|
364 } |
|
365 } |
|
366 // hide the slicer widget |
|
367 if (!_this.cinecast_version) { |
|
368 _this._Popcorn.trigger("IriSP.SliceWidget.hide"); |
|
369 } |
|
370 }); |
|
371 } |
|
372 }; |
|
373 |
|
374 IriSP.createAnnotationWidget.prototype.handleSliderChanges = function(params) { |
|
375 this.sliceLeft = params[0]; |
|
376 this.sliceWidth = params[1]; |
|
377 }; |
|
378 |
|
379 IriSP.createAnnotationWidget.prototype.sendLdtData = function(contents, callback) { |
|
380 var _this = this; |
|
381 var apiJson = { |
|
382 format : "http://advene.org/ns/cinelab/", |
|
383 annotations : [ |
|
384 {} |
|
385 ], |
|
386 meta: {}}; |
|
387 var annotation = apiJson.annotations[0]; |
|
388 |
|
389 annotation.media = this.currentMedia()["id"]; |
|
390 |
|
391 if (this.cinecast_version) { |
|
392 annotation.begin = Math.round(this._Popcorn.currentTime() * 1000); |
|
393 annotation.end = annotation.begin; |
|
394 } else { |
|
395 var duration = this.getDuration(); |
|
396 annotation.begin = +((duration * (this.sliceLeft / 100)).toFixed(0)); |
|
397 annotation.end = +((duration * ((this.sliceWidth + this.sliceLeft) / 100)).toFixed(0)); |
|
398 } |
|
399 |
|
400 // boundary checks |
|
401 annotation.begin = Math.max(0, annotation.begin); |
|
402 annotation.end = Math.min(this.getDuration(), annotation.end); |
|
403 |
|
404 annotation.type = ( this.cinecast_version ? "cinecast:UserAnnotation" : ( this._serializer.getContributions() || "" )); |
|
405 if (typeof(annotation.type) === "undefined") |
|
406 annotation.type = ""; |
|
407 |
|
408 annotation.type_title = "Contributions"; |
|
409 annotation.content = {}; |
|
410 annotation.content.data = contents; |
|
411 if (this.cinecast_version) { |
|
412 var _extract = IriSP.underscore(this._serializer._data.annotations) |
|
413 .filter(function(_a) { |
|
414 return (_a.begin <= annotation.begin && _a.end >= annotation.begin && _a.type == "cinecast:MovieExtract"); |
|
415 }) |
|
416 if (_extract.length) { |
|
417 annotation.extract = _extract[0].id; |
|
418 } |
|
419 } |
|
420 |
|
421 var meta = apiJson.meta; |
|
422 |
|
423 |
|
424 var _username = this.selector.find(".Ldt-createAnnotation-userName").val(); |
|
425 meta.creator = ( |
|
426 (_username && _username.length) |
|
427 ? _username |
|
428 : ( |
|
429 (!IriSP.null_or_undefined(IriSP.user) && !IriSP.null_or_undefined(IriSP.user.name)) |
|
430 ? IriSP.user.name |
|
431 : "Anonymous user" |
|
432 ) |
|
433 ); |
|
434 |
|
435 meta.created = Date().toString(); |
|
436 |
|
437 var _tags = []; |
|
438 IriSP._(this.tags).each(function(_v) { |
|
439 var _rx = IriSP.regexpFromText(_v.meta.description); |
|
440 if (_rx.test(contents)) { |
|
441 _tags.push(_v.id); |
|
442 } |
|
443 }); |
|
444 |
|
445 if (typeof this.remote_tags == "object") { |
|
446 _tags = IriSP._(_tags).map(function(_t) { |
|
447 return _this.remote_tags.id + ':' + _t |
|
448 }); |
|
449 if (typeof apiJson.imports == "undefined") { |
|
450 apiJson.imports = []; |
|
451 } |
|
452 apiJson.imports.push({ |
|
453 "id" : this.remote_tags.id, |
|
454 "url" : this.remote_tags.url |
|
455 }) |
|
456 } |
|
457 annotation.tags = IriSP.underscore.uniq(_tags); |
|
458 |
|
459 var jsonString = JSON.stringify(apiJson); |
|
460 var project_id = this._serializer._data.meta.id; |
|
461 |
|
462 //TODO: extract magic url |
|
463 var url = Mustache.to_html(this.api_endpoint_template, |
|
464 {id: project_id}); |
|
465 |
|
466 IriSP.jQuery.ajax({ |
|
467 url: url, |
|
468 type: this.api_method, |
|
469 contentType: 'application/json', |
|
470 data: jsonString, |
|
471 //dataType: 'json', |
|
472 success: IriSP.wrap(this, function(json, textStatus, XMLHttpRequest) { |
|
473 /* add the annotation to the annotation and tell the world */ |
|
474 var annotation = json.annotations[0]; |
|
475 |
|
476 if (!this.cinecast_version) { |
|
477 /* if the media doesn't have a contributions line, we need to add one */ |
|
478 if (typeof(this._serializer.getContributions()) === "undefined") { |
|
479 /* set up a basic view */ |
|
480 var tmp_view = {"dc:contributor": "perso", "dc:creator": "perso", "dc:title": "Contributions", |
|
481 "id": json.annotations[0].type} |
|
482 |
|
483 |
|
484 IriSP.get_aliased(this._serializer._data, ["annotation_types", "annotation-types"]).push(tmp_view); |
|
485 } |
|
486 |
|
487 delete annotation.tags; |
|
488 annotation.content.description = annotation.content.data; |
|
489 annotation.content.title = ""; |
|
490 delete annotation.content.data; |
|
491 annotation.id = json.annotations[0].id; |
|
492 |
|
493 annotation.meta = meta; |
|
494 annotation.meta["id-ref"] = json.annotations[0]["type"]; |
|
495 } else { |
|
496 annotation.type = "cinecast:UserAnnotation"; |
|
497 } |
|
498 annotation.is_new = true; |
|
499 // everything is shared so there's no need to propagate the change |
|
500 _this._serializer._data.annotations.push(annotation); |
|
501 |
|
502 _this._Popcorn.trigger("IriSP.createAnnotationWidget.addedAnnotation", annotation); |
|
503 this.selector.find(".Ldt-createAnnotation-Description").val(""); |
|
504 callback(annotation); |
|
505 }), |
|
506 error: |
|
507 function(jqXHR, textStatus, errorThrown) { |
|
508 console.log("an error occured while contacting " |
|
509 + url + " and sending " + jsonString + textStatus ); |
|
510 _this.showErrorScreen(); } }); |
|
511 }; |