8 /* The Metadataplayer Object, single point of entry, replaces IriSP.init_player */ |
8 /* The Metadataplayer Object, single point of entry, replaces IriSP.init_player */ |
9 |
9 |
10 IriSP.Metadataplayer = function(config) { |
10 IriSP.Metadataplayer = function(config) { |
11 IriSP.log("IriSP.Metadataplayer constructor"); |
11 IriSP.log("IriSP.Metadataplayer constructor"); |
12 for (var key in IriSP.guiDefaults) { |
12 for (var key in IriSP.guiDefaults) { |
13 if (IriSP.guiDefaults.hasOwnProperty(key) && !config.gui.hasOwnProperty(key)) { |
13 if (IriSP.guiDefaults.hasOwnProperty(key) && !config.hasOwnProperty(key)) { |
14 config.gui[key] = IriSP.guiDefaults[key] |
14 config[key] = IriSP.guiDefaults[key] |
15 } |
15 } |
16 } |
16 } |
17 var _container = document.getElementById(config.gui.container); |
17 var _container = document.getElementById(config.container); |
18 _container.innerHTML = '<h3 class="Ldt-Loader">Loading... Chargement...</h3>'; |
18 _container.innerHTML = '<h3 class="Ldt-Loader">Loading... Chargement...</h3>'; |
19 this.sourceManager = new IriSP.Model.Directory(); |
19 this.sourceManager = new IriSP.Model.Directory(); |
20 this.config = config; |
20 this.config = config; |
21 this.callbackQueue = []; |
21 this.__events = {}; |
22 this.isLoaded = false; |
|
23 this.loadLibs(); |
22 this.loadLibs(); |
24 } |
23 } |
25 |
24 |
26 IriSP.Metadataplayer.prototype.toString = function() { |
25 IriSP.Metadataplayer.prototype.toString = function() { |
27 return 'Metadataplayer in #' + this.config.gui.container; |
26 return 'Metadataplayer in #' + this.config.container; |
28 } |
27 } |
29 |
28 |
30 IriSP.Metadataplayer.prototype.deferCallback = function(_callback) { |
29 IriSP.Metadataplayer.prototype.on = function(_event, _callback) { |
31 var _this = this; |
30 if (typeof this.__events[_event] === "undefined") { |
32 IriSP._.defer(function() { |
31 this.__events[_event] = []; |
33 _callback.call(_this); |
32 } |
34 }); |
33 this.__events[_event].push(_callback); |
35 } |
34 } |
36 |
35 |
37 IriSP.Metadataplayer.prototype.handleCallbacks = function() { |
36 IriSP.Metadataplayer.prototype.trigger = function(_event, _data) { |
38 this.isLoaded = true; |
37 var _element = this; |
39 while (this.callbackQueue.length) { |
38 IriSP._(this.__events[_event]).each(function(_callback) { |
40 this.deferCallback(this.callbackQueue.splice(0,1)[0]); |
39 _callback.call(_element, _data); |
41 } |
40 }); |
42 } |
|
43 |
|
44 IriSP.Metadataplayer.prototype.onLoad = function(_callback) { |
|
45 if (this.isLoaded) { |
|
46 this.deferCallback(_callback); |
|
47 } else { |
|
48 this.callbackQueue.push(_callback); |
|
49 } |
|
50 } |
41 } |
51 |
42 |
52 IriSP.Metadataplayer.prototype.loadLibs = function() { |
43 IriSP.Metadataplayer.prototype.loadLibs = function() { |
53 IriSP.log("IriSP.Metadataplayer.prototype.loadLibs"); |
44 IriSP.log("IriSP.Metadataplayer.prototype.loadLibs"); |
54 var $L = $LAB |
45 var $L = $LAB |
55 .script(IriSP.getLib("underscore")) |
46 .script(IriSP.getLib("underscore")) |
56 .script(IriSP.getLib("Mustache")) |
47 .script(IriSP.getLib("Mustache")) |
57 .script(IriSP.getLib("jQuery")) |
48 .script(IriSP.getLib("jQuery")); |
58 .script(IriSP.getLib("swfObject")); |
|
59 |
49 |
60 if (typeof JSON == "undefined") { |
50 if (typeof JSON == "undefined") { |
61 $L.script(IriSP.getLib("json")); |
51 $L.script(IriSP.getLib("json")); |
62 } |
52 } |
63 |
53 |
64 $L.wait() |
54 $L.wait() |
65 .script(IriSP.getLib("jQueryUI")); |
55 .script(IriSP.getLib("jQueryUI")); |
66 |
56 |
67 if (this.config.player.type === "jwplayer" || this.config.player.type === "auto") { |
|
68 $L.script(IriSP.getLib("jwplayer")); |
|
69 } |
|
70 |
|
71 if (this.config.player.type !== "jwplayer" && this.config.player.type !== "allocine" && this.config.player.type !== "dailymotion") { |
|
72 $L.script(IriSP.getLib("popcorn")); |
|
73 } |
|
74 |
|
75 /* widget specific requirements */ |
57 /* widget specific requirements */ |
76 for(var _i = 0; _i < this.config.gui.widgets.length; _i++) { |
58 for(var _i = 0; _i < this.config.widgets.length; _i++) { |
77 var _t = this.config.gui.widgets[_i].type; |
59 var _t = this.config.widgets[_i].type; |
78 if (typeof IriSP.widgetsRequirements[_t] !== "undefined" && typeof IriSP.widgetsRequirements[_t].requires !== "undefined" ) { |
60 if (typeof IriSP.widgetsRequirements[_t] !== "undefined" && typeof IriSP.widgetsRequirements[_t].requires !== "undefined" ) { |
79 for (var _j = 0; _j < IriSP.widgetsRequirements[_t].requires.length; _j++) { |
61 for (var _j = 0; _j < IriSP.widgetsRequirements[_t].requires.length; _j++) { |
80 $L.script(IriSP.getLib(IriSP.widgetsRequirements[_t].requires[_j])); |
62 $L.script(IriSP.getLib(IriSP.widgetsRequirements[_t].requires[_j])); |
81 } |
63 } |
82 } |
64 } |
96 } |
78 } |
97 if (typeof IriSP._ === "undefined" && typeof window._ !== "undefined") { |
79 if (typeof IriSP._ === "undefined" && typeof window._ !== "undefined") { |
98 IriSP._ = window._; |
80 IriSP._ = window._; |
99 } |
81 } |
100 IriSP.loadCss(IriSP.getLib("cssjQueryUI")); |
82 IriSP.loadCss(IriSP.getLib("cssjQueryUI")); |
101 IriSP.loadCss(this.config.gui.css); |
83 IriSP.loadCss(this.config.css); |
102 |
84 |
103 this.videoData = this.loadMetadata(this.config.player.metadata); |
85 this.$ = IriSP.jQuery('#' + this.config.container); |
104 this.$ = IriSP.jQuery('#' + this.config.gui.container); |
|
105 this.$.css({ |
86 this.$.css({ |
106 "width": this.config.gui.width, |
87 "width": this.config.width, |
107 "clear": "both" |
88 "clear": "both" |
108 }); |
89 }); |
109 if (typeof this.config.gui.height !== "undefined") { |
90 if (typeof this.config.height !== "undefined") { |
110 this.$.css("height", this.config.gui.height); |
91 this.$.css("height", this.config.height); |
111 } |
92 } |
112 |
93 |
|
94 this.widgets = []; |
113 var _this = this; |
95 var _this = this; |
114 this.videoData.onLoad(function() { |
96 for(var i = 0; i < this.config.widgets.length; i++) { |
115 _this.onVideoDataLoaded(); |
97 this.loadWidget(this.config.widgets[i], function(_widget) { |
116 }); |
98 _this.widgets.push(_widget) |
|
99 }); |
|
100 }; |
|
101 this.$.find('.Ldt-Loader').detach(); |
117 } |
102 } |
118 |
103 |
119 IriSP.Metadataplayer.prototype.loadMetadata = function(_metadataInfo) { |
104 IriSP.Metadataplayer.prototype.loadMetadata = function(_metadataInfo) { |
120 if (typeof _metadataInfo.serializer === "undefined" && typeof _metadataInfo.format !== "undefined") { |
105 if (typeof _metadataInfo.serializer === "undefined" && typeof _metadataInfo.format !== "undefined") { |
121 _metadataInfo.serializer = IriSP.serializers[_metadataInfo.format]; |
106 _metadataInfo.serializer = IriSP.serializers[_metadataInfo.format]; |
126 if (typeof _metadataInfo.url !== "undefined" && typeof _metadataInfo.serializer !== "undefined") { |
111 if (typeof _metadataInfo.url !== "undefined" && typeof _metadataInfo.serializer !== "undefined") { |
127 return this.sourceManager.remoteSource(_metadataInfo); |
112 return this.sourceManager.remoteSource(_metadataInfo); |
128 } else { |
113 } else { |
129 return this.sourceManager.newLocalSource(_metadataInfo); |
114 return this.sourceManager.newLocalSource(_metadataInfo); |
130 } |
115 } |
131 } |
|
132 |
|
133 IriSP.Metadataplayer.prototype.onVideoDataLoaded = function() { |
|
134 |
|
135 /* Setting default media from metadata */ |
|
136 |
|
137 if (typeof this.videoData !== "undefined") { |
|
138 |
|
139 var _media; |
|
140 |
|
141 if (typeof this.videoData.mainMedia !== "undefined") { |
|
142 _media = this.videoData.getElement(this.videoData.mainMedia); |
|
143 } |
|
144 |
|
145 if (this.config.player.type === "mashup" || this.config.player.type === "mashup-html") { |
|
146 if (typeof _media === "undefined" || _media.elementType !== "mashup") { |
|
147 var _mashups = this.videoData.getMashups(); |
|
148 if (_mashups.length) { |
|
149 _media = _mashups[0]; |
|
150 } |
|
151 } |
|
152 } else { |
|
153 if (typeof _media === "undefined" || _media.elementType !== "media") { |
|
154 var _medias = this.videoData.getMedias(); |
|
155 if (_medias.length) { |
|
156 _media = _medias[0]; |
|
157 } |
|
158 } |
|
159 } |
|
160 |
|
161 this.videoData.currentMedia = _media; |
|
162 |
|
163 /* Getting video URL from metadata if it's not in the player config options */ |
|
164 |
|
165 if (typeof _media !== "undefined" && typeof _media.video !== "undefined" && typeof this.config.player.video === "undefined") { |
|
166 this.config.player.video = _media.video; |
|
167 if (typeof this.config.player.streamer == "undefined" && typeof _media.streamer !== "undefined") { |
|
168 this.config.player.streamer = _media.streamer; |
|
169 } |
|
170 } |
|
171 |
|
172 } |
|
173 |
|
174 if (typeof this.config.player.video === "string" && this.config.player.url_transform === "function") { |
|
175 this.config.player.video = this.config.player.url_transform(this.config.player.video); |
|
176 } |
|
177 |
|
178 var _pop, |
|
179 _divs = this.layoutDivs("video",this.config.player.height || undefined), |
|
180 containerDiv = _divs[0], |
|
181 spacerDiv = _divs[1], |
|
182 _this = this, |
|
183 _types = { |
|
184 "html5" : /\.(ogg|ogv|webm)$/, |
|
185 "youtube" : /^(https?:\/\/)?(www\.)?youtube\.com/, |
|
186 "vimeo" : /^(https?:\/\/)?(www\.)?vimeo\.com/, |
|
187 "dailymotion" : /^(https?:\/\/)?(www\.)?dailymotion\.com/ |
|
188 }; |
|
189 |
|
190 if (this.config.player.type === "auto") { |
|
191 this.config.player.type = "jwplayer"; |
|
192 IriSP._(_types).each(function(_v, _k) { |
|
193 if (_v.test(_this.config.player.video)) { |
|
194 _this.config.player.type = _k |
|
195 } |
|
196 }); |
|
197 } |
|
198 |
|
199 switch(this.config.player.type) { |
|
200 case "html5": |
|
201 var _tmpId = Popcorn.guid("video"), |
|
202 _videoEl = IriSP.jQuery('<video>'); |
|
203 |
|
204 _videoEl.attr({ |
|
205 "src" : this.config.player.video, |
|
206 "id" : _tmpId |
|
207 }) |
|
208 |
|
209 if(this.config.player.hasOwnProperty("width")) { |
|
210 _videoEl.attr("width", this.config.player.width); |
|
211 } |
|
212 if(this.config.player.hasOwnProperty("height")) { |
|
213 _videoEl.attr("height", this.config.player.height); |
|
214 } |
|
215 IriSP.jQuery("#" + containerDiv).append(_videoEl); |
|
216 _pop = Popcorn("#" + _tmpId); |
|
217 break; |
|
218 |
|
219 case "html5-audio": |
|
220 var _tmpId = Popcorn.guid("audio"), |
|
221 _videoEl = IriSP.jQuery('<audio>'); |
|
222 |
|
223 _videoEl.attr({ |
|
224 "src" : this.config.player.video, |
|
225 "id" : _tmpId |
|
226 }) |
|
227 |
|
228 if(this.config.player.hasOwnProperty("width")) { |
|
229 _videoEl.attr("width", this.config.player.width); |
|
230 } |
|
231 if(this.config.player.hasOwnProperty("height")) { |
|
232 _videoEl.attr("height", this.config.player.height); |
|
233 } |
|
234 IriSP.jQuery("#" + containerDiv).append(_videoEl); |
|
235 _pop = Popcorn("#" + _tmpId); |
|
236 break; |
|
237 |
|
238 case "jwplayer": |
|
239 var opts = IriSP.jQuery.extend({}, this.config.player); |
|
240 delete opts.container; |
|
241 delete opts.type; |
|
242 if (typeof opts.streamer === "function") { |
|
243 opts.streamer = opts.streamer(opts.video); |
|
244 } |
|
245 if (typeof opts.streamer === "string") { |
|
246 opts.video = opts.video.replace(opts.streamer,""); |
|
247 } |
|
248 opts.file = opts.video; |
|
249 delete opts.video; |
|
250 delete opts.metadata; |
|
251 |
|
252 if(!opts.hasOwnProperty("flashplayer")) { |
|
253 opts.flashplayer = IriSP.getLib("jwPlayerSWF"); |
|
254 } |
|
255 |
|
256 if(!opts.hasOwnProperty("controlbar.position")) { |
|
257 opts["controlbar.position"] = "none"; |
|
258 } |
|
259 _pop = new IriSP.PopcornReplacement.jwplayer("#" + containerDiv, opts); |
|
260 break; |
|
261 |
|
262 case "youtube": |
|
263 // Popcorn.youtube wants us to specify the size of the player in the style attribute of its container div. |
|
264 IriSP.jQuery("#" + containerDiv).css({ |
|
265 width : this.config.player.width + "px", |
|
266 height : this.config.player.height + "px" |
|
267 }); |
|
268 var _urlparts = this.config.player.video.split(/[?&]/), |
|
269 _params = {}; |
|
270 for (var _j = 1; _j < _urlparts.length; _j++) { |
|
271 var _ppart = _urlparts[_j].split('='); |
|
272 _params[_ppart[0]] = decodeURIComponent(_ppart[1]); |
|
273 } |
|
274 _params.controls = 0; |
|
275 _params.modestbranding = 1; |
|
276 _url = _urlparts[0] + '?' + IriSP.jQuery.param(_params); |
|
277 _pop = Popcorn.youtube("#" + containerDiv, _url); |
|
278 break; |
|
279 |
|
280 case "vimeo": |
|
281 // Popcorn.vimeo wants us to specify the size of the player in the style attribute of its container div. |
|
282 IriSP.jQuery("#" + containerDiv).css({ |
|
283 width : this.config.player.width + "px", |
|
284 height : this.config.player.height + "px" |
|
285 }); |
|
286 _pop = Popcorn.vimeo("#" + containerDiv, this.config.player.video); |
|
287 break; |
|
288 |
|
289 case "dailymotion": |
|
290 _pop = new IriSP.PopcornReplacement.dailymotion("#" + containerDiv, this.config.player); |
|
291 break; |
|
292 |
|
293 case "mashup": |
|
294 _pop = new IriSP.PopcornReplacement.mashup("#" + containerDiv, this.config.player); |
|
295 break; |
|
296 |
|
297 case "allocine": |
|
298 _pop = new IriSP.PopcornReplacement.allocine("#" + containerDiv, this.config.player); |
|
299 break; |
|
300 |
|
301 case "mashup-html": |
|
302 _pop = new IriSP.PopcornReplacement.htmlMashup("#" + containerDiv, this.config.player, this.videoData); |
|
303 break; |
|
304 |
|
305 default: |
|
306 _pop = undefined; |
|
307 }; |
|
308 |
|
309 this.popcorn = _pop; |
|
310 |
|
311 /* Now Loading Widgets */ |
|
312 |
|
313 this.widgets = []; |
|
314 var _this = this; |
|
315 for(var i = 0; i < this.config.gui.widgets.length; i++) { |
|
316 this.loadWidget(this.config.gui.widgets[i], function(_widget) { |
|
317 _this.widgets.push(_widget) |
|
318 }); |
|
319 }; |
|
320 this.$.find('.Ldt-Loader').detach(); |
|
321 this.handleCallbacks(); |
|
322 } |
116 } |
323 |
117 |
324 IriSP.Metadataplayer.prototype.loadWidget = function(_widgetConfig, _callback) { |
118 IriSP.Metadataplayer.prototype.loadWidget = function(_widgetConfig, _callback) { |
325 /* Creating containers if needed */ |
119 /* Creating containers if needed */ |
326 if (typeof _widgetConfig.container === "undefined") { |
120 if (typeof _widgetConfig.container === "undefined") { |
352 */ |
146 */ |
353 IriSP.Metadataplayer.prototype.layoutDivs = function(_name, _height) { |
147 IriSP.Metadataplayer.prototype.layoutDivs = function(_name, _height) { |
354 if (typeof(_name) === "undefined") { |
148 if (typeof(_name) === "undefined") { |
355 _name = ""; |
149 _name = ""; |
356 } |
150 } |
357 var newDiv = IriSP._.uniqueId(this.config.gui.container + "_widget_" + _name + "_"), |
151 var newDiv = IriSP._.uniqueId(this.config.container + "_widget_" + _name + "_"), |
358 spacerDiv = IriSP._.uniqueId("LdtPlayer_spacer_"), |
152 spacerDiv = IriSP._.uniqueId("LdtPlayer_spacer_"), |
359 divHtml = IriSP.jQuery('<div>') |
153 divHtml = IriSP.jQuery('<div>') |
360 .attr("id",newDiv) |
154 .attr("id",newDiv) |
361 .css({ |
155 .css({ |
362 width: this.config.gui.width + "px", |
156 width: this.config.width + "px", |
363 position: "relative", |
157 position: "relative", |
364 clear: "both" |
158 clear: "both" |
365 }), |
159 }), |
366 spacerHtml = IriSP.jQuery('<div>') |
160 spacerHtml = IriSP.jQuery('<div>') |
367 .attr("id",spacerDiv) |
161 .attr("id",spacerDiv) |
368 .css({ |
162 .css({ |
369 width: this.config.gui.width + "px", |
163 width: this.config.width + "px", |
370 height: this.config.gui.spacer_div_height + "px", |
164 height: this.config.spacer_div_height + "px", |
371 position: "relative", |
165 position: "relative", |
372 clear: "both" |
166 clear: "both" |
373 }); |
167 }); |
374 if (typeof _height !== "undefined") { |
168 if (typeof _height !== "undefined") { |
375 divHtml.css("height", _height); |
169 divHtml.css("height", _height); |