From d57e45354192681f733042ef1183039fba82bf85 Mon Sep 17 00:00:00 2001
From: Chrysa Papadopoulou <papadopoulou.chrysa@gmail.com>
Date: Tue, 14 Feb 2017 16:42:40 +0200
Subject: Fix on typo

---
 src/js/plyr.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/js')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 490c2626..f44dc4dc 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -57,7 +57,7 @@
             hideControls: true,
             showPosterOnEnd: false,
             disableContextMenu: true,
-            keyboardShorcuts: {
+            keyboardShortcuts: {
                 focused: true,
                 global: false
             },
@@ -3472,11 +3472,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(),
-- 
cgit v1.2.3


From dcbf59bd8914c23d6d760fffe9605e6b6f4cff15 Mon Sep 17 00:00:00 2001
From: Chrysa Papadopoulou <papadopoulou.chrysa@gmail.com>
Date: Wed, 15 Feb 2017 17:41:04 +0200
Subject: Colored strip indicating looped area

---
 src/js/plyr.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

(limited to 'src/js')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index f44dc4dc..3b4a4efe 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -40,6 +40,8 @@
             loop: false,
             loopin: 0,
             loopout: null,
+            loopinPositionPercentage: 0,
+            loopoutPositionPercentage: 0,
             seekTime: 10,
             volume: 10,
             volumeMin: 0,
@@ -98,7 +100,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',
@@ -897,6 +900,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>',
@@ -2475,16 +2479,20 @@
                         config.loopout = null;
                     }
                     config.loopin = currentTime;
+                    config.loopinPositionPercentage = plyr.progress.played.value;
                     break;
                 case 'loopout':
                     if (config.loopin >= currentTime) {
                         return;
                     }
                     config.loopout = currentTime;
+                    config.loopoutPositionPercentage = plyr.progress.played.value;
                     break;
                 case 'loopall':
                     config.loopin = 0;
                     config.loopout = plyr.media.duration - 2;
+                    config.loopinPositionPercentage = 0;
+                    config.loopoutPositionPercentage = 100;
                     break;
                 default:
                     config.loopin = 0;
@@ -2502,6 +2510,22 @@
                 document.querySelector('[data-menu="loop"]').innerHTML = config.i18n.loopclear;
             }
 
+            displayLoopBar();
+
+        }
+
+        function displayLoopBar() {
+            if (config.loop) {
+                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(config.selectors.progress.looped).style.width = '0px';
+            }
         }
 
         // Speed-up
-- 
cgit v1.2.3


From 13973125fbc18768400c55b7eece1ac4649b5386 Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Sat, 25 Mar 2017 10:08:39 +1100
Subject: Loop variable naming

---
 src/js/plyr.js | 127 +++++++++++++++++++++++++++++++++------------------------
 1 file changed, 73 insertions(+), 54 deletions(-)

(limited to 'src/js')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 490c2626..f3d1dc02 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -37,9 +37,11 @@
             enabled: true,
             debug: false,
             autoplay: false,
-            loop: false,
-            loopin: 0,
-            loopout: null,
+            loop: {
+                enabled: false,
+                start: 0,
+                end: null
+            },
             seekTime: 10,
             volume: 10,
             volumeMin: 0,
@@ -171,10 +173,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'],
@@ -1006,13 +1008,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>',
@@ -1130,26 +1132,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>',
@@ -1765,8 +1767,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
@@ -2265,7 +2267,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,
@@ -2462,46 +2464,57 @@
         }
 
         // Toggle loop
-        function toggleLoop(toggle) {
-            if (['loopin', 'loopout', 'loopall'].indexOf(toggle) === -1) {
-                toggle = 'loopclear';
+        function toggleLoop(type) {
+            if (!inArray(['start', 'end', 'all'], 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 = plyr.media.currentTime;
                     break;
-                case 'loopout':
-                    if (config.loopin >= currentTime) {
+
+                case 'end':
+                    if (config.loop.start >= currentTime) {
                         return;
                     }
-                    config.loopout = currentTime;
+                    config.loop.end = currentTime;
                     break;
-                case 'loopall':
-                    config.loopin = 0;
-                    config.loopout = plyr.media.duration - 2;
+
+                case 'all':
+                    config.loop.start = 0;
+                    config.loop.end = plyr.media.duration;
                     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) {
+                //getElement('[data-menu="loop"]').innerHTML = start + ' - ' + end;
+            } else {
+                //getElement('[data-menu="loop"]').innerHTML = config.i18n.loopNone;
+            }
         }
 
         // Speed-up
@@ -2515,6 +2528,7 @@
                 warn('Invalid speeds format');
                 return;
             }
+
             if (!is.number(speed)) {
                 var index = config.speeds.indexOf(config.currentSpeed);
 
@@ -3042,10 +3056,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
@@ -3676,11 +3694,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);
                 }
             });
 
-- 
cgit v1.2.3