Merge branch 'develop' into feature/loop-events

1 files changed, 100 insertions, 66 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 6043eef6..6d3ea417 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -37,13 +37,14 @@
             enabled: true,
             debug: false,
             autoplay: false,
-            loop: false,
-            loopin: 0,
-            loopout: null,
-            loopKeyEvents: {
-                toggleLoop:  76,
-                loopin:      73,
-                loopout:     79
+            loop: {
+                enabled: false,
+                start: 0,
+                end: null,
+                inidicator: {
+                    start: 0,
+                    end: 0
+                }
             },
             seekTime: 10,
             volume: 10,
@@ -62,7 +63,7 @@
             hideControls: true,
             showPosterOnEnd: false,
             disableContextMenu: true,
-            keyboardShorcuts: {
+            keyboardShortcuts: {
                 focused: true,
                 global: false
             },
@@ -103,7 +104,8 @@
                 progress: {
                     container: '.plyr__progress',
                     buffer: '.plyr__progress--buffer',
-                    played: '.plyr__progress--played'
+                    played: '.plyr__progress--played',
+                    looped: '.plyr__progress-loop'
                 },
                 captions: '.plyr__captions',
                 currentTime: '.plyr__time--current',
@@ -176,10 +178,10 @@
                 speed: 'Speed',
                 quality: 'Quality',
                 loop: 'Loop',
-                loopin: 'Loop in',
-                loopout: 'Loop out',
-                loopall: 'Loop all',
-                loopclear: 'No Loop',
+                loopStart: 'Loop start',
+                loopEnd: 'Loop end',
+                loopAll: 'Loop all',
+                loopNone: 'No Loop',
             },
             types: {
                 embed: ['youtube', 'vimeo', 'soundcloud'],
@@ -902,6 +904,7 @@
                 /* beautify ignore:start */
                 html.push(
                     '<span class="plyr__progress">',
+                        '<div class="plyr__progress-loop"></div>',
                         '<label for="seek-{id}" class="plyr__sr-only">Seek</label>',
                         '<input id="seek-{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
                         '<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>',
@@ -1011,13 +1014,13 @@
                                         '<li role="tab">',
                                             '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">',
                                                 config.i18n.quality +
-                                                '<span class="plyr__menu__value">Auto</span>',
+                                                '<span class="plyr__menu__value">{quality}</span>',
                                             '</button>',
                                         '</li>',
                                         '<li role="tab">',
                                             '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-loop-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-loop" aria-expanded="false">',
-                                            config.i18n.loop +
-                                                '<span class="plyr__menu__value" data-menu="loop"></span>',
+                                                config.i18n.loop +
+                                                '<span class="plyr__menu__value" data-menu="loop">{loop}</span>',
                                             '</button>',
                                         '</li>',
                                     '</ul>',
@@ -1135,26 +1138,26 @@
                                             '</button>',
                                         '</li>',
                                         '<li>',
-                                            '<button type="button" class="plyr__control" data-plyr="loop" data-loop__type="loopall">',
-                                                config.i18n.loopall,
-                                                '<span data-loop__value="loopall"></span>',
+                                            '<button type="button" class="plyr__control" data-plyr="loop" data-plyr-loop="all">',
+                                                config.i18n.loopAll,
+                                                '<span></span>',
                                             '</button>',
                                         '</li>',
                                         '<li>',
-                                            '<button type="button" class="plyr__control" data-plyr="loop" data-loop__type="loopin">',
-                                                config.i18n.loopin + ':&nbsp;',
-                                                '<span data-loop__value="loopin"></span>',
+                                            '<button type="button" class="plyr__control" data-plyr="loop" data-plyr-loop="start">',
+                                                config.i18n.loopStart,
+                                                '<span></span>',
                                             '</button>',
                                         '</li>',
                                         '<li>',
-                                            '<button type="button" class="plyr__control" data-plyr="loop" data-loop__type="loopout">',
-                                                config.i18n.loopout + ':&nbsp;',
-                                                '<span data-loop__value="loopout"></span>',
+                                            '<button type="button" class="plyr__control" data-plyr="loop" data-plyr-loop="end">',
+                                                config.i18n.loopEnd,
+                                                '<span></span>',
                                             '</button>',
                                         '</li>',
                                         '<li>',
-                                            '<button type="button" class="plyr__control" data-plyr="loop" data-loop__type="loopclear">',
-                                                config.i18n.loopclear,
+                                            '<button type="button" class="plyr__control" data-plyr="loop" data-plyr-loop="none">',
+                                                config.i18n.loopNone,
                                             '</button>',
                                         '</li>',
                                     '</ul>',
@@ -1770,8 +1773,8 @@
                     fullscreen: getElement(config.selectors.buttons.fullscreen),
                     settings: getElement(config.selectors.buttons.settings),
                     pip: getElement(config.selectors.buttons.pip),
-                    speed: document.querySelectorAll(config.selectors.buttons.speed),
-                    loop: document.querySelectorAll(config.selectors.buttons.loop)
+                    speed: getElement(config.selectors.buttons.speed),
+                    loop: getElement(config.selectors.buttons.loop)
                 };
 
                 // Inputs
@@ -2270,7 +2273,7 @@
             // https://github.com/vimeo/player.js
             plyr.embed = new window.Vimeo.Player(container, {
                 id: parseInt(mediaId),
-                loop: config.loop,
+                loop: config.loop.enabled,
                 autoplay: config.autoplay,
                 byline: false,
                 portrait: false,
@@ -2467,55 +2470,80 @@
         }
 
         // Toggle loop
-        function toggleLoop(toggle) {
-            if (['loopin', 'loopout', 'loopall', 'toggle'].indexOf(toggle) === -1) {
-                toggle = 'loopclear';
+        function toggleLoop(type) {
+            if (!inArray(['start', 'end', 'all', 'toggle'], type)) {
+                type = 'none';
             }
 
             var currentTime = Number(plyr.media.currentTime);
 
-            switch (toggle) {
-                case 'loopin':
-                    if (config.loopout && config.loopout <= currentTime) {
-                        config.loopout = null;
+            switch (type) {
+                case 'start':
+                    if (config.loop.end && config.loop.end <= currentTime) {
+                        config.loop.end = null;
                     }
-                    config.loopin = currentTime;
+                    config.loop.start = currentTime;
+                    config.loop.indicator.start = plyr.progress.played.value;
                     break;
-                case 'loopout':
-                    if (config.loopin >= currentTime) {
+
+                case 'end':
+                    if (config.loop.start >= currentTime) {
                         return;
                     }
-                    config.loopout = currentTime;
+                    config.loop.end = currentTime;
+                    config.loop.indicator.end = plyr.progress.played.value;
                     break;
-                case 'loopall':
-                    config.loopin = 0;
-                    config.loopout = plyr.media.duration - 2;
+
+                case 'all':
+                    config.loop.start = 0;
+                    config.loop.end = plyr.media.duration - 2;
+                    config.loop.indicator.start = 0;
+                    config.loop.indicator.end = 100;
                     break;
+
                 case 'toggle':
                     if (config.loop) {
-                      config.loopin = 0;
-                      config.loopout = null;
+                      config.loop.start = 0;
+                      config.loop.end = null;
                     } else {
-                      config.loopin = 0;
-                      config.loopout = plyr.media.duration - 2;
+                      config.loop.start = 0;
+                      config.loop.end = plyr.media.duration - 2;
                     }
                     break;
+                
                 default:
-                    config.loopin = 0;
-                    config.loopout = null;
+                    config.loop.start = 0;
+                    config.loop.end = null;
                     break;
             }
 
-            //check if can loop
-            config.loop = is.number(config.loopin) && is.number(config.loopout);
-            var loopin = updateTimeDisplay(config.loopin, document.querySelector('[data-loop__value="loopin"]'));
-            var loopout = is.number(config.loopout) ? updateTimeDisplay(config.loopout + 2, document.querySelector('[data-loop__value="loopout"]')) : document.querySelector('[data-loop__value="loopout"]').innerHTML = '';
-            if (config.loop) {
-                document.querySelector('[data-menu="loop"]').innerHTML = loopin + ' - ' + loopout;
+            // Check if can loop
+            config.loop = is.number(config.loop.start) && is.number(config.loop.end);
+            var start = updateTimeDisplay(config.loop.start, getElement('[data-plyr-loop="start"]'));
+            var end = null;
+
+            if (is.number(config.loop.end)) {
+                // Find the <span> inside button
+                end = updateTimeDisplay(config.loop.end, document.querySelector('[data-loop__value="loopout"]'));
             } else {
-                document.querySelector('[data-menu="loop"]').innerHTML = config.i18n.loopclear;
+                // Find the <span> inside button
+                //end = document.querySelector('[data-loop__value="loopout"]').innerHTML = '';
             }
 
+            if (config.loop) {
+                // TODO: Improve the design of the loop indicator and put styling in CSS where it's meant to be
+                //getElement('[data-menu="loop"]').innerHTML = start + ' - ' + end;
+                getElement(config.selectors.progress.looped).style.position = 'absolute';
+                getElement(config.selectors.progress.looped).style.left = config.loopinPositionPercentage + '%';
+                getElement(config.selectors.progress.looped).style.width = (config.loopoutPositionPercentage - config.loopinPositionPercentage) + '%';
+                getElement(config.selectors.progress.looped).style.background = '#ffbb00';
+                getElement(config.selectors.progress.looped).style.height = '3px';
+                getElement(config.selectors.progress.looped).style.top = '3px';
+                getElement(config.selectors.progress.looped).style['border-radius'] = '100px';
+            } else {
+                //getElement('[data-menu="loop"]').innerHTML = config.i18n.loopNone;
+                getElement(config.selectors.progress.looped).style.width = '0px';
+            }
         }
 
         // Speed-up
@@ -2529,6 +2557,7 @@
                 warn('Invalid speeds format');
                 return;
             }
+
             if (!is.number(speed)) {
                 var index = config.speeds.indexOf(config.currentSpeed);
 
@@ -3056,10 +3085,14 @@
             plyr.secs = ('0' + plyr.secs).slice(-2);
             plyr.mins = ('0' + plyr.mins).slice(-2);
 
-            var txt = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs;
+            // Generate display
+            var display = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs;
+
             // Render
-            element.innerHTML = txt;
-            return txt;
+            element.innerHTML = display;
+
+            // Return for looping
+            return display;
         }
 
         // Show the duration on metadataloaded
@@ -3486,11 +3519,11 @@
             }
 
             // Keyboard shortcuts
-            if (config.keyboardShorcuts.focused) {
+            if (config.keyboardShortcuts.focused) {
                 var last = null;
 
                 // Handle global presses
-                if (config.keyboardShorcuts.global) {
+                if (config.keyboardShortcuts.global) {
                     on(window, 'keydown keyup', function(event) {
                         var code = getKeyCode(event),
                             focused = getFocusElement(),
@@ -3716,11 +3749,12 @@
             // Fullscreen
             proxy(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, toggleFullscreen);
 
-            // Loop
+            // Looping
             proxy(plyr.buttons.loop, 'click', config.listeners.loop, function(event) {
-                var loopValue = event.target.getAttribute('data-loop__value') || event.target.getAttribute('data-loop__type');
-                if (['loopin', 'loopout', 'loopall', 'loopclear'].indexOf(loopValue) > -1) {
-                    toggleLoop(loopValue);
+                var value = event.target.getAttribute('data-loop__value') || event.target.getAttribute('data-loop__type');
+
+                if (inArray(['start', 'end', 'all', 'none'], value)) {
+                    toggleLoop(value);
                 }
             });