diff -r 3ab36f402b0c -r 198c2b79f5e1 src/widgets/CreateAnnotation.js --- a/src/widgets/CreateAnnotation.js Thu Jan 02 16:40:25 2014 +0100 +++ b/src/widgets/CreateAnnotation.js Thu Jan 02 16:49:20 2014 +0100 @@ -1,4 +1,4 @@ -/* TODO: Add Social Network Sharing */ +/* TODO: Add Social Network Sharing, Finish Current Timecode Sync & Arrow Takeover */ IriSP.Widgets.CreateAnnotation = function(player, config) { IriSP.Widgets.Widget.call(this, player, config); @@ -7,14 +7,12 @@ IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget(); IriSP.Widgets.CreateAnnotation.prototype.defaults = { - show_title_field : true, + show_title_field : false, /* For the moment, titles can't be sent to ldtplatform */ show_creator_field : true, start_visible : true, always_visible : false, - show_slice : true, - show_arrow : true, - show_mic_record: false, - show_mic_play: false, + sync_on_slice_widget : true, /* If false, syncs on current timecode */ + takeover_arrow : false, minimize_annotation_widget : true, creator_name : "", creator_avatar : "", @@ -39,15 +37,13 @@ background_color: "#f0e000", text_color: "#000000" }], - slice_annotation_type: "chap", annotation_type: "Contributions", api_serializer: "ldt_annotate", api_endpoint_template: "", - api_method: "POST", + api_method: "PUT", after_send_timeout: 0, close_after_send: false, - tag_prefix: "#" -}; +} IriSP.Widgets.CreateAnnotation.prototype.messages = { en: { @@ -56,85 +52,59 @@ at_time: "at", submit: "Submit", add_keywords_: "Add keywords:", - add_polemic_keywords_: "Add polemic attributes :", + add_polemic_keywords_: "Add polemic keywords:", your_name_: "Your name:", - annotate_video: "Annotate this video", + no_title: "Annotate this video", type_title: "Annotation title", - type_description: "Type the full contents of your annotation here.", - wait_while_processing: "Please wait while your annotation is being processed...", + type_description: "Type the full description of your annotation here.", + wait_while_processing: "Please wait while your request 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 ?", - close_widget: "Hide the annotation form", - "polemic++": "Agree", - "polemic--": "Disagree", - "polemic??": "Question", - "polemic==": "Reference" + share_on: "Share on", + more_tags: "More tags", + cancel: "Cancel", + close_widget: "Cacher la zone de création d'annotations" }, fr: { from_time: "de", to_time: "à", at_time: "à", submit: "Envoyer", - 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", + 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", type_title: "Titre de l'annotation", - 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.", + 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.", annotation_saved: "Merci, votre annotation a été enregistrée.", share_annotation: "Souhaitez-vous la partager sur les réseaux sociaux ?", - close_widget: "Cacher le formulaire de création d'annotations", - "polemic++": "Accord", - "polemic--": "Désaccord", - "polemic??": "Question", - "polemic==": "Référence" + share_on: "Partager sur", + more_tags: "Plus de mots-clés", + cancel: "Cancel", + close_widget: "Hide the annotation creating block" } -}; +} IriSP.Widgets.CreateAnnotation.prototype.template = - '{{#show_slice}}
{{/show_slice}}' - + '{{^show_slice}}{{#show_arrow}}
{{/show_arrow}}{{/show_slice}}' - + '
' + '
' + '
' - + '

{{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_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}}' + + '' + '
' + '' - + '{{#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}}
    ' @@ -143,31 +113,18 @@ 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); - 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; - } + 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.tags) { this.tags = this.source.getTags() @@ -180,44 +137,7 @@ }); /* 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() @@ -225,17 +145,9 @@ return false; }); this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").click(function() { - _this.addKeyword(IriSP.jQuery(this).attr("data-text")); + _this.addKeyword(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); 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")); @@ -251,9 +163,12 @@ this.hide(); } - this.onMdpEvent("CreateAnnotation.toggle","toggle"); + this.bindPopcorn("IriSP.CreateAnnotation.toggle","toggle"); + this.bindPopcorn("IriSP.Slice.boundsChanged","onBoundsChanged"); + this.begin = new IriSP.Model.Time(); + this.end = this.source.getDuration(); this.$.find("form").submit(this.functionWrapper("onSubmit")); -}; +} IriSP.Widgets.CreateAnnotation.prototype.showScreen = function(_screenName) { this.$.find('.Ldt-CreateAnnotation-' + _screenName).show() @@ -263,35 +178,31 @@ IriSP.Widgets.CreateAnnotation.prototype.show = function() { this.visible = true; this.showScreen('Main'); - this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666").addClass("empty"); + this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666"); if (this.show_title_field) { - this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666").addClass("empty"); + this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666"); } 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.trigger("Annotation.minimize"); + this.player.popcorn.trigger("IriSP.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.trigger("Annotation.maximize"); + this.player.popcorn.trigger("IriSP.Annotation.maximize"); } + this.player.popcorn.trigger("IriSP.Slice.hide"); } -}; +} IriSP.Widgets.CreateAnnotation.prototype.toggle = function() { if (!this.always_visible) { @@ -301,7 +212,14 @@ 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"), @@ -313,25 +231,20 @@ ); _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.media.getPaused()) { - this.media.pause(); + if (this.pause_on_write && !this.player.popcorn.media.paused) { + this.player.popcorn.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).attr("data-text")); + var _rx = IriSP.Model.regexpFromTextOrArray(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); if (_contents.match(_rx)) { IriSP.jQuery(this).addClass("selected"); } else { @@ -340,51 +253,36 @@ }); 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 false; + return; } - 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 */ + 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 */ _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 */ + _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type), /* 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 */ @@ -400,9 +298,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) { @@ -411,42 +309,16 @@ } _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 = _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 - }; + _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 */ + if (this.show_creator_field) { + _export.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val(); + } else { + _export.creator = this.creator_name; } - if (this.show_creator_field) { - _annotation.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val(); - } else { - _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 */ @@ -464,7 +336,7 @@ function() { _this.close_after_send ? _this.hide() - : _this.show(); + : _this.showScreen("Main"); }, _this.after_send_timeout ); @@ -472,10 +344,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.media.getPaused()) { - _this.media.play(); + if (_this.pause_on_write && _this.player.popcorn.media.paused) { + _this.player.popcorn.play(); } - _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */ + _this.player.popcorn.trigger("IriSP.AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */ }, error: function(_xhr, _error, _thrown) { IriSP.log("Error when sending annotation", _thrown); @@ -490,5 +362,5 @@ this.showScreen('Wait'); return false; -}; +}