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     line_height: 8,

    13     background: "#e0e0e0",

    14     overlap: .25,

    15     found_color: "#FF00FC",

    16     faded_found_color: "#ff80fc",

    17     selected_color: "#74d600",

    18     faded_selected_color: "#baf9b5",

    19     no_tooltip: false,

    20     use_timerange: false,

    21     scale_to_parent: true

    22 };

    23 

    24 IriSP.Widgets.Segments.prototype.template =

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

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

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

    28 

    29 IriSP.Widgets.Segments.prototype.annotationTemplate =

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

    31     + 'style="top:{{top}}px; height:{{height}}px; left:{{left}}px; width:{{width}}px; background:{{medcolor}}" data-base-color="{{color}}" data-low-color="{{lowcolor}}" data-medium-color="{{medcolor}}"></div>';

    32 

    33 

    34 IriSP.Widgets.Segments.prototype.do_draw = function (isRedraw) {

    35     if (this.width != this.$.parent().width() && this.scale_to_parent) {

    36         // Reset width

    37         this.width = this.$.parent().width();

    38         this.$.css({ width : this.width + "px" });

    39     }

    40     var _this = this,

    41         _list = this.getWidgetAnnotations().filter(function(_ann) {

    42             return _ann.getDuration() > 0 && _ann.getMedia().id == _this.media.id;

    43         }),

    44         _scale = this.width / this.source.getDuration(),

    45         list_$ = this.$.find('.Ldt-Segments-List'),

    46         lines = [],

    47         zindex = 1,

    48         searching = false;

    49     

    50     function saturate(r, g, b, s) {

    51         function satcomp(c) {

    52             return Math.floor(240 * (1 - s) + c * s);

    53         }

    54         var res = ( 0x10000 * satcomp(r) + 0x100 * satcomp(g) + satcomp(b)).toString(16);

    55         while (res.length < 6) {

    56             res = "0" + res;

    57         }

    58         return "#" + res;

    59     }

    60 

    61     if (isRedraw) {

    62         // Remove all previous elements before recreating them. Not very efficient.

    63         this.$.find('.Ldt-Segments-Segment').remove();

    64     }

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

    66         var _left = _annotation.begin * _scale,

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

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

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

    70             line = IriSP._(lines).find(function(line) {

    71                 return !IriSP._(line.annotations).find(function(a) {

    72                     return a.begin < _annotation.end && a.end > _annotation.begin;

    73                 });

    74             });

    75         if (!line) {

    76             line = { index: lines.length, annotations: []};

    77             lines.push(line); 

    78         }

    79         line.annotations.push(_annotation);

    80         var _top = ((1 - _this.overlap) * line.index) * _this.line_height,

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

    82             r = parseInt(color.substr(1,2),16),

    83             g = parseInt(color.substr(3,2),16),

    84             b = parseInt(color.substr(5,2),16),

    85             medcolor = saturate(r, g, b, .5),

    86             lowcolor = saturate(r, g, b, .2);

    87         var _data = {

    88             color : color,

    89             medcolor: medcolor,

    90             lowcolor: lowcolor,

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

    92             left : _left,

    93             width : _width,

    94             top: _top,

    95             height: _this.line_height - 1,

    96             id : _annotation.id,

    97             media_id : _annotation.getMedia().id,

    98             from: _annotation.begin.toString(),

    99             to: _annotation.end.toString()

   100         };

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

   102             _el = IriSP.jQuery(_html);

   103         _el.mouseover(function() {

   104                 _annotation.trigger("select");

   105             })

   106             .mouseout(function() {

   107                 _annotation.trigger("unselect");

   108             })

   109             .click(function() {

   110                 if(_this.use_timerange){

   111                     if(!_this.media.getTimeRange()){

   112                         _this.media.setCurrentTime(_annotation.begin);

   113                         _this.media.setTimeRange(_annotation.begin, _annotation.end);

   114                         _this.media.play();

   115                         _this.$segments.each(function(){

   116                             var _segment = IriSP.jQuery(this);

   117                             _segment.css("background", lowcolor).removeClass("selected");

   118                         })

   119                         _el.css("background", _this.selected_color).addClass("selected");

   120                     }

   121                     else if (_this.media.getTimeRange()[0]==_annotation.begin || _this.media.getTimeRange()[1]==_annotation.end){

   122                         _this.media.resetTimeRange();

   123                         _this.$segments.each(function(){

   124                             var _segment = IriSP.jQuery(this);

   125                             _segment.css("background", lowcolor).removeClass("selected");

   126                             _annotation.trigger("select");

   127                         })

   128                     }

   129                     else {

   130                         _this.media.setCurrentTime(_annotation.begin);

   131                         _this.media.setTimeRange(_annotation.begin, _annotation.end);

   132                         _this.media.play();

   133                         _this.$segments.each(function(){

   134                             var _segment = IriSP.jQuery(this);

   135                             _segment.css("background", lowcolor).removeClass("selected");

   136                         })

   137                         _el.css("background", _this.selected_color).addClass("selected");

   138                     }

   139                 }

   140                 _annotation.trigger("click");

   141             })

   142             .appendTo(list_$);

   143         IriSP.attachDndData(_el, {

   144         	title: _annotation.title,

   145         	description: _annotation.description,

   146         	uri: (typeof _annotation.url !== "undefined" 

   147                 ? _annotation.url

   148                 : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id)),

   149             image: _annotation.thumbnail,

   150             text: '[' + _annotation.begin.toString() + '] ' + _annotation.title

   151         });

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

   153             _this.$segments.each(function() {

   154                 var _segment = IriSP.jQuery(this);

   155                 _segment.css({

   156                     background: _segment.hasClass("found") ? _this.faded_found_color : _segment.attr("data-low-color")

   157                 });

   158                 _segment.css({

   159                     background: _segment.hasClass("selected") ? _this.faded_selected_color : _segment.attr("data-low-color")

   160                 })

   161             });

   162             _el.css({

   163                 background: _el.hasClass("found") ? _this.found_color: color,

   164                 background: _el.hasClass("selected") ? _this.selected_color: color,

   165                 "z-index": ++zindex

   166             });

   167             if (_this.tooltip) {

   168                 _this.tooltip.show( _center, _top, _data.text, _data.color );

   169             }

   170         });

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

   172             if (_this.tooltip) {

   173                 _this.tooltip.hide();

   174             }

   175             _this.$segments.each(function() {

   176                 var _segment = IriSP.jQuery(this);

   177                 _segment.css("background", _segment.hasClass("found") ? _this.found_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));

   178                 _segment.css("background", _segment.hasClass("selected") ? _this.selected_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));

   179             });

   180         });

   181         _annotation.on("found", function() {

   182             _el.css("background", _this.found_color).addClass("found");

   183         });

   184         _annotation.on("not-found", function() {

   185             _el.css("background", lowcolor).removeClass("found");

   186         });

   187     });

   188     

   189     this.onMediaEvent("resettimerange", function(){

   190         

   191         _this.$segments.each(function(){

   192             var _segment = IriSP.jQuery(this);

   193             _segment.removeClass("selected");

   194         })

   195     });

   196     

   197     this.$.css({

   198         width : this.width + "px",

   199         height : (((1 - this.overlap) * lines.length + this.overlap) * this.line_height) + "px",

   200         background : this.background,

   201         margin: "1px 0"

   202     });

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

   204 };

   205 

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

   207     var widget = this;

   208     widget.onMediaEvent("timeupdate", "onTimeupdate");

   209     widget.renderTemplate();

   210     widget.do_draw();

   211     if (!this.no_tooltip) {

   212         widget.insertSubwidget(

   213             widget.$.find(".Ldt-Segments-Tooltip"),

   214             {

   215                 type: "Tooltip",

   216                 min_x: 0,

   217                 max_x: this.width

   218             },

   219             "tooltip"

   220         );

   221     };

   222     widget.source.getAnnotations().on("search", function() {

   223         searching = true;

   224     });

   225     widget.source.getAnnotations().on("search-cleared", function() {

   226         searching = false;

   227         _this.$segments.each(function() {

   228             var _segment = IriSP.jQuery(this);

   229             _segment.css("background", _segment.attr("data-medium-color")).removeClass("found");

   230         });

   231     });

   232     this.$.on("resize", function () { widget.do_draw(true); });

   233 };

   234 

   235 IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {    

   236     var _x = Math.floor( this.width * _time / this.media.duration);

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

   238         left: _x + "px"

   239     });

   240 };

   241