1 IriSP.Widgets.SlidePreview = function(player, config) { |
1 import Mustache from "mustache"; |
2 IriSP.Widgets.Widget.call(this, player, config); |
2 import slidePreviewStyles from "./SlidePreview.module.css"; |
3 } |
3 import jQuery from "jquery"; |
4 |
4 |
5 IriSP.Widgets.SlidePreview.prototype = new IriSP.Widgets.Widget(); |
5 const SlidePreview = function (ns) { |
|
6 return class extends ns.Widgets.Widget { |
|
7 constructor(player, config) { |
|
8 super(player, config); |
|
9 } |
6 |
10 |
7 IriSP.Widgets.SlidePreview.prototype.defaults = { |
11 static defaults = { |
8 annotation_type: "Slides" |
12 annotation_type: "Slides", |
9 } |
13 }; |
10 |
14 |
11 IriSP.Widgets.SlidePreview.prototype.template = '<div class="Ldt-SlidePreview-Container"><div class="Ldt-SlidePreview-Slides"></div></div>'; |
15 static template = |
|
16 '<div class="Ldt-SlidePreview-Container"><div class="Ldt-SlidePreview-Slides"></div></div>'; |
12 |
17 |
13 IriSP.Widgets.SlidePreview.prototype.annotationTemplate = '<div data-id="{{ id }}" data-timecode="{{ ms }}" class="Ldt-SlidePreview-Item"><img title="{{ begin }} - {{ atitle }}" class="Ldt-AnnotationsList-Thumbnail" src="{{ thumbnail }}"></div>'; |
18 static annotationTemplate = |
|
19 '<div data-id="{{ id }}" data-timecode="{{ ms }}" class="Ldt-SlidePreview-Item"><img title="{{ begin }} - {{ atitle }}" class="Ldt-AnnotationsList-Thumbnail" src="{{ thumbnail }}"></div>'; |
14 |
20 |
15 IriSP.Widgets.SlidePreview.prototype.draw = function() { |
21 draw() { |
16 var _annotations = this.getWidgetAnnotations().sortBy(function(_annotation) { |
22 var _annotations = this.getWidgetAnnotations().sortBy(function ( |
|
23 _annotation |
|
24 ) { |
17 return _annotation.begin; |
25 return _annotation.begin; |
18 }); |
26 }); |
19 var _this = this; |
27 var _this = this; |
20 _this.renderTemplate(); |
28 _this.renderTemplate(); |
21 var content = _this.$.find('.Ldt-SlidePreview-Slides'); |
29 var content = _this.$.find(".Ldt-SlidePreview-Slides"); |
22 |
30 |
23 this.getWidgetAnnotations().forEach(function(_a) { |
31 this.getWidgetAnnotations().forEach(function (_a) { |
24 var _data = { |
32 var _data = { |
25 id : _a.id, |
33 id: _a.id, |
26 content : IriSP.textFieldHtml(_a.title), |
34 content: ns.textFieldHtml(_a.title), |
27 begin : _a.begin.toString(), |
35 begin: _a.begin.toString(), |
28 ms: _a.begin.milliseconds, |
36 ms: _a.begin.milliseconds, |
29 thumbnail: _a.thumbnail |
37 thumbnail: _a.thumbnail, |
30 }; |
38 }; |
31 var _html = Mustache.to_html(_this.annotationTemplate, _data); |
39 var _html = Mustache.render(_this.annotationTemplate, _data); |
32 var _el = IriSP.jQuery(_html); |
40 var _el = jQuery(_html); |
33 content.append(_el); |
41 content.append(_el); |
34 }); |
42 }); |
35 _this.$.on("click", ".Ldt-SlidePreview-Item", function () { |
43 _this.$.on("click", ".Ldt-SlidePreview-Item", function () { |
36 _this.media.setCurrentTime(Number(this.dataset.timecode)); |
44 _this.media.setCurrentTime(Number(this.dataset.timecode)); |
37 }); |
45 }); |
|
46 } |
|
47 }; |
38 }; |
48 }; |
|
49 |
|
50 export { SlidePreview, slidePreviewStyles }; |