Actualización

main/inc/lib/javascript/mediaelement/plugins/vrview/cardboard.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="18" height="12" viewBox="0 0 17.62 11.4"><defs><style>.cls-1{fill:#fff;}</style></defs><title>6</title><path id="cardboard" class="cls-1" d="M157.8,3.9H142.3A1.11,1.11,0,0,0,141.2,5v9.2a1.11,1.11,0,0,0,1.1,1.1h4.2a1,1,0,0,0,1-.7l1.2-3.1a1.39,1.39,0,0,1,2.6,0l1.2,3.1a1.09,1.09,0,0,0,1,.7h4.2a1.11,1.11,0,0,0,1.1-1.1V5.1a1,1,0,0,0-1-1.2m-11.9,7.6a2,2,0,1,1,2-2,2.07,2.07,0,0,1-2,2m8.4,0a2,2,0,1,1,2-2A2,2,0,0,1,154.3,11.5Z" transform="translate(-141.2 -3.9)"/></svg>

main/inc/lib/javascript/mediaelement/plugins/vrview/vrview.css

@@ -0,0 +1,4 @@
+.mejs__vrview-button > button,
+.mejs-vrview-button > button {
+    background: url('cardboard.svg') no-repeat 0 4px;
+}

main/inc/lib/javascript/mediaelement/plugins/vrview/vrview.js

@@ -0,0 +1,383 @@
+/*!
+ * MediaElement.js
+ * http://www.mediaelementjs.com/
+ *
+ * Wrapper that mimics native HTML5 MediaElement (audio and video)
+ * using a variety of technologies (pure JavaScript, Flash, iframe)
+ *
+ * Copyright 2010-2017, John Dyer (http://j.hn/)
+ * License: MIT
+ *
+ */(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(_dereq_,module,exports){
+'use strict';
+
+var VrAPI = {
+	isMediaStarted: false,
+
+	isMediaLoaded: false,
+
+	creationQueue: [],
+
+	prepareSettings: function prepareSettings(settings) {
+		if (VrAPI.isLoaded) {
+			VrAPI.createInstance(settings);
+		} else {
+			VrAPI.loadScript(settings);
+			VrAPI.creationQueue.push(settings);
+		}
+	},
+
+	loadScript: function loadScript(settings) {
+		if (!VrAPI.isMediaStarted) {
+
+			if (typeof VRView !== 'undefined') {
+				VrAPI.createInstance(settings);
+			} else {
+				var script = document.createElement('script'),
+				    firstScriptTag = document.getElementsByTagName('script')[0];
+
+				var done = false;
+
+				settings.options.path = typeof settings.options.path === 'string' ? settings.options.path : 'https://googlevr.github.io/vrview/build/vrview.min.js';
+
+				script.src = settings.options.path;
+
+				script.onload = script.onreadystatechange = function () {
+					if (!done && (!this.readyState || this.readyState === undefined || this.readyState === 'loaded' || this.readyState === 'complete')) {
+						done = true;
+						VrAPI.mediaReady();
+						script.onload = script.onreadystatechange = null;
+					}
+				};
+
+				firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
+			}
+			VrAPI.isMediaStarted = true;
+		}
+	},
+
+	mediaReady: function mediaReady() {
+		VrAPI.isLoaded = true;
+		VrAPI.isMediaLoaded = true;
+
+		while (VrAPI.creationQueue.length > 0) {
+			var settings = VrAPI.creationQueue.pop();
+			VrAPI.createInstance(settings);
+		}
+	},
+
+	createInstance: function createInstance(settings) {
+		var player = new VRView.Player('#' + settings.id, settings.options);
+		window['__ready__' + settings.id](player);
+	}
+};
+
+var VrRenderer = {
+	name: 'vrview',
+
+	options: {
+		prefix: 'vrview'
+	},
+
+	canPlayType: function canPlayType(type) {
+		return ~['video/mp4', 'application/x-mpegurl', 'vnd.apple.mpegurl', 'application/dash+xml'].indexOf(type.toLowerCase());
+	},
+
+	create: function create(mediaElement, options, mediaFiles) {
+		var stack = [],
+		    vr = {},
+		    readyState = 4;
+
+		var vrPlayer = null,
+		    paused = true,
+		    volume = 1,
+		    oldVolume = volume,
+		    bufferedTime = 0,
+		    ended = false,
+		    duration = 0,
+		    url = '';
+
+		vr.options = options;
+		vr.id = mediaElement.id + '_' + options.prefix;
+		vr.mediaElement = mediaElement;
+
+		var props = mejs.html5media.properties,
+		    assignGettersSetters = function assignGettersSetters(propName) {
+
+			var capName = propName.substring(0, 1).toUpperCase() + propName.substring(1);
+
+			vr['get' + capName] = function () {
+				if (vrPlayer !== null) {
+					var value = null;
+
+					switch (propName) {
+						case 'currentTime':
+							return vrPlayer.getCurrentTime();
+						case 'duration':
+							return vrPlayer.getDuration();
+						case 'volume':
+							volume = vrPlayer.getVolume();
+							return volume;
+						case 'muted':
+							return volume === 0;
+						case 'paused':
+							paused = vrPlayer.isPaused;
+							return paused;
+						case 'ended':
+							return ended;
+						case 'src':
+							return url;
+						case 'buffered':
+							return {
+								start: function start() {
+									return 0;
+								},
+								end: function end() {
+									return bufferedTime * duration;
+								},
+								length: 1
+							};
+						case 'readyState':
+							return readyState;
+					}
+
+					return value;
+				} else {
+					return null;
+				}
+			};
+
+			vr['set' + capName] = function (value) {
+
+				if (vrPlayer !== null) {
+					switch (propName) {
+
+						case 'src':
+							var _url = typeof value === 'string' ? value : value[0].src;
+							vrPlayer.setContentInfo({ video: _url });
+							break;
+
+						case 'currentTime':
+							vrPlayer.setCurrentTime(value);
+							setTimeout(function () {
+								var event = mejs.Utils.createEvent('timeupdate', vr);
+								mediaElement.dispatchEvent(event);
+							}, 50);
+							break;
+
+						case 'volume':
+							vrPlayer.setVolume(value);
+							setTimeout(function () {
+								var event = mejs.Utils.createEvent('volumechange', vr);
+								mediaElement.dispatchEvent(event);
+							}, 50);
+							break;
+						case 'muted':
+							volume = value ? 0 : oldVolume;
+							vrPlayer.setVolume(volume);
+							setTimeout(function () {
+								var event = mejs.Utils.createEvent('volumechange', vr);
+								mediaElement.dispatchEvent(event);
+							}, 50);
+							break;
+						case 'readyState':
+							var event = mejs.Utils.createEvent('canplay', vr);
+							mediaElement.dispatchEvent(event);
+							break;
+						default:
+							console.log('VRView ' + vr.id, propName, 'UNSUPPORTED property');
+							break;
+					}
+				} else {
+					stack.push({ type: 'set', propName: propName, value: value });
+				}
+			};
+		};
+		for (var i = 0, il = props.length; i < il; i++) {
+			assignGettersSetters(props[i]);
+		}
+
+		var methods = mejs.html5media.methods,
+		    assignMethods = function assignMethods(methodName) {
+			vr[methodName] = function () {
+
+				if (vrPlayer !== null) {
+					switch (methodName) {
+						case 'play':
+							return vrPlayer.play();
+						case 'pause':
+							return vrPlayer.pause();
+						case 'load':
+							return null;
+
+					}
+				} else {
+					stack.push({ type: 'call', methodName: methodName });
+				}
+			};
+		};
+		for (var _i = 0, _il = methods.length; _i < _il; _i++) {
+			assignMethods(methods[_i]);
+		}
+
+		var vrContainer = document.createElement('div');
+		vrContainer.setAttribute('id', vr.id);
+		vrContainer.style.width = '100%';
+		vrContainer.style.height = '100%';
+
+		window['__ready__' + vr.id] = function (_vrPlayer) {
+
+			mediaElement.vrPlayer = vrPlayer = _vrPlayer;
+
+			var iframe = vrContainer.querySelector('iframe');
+			iframe.style.width = '100%';
+			iframe.style.height = '100%';
+
+			if (stack.length) {
+				for (var _i2 = 0, _il2 = stack.length; _i2 < _il2; _i2++) {
+
+					var stackItem = stack[_i2];
+
+					if (stackItem.type === 'set') {
+						var propName = stackItem.propName,
+						    capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
+
+						vr['set' + capName](stackItem.value);
+					} else if (stackItem.type === 'call') {
+						vr[stackItem.methodName]();
+					}
+				}
+			}
+
+			vrPlayer.on('ready', function () {
+
+				var events = mejs.html5media.events.concat(['mouseover', 'mouseout']);
+
+				var _loop = function _loop(_i3, _il3) {
+					vrPlayer.on(events[_i3], function () {
+						var event = mejs.Utils.createEvent(events[_i3], vr);
+						mediaElement.dispatchEvent(event);
+					});
+				};
+
+				for (var _i3 = 0, _il3 = events.length; _i3 < _il3; _i3++) {
+					_loop(_i3, _il3);
+				}
+			});
+		};
+
+		mediaElement.originalNode.parentNode.insertBefore(vrContainer, mediaElement.originalNode);
+		mediaElement.originalNode.style.display = 'none';
+
+		if (mediaElement.originalNode.getAttribute('data-360video-stereo') === 'false') {
+			options.vrIsStereo = false;
+		}
+
+		var vrSettings = {
+			path: options.vrPath,
+			is_stereo: options.vrIsStereo,
+			is_autopan_off: options.vrIsAutopanOff,
+			is_debug: options.vrDebug,
+			default_yaw: options.vrDefaultYaw,
+			is_yaw_only: options.vrIsYawOnly,
+			loop: options.loop
+		};
+
+		if (mediaFiles && mediaFiles.length > 0) {
+			for (var _i4 = 0, _il4 = mediaFiles.length; _i4 < _il4; _i4++) {
+				if (mejs.Renderers.renderers[options.prefix].canPlayType(mediaFiles[_i4].type)) {
+					vrSettings.video = mediaFiles[_i4].src;
+					vrSettings.width = '100%';
+					vrSettings.height = '100%';
+					break;
+				}
+			}
+		}
+
+		VrAPI.prepareSettings({
+			options: vrSettings,
+			id: vr.id
+		});
+
+		vr.hide = function () {
+			vr.pause();
+			if (vrPlayer) {
+				vrContainer.style.display = 'none';
+			}
+		};
+
+		vr.setSize = function () {};
+
+		vr.show = function () {
+			if (vrPlayer) {
+				vrContainer.style.display = '';
+			}
+		};
+
+		return vr;
+	}
+};
+
+mejs.Renderers.add(VrRenderer);
+
+Object.assign(mejs.MepDefaults, {
+	vrPath: null,
+
+	vrIsStereo: true,
+
+	vrIsAutopanOff: true,
+
+	vrDebug: false,
+
+	vrDefaultYaw: 0,
+
+	vrIsYawOnly: false
+});
+
+Object.assign(MediaElementPlayer.prototype, {
+	buildvrview: function buildvrview(player, controls, layers, media) {
+
+		var t = this;
+
+		if (!t.isVideo || t.isVideo && t.media.rendererName !== null && !t.media.rendererName.match(/(native\_(dash|hls)|html5)/)) {
+			return;
+		}
+
+		if (player.node.getAttribute('data-360video') !== 'true') {
+			return;
+		}
+
+		var button = document.createElement('div');
+
+		player.detectFullscreenMode();
+
+		button.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'vrview-button';
+		button.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="VR" aria-label="VR" tabindex="0"></button>';
+		button.addEventListener('click', function () {
+			var isFullScreen = mejs.Features.HAS_TRUE_NATIVE_FULLSCREEN && mejs.Features.IS_FULLSCREEN || player.isFullScreen;
+
+			if (isFullScreen) {
+				player.exitFullScreen();
+			} else {
+				player.enterFullScreen();
+			}
+		});
+
+		t.globalBind('keydown', function (e) {
+			var key = e.which || e.keyCode || 0;
+			if (key === 27 && (mejs.Features.HAS_TRUE_NATIVE_FULLSCREEN && mejs.Features.IS_FULLSCREEN || player.isFullScreen)) {
+				player.exitFullScreen();
+			}
+		});
+
+		t.addControlElement(button, 'vrview');
+
+		var url = media.getSrc(),
+		    mediaFiles = [{ src: url, type: mejs.Utils.getTypeFromFile(url) }],
+		    renderInfo = mejs.Renderers.select(mediaFiles, ['vrview']);
+
+		media.changeRenderer(renderInfo.rendererName, mediaFiles);
+	}
+});
+
+},{}]},{},[1]);

