7 IriSP.Widgets.Segments.prototype = new IriSP.Widgets.Widget(); |
7 IriSP.Widgets.Segments.prototype = new IriSP.Widgets.Widget(); |
8 |
8 |
9 IriSP.Widgets.Segments.prototype.defaults = { |
9 IriSP.Widgets.Segments.prototype.defaults = { |
10 annotation_type : "chap", |
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"], |
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 |
12 line_height: 8, |
|
13 background: "#e0e0e0", |
|
14 overlap: .25 |
13 }; |
15 }; |
14 |
16 |
15 IriSP.Widgets.Segments.prototype.template = |
17 IriSP.Widgets.Segments.prototype.template = |
16 '<div class="Ldt-Segments-List"></div>' |
18 '<div class="Ldt-Segments-List"></div>' |
17 + '<div class="Ldt-Segments-Position"></div>' |
19 + '<div class="Ldt-Segments-Position"></div>' |
18 + '<div class="Ldt-Segments-Tooltip"></div>'; |
20 + '<div class="Ldt-Segments-Tooltip"></div>'; |
19 |
21 |
20 IriSP.Widgets.Segments.prototype.annotationTemplate = |
22 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}}"' |
23 '<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>' |
24 + '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>' |
23 |
25 |
24 |
26 |
25 IriSP.Widgets.Segments.prototype.draw = function() { |
27 IriSP.Widgets.Segments.prototype.draw = function() { |
26 this.onMdpEvent("search", "onSearch"); |
28 this.onMdpEvent("search", "onSearch"); |
27 this.onMdpEvent("search.closed", "onSearch"); |
29 this.onMdpEvent("search.closed", "onSearch"); |
28 this.onMdpEvent("search.cleared", "onSearch"); |
30 this.onMdpEvent("search.cleared", "onSearch"); |
29 this.onMediaEvent("timeupdate", "onTimeupdate"); |
31 this.onMediaEvent("timeupdate", "onTimeupdate"); |
30 |
32 |
31 this.renderTemplate(); |
33 this.renderTemplate(); |
32 |
34 |
33 var _list = this.getWidgetAnnotations(), |
35 var _list = this.getWidgetAnnotations().filter(function(_ann) { |
|
36 return _ann.getDuration() > 0; |
|
37 }), |
34 _this = this, |
38 _this = this, |
35 _scale = this.width / this.source.getDuration(); |
39 _scale = this.width / this.source.getDuration(); |
36 this.$.css({ |
40 var list_$ = this.$.find('.Ldt-Segments-List'), |
37 width : this.width + "px", |
41 lines = [], |
38 height : (this.height - 2) + "px", |
42 zindex = 1; |
39 margin : "1px 0" |
43 |
40 }); |
44 function saturate(r, g, b, s) { |
41 this.list_$ = this.$.find('.Ldt-Segments-List'); |
45 function satcomp(c) { |
|
46 return Math.floor(240 * (1 - s) + c * s); |
|
47 } |
|
48 var res = ( 0x10000 * satcomp(r) + 0x100 * satcomp(g) + satcomp(b)).toString(16); |
|
49 while (res.length < 6) { |
|
50 res = "0" + res; |
|
51 } |
|
52 return "#" + res; |
|
53 } |
|
54 |
|
55 function unselect() { |
|
56 _this.tooltip.hide(); |
|
57 _this.$segments.each(function() { |
|
58 var _segment = IriSP.jQuery(this); |
|
59 _segment.css("background", _segment.attr("data-medium-color")); |
|
60 }); |
|
61 } |
42 |
62 |
43 _list.forEach(function(_annotation, _k) { |
63 _list.forEach(function(_annotation, _k) { |
44 var _left = _annotation.begin * _scale, |
64 var _left = _annotation.begin * _scale, |
45 _width = ( _annotation.getDuration() ) * _scale, |
65 _width = ( _annotation.getDuration() ) * _scale, |
46 _center = Math.floor( _left + _width / 2 ), |
66 _center = Math.floor( _left + _width / 2 ), |
47 _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ); |
67 _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ), |
|
68 line = IriSP._(lines).find(function(line) { |
|
69 return !IriSP._(line.annotations).find(function(a) { |
|
70 return a.begin < _annotation.end && a.end > _annotation.begin |
|
71 }); |
|
72 }); |
|
73 if (!line) { |
|
74 line = { index: lines.length, annotations: []}; |
|
75 lines.push(line); |
|
76 } |
|
77 line.annotations.push(_annotation); |
|
78 var _top = ((1 - _this.overlap) * line.index) * _this.line_height, |
|
79 color = ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ), |
|
80 r = parseInt(color.substr(1,2),16), |
|
81 g = parseInt(color.substr(3,2),16), |
|
82 b = parseInt(color.substr(5,2),16), |
|
83 medcolor = saturate(r, g, b, .5), |
|
84 lowcolor = saturate(r, g, b, .2); |
48 var _data = { |
85 var _data = { |
49 color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ), |
86 color : color, |
|
87 medcolor: medcolor, |
|
88 lowcolor: lowcolor, |
50 text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'), |
89 text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'), |
51 left : Math.floor( _left ), |
90 left : _left, |
52 width : Math.floor( _width ), |
91 width : _width, |
|
92 top: _top, |
|
93 height: _this.line_height - 1, |
53 id : _annotation.id, |
94 id : _annotation.id, |
54 media_id : _annotation.getMedia().id |
95 media_id : _annotation.getMedia().id |
55 }; |
96 }; |
56 var _html = Mustache.to_html(_this.annotationTemplate, _data), |
97 var _html = Mustache.to_html(_this.annotationTemplate, _data), |
57 _el = IriSP.jQuery(_html); |
98 _el = IriSP.jQuery(_html); |
62 _annotation.trigger("unselect"); |
103 _annotation.trigger("unselect"); |
63 }) |
104 }) |
64 .click(function() { |
105 .click(function() { |
65 _annotation.trigger("click"); |
106 _annotation.trigger("click"); |
66 }) |
107 }) |
67 .appendTo(_this.list_$) |
108 .appendTo(list_$) |
68 _annotation.on("select", function() { |
109 _annotation.on("select", function() { |
69 _this.$segments.removeClass("active").addClass("inactive"); |
110 _this.$segments.each(function() { |
70 _this.tooltip.show( _center, 0, _data.text, _data.color ); |
111 var _segment = IriSP.jQuery(this); |
71 _el.removeClass("inactive").addClass("active"); |
112 _segment.css({ |
|
113 background: _segment.attr("data-low-color") |
|
114 }); |
|
115 }); |
|
116 _this.tooltip.show( _center, _top, _data.text, _data.color ); |
|
117 _el.css({ |
|
118 background: color, |
|
119 "z-index": ++zindex |
|
120 }); |
72 }); |
121 }); |
73 _annotation.on("unselect", function() { |
122 _annotation.on("unselect", unselect); |
74 _this.tooltip.hide(); |
123 }); |
75 _this.$segments.removeClass("inactive active"); |
124 |
76 }); |
125 this.$.css({ |
|
126 width : this.width + "px", |
|
127 height : (((1 - this.overlap) * lines.length + this.overlap) * this.line_height) + "px", |
|
128 background : this.background, |
|
129 margin: "1px 0" |
77 }); |
130 }); |
78 this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), { type: "Tooltip" }, "tooltip"); |
131 this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), { type: "Tooltip" }, "tooltip"); |
79 this.$segments = this.$.find('.Ldt-Segments-Segment'); |
132 this.$segments = this.$.find('.Ldt-Segments-Segment'); |
80 } |
133 } |
81 |
134 |
85 _re = IriSP.Model.regexpFromTextOrArray(searchString, true); |
138 _re = IriSP.Model.regexpFromTextOrArray(searchString, true); |
86 if (this.searchString) { |
139 if (this.searchString) { |
87 this.$segments.each(function() { |
140 this.$segments.each(function() { |
88 var _el = IriSP.jQuery(this); |
141 var _el = IriSP.jQuery(this); |
89 if (_re.test(_el.attr("segment-text"))) { |
142 if (_re.test(_el.attr("segment-text"))) { |
90 _el.removeClass("unfound").addClass("found"); |
143 _el.css("background", _el.attr("data-base-color")); |
91 _found++; |
144 _found++; |
92 } else { |
145 } else { |
93 _el.removeClass("found").addClass("unfound"); |
146 _el.css("background", _el.attr("data-low-color")); |
94 } |
147 } |
95 }); |
148 }); |
96 if (_found) { |
149 if (_found) { |
97 this.player.trigger("search.matchFound"); |
150 this.player.trigger("search.matchFound"); |
98 } else { |
151 } else { |
99 this.player.trigger("search.noMatchFound"); |
152 this.player.trigger("search.noMatchFound"); |
100 } |
153 } |
101 } else { |
154 } else { |
102 this.$segments.removeClass("found unfound"); |
155 _this.$segments.each(function() { |
|
156 var _segment = IriSP.jQuery(this); |
|
157 _segment.css("background", _segment.attr("data-medium-color")); |
|
158 }); |
103 } |
159 } |
104 } |
160 } |
105 |
161 |
106 IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) { |
162 IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) { |
107 var _x = Math.floor( this.width * _time / this.media.duration); |
163 var _x = Math.floor( this.width * _time / this.media.duration); |