|
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 /* A Popcorn-based player for HTML5 Video, Youtube and Vimeo */ |
|
9 |
|
10 IriSP.Widgets.MashupPlayer.prototype.defaults = { |
|
11 aspect_ratio: 14/9, |
|
12 player_type: "PopcornPlayer" |
|
13 } |
|
14 |
|
15 IriSP.Widgets.MashupPlayer.prototype.draw = function() { |
|
16 var _this = this, |
|
17 _mashup = this.media, |
|
18 _pauseState = true, |
|
19 _currentMedia = null, |
|
20 _currentAnnotation = null, |
|
21 _segmentBegin, |
|
22 _segmentEnd, |
|
23 _timecode = 0, |
|
24 _timedelta; |
|
25 |
|
26 function changeCurrentAnnotation() { |
|
27 var _annotation = _mashup.getAnnotationAtTime( _timecode ); |
|
28 if (typeof _annotation === "undefined") { |
|
29 if (_currentMedia) { |
|
30 _currentMedia.pause(); |
|
31 if (!_pauseState) { |
|
32 _pauseState = true; |
|
33 _mashup.trigger("pause"); |
|
34 } |
|
35 } |
|
36 return; |
|
37 } |
|
38 if (_annotation !== _currentAnnotation) { |
|
39 _currentAnnotation = _annotation; |
|
40 _segmentBegin = _currentAnnotation.annotation.begin.milliseconds; |
|
41 _segmentEnd = _currentAnnotation.annotation.end.milliseconds; |
|
42 _timedelta = _segmentBegin - _currentAnnotation.begin.milliseconds; |
|
43 _currentMedia = _currentAnnotation.getMedia(); |
|
44 |
|
45 for (var _i = 0; _i < _mashup.medias.length; _i++) { |
|
46 if (_mashup.medias[_i].id !== _currentMedia.id) { |
|
47 _mashup.medias[_i].hide(); |
|
48 _mashup.medias[_i].pause(); |
|
49 } else { |
|
50 _mashup.medias[_i].show(); |
|
51 } |
|
52 } |
|
53 |
|
54 /* PRELOADING */ |
|
55 var _preloadedMedias = [], |
|
56 _toPreload = _mashup.getAnnotations().filter(function(_a) { |
|
57 return (_a.begin >= _currentAnnotation.end && _a.getMedia() !== _currentMedia); |
|
58 }); |
|
59 IriSP._(_toPreload).each(function(_a) { |
|
60 var _media = _a.getMedia(); |
|
61 if (IriSP._(_preloadedMedias).indexOf(_media.id) === -1) { |
|
62 _preloadedMedias.push(_media.id); |
|
63 _media.setCurrentTime(_a.annotation.begin.getSeconds()); |
|
64 //console.log("Preloading ", _media.id, " at t=", _a.annotation.begin.getSeconds()); |
|
65 } |
|
66 }); |
|
67 |
|
68 // console.log("Changed segment: media="+ this.currentMedia.id + ", from=" + this.segmentBegin + " to=" + this.segmentEnd +", timedelta = ", this.timedelta) |
|
69 // } else { |
|
70 // console.log("changeCurrentAnnotation called, but segment hasn't changed"); |
|
71 } |
|
72 |
|
73 _currentMedia.setCurrentTime( _timecode + _timedelta); |
|
74 _mashup.trigger("timeupdate", new IriSP.Model.Time(_timecode)); |
|
75 |
|
76 if (!_pauseState) { |
|
77 _currentMedia.play(); |
|
78 } |
|
79 } |
|
80 |
|
81 if (!this.height) { |
|
82 this.height = Math.floor(this.width/this.aspect_ratio); |
|
83 this.$.css({ |
|
84 height: this.height |
|
85 }); |
|
86 } |
|
87 |
|
88 IriSP._(_mashup.medias).each(function(_media) { |
|
89 var _el = IriSP.jQuery('<div>'); |
|
90 _el.css({ |
|
91 position: "absolute", |
|
92 top: 0, |
|
93 left: 0, |
|
94 height: _this.height, |
|
95 width: _this.width |
|
96 }); |
|
97 _this.$.append(_el); |
|
98 |
|
99 _this.insertSubwidget( |
|
100 _el, |
|
101 { |
|
102 type: _this.player_type, |
|
103 media_id: _media.id, |
|
104 height: _this.height, |
|
105 width: _this.width, |
|
106 url_transform: _this.url_transform |
|
107 } |
|
108 ); |
|
109 |
|
110 _media.loadedMetadata = false; |
|
111 _media.show = function() { |
|
112 _el.show(); |
|
113 }; |
|
114 _media.hide = function() { |
|
115 _el.hide(); |
|
116 }; |
|
117 _media.on("loadedmetadata", function() { |
|
118 _media.loadedMetadata = true; |
|
119 var _allLoaded = true; |
|
120 for (var _i = 0; _i < _mashup.medias.length; _i++) { |
|
121 _allLoaded = _allLoaded && _mashup.medias[_i].loadedMetadata; |
|
122 } |
|
123 if (_allLoaded) { |
|
124 changeCurrentAnnotation(); |
|
125 _mashup.trigger("loadedmetadata"); |
|
126 } |
|
127 }); |
|
128 _media.on("timeupdate", function(_time) { |
|
129 if (!_pauseState && _media === _currentMedia) { |
|
130 // var _status = "Timeupdate from " + _media.id + " at time " + _time; |
|
131 if ( _time < _segmentEnd ) { |
|
132 if ( _time >= _segmentBegin ) { |
|
133 _timecode = _time - _timedelta; |
|
134 // _status += " within segment"; |
|
135 } else { |
|
136 _timecode = _segmentBegin - _timedelta; |
|
137 _media.setCurrentTime(_segmentBegin); |
|
138 // _status += " before segment"; |
|
139 } |
|
140 } else { |
|
141 _timecode = _segmentEnd - _timedelta; |
|
142 _media.pause(); |
|
143 changeCurrentAnnotation(); |
|
144 // _status += " after segment"; |
|
145 } |
|
146 // _status += " (" + _this.segmentBegin + " to " + _this.segmentEnd + ")" + ", translated to " + _this.timecode; |
|
147 // console.log(_status); |
|
148 _mashup.trigger("timeupdate", new IriSP.Model.Time(_timecode)); |
|
149 } |
|
150 }); |
|
151 _media.on("play", function() { |
|
152 if (_media === _currentMedia) { |
|
153 _mashup.trigger("play"); |
|
154 } |
|
155 }); |
|
156 _media.on("pause", function() { |
|
157 if (_media === _currentMedia) { |
|
158 _mashup.trigger("pause"); |
|
159 } |
|
160 }); |
|
161 }); |
|
162 |
|
163 _mashup.getCurrentTime = function() { |
|
164 return new IriSP.Model.Time(_timecode); |
|
165 } |
|
166 _mashup.getVolume = function() { |
|
167 return ( _currentMedia ? _currentMedia.getVolume() : .5 ); |
|
168 } |
|
169 _mashup.getPaused = function() { |
|
170 return _pauseState; |
|
171 } |
|
172 _mashup.getMuted = function() { |
|
173 return ( _currentMedia ? _currentMedia.getMuted() : false ); |
|
174 } |
|
175 _mashup.setCurrentTime = function(_milliseconds) { |
|
176 _timecode = _milliseconds; |
|
177 changeCurrentAnnotation(); |
|
178 } |
|
179 _mashup.setVolume = function(_vol) { |
|
180 for (var _i = 0; _i < _mashup.medias.length; _i++) { |
|
181 _mashup.medias[_i].setVolume(_vol); |
|
182 } |
|
183 } |
|
184 _mashup.mute = function() { |
|
185 for (var _i = 0; _i < _mashup.medias.length; _i++) { |
|
186 _mashup.medias[_i].mute(); |
|
187 } |
|
188 } |
|
189 _mashup.unmute = function() { |
|
190 for (var _i = 0; _i < _mashup.medias.length; _i++) { |
|
191 _mashup.medias[_i].unmute(); |
|
192 } |
|
193 } |
|
194 _mashup.play = function() { |
|
195 _pauseState = false; |
|
196 changeCurrentAnnotation(); |
|
197 } |
|
198 _mashup.pause = function() { |
|
199 _pauseState = true; |
|
200 if (_currentMedia) { |
|
201 _currentMedia.pause(); |
|
202 } |
|
203 } |
|
204 |
|
205 changeCurrentAnnotation(); |
|
206 |
|
207 } |