metadataplayer: comparison src/widgets/CreateAnnotation.js

Mercurial Mercurial > metadataplayer / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

src/widgets/CreateAnnotation.js

changeset 1038	e78b889a75e1
parent 1033	c20df1c080e6
child 1047	c3bf174e0ef8

equal deleted inserted replaced

-:5c0416e8bba1
+:e78b889a75e1
 /* TODO: Add Social Network Sharing */
 IriSP.Widgets.CreateAnnotation = function(player, config) {
-var _this = this;
 IriSP.Widgets.Widget.call(this, player, config);
-if (_this.api_method == 'local' && window.localStorage[_this.api_endpoint_template]) {
-this.source.onLoad(function () {
-var _export = _this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[_this.api_serializer]});
-_export.deSerialize(window.localStorage[_this.api_endpoint_template]);
-console.log("Loaded personal annotations", _export);
-_this.source.merge(_export);
-});
-};
 };
 IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget();
 IriSP.Widgets.CreateAnnotation.prototype.defaults = {
 show_title_field : true,
 show_creator_field : true,
+creator_field_readonly : false,
 start_visible : true,
 always_visible : false,
 show_slice : true,
-show_controls: false,
 show_arrow : true,
 show_mic_record: false,
 show_mic_play: false,
+show_time: true,
 minimize_annotation_widget : true,
 creator_name : "",
 creator_avatar : "",
 tags : false,
 tag_titles : false,
 background_color: "#f0e000",
 text_color: "#000000"
 }],
 slice_annotation_type: "chap",
 annotation_type: "Contributions",
+post_at_segment_time: false,
+segment_annotation_type: "chap",
 api_serializer: "ldt_annotate",
 api_endpoint_template: "",
 api_method: "POST",
+project_id: "",
 after_send_timeout: 0,
 close_after_send: false,
