5 } |
5 } |
6 |
6 |
7 IriSP.Widgets.Transcript.prototype = new IriSP.Widgets.Widget(); |
7 IriSP.Widgets.Transcript.prototype = new IriSP.Widgets.Widget(); |
8 |
8 |
9 IriSP.Widgets.Transcript.prototype.defaults = { |
9 IriSP.Widgets.Transcript.prototype.defaults = { |
10 annotation_type: "Caption" |
10 annotation_type: "Caption", |
11 // container: "transcriptContainer" |
11 use_vtt_track: false |
12 } |
12 } |
13 |
13 |
14 IriSP.Widgets.Transcript.prototype.template = '<div class="Ldt-TranscriptWidget"></div>'; |
14 IriSP.Widgets.Transcript.prototype.template = '<div class="Ldt-TranscriptWidget"></div>'; |
15 |
15 |
16 IriSP.Widgets.Transcript.prototype.annotationTemplate = '<a data-begin="{{ begin }}" data-end="{{ end }}" data-id="{{ id }}" class="Ldt-Transcript-Annotation" href="#{{id}}">{{ content }}</a> '; |
16 IriSP.Widgets.Transcript.prototype.annotationTemplate = '<span data-begin="{{ begin }}" data-end="{{ end }}" data-id="{{ id }}" class="Ldt-Transcript-Annotation">{{ content }}</span> '; |
17 |
17 |
18 IriSP.Widgets.Transcript.prototype.draw = function() { |
18 IriSP.Widgets.Transcript.prototype.draw = function() { |
19 var _annotations = this.getWidgetAnnotations(); |
19 var _annotations = this.getWidgetAnnotations(); |
20 var _this = this; |
20 var _this = this; |
21 var content; |
21 var content; |
22 |
22 |
23 _this.renderTemplate(); |
23 _this.renderTemplate(); |
24 content = _this.$.find('.Ldt-TranscriptWidget'); |
24 content = _this.$.find('.Ldt-TranscriptWidget'); |
25 |
25 |
26 _annotations.forEach(function(_a) { |
26 if (_this.use_vtt_track) { |
27 var _data = { |
27 // Use webvtt track. It will only work with native video player. |
28 id : _a.id, |
28 var widgets = _this.player.widgets.filter(function (w) { return w.type == "HtmlPlayer"; }); |
29 content : IriSP.textFieldHtml(_a.title), |
29 if (widgets) { |
30 begin : _a.begin.toString(), |
30 var v = widgets[0].$.find("video")[0]; |
31 end : _a.end.toString() |
31 // FIXME: allow to specify the used track |
32 }; |
32 v.addEventListener("loadedmetadata", function () { |
33 var _html = Mustache.to_html(_this.annotationTemplate, _data); |
33 var track = v.textTracks[0]; |
34 var _el = IriSP.jQuery(_html); |
34 var cues = track.cues; |
35 content.append(_el); |
35 var i = 1; |
36 }); |
36 Array.prototype.forEach.apply(cues, [ function(_c) { |
|
37 _c.id = "cue" + i; |
|
38 var _html = Mustache.to_html(_this.annotationTemplate, { |
|
39 id : _c.id, |
|
40 content : _c.text, |
|
41 begin : 1000 * _c.startTime, |
|
42 end : 1000 * _c.endTime |
|
43 }); |
|
44 i += 1; |
|
45 var _el = IriSP.jQuery(_html); |
|
46 content.append(_el); |
|
47 } ]); |
|
48 track.addEventListener("cuechange", function () { |
|
49 var acues = track.activeCues; |
|
50 if (acues.length > 0) { |
|
51 // Update attributes for active cues |
|
52 _this.$.find(".Ldt-Transcript-Annotation.active").removeClass("active"); |
|
53 Array.prototype.forEach.apply(acues, [ function(_c) { |
|
54 _this.$.find("#" + _c.id).addClass("active"); |
|
55 } ]); |
|
56 } |
|
57 }, false); |
|
58 content.on("click", ".Ldt-Transcript-Annotation", function () { |
|
59 _this.media.setCurrentTime(this.dataset.begin); |
|
60 }); |
|
61 }); |
|
62 } else { |
|
63 console.log("cannot find a video object"); |
|
64 } |
|
65 } else { |
|
66 // Populate with annotation data |
|
67 _annotations.forEach(function(_a) { |
|
68 var _data = { |
|
69 id : _a.id, |
|
70 content : IriSP.textFieldHtml(_a.title), |
|
71 begin : _a.begin.toString(), |
|
72 end : _a.end.toString() |
|
73 }; |
|
74 var _html = Mustache.to_html(_this.annotationTemplate, _data); |
|
75 var _el = IriSP.jQuery(_html); |
|
76 content.append(_el); |
|
77 }); |
|
78 }; |
37 }; |
79 }; |