21 '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-text="{{text}}"' |
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>' |
22 + 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>' |
23 |
23 |
24 |
24 |
25 IriSP.Widgets.Segments.prototype.draw = function() { |
25 IriSP.Widgets.Segments.prototype.draw = function() { |
26 this.bindPopcorn("IriSP.search", "onSearch"); |
26 this.onMdpEvent("search", "onSearch"); |
27 this.bindPopcorn("IriSP.search.closed", "onSearch"); |
27 this.onMdpEvent("search.closed", "onSearch"); |
28 this.bindPopcorn("IriSP.search.cleared", "onSearch"); |
28 this.onMdpEvent("search.cleared", "onSearch"); |
29 this.bindPopcorn("timeupdate", "onTimeupdate"); |
29 this.onMediaEvent("timeupdate", "onTimeupdate"); |
30 |
30 |
31 this.renderTemplate(); |
31 this.renderTemplate(); |
32 |
32 |
33 var _list = this.getWidgetAnnotations(), |
33 var _list = this.getWidgetAnnotations(), |
34 _this = this, |
34 _this = this, |
42 |
42 |
43 _list.forEach(function(_annotation, _k) { |
43 _list.forEach(function(_annotation, _k) { |
44 var _left = _annotation.begin * _scale, |
44 var _left = _annotation.begin * _scale, |
45 _width = ( _annotation.getDuration() ) * _scale, |
45 _width = ( _annotation.getDuration() ) * _scale, |
46 _center = Math.floor( _left + _width / 2 ), |
46 _center = Math.floor( _left + _width / 2 ), |
47 _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ), |
47 _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ); |
48 _beginseconds = _annotation.begin.getSeconds(); |
|
49 var _data = { |
48 var _data = { |
50 color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ), |
49 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…'), |
50 text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'), |
52 left : Math.floor( _left ), |
51 left : Math.floor( _left ), |
53 width : Math.floor( _width ), |
52 width : Math.floor( _width ), |
61 }) |
60 }) |
62 .mouseout(function() { |
61 .mouseout(function() { |
63 _annotation.trigger("unselect"); |
62 _annotation.trigger("unselect"); |
64 }) |
63 }) |
65 .click(function() { |
64 .click(function() { |
66 _this.player.popcorn.currentTime(_beginseconds); |
65 _this.media.setCurrentTime(_annotation.begin); |
67 _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _data.id); |
66 _this.player.trigger("Mediafragment.setHashToAnnotation", _data.id); |
68 }) |
67 }) |
69 .appendTo(_this.list_$) |
68 .appendTo(_this.list_$) |
70 _annotation.on("select", function() { |
69 _annotation.on("select", function() { |
71 _this.$segments.removeClass("active").addClass("inactive"); |
70 _this.$segments.removeClass("active").addClass("inactive"); |
72 _this.tooltip.show( _center, 0, _data.text, _data.color ); |
71 _this.tooltip.show( _center, 0, _data.text, _data.color ); |
94 } else { |
93 } else { |
95 _el.removeClass("found").addClass("unfound"); |
94 _el.removeClass("found").addClass("unfound"); |
96 } |
95 } |
97 }); |
96 }); |
98 if (_found) { |
97 if (_found) { |
99 this.player.popcorn.trigger("IriSP.search.matchFound"); |
98 this.player.trigger("search.matchFound"); |
100 } else { |
99 } else { |
101 this.player.popcorn.trigger("IriSP.search.noMatchFound"); |
100 this.player.trigger("search.noMatchFound"); |
102 } |
101 } |
103 } else { |
102 } else { |
104 this.$segments.removeClass("found unfound"); |
103 this.$segments.removeClass("found unfound"); |
105 } |
104 } |
106 } |
105 } |
107 |
106 |
108 IriSP.Widgets.Segments.prototype.onTimeupdate = function() { |
107 IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) { |
109 var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds()); |
108 var _x = Math.floor( this.width * _time / this.media.duration); |
110 this.$.find('.Ldt-Segments-Position').css({ |
109 this.$.find('.Ldt-Segments-Position').css({ |
111 left: _x + "px" |
110 left: _x + "px" |
112 }) |
111 }) |
113 } |
112 } |