-tag_prefix: "#",
+tag_prefix: "#"
-slice_widget: null
 };
 IriSP.Widgets.CreateAnnotation.prototype.messages = {
 en: {
 from_time: "from",
 + '{{^show_slice}}{{#show_arrow}}<div class="Ldt-CreateAnnotation-Arrow"></div>{{/show_arrow}}{{/show_slice}}'
 + '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">'
 + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">'
 + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{l10n.annotate_video}}{{#show_title_field}}</span></h3>'
 + '<h3><span class="Ldt-CreateAnnotation-h3Left"><input class="Ldt-CreateAnnotation-Title empty" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
-+ '<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>'
++ '{{#show_time}}<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>{{/show_time}}'
 + '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">{{end}}</span>{{/show_slice}}</span></span>'
-+ '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator empty" value="{{creator_name}}" />{{/show_creator_field}}</h3>'
++ '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator empty" value="{{creator_name}}" {{#creator_field_readonly}}readonly{{/creator_field_readonly}}/>{{/show_creator_field}}</h3>'
-+ '{{#show_controls}}<div class="Ldt-CreateAnnotation-Controls">'
-+   '<span class="Ldt-CreateAnnotation-Control-In">IN</span>'
-+   '<span class="Ldt-CreateAnnotation-Control-Out">OUT</span>'
-+   '<span class="Ldt-CreateAnnotation-Control-Play">Play</span>'
-+ '</div>{{/show_controls}}'
 + '<textarea class="Ldt-CreateAnnotation-Description empty" placeholder="{{l10n.type_description}}"></textarea>'
-+ '{{#show_creator_field}}<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>{{/show_creator_field}}'
++ '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>'
 + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />'
 + '{{#show_mic_record}}<div class="Ldt-CreateAnnotation-RecBlock"><div class="Ldt-CreateAnnotation-RecLabel">Add voice annotation</div>'
 + '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="160">'
 + '        <param name="movie" value="{{record_swf}}" />'
 + '        <param name="quality" value="high" />'
 + '             type="application/x-shockwave-flash" allowFullScreen="true" wmode="transparent" '
 + '             flashvars="playVisible={{show_mic_play}}"'
 + '             pluginspage="http://www.macromedia.com/go/getflashplayer">'
 + '        </embed>'
 + '    </object>'
 + '</div>{{/show_mic_record}}'
 + '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">'
 + '{{#tags}}<li class="Ldt-CreateAnnotation-TagLi" tag-id="{{id}}" data-text="{{tag_prefix}}{{title}}"><span class="Ldt-CreateAnnotation-TagButton">{{title}}</span></li>{{/tags}}</ul></div>{{/tags.length}}'
 + '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">'
 + '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}" data-text="{{keyword}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}'
 + '<div style="clear: both;"></div></form>'
 + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Wait"><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.wait_while_processing}}</div></div>'
 + '<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>'
 + '<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>'
 + '</div></div>';
 IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
 var _this = this;
 this.begin = new IriSP.Model.Time();
 this.end = this.source.getDuration();
 this.tag_prefix = this.tag_prefix || "";
 if (this.tag_titles && !this.tags) {
 		if(!(this.tag_titles.length==1 && this.tag_titles[0]=="")){
 			this.tags = IriSP._(this.tag_titles).map(function(_tag_title) {
 				var _tag,
 					_tags = _this.source.getTags().searchByTitle(_tag_title, true);
 }
 this.record_swf = IriSP.getLib("recordMicSwf");
 this.renderTemplate();
 if (this.show_mic_record) {
 this.recorder = this.$.find("embed")[0];
 window.setAudioUrl = function(_url) {
 _this.audio_url = _url;
-};
+}
 }
 if (this.show_slice) {
-this.slice_widget = this.insertSubwidget(
+this.insertSubwidget(
 this.$.find(".Ldt-CreateAnnotation-Slice"),
 {
 type: "Slice",
 show_arrow: this.show_arrow,
 annotation_type: this.slice_annotation_type,
 this.$.find(".Ldt-CreateAnnotation-Title").bind("change keyup input paste", this.functionWrapper("onTitleChange"));
 }
 if (this.show_creator_field) {
 this.$.find(".Ldt-CreateAnnotation-Creator").bind("change keyup input paste", this.functionWrapper("onCreatorChange"));
 }
-this.$.find("[class^='Ldt-CreateAnnotation-Control-']").click(function() {
-var action = this.className.replace('Ldt-CreateAnnotation-Control-', '');
-switch (action) {
-case "In":
-// Set In bound to current player time
-_this.begin = new IriSP.Model.Time(_this.media.getCurrentTime() || 0);
-_this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString());
-break;
-case "Out":
-// Set In bound to current player time
-_this.end = new IriSP.Model.Time(_this.media.getCurrentTime() || _this.media.duration);
-_this.$.find(".Ldt-CreateAnnotation-End").html(_this.end.toString());
-break;
-case "Play":
-_this.media.setCurrentTime(_this.begin);
-_this.media.play()
-break;
-}
-return false;
-});
 if (this.start_visible) {
 this.show();
 } else {
 this.$.hide();
 this.hide();
 }
 this.onMdpEvent("CreateAnnotation.toggle","toggle");
+this.onMdpEvent("CreateAnnotation.hide", "hide");
+this.onMdpEvent("CreateAnnotation.show", "show");
 this.$.find("form").submit(this.functionWrapper("onSubmit"));
 };
 IriSP.Widgets.CreateAnnotation.prototype.showScreen = function(_screenName) {
 this.$.find('.Ldt-CreateAnnotation-' + _screenName).show()
 .siblings().hide();
 }
 IriSP.Widgets.CreateAnnotation.prototype.show = function() {
-this.visible = true;
+if (!this.visible){
-this.showScreen('Main');
+this.visible = true;
-this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666").addClass("empty");
+this.showScreen('Main');
-if (this.show_title_field) {
+this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666").addClass("empty");
-this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666").addClass("empty");
+if (this.show_title_field) {
-}
+this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666").addClass("empty");
-if (this.show_creator_field) {
+}
-this.$.find(".Ldt-CreateAnnotation-Creator").val(this.creator_name).css("border-color", "#666666");
+if (this.show_creator_field) {
-if (!this.creator_name) {
+this.$.find(".Ldt-CreateAnnotation-Creator").val(this.creator_name).css("border-color", "#666666");
-this.$.find(".Ldt-CreateAnnotation-Creator").addClass("empty");
+if (!this.creator_name) {
-}
+this.$.find(".Ldt-CreateAnnotation-Creator").addClass("empty");
 }
-this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected");
+}
-this.$.slideDown();
+this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected");
-if (this.minimize_annotation_widget) {
+this.$.slideDown();
-this.player.trigger("Annotation.minimize");
+if (this.minimize_annotation_widget) {
+this.player.trigger("Annotation.minimize");
+}
 }
 };
 IriSP.Widgets.CreateAnnotation.prototype.hide = function() {
-if (this.recorder) {
+if (this.visible){
-this.recorder.stopRecord();
+if (this.recorder) {
-}
+this.recorder.stopRecord();
-if (!this.always_visible) {
+}
-this.visible = false;
+if (!this.always_visible) {
-this.$.slideUp();
+this.visible = false;
-if (this.minimize_annotation_widget) {
+this.$.slideUp();
-this.player.trigger("Annotation.maximize");
+if (this.minimize_annotation_widget) {
+this.player.trigger("Annotation.maximize");
+}
 }
 }
 };
 IriSP.Widgets.CreateAnnotation.prototype.toggle = function() {
-var _this = this;
 if (!this.always_visible) {
 if (this.visible) {
 this.hide();
 } else {
-_this.begin = new IriSP.Model.Time(_this.media.getCurrentTime() || 0);
-_this.end = new IriSP.Model.Time(_this.media.getCurrentTime() || 0);
-_this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString());
-_this.$.find(".Ldt-CreateAnnotation-End").html(_this.end.toString());
-if (_this.slice_widget) {
-_this.slice_widget.setBounds(_this.begin, _this.end);
-}
 this.show();
 }
 }
 };
 IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {
 /* Si les champs obligatoires sont vides, on annule l'envoi */
 if (!this.onDescriptionChange() || (this.show_title_field && !this.onTitleChange()) || (this.show_creator_field && !this.onCreatorChange())) {
 return false;
 }
 if (this.recorder) {
 this.recorder.stopRecord();
 }
 var _this = this,
 _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */
 _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 */
 _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) */
 _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */
 _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 */
 _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 */
 /* Si nous avons dû générer un ID d'annotationType à la volée... */
 if (!_annotationTypes.length) {
 /* Il ne faudra pas envoyer l'ID généré au serveur */
 _annotationType.dont_send_id = true;
 /* Il faut inclure le titre dans le type d'annotation */
 _annotationType.title = this.annotation_type;
 }
 /*
 * Nous remplissons les données de l'annotation générée à la volée
 * ATTENTION: Si nous sommes sur un MASHUP, ces éléments doivent se référer AU MEDIA D'ORIGINE
 * */
 _annotation.setMedia(this.source.currentMedia.id); /* Id du média annoté */
-_annotation.setBegin(this.begin); /*Timecode de début */
-_annotation.setEnd(this.end); /* Timecode de fin */
+if (this.post_at_segment_time){
-_annotation.created = new Date(); /* Date de création de l'annotation */
+var _currentTime = this.media.getCurrentTime()
+var _segmentsAnnotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
+var _currentSegments = _segmentsAnnotations.filter(function(_segment){
+return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+});
+if (_currentSegments.length == 0){
+_annotation.setBegin(this.begin); /* Timecode de début du widget */
+_annotation.setEnd(this.end); /* Timecode de fin du widget */
+}
+else {
+_annotation.setBegin(_currentSegments[0].begin); /* Timecode de début du segment */
+_annotation.setEnd(_currentSegments[0].end); /* Timecode de fin du segment */
+}
+}
+else {
+_annotation.setBegin(this.begin); /*Timecode de début du widget */
+_annotation.setEnd(this.end); /* Timecode de fin du widget */
+}
 _annotation.setAnnotationType(_annotationType.id); /* Id du type d'annotation */
-_annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Champ description */
 if (this.show_title_field) {
 /* Champ titre, seulement s'il est visible */
 _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val();
-} else {
+}if (this.project_id != ""){
-_annotation.title = _annotation.description;
+	/* Champ id projet, seulement si on l'a renseigné dans la config */
-}
+	_annotation.project_id = this.project_id;
+}
+_annotation.created = new Date(); /* Date de création de l'annotation */
+_annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Champ description */
 var tagIds = Array.prototype.map.call(
 this.$.find(".Ldt-CreateAnnotation-TagLi.selected"),
 function(el) { return IriSP.jQuery(el).attr("tag-id")}
 );
 IriSP._(_annotation.description.match(/#[^\s#.,;]+/g)).each(function(_tt) {
 var _tag,
 _tag_title = _tt.replace(/^#/,''),
 _tags = _this.source.getTags().searchByTitle(_tag_title, true);
 if (_tags.length) {
 _tag.title = _tag_title;
 }
 if (tagIds.indexOf(_tag.id) === -1) {
 tagIds.push(_tag.id);
 }
 })
 _annotation.setTags(IriSP._(tagIds).uniq()); /*Liste des ids de tags */
 if (this.audio_url) {
 _annotation.audio = {
 src: "mic",
 mimetype: "audio/mp3",
 _annotation.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val();
 } else {
 _annotation.creator = this.creator_name;
 }
 _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */
+_export.addList("annotation",_exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */
-if (this.api_method == 'local') {
+var _this = this;
-// Append to existing localStorage annotations
+/* Envoi de l'annotation via AJAX au serveur ! */
-// FIXME: handle movie ids
+IriSP.jQuery.ajax({
-/* Use localStorage */
+url: _url,
-/* Data will be serialized in the localStore property designated by api_endpoint_template */
+type: this.api_method,
-_export.addList("annotation", _exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */
+contentType: 'application/json',
-_this.source.merge(_export); /* On ajoute la nouvelle annotation au recueil original */
+data: _export.serialize(), /* L'objet Source est sérialisé */
-// Import previously saved local annotations
+success: function(_data) {
-if (window.localStorage[_this.api_endpoint_template]) {
+_this.showScreen('Saved'); /* Si l'appel a fonctionné, on affiche l'écran "Annotation enregistrée" */
-_export.deSerialize(window.localStorage[_this.api_endpoint_template]);
+if (_this.after_send_timeout) { /* Selon les options de configuration, on revient à l'écran principal ou on ferme le widget, ou rien */
-}
+window.setTimeout(
-// Save everything back
+function() {
-window.localStorage[_this.api_endpoint_template] = _export.serialize();
+_this.close_after_send
-if (_this.pause_on_write && _this.media.getPaused()) {
+? _this.hide()
-_this.media.play();
+: _this.show();
-}
+},
-_this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
+_this.after_send_timeout
-_this.$.find(".Ldt-CreateAnnotation-Description").val("");
+);
-} else {
+}
-_export.addList("annotation",_exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */
+_export.getAnnotations().removeElement(_annotation, true); /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */
-/* Envoi de l'annotation via AJAX au serveur ! */
+_export.deSerialize(_data); /* On désérialise les données reçues pour les réinjecter */
-IriSP.jQuery.ajax({
+_this.source.merge(_export); /* On récupère les données réimportées dans l'espace global des données */
-url: _url,
+if (_this.pause_on_write && _this.media.getPaused()) {
-type: this.api_method,
+_this.media.play();
-contentType: 'application/json',
+}
-data: _export.serialize(), /* L'objet Source est sérialisé */
+_this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
-success: function(_data) {
+},
-_this.showScreen('Saved'); /* Si l'appel a fonctionné, on affiche l'écran "Annotation enregistrée" */
+error: function(_xhr, _error, _thrown) {
-if (_this.after_send_timeout) { /* Selon les options de configuration, on revient à l'écran principal ou on ferme le widget, ou rien */
+IriSP.log("Error when sending annotation", _thrown);
-window.setTimeout(
+_export.getAnnotations().removeElement(_annotation, true);
-function() {
+_this.showScreen('Error');
-_this.close_after_send
+window.setTimeout(function(){
-? _this.hide()
+_this.showScreen("Main")
-: _this.show();
-},
-_this.after_send_timeout
-);
-}
-_export.getAnnotations().removeElement(_annotation, true); /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */
-_export.deSerialize(_data); /* On désérialise les données reçues pour les réinjecter */
-_this.source.merge(_export); /* On récupère les données réimportées dans l'espace global des données */
-if (_this.pause_on_write && _this.media.getPaused()) {
-_this.media.play();
-}
-_this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
 },
-error: function(_xhr, _error, _thrown) {
+(_this.after_send_timeout || 5000));
-IriSP.log("Error when sending annotation", _thrown);
+}
-_export.getAnnotations().removeElement(_annotation, true);
+});
-_this.showScreen('Error');
+this.showScreen('Wait');
-window.setTimeout(function(){
-_this.showScreen("Main")
-},
-(_this.after_send_timeout || 5000));
-}
-});
-this.showScreen('Wait');
-}
 return false;
 };

metadataplayer