1 // TODO: Trigger IriSP.SegmentsWidget.click |
1 // TODO: Trigger ns.SegmentsWidget.click |
2 |
2 import Mustache from "mustache"; |
3 IriSP.Widgets.Segments = function(player, config) { |
3 import _ from "lodash"; |
4 IriSP.Widgets.Widget.call(this, player, config); |
4 import jQuery from "jquery"; |
5 }; |
5 |
6 |
6 import segmentsStyles from "./Segments.module.css"; |
7 IriSP.Widgets.Segments.prototype = new IriSP.Widgets.Widget(); |
7 |
8 |
8 const Segments = function (ns) { |
9 IriSP.Widgets.Segments.prototype.defaults = { |
9 return class extends ns.Widgets.Widget { |
10 annotation_type : "chap", |
10 constructor(player, config) { |
11 colors: ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"], |
11 super(player, config); |
12 line_height: 8, |
12 } |
13 background: "#e0e0e0", |
13 |
14 overlap: .25, |
14 static defaults = { |
15 found_color: "#FF00FC", |
15 annotation_type: "chap", |
16 faded_found_color: "#ff80fc", |
16 colors: [ |
17 selected_color: "#74d600", |
17 "#1f77b4", |
18 faded_selected_color: "#baf9b5", |
18 "#aec7e8", |
19 no_tooltip: false, |
19 "#ff7f0e", |
20 use_timerange: false, |
20 "#ffbb78", |
21 scale_to_parent: true |
21 "#2ca02c", |
22 }; |
22 "#98df8a", |
23 |
23 "#d62728", |
24 IriSP.Widgets.Segments.prototype.template = |
24 "#ff9896", |
25 '<div class="Ldt-Segments-List"></div>' |
25 "#9467bd", |
26 + '<div class="Ldt-Segments-Position"></div>' |
26 "#c5b0d5", |
27 + '<div class="Ldt-Segments-Tooltip"></div>'; |
27 "#8c564b", |
28 |
28 "#c49c94", |
29 IriSP.Widgets.Segments.prototype.annotationTemplate = |
29 "#e377c2", |
30 '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"' |
30 "#f7b6d2", |
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>'; |
31 "#7f7f7f", |
32 |
32 "#c7c7c7", |
33 |
33 "#bcbd22", |
34 IriSP.Widgets.Segments.prototype.do_draw = function (isRedraw) { |
34 "#dbdb8d", |
35 if (this.width != this.$.parent().width() && this.scale_to_parent) { |
35 "#17becf", |
|
36 "#9edae5", |
|
37 ], |
|
38 line_height: 8, |
|
39 background: "#e0e0e0", |
|
40 overlap: 0.25, |
|
41 found_color: "#FF00FC", |
|
42 faded_found_color: "#ff80fc", |
|
43 selected_color: "#74d600", |
|
44 faded_selected_color: "#baf9b5", |
|
45 no_tooltip: false, |
|
46 use_timerange: false, |
|
47 scale_to_parent: true, |
|
48 }; |
|
49 |
|
50 static template = |
|
51 '<div class="Ldt-Segments-List"></div>' + |
|
52 '<div class="Ldt-Segments-Position"></div>' + |
|
53 '<div class="Ldt-Segments-Tooltip"></div>'; |
|
54 |
|
55 static annotationTemplate = |
|
56 '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"' + |
|
57 '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>'; |
|
58 |
|
59 do_draw(isRedraw) { |
|
60 if (this.width != this.$.parent().width() && this.scale_to_parent) { |
36 // Reset width |
61 // Reset width |
37 this.width = this.$.parent().width(); |
62 this.width = this.$.parent().width(); |
38 this.$.css({ width : this.width + "px" }); |
63 this.$.css({ width: this.width + "px" }); |
39 } |
64 } |
40 var _this = this, |
65 var _this = this, |
41 _list = this.getWidgetAnnotations().filter(function(_ann) { |
66 _list = this.getWidgetAnnotations().filter(function (_ann) { |
42 return _ann.getDuration() > 0 && _ann.getMedia().id == _this.media.id; |
67 return _ann.getDuration() > 0 && _ann.getMedia().id == _this.media.id; |
43 }), |
68 }), |
44 _scale = this.width / this.source.getDuration(), |
69 _scale = this.width / this.source.getDuration(), |
45 list_$ = this.$.find('.Ldt-Segments-List'), |
70 list_$ = this.$.find(".Ldt-Segments-List"), |
46 lines = [], |
71 lines = [], |
47 zindex = 1, |
72 zindex = 1, |
48 searching = false; |
73 searching = false; |
49 |
74 |
50 function saturate(r, g, b, s) { |
75 function saturate(r, g, b, s) { |
51 function satcomp(c) { |
76 function satcomp(c) { |
52 return Math.floor(240 * (1 - s) + c * s); |
77 return Math.floor(240 * (1 - s) + c * s); |
53 } |
78 } |
54 var res = ( 0x10000 * satcomp(r) + 0x100 * satcomp(g) + satcomp(b)).toString(16); |
79 var res = ( |
|
80 0x10000 * satcomp(r) + |
|
81 0x100 * satcomp(g) + |
|
82 satcomp(b) |
|
83 ).toString(16); |
55 while (res.length < 6) { |
84 while (res.length < 6) { |
56 res = "0" + res; |
85 res = "0" + res; |
57 } |
86 } |
58 return "#" + res; |
87 return "#" + res; |
59 } |
88 } |
60 |
89 |
61 if (isRedraw) { |
90 if (isRedraw) { |
62 // Remove all previous elements before recreating them. Not very efficient. |
91 // Remove all previous elements before recreating them. Not very efficient. |
63 this.$.find('.Ldt-Segments-Segment').remove(); |
92 this.$.find(".Ldt-Segments-Segment").remove(); |
64 } |
93 } |
65 _list.forEach(function(_annotation, _k) { |
94 _list.forEach(function (_annotation, _k) { |
66 var _left = _annotation.begin * _scale, |
95 var _left = _annotation.begin * _scale, |
67 _width = ( _annotation.getDuration() ) * _scale, |
96 _width = _annotation.getDuration() * _scale, |
68 _center = Math.floor( _left + _width / 2 ), |
97 _center = Math.floor(_left + _width / 2), |
69 _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ), |
98 _fulltext = |
70 line = IriSP._(lines).find(function(line) { |
99 _annotation.title + |
71 return !IriSP._(line.annotations).find(function(a) { |
100 (_annotation.description ? "<br/>" + _annotation.description : ""), |
72 return a.begin < _annotation.end && a.end > _annotation.begin; |
101 line = _(lines).find(function (line) { |
73 }); |
102 return !_(line.annotations).find(function (a) { |
|
103 return a.begin < _annotation.end && a.end > _annotation.begin; |
74 }); |
104 }); |
|
105 }); |
75 if (!line) { |
106 if (!line) { |
76 line = { index: lines.length, annotations: []}; |
107 line = { index: lines.length, annotations: [] }; |
77 lines.push(line); |
108 lines.push(line); |
78 } |
109 } |
79 line.annotations.push(_annotation); |
110 line.annotations.push(_annotation); |
80 var _top = ((1 - _this.overlap) * line.index) * _this.line_height, |
111 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] ), |
112 color = |
82 r = parseInt(color.substr(1,2),16), |
113 typeof _annotation.color !== "undefined" && _annotation.color |
83 g = parseInt(color.substr(3,2),16), |
114 ? _annotation.color |
84 b = parseInt(color.substr(5,2),16), |
115 : _this.colors[_k % _this.colors.length], |
85 medcolor = saturate(r, g, b, .5), |
116 r = parseInt(color.substr(1, 2), 16), |
86 lowcolor = saturate(r, g, b, .2); |
117 g = parseInt(color.substr(3, 2), 16), |
|
118 b = parseInt(color.substr(5, 2), 16), |
|
119 medcolor = saturate(r, g, b, 0.5), |
|
120 lowcolor = saturate(r, g, b, 0.2); |
87 var _data = { |
121 var _data = { |
88 color : color, |
122 color: color, |
89 medcolor: medcolor, |
123 medcolor: medcolor, |
90 lowcolor: lowcolor, |
124 lowcolor: lowcolor, |
91 text: (_annotation.creator ? (_annotation.creator + " : ") : "" ) + _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'), |
125 text: |
92 left : _left, |
126 (_annotation.creator ? _annotation.creator + " : " : "") + |
93 width : _width, |
127 _fulltext |
94 top: _top, |
128 .replace(/(\n|\r|\r\n)/gm, " ") |
95 height: _this.line_height - 1, |
129 .replace(/(^.{120,140})[\s].+$/m, "$1…"), |
96 id : _annotation.id, |
130 left: _left, |
97 media_id : _annotation.getMedia().id, |
131 width: _width, |
98 from: _annotation.begin.toString(), |
132 top: _top, |
99 to: _annotation.end.toString() |
133 height: _this.line_height - 1, |
|
134 id: _annotation.id, |
|
135 media_id: _annotation.getMedia().id, |
|
136 from: _annotation.begin.toString(), |
|
137 to: _annotation.end.toString(), |
100 }; |
138 }; |
101 var _html = Mustache.to_html(_this.annotationTemplate, _data), |
139 var _html = Mustache.render(_this.constructor.annotationTemplate, _data), |
102 _el = IriSP.jQuery(_html); |
140 _el = jQuery(_html); |
103 _el.mouseover(function() { |
141 _el |
104 _annotation.trigger("select"); |
142 .on("mouseover", function () { |
105 }) |
143 _annotation.trigger("select"); |
106 .mouseout(function() { |
144 }) |
107 _annotation.trigger("unselect"); |
145 .on("mouseout", function () { |
108 }) |
146 _annotation.trigger("unselect"); |
109 .click(function() { |
147 }) |
110 if(_this.use_timerange){ |
148 .on("click", function () { |
111 if(!_this.media.getTimeRange()){ |
149 if (_this.use_timerange) { |
112 _this.media.setCurrentTime(_annotation.begin); |
150 if (!_this.media.getTimeRange()) { |
113 _this.media.setTimeRange(_annotation.begin, _annotation.end); |
151 _this.media.setCurrentTime(_annotation.begin); |
114 _this.media.play(); |
152 _this.media.setTimeRange(_annotation.begin, _annotation.end); |
115 _this.$segments.each(function(){ |
153 _this.media.play(); |
116 var _segment = IriSP.jQuery(this); |
154 _this.$segments.each(function () { |
117 _segment.css("background", lowcolor).removeClass("selected"); |
155 var _segment = jQuery(this); |
118 }) |
156 _segment.css("background", lowcolor).removeClass("selected"); |
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 }); |
157 }); |
158 _segment.css({ |
158 _el |
159 background: _segment.hasClass("selected") ? _this.faded_selected_color : _segment.attr("data-low-color") |
159 .css("background", _this.selected_color) |
160 }) |
160 .addClass("selected"); |
|
161 } else if ( |
|
162 _this.media.getTimeRange()[0] == _annotation.begin || |
|
163 _this.media.getTimeRange()[1] == _annotation.end |
|
164 ) { |
|
165 _this.media.resetTimeRange(); |
|
166 _this.$segments.each(function () { |
|
167 var _segment = jQuery(this); |
|
168 _segment.css("background", lowcolor).removeClass("selected"); |
|
169 _annotation.trigger("select"); |
|
170 }); |
|
171 } else { |
|
172 _this.media.setCurrentTime(_annotation.begin); |
|
173 _this.media.setTimeRange(_annotation.begin, _annotation.end); |
|
174 _this.media.play(); |
|
175 _this.$segments.each(function () { |
|
176 var _segment = jQuery(this); |
|
177 _segment.css("background", lowcolor).removeClass("selected"); |
|
178 }); |
|
179 _el |
|
180 .css("background", _this.selected_color) |
|
181 .addClass("selected"); |
|
182 } |
|
183 } |
|
184 _annotation.trigger("click"); |
|
185 }) |
|
186 .appendTo(list_$); |
|
187 ns.attachDndData(_el, { |
|
188 title: _annotation.title, |
|
189 description: _annotation.description, |
|
190 uri: |
|
191 typeof _annotation.url !== "undefined" |
|
192 ? _annotation.url |
|
193 : document.location.href.replace(/#.*$/, "") + |
|
194 "#id=" + |
|
195 _annotation.id, |
|
196 image: _annotation.thumbnail, |
|
197 text: "[" + _annotation.begin.toString() + "] " + _annotation.title, |
|
198 }); |
|
199 _annotation.on("select", function () { |
|
200 _this.$segments.each(function () { |
|
201 var _segment = jQuery(this); |
|
202 _segment.css({ |
|
203 background: _segment.hasClass("found") |
|
204 ? _this.faded_found_color |
|
205 : _segment.attr("data-low-color"), |
161 }); |
206 }); |
162 _el.css({ |
207 _segment.css({ |
163 background: _el.hasClass("found") ? _this.found_color: color, |
208 background: _segment.hasClass("selected") |
164 background: _el.hasClass("selected") ? _this.selected_color: color, |
209 ? _this.faded_selected_color |
165 "z-index": ++zindex |
210 : _segment.attr("data-low-color"), |
166 }); |
211 }); |
167 if (_this.tooltip) { |
212 }); |
168 _this.tooltip.show( _center, _top, _data.text, _data.color ); |
213 _el.css({ |
169 } |
214 background: _el.hasClass("found") ? _this.found_color : color, |
170 }); |
215 background: _el.hasClass("selected") ? _this.selected_color : color, |
171 _annotation.on("unselect", function() { |
216 "z-index": ++zindex, |
172 if (_this.tooltip) { |
217 }); |
173 _this.tooltip.hide(); |
218 if (_this.tooltip) { |
174 } |
219 _this.tooltip.show(_center, _top, _data.text, _data.color); |
175 _this.$segments.each(function() { |
220 } |
176 var _segment = IriSP.jQuery(this); |
221 }); |
177 _segment.css("background", _segment.hasClass("found") ? _this.found_color : _segment.attr(searching ? "data-low-color" : "data-medium-color")); |
222 _annotation.on("unselect", function () { |
178 _segment.css("background", _segment.hasClass("selected") ? _this.selected_color : _segment.attr(searching ? "data-low-color" : "data-medium-color")); |
223 if (_this.tooltip) { |
179 }); |
224 _this.tooltip.hide(); |
180 }); |
225 } |
181 _annotation.on("found", function() { |
226 _this.$segments.each(function () { |
182 _el.css("background", _this.found_color).addClass("found"); |
227 var _segment = jQuery(this); |
183 }); |
228 _segment.css( |
184 _annotation.on("not-found", function() { |
229 "background", |
185 _el.css("background", lowcolor).removeClass("found"); |
230 _segment.hasClass("found") |
186 }); |
231 ? _this.found_color |
187 }); |
232 : _segment.attr( |
188 |
233 searching ? "data-low-color" : "data-medium-color" |
189 this.onMediaEvent("resettimerange", function(){ |
234 ) |
190 |
235 ); |
191 _this.$segments.each(function(){ |
236 _segment.css( |
192 var _segment = IriSP.jQuery(this); |
237 "background", |
193 _segment.removeClass("selected"); |
238 _segment.hasClass("selected") |
194 }) |
239 ? _this.selected_color |
195 }); |
240 : _segment.attr( |
196 |
241 searching ? "data-low-color" : "data-medium-color" |
197 this.$.css({ |
242 ) |
198 width : this.width + "px", |
243 ); |
199 height : (((1 - this.overlap) * lines.length + this.overlap) * this.line_height) + "px", |
244 }); |
200 background : this.background, |
245 }); |
201 margin: "1px 0" |
246 _annotation.on("found", function () { |
202 }); |
247 _el.css("background", _this.found_color).addClass("found"); |
203 this.$segments = this.$.find('.Ldt-Segments-Segment'); |
248 }); |
|
249 _annotation.on("not-found", function () { |
|
250 _el.css("background", lowcolor).removeClass("found"); |
|
251 }); |
|
252 }); |
|
253 |
|
254 this.onMediaEvent("resettimerange", function () { |
|
255 _this.$segments.each(function () { |
|
256 var _segment = jQuery(this); |
|
257 _segment.removeClass("selected"); |
|
258 }); |
|
259 }); |
|
260 |
|
261 this.$.css({ |
|
262 width: this.width + "px", |
|
263 height: |
|
264 ((1 - this.overlap) * lines.length + this.overlap) * |
|
265 this.line_height + |
|
266 "px", |
|
267 background: this.background, |
|
268 margin: "1px 0", |
|
269 }); |
|
270 this.$segments = this.$.find(".Ldt-Segments-Segment"); |
|
271 } |
|
272 |
|
273 draw() { |
|
274 var widget = this; |
|
275 widget.onMediaEvent("timeupdate", "onTimeupdate"); |
|
276 widget.renderTemplate(); |
|
277 widget.do_draw(); |
|
278 if (!this.no_tooltip) { |
|
279 widget.insertSubwidget( |
|
280 widget.$.find(".Ldt-Segments-Tooltip"), |
|
281 { |
|
282 type: "Tooltip", |
|
283 min_x: 0, |
|
284 max_x: this.width, |
|
285 }, |
|
286 "tooltip" |
|
287 ); |
|
288 } |
|
289 widget.source.getAnnotations().on("search", function () { |
|
290 searching = true; |
|
291 }); |
|
292 widget.source.getAnnotations().on("search-cleared", function () { |
|
293 searching = false; |
|
294 _this.$segments.each(function () { |
|
295 var _segment = jQuery(this); |
|
296 _segment |
|
297 .css("background", _segment.attr("data-medium-color")) |
|
298 .removeClass("found"); |
|
299 }); |
|
300 }); |
|
301 this.$.on("resize", function () { |
|
302 widget.do_draw(true); |
|
303 }); |
|
304 } |
|
305 |
|
306 onTimeupdate(_time) { |
|
307 var _x = Math.floor((this.width * _time) / this.media.duration); |
|
308 this.$.find(".Ldt-Segments-Position").css({ |
|
309 left: _x + "px", |
|
310 }); |
|
311 } |
|
312 }; |
204 }; |
313 }; |
205 |
314 |
206 IriSP.Widgets.Segments.prototype.draw = function() { |
315 export { Segments, segmentsStyles }; |
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 |
|