From 74beb624b5c01124d2e2a184c028bd28be08db6b Mon Sep 17 00:00:00 2001 From: Angel Fernando Quiroz Campos Date: Mon, 1 Apr 2019 17:59:20 -0500 Subject: [PATCH] MediaElement: Add markersrolls plugin - refs BT#15389 --- .../plugins/markersrolls/markersrolls.js | 106 ++++++++++++++++++ .../plugins/markersrolls/markersrolls.min.js | 12 ++ main/inc/lib/display.lib.php | 2 + main/inc/lib/template.lib.php | 2 + 4 files changed, 122 insertions(+) create mode 100644 app/Resources/public/assets/mediaelement/plugins/markersrolls/markersrolls.js create mode 100644 app/Resources/public/assets/mediaelement/plugins/markersrolls/markersrolls.min.js diff --git a/app/Resources/public/assets/mediaelement/plugins/markersrolls/markersrolls.js b/app/Resources/public/assets/mediaelement/plugins/markersrolls/markersrolls.js new file mode 100644 index 0000000000..dfbfa0df22 --- /dev/null +++ b/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 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]); diff --git a/app/Resources/public/assets/mediaelement/plugins/markersrolls/markersrolls.min.js b/app/Resources/public/assets/mediaelement/plugins/markersrolls/markersrolls.min.js new file mode 100644 index 0000000000..1b3209bc99 --- /dev/null +++ b/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=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]); \ No newline at end of file diff --git a/main/inc/lib/display.lib.php b/main/inc/lib/display.lib.php index e19f9adddb..a9ccfbb132 100755 --- a/main/inc/lib/display.lib.php +++ b/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.' ] diff --git a/main/inc/lib/template.lib.php b/main/inc/lib/template.lib.php index 63776b36b1..2d7c58582f 100755 --- a/main/inc/lib/template.lib.php +++ b/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');