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