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