1 IriSP.Widgets.Highlighter = function(player, config) { |
1 // Highlighter |
2 var _this = this; |
2 |
3 IriSP.Widgets.Widget.call(this, player, config); |
3 import highlighterStyles from "./Highlighter.module.css"; |
4 this.throttledRefresh = IriSP._.throttle(function() { |
4 import _ from "lodash"; |
|
5 |
|
6 const Highlighter = function (ns) { |
|
7 return class extends ns.Widgets.Widget { |
|
8 constructor(player, config) { |
|
9 super(player, config); |
|
10 var _this = this; |
|
11 this.throttledRefresh = _.throttle(function () { |
5 console.log("highlighter Refresh"); |
12 console.log("highlighter Refresh"); |
6 _this.update(); |
13 _this.update(); |
7 }, 800); |
14 }, 800); |
|
15 } |
|
16 |
|
17 /** |
|
18 * Highlighter widget |
|
19 * This widgets highlights the current annotations by setting the |
|
20 * .activeAnnotation class on appropriate .Ldt-Highlighter-Annotation |
|
21 * elements. These elements *must* have data-begin and data-end properties specifying their bounds (in ms) (and data-media specifying the media-id) |
|
22 */ |
|
23 |
|
24 static defaults = {}; |
|
25 |
|
26 update() { |
|
27 var _this = this; |
|
28 var _currentTime = _this.media.getCurrentTime(); |
|
29 _this.$.find(".Ldt-Highlighter-Annotation", document).toggleClass( |
|
30 "currentAnnotation", |
|
31 function () { |
|
32 return ( |
|
33 this.dataset.media === _this.media.id && |
|
34 this.dataset.begin <= _currentTime && |
|
35 _currentTime < this.dataset.end |
|
36 ); |
|
37 } |
|
38 ); |
|
39 console.log(_this.$.find(".currentAnnotation")); |
|
40 return false; |
|
41 } |
|
42 |
|
43 draw() { |
|
44 var _this = this; |
|
45 |
|
46 var _events = ["timeupdate", "seeked", "loadedmetadata"]; |
|
47 for (var _i = 0; _i < _events.length; _i++) { |
|
48 _this.onMediaEvent(_events[_i], _this.throttledRefresh); |
|
49 } |
|
50 _this.throttledRefresh(); |
|
51 } |
|
52 }; |
8 }; |
53 }; |
9 |
54 |
10 /** |
55 export { Highlighter, highlighterStyles }; |
11 * Highlighter widget |
|
12 * This widgets highlights the current annotations by setting the |
|
13 * .activeAnnotation class on appropriate .Ldt-Highlighter-Annotation |
|
14 * elements. These elements *must* have data-begin and data-end properties specifying their bounds (in ms) (and data-media specifying the media-id) |
|
15 */ |
|
16 IriSP.Widgets.Highlighter.prototype = new IriSP.Widgets.Widget(); |
|
17 |
|
18 IriSP.Widgets.Highlighter.prototype.defaults = { |
|
19 } |
|
20 |
|
21 IriSP.Widgets.Highlighter.prototype.update = function() { |
|
22 var _this = this; |
|
23 var _currentTime = _this.media.getCurrentTime(); |
|
24 _this.$.find(".Ldt-Highlighter-Annotation", document).toggleClass("currentAnnotation", function () { |
|
25 return (this.dataset.media === _this.media.id && this.dataset.begin <= _currentTime && _currentTime < this.dataset.end); |
|
26 }); |
|
27 console.log(_this.$.find(".currentAnnotation")); |
|
28 return false; |
|
29 }; |
|
30 |
|
31 IriSP.Widgets.Highlighter.prototype.draw = function() { |
|
32 var _this = this; |
|
33 |
|
34 var _events = [ |
|
35 "timeupdate", |
|
36 "seeked", |
|
37 "loadedmetadata" |
|
38 ]; |
|
39 for (var _i = 0; _i < _events.length; _i++) { |
|
40 _this.onMediaEvent(_events[_i], _this.throttledRefresh); |
|
41 } |
|
42 _this.throttledRefresh(); |
|
43 }; |
|