MediaElement: Add markersrolls plugin - refs BT#15389

app/Resources/public/assets/mediaelement/plugins/markersrolls/markersrolls.js

@@ -0,0 +1,106 @@
+/*!
+ * 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 currentPosition = -1,
+		    lastPlayedPosition = -1,
+		    lastMarkerRollCallback = -1,
+		    markersCount = Object.keys(player.options.markersRolls).length;
+
+		if (!markersCount) {
+			return;
+		}
+
+		for (var i = 0, total = markersCount; i < total; ++i) {
+			var marker = document.createElement('span');
+
+			marker.className = this.options.classPrefix + 'time-marker';
+			controls.querySelector('.' + this.options.classPrefix + 'time-total').appendChild(marker);
+		}
+
+		var markersRollsLayer = document.createElement('iframe');
+		markersRollsLayer.frameBorder = '0';
+		markersRollsLayer.className = this.options.classPrefix + 'markersrolls-layer' + ' ' + (this.options.classPrefix + 'overlay') + ' ' + (this.options.classPrefix + 'layer');
+		markersRollsLayer.style.display = 'none';
+		markersRollsLayer.style.backgroundColor = '#FFF';
+
+		layers.appendChild(markersRollsLayer);
+
+		media.addEventListener('durationchange', function () {
+			player.setmarkersrolls(controls);
+		});
+		media.addEventListener('timeupdate', function () {
+			currentPosition = Math.floor(media.currentTime);
+
+			if (lastPlayedPosition > currentPosition) {
+				if (lastMarkerRollCallback > currentPosition) {
+					lastMarkerRollCallback = -1;
+				}
+			} else {
+				lastPlayedPosition = currentPosition;
+			}
+
+			if (0 === markersCount || !player.options.markersRolls[currentPosition] || currentPosition === lastMarkerRollCallback) {
+				return;
+			}
+
+			lastMarkerRollCallback = currentPosition;
+
+			media.pause();
+
+			markersRollsLayer.src = player.options.markersRolls[currentPosition];
+			markersRollsLayer.style.display = 'block';
+		}, false);
+		media.addEventListener('play', function () {
+			markersRollsLayer.style.display = 'none';
+			markersRollsLayer.src = '';
+		}, false);
+	},
+	setmarkersrolls: function setmarkersrolls(controls) {
+		var markersRolls = controls.querySelectorAll('.' + this.options.classPrefix + 'time-marker');
+
+		var i = 0;
+
+		for (var position in this.options.markersRolls) {
+			if (!this.options.markersRolls.hasOwnProperty(position)) {
+				continue;
+			}
+
+			position = parseInt(position);
+
+			if (position >= this.media.duration || position < 0) {
+				continue;
+			}
+
+			var left = 100 * position / this.media.duration,
+			    marker = markersRolls[i];
+
+			marker.style.width = this.options.markersRollsWidth + 'px';
+			marker.style.left = left + '%';
+			marker.style.background = this.options.markersRollsColor;
+
+			i++;
+		}
+	}
+});
+
+},{}]},{},[1]);

app/Resources/public/assets/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 i(n,a,l){function c(r,e){if(!a[r]){if(!n[r]){var s="function"==typeof require&&require;if(!e&&s)return s(r,!0);if(p)return p(r,!0);var t=new Error("Cannot find module '"+r+"'");throw t.code="MODULE_NOT_FOUND",t}var o=a[r]={exports:{}};n[r][0].call(o.exports,function(e){return c(n[r][1][e]||e)},o,o.exports,i,n,a,l)}return a[r].exports}for(var p="function"==typeof require&&require,e=0;e<l.length;e++)c(l[e]);return c}({1:[function(e,r,s){"use strict";Object.assign(mejs.MepDefaults,{markersRollsColor:"#E9BC3D",markersRollsWidth:1,markersRolls:{}}),Object.assign(MediaElementPlayer.prototype,{buildmarkersrolls:function(e,r,s,t){var o=-1,i=-1,n=-1,a=Object.keys(e.options.markersRolls).length;if(a){for(var l=0,c=a;l<c;++l){var p=document.createElement("span");p.className=this.options.classPrefix+"time-marker",r.querySelector("."+this.options.classPrefix+"time-total").appendChild(p)}var u=document.createElement("iframe");u.frameBorder="0",u.className=this.options.classPrefix+"markersrolls-layer "+this.options.classPrefix+"overlay "+this.options.classPrefix+"layer",u.style.display="none",u.style.backgroundColor="#FFF",s.appendChild(u),t.addEventListener("durationchange",function(){e.setmarkersrolls(r)}),t.addEventListener("timeupdate",function(){(o=Math.floor(t.currentTime))<i?o<n&&(n=-1):i=o,0!==a&&e.options.markersRolls[o]&&o!==n&&(n=o,t.pause(),u.src=e.options.markersRolls[o],u.style.display="block")},!1),t.addEventListener("play",function(){u.style.display="none",u.src=""},!1)}},setmarkersrolls:function(e){var r=e.querySelectorAll("."+this.options.classPrefix+"time-marker"),s=0;for(var t in this.options.markersRolls)if(this.options.markersRolls.hasOwnProperty(t)&&!((t=parseInt(t))>=this.media.duration||t<0)){var o=100*t/this.media.duration,i=r[s];i.style.width=this.options.markersRollsWidth+"px",i.style.left=o+"%",i.style.background=this.options.markersRollsColor,s++}}})},{}]},{},[1]);

main/inc/lib/display.lib.php

@@ -2813,6 +2813,7 @@ HTML;
             'volume',
             'fullscreen',
             'vrview',
+            'markersrolls',
         ];
         $features = api_get_configuration_value('video_features');
         $bowerJsFiles = [];
@@ -2874,6 +2875,7 @@ HTML;
                 {type: "stylesheet", id: "_media2", src: "'.$webPublicPath.'assets/mediaelement/build/mediaelementplayer.min.css"},                
                 {type: "stylesheet", id: "_media4", src: "'.$webPublicPath.'assets/mediaelement/plugins/vrview/vrview.css"},
                 {type: "script", id: "_media4", src: "'.$webPublicPath.'assets/mediaelement/plugins/vrview/vrview.js"},
+                {type: "script", id: "_media5", src: "'.$webPublicPath.'assets/mediaelement/plugins/markersrolls/markersrolls.js"},
                 '.$extraMediaFiles.'
                 '.$translateHtml.'
             ]

main/inc/lib/template.lib.php

@@ -597,6 +597,7 @@ class Template
             'volume',
             'fullscreen',
             'vrview',
+            'markersrolls',
         ];
 
         if (!empty($features) && isset($features['features'])) {
@@ -752,6 +753,7 @@ class Template
             "select2/dist/js/i18n/$isoCode.js",
             'mediaelement/plugins/vrview/vrview.js',
             'js-cookie/src/js.cookie.js',
+            'mediaelement/plugins/markersrolls/markersrolls.js',
         ];
 
         $features = api_get_configuration_value('video_features');