src/widgets/CreateAnnotation.js
changeset 1072 ac1eacb3aa33
parent 1069 2409cb4cebaf
equal deleted inserted replaced
1071:02c04d2c8fd8 1072:ac1eacb3aa33
     1 /* TODO: Add Social Network Sharing */
     1 /* TODO: Add Social Network Sharing */
     2 
     2 // CreateAnnotation
     3 IriSP.Widgets.CreateAnnotation = function(player, config) {
     3 
     4     IriSP.Widgets.Widget.call(this, player, config);
     4 import createAnnotationStyles from "./CreateAnnotation.module.css";
     5     if (_this.editable_storage != '' && window.localStorage[_this.editable_storage]) {
     5 import Mustache from "mustache";
       
     6 import _ from "lodash";
       
     7 import jQuery from "jquery";
       
     8 
       
     9 const CreateAnnotation = function (ns) {
       
    10   return class extends ns.Widgets.Widget {
       
    11     constructor(player, config) {
       
    12       super(player, config);
       
    13       if (
       
    14         this.editable_storage != "" &&
       
    15         window.localStorage[this.editable_storage]
       
    16       ) {
     6         this.source.onLoad(function () {
    17         this.source.onLoad(function () {
     7             var _export = _this.player.sourceManager.newLocalSource({serializer: IriSP.serializers['ldt_localstorage']});
    18           var _export = this.player.sourceManager.newLocalSource({
     8             _export.deSerialize(window.localStorage[_this.editable_storage]);
    19             serializer: ns.serializers["ldt_localstorage"],
     9             _this.source.merge(_export);
    20           });
       
    21           _export.deSerialize(window.localStorage[this.editable_storage]);
       
    22           _this.source.merge(_export);
    10         });
    23         });
       
    24       }
       
    25     }
       
    26 
       
    27     static defaults = {
       
    28       show_title_field: true,
       
    29       show_creator_field: true,
       
    30       creator_field_readonly: false,
       
    31       start_visible: true,
       
    32       always_visible: false,
       
    33       show_slice: true,
       
    34       show_arrow: true,
       
    35       show_time: true,
       
    36       minimize_annotation_widget: true,
       
    37       creator_name: "",
       
    38       creator_avatar: "",
       
    39       tags: false,
       
    40       tag_titles: false,
       
    41       pause_on_write: true,
       
    42       max_tags: 8,
       
    43       polemics: [
       
    44         {
       
    45           keyword: "++",
       
    46           background_color: "#00a000",
       
    47           text_color: "#ffffff",
       
    48         },
       
    49         {
       
    50           keyword: "--",
       
    51           background_color: "#c00000",
       
    52           text_color: "#ffffff",
       
    53         },
       
    54         {
       
    55           keyword: "??",
       
    56           background_color: "#0000e0",
       
    57           text_color: "#ffffff",
       
    58         },
       
    59         {
       
    60           keyword: "==",
       
    61           background_color: "#f0e000",
       
    62           text_color: "#000000",
       
    63         },
       
    64       ],
       
    65       slice_annotation_type: "chap",
       
    66       annotation_type: "Contributions",
       
    67       post_at_segment_time: false,
       
    68       segment_annotation_type: "chap",
       
    69       api_serializer: "ldt_annotate",
       
    70       api_endpoint_template: "",
       
    71       api_method: "POST",
       
    72       // Id that will be used as localStorage key
       
    73       editable_storage: "",
       
    74       project_id: "",
       
    75       after_send_timeout: 0,
       
    76       close_after_send: false,
       
    77       tag_prefix: "#",
       
    78       pause_when_displaying: false,
       
    79       custom_send_button: false,
       
    80       custom_cancel_button: false,
       
    81       custom_description_placeholder: false,
       
    82       preview_mode: false,
    11     };
    83     };
    12 };
    84 
    13 
    85     static messages =  {
    14 IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget();
    86       en: {
    15 
       
    16 IriSP.Widgets.CreateAnnotation.prototype.defaults = {
       
    17     show_title_field : true,
       
    18     show_creator_field : true,
       
    19     creator_field_readonly : false,
       
    20     start_visible : true,
       
    21     always_visible : false,
       
    22     show_slice : true,
       
    23     show_arrow : true,
       
    24     show_mic_record: false,
       
    25     show_mic_play: false,
       
    26     show_time: true,
       
    27     minimize_annotation_widget : true,
       
    28     creator_name : "",
       
    29     creator_avatar : "",
       
    30     tags : false,
       
    31     tag_titles : false,
       
    32     pause_on_write : true,
       
    33     max_tags : 8,
       
    34     polemics : [{
       
    35         keyword: "++",
       
    36         background_color: "#00a000",
       
    37         text_color: "#ffffff"
       
    38     },{
       
    39         keyword: "--",
       
    40         background_color: "#c00000",
       
    41         text_color: "#ffffff"
       
    42     },{
       
    43         keyword: "??",
       
    44         background_color: "#0000e0",
       
    45         text_color: "#ffffff"
       
    46     },{
       
    47         keyword: "==",
       
    48         background_color: "#f0e000",
       
    49         text_color: "#000000"
       
    50     }],
       
    51     slice_annotation_type: "chap",
       
    52     annotation_type: "Contributions",
       
    53     post_at_segment_time: false,
       
    54     segment_annotation_type: "chap",
       
    55     api_serializer: "ldt_annotate",
       
    56     api_endpoint_template: "",
       
    57     api_method: "POST",
       
    58     // Id that will be used as localStorage key
       
    59     editable_storage: "",
       
    60     project_id: "",
       
    61     after_send_timeout: 0,
       
    62     close_after_send: false,
       
    63     tag_prefix: "#",
       
    64     pause_when_displaying: false,
       
    65     custom_send_button: false,
       
    66     custom_cancel_button: false,
       
    67     custom_description_placeholder: false,
       
    68     preview_mode: false,
       
    69 };
       
    70 
       
    71 IriSP.Widgets.CreateAnnotation.prototype.messages = {
       
    72     en: {
       
    73         from_time: "from",
    87         from_time: "from",
    74         to_time: "to",
    88         to_time: "to",
    75         at_time: "at",
    89         at_time: "at",
    76         submit: "Submit",
    90         submit: "Submit",
    77         preview_submit: "You cannot submit annotations in preview mode",
    91         preview_submit: "You cannot submit annotations in preview mode",
    80         add_polemic_keywords_: "Add polemic attributes :",
    94         add_polemic_keywords_: "Add polemic attributes :",
    81         your_name_: "Your name:",
    95         your_name_: "Your name:",
    82         annotate_video: "New note",
    96         annotate_video: "New note",
    83         type_title: "Annotation title",
    97         type_title: "Annotation title",
    84         type_description: "Enter a new note...",
    98         type_description: "Enter a new note...",
    85         wait_while_processing: "Please wait while your annotation is being processed...",
    99         wait_while_processing:
    86         error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.",
   100           "Please wait while your annotation is being processed...",
       
   101         error_while_contacting:
       
   102           "An error happened while contacting the server. Your annotation has not been saved.",
    87         annotation_saved: "Thank you, your annotation has been saved.",
   103         annotation_saved: "Thank you, your annotation has been saved.",
    88         share_annotation: "Would you like to share it on social networks ?",
   104         share_annotation: "Would you like to share it on social networks ?",
    89         close_widget: "Hide the annotation form",
   105         close_widget: "Hide the annotation form",
    90         "polemic++": "Agree",
   106         "polemic++": "Agree",
    91         "polemic--": "Disagree",
   107         "polemic--": "Disagree",
    92         "polemic??": "Question",
   108         "polemic??": "Question",
    93         "polemic==": "Reference",
   109         "polemic==": "Reference",
    94         "in_tooltip": "Set begin time to current player time",
   110         in_tooltip: "Set begin time to current player time",
    95         "out_tooltip": "Set begin time to current player time",
   111         out_tooltip: "Set begin time to current player time",
    96         "play_tooltip": "Play the fragment"
   112         play_tooltip: "Play the fragment",
    97     },
   113       },
    98     fr: {
   114       fr: {
    99         from_time: "de",
   115         from_time: "de",
   100         to_time: "à",
   116         to_time: "à",
   101         at_time: "à",
   117         at_time: "à",
   102         submit: "Envoyer",
   118         submit: "Envoyer",
   103         preview_submit: "Vous ne pouvez pas envoyer d'annotation en mode aperçu",
   119         preview_submit:
       
   120           "Vous ne pouvez pas envoyer d'annotation en mode aperçu",
   104         cancel: "Annuler",
   121         cancel: "Annuler",
   105         add_keywords_: "Ajouter des mots-clés\u00a0:",
   122         add_keywords_: "Ajouter des mots-clés\u00a0:",
   106         add_polemic_keywords_: "Ajouter des attributs polémiques\u00a0:",
   123         add_polemic_keywords_: "Ajouter des attributs polémiques\u00a0:",
   107         your_name_: "Votre nom\u00a0:",
   124         your_name_: "Votre nom\u00a0:",
   108         annotate_video: "Entrez une nouvelle note...",
   125         annotate_video: "Entrez une nouvelle note...",
   109         type_title: "Titre de l'annotation",
   126         type_title: "Titre de l'annotation",
   110         type_description: "Prenez vos notes...",
   127         type_description: "Prenez vos notes...",
   111         wait_while_processing: "Veuillez patienter pendant le traitement de votre annotation...",
   128         wait_while_processing:
   112         error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée.",
   129           "Veuillez patienter pendant le traitement de votre annotation...",
       
   130         error_while_contacting:
       
   131           "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée.",
   113         annotation_saved: "Merci, votre annotation a été enregistrée.",
   132         annotation_saved: "Merci, votre annotation a été enregistrée.",
   114         share_annotation: "Souhaitez-vous la partager sur les réseaux sociaux ?",
   133         share_annotation:
       
   134           "Souhaitez-vous la partager sur les réseaux sociaux ?",
   115         close_widget: "Cacher le formulaire de création d'annotations",
   135         close_widget: "Cacher le formulaire de création d'annotations",
   116         "polemic++": "Accord",
   136         "polemic++": "Accord",
   117         "polemic--": "Désaccord",
   137         "polemic--": "Désaccord",
   118         "polemic??": "Question",
   138         "polemic??": "Question",
   119         "polemic==": "Référence",
   139         "polemic==": "Référence",
   120         "in_tooltip": "Utiliser le temps courant comme début",
   140         in_tooltip: "Utiliser le temps courant comme début",
   121         "out_tooltip": "Utiliser le temps courant comme fin",
   141         out_tooltip: "Utiliser le temps courant comme fin",
   122         "play_tooltip": "Jouer le fragment"
   142         play_tooltip: "Jouer le fragment",
   123     }
   143       },
   124 };
   144     };
   125 
   145 
   126 IriSP.Widgets.CreateAnnotation.prototype.template =
   146     static template =
   127     '{{#show_slice}}<div class="Ldt-CreateAnnotation-Slice Ldt-TraceMe"></div>{{/show_slice}}'
   147       '{{#show_slice}}<div class="Ldt-CreateAnnotation-Slice Ldt-TraceMe"></div>{{/show_slice}}' +
   128     + '{{^show_slice}}{{#show_arrow}}<div class="Ldt-CreateAnnotation-Arrow"></div>{{/show_arrow}}{{/show_slice}}'
   148       '{{^show_slice}}{{#show_arrow}}<div class="Ldt-CreateAnnotation-Arrow"></div>{{/show_arrow}}{{/show_slice}}' +
   129     + '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">'
   149       '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">' +
   130     + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">'
   150       '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">' +
   131     + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{l10n.annotate_video}}{{#show_title_field}}</span></h3>'
   151       '<h3><span class="Ldt-CreateAnnotation-h3Left">{{l10n.annotate_video}}{{#show_title_field}}</span></h3>' +
   132     + '<h3><span class="Ldt-CreateAnnotation-h3Left"><input class="Ldt-CreateAnnotation-Title empty" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
   152       '<h3><span class="Ldt-CreateAnnotation-h3Left"><input class="Ldt-CreateAnnotation-Title empty" placeholder="{{l10n.type_title}}" />{{/show_title_field}}' +
   133     + '{{#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}}'
   153       '{{#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}}' +
   134     + '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">{{end}}</span>{{/show_slice}}</span></span>'
   154       '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">{{end}}</span>{{/show_slice}}</span></span>' +
   135     + '{{#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>'
   155       '{{#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>' +
   136     + '{{#show_controls}}<div class="Ldt-CreateAnnotation-Controls">'
   156       '{{#show_controls}}<div class="Ldt-CreateAnnotation-Controls">' +
   137     +   '<span title="{{l10n.in_tooltip}}" class="Ldt-CreateAnnotation-Control-In">In</span>'
   157       '<span title="{{l10n.in_tooltip}}" class="Ldt-CreateAnnotation-Control-In">In</span>' +
   138     +   '<span title="{{l10n.out_tooltip}}" class="Ldt-CreateAnnotation-Control-Out">Out</span>'
   158       '<span title="{{l10n.out_tooltip}}" class="Ldt-CreateAnnotation-Control-Out">Out</span>' +
   139     +   '<span title="{{l10n.play_tooltip}}" class="Ldt-CreateAnnotation-Control-Play">Play</span>'
   159       '<span title="{{l10n.play_tooltip}}" class="Ldt-CreateAnnotation-Control-Play">Play</span>' +
   140     + '</div>{{/show_controls}}'
   160       "</div>{{/show_controls}}" +
   141     + '<textarea class="Ldt-CreateAnnotation-Description Ldt-TraceMe empty" placeholder="{{#custom_description_placeholder}}{{custom_description_placeholder}}{{/custom_description_placeholder}}{{^custom_description_placeholder}}{{l10n.type_description}}{{/custom_description_placeholder}}"></textarea>'
   161       '<textarea class="Ldt-CreateAnnotation-Description Ldt-TraceMe empty" placeholder="{{#custom_description_placeholder}}{{custom_description_placeholder}}{{/custom_description_placeholder}}{{^custom_description_placeholder}}{{l10n.type_description}}{{/custom_description_placeholder}}"></textarea>' +
   142     + '{{#show_creator_field}}<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>{{/show_creator_field}}'
   162       '{{#show_creator_field}}<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>{{/show_creator_field}}' +
   143     + '<div class="Ldt-CreateAnnotation-SubmitArea Ldt-TraceMe">'
   163       '<div class="Ldt-CreateAnnotation-SubmitArea Ldt-TraceMe">' +
   144     +  '{{#preview_mode}}<input type="button" class="Ldt-CreateAnnotation-PreviewSubmit" title="{{l10n.preview_submit}}" value="{{#custom_send_button}}{{custom_send_button}}{{/custom_send_button}}{{^custom_send_button}}{{l10n.submit}}{{/custom_send_button}}" />{{/preview_mode}}'
   164       '{{#preview_mode}}<input type="button" class="Ldt-CreateAnnotation-PreviewSubmit" title="{{l10n.preview_submit}}" value="{{#custom_send_button}}{{custom_send_button}}{{/custom_send_button}}{{^custom_send_button}}{{l10n.submit}}{{/custom_send_button}}" />{{/preview_mode}}' +
   145     +  '{{^preview_mode}}<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{#custom_send_button}}{{custom_send_button}}{{/custom_send_button}}{{^custom_send_button}}{{l10n.submit}}{{/custom_send_button}}" />{{/preview_mode}}'
   165       '{{^preview_mode}}<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{#custom_send_button}}{{custom_send_button}}{{/custom_send_button}}{{^custom_send_button}}{{l10n.submit}}{{/custom_send_button}}" />{{/preview_mode}}' +
   146     +   '<input type="button" class="Ldt-CreateAnnotation-Cancel" value="{{#custom_cancel_button}}{{custom_cancel_button}}{{/custom_cancel_button}}{{^custom_cancel_button}}{{l10n.cancel}}{{/custom_cancel_button}}" />'
   166       '<input type="button" class="Ldt-CreateAnnotation-Cancel" value="{{#custom_cancel_button}}{{custom_cancel_button}}{{/custom_cancel_button}}{{^custom_cancel_button}}{{l10n.cancel}}{{/custom_cancel_button}}" />' +
   147     +   '<div class="Ldt-CreateAnnotation-Begin Ldt-CreateAnnotation-Times">00:00</div>'
   167       '<div class="Ldt-CreateAnnotation-Begin Ldt-CreateAnnotation-Times">00:00</div>' +
   148     + '</div>'
   168       "</div>" +
   149     + '{{#show_mic_record}}<div class="Ldt-CreateAnnotation-RecBlock"><div class="Ldt-CreateAnnotation-RecLabel">Add voice annotation</div>'
   169       '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">' +
   150     + '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="160">'
   170       '{{#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}}' +
   151     + '        <param name="movie" value="{{record_swf}}" />'
   171       '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">' +
   152     + '        <param name="quality" value="high" />'
   172       '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}" data-text="{{keyword}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}' +
   153     + '        <param name="bgcolor" value="#ffffff" />'
   173       '<div style="clear: both;"></div></form>' +
   154     + '        <param name="play" value="true" />'
   174       '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Wait"><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.wait_while_processing}}</div></div>' +
   155     + '        <param name="loop" value="true" />'
   175       '<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>' +
   156     + '        <param name="wmode" value="transparent" />'
   176       '<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>' +
   157     + '        <param name="scale" value="showall" />'
   177       "</div></div>";
   158     + '        <param name="menu" value="true" />'
   178 
   159     + '        <param name="devicefont" value="false" />'
   179     draw() {
   160     + '        <param name="salign" value="" />'
   180       var _this = this;
   161     + '        <param name="allowScriptAccess" value="always" />'
   181 
   162     + '        <param name="allowFullScreen" value="true" />'
   182       this.begin = new ns.Model.Time();
   163     + '        <param name="flashvars" value="playVisible={{show_mic_play}}">'
   183       this.end = this.source.getDuration();
   164     + '        <embed src="{{record_swf}}"" quality="high" bgcolor="#ffffff"'
   184 
   165     + '             width="220" height="160" name="ExternalInterfaceExample" align="middle"'
   185       this.tag_prefix = this.tag_prefix || "";
   166     + '             play="true" loop="false" quality="high" allowScriptAccess="always" '
   186 
   167     + '             type="application/x-shockwave-flash" allowFullScreen="true" wmode="transparent" '
   187       if (this.tag_titles && !this.tags) {
   168     + '             flashvars="playVisible={{show_mic_play}}"'
   188         if (!(this.tag_titles.length == 1 && this.tag_titles[0] == "")) {
   169     + '             pluginspage="http://www.macromedia.com/go/getflashplayer">'
   189           this.tags = _(this.tag_titles).map(function (_tag_title) {
   170     + '        </embed>'
   190             var _tag,
   171     + '    </object>'
   191               _tags = _this.source.getTags().searchByTitle(_tag_title, true);
   172     + '</div>{{/show_mic_record}}' 
   192             if (_tags.length) {
   173     + '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">'
   193               _tag = _tags[0];
   174     + '{{#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}}'
   194             } else {
   175     + '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">'
   195               _tag = new ns.Model.Tag(false, _this.source);
   176     + '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}" data-text="{{keyword}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}'
   196               _this.source.getTags().push(_tag);
   177     + '<div style="clear: both;"></div></form>'
   197               _tag.title = _tag_title;
   178     + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Wait"><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.wait_while_processing}}</div></div>'
   198             }
   179     + '<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>'
   199             return _tag;
   180     + '<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>'
   200           }).value();
   181     + '</div></div>';
   201         } else {
   182     
   202           // we forced no tags if this.tag_titles = [''] (and not false)
   183 IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
   203           this.tags = true;
   184     var _this = this;
   204         }
   185     
   205       }
   186     this.begin = new IriSP.Model.Time();
   206       if (!this.tags) {
   187     this.end = this.source.getDuration();
   207         this.tags = this.source
   188     
   208           .getTags()
   189     this.tag_prefix = this.tag_prefix || "";
   209           .sortBy(function (_tag) {
   190     
   210             return -_tag.getAnnotations().length;
   191     if (this.tag_titles && !this.tags) {
   211           })
   192 		if(!(this.tag_titles.length==1 && this.tag_titles[0]=="")){
   212           .slice(0, this.max_tags)
   193 			this.tags = IriSP._(this.tag_titles).map(function(_tag_title) {
   213           .map(function (_tag) {
   194 				var _tag,
   214             return _tag;
   195 					_tags = _this.source.getTags().searchByTitle(_tag_title, true);
   215           });
   196 				if (_tags.length) {
       
   197 					_tag = _tags[0];
       
   198 				} else {
       
   199 					_tag = new IriSP.Model.Tag(false, _this.source);
       
   200 					_this.source.getTags().push(_tag);
       
   201 					_tag.title = _tag_title;
       
   202 				}
       
   203 				return _tag;
       
   204 			});
       
   205         }
       
   206         else{
       
   207         	// we forced no tags if this.tag_titles = [''] (and not false)
       
   208         	this.tags = true;
       
   209         }
       
   210     }
       
   211     if (!this.tags) {
       
   212         this.tags = this.source.getTags()
       
   213             .sortBy(function (_tag) {
       
   214                 return -_tag.getAnnotations().length;
       
   215             })
       
   216             .slice(0, this.max_tags)
       
   217             .map(function(_tag) {
       
   218                 return _tag;
       
   219             });
       
   220         /* We have to use the map function because Mustache doesn't like our tags object */
   216         /* We have to use the map function because Mustache doesn't like our tags object */
   221     }
   217       }
   222     this.record_swf = IriSP.getLib("recordMicSwf");
   218       this.renderTemplate();
   223     this.renderTemplate();
   219       if (this.show_slice) {
   224     if (this.show_mic_record) {
       
   225         this.recorder = this.$.find("embed")[0];
       
   226         
       
   227         window.setAudioUrl = function(_url) {
       
   228             _this.audio_url = _url;
       
   229         }
       
   230     }
       
   231     if (this.show_slice) {
       
   232         this.insertSubwidget(
   220         this.insertSubwidget(
   233             this.$.find(".Ldt-CreateAnnotation-Slice"),
   221           this.$.find(".Ldt-CreateAnnotation-Slice"),
   234             {
   222           {
   235                 type: "Slice",
   223             type: "Slice",
   236                 show_arrow: this.show_arrow,
   224             show_arrow: this.show_arrow,
   237                 annotation_type: this.slice_annotation_type,
   225             annotation_type: this.slice_annotation_type,
   238                 onBoundsChanged: function(_from, _to) {
   226             onBoundsChanged: function (_from, _to) {
   239                     _this.setBeginEnd(_from, _to);
   227               _this.setBeginEnd(_from, _to);
   240                 }
       
   241             },
   228             },
   242             "slice"
   229           },
       
   230           "slice"
   243         );
   231         );
   244     } else {
   232       } else {
   245         if (this.show_arrow) {
   233         if (this.show_arrow) {
   246             this.insertSubwidget(this.$.find(".Ldt-CreateAnnotation-Arrow"), {type: "Arrow"},"arrow");
   234           this.insertSubwidget(
   247         }
   235             this.$.find(".Ldt-CreateAnnotation-Arrow"),
   248         this.onMediaEvent("timeupdate", function(_time) {
   236             { type: "Arrow" },
   249             // Do not update timecode if description is not empty
   237             "arrow"
   250             if (_this.$.find(".Ldt-CreateAnnotation-Description").val().trim() == "") {
   238           );
   251                 _this.setBeginEnd(_time, _time);
   239         }
   252                 if (_this.arrow) {
   240         this.onMediaEvent("timeupdate", function (_time) {
   253                     _this.arrow.moveToTime(_time);
   241           // Do not update timecode if description is not empty
   254                 }
   242           if (
   255             };
   243             _this.$.find(".Ldt-CreateAnnotation-Description").val().trim() == ""
       
   244           ) {
       
   245             _this.setBeginEnd(_time, _time);
       
   246             if (_this.arrow) {
       
   247               _this.arrow.moveToTime(_time);
       
   248             }
       
   249           }
   256         });
   250         });
   257     }
   251       }
   258     this.$.find(".Ldt-CreateAnnotation-Cancel").click(function() {
   252       this.$.find(".Ldt-CreateAnnotation-Cancel").click(function () {
   259         _this.player.trigger("CreateAnnotation.hide");
   253         _this.player.trigger("CreateAnnotation.hide");
   260     });
   254       });
   261     this.$.find(".Ldt-CreateAnnotation-Close").click(function() {
   255       this.$.find(".Ldt-CreateAnnotation-Close").click(function () {
   262         _this.close_after_send
   256         _this.close_after_send
   263         ? _this.player.trigger("CreateAnnotation.hide")
   257           ? _this.player.trigger("CreateAnnotation.hide")
   264         : _this.showScreen("Main");
   258           : _this.showScreen("Main");
   265         return false;
   259         return false;
   266     });
   260       });
   267     this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").click(function() {
   261       this.$.find(
   268         _this.addKeyword(IriSP.jQuery(this).attr("data-text"));
   262         ".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi"
       
   263       ).click(function () {
       
   264         _this.addKeyword(jQuery(this).attr("data-text"));
   269         return false;
   265         return false;
   270     });
   266       });
   271     this.$.find(".Ldt-CreateAnnotation-PolemicLi").each(function() {
   267       this.$.find(".Ldt-CreateAnnotation-PolemicLi").each(function () {
   272         var _el = IriSP.jQuery(this),
   268         var _el = jQuery(this),
   273             _kw = _el.attr("data-text"),
   269           _kw = _el.attr("data-text"),
   274             _msg = _this.l10n["polemic" + _kw];
   270           _msg = _this.l10n["polemic" + _kw];
   275         if (_msg) {
   271         if (_msg) {
   276             _el.attr("title",_msg);
   272           _el.attr("title", _msg);
   277         }
   273         }
   278     });
   274       });
   279     this.$.find(".Ldt-CreateAnnotation-Description").bind("change keyup input paste", this.functionWrapper("onDescriptionChange"));
   275       this.$.find(".Ldt-CreateAnnotation-Description").bind(
   280     if (this.show_title_field) {
   276         "change keyup input paste",
   281         this.$.find(".Ldt-CreateAnnotation-Title").bind("change keyup input paste", this.functionWrapper("onTitleChange"));
   277         this.functionWrapper("onDescriptionChange")
   282     }
   278       );
   283     if (this.show_creator_field) {
   279       if (this.show_title_field) {
   284         this.$.find(".Ldt-CreateAnnotation-Creator").bind("change keyup input paste", this.functionWrapper("onCreatorChange"));
   280         this.$.find(".Ldt-CreateAnnotation-Title").bind(
   285     }
   281           "change keyup input paste",
   286     this.$.find("[class^='Ldt-CreateAnnotation-Control-']").click(function() {
   282           this.functionWrapper("onTitleChange")
   287         var action = this.className.replace('Ldt-CreateAnnotation-Control-', '');
   283         );
   288         switch (action) {
   284       }
       
   285       if (this.show_creator_field) {
       
   286         this.$.find(".Ldt-CreateAnnotation-Creator").bind(
       
   287           "change keyup input paste",
       
   288           this.functionWrapper("onCreatorChange")
       
   289         );
       
   290       }
       
   291       this.$.find("[class^='Ldt-CreateAnnotation-Control-']").click(
       
   292         function () {
       
   293           var action = this.className.replace(
       
   294             "Ldt-CreateAnnotation-Control-",
       
   295             ""
       
   296           );
       
   297           switch (action) {
   289             case "In":
   298             case "In":
   290                // Set In bound to current player time
   299               // Set In bound to current player time
   291                this.setBegin(_this.media.getCurrentTime());
   300               this.setBegin(_this.media.getCurrentTime());
   292                break;
   301               break;
   293             case "Out":
   302             case "Out":
   294                // Set In bound to current player time
   303               // Set In bound to current player time
   295                this.setEnd(_this.media.getCurrentTime() || _this.media.duration);
   304               this.setEnd(_this.media.getCurrentTime() || _this.media.duration);
   296                break;
   305               break;
   297             case "Play":
   306             case "Play":
   298                this.media.setCurrentTime(_this.begin);
   307               this.media.setCurrentTime(_this.begin);
   299                this.media.play();
   308               this.media.play();
   300                break;
   309               break;
   301         }
   310           }
   302         return false;
   311           return false;
   303     });
   312         }
   304 
   313       );
   305     if (this.start_visible) {
   314 
       
   315       if (this.start_visible) {
   306         this.show();
   316         this.show();
   307     } else {
   317       } else {
   308         this.$.hide();
   318         this.$.hide();
   309         this.hide();
   319         this.hide();
   310     }
   320       }
   311     
   321 
   312     this.onMdpEvent("CreateAnnotation.toggle","toggle");
   322       this.onMdpEvent("CreateAnnotation.toggle", "toggle");
   313     this.onMdpEvent("CreateAnnotation.hide", "hide");
   323       this.onMdpEvent("CreateAnnotation.hide", "hide");
   314     this.onMdpEvent("CreateAnnotation.show", "show");
   324       this.onMdpEvent("CreateAnnotation.show", "show");
   315     this.$.find("form").submit(this.functionWrapper("onSubmit"));
   325       this.$.find("form").submit(this.functionWrapper("onSubmit"));
   316 };
   326     }
   317 
   327 
   318 IriSP.Widgets.CreateAnnotation.prototype.setBegin = function (t) {
   328     setBegin(t) {
   319     this.begin = new IriSP.Model.Time(t || 0);
   329       this.begin = new ns.Model.Time(t || 0);
   320     this.$.find(".Ldt-CreateAnnotation-Begin").html(this.begin.toString());
   330       this.$.find(".Ldt-CreateAnnotation-Begin").html(this.begin.toString());
   321 };
   331     }
   322 
   332 
   323 IriSP.Widgets.CreateAnnotation.prototype.setEnd = function (t) {
   333     setEnd(t) {
   324     this.end = new IriSP.Model.Time(t || 0);
   334       this.end = new ns.Model.Time(t || 0);
   325     this.$.find(".Ldt-CreateAnnotation-End").html(this.end.toString());
   335       this.$.find(".Ldt-CreateAnnotation-End").html(this.end.toString());
   326 };
   336     }
   327 
   337 
   328 IriSP.Widgets.CreateAnnotation.prototype.setBeginEnd = function (begin, end) {
   338     setBeginEnd(begin, end) {
   329     this.setBegin(begin);
   339       this.setBegin(begin);
   330     this.setEnd(end);
   340       this.setEnd(end);
   331 };
   341     }
   332 
   342 
   333 IriSP.Widgets.CreateAnnotation.prototype.showScreen = function(_screenName) {
   343     showScreen(_screenName) {
   334     this.$.find('.Ldt-CreateAnnotation-' + _screenName).show()
   344       this.$.find(".Ldt-CreateAnnotation-" + _screenName)
   335         .siblings().hide();
   345         .show()
   336 };
   346         .siblings()
   337 
   347         .hide();
   338 IriSP.Widgets.CreateAnnotation.prototype.show = function() {
   348     }
   339     if (!this.visible){
   349 
       
   350     show() {
       
   351       if (!this.visible) {
   340         this.visible = true;
   352         this.visible = true;
   341         if (this.pause_when_displaying){
   353         if (this.pause_when_displaying) {
   342             this.media.pause();
   354           this.media.pause();
   343         }
   355         }
   344         this.showScreen('Main');
   356         this.showScreen("Main");
   345         this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666").addClass("empty");
   357         this.$.find(".Ldt-CreateAnnotation-Description")
       
   358           .val("")
       
   359           .css("border-color", "#666666")
       
   360           .addClass("empty");
   346         if (this.show_title_field) {
   361         if (this.show_title_field) {
   347             this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666").addClass("empty");
   362           this.$.find(".Ldt-CreateAnnotation-Title")
       
   363             .val("")
       
   364             .css("border-color", "#666666")
       
   365             .addClass("empty");
   348         }
   366         }
   349         if (this.show_creator_field) {
   367         if (this.show_creator_field) {
   350             this.$.find(".Ldt-CreateAnnotation-Creator").val(this.creator_name).css("border-color", "#666666");
   368           this.$.find(".Ldt-CreateAnnotation-Creator")
   351             if (!this.creator_name) {
   369             .val(this.creator_name)
   352                 this.$.find(".Ldt-CreateAnnotation-Creator").addClass("empty");
   370             .css("border-color", "#666666");
   353             }
   371           if (!this.creator_name) {
   354         }
   372             this.$.find(".Ldt-CreateAnnotation-Creator").addClass("empty");
   355         this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected");
   373           }
       
   374         }
       
   375         this.$.find(
       
   376           ".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi"
       
   377         ).removeClass("selected");
   356         this.$.slideDown();
   378         this.$.slideDown();
   357         if (this.minimize_annotation_widget) {
   379         if (this.minimize_annotation_widget) {
   358             this.player.trigger("Annotation.minimize");
   380           this.player.trigger("Annotation.minimize");
   359         }
   381         }
   360     }
   382       }
   361 };
   383     }
   362 
   384 
   363 IriSP.Widgets.CreateAnnotation.prototype.hide = function() {
   385     hide() {
   364     if (this.visible){
   386       if (this.visible) {
   365         if (this.recorder) {
       
   366             this.recorder.stopRecord();
       
   367         }
       
   368         if (!this.always_visible) {
   387         if (!this.always_visible) {
   369             this.visible = false;
   388           this.visible = false;
   370             this.$.slideUp();
   389           this.$.slideUp();
   371             if (this.minimize_annotation_widget) {
   390           if (this.minimize_annotation_widget) {
   372                 this.player.trigger("Annotation.maximize");
   391             this.player.trigger("Annotation.maximize");
   373             }
   392           }
   374         }
   393         }
   375     }
   394       }
   376 };
   395     }
   377 
   396 
   378 IriSP.Widgets.CreateAnnotation.prototype.toggle = function() {
   397     toggle() {
   379     if (!this.always_visible) {
   398       if (!this.always_visible) {
   380         if (this.visible) {
   399         if (this.visible) {
   381             this.hide();
   400           this.hide();
   382         } else {
   401         } else {
   383             var t = this.media.getCurrentTime() || 0;
   402           var t = this.media.getCurrentTime() || 0;
   384             this.setBeginEnd(t, t);
   403           this.setBeginEnd(t, t);
   385             if (this.slice_widget) {
   404           if (this.slice_widget) {
   386                 this.slice_widget.setBounds(this.begin, this.end);
   405             this.slice_widget.setBounds(this.begin, this.end);
   387             }
   406           }
   388             this.show();
   407           this.show();
   389             // Set focus on textarea
   408           // Set focus on textarea
   390             this.$.find(".Ldt-CreateAnnotation-Description").focus();
   409           this.$.find(".Ldt-CreateAnnotation-Description").focus();
   391         }
   410         }
   392     }
   411       }
   393 };
   412     }
   394 
   413 
   395 IriSP.Widgets.CreateAnnotation.prototype.addKeyword = function(_keyword) {
   414     addKeyword(_keyword) {
   396     var _field = this.$.find(".Ldt-CreateAnnotation-Description"),
   415       var _field = this.$.find(".Ldt-CreateAnnotation-Description"),
   397         _rx = IriSP.Model.regexpFromTextOrArray(_keyword),
   416         _rx = ns.Model.regexpFromTextOrArray(_keyword),
   398         _contents = _field.val();
   417         _contents = _field.val();
   399     _contents = ( !!_contents.match(_rx)
   418       _contents = !!_contents.match(_rx)
   400         ? _contents.replace(_rx,"")
   419         ? _contents.replace(_rx, "")
   401         : _contents + " " + _keyword
   420         : _contents + " " + _keyword;
   402     );
   421       _field.val(_contents.replace(/\s{2,}/g, " ").replace(/(^\s+|\s+$)/g, ""));
   403     _field.val(_contents.replace(/\s{2,}/g,' ').replace(/(^\s+|\s+$)/g,''));
   422       this.onDescriptionChange();
   404     this.onDescriptionChange();
   423     }
   405 };
   424 
   406 
   425     pauseOnWrite() {
   407 IriSP.Widgets.CreateAnnotation.prototype.pauseOnWrite = function() {
   426       if (this.pause_on_write && !this.media.getPaused()) {
   408     if (this.pause_on_write && !this.media.getPaused()) {
       
   409         this.media.pause();
   427         this.media.pause();
   410     }
   428       }
   411 };
   429     }
   412 
   430 
   413 IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function(e) {
   431     onDescriptionChange(e) {
   414     if (e !== undefined && e.keyCode == 13 && !e.shiftKey) {
   432       if (e !== undefined && e.keyCode == 13 && !e.shiftKey) {
   415         // Return: submit. Use shift-Return to insert a LF
   433         // Return: submit. Use shift-Return to insert a LF
   416         this.onSubmit();
   434         this.onSubmit();
   417         return true;
   435         return true;
   418     }
   436       }
   419     var _field = this.$.find(".Ldt-CreateAnnotation-Description"),
   437       var _field = this.$.find(".Ldt-CreateAnnotation-Description"),
   420         _contents = _field.val();
   438         _contents = _field.val();
   421     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
   439       _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
   422     if (!!_contents) {
   440       if (!!_contents) {
   423         _field.removeClass("empty");
   441         _field.removeClass("empty");
   424     } else {
   442       } else {
   425         _field.addClass("empty");
   443         _field.addClass("empty");
   426     }
   444       }
   427     this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").each(function() {
   445       this.$.find(
   428         var _rx = IriSP.Model.regexpFromTextOrArray(IriSP.jQuery(this).attr("data-text"));
   446         ".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi"
       
   447       ).each(function () {
       
   448         var _rx = ns.Model.regexpFromTextOrArray(
       
   449           jQuery(this).attr("data-text")
       
   450         );
   429         if (_contents.match(_rx)) {
   451         if (_contents.match(_rx)) {
   430             IriSP.jQuery(this).addClass("selected");
   452           jQuery(this).addClass("selected");
   431         } else {
   453         } else {
   432             IriSP.jQuery(this).removeClass("selected");
   454           jQuery(this).removeClass("selected");
   433         }
   455         }
   434     });
   456       });
   435     this.pauseOnWrite();
   457       this.pauseOnWrite();
   436     return !!_contents;
   458       return !!_contents;
   437 };
   459     }
   438 
   460 
   439 IriSP.Widgets.CreateAnnotation.prototype.onTitleChange = function() {
   461     onTitleChange() {
   440     var _field = this.$.find(".Ldt-CreateAnnotation-Title"),
   462       var _field = this.$.find(".Ldt-CreateAnnotation-Title"),
   441         _contents = _field.val();
   463         _contents = _field.val();
   442     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
   464       _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
   443     if (!!_contents) {
   465       if (!!_contents) {
   444         _field.removeClass("empty");
   466         _field.removeClass("empty");
   445     } else {
   467       } else {
   446         _field.addClass("empty");
   468         _field.addClass("empty");
   447     }
   469       }
   448     this.pauseOnWrite();
   470       this.pauseOnWrite();
   449     return !!_contents;
   471       return !!_contents;
   450 };
   472     }
   451 
   473 
   452 
   474     onCreatorChange() {
   453 IriSP.Widgets.CreateAnnotation.prototype.onCreatorChange = function() {
   475       var _field = this.$.find(".Ldt-CreateAnnotation-Creator"),
   454     var _field = this.$.find(".Ldt-CreateAnnotation-Creator"),
       
   455         _contents = _field.val();
   476         _contents = _field.val();
   456     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
   477       _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
   457     if (!!_contents) {
   478       if (!!_contents) {
   458         _field.removeClass("empty");
   479         _field.removeClass("empty");
   459     } else {
   480       } else {
   460         _field.addClass("empty");
   481         _field.addClass("empty");
   461     }
   482       }
   462     this.pauseOnWrite();
   483       this.pauseOnWrite();
   463     return !!_contents;
   484       return !!_contents;
   464 };
   485     }
   465 
   486 
   466 IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {
   487     onSubmit() {
   467     /* If mandatory fields are empty, we cancel the sending */
   488       /* If mandatory fields are empty, we cancel the sending */
   468     if (!this.onDescriptionChange() || (this.show_title_field && !this.onTitleChange()) || (this.show_creator_field && !this.onCreatorChange())) {
   489       if (
       
   490         !this.onDescriptionChange() ||
       
   491         (this.show_title_field && !this.onTitleChange()) ||
       
   492         (this.show_creator_field && !this.onCreatorChange())
       
   493       ) {
   469         return false;
   494         return false;
   470     }
   495       }
   471     
   496 
   472     if (this.recorder) {
   497       var _this = this,
   473         this.recorder.stopRecord();
   498         _exportedAnnotations = new ns.Model.List(
   474     }
   499           this.player.sourceManager
   475     
   500         ) /* We create a List to send to the server that will contains the annotation */,
   476     var _this = this,
   501         _export = this.player.sourceManager.newLocalSource({
   477         _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* We create a List to send to the server that will contains the annotation */
   502           serializer: ns.serializers[this.api_serializer],
   478         _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* We create a source object using a specific serializer for export */
   503         }) /* We create a source object using a specific serializer for export */,
   479         _local_export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers['ldt_localstorage']}), /* Source object using a specific serializer for local export */
   504         _local_export = this.player.sourceManager.newLocalSource({
   480         _annotation = new IriSP.Model.Annotation(false, _export), /* We create an annotation in the source with a generated ID (param. false) */
   505           serializer: ns.serializers["ldt_localstorage"],
   481         _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* We get the AnnotationType in which the annotation will be added */
   506         }) /* Source object using a specific serializer for local export */,
   482         _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)), /* If it doesn't already exists, we create it */
   507         _annotation = new ns.Model.Annotation(
   483         _url = Mustache.to_html(this.api_endpoint_template, {id: this.source.projectId}); /* We make the url to send the request to, must include project id */
   508           false,
   484     
   509           _export
   485     /* If we created an AnnotationType on the spot ... */
   510         ) /* We create an annotation in the source with a generated ID (param. false) */,
   486     if (!_annotationTypes.length) {
   511         _annotationTypes = this.source
       
   512           .getAnnotationTypes()
       
   513           .searchByTitle(
       
   514             this.annotation_type,
       
   515             true
       
   516           ) /* We get the AnnotationType in which the annotation will be added */,
       
   517         _annotationType = _annotationTypes.length
       
   518           ? _annotationTypes[0]
       
   519           : new ns.Model.AnnotationType(
       
   520               false,
       
   521               _export
       
   522             ) /* If it doesn't already exists, we create it */,
       
   523         _url = Mustache.render(this.api_endpoint_template, {
       
   524           id: this.source.projectId,
       
   525         }); /* We make the url to send the request to, must include project id */
       
   526 
       
   527       /* If we created an AnnotationType on the spot ... */
       
   528       if (!_annotationTypes.length) {
   487         /* ... We must not send its id to the server ... */
   529         /* ... We must not send its id to the server ... */
   488         _annotationType.dont_send_id = true;
   530         _annotationType.dont_send_id = true;
   489         /* ... And we must include its title. */
   531         /* ... And we must include its title. */
   490         _annotationType.title = this.annotation_type;
   532         _annotationType.title = this.annotation_type;
   491     }
   533       }
   492     
   534 
   493     /*
   535       /*
   494      * Will fill the generated annotation object's data
   536        * Will fill the generated annotation object's data
   495      * WARNING: If we're on a MASHUP, these datas must refer the ORIGINAL MEDIA
   537        * WARNING: If we're on a MASHUP, these datas must refer the ORIGINAL MEDIA
   496      * */
   538        * */
   497     _annotation.setMedia(this.source.currentMedia.id); /* Annotated media ID */
   539       _annotation.setMedia(
   498     
   540         this.source.currentMedia.id
   499     if (this.post_at_segment_time){
   541       ); /* Annotated media ID */
   500         var _currentTime = this.media.getCurrentTime() 
   542 
   501         var _segmentsAnnotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
   543       if (this.post_at_segment_time) {
   502         var _currentSegments = _segmentsAnnotations.filter(function(_segment){
   544         var _currentTime = this.media.getCurrentTime();
   503             return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
   545         var _segmentsAnnotations = this.source.getAnnotationsByTypeTitle(
       
   546           this.segments_annotation_type
       
   547         );
       
   548         var _currentSegments = _segmentsAnnotations.filter(function (_segment) {
       
   549           return _currentTime >= _segment.begin && _currentTime <= _segment.end;
   504         });
   550         });
   505         if (_currentSegments.length == 0){
   551         if (_currentSegments.length == 0) {
   506             _annotation.setBegin(this.begin); /* Widget starting timecode */
   552           _annotation.setBegin(this.begin); /* Widget starting timecode */
   507             _annotation.setEnd(this.end); /* Widget end timecode */
   553           _annotation.setEnd(this.end); /* Widget end timecode */
   508         }
   554         } else {
   509         else {
   555           _annotation.setBegin(
   510             _annotation.setBegin(_currentSegments[0].begin); /* Segment starting timecode */
   556             _currentSegments[0].begin
   511             _annotation.setEnd(_currentSegments[0].end); /* Segment end timecode */
   557           ); /* Segment starting timecode */
   512         }
   558           _annotation.setEnd(
   513     }
   559             _currentSegments[0].end
   514     else {
   560           ); /* Segment end timecode */
   515         _annotation.setBeginEnd(this.begin, this.end); /* Widget end/start timecodes */
   561         }
   516     }
   562       } else {
   517     _annotation.setAnnotationType(_annotationType.id); /* Annotation type ID */
   563         _annotation.setBeginEnd(
   518     if (this.show_title_field) {
   564           this.begin,
       
   565           this.end
       
   566         ); /* Widget end/start timecodes */
       
   567       }
       
   568       _annotation.setAnnotationType(
       
   569         _annotationType.id
       
   570       ); /* Annotation type ID */
       
   571       if (this.show_title_field) {
   519         /* Title field, only if it's visible */
   572         /* Title field, only if it's visible */
   520         _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val();
   573         _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val();
   521     }if (this.project_id != ""){
   574       }
   522     	/* Project id, only if it's been specifiec in the config */
   575       if (this.project_id != "") {
   523     	_annotation.project_id = this.project_id;
   576         /* Project id, only if it's been specifiec in the config */
   524     }
   577         _annotation.project_id = this.project_id;
   525     _annotation.created = new Date(); /* Annotation creation date */
   578       }
   526     _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Description field */
   579       _annotation.created = new Date(); /* Annotation creation date */
   527    
   580       _annotation.description = this.$.find(
   528     var tagIds = Array.prototype.map.call(
   581         ".Ldt-CreateAnnotation-Description"
       
   582       ).val(); /* Description field */
       
   583 
       
   584       var tagIds = Array.prototype.map.call(
   529         this.$.find(".Ldt-CreateAnnotation-TagLi.selected"),
   585         this.$.find(".Ldt-CreateAnnotation-TagLi.selected"),
   530         function(el) { return IriSP.jQuery(el).attr("tag-id"); }
   586         function (el) {
   531     );
   587           return jQuery(el).attr("tag-id");
   532         
   588         }
   533     IriSP._(_annotation.description.match(/#[^\s#.,;]+/g)).each(function(_tt) {
   589       );
       
   590 
       
   591       _(_annotation.description.match(/#[^\s#.,;]+/g)).each(function (_tt) {
   534         var _tag,
   592         var _tag,
   535             _tag_title = _tt.replace(/^#/,''),
   593           _tag_title = _tt.replace(/^#/, ""),
   536             _tags = _this.source.getTags().searchByTitle(_tag_title, true);
   594           _tags = _this.source.getTags().searchByTitle(_tag_title, true);
   537         if (_tags.length) {
   595         if (_tags.length) {
   538             _tag = _tags[0];
   596           _tag = _tags[0];
   539         } else {
   597         } else {
   540             _tag = new IriSP.Model.Tag(false, _this.source);
   598           _tag = new ns.Model.Tag(false, _this.source);
   541             _this.source.getTags().push(_tag);
   599           _this.source.getTags().push(_tag);
   542             _tag.title = _tag_title;
   600           _tag.title = _tag_title;
   543         }
   601         }
   544         if (tagIds.indexOf(_tag.id) === -1) {
   602         if (tagIds.indexOf(_tag.id) === -1) {
   545             tagIds.push(_tag.id);
   603           tagIds.push(_tag.id);
   546         }
   604         }
   547     });
   605       });
   548     _annotation.setTags(IriSP._(tagIds).uniq()); /* Tag ids list */
   606       _annotation.setTags(_(tagIds).uniq()); /* Tag ids list */
   549     if (this.audio_url) {
   607       if (this.audio_url) {
   550         _annotation.audio = {
   608         _annotation.audio = {
   551             src: "mic",
   609           src: "mic",
   552             mimetype: "audio/mp3",
   610           mimetype: "audio/mp3",
   553             href: this.audio_url
   611           href: this.audio_url,
   554         };
   612         };
   555     }
   613       }
   556     if (this.show_creator_field) {
   614       if (this.show_creator_field) {
   557         _annotation.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val();
   615         _annotation.creator = this.$.find(
   558     } else {
   616           ".Ldt-CreateAnnotation-Creator"
       
   617         ).val();
       
   618       } else {
   559         _annotation.creator = this.creator_name;
   619         _annotation.creator = this.creator_name;
   560     }
   620       }
   561     _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */
   621       _exportedAnnotations.push(
   562     
   622         _annotation
   563     if (this.editable_storage != '') {
   623       ); /* Ajout de l'annotation à la liste à exporter */
       
   624 
       
   625       if (this.editable_storage != "") {
   564         // Append to localStorage annotations
   626         // Append to localStorage annotations
   565 
   627 
   566         // FIXME: handle movie ids
   628         // FIXME: handle movie ids
   567         _local_export.addList("annotation", _exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */
   629         _local_export.addList(
   568         _this.source.merge(_local_export); /* On ajoute la nouvelle annotation au recueil original */
   630           "annotation",
       
   631           _exportedAnnotations
       
   632         ); /* Ajout de la liste à exporter à l'objet Source */
       
   633         _this.source.merge(
       
   634           _local_export
       
   635         ); /* On ajoute la nouvelle annotation au recueil original */
   569         // Import previously saved local annotations
   636         // Import previously saved local annotations
   570         if (window.localStorage[this.editable_storage]) {
   637         if (window.localStorage[this.editable_storage]) {
   571             _local_export.deSerialize(window.localStorage[this.editable_storage]);
   638           _local_export.deSerialize(window.localStorage[this.editable_storage]);
   572         }
   639         }
   573         // Save everything back
   640         // Save everything back
   574         window.localStorage[_this.editable_storage] = _local_export.serialize();
   641         window.localStorage[_this.editable_storage] = _local_export.serialize();
   575         _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
   642         _this.player.trigger(
       
   643           "AnnotationsList.refresh"
       
   644         ); /* On force le rafraîchissement du widget AnnotationsList */
   576         _this.player.trigger("Annotation.create", _annotation);
   645         _this.player.trigger("Annotation.create", _annotation);
   577         _this.$.find(".Ldt-CreateAnnotation-Description").val("");
   646         _this.$.find(".Ldt-CreateAnnotation-Description").val("");
   578     }
   647       }
   579     
   648 
   580     if (_url !== "") {
   649       if (_url !== "") {
   581         _exportedAnnotations.push(_annotation); /* We add the annotation in the list to export */
   650         _exportedAnnotations.push(
   582         _export.addList("annotation",_exportedAnnotations); /* We add the list to the source object */ 
   651           _annotation
       
   652         ); /* We add the annotation in the list to export */
       
   653         _export.addList(
       
   654           "annotation",
       
   655           _exportedAnnotations
       
   656         ); /* We add the list to the source object */
   583         var _this = this;
   657         var _this = this;
   584         /* We send the AJAX request to the server ! */
   658         /* We send the AJAX request to the server ! */
   585         IriSP.jQuery.ajax({
   659         jQuery.ajax({
   586             url: _url,
   660           url: _url,
   587             type: this.api_method,
   661           type: this.api_method,
   588             contentType: 'application/json',
   662           contentType: "application/json",
   589             data: _export.serialize(), /* Source is serialized */
   663           data: _export.serialize() /* Source is serialized */,
   590             success: function(_data) {
   664           success: function (_data) {
   591                 _this.showScreen('Saved'); 
   665             _this.showScreen("Saved");
   592                 if (_this.after_send_timeout) { 
   666             if (_this.after_send_timeout) {
   593                     window.setTimeout(
   667               window.setTimeout(function () {
   594                         function() {
   668                 _this.close_after_send
   595                             _this.close_after_send
   669                   ? _this.player.trigger("CreateAnnotation.hide")
   596                                 ? _this.player.trigger("CreateAnnotation.hide")
   670                   : _this.player.trigger("CreateAnnotation.show");
   597                                 : _this.player.trigger("CreateAnnotation.show");
   671               }, _this.after_send_timeout);
   598                         },
       
   599                         _this.after_send_timeout
       
   600                     );
       
   601                 }
       
   602                 _export.getAnnotations().removeElement(_annotation, true); /* We delete the sent annotation to avoid redundancy */
       
   603                 _export.deSerialize(_data); /* Data deserialization */
       
   604                 _this.source.merge(_export); /* We merge the deserialized data with the current source data */
       
   605                 if (_this.pause_on_write && _this.media.getPaused()) {
       
   606                     _this.media.play();
       
   607                 }
       
   608                 _this.player.trigger("AnnotationsList.refresh"); 
       
   609             },
       
   610             error: function(_xhr, _error, _thrown) {
       
   611                 IriSP.log("Error when sending annotation", _thrown);
       
   612                 _export.getAnnotations().removeElement(_annotation, true);
       
   613                 _this.showScreen('Error');
       
   614                 window.setTimeout(function(){
       
   615                     _this.showScreen("Main")
       
   616                 },
       
   617                                   (_this.after_send_timeout || 5000));
       
   618             }
   672             }
       
   673             _export
       
   674               .getAnnotations()
       
   675               .removeElement(
       
   676                 _annotation,
       
   677                 true
       
   678               ); /* We delete the sent annotation to avoid redundancy */
       
   679             _export.deSerialize(_data); /* Data deserialization */
       
   680             _this.source.merge(
       
   681               _export
       
   682             ); /* We merge the deserialized data with the current source data */
       
   683             if (_this.pause_on_write && _this.media.getPaused()) {
       
   684               _this.media.play();
       
   685             }
       
   686             _this.player.trigger("AnnotationsList.refresh");
       
   687           },
       
   688           error: function (_xhr, _error, _thrown) {
       
   689             ns.log("Error when sending annotation", _thrown);
       
   690             _export.getAnnotations().removeElement(_annotation, true);
       
   691             _this.showScreen("Error");
       
   692             window.setTimeout(function () {
       
   693               _this.showScreen("Main");
       
   694             }, _this.after_send_timeout || 5000);
       
   695           },
   619         });
   696         });
   620         this.showScreen('Wait');
   697         this.showScreen("Wait");
   621     };
   698       }
   622     return false;
   699       return false;
       
   700     }
       
   701   };
   623 };
   702 };
   624 
   703 
       
   704 export { CreateAnnotation, createAnnotationStyles };