web/res/metadataplayer/CreateAnnotation.js
changeset 1198 ff4b567d51f2
child 1304 10974bff4dae
equal deleted inserted replaced
1197:c9c502117eb6 1198:ff4b567d51f2
       
     1 /* TODO: Add Social Network Sharing */
       
     2 
       
     3 IriSP.Widgets.CreateAnnotation = function(player, config) {
       
     4     var _this = this;
       
     5     IriSP.Widgets.Widget.call(this, player, config);
       
     6     if (_this.api_method == 'local' && window.localStorage[_this.api_endpoint_template]) {
       
     7         this.source.onLoad(function () {
       
     8             var _export = _this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[_this.api_serializer]});
       
     9             _export.deSerialize(window.localStorage[_this.api_endpoint_template]);
       
    10             console.log("Loaded personal annotations", _export);
       
    11             _this.source.merge(_export);
       
    12         });
       
    13     };
       
    14 };
       
    15 
       
    16 IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget();
       
    17 
       
    18 IriSP.Widgets.CreateAnnotation.prototype.defaults = {
       
    19     show_title_field : true,
       
    20     show_creator_field : true,
       
    21     start_visible : true,
       
    22     always_visible : false,
       
    23     show_slice : true,
       
    24     show_controls: false,
       
    25     show_arrow : true,
       
    26     show_mic_record: false,
       
    27     show_mic_play: false,
       
    28     minimize_annotation_widget : true,
       
    29     creator_name : "",
       
    30     creator_avatar : "",
       
    31     tags : false,
       
    32     tag_titles : false,
       
    33     pause_on_write : true,
       
    34     max_tags : 8,
       
    35     polemics : [{
       
    36         keyword: "++",
       
    37         background_color: "#00a000",
       
    38         text_color: "#ffffff"
       
    39     },{
       
    40         keyword: "--",
       
    41         background_color: "#c00000",
       
    42         text_color: "#ffffff"
       
    43     },{
       
    44         keyword: "??",
       
    45         background_color: "#0000e0",
       
    46         text_color: "#ffffff"
       
    47     },{
       
    48         keyword: "==",
       
    49         background_color: "#f0e000",
       
    50         text_color: "#000000"
       
    51     }],
       
    52     slice_annotation_type: "chap",
       
    53     annotation_type: "Contributions",
       
    54     api_serializer: "ldt_annotate",
       
    55     api_endpoint_template: "",
       
    56     api_method: "POST",
       
    57     after_send_timeout: 0,
       
    58     close_after_send: false,
       
    59     tag_prefix: "#",
       
    60     slice_widget: null
       
    61 };
       
    62 
       
    63 IriSP.Widgets.CreateAnnotation.prototype.messages = {
       
    64     en: {
       
    65         from_time: "from",
       
    66         to_time: "to",
       
    67         at_time: "at",
       
    68         submit: "Submit",
       
    69         add_keywords_: "Add keywords:",
       
    70         add_polemic_keywords_: "Add polemic attributes :",
       
    71         your_name_: "Your name:",
       
    72         annotate_video: "Annotate this video",
       
    73         type_title: "Annotation title",
       
    74         type_description: "Type the full contents of your annotation here.",
       
    75         wait_while_processing: "Please wait while your annotation is being processed...",
       
    76         error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.",
       
    77         annotation_saved: "Thank you, your annotation has been saved.",
       
    78         share_annotation: "Would you like to share it on social networks ?",
       
    79         close_widget: "Hide the annotation form",
       
    80         "polemic++": "Agree",
       
    81         "polemic--": "Disagree",
       
    82         "polemic??": "Question",
       
    83         "polemic==": "Reference"
       
    84     },
       
    85     fr: {
       
    86         from_time: "de",
       
    87         to_time: "à",
       
    88         at_time: "à",
       
    89         submit: "Envoyer",
       
    90         add_keywords_: "Ajouter des mots-clés\u00a0:",
       
    91         add_polemic_keywords_: "Ajouter des attributs polémiques\u00a0:",
       
    92         your_name_: "Votre nom\u00a0:",
       
    93         annotate_video: "Annoter cette vidéo",
       
    94         type_title: "Titre de l'annotation",
       
    95         type_description: "Rédigez ici le contenu de votre annotation.",
       
    96         wait_while_processing: "Veuillez patienter pendant le traitement de votre annotation...",
       
    97         error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée.",
       
    98         annotation_saved: "Merci, votre annotation a été enregistrée.",
       
    99         share_annotation: "Souhaitez-vous la partager sur les réseaux sociaux ?",
       
   100         close_widget: "Cacher le formulaire de création d'annotations",
       
   101         "polemic++": "Accord",
       
   102         "polemic--": "Désaccord",
       
   103         "polemic??": "Question",
       
   104         "polemic==": "Référence"
       
   105     }
       
   106 };
       
   107 
       
   108 IriSP.Widgets.CreateAnnotation.prototype.template =
       
   109     '{{#show_slice}}<div class="Ldt-CreateAnnotation-Slice"></div>{{/show_slice}}'
       
   110     + '{{^show_slice}}{{#show_arrow}}<div class="Ldt-CreateAnnotation-Arrow"></div>{{/show_arrow}}{{/show_slice}}'
       
   111     + '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">'
       
   112     + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">'
       
   113     + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{l10n.annotate_video}}{{#show_title_field}}</span></h3>'
       
   114     + '<h3><span class="Ldt-CreateAnnotation-h3Left"><input class="Ldt-CreateAnnotation-Title empty" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
       
   115     + '<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>'
       
   116     + '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">{{end}}</span>{{/show_slice}}</span></span>'
       
   117     + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator empty" value="{{creator_name}}" />{{/show_creator_field}}</h3>'
       
   118     + '{{#show_controls}}<div class="Ldt-CreateAnnotation-Controls">'
       
   119     +   '<span class="Ldt-CreateAnnotation-Control-In">IN</span>'
       
   120     +   '<span class="Ldt-CreateAnnotation-Control-Out">OUT</span>'
       
   121     +   '<span class="Ldt-CreateAnnotation-Control-Play">Play</span>'
       
   122     + '</div>{{/show_controls}}'
       
   123     + '<textarea class="Ldt-CreateAnnotation-Description empty" placeholder="{{l10n.type_description}}"></textarea>'
       
   124     + '{{#show_creator_field}}<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>{{/show_creator_field}}'
       
   125     + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />'
       
   126     + '{{#show_mic_record}}<div class="Ldt-CreateAnnotation-RecBlock"><div class="Ldt-CreateAnnotation-RecLabel">Add voice annotation</div>'
       
   127     + '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="160">'
       
   128     + '        <param name="movie" value="{{record_swf}}" />'
       
   129     + '        <param name="quality" value="high" />'
       
   130     + '        <param name="bgcolor" value="#ffffff" />'
       
   131     + '        <param name="play" value="true" />'
       
   132     + '        <param name="loop" value="true" />'
       
   133     + '        <param name="wmode" value="transparent" />'
       
   134     + '        <param name="scale" value="showall" />'
       
   135     + '        <param name="menu" value="true" />'
       
   136     + '        <param name="devicefont" value="false" />'
       
   137     + '        <param name="salign" value="" />'
       
   138     + '        <param name="allowScriptAccess" value="always" />'
       
   139     + '        <param name="allowFullScreen" value="true" />'
       
   140     + '        <param name="flashvars" value="playVisible={{show_mic_play}}">'
       
   141     + '        <embed src="{{record_swf}}"" quality="high" bgcolor="#ffffff"'
       
   142     + '             width="220" height="160" name="ExternalInterfaceExample" align="middle"'
       
   143     + '             play="true" loop="false" quality="high" allowScriptAccess="always" '
       
   144     + '             type="application/x-shockwave-flash" allowFullScreen="true" wmode="transparent" '
       
   145     + '             flashvars="playVisible={{show_mic_play}}"'
       
   146     + '             pluginspage="http://www.macromedia.com/go/getflashplayer">'
       
   147     + '        </embed>'
       
   148     + '    </object>'
       
   149     + '</div>{{/show_mic_record}}'
       
   150     + '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">'
       
   151     + '{{#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}}'
       
   152     + '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">'
       
   153     + '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}" data-text="{{keyword}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}'
       
   154     + '<div style="clear: both;"></div></form>'
       
   155     + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Wait"><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.wait_while_processing}}</div></div>'
       
   156     + '<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>'
       
   157     + '<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>'
       
   158     + '</div></div>';
       
   159 
       
   160 IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
       
   161     var _this = this;
       
   162 
       
   163     this.begin = new IriSP.Model.Time();
       
   164     this.end = this.source.getDuration();
       
   165 
       
   166     this.tag_prefix = this.tag_prefix || "";
       
   167 
       
   168     if (this.tag_titles && !this.tags) {
       
   169 		if(!(this.tag_titles.length==1 && this.tag_titles[0]=="")){
       
   170 			this.tags = IriSP._(this.tag_titles).map(function(_tag_title) {
       
   171 				var _tag,
       
   172 					_tags = _this.source.getTags().searchByTitle(_tag_title, true);
       
   173 				if (_tags.length) {
       
   174 					_tag = _tags[0];
       
   175 				} else {
       
   176 					_tag = new IriSP.Model.Tag(false, _this.source);
       
   177 					_this.source.getTags().push(_tag);
       
   178 					_tag.title = _tag_title;
       
   179 				}
       
   180 				return _tag;
       
   181 			});
       
   182         }
       
   183         else{
       
   184         	// we forced no tags if this.tag_titles = [''] (and not false)
       
   185         	this.tags = true;
       
   186         }
       
   187     }
       
   188     if (!this.tags) {
       
   189         this.tags = this.source.getTags()
       
   190             .sortBy(function (_tag) {
       
   191                 return -_tag.getAnnotations().length;
       
   192             })
       
   193             .slice(0, this.max_tags)
       
   194             .map(function(_tag) {
       
   195                 return _tag;
       
   196             });
       
   197         /* We have to use the map function because Mustache doesn't like our tags object */
       
   198     }
       
   199     this.record_swf = IriSP.getLib("recordMicSwf");
       
   200     this.renderTemplate();
       
   201     if (this.show_mic_record) {
       
   202         this.recorder = this.$.find("embed")[0];
       
   203 
       
   204         window.setAudioUrl = function(_url) {
       
   205             _this.audio_url = _url;
       
   206         };
       
   207     }
       
   208     if (this.show_slice) {
       
   209         this.slice_widget = this.insertSubwidget(
       
   210             this.$.find(".Ldt-CreateAnnotation-Slice"),
       
   211             {
       
   212                 type: "Slice",
       
   213                 show_arrow: this.show_arrow,
       
   214                 annotation_type: this.slice_annotation_type,
       
   215                 onBoundsChanged: function(_from, _to) {
       
   216                     _this.begin = new IriSP.Model.Time(_from || 0);
       
   217                     _this.end = new IriSP.Model.Time(_to || 0);
       
   218                     _this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString());
       
   219                     _this.$.find(".Ldt-CreateAnnotation-End").html(_this.end.toString());
       
   220                 }
       
   221             },
       
   222             "slice"
       
   223         );
       
   224     } else {
       
   225         if (this.show_arrow) {
       
   226             this.insertSubwidget(this.$.find(".Ldt-CreateAnnotation-Arrow"), {type: "Arrow"},"arrow");
       
   227         }
       
   228         this.onMediaEvent("timeupdate", function(_time) {
       
   229             _this.begin = new IriSP.Model.Time(_time || 0);
       
   230             _this.end = new IriSP.Model.Time(_time || 0);
       
   231             _this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString());
       
   232             if (_this.arrow) {
       
   233                 _this.arrow.moveToTime(_time);
       
   234             }
       
   235         });
       
   236     }
       
   237     this.$.find(".Ldt-CreateAnnotation-Close").click(function() {
       
   238         _this.close_after_send
       
   239         ? _this.hide()
       
   240         : _this.showScreen("Main");
       
   241         return false;
       
   242     });
       
   243     this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").click(function() {
       
   244         _this.addKeyword(IriSP.jQuery(this).attr("data-text"));
       
   245         return false;
       
   246     });
       
   247     this.$.find(".Ldt-CreateAnnotation-PolemicLi").each(function() {
       
   248         var _el = IriSP.jQuery(this),
       
   249             _kw = _el.attr("data-text"),
       
   250             _msg = _this.l10n["polemic" + _kw];
       
   251         if (_msg) {
       
   252             _el.attr("title",_msg);
       
   253         }
       
   254     });
       
   255     this.$.find(".Ldt-CreateAnnotation-Description").bind("change keyup input paste", this.functionWrapper("onDescriptionChange"));
       
   256     if (this.show_title_field) {
       
   257         this.$.find(".Ldt-CreateAnnotation-Title").bind("change keyup input paste", this.functionWrapper("onTitleChange"));
       
   258     }
       
   259     if (this.show_creator_field) {
       
   260         this.$.find(".Ldt-CreateAnnotation-Creator").bind("change keyup input paste", this.functionWrapper("onCreatorChange"));
       
   261     }
       
   262     this.$.find("[class^='Ldt-CreateAnnotation-Control-']").click(function() {
       
   263         var action = this.className.replace('Ldt-CreateAnnotation-Control-', '');
       
   264         switch (action) {
       
   265             case "In":
       
   266                // Set In bound to current player time
       
   267                _this.begin = new IriSP.Model.Time(_this.media.getCurrentTime() || 0);
       
   268                _this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString());
       
   269                break;
       
   270             case "Out":
       
   271                // Set In bound to current player time
       
   272                _this.end = new IriSP.Model.Time(_this.media.getCurrentTime() || _this.media.duration);
       
   273                _this.$.find(".Ldt-CreateAnnotation-End").html(_this.end.toString());
       
   274                break;
       
   275             case "Play":
       
   276                _this.media.setCurrentTime(_this.begin);
       
   277                _this.media.play()
       
   278                break;
       
   279         }
       
   280         return false;
       
   281     });
       
   282 
       
   283     if (this.start_visible) {
       
   284         this.show();
       
   285     } else {
       
   286         this.$.hide();
       
   287         this.hide();
       
   288     }
       
   289 
       
   290     this.onMdpEvent("CreateAnnotation.toggle","toggle");
       
   291     this.$.find("form").submit(this.functionWrapper("onSubmit"));
       
   292 };
       
   293 
       
   294 IriSP.Widgets.CreateAnnotation.prototype.showScreen = function(_screenName) {
       
   295     this.$.find('.Ldt-CreateAnnotation-' + _screenName).show()
       
   296         .siblings().hide();
       
   297 }
       
   298 
       
   299 IriSP.Widgets.CreateAnnotation.prototype.show = function() {
       
   300     this.visible = true;
       
   301     this.showScreen('Main');
       
   302     this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666").addClass("empty");
       
   303     if (this.show_title_field) {
       
   304         this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666").addClass("empty");
       
   305     }
       
   306     if (this.show_creator_field) {
       
   307         this.$.find(".Ldt-CreateAnnotation-Creator").val(this.creator_name).css("border-color", "#666666");
       
   308         if (!this.creator_name) {
       
   309             this.$.find(".Ldt-CreateAnnotation-Creator").addClass("empty");
       
   310         }
       
   311     }
       
   312     this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected");
       
   313     this.$.slideDown();
       
   314     if (this.minimize_annotation_widget) {
       
   315         this.player.trigger("Annotation.minimize");
       
   316     }
       
   317 };
       
   318 
       
   319 IriSP.Widgets.CreateAnnotation.prototype.hide = function() {
       
   320     if (this.recorder) {
       
   321         this.recorder.stopRecord();
       
   322     }
       
   323     if (!this.always_visible) {
       
   324         this.visible = false;
       
   325         this.$.slideUp();
       
   326         if (this.minimize_annotation_widget) {
       
   327             this.player.trigger("Annotation.maximize");
       
   328         }
       
   329     }
       
   330 };
       
   331 
       
   332 IriSP.Widgets.CreateAnnotation.prototype.toggle = function() {
       
   333     var _this = this;
       
   334     if (!this.always_visible) {
       
   335         if (this.visible) {
       
   336             this.hide();
       
   337         } else {
       
   338             _this.begin = new IriSP.Model.Time(_this.media.getCurrentTime() || 0);
       
   339             _this.end = new IriSP.Model.Time(_this.media.getCurrentTime() || 0);
       
   340             _this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString());
       
   341             _this.$.find(".Ldt-CreateAnnotation-End").html(_this.end.toString());
       
   342             if (_this.slice_widget) {
       
   343                 _this.slice_widget.setBounds(_this.begin, _this.end);
       
   344             }
       
   345             this.show();
       
   346         }
       
   347     }
       
   348 };
       
   349 
       
   350 IriSP.Widgets.CreateAnnotation.prototype.addKeyword = function(_keyword) {
       
   351     var _field = this.$.find(".Ldt-CreateAnnotation-Description"),
       
   352         _rx = IriSP.Model.regexpFromTextOrArray(_keyword),
       
   353         _contents = _field.val();
       
   354     _contents = ( !!_contents.match(_rx)
       
   355         ? _contents.replace(_rx,"")
       
   356         : _contents + " " + _keyword
       
   357     );
       
   358     _field.val(_contents.replace(/\s{2,}/g,' ').replace(/(^\s+|\s+$)/g,''));
       
   359     this.onDescriptionChange();
       
   360 };
       
   361 
       
   362 IriSP.Widgets.CreateAnnotation.prototype.pauseOnWrite = function() {
       
   363     if (this.pause_on_write && !this.media.getPaused()) {
       
   364         this.media.pause();
       
   365     }
       
   366 };
       
   367 
       
   368 IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function() {
       
   369     var _field = this.$.find(".Ldt-CreateAnnotation-Description"),
       
   370         _contents = _field.val();
       
   371     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
       
   372     if (!!_contents) {
       
   373         _field.removeClass("empty");
       
   374     } else {
       
   375         _field.addClass("empty");
       
   376     }
       
   377     this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").each(function() {
       
   378         var _rx = IriSP.Model.regexpFromTextOrArray(IriSP.jQuery(this).attr("data-text"));
       
   379         if (_contents.match(_rx)) {
       
   380             IriSP.jQuery(this).addClass("selected");
       
   381         } else {
       
   382             IriSP.jQuery(this).removeClass("selected");
       
   383         }
       
   384     });
       
   385     this.pauseOnWrite();
       
   386     return !!_contents;
       
   387 };
       
   388 
       
   389 IriSP.Widgets.CreateAnnotation.prototype.onTitleChange = function() {
       
   390     var _field = this.$.find(".Ldt-CreateAnnotation-Title"),
       
   391         _contents = _field.val();
       
   392     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
       
   393     if (!!_contents) {
       
   394         _field.removeClass("empty");
       
   395     } else {
       
   396         _field.addClass("empty");
       
   397     }
       
   398     this.pauseOnWrite();
       
   399     return !!_contents;
       
   400 };
       
   401 
       
   402 
       
   403 IriSP.Widgets.CreateAnnotation.prototype.onCreatorChange = function() {
       
   404     var _field = this.$.find(".Ldt-CreateAnnotation-Creator"),
       
   405         _contents = _field.val();
       
   406     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
       
   407     if (!!_contents) {
       
   408         _field.removeClass("empty");
       
   409     } else {
       
   410         _field.addClass("empty");
       
   411     }
       
   412     this.pauseOnWrite();
       
   413     return !!_contents;
       
   414 };
       
   415 
       
   416 /* Fonction effectuant l'envoi des annotations */
       
   417 IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {
       
   418     /* Si les champs obligatoires sont vides, on annule l'envoi */
       
   419     if (!this.onDescriptionChange() || (this.show_title_field && !this.onTitleChange()) || (this.show_creator_field && !this.onCreatorChange())) {
       
   420         return false;
       
   421     }
       
   422 
       
   423     if (this.recorder) {
       
   424         this.recorder.stopRecord();
       
   425     }
       
   426 
       
   427     var _this = this,
       
   428         _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */
       
   429         _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 */
       
   430         _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) */
       
   431         _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */
       
   432         _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 */
       
   433         _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 */
       
   434 
       
   435     /* Si nous avons dû générer un ID d'annotationType à la volée... */
       
   436     if (!_annotationTypes.length) {
       
   437         /* Il ne faudra pas envoyer l'ID généré au serveur */
       
   438         _annotationType.dont_send_id = true;
       
   439         /* Il faut inclure le titre dans le type d'annotation */
       
   440         _annotationType.title = this.annotation_type;
       
   441     }
       
   442 
       
   443     /*
       
   444      * Nous remplissons les données de l'annotation générée à la volée
       
   445      * ATTENTION: Si nous sommes sur un MASHUP, ces éléments doivent se référer AU MEDIA D'ORIGINE
       
   446      * */
       
   447     _annotation.setMedia(this.source.currentMedia.id); /* Id du média annoté */
       
   448     _annotation.setBegin(this.begin); /*Timecode de début */
       
   449     _annotation.setEnd(this.end); /* Timecode de fin */
       
   450     _annotation.created = new Date(); /* Date de création de l'annotation */
       
   451 
       
   452     _annotation.setAnnotationType(_annotationType.id); /* Id du type d'annotation */
       
   453     _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Champ description */
       
   454     if (this.show_title_field) {
       
   455         /* Champ titre, seulement s'il est visible */
       
   456         _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val();
       
   457     } else {
       
   458         _annotation.title = _annotation.description;
       
   459     }
       
   460 
       
   461     var tagIds = Array.prototype.map.call(
       
   462         this.$.find(".Ldt-CreateAnnotation-TagLi.selected"),
       
   463         function(el) { return IriSP.jQuery(el).attr("tag-id")}
       
   464     );
       
   465 
       
   466     IriSP._(_annotation.description.match(/#[^\s#.,;]+/g)).each(function(_tt) {
       
   467         var _tag,
       
   468             _tag_title = _tt.replace(/^#/,''),
       
   469             _tags = _this.source.getTags().searchByTitle(_tag_title, true);
       
   470         if (_tags.length) {
       
   471             _tag = _tags[0];
       
   472         } else {
       
   473             _tag = new IriSP.Model.Tag(false, _this.source);
       
   474             _this.source.getTags().push(_tag);
       
   475             _tag.title = _tag_title;
       
   476         }
       
   477         if (tagIds.indexOf(_tag.id) === -1) {
       
   478             tagIds.push(_tag.id);
       
   479         }
       
   480 
       
   481     })
       
   482 
       
   483     _annotation.setTags(IriSP._(tagIds).uniq()); /*Liste des ids de tags */
       
   484     if (this.audio_url) {
       
   485         _annotation.audio = {
       
   486             src: "mic",
       
   487             mimetype: "audio/mp3",
       
   488             href: this.audio_url
       
   489         };
       
   490     }
       
   491     if (this.show_creator_field) {
       
   492         _annotation.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val();
       
   493     } else {
       
   494         _annotation.creator = this.creator_name;
       
   495     }
       
   496     _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */
       
   497 
       
   498     if (this.api_method == 'local') {
       
   499         // Append to existing localStorage annotations
       
   500         // FIXME: handle movie ids
       
   501         /* Use localStorage */
       
   502         /* Data will be serialized in the localStore property designated by api_endpoint_template */
       
   503         _export.addList("annotation", _exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */
       
   504         _this.source.merge(_export); /* On ajoute la nouvelle annotation au recueil original */
       
   505         // Import previously saved local annotations
       
   506         if (window.localStorage[_this.api_endpoint_template]) {
       
   507             _export.deSerialize(window.localStorage[_this.api_endpoint_template]);
       
   508         }
       
   509         // Save everything back
       
   510         window.localStorage[_this.api_endpoint_template] = _export.serialize();
       
   511         if (_this.pause_on_write && _this.media.getPaused()) {
       
   512             _this.media.play();
       
   513         }
       
   514         _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
       
   515         _this.$.find(".Ldt-CreateAnnotation-Description").val("");
       
   516     } else {
       
   517         _export.addList("annotation",_exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */
       
   518        /* Envoi de l'annotation via AJAX au serveur ! */
       
   519         IriSP.jQuery.ajax({
       
   520             url: _url,
       
   521             type: this.api_method,
       
   522             contentType: 'application/json',
       
   523             data: _export.serialize(), /* L'objet Source est sérialisé */
       
   524             success: function(_data) {
       
   525                 _this.showScreen('Saved'); /* Si l'appel a fonctionné, on affiche l'écran "Annotation enregistrée" */
       
   526                 if (_this.after_send_timeout) { /* Selon les options de configuration, on revient à l'écran principal ou on ferme le widget, ou rien */
       
   527                     window.setTimeout(
       
   528                         function() {
       
   529                             _this.close_after_send
       
   530                                 ? _this.hide()
       
   531                                 : _this.show();
       
   532                         },
       
   533                         _this.after_send_timeout
       
   534                     );
       
   535                 }
       
   536                 _export.getAnnotations().removeElement(_annotation, true); /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */
       
   537                 _export.deSerialize(_data); /* On désérialise les données reçues pour les réinjecter */
       
   538                 _this.source.merge(_export); /* On récupère les données réimportées dans l'espace global des données */
       
   539                 if (_this.pause_on_write && _this.media.getPaused()) {
       
   540                     _this.media.play();
       
   541                 }
       
   542                 _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
       
   543             },
       
   544             error: function(_xhr, _error, _thrown) {
       
   545                 IriSP.log("Error when sending annotation", _thrown);
       
   546                 _export.getAnnotations().removeElement(_annotation, true);
       
   547                 _this.showScreen('Error');
       
   548                 window.setTimeout(function(){
       
   549                     _this.showScreen("Main")
       
   550                 },
       
   551                                   (_this.after_send_timeout || 5000));
       
   552             }
       
   553         });
       
   554         this.showScreen('Wait');
       
   555     }
       
   556 
       
   557     return false;
       
   558 };