1 /* TODO: Add Social Network Sharing and from field */

     2 

     3 IriSP.Widgets.CreateAnnotation = function(player, config) {

     4     IriSP.Widgets.Widget.call(this, player, config);

     5     this.lastAnnotation = false;

     6 };

     7 

     8 IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget();

     9 

    10 IriSP.Widgets.CreateAnnotation.prototype.defaults = {

    11     show_title_field : true,

    12     creator_name : "",

    13     creator_avatar : "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png",

    14     tags : false,

    15     max_tags : 8,

    16     polemics : [{

    17         keyword: "++",

    18         background_color: "#00a000",

    19         text_color: "#ffffff"

    20     },{

    21         keyword: "--",

    22         background_color: "#c00000",

    23         text_color: "#ffffff"

    24     },{

    25         keyword: "??",

    26         background_color: "#0000e0",

    27         text_color: "#ffffff"

    28     },{

    29         keyword: "==",

    30         background_color: "#f0e000",

    31         text_color: "#000000"

    32     }],

    33     annotation_type: "Contributions",

    34     api_serializer: "ldt_annotate",

    35     api_endpoint_template: "",

    36     api_method: "PUT",

    37     close_widget_timeout: 0

    38 }

    39 

    40 IriSP.Widgets.CreateAnnotation.prototype.messages = {

    41     en: {

    42         from_time: "from",

    43         to_time: "to",

    44         submit: "Submit",

    45         add_keywords_: "Add keywords:",

    46         add_polemic_keywords_: "Add polemic keywords:",

    47         your_name: "Your name",

    48         no_title: "Annotate this video",

    49         type_title: "Annotation title",

    50         type_description: "Type the full description of your annotation here.",

    51         wait_while_processing: "Please wait while your request is being processed...",

    52         error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.",

    53         empty_annotation: "Your annotation is empty. Please write something before submitting.",

    54         annotation_saved: "Thank you, your annotation has been saved.",

    55         share_annotation: "Would you like to share it on social networks ?",

    56         share_on: "Share on",

    57         more_tags: "More tags",

    58         cancel: "Cancel",

    59         close_widget: "Cacher la zone de création d'annotations"

    60     },

    61     fr: {

    62         from_time: "de",

    63         to_time: "à",

    64         submit: "Envoyer",

    65         add_keywords_: "Ajouter des mots-clés :",

    66         add_polemic_keywords_: "Ajouter des mots-clés polémiques :",

    67         your_name: "Votre nom",

    68         no_title: "Annoter cette vidéo",

    69         type_title: "Titre de l'annotation",

    70         type_description: "Rédigez le contenu de votre annotation ici.",

    71         wait_while_processing: "Veuillez patienter pendant le traitement de votre requête...",

    72         error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée",

    73         empty_annotation: "Votre annotation est vide. Merci de rédiger un texte avant de l'envoyer.",

    74         annotation_saved: "Merci, votre annotation a été enregistrée.",

    75         share_annotation: "Souhaitez-vous la partager sur les réseaux sociaux ?",

    76         share_on: "Partager sur",

    77         more_tags: "Plus de mots-clés",

    78         cancel: "Cancel",

    79         close_widget: "Hide the annotation creating block"

    80     }

    81 }

    82 

    83 IriSP.Widgets.CreateAnnotation.prototype.template =

    84     '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">'

    85     + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">'

    86     + '<h3>{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'

    87     + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}} </span>{{/show_title_field}}'

    88     + ' <span class="Ldt-CreateAnnotation-Times">{{l10n.from_time}} <span class="Ldt-CreateAnnotation-Begin"></span>'

    89     + ' {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End"></span></span></h3>'

    90     + '<textarea class="Ldt-CreateAnnotation-Description" placeholder="{{l10n.type_description}}"></textarea>'

    91     + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>'

    92     + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />'

    93     + '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">'

    94     + '{{#tags}}<li class="Ldt-CreateAnnotation-TagLi" tag-id="{{id}}"><span class="Ldt-CreateAnnotation-TagButton">{{title}}</span></li>{{/tags}}</ul></div>{{/tags.length}}'

    95     + '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">'

    96     + '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}'

    97     + '<div style="clear: both;"></div></form>'

    98     + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Wait"><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.wait_while_processing}}</div></div>'

    99     + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Error"><a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.error_while_contacting}}</div></div>'

   100     + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Saved"><a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.annotation_saved}}</div></div>'

   101     + '</div></div>';

   102     

   103 IriSP.Widgets.CreateAnnotation.prototype.draw = function() {

   104     if (!this.tags) {

   105         this.tags = this.source.getTags()

   106             .sortBy(function (_tag) {

   107                 return -_tag.getAnnotations().length;

   108             })

   109             .slice(0, this.max_tags)

   110             .map(function(_tag) {

   111                 return _tag;

   112             });

   113         // We have to use the map function because Mustache doesn't like our tags object

   114     }

   115     var _this = this;

   116     this.renderTemplate();

   117     this.$.find(".Ldt-CreateAnnotation-Close").click(function() {

   118         _this.hide();

   119         return false;

   120     });

   121     this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").click(function() {

   122         _this.addKeyword(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));

   123         return false;

   124     });

   125     this.$.find(".Ldt-CreateAnnotation-Description").bind("change keyup input paste", this.functionWrapper("onDescriptionChange"));

   126     if (this.show_title_field) {

   127         this.$.find(".Ldt-CreateAnnotation-Title").bind("change keyup input paste", this.functionWrapper("onTitleChange"));

   128     }

   129     

   130     this.$.hide();

   131     this.hide();

   132     this.bindPopcorn("IriSP.CreateAnnotation.toggle","toggle");

   133     this.bindPopcorn("IriSP.Slice.boundsChanged","onBoundsChanged");

   134     this.begin = new IriSP.Model.Time();

   135     this.end = this.source.getDuration();

   136     this.$.find("form").submit(this.functionWrapper("onSubmit"));

   137 }

   138 

   139 IriSP.Widgets.CreateAnnotation.prototype.showScreen = function(_screenName) {

   140     this.$.find('.Ldt-CreateAnnotation-' + _screenName).show()

   141         .siblings().hide();

   142 }

   143 

   144 IriSP.Widgets.CreateAnnotation.prototype.show = function() {

   145     this.visible = true;

   146     this.showScreen('Main');

   147     this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666");

   148     this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666");

   149     this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected");

   150     this.$.slideDown();

   151     this.player.popcorn.trigger("IriSP.Annotation.minimize");

   152     this.player.popcorn.trigger("IriSP.Slice.show");

   153 }

   154 

   155 IriSP.Widgets.CreateAnnotation.prototype.hide = function() {

   156     this.visible = false;

   157     this.$.slideUp();

   158     this.player.popcorn.trigger("IriSP.Annotation.maximize");

   159     this.player.popcorn.trigger("IriSP.Slice.hide");

   160 }

   161 

   162 IriSP.Widgets.CreateAnnotation.prototype.toggle = function() {

   163     if (this.visible) {

   164         this.hide();

   165     } else {

   166         this.show();

   167     }

   168 }

   169 

   170 IriSP.Widgets.CreateAnnotation.prototype.onBoundsChanged = function(_values) {

   171     this.begin = new IriSP.Model.Time(_values[0] || 0);

   172     this.end = new IriSP.Model.Time(_values[1] || 0);

   173     this.$.find(".Ldt-CreateAnnotation-Begin").html(this.begin.toString());

   174     this.$.find(".Ldt-CreateAnnotation-End").html(this.end.toString());

   175 }

   176 

   177 IriSP.Widgets.CreateAnnotation.prototype.addKeyword = function(_keyword) {

   178     var _field = this.$.find(".Ldt-CreateAnnotation-Description"),

   179         _rx = IriSP.Model.regexpFromTextOrArray(_keyword),

   180         _contents = _field.val();

   181     _contents = ( _rx.test(_contents)

   182         ? _contents.replace(_rx,"")

   183         : _contents + " " + _keyword

   184     );

   185     _field.val(_contents.replace(/\s{2,}/g,' ').replace(/(^\s+|\s+$)/g,''));

   186     this.onDescriptionChange();

   187 }

   188 

   189 IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function() {

   190     var _field = this.$.find(".Ldt-CreateAnnotation-Description"),

   191         _contents = _field.val();

   192     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");

   193     this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").each(function() {

   194         var _rx = IriSP.Model.regexpFromTextOrArray(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));

   195         if (_rx.test(_contents)) {

   196             IriSP.jQuery(this).addClass("selected");

   197         } else {

   198             IriSP.jQuery(this).removeClass("selected");

   199         }

   200     });

   201     return !!_contents;

   202 }

   203 

   204 IriSP.Widgets.CreateAnnotation.prototype.onTitleChange = function() {

   205     var _field = this.$.find(".Ldt-CreateAnnotation-Title"),

   206         _contents = _field.val();

   207     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");

   208     return !!_contents;

   209 }

   210 

   211 IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {

   212     if (!this.onDescriptionChange() || (!this.onTitleChange() && this.show_title_field)) {

   213         return;

   214     }

   215     

   216     var _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager);

   217         _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}),

   218         _annotation = new IriSP.Model.Annotation(false, _export),

   219         _annotationType = new IriSP.Model.AnnotationType(false, _export),

   220         _url = Mustache.to_html(this.api_endpoint_template, {id: this.source.projectId});

   221 

   222     _annotationType.title = this.annotation_type;

   223     _annotation.setBegin(this.begin);

   224     _annotation.setEnd(this.end);

   225     _annotation.setMedia(this.source.currentMedia.id);

   226     _annotation.setAnnotationType(_annotationType.id);

   227     if (this.show_title_field) {

   228         _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val()

   229     }

   230     _annotation.created = new Date();

   231     _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val();

   232     _annotation.setTags(this.$.find(".Ldt-CreateAnnotation-TagLi.selected").map(function() { return IriSP.jQuery(this).attr("tag-id")}));

   233     

   234     _export.creator = this.creator_name;

   235     _export.created = new Date();

   236     _exportedAnnotations.push(_annotation);

   237     _export.addList("annotation",_exportedAnnotations);

   238     

   239     var _this = this;

   240     IriSP.jQuery.ajax({

   241         url: _url,

   242         type: this.api_method,

   243         contentType: 'application/json',

   244         data: _export.serialize(),

   245         success: function(_data) {

   246             _this.showScreen('Saved');

   247             if (_this.close_widget_timeout) {

   248                 window.setTimeout(_this.functionWrapper("hide"),_this.close_widget_timeout);

   249             }

   250             _export.getAnnotations().removeElement(_annotation, true);

   251             _export.deSerialize(_data);

   252             _this.source.merge(_export);

   253             _this.player.popcorn.trigger("IriSP.AnnotationsList.refresh");

   254         },

   255         error: function(_xhr, _error, _thrown) {

   256             IriSP.log("Error when sending annotation", _thrown);

   257             _this.showScreen('Error');

   258             window.setTimeout(function(){

   259                 _this.showScreen("Main")

   260             },

   261             (_this.close_widget_timeout || 5000));

   262         }

   263     });

   264     this.showScreen('Wait');

   265     

   266     return false;

   267 }

   268