1 IriSP.Widgets.MashupPlayer = function(player, config) { |
1 import _ from "lodash"; |
2 IriSP.Widgets.Widget.call(this, player, config); |
2 import jQuery from "jquery"; |
3 this.is_mashup = true; |
3 import mashupPlayerStyles from "./MashupPlayer.module.css"; |
4 }; |
4 |
5 |
5 const MashupPlayer = function (ns) { |
6 IriSP.Widgets.MashupPlayer.prototype = new IriSP.Widgets.Widget(); |
6 return class extends ns.Widgets.Widget { |
7 |
7 constructor(player, config) { |
8 IriSP.Widgets.MashupPlayer.prototype.defaults = { |
8 super(player, config); |
9 aspect_ratio: 14/9, |
9 this.is_mashup = true; |
10 split_screen: false, |
10 } |
11 player_type: "PopcornPlayer", |
11 |
12 background: "#000000" |
12 static defaults = { |
13 }; |
13 aspect_ratio: 14 / 9, |
14 |
14 split_screen: false, |
15 IriSP.Widgets.MashupPlayer.prototype.draw = function() { |
15 player_type: "PopcornPlayer", |
16 var _this = this, |
16 background: "#000000", |
|
17 }; |
|
18 |
|
19 draw() { |
|
20 var _this = this, |
17 _mashup = this.media, |
21 _mashup = this.media, |
18 _currentMedia = null, |
22 _currentMedia = null, |
19 _currentAnnotation = null, |
23 _currentAnnotation = null, |
20 _segmentBegin, |
24 _segmentBegin, |
21 _segmentEnd, |
25 _segmentEnd, |
22 _timecode = 0, |
26 _timecode = 0, |
23 _seeking = false, |
27 _seeking = false, |
24 _seekdiv, |
28 _seekdiv, |
25 _timedelta, |
29 _timedelta, |
26 medialist = _mashup.getMedias(); |
30 medialist = _mashup.getMedias(); |
27 |
31 |
28 _mashup.paused = (!this.autostart && !this.autoplay); |
32 _mashup.paused = !this.autostart && !this.autoplay; |
29 |
33 |
30 function changeCurrentAnnotation() { |
34 function changeCurrentAnnotation() { |
31 if (_timecode >= _mashup.duration) { |
35 if (_timecode >= _mashup.duration) { |
|
36 if (!_mashup.paused) { |
|
37 _mashup.paused = true; |
|
38 _mashup.trigger("pause"); |
|
39 } |
|
40 _timecode = 0; |
|
41 } |
|
42 var _annotation = _mashup.getAnnotationAtTime(_timecode); |
|
43 if (typeof _annotation === "undefined") { |
|
44 if (_currentMedia) { |
|
45 _currentMedia.pause(); |
32 if (!_mashup.paused) { |
46 if (!_mashup.paused) { |
33 _mashup.paused = true; |
47 _mashup.paused = true; |
34 _mashup.trigger("pause"); |
48 _mashup.trigger("pause"); |
35 } |
49 } |
36 _timecode = 0; |
50 } |
37 } |
51 return; |
38 var _annotation = _mashup.getAnnotationAtTime( _timecode ); |
|
39 if (typeof _annotation === "undefined") { |
|
40 if (_currentMedia) { |
|
41 _currentMedia.pause(); |
|
42 if (!_mashup.paused) { |
|
43 _mashup.paused = true; |
|
44 _mashup.trigger("pause"); |
|
45 } |
|
46 } |
|
47 return; |
|
48 } |
52 } |
49 if (_annotation !== _currentAnnotation) { |
53 if (_annotation !== _currentAnnotation) { |
50 _currentAnnotation = _annotation; |
54 _currentAnnotation = _annotation; |
51 _segmentBegin = _currentAnnotation.annotation.begin.milliseconds; |
55 _segmentBegin = _currentAnnotation.annotation.begin.milliseconds; |
52 _segmentEnd = _currentAnnotation.annotation.end.milliseconds; |
56 _segmentEnd = _currentAnnotation.annotation.end.milliseconds; |
53 _timedelta = _segmentBegin - _currentAnnotation.begin.milliseconds; |
57 _timedelta = _segmentBegin - _currentAnnotation.begin.milliseconds; |
54 _currentMedia = _currentAnnotation.getMedia(); |
58 _currentMedia = _currentAnnotation.getMedia(); |
55 |
59 |
56 for (var _i = 0; _i < medialist.length; _i++) { |
60 for (var _i = 0; _i < medialist.length; _i++) { |
57 if (medialist[_i].id !== _currentMedia.id) { |
61 if (medialist[_i].id !== _currentMedia.id) { |
58 if (!_this.split_screen) { |
62 if (!_this.split_screen) { |
59 medialist[_i].hide(); |
63 medialist[_i].hide(); |
60 } |
64 } |
61 medialist[_i].pause(); |
65 medialist[_i].pause(); |
62 } else { |
66 } else { |
63 medialist[_i].show(); |
67 medialist[_i].show(); |
64 } |
68 } |
65 } |
69 } |
66 |
70 |
67 /* PRELOADING */ |
71 /* PRELOADING */ |
68 var _preloadedMedias = [], |
72 var _preloadedMedias = [], |
69 _toPreload = _mashup.getAnnotations().filter(function(_a) { |
73 _toPreload = _mashup.getAnnotations().filter(function (_a) { |
70 return (_a.begin >= _currentAnnotation.end && _a.getMedia() !== _currentMedia); |
74 return ( |
|
75 _a.begin >= _currentAnnotation.end && |
|
76 _a.getMedia() !== _currentMedia |
|
77 ); |
71 }); |
78 }); |
72 IriSP._(_toPreload).each(function(_a) { |
79 _(_toPreload).each(function (_a) { |
73 var _media = _a.getMedia(); |
80 var _media = _a.getMedia(); |
74 if (IriSP._(_preloadedMedias).indexOf(_media.id) === -1) { |
81 if (_(_preloadedMedias).indexOf(_media.id) === -1) { |
75 _preloadedMedias.push(_media.id); |
82 _preloadedMedias.push(_media.id); |
76 _media.setCurrentTime(_a.annotation.begin.getSeconds()); |
83 _media.setCurrentTime(_a.annotation.begin.getSeconds()); |
77 _media.seeking = true; |
84 _media.seeking = true; |
78 /* |
85 /* |
79 console.log("Preloading ", _media.id, " at t=", _a.annotation.begin.getSeconds()); |
86 console.log("Preloading ", _media.id, " at t=", _a.annotation.begin.getSeconds()); |
80 */ |
87 */ |
81 } |
88 } |
82 }); |
89 }); |
83 |
90 |
84 // console.log("Changed segment: media="+ this.currentMedia.id + ", from=" + this.segmentBegin + " to=" + this.segmentEnd +", timedelta = ", this.timedelta) |
91 // console.log("Changed segment: media="+ this.currentMedia.id + ", from=" + this.segmentBegin + " to=" + this.segmentEnd +", timedelta = ", this.timedelta) |
85 // } else { |
92 // } else { |
86 // console.log("changeCurrentAnnotation called, but segment hasn't changed"); |
93 // console.log("changeCurrentAnnotation called, but segment hasn't changed"); |
87 } |
94 } |
88 |
95 |
89 _currentMedia.setCurrentTime( _timecode + _timedelta); |
96 _currentMedia.setCurrentTime(_timecode + _timedelta); |
90 _currentMedia.seeking = true; |
97 _currentMedia.seeking = true; |
91 |
98 |
92 if (!_mashup.paused) { |
99 if (!_mashup.paused) { |
93 _currentMedia.play(); |
100 _currentMedia.play(); |
94 _seeking = true; |
101 _seeking = true; |
95 _seekdiv.show(); |
102 _seekdiv.show(); |
96 } |
103 } |
97 /* |
104 /* |
98 console.log("Setting time of media", _currentMedia.id, "to", _timecode + _timedelta) |
105 console.log("Setting time of media", _currentMedia.id, "to", _timecode + _timedelta) |
99 */ |
106 */ |
100 _mashup.trigger("timeupdate", new IriSP.Model.Time(_timecode)); |
107 _mashup.trigger("timeupdate", new ns.Model.Time(_timecode)); |
101 |
108 } |
102 } |
109 |
103 |
110 if (!this.height) { |
104 if (!this.height) { |
111 this.height = Math.floor(this.width / this.aspect_ratio); |
105 this.height = Math.floor(this.width/this.aspect_ratio); |
|
106 this.$.css({ |
112 this.$.css({ |
107 height: this.height |
113 height: this.height, |
108 }); |
114 }); |
109 } |
115 } |
110 |
116 |
111 this.$.css({ |
117 this.$.css({ |
112 background: this.background |
118 background: this.background, |
113 }); |
119 }); |
114 |
120 |
115 var _grid = Math.ceil(Math.sqrt(medialist.length)), |
121 var _grid = Math.ceil(Math.sqrt(medialist.length)), |
116 _width = (this.split_screen ? this.width / _grid : this.width), |
122 _width = this.split_screen ? this.width / _grid : this.width, |
117 _height = (this.split_screen ? this.height / _grid : this.height); |
123 _height = this.split_screen ? this.height / _grid : this.height; |
118 |
124 |
119 IriSP._(medialist).each(function(_media, _key) { |
125 _(medialist).each(function (_media, _key) { |
120 var _el = IriSP.jQuery('<div class="Ldt-MashupPlayer-Media"><div class="Ldt-MashupPlayer-Subwidget"></div></div>'); |
126 var _el = jQuery( |
|
127 '<div class="Ldt-MashupPlayer-Media"><div class="Ldt-MashupPlayer-Subwidget"></div></div>' |
|
128 ); |
121 _el.css({ |
129 _el.css({ |
122 top: (_this.split_screen ? _height * Math.floor(_key / _grid) : 0), |
130 top: _this.split_screen ? _height * Math.floor(_key / _grid) : 0, |
123 left: (_this.split_screen ? _width * (_key % _grid) : 0), |
131 left: _this.split_screen ? _width * (_key % _grid) : 0, |
|
132 height: _height, |
|
133 width: _width, |
|
134 display: _this.split_screen ? "block" : "none", |
|
135 }); |
|
136 _this.$.append(_el); |
|
137 |
|
138 _this.insertSubwidget( |
|
139 _el.find(".Ldt-MashupPlayer-Subwidget"), |
|
140 _({ |
|
141 type: _this.player_type, |
|
142 media_id: _media.id, |
124 height: _height, |
143 height: _height, |
125 width: _width, |
144 width: _width, |
126 display: (_this.split_screen ? "block" : "none") |
145 url_transform: _this.url_transform, |
127 }); |
146 }).extend(_this.player_options) |
128 _this.$.append(_el); |
|
129 |
|
130 _this.insertSubwidget( |
|
131 _el.find(".Ldt-MashupPlayer-Subwidget"), |
|
132 IriSP._({ |
|
133 type: _this.player_type, |
|
134 media_id: _media.id, |
|
135 height: _height, |
|
136 width: _width, |
|
137 url_transform: _this.url_transform |
|
138 }).extend(_this.player_options) |
|
139 ); |
147 ); |
140 |
148 |
141 _media.loadedMetadata = false; |
149 _media.loadedMetadata = false; |
142 _media.show = function() { |
150 _media.show = function () { |
143 _el.show(); |
151 _el.show(); |
144 }; |
152 }; |
145 _media.hide = function() { |
153 _media.hide = function () { |
146 _el.hide(); |
154 _el.hide(); |
147 }; |
155 }; |
148 _media.on("loadedmetadata", function() { |
156 _media.on("loadedmetadata", function () { |
149 _media.loadedMetadata = true; |
157 _media.loadedMetadata = true; |
150 var _allLoaded = true; |
158 var _allLoaded = true; |
151 for (var _i = 0; _i < medialist.length; _i++) { |
159 for (var _i = 0; _i < medialist.length; _i++) { |
152 _allLoaded = _allLoaded && medialist[_i].loadedMetadata; |
160 _allLoaded = _allLoaded && medialist[_i].loadedMetadata; |
153 } |
161 } |
154 if (_allLoaded) { |
162 if (_allLoaded) { |
155 _seekdiv.fadeOut(); |
163 _seekdiv.fadeOut(); |
156 changeCurrentAnnotation(); |
164 changeCurrentAnnotation(); |
157 _mashup.trigger("loadedmetadata"); |
165 _mashup.trigger("loadedmetadata"); |
158 } |
166 } |
159 }); |
167 }); |
160 _media.on("timeupdate", function(_time) { |
168 _media.on("timeupdate", function (_time) { |
161 if (!_mashup.paused && _media === _currentMedia && !_media.seeking) { |
169 if (!_mashup.paused && _media === _currentMedia && !_media.seeking) { |
162 /* |
170 /* |
163 var _status = "Timeupdate from " + _media.id + " at time " + _time; |
171 var _status = "Timeupdate from " + _media.id + " at time " + _time; |
164 */ |
172 */ |
165 if ( _time < _segmentEnd ) { |
173 if (_time < _segmentEnd) { |
166 if ( _time >= _segmentBegin ) { |
174 if (_time >= _segmentBegin) { |
167 _timecode = _time - _timedelta; |
175 _timecode = _time - _timedelta; |
168 /* |
176 /* |
169 _status += " within segment"; |
177 _status += " within segment"; |
170 */ |
178 */ |
171 } else { |
179 } else { |
172 _timecode = _segmentBegin - _timedelta; |
180 _timecode = _segmentBegin - _timedelta; |
173 _media.setCurrentTime(_segmentBegin); |
181 _media.setCurrentTime(_segmentBegin); |
174 /* |
182 /* |
175 _status += " before segment"; |
183 _status += " before segment"; |
176 */ |
184 */ |
177 } |
185 } |
178 } else { |
186 } else { |
179 _timecode = _segmentEnd - _timedelta; |
187 _timecode = _segmentEnd - _timedelta; |
180 _media.pause(); |
188 _media.pause(); |
181 changeCurrentAnnotation(); |
189 changeCurrentAnnotation(); |
182 /* |
190 /* |
183 _status += " after segment"; |
191 _status += " after segment"; |
184 */ |
192 */ |
185 } |
193 } |
186 /* |
194 /* |
187 _status += " (" + _segmentBegin + " to " + _segmentEnd + ")" + ", translated to " + _timecode; |
195 _status += " (" + _segmentBegin + " to " + _segmentEnd + ")" + ", translated to " + _timecode; |
188 console.log(_status); |
196 console.log(_status); |
189 */ |
197 */ |
190 _mashup.trigger("timeupdate", new IriSP.Model.Time(_timecode)); |
198 _mashup.trigger("timeupdate", new ns.Model.Time(_timecode)); |
191 } |
199 } |
192 }); |
200 }); |
193 _media.on("seeked", function() { |
201 _media.on("seeked", function () { |
194 _media.seeking = false; |
202 _media.seeking = false; |
195 if (_media === _currentMedia && _seeking) { |
203 if (_media === _currentMedia && _seeking) { |
196 _seeking = false; |
204 _seeking = false; |
197 _seekdiv.hide(); |
205 _seekdiv.hide(); |
198 } |
206 } |
199 }); |
207 }); |
200 _media.on("play", function() { |
208 _media.on("play", function () { |
201 if (_media === _currentMedia) { |
209 if (_media === _currentMedia) { |
202 _mashup.trigger("play"); |
210 _mashup.trigger("play"); |
203 } |
211 } |
204 }); |
212 }); |
205 _media.on("pause", function() { |
213 _media.on("pause", function () { |
206 if (_media === _currentMedia) { |
214 if (_media === _currentMedia) { |
207 _mashup.trigger("pause"); |
215 _mashup.trigger("pause"); |
208 } |
216 } |
209 }); |
217 }); |
210 _media.on("volumechange", function() { |
218 _media.on("volumechange", function () { |
211 _mashup.muted = _media.muted; |
219 _mashup.muted = _media.muted; |
212 _mashup.volume = _media.volume; |
220 _mashup.volume = _media.volume; |
213 _mashup.trigger("volumechange"); |
221 _mashup.trigger("volumechange"); |
214 }); |
222 }); |
215 }); |
223 }); |
216 |
224 |
217 _seekdiv = IriSP.jQuery('<div class="Ldt-MashupPlayer-Waiting"></div>'); |
225 _seekdiv = jQuery('<div class="Ldt-MashupPlayer-Waiting"></div>'); |
218 |
226 |
219 this.$.append(_seekdiv); |
227 this.$.append(_seekdiv); |
220 |
228 |
221 // Binding functions to Popcorn |
229 // Binding functions to Popcorn |
222 |
230 |
223 _mashup.on("setcurrenttime", function(_milliseconds) { |
231 _mashup.on("setcurrenttime", function (_milliseconds) { |
224 _timecode = _milliseconds; |
232 _timecode = _milliseconds; |
225 changeCurrentAnnotation(); |
233 changeCurrentAnnotation(); |
226 }); |
234 }); |
227 |
235 |
228 _mashup.on("setvolume", function(_vol) { |
236 _mashup.on("setvolume", function (_vol) { |
229 for (var _i = 0; _i < medialist.length; _i++) { |
237 for (var _i = 0; _i < medialist.length; _i++) { |
230 medialist[_i].setVolume(_vol); |
238 medialist[_i].setVolume(_vol); |
231 } |
239 } |
232 _mashup.volume = _vol; |
240 _mashup.volume = _vol; |
233 }); |
241 }); |
234 |
242 |
235 _mashup.on("setmuted", function(_muted) { |
243 _mashup.on("setmuted", function (_muted) { |
236 for (var _i = 0; _i < medialist.length; _i++) { |
244 for (var _i = 0; _i < medialist.length; _i++) { |
237 medialist[_i].setMuted(_muted); |
245 medialist[_i].setMuted(_muted); |
238 } |
246 } |
239 _mashup.muted = _muted; |
247 _mashup.muted = _muted; |
240 }); |
248 }); |
241 |
249 |
242 _mashup.on("setplay", function() { |
250 _mashup.on("setplay", function () { |
243 _mashup.paused = false; |
251 _mashup.paused = false; |
244 changeCurrentAnnotation(); |
252 changeCurrentAnnotation(); |
245 }); |
253 }); |
246 |
254 |
247 _mashup.on("setpause", function() { |
255 _mashup.on("setpause", function () { |
248 _mashup.paused = true; |
256 _mashup.paused = true; |
249 if (_currentMedia) { |
257 if (_currentMedia) { |
250 _currentMedia.pause(); |
258 _currentMedia.pause(); |
251 } |
259 } |
252 }); |
260 }); |
253 |
261 |
254 _mashup.on("loadedmetadata", changeCurrentAnnotation); |
262 _mashup.on("loadedmetadata", changeCurrentAnnotation); |
255 |
263 } |
|
264 }; |
256 }; |
265 }; |
|
266 |
|
267 export { MashupPlayer, mashupPlayerStyles }; |