main/inc/lib/javascript/mediaelement/plugins/vrview/vrview.min.css

@@ -0,0 +1 @@
+.mejs-vrview-button>button,.mejs__vrview-button>button{background:url(cardboard.svg) no-repeat 0 4px}

main/inc/lib/javascript/mediaelement/plugins/vrview/vrview.min.js

@@ -0,0 +1,12 @@
+/*!
+ * MediaElement.js
+ * http://www.mediaelementjs.com/
+ *
+ * Wrapper that mimics native HTML5 MediaElement (audio and video)
+ * using a variety of technologies (pure JavaScript, Flash, iframe)
+ *
+ * Copyright 2010-2017, John Dyer (http://j.hn/)
+ * License: MIT
+ *
+ */
+!function i(s,o,u){function l(t,e){if(!o[t]){if(!s[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(c)return c(t,!0);var n=new Error("Cannot find module '"+t+"'");throw n.code="MODULE_NOT_FOUND",n}var a=o[t]={exports:{}};s[t][0].call(a.exports,function(e){return l(s[t][1][e]||e)},a,a.exports,i,s,o,u)}return o[t].exports}for(var c="function"==typeof require&&require,e=0;e<u.length;e++)l(u[e]);return l}({1:[function(e,t,r){"use strict";var E={isMediaStarted:!1,isMediaLoaded:!1,creationQueue:[],prepareSettings:function(e){E.isLoaded?E.createInstance(e):(E.loadScript(e),E.creationQueue.push(e))},loadScript:function(e){if(!E.isMediaStarted){if("undefined"!=typeof VRView)E.createInstance(e);else{var t=document.createElement("script"),r=document.getElementsByTagName("script")[0],n=!1;e.options.path="string"==typeof e.options.path?e.options.path:"https://googlevr.github.io/vrview/build/vrview.min.js",t.src=e.options.path,t.onload=t.onreadystatechange=function(){n||this.readyState&&void 0!==this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState||(n=!0,E.mediaReady(),t.onload=t.onreadystatechange=null)},r.parentNode.insertBefore(t,r)}E.isMediaStarted=!0}},mediaReady:function(){for(E.isLoaded=!0,E.isMediaLoaded=!0;0<E.creationQueue.length;){var e=E.creationQueue.pop();E.createInstance(e)}},createInstance:function(e){var t=new VRView.Player("#"+e.id,e.options);window["__ready__"+e.id](t)}},n={name:"vrview",options:{prefix:"vrview"},canPlayType:function(e){return~["video/mp4","application/x-mpegurl","vnd.apple.mpegurl","application/dash+xml"].indexOf(e.toLowerCase())},create:function(o,e,t){var u=[],l={},c=null,a=1,i=a;l.options=e,l.id=o.id+"_"+e.prefix,l.mediaElement=o;for(var r=mejs.html5media.properties,n=function(n){var e=n.substring(0,1).toUpperCase()+n.substring(1);l["get"+e]=function(){if(null===c)return null;switch(n){case"currentTime":return c.getCurrentTime();case"duration":return c.getDuration();case"volume":return a=c.getVolume();case"muted":return 0===a;case"paused":return c.isPaused;case"ended":return!1;case"src":return"";case"buffered":return{start:function(){return 0},end:function(){return 0},length:1};case"readyState":return 4}return null},l["set"+e]=function(e){if(null!==c)switch(n){case"src":var t="string"==typeof e?e:e[0].src;c.setContentInfo({video:t});break;case"currentTime":c.setCurrentTime(e),setTimeout(function(){var e=mejs.Utils.createEvent("timeupdate",l);o.dispatchEvent(e)},50);break;case"volume":c.setVolume(e),setTimeout(function(){var e=mejs.Utils.createEvent("volumechange",l);o.dispatchEvent(e)},50);break;case"muted":a=e?0:i,c.setVolume(a),setTimeout(function(){var e=mejs.Utils.createEvent("volumechange",l);o.dispatchEvent(e)},50);break;case"readyState":var r=mejs.Utils.createEvent("canplay",l);o.dispatchEvent(r);break;default:console.log("VRView "+l.id,n,"UNSUPPORTED property")}else u.push({type:"set",propName:n,value:e})}},s=0,d=r.length;s<d;s++)n(r[s]);for(var p=mejs.html5media.methods,v=function(e){l[e]=function(){if(null!==c)switch(e){case"play":return c.play();case"pause":return c.pause();case"load":return null}else u.push({type:"call",methodName:e})}},f=0,m=p.length;f<m;f++)v(p[f]);var h=document.createElement("div");h.setAttribute("id",l.id),h.style.width="100%",h.style.height="100%",window["__ready__"+l.id]=function(e){o.vrPlayer=c=e;var t=h.querySelector("iframe");if(t.style.width="100%",t.style.height="100%",u.length)for(var r=0,n=u.length;r<n;r++){var a=u[r];if("set"===a.type){var i=a.propName,s=""+i.substring(0,1).toUpperCase()+i.substring(1);l["set"+s](a.value)}else"call"===a.type&&l[a.methodName]()}c.on("ready",function(){for(var r=mejs.html5media.events.concat(["mouseover","mouseout"]),e=function(t,e){c.on(r[t],function(){var e=mejs.Utils.createEvent(r[t],l);o.dispatchEvent(e)})},t=0,n=r.length;t<n;t++)e(t)})},o.originalNode.parentNode.insertBefore(h,o.originalNode),o.originalNode.style.display="none";var y={path:e.vrPath,is_stereo:e.vrIsStereo,is_autopan_off:e.vrIsAutopanOff,is_debug:e.vrDebug,default_yaw:e.vrDefaultYaw,is_yaw_only:e.vrIsYawOnly,loop:e.loop};if(t&&0<t.length)for(var g=0,w=t.length;g<w;g++)if(mejs.Renderers.renderers[e.prefix].canPlayType(t[g].type)){y.video=t[g].src,y.width="100%",y.height="100%";break}return E.prepareSettings({options:y,id:l.id}),l.hide=function(){l.pause(),c&&(h.style.display="none")},l.setSize=function(){},l.show=function(){c&&(h.style.display="")},l}};mejs.Renderers.add(n),Object.assign(mejs.MepDefaults,{vrPath:null,vrIsStereo:!0,vrIsAutopanOff:!0,vrDebug:!1,vrDefaultYaw:0,vrIsYawOnly:!1}),Object.assign(MediaElementPlayer.prototype,{buildvrview:function(t,e,r,n){var a=this;if(a.isVideo&&(!a.isVideo||null===a.media.rendererName||a.media.rendererName.match(/(native\_(dash|hls)|html5)/))){var i=document.createElement("div");t.detectFullscreenMode(),i.className=a.options.classPrefix+"button "+a.options.classPrefix+"vrview-button",i.innerHTML='<button type="button" aria-controls="'+a.id+'" title="Line truncated