1 IriSP.SegmentsWidget = function(Popcorn, config, Serializer) {

     2 

     3   var self = this;

     4   IriSP.Widget.call(this, Popcorn, config, Serializer);

     5   this.oldSearchMatches = [];

     6 

     7   // event handlers

     8   this._Popcorn.listen("IriSP.search", function(searchString) { self.searchHandler.call(self, searchString); });

     9   this._Popcorn.listen("IriSP.search.closed", function() { self.searchFieldClosedHandler.call(self); });

    10   this._Popcorn.listen("IriSP.search.cleared", function() { self.searchFieldClearedHandler.call(self); });

    11   

    12   this.defaultColors = ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"]

    13 };

    14 

    15 IriSP.SegmentsWidget.prototype = new IriSP.Widget();

    16 

    17 IriSP.SegmentsWidget.prototype.draw = function() {

    18 

    19   var self = this;

    20   var annotations = this._serializer._data.annotations;

    21 

    22   this.selector.addClass("Ldt-SegmentsWidget");

    23   this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));

    24   

    25   this.positionMarker = this.selector.find(".Ldt-SegmentPositionMarker");

    26   

    27   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater));

    28   var duration = this.getDuration();

    29   

    30   if (this.cinecast_version) {

    31       var segments_annotations = IriSP.underscore.filter(

    32           this._serializer._data.annotations,

    33           function(_a) {

    34               return _a.type == "cinecast:MovieExtract";

    35           }

    36       );

    37   }

    38   else {

    39 

    40       var view_type = this._serializer.getChapitrage();

    41       if (typeof(view_type) === "undefined") {

    42         view_type = this._serializer.getNonTweetIds()[0];  

    43       }

    44     

    45       

    46       var i = 0;

    47       

    48       var segments_annotations = [];

    49       

    50       for (i = 0; i < annotations.length; i++) {

    51         var annotation = annotations[i];

    52     

    53         /* filter the annotations whose type is not the one we want */

    54         if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined"

    55               && annotation.meta["id-ref"] != view_type) {

    56             continue;

    57         }

    58     

    59         segments_annotations.push(annotation);

    60       }

    61 }    

    62     var _w = this.selector.width();

    63   var lastSegment = IriSP.underscore.max(segments_annotations, function(annotation) { return annotation.end; });

    64   

    65   for (i = 0; i < segments_annotations.length; i++) {

    66   

    67     var annotation = segments_annotations[i];

    68     var begin = (+ annotation.begin);

    69     var end = (+ annotation.end);

    70     var id = annotation.id;

    71         

    72     var startPixel = Math.floor(_w * (begin / duration));

    73 

    74     var endPixel = Math.floor(_w * (end / duration));

    75     if (annotation.id !== lastSegment.id) 

    76       var pxWidth = endPixel - startPixel -1;

    77     else

    78       /* the last segment has no segment following it */

    79       var pxWidth = endPixel - startPixel;

    80     

    81     var divTitle = this.cinecast_version

    82         ? annotation.content.data

    83         : annotation.content.title + ( annotation.content.title ? "<br />" : "" ) + annotation.content.description.replace(/(^.{120,140})[\s].+$/,'$1&hellip;');

    84     

    85     var thumbUrl = annotation.meta.thumbnail || '';

    86     

    87     var hexa_color = typeof(annotation.content.color) !== "undefined"

    88         ? '#' + IriSP.DEC_HEXA_COLOR(annotation.content.color)

    89         : typeof(annotation.color) !== "undefined"

    90             ? '#' + IriSP.DEC_HEXA_COLOR(annotation.color)

    91             : this.defaultColors[i % this.defaultColors.length];

    92 

    93     /*

    94     if (hexa_color === "FFCC00")

    95       hexa_color = "333";

    96     */

    97     if (hexa_color.length == 5)

    98       hexa_color = hexa_color + '00';

    99     

   100     

   101     var annotationTemplate = Mustache.to_html(IriSP.annotation_template,

   102         {"divTitle" : divTitle, "id" : id, "startPixel" : startPixel,

   103         "pxWidth" : pxWidth, "hexa_color" : hexa_color,

   104         "seekPlace" : Math.round(begin/1000), "thumbnailUrl": thumbUrl});

   105 

   106         

   107     this.selector.append(annotationTemplate);

   108     

   109     /* add a special class to the last segment and change its border */

   110     if (annotation.id === lastSegment.id) {

   111         IriSP.jqId(id).addClass("Ldt-lastSegment").css("border-color", hexa_color);  

   112     }

   113    }

   114     // react to mediafragment messages.

   115     this._Popcorn.listen("IriSP.Mediafragment.showAnnotation", 

   116         function(id, divTitle) {

   117         

   118             var divObject = IriSP.jqId(id);

   119             if (divObject.length) {

   120             divObject.fadeTo(0,1);

   121             var offset_x = divObject.position().left + divObject.outerWidth() / 2;

   122             self.TooltipWidget.show(divObject.attr("title"), IriSP.jQuery(this).css("background-color"), offset_x, 0);

   123             IriSP.jQuery(document).one("mousemove", function() { divObject.fadeTo(0,.5);

   124                                                                 self.TooltipWidget.hide(); });

   125         }

   126       });

   127       

   128     this.selector.find(".Ldt-iri-chapter")

   129         .fadeTo(0, .5)

   130         .click(function() {

   131             self._Popcorn.trigger("IriSP.SegmentsWidget.click", this.id);

   132             self._Popcorn.currentTime(IriSP.jQuery(this).attr("data-seek"));

   133         })

   134         .mouseover( function(event) {

   135             var divObject = IriSP.jQuery(this);

   136             divObject.fadeTo(0,1);

   137             var offset_x = divObject.position().left + divObject.outerWidth() / 2;

   138             var thumb = divObject.attr("thumbnail-url");

   139             var txt = divObject.attr("title") + (thumb && thumb.length ? '<br /><img src="' + thumb + '" />' : '');

   140             self.TooltipWidget.show(txt, IriSP.jQuery(this).css("background-color"), offset_x, 0);

   141         })

   142         .mouseout(function(){

   143             IriSP.jQuery(this).fadeTo(0,.5);

   144             self.TooltipWidget.hide();

   145         });

   146 };

   147 

   148 /* restores the view after a search */

   149 IriSP.SegmentsWidget.prototype.clear = function() {

   150   this.selector.children(".Ldt-iri-chapter").fadeTo(0,.5);

   151 };

   152 

   153 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {

   154   this._Popcorn.trigger("IriSP.SegmentsWidget.click", annotation.id);

   155   var begin = (+ annotation.begin) / 1000;

   156   this._Popcorn.currentTime(Math.round(begin));

   157 };

   158 

   159 IriSP.SegmentsWidget.prototype.searchHandler = function(searchString) {

   160 

   161   if (searchString == "")

   162     return;

   163 

   164   var matches = this._serializer.searchOccurences(searchString);

   165 

   166   if (IriSP.countProperties(matches) > 0) {

   167     this._Popcorn.trigger("IriSP.search.matchFound");

   168   } else {

   169     this._Popcorn.trigger("IriSP.search.noMatchFound");

   170   }

   171 

   172   // un-highlight all the blocks

   173   this.selector.children(".Ldt-iri-chapter").css("opacity", 0.1);

   174  

   175   // then highlight the ones with matches.

   176   for (var id in matches) {

   177     var factor = 0.5 + matches[id] * 0.2;

   178     this.selector.find("#"+id).dequeue();

   179     this.selector.find("#"+id).animate({opacity:factor}, 200);

   180   }

   181 

   182  

   183   this.oldSearchMatches = matches;

   184 };

   185 

   186 IriSP.SegmentsWidget.prototype.searchFieldClearedHandler = function() {

   187   this.clear();

   188 };

   189 

   190 IriSP.SegmentsWidget.prototype.searchFieldClosedHandler = function() {

   191   this.clear();

   192 };

   193 

   194 IriSP.SegmentsWidget.prototype.positionUpdater = function() {  

   195   var duration = this.getDuration() / 1000;

   196   var time = this._Popcorn.currentTime();

   197   //var position 	= ((time / duration) * 100).toFixed(2);

   198   var position 	= ((time / duration) * 100).toFixed(2);

   199 

   200   this.positionMarker.css("left", position + "%");  

   201 };

   202 

   203 IriSP.SegmentsWidget.prototype.showAnnotation = function() {

   204 

   205 };