1 // TODO: Trigger IriSP.SegmentsWidget.click

     2 

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

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

     5 };

     6 

     7 IriSP.Widgets.Segments.prototype = new IriSP.Widgets.Widget();

     8 

     9 IriSP.Widgets.Segments.prototype.defaults = {

    10     annotation_type : "chap",

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

    12     height: 10

    13 };

    14 

    15 IriSP.Widgets.Segments.prototype.template =

    16     '<div class="Ldt-Segments-List"></div>'

    17     + '<div class="Ldt-Segments-Position"></div>'

    18     + '<div class="Ldt-Segments-Tooltip"></div>';

    19 

    20 IriSP.Widgets.Segments.prototype.annotationTemplate =

    21     '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-text="{{text}}"'

    22     + 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>'

    23 

    24 

    25 IriSP.Widgets.Segments.prototype.draw = function() {

    26     this.bindPopcorn("IriSP.search", "onSearch");

    27     this.bindPopcorn("IriSP.search.closed", "onSearch");

    28     this.bindPopcorn("IriSP.search.cleared", "onSearch");

    29     this.bindPopcorn("timeupdate", "onTimeupdate");

    30     

    31     this.renderTemplate();

    32     

    33     var _list = this.getWidgetAnnotations(),

    34         _this = this,

    35         _scale = this.width / this.source.getDuration();

    36     this.$.css({

    37         width : this.width + "px",

    38         height : (this.height - 2) + "px",

    39         margin : "1px 0"

    40     });

    41     this.list_$ = this.$.find('.Ldt-Segments-List');

    42     

    43     _list.forEach(function(_annotation, _k) {

    44         var _left = _annotation.begin * _scale,

    45             _width = ( _annotation.getDuration() ) * _scale,

    46             _center = Math.floor( _left + _width / 2 ),

    47             _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ),

    48             _beginseconds = _annotation.begin.getSeconds();

    49         var _data = {

    50             color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ),

    51             text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'),

    52             left : Math.floor( _left ),

    53             width : Math.floor( _width ),

    54             id : _annotation.id,

    55             media_id : _annotation.getMedia().id

    56         };

    57         var _html = Mustache.to_html(_this.annotationTemplate, _data),

    58             _el = IriSP.jQuery(_html);

    59         _el.mouseover(function() {

    60                 _annotation.trigger("select");

    61             })

    62             .mouseout(function() {

    63                 _annotation.trigger("unselect");

    64             })

    65             .click(function() {

    66                 _this.player.popcorn.currentTime(_beginseconds);

    67                 _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _data.id);

    68             })

    69             .appendTo(_this.list_$)

    70         _annotation.on("select", function() {

    71             _this.$segments.removeClass("active").addClass("inactive");

    72             _this.tooltip.show( _center, 0, _data.text, _data.color );

    73             _el.removeClass("inactive").addClass("active");

    74         });

    75         _annotation.on("unselect", function() {

    76             _this.tooltip.hide();

    77             _this.$segments.removeClass("inactive active");

    78         });

    79     });

    80     this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), "tooltip", { type: "Tooltip" });

    81     this.$segments = this.$.find('.Ldt-Segments-Segment');

    82 }

    83 

    84 IriSP.Widgets.Segments.prototype.onSearch = function(searchString) {

    85     this.searchString = typeof searchString !== "undefined" ? searchString : '';

    86     var _found = 0,

    87         _re = IriSP.Model.regexpFromTextOrArray(searchString, true);

    88     if (this.searchString) {

    89         this.$segments.each(function() {

    90             var _el = IriSP.jQuery(this);

    91             if (_re.test(_el.attr("segment-text"))) {

    92                 _el.removeClass("unfound").addClass("found");

    93                 _found++;

    94             } else {

    95                 _el.removeClass("found").addClass("unfound");

    96             }

    97         });

    98         if (_found) {

    99             this.player.popcorn.trigger("IriSP.search.matchFound");

   100         } else {

   101             this.player.popcorn.trigger("IriSP.search.noMatchFound");

   102         }

   103     } else {

   104         this.$segments.removeClass("found unfound");

   105     }

   106 }

   107 

   108 IriSP.Widgets.Segments.prototype.onTimeupdate = function() {

   109     var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds());

   110     this.$.find('.Ldt-Segments-Position').css({

   111         left: _x + "px"

   112     })

   113 }