Actualización

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

@@ -0,0 +1,151 @@
+/*!
+ * 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';
+
+Object.assign(mejs.MepDefaults, {
+	markersRollsColor: '#E9BC3D',
+
+	markersRollsWidth: 1,
+
+	markersRolls: {}
+});
+
+Object.assign(MediaElementPlayer.prototype, {
+	buildmarkersrolls: function buildmarkersrolls(player, controls, layers, media) {
+		var _player$options = player.options,
+		    markersRollsColor = _player$options.markersRollsColor,
+		    markersRollsWidth = _player$options.markersRollsWidth,
+		    markersRolls = _player$options.markersRolls,
+		    classPrefix = _player$options.classPrefix;
+
+		var controlsTotalTime = controls.querySelector('.' + classPrefix + 'time-total');
+
+		var currentPosition = -1,
+		    lastPlayedPosition = -1,
+		    lastMarkerRollCallback = -1,
+		    markersAreRendered = false;
+
+		var markersCount = Object.keys(markersRolls).length;
+
+		if (!markersCount) {
+			return;
+		}
+
+		function createIframeLayer() {
+			var layer = document.createElement('iframe');
+
+			layer.frameBorder = '0';
+			layer.className = classPrefix + 'markersrolls-layer ' + classPrefix + 'overlay ' + classPrefix + 'layer';
+			layer.style.display = 'none';
+			layer.style.backgroundColor = '#9F9F9F';
+			layer.style.border = '0 none';
+			layer.style.boxShadow = '#B0B0B0 0px 0px 20px -10px inset';
+			layer.style.paddingBottom = '40px';
+
+			return layer;
+		}
+
+		function createMarker(_ref) {
+			var markerPosition = _ref.markerPosition,
+			    duration = _ref.duration;
+
+			var marker = document.createElement('span');
+
+			marker.className = classPrefix + 'time-marker';
+			marker.style.width = markersRollsWidth + 'px';
+			marker.style.left = 100 * markerPosition / duration + '%';
+			marker.style.background = markersRollsColor;
+
+			return marker;
+		}
+
+		var markersRollsLayer = createIframeLayer();
+
+		layers.appendChild(markersRollsLayer);
+
+		function tryRenderMarkers() {
+			if (markersAreRendered) {
+				return;
+			}
+
+			var duration = media.getDuration();
+
+			if (!duration) {
+				return;
+			}
+
+			for (var markerPosition in markersRolls) {
+				if (!markersRolls.hasOwnProperty(markerPosition)) {
+					continue;
+				}
+
+				markerPosition = parseInt(markerPosition);
+
+				if (markerPosition >= duration || markerPosition < 0) {
+					continue;
+				}
+
+				var marker = createMarker({
+					markerPosition: markerPosition,
+					duration: duration
+				});
+
+				controlsTotalTime.appendChild(marker);
+			}
+
+			markersAreRendered = true;
+		}
+
+		player.markersRollsLoadedMetadata = function () {
+			tryRenderMarkers();
+		};
+		player.markersRollsTimeUpdate = function () {
+			currentPosition = Math.floor(media.currentTime);
+
+			if (lastPlayedPosition > currentPosition) {
+				if (lastMarkerRollCallback > currentPosition) {
+					lastMarkerRollCallback = -1;
+				}
+			} else {
+				lastPlayedPosition = currentPosition;
+			}
+
+			if (0 === markersCount || !markersRolls[currentPosition] || currentPosition === lastMarkerRollCallback) {
+				return;
+			}
+
+			lastMarkerRollCallback = currentPosition;
+
+			media.pause();
+
+			markersRollsLayer.src = markersRolls[currentPosition];
+			markersRollsLayer.style.display = 'block';
+		};
+		player.markersRollsPlay = function () {
+			tryRenderMarkers();
+
+			markersRollsLayer.style.display = 'none';
+			markersRollsLayer.src = '';
+		};
+
+		media.addEventListener('loadedmetadata', player.markersRollsLoadedMetadata);
+		media.addEventListener('timeupdate', player.markersRollsTimeUpdate);
+		media.addEventListener('play', player.markersRollsPlay);
+	},
+	cleanmarkersrolls: function cleanmarkersrolls(player, controls, layers, media) {
+		media.removeEventListener('loadedmetadata', player.markersRollsLoadedMetadata);
+		media.removeEventListener('timeupdate', player.markersRollsTimeUpdate);
+		media.removeEventListener('play', player.markersRollsPlay);
+	}
+});
+
+},{}]},{},[1]);

main/inc/lib/javascript/mediaelement/plugins/markersrolls/markersrolls.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 l(s,n,i){function d(r,e){if(!n[r]){if(!s[r]){var t="function"==typeof require&&require;if(!e&&t)return t(r,!0);if(m)return m(r,!0);var a=new Error("Cannot find module '"+r+"'");throw a.code="MODULE_NOT_FOUND",a}var o=n[r]={exports:{}};s[r][0].call(o.exports,function(e){return d(s[r][1][e]||e)},o,o.exports,l,s,n,i)}return n[r].exports}for(var m="function"==typeof require&&require,e=0;e<i.length;e++)d(i[e]);return d}({1:[function(e,r,t){"use strict";Object.assign(mejs.MepDefaults,{markersRollsColor:"#E9BC3D",markersRollsWidth:1,markersRolls:{}}),Object.assign(MediaElementPlayer.prototype,{buildmarkersrolls:function(e,r,t,n){var a=e.options,i=a.markersRollsColor,d=a.markersRollsWidth,m=a.markersRolls,u=a.classPrefix,p=r.querySelector("."+u+"time-total"),o=-1,l=-1,s=-1,c=!1,f=Object.keys(m).length;if(f){var y,k=((y=document.createElement("iframe")).frameBorder="0",y.className=u+"markersrolls-layer "+u+"overlay "+u+"layer",y.style.display="none",y.style.backgroundColor="#9F9F9F",y.style.border="0 none",y.style.boxShadow="#B0B0B0 0px 0px 20px -10px inset",y.style.paddingBottom="40px",y);t.appendChild(k),e.markersRollsLoadedMetadata=function(){v()},e.markersRollsTimeUpdate=function(){(o=Math.floor(n.currentTime))<l?o<s&&(s=-1):l=o,0!==f&&m[o]&&o!==s&&(s=o,n.pause(),k.src=m[o],k.style.display="block")},e.markersRollsPlay=function(){v(),k.style.display="none",k.src=""},n.addEventListener("loadedmetadata",e.markersRollsLoadedMetadata),n.addEventListener("timeupdate",e.markersRollsTimeUpdate),n.addEventListener("play",e.markersRollsPlay)}function v(){if(!c){var e=n.getDuration();if(e){for(var r in m)if(m.hasOwnProperty(r)&&!(e<=(r=parseInt(r))||r<0)){var t=(s=void 0,o=(a={markerPosition:r,duration:e}).markerPosition,l=a.duration,(s=document.createElement("span")).className=u+"time-marker",s.style.width=d+"px",s.style.left=100*o/l+"%",s.style.background=i,s);p.appendChild(t)}var a,o,l,s;c=!0}}}},cleanmarkersrolls:function(e,r,t,a){a.removeEventListener("loadedmetadata",e.markersRollsLoadedMetadata),a.removeEventListener("timeupdate",e.markersRollsTimeUpdate),a.removeEventListener("play",e.markersRollsPlay)}})},{}]},{},[1]);