diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/CreateAnnotation.js --- a/src/widgets/CreateAnnotation.js Thu Aug 30 14:45:23 2012 +0200 +++ b/src/widgets/CreateAnnotation.js Thu Jan 02 16:40:25 2014 +0100 @@ -1,4 +1,4 @@ -/* TODO: Add Social Network Sharing, Finish Current Timecode Sync & Arrow Takeover */ +/* TODO: Add Social Network Sharing */ IriSP.Widgets.CreateAnnotation = function(player, config) { IriSP.Widgets.Widget.call(this, player, config); @@ -7,12 +7,14 @@ IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget(); IriSP.Widgets.CreateAnnotation.prototype.defaults = { - show_title_field : false, /* For the moment, titles can't be sent to ldtplatform */ + show_title_field : true, show_creator_field : true, start_visible : true, always_visible : false, - sync_on_slice_widget : true, /* If false, syncs on current timecode */ - takeover_arrow : false, + show_slice : true, + show_arrow : true, + show_mic_record: false, + show_mic_play: false, minimize_annotation_widget : true, creator_name : "", creator_avatar : "", @@ -37,13 +39,15 @@ background_color: "#f0e000", text_color: "#000000" }], + slice_annotation_type: "chap", annotation_type: "Contributions", api_serializer: "ldt_annotate", api_endpoint_template: "", - api_method: "PUT", + api_method: "POST", after_send_timeout: 0, close_after_send: false, -} + tag_prefix: "#" +}; IriSP.Widgets.CreateAnnotation.prototype.messages = { en: { @@ -52,59 +56,85 @@ at_time: "at", submit: "Submit", add_keywords_: "Add keywords:", - add_polemic_keywords_: "Add polemic keywords:", + add_polemic_keywords_: "Add polemic attributes :", your_name_: "Your name:", - no_title: "Annotate this video", + annotate_video: "Annotate this video", type_title: "Annotation title", - type_description: "Type the full description of your annotation here.", - wait_while_processing: "Please wait while your request is being processed...", + type_description: "Type the full contents of your annotation here.", + wait_while_processing: "Please wait while your annotation is being processed...", error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.", - empty_annotation: "Your annotation is empty. Please write something before submitting.", annotation_saved: "Thank you, your annotation has been saved.", share_annotation: "Would you like to share it on social networks ?", - share_on: "Share on", - more_tags: "More tags", - cancel: "Cancel", - close_widget: "Cacher la zone de création d'annotations" + close_widget: "Hide the annotation form", + "polemic++": "Agree", + "polemic--": "Disagree", + "polemic??": "Question", + "polemic==": "Reference" }, fr: { from_time: "de", to_time: "à", at_time: "à", submit: "Envoyer", - add_keywords_: "Ajouter des mots-clés :", - add_polemic_keywords_: "Ajouter des mots-clés polémiques :", - your_name_: "Votre nom :", - no_title: "Annoter cette vidéo", + add_keywords_: "Ajouter des mots-clés\u00a0:", + add_polemic_keywords_: "Ajouter des attributs polémiques\u00a0:", + your_name_: "Votre nom\u00a0:", + annotate_video: "Annoter cette vidéo", type_title: "Titre de l'annotation", - type_description: "Rédigez le contenu de votre annotation ici.", - wait_while_processing: "Veuillez patienter pendant le traitement de votre requête...", - error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée", - empty_annotation: "Votre annotation est vide. Merci de rédiger un texte avant de l'envoyer.", + type_description: "Rédigez ici le contenu de votre annotation.", + wait_while_processing: "Veuillez patienter pendant le traitement de votre annotation...", + error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée.", annotation_saved: "Merci, votre annotation a été enregistrée.", share_annotation: "Souhaitez-vous la partager sur les réseaux sociaux ?", - share_on: "Partager sur", - more_tags: "Plus de mots-clés", - cancel: "Cancel", - close_widget: "Hide the annotation creating block" + close_widget: "Cacher le formulaire de création d'annotations", + "polemic++": "Accord", + "polemic--": "Désaccord", + "polemic??": "Question", + "polemic==": "Référence" } -} +}; IriSP.Widgets.CreateAnnotation.prototype.template = - '
' + '{{#show_slice}}
{{/show_slice}}' + + '{{^show_slice}}{{#show_arrow}}
{{/show_arrow}}{{/show_slice}}' + + '
' + '
' - + '

{{#show_title_field}}{{/show_title_field}}' - + '{{^show_title_field}}{{l10n.no_title}} {{/show_title_field}}' - + ' {{#sync_on_slice_widget}}{{l10n.from_time}} {{/sync_on_slice_widget}}{{^sync_on_slice_widget}}{{l10n.at_time}} {{/sync_on_slice_widget}} 00:00' - + '{{#sync_on_slice_widget}} {{l10n.to_time}} 00:00{{/sync_on_slice_widget}}' - + '{{#show_creator_field}}{{l10n.your_name_}}

{{/show_creator_field}}' - + '' + + '

{{l10n.annotate_video}}{{#show_title_field}}

' + + '

{{/show_title_field}}' + + ' {{#show_slice}}{{l10n.from_time}} {{/show_slice}}{{^show_slice}}{{l10n.at_time}} {{/show_slice}} 00:00' + + '{{#show_slice}} {{l10n.to_time}} {{end}}{{/show_slice}}' + + '{{#show_creator_field}}{{l10n.your_name_}} {{/show_creator_field}}

' + + '' + '
' + '' + + '{{#show_mic_record}}
Add voice annotation
' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + '
{{/show_mic_record}}' + '{{#tags.length}}
{{l10n.add_keywords_}}
    ' - + '{{#tags}}
  • {{title}}
    • {{/tags}}
{{/tags.length}}' + + '{{#tags}}
  • {{title}}
    • {{/tags}}
    {{/tags.length}}' + '{{#polemics.length}}
    {{l10n.add_polemic_keywords_}}
      ' - + '{{#polemics}}
    • {{keyword}}
      • {{/polemics}}
    {{/polemics.length}}' + + '{{#polemics}}
  • {{keyword}}
    • {{/polemics}}
    {{/polemics.length}}' + '
    ' + '
    {{l10n.wait_while_processing}}
    ' + '
    {{^always_visible}}{{/always_visible}}
    {{l10n.error_while_contacting}}
    ' @@ -113,18 +143,31 @@ 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) { - this.tags = IriSP._(this.tag_titles).map(function(_tag_title) { - var _tag, - _tags = _this.source.getTags().searchByTitle(_tag_title); - if (_tags.length) { - _tag = _tags[0]; - } else { - _tag = new IriSP.Model.Tag(false, _this.source); - _tag.title = _tag_title; - } - return _tag; - }); + 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); + if (_tags.length) { + _tag = _tags[0]; + } else { + _tag = new IriSP.Model.Tag(false, _this.source); + _this.source.getTags().push(_tag); + _tag.title = _tag_title; + } + return _tag; + }); + } + else{ + // we forced no tags if this.tag_titles = [''] (and not false) + this.tags = true; + } } if (!this.tags) { this.tags = this.source.getTags() @@ -137,7 +180,44 @@ }); /* We have to use the map function because Mustache doesn't like our tags object */ } + 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.insertSubwidget( + this.$.find(".Ldt-CreateAnnotation-Slice"), + { + type: "Slice", + show_arrow: this.show_arrow, + annotation_type: this.slice_annotation_type, + onBoundsChanged: function(_from, _to) { + _this.begin = new IriSP.Model.Time(_from || 0); + _this.end = new IriSP.Model.Time(_to || 0); + _this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString()); + _this.$.find(".Ldt-CreateAnnotation-End").html(_this.end.toString()); + } + }, + "slice" + ); + } else { + if (this.show_arrow) { + this.insertSubwidget(this.$.find(".Ldt-CreateAnnotation-Arrow"), {type: "Arrow"},"arrow"); + } + this.onMediaEvent("timeupdate", function(_time) { + _this.begin = new IriSP.Model.Time(_time || 0); + _this.end = new IriSP.Model.Time(_time || 0); + _this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString()); + if (_this.arrow) { + _this.arrow.moveToTime(_time); + } + }); + } this.$.find(".Ldt-CreateAnnotation-Close").click(function() { _this.close_after_send ? _this.hide() @@ -145,9 +225,17 @@ return false; }); this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").click(function() { - _this.addKeyword(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); + _this.addKeyword(IriSP.jQuery(this).attr("data-text")); return false; }); + this.$.find(".Ldt-CreateAnnotation-PolemicLi").each(function() { + var _el = IriSP.jQuery(this), + _kw = _el.attr("data-text"), + _msg = _this.l10n["polemic" + _kw]; + if (_msg) { + _el.attr("title",_msg); + } + }); this.$.find(".Ldt-CreateAnnotation-Description").bind("change keyup input paste", this.functionWrapper("onDescriptionChange")); if (this.show_title_field) { this.$.find(".Ldt-CreateAnnotation-Title").bind("change keyup input paste", this.functionWrapper("onTitleChange")); @@ -163,12 +251,9 @@ this.hide(); } - this.bindPopcorn("IriSP.CreateAnnotation.toggle","toggle"); - this.bindPopcorn("IriSP.Slice.boundsChanged","onBoundsChanged"); - this.begin = new IriSP.Model.Time(); - this.end = this.source.getDuration(); + this.onMdpEvent("CreateAnnotation.toggle","toggle"); this.$.find("form").submit(this.functionWrapper("onSubmit")); -} +}; IriSP.Widgets.CreateAnnotation.prototype.showScreen = function(_screenName) { this.$.find('.Ldt-CreateAnnotation-' + _screenName).show() @@ -178,31 +263,35 @@ IriSP.Widgets.CreateAnnotation.prototype.show = function() { this.visible = true; this.showScreen('Main'); - this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666"); + this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666").addClass("empty"); if (this.show_title_field) { - this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666"); + 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.creator_name) { + this.$.find(".Ldt-CreateAnnotation-Creator").addClass("empty"); + } } this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected"); this.$.slideDown(); if (this.minimize_annotation_widget) { - this.player.popcorn.trigger("IriSP.Annotation.minimize"); + this.player.trigger("Annotation.minimize"); } - this.player.popcorn.trigger("IriSP.Slice.show"); -} +}; IriSP.Widgets.CreateAnnotation.prototype.hide = function() { + if (this.recorder) { + this.recorder.stopRecord(); + } if (!this.always_visible) { this.visible = false; this.$.slideUp(); if (this.minimize_annotation_widget) { - this.player.popcorn.trigger("IriSP.Annotation.maximize"); + this.player.trigger("Annotation.maximize"); } - this.player.popcorn.trigger("IriSP.Slice.hide"); } -} +}; IriSP.Widgets.CreateAnnotation.prototype.toggle = function() { if (!this.always_visible) { @@ -212,14 +301,7 @@ this.show(); } } -} - -IriSP.Widgets.CreateAnnotation.prototype.onBoundsChanged = function(_values) { - this.begin = new IriSP.Model.Time(_values[0] || 0); - this.end = new IriSP.Model.Time(_values[1] || 0); - this.$.find(".Ldt-CreateAnnotation-Begin").html(this.begin.toString()); - this.$.find(".Ldt-CreateAnnotation-End").html(this.end.toString()); -} +}; IriSP.Widgets.CreateAnnotation.prototype.addKeyword = function(_keyword) { var _field = this.$.find(".Ldt-CreateAnnotation-Description"), @@ -231,20 +313,25 @@ ); _field.val(_contents.replace(/\s{2,}/g,' ').replace(/(^\s+|\s+$)/g,'')); this.onDescriptionChange(); -} +}; IriSP.Widgets.CreateAnnotation.prototype.pauseOnWrite = function() { - if (this.pause_on_write && !this.player.popcorn.media.paused) { - this.player.popcorn.pause(); + if (this.pause_on_write && !this.media.getPaused()) { + this.media.pause(); } -} +}; IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function() { var _field = this.$.find(".Ldt-CreateAnnotation-Description"), _contents = _field.val(); _field.css("border-color", !!_contents ? "#666666" : "#ff0000"); + if (!!_contents) { + _field.removeClass("empty"); + } else { + _field.addClass("empty"); + } this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").each(function() { - var _rx = IriSP.Model.regexpFromTextOrArray(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); + var _rx = IriSP.Model.regexpFromTextOrArray(IriSP.jQuery(this).attr("data-text")); if (_contents.match(_rx)) { IriSP.jQuery(this).addClass("selected"); } else { @@ -253,36 +340,51 @@ }); this.pauseOnWrite(); return !!_contents; -} +}; IriSP.Widgets.CreateAnnotation.prototype.onTitleChange = function() { var _field = this.$.find(".Ldt-CreateAnnotation-Title"), _contents = _field.val(); _field.css("border-color", !!_contents ? "#666666" : "#ff0000"); + if (!!_contents) { + _field.removeClass("empty"); + } else { + _field.addClass("empty"); + } this.pauseOnWrite(); return !!_contents; -} +}; IriSP.Widgets.CreateAnnotation.prototype.onCreatorChange = function() { var _field = this.$.find(".Ldt-CreateAnnotation-Creator"), _contents = _field.val(); _field.css("border-color", !!_contents ? "#666666" : "#ff0000"); + if (!!_contents) { + _field.removeClass("empty"); + } else { + _field.addClass("empty"); + } this.pauseOnWrite(); return !!_contents; -} +}; /* Fonction effectuant l'envoi des annotations */ 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; + return false; } - 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 */ + 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), /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */ + _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 */ @@ -298,9 +400,9 @@ * 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 */ - _annotation.setMedia(this.source.currentMedia.id); /* Id du média annoté */ _annotation.setAnnotationType(_annotationType.id); /* Id du type d'annotation */ if (this.show_title_field) { @@ -309,16 +411,42 @@ } _annotation.created = new Date(); /* Date de création de l'annotation */ _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Champ description */ - _annotation.setTags(this.$.find(".Ldt-CreateAnnotation-TagLi.selected") - .map(function() { return IriSP.jQuery(this).attr("tag-id")})); /*Liste des ids de tags */ - - /* Les données créateur/date de création sont envoyées non pas dans l'annotation, mais dans le projet */ + + 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 = _tags[0]; + } else { + _tag = new IriSP.Model.Tag(false, _this.source); + _this.source.getTags().push(_tag); + _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", + href: this.audio_url + }; + } if (this.show_creator_field) { - _export.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val(); + _annotation.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val(); } else { - _export.creator = this.creator_name; + _annotation.creator = this.creator_name; } - _export.created = new Date(); _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */ _export.addList("annotation",_exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */ @@ -336,7 +464,7 @@ function() { _this.close_after_send ? _this.hide() - : _this.showScreen("Main"); + : _this.show(); }, _this.after_send_timeout ); @@ -344,10 +472,10 @@ _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.player.popcorn.media.paused) { - _this.player.popcorn.play(); + if (_this.pause_on_write && _this.media.getPaused()) { + _this.media.play(); } - _this.player.popcorn.trigger("IriSP.AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */ + _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */ }, error: function(_xhr, _error, _thrown) { IriSP.log("Error when sending annotation", _thrown); @@ -362,5 +490,5 @@ this.showScreen('Wait'); return false; -} +};