|
1 IriSP.Widgets.MultiSegments = function(player, config) { |
|
2 IriSP.Widgets.Widget.call(this, player, config); |
|
3 }; |
|
4 |
|
5 IriSP.Widgets.MultiSegments.prototype = new IriSP.Widgets.Widget(); |
|
6 |
|
7 IriSP.Widgets.MultiSegments.prototype.defaults = { |
|
8 annotation_show_arrow: true, |
|
9 annotation_start_minimized: true, |
|
10 annotation_show_annotation_type: true, |
|
11 show_all: false |
|
12 }; |
|
13 |
|
14 IriSP.Widgets.MultiSegments.prototype.draw = function() { |
|
15 var _this = this, |
|
16 lines = [], |
|
17 currentLine = null, |
|
18 segmentsopts = {}, |
|
19 annotationopts = {}; |
|
20 IriSP._(this).each(function(_v,_k) { |
|
21 if (/^segments_/.test(_k)) { |
|
22 segmentsopts[_k.replace(/^segments_/,"")] = _v; |
|
23 } |
|
24 if (/^annotation_/.test(_k)) { |
|
25 annotationopts[_k.replace(/^annotation_/,"")] = _v; |
|
26 } |
|
27 }); |
|
28 this.source.getAnnotationTypes().forEach(function(_anntype) { |
|
29 var segments = _anntype.getAnnotations().filter(function(_ann) { |
|
30 return _ann.getDuration() > 0; |
|
31 }); |
|
32 if (segments.length) { |
|
33 |
|
34 var visible = false; |
|
35 |
|
36 var line = { |
|
37 segmentWidget: IriSP.jQuery("<div>"), |
|
38 annotationWidget: IriSP.jQuery("<div>"), |
|
39 hasSegmentsNow: function() { |
|
40 var _time = _this.media.getCurrentTime(); |
|
41 return !!segments.filter(function(_annotation) { |
|
42 return _annotation.begin <= _time && _annotation.end > _time; |
|
43 }).length; |
|
44 }, |
|
45 hide: function() { |
|
46 if (visible) { |
|
47 visible = false; |
|
48 this.annotationWidget.slideUp(); |
|
49 } |
|
50 }, |
|
51 show: function() { |
|
52 if (!visible) { |
|
53 visible = true; |
|
54 this.annotationWidget.slideDown(); |
|
55 } |
|
56 } |
|
57 }; |
|
58 |
|
59 |
|
60 line.segmentWidget |
|
61 .addClass("Ldt-MultiSegments-Segment") |
|
62 .appendTo(_this.$); |
|
63 |
|
64 if (!_this.show_all) { |
|
65 line.segmentWidget.mouseenter(function() { |
|
66 if (line.hasSegmentsNow()) { |
|
67 currentLine = line; |
|
68 checkVisibilities(); |
|
69 } |
|
70 }); |
|
71 } |
|
72 |
|
73 line.annotationWidget |
|
74 .addClass("Ldt-MultiSegments-Annotation") |
|
75 .appendTo(_this.$) |
|
76 .hide(); |
|
77 |
|
78 _this.insertSubwidget( |
|
79 line.segmentWidget, |
|
80 IriSP._({ |
|
81 type: "Segments", |
|
82 annotation_type: _anntype, |
|
83 width: _this.width |
|
84 }).extend(segmentsopts) |
|
85 ); |
|
86 |
|
87 _this.insertSubwidget( |
|
88 line.annotationWidget, |
|
89 IriSP._({ |
|
90 type: "Annotation", |
|
91 annotation_type: _anntype, |
|
92 width: _this.width |
|
93 }).extend(annotationopts) |
|
94 ); |
|
95 |
|
96 lines.push(line); |
|
97 } |
|
98 }); |
|
99 var _annotationWidgets = _this.$.find(".Ldt-MultiSegments-Annotation"); |
|
100 |
|
101 function checkVisibilities(_time) { |
|
102 if (!_this.show_all && currentLine && !currentLine.hasSegmentsNow()) { |
|
103 currentLine = undefined; |
|
104 } |
|
105 IriSP._(lines).each(function(line) { |
|
106 if (line.hasSegmentsNow()) { |
|
107 if (!_this.show_all && !currentLine) { |
|
108 currentLine = line; |
|
109 } |
|
110 if (_this.show_all || line === currentLine) { |
|
111 line.show(); |
|
112 } else { |
|
113 line.hide(); |
|
114 } |
|
115 } else { |
|
116 line.hide(); |
|
117 } |
|
118 }); |
|
119 } |
|
120 |
|
121 this.onMediaEvent("timeupdate", checkVisibilities); |
|
122 }; |