From 3e6ed7b69b6d19d7e217a721925586e6471b4c5e Mon Sep 17 00:00:00 2001
From: Sebastian Carlsson <hello@sebastiancarlsson.se>
Date: Thu, 17 Nov 2016 15:43:26 +0100
Subject: fixes bug where cleanUp would be called twice

---
 src/js/plyr.js | 100 +++++++++++++++++++++++++++++----------------------------
 1 file changed, 51 insertions(+), 49 deletions(-)

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 4c02b8fd..0570e35b 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -25,7 +25,7 @@
     'use strict';
 
     // Globals
-    var fullscreen, 
+    var fullscreen,
     scroll = { x: 0, y: 0 },
 
     // Default config
@@ -36,8 +36,8 @@
         loop:                   false,
         seekTime:               10,
         volume:                 10,
-        volumeMin:              0, 
-        volumeMax:              10, 
+        volumeMin:              0,
+        volumeMax:              10,
         volumeStep:             1,
         duration:               null,
         displayDuration:        true,
@@ -493,9 +493,9 @@
         }
 
         // Create and dispatch the event
-        var event = new CustomEvent(type, { 
+        var event = new CustomEvent(type, {
             bubbles:    bubbles,
-            detail:     properties 
+            detail:     properties
         });
 
         // Dispatch the event
@@ -568,7 +568,7 @@
     // Check variable types
     var _is = {
         object: function(input) {
-            return input !== null && typeof(input) === 'object'; 
+            return input !== null && typeof(input) === 'object';
         },
         array: function(input) {
             return input !== null && (typeof(input) === 'object' && input.constructor === Array);
@@ -713,7 +713,7 @@
         timers = {},
         api;
 
-        // Set media 
+        // Set media
         plyr.media = media;
         var original = media.cloneNode(true);
 
@@ -732,7 +732,7 @@
                 if (_is.string(config.logPrefix) && config.logPrefix.length) {
                     args.unshift(config.logPrefix);
                 }
-                
+
                 console[type].apply(console, args);
             }
         }
@@ -1037,7 +1037,7 @@
                                     var captions = [],
                                         caption,
                                         req = xhr.responseText;
-                                    
+
                                     //According to webvtt spec, line terminator consists of one of the following
                                     // CRLF (U+000D U+000A), LF (U+000A) or CR (U+000D)
                                     var lineSeparator = '\r\n';
@@ -1048,7 +1048,7 @@
                                             lineSeparator = '\n';
                                         }
                                     }
-                                    
+
                                     captions = req.split(lineSeparator+lineSeparator);
 
                                     for (var r = 0; r < captions.length; r++) {
@@ -1530,7 +1530,7 @@
                     mediaId = _parseVimeoId(plyr.embedId);
                     break;
 
-                default: 
+                default:
                     mediaId = plyr.embedId;
             }
 
@@ -1819,7 +1819,7 @@
                 plyr.embed.stop();
                 plyr.media.paused = true;
             };
-            
+
             plyr.media.paused = true;
             plyr.media.currentTime = 0;
 
@@ -1835,7 +1835,7 @@
 
             plyr.embed.getDuration().then(function(value) {
                 plyr.media.duration = value;
-                
+
                 // Trigger timeupdate
                 _triggerEvent(plyr.media, 'durationchange');
             });
@@ -1898,7 +1898,7 @@
             plyr.embed = window.SC.Widget(this);
 
             // Setup on ready
-            plyr.embed.bind(window.SC.Widget.Events.READY, function() {             
+            plyr.embed.bind(window.SC.Widget.Events.READY, function() {
                 // Create a faux HTML5 API using the Soundcloud API
                 plyr.media.play = function() {
                     plyr.embed.play();
@@ -2035,7 +2035,7 @@
                 targetTime = duration;
             }
 
-            // Update seek range and progress 
+            // Update seek range and progress
             _updateSeekDisplay(targetTime);
 
             // Set the current time
@@ -2126,7 +2126,7 @@
         function _toggleFullscreen(event) {
             // Check for native support
             var nativeSupport = fullscreen.supportsFullScreen;
-            
+
             if (nativeSupport) {
                 // If it's a fullscreen change event, update the UI
                 if (event && event.type === fullscreen.fullScreenEventName) {
@@ -2424,7 +2424,7 @@
             if (!plyr.supported.full) {
                 return;
             }
-            
+
             // Default to 0
             if (_is.undefined(value)) {
                 value = 0;
@@ -2516,7 +2516,7 @@
             _updateProgress(event);
         }
 
-        // Update seek range and progress 
+        // Update seek range and progress
         function _updateSeekDisplay(time) {
             // Default to 0
             if (!_is.number(time)) {
@@ -2526,7 +2526,7 @@
             var duration    = _getDuration(),
                 value       = _getPercentage(time, duration);
 
-            // Update progress 
+            // Update progress
             if (plyr.progress && plyr.progress.played) {
                 plyr.progress.played.value = value;
             }
@@ -2635,15 +2635,15 @@
                 }
             }
 
-            // If toggle is false or if we're playing (regardless of toggle), 
-            // then set the timer to hide the controls 
+            // If toggle is false or if we're playing (regardless of toggle),
+            // then set the timer to hide the controls
             if (!show || !plyr.media.paused) {
                 timers.hover = window.setTimeout(function() {
                     // If the mouse is over the controls (and not entering fullscreen), bail
                     if ((plyr.controls.pressed || plyr.controls.hover) && !isEnterFullscreen) {
                         return;
                     }
-                    
+
                     _toggleClass(plyr.container, config.classes.hideControls, true);
                 }, delay);
             }
@@ -2720,7 +2720,7 @@
                     _remove(plyr.videoContainer);
                 }
 
-                // Reset class name 
+                // Reset class name
                 if (plyr.container) {
                     plyr.container.removeAttribute('class');
                 }
@@ -2915,7 +2915,7 @@
                         count   = get().length;
 
                         // Only handle global key press if there's only one player
-                        // and the key is in the allowed keys 
+                        // and the key is in the allowed keys
                         // and if the focused element is not editable (e.g. text input)
                         // and any that accept key input http://webaim.org/techniques/keyboard/
                         if (count === 1 && _inArray(allowed, code) && (!_is.htmlElement(focused) || !_matches(focused, config.selectors.editable))) {
@@ -2949,7 +2949,7 @@
                         return;
                     }
 
-                    // Divide the max duration into 10th's and times by the number value 
+                    // Divide the max duration into 10th's and times by the number value
                     _seek((duration / 10) * (code - 48));
                 }
 
@@ -2967,18 +2967,18 @@
 
                     switch(code) {
                         // 0-9
-                        case 48: 
-                        case 49: 
-                        case 50: 
-                        case 51: 
-                        case 52: 
-                        case 53: 
-                        case 54: 
-                        case 55: 
+                        case 48:
+                        case 49:
+                        case 50:
+                        case 51:
+                        case 52:
+                        case 53:
+                        case 54:
+                        case 55:
                         case 56:
                         case 57: if (!held) { seekByKey(); } break;
                         // Space and K key
-                        case 32: 
+                        case 32:
                         case 75: if (!held) { _togglePlay(); } break;
                         // Arrow up
                         case 38: _increaseVolume(); break;
@@ -2996,7 +2996,7 @@
                         case 67: if (!held) { _toggleCaptions(); } break;
                     }
 
-                    // Escape is handle natively when in full screen 
+                    // Escape is handle natively when in full screen
                     // So we only need to worry about non native
                     if (!fullscreen.supportsFullScreen && plyr.isFullscreen && code === 27) {
                         _toggleFullscreen();
@@ -3075,12 +3075,12 @@
                 _on(plyr.container, 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen', _toggleControls);
 
                 // Watch for cursor over controls so they don't hide when trying to interact
-                _on(plyr.controls, 'mouseenter mouseleave', function(event) { 
+                _on(plyr.controls, 'mouseenter mouseleave', function(event) {
                     plyr.controls.hover = event.type === 'mouseenter';
                 });
 
                  // Watch for cursor over controls so they don't hide when trying to interact
-                _on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) { 
+                _on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) {
                     plyr.controls.pressed = _inArray(['mousedown', 'touchstart'], event.type);
                 });
 
@@ -3136,7 +3136,7 @@
                     if (plyr.type === 'video') {
                         _setCaption();
                     }
-                    
+
                     // Restart
                     _seek();
 
@@ -3238,7 +3238,7 @@
 
             // Type specific stuff
             switch (plyr.type) {
-                case 'youtube': 
+                case 'youtube':
                     // Clear timers
                     window.clearInterval(timers.buffering);
                     window.clearInterval(timers.playing);
@@ -3248,16 +3248,16 @@
 
                     // Clean up
                     cleanUp();
-                    
+
                     break;
 
                 case 'vimeo':
-                    // Destroy Vimeo API 
+                    // Destroy Vimeo API
                     // then clean up (wait, to prevent postmessage errors)
                     plyr.embed.unload().then(cleanUp);
 
                     // Vimeo does not always return
-                    window.setTimeout(cleanUp, 200);
+                    timers.cleanUp = window.setTimeout(cleanUp, 200);
 
                     break;
 
@@ -3273,6 +3273,8 @@
             }
 
             function cleanUp() {
+                clearTimeout(timers.cleanUp);
+
                 // Default to restore original element
                 if (!_is.boolean(restore)) {
                     restore = true;
@@ -3448,7 +3450,7 @@
             isMuted:            function() { return plyr.media.muted; },
             isReady:            function() { return _hasClass(plyr.container, config.classes.ready); },
             isLoading:          function() { return _hasClass(plyr.container, config.classes.loading); },
-            isPaused:           function() { return plyr.media.paused; }, 
+            isPaused:           function() { return plyr.media.paused; },
             on:                 function(event, callback) { _on(plyr.container, event, callback); return this; },
             play:               _play,
             pause:              _pause,
@@ -3473,7 +3475,7 @@
         // Everything done
         function _ready() {
             // Ready event at end of execution stack
-            window.setTimeout(function() { 
+            window.setTimeout(function() {
                 _triggerEvent(plyr.media, 'ready');
             }, 0);
 
@@ -3679,15 +3681,15 @@
             // Listen for events if debugging
             if (config.debug) {
                 var events = config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']);
-                
-                _on(instance.getContainer(), events.join(' '), function(event) { 
+
+                _on(instance.getContainer(), events.join(' '), function(event) {
                     console.log([config.logPrefix, 'event:', event.type].join(' '), event.detail.plyr);
                 });
             }
 
             // Callback
-            _event(instance.getContainer(), 'setup', true, { 
-                plyr: instance 
+            _event(instance.getContainer(), 'setup', true, {
+                plyr: instance
             });
 
             // Add to return array even if it's already setup
@@ -3718,7 +3720,7 @@
                 }
             });
 
-            return instances; 
+            return instances;
         }
 
         return [];
-- 
cgit v1.2.3


From a44c7ecc3a077b11fc586bba8aa2df25b01f209f Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Sun, 27 Nov 2016 20:15:15 +1100
Subject: Fix for iPad and YouTube issues

---
 src/js/plyr.js     | 133 +++++++++++++++++++++++++++++++----------------------
 src/less/plyr.less |  37 ++++++++-------
 src/scss/plyr.scss |  34 ++++++++------
 3 files changed, 117 insertions(+), 87 deletions(-)

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 4c02b8fd..d65c4f7a 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -25,7 +25,7 @@
     'use strict';
 
     // Globals
-    var fullscreen, 
+    var fullscreen,
     scroll = { x: 0, y: 0 },
 
     // Default config
@@ -36,8 +36,8 @@
         loop:                   false,
         seekTime:               10,
         volume:                 10,
-        volumeMin:              0, 
-        volumeMax:              10, 
+        volumeMin:              0,
+        volumeMax:              10,
         volumeStep:             1,
         duration:               null,
         displayDuration:        true,
@@ -257,6 +257,7 @@
             isChrome:   isChrome,
             isSafari:   isSafari,
             isIos:      /(iPad|iPhone|iPod)/g.test(navigator.platform),
+            isIphone:   /(iPhone|iPod)/g.test(navigator.userAgent),
             isTouch:    'ontouchstart' in document.documentElement
         };
     }
@@ -493,9 +494,9 @@
         }
 
         // Create and dispatch the event
-        var event = new CustomEvent(type, { 
+        var event = new CustomEvent(type, {
             bubbles:    bubbles,
-            detail:     properties 
+            detail:     properties
         });
 
         // Dispatch the event
@@ -568,7 +569,7 @@
     // Check variable types
     var _is = {
         object: function(input) {
-            return input !== null && typeof(input) === 'object'; 
+            return input !== null && typeof(input) === 'object';
         },
         array: function(input) {
             return input !== null && (typeof(input) === 'object' && input.constructor === Array);
@@ -713,7 +714,7 @@
         timers = {},
         api;
 
-        // Set media 
+        // Set media
         plyr.media = media;
         var original = media.cloneNode(true);
 
@@ -732,7 +733,7 @@
                 if (_is.string(config.logPrefix) && config.logPrefix.length) {
                     args.unshift(config.logPrefix);
                 }
-                
+
                 console[type].apply(console, args);
             }
         }
@@ -1037,7 +1038,7 @@
                                     var captions = [],
                                         caption,
                                         req = xhr.responseText;
-                                    
+
                                     //According to webvtt spec, line terminator consists of one of the following
                                     // CRLF (U+000D U+000A), LF (U+000A) or CR (U+000D)
                                     var lineSeparator = '\r\n';
@@ -1048,7 +1049,7 @@
                                             lineSeparator = '\n';
                                         }
                                     }
-                                    
+
                                     captions = req.split(lineSeparator+lineSeparator);
 
                                     for (var r = 0; r < captions.length; r++) {
@@ -1530,7 +1531,7 @@
                     mediaId = _parseVimeoId(plyr.embedId);
                     break;
 
-                default: 
+                default:
                     mediaId = plyr.embedId;
             }
 
@@ -1819,7 +1820,7 @@
                 plyr.embed.stop();
                 plyr.media.paused = true;
             };
-            
+
             plyr.media.paused = true;
             plyr.media.currentTime = 0;
 
@@ -1835,7 +1836,7 @@
 
             plyr.embed.getDuration().then(function(value) {
                 plyr.media.duration = value;
-                
+
                 // Trigger timeupdate
                 _triggerEvent(plyr.media, 'durationchange');
             });
@@ -1898,7 +1899,7 @@
             plyr.embed = window.SC.Widget(this);
 
             // Setup on ready
-            plyr.embed.bind(window.SC.Widget.Events.READY, function() {             
+            plyr.embed.bind(window.SC.Widget.Events.READY, function() {
                 // Create a faux HTML5 API using the Soundcloud API
                 plyr.media.play = function() {
                     plyr.embed.play();
@@ -2035,7 +2036,7 @@
                 targetTime = duration;
             }
 
-            // Update seek range and progress 
+            // Update seek range and progress
             _updateSeekDisplay(targetTime);
 
             // Set the current time
@@ -2126,7 +2127,7 @@
         function _toggleFullscreen(event) {
             // Check for native support
             var nativeSupport = fullscreen.supportsFullScreen;
-            
+
             if (nativeSupport) {
                 // If it's a fullscreen change event, update the UI
                 if (event && event.type === fullscreen.fullScreenEventName) {
@@ -2424,7 +2425,7 @@
             if (!plyr.supported.full) {
                 return;
             }
-            
+
             // Default to 0
             if (_is.undefined(value)) {
                 value = 0;
@@ -2516,7 +2517,7 @@
             _updateProgress(event);
         }
 
-        // Update seek range and progress 
+        // Update seek range and progress
         function _updateSeekDisplay(time) {
             // Default to 0
             if (!_is.number(time)) {
@@ -2526,7 +2527,7 @@
             var duration    = _getDuration(),
                 value       = _getPercentage(time, duration);
 
-            // Update progress 
+            // Update progress
             if (plyr.progress && plyr.progress.played) {
                 plyr.progress.played.value = value;
             }
@@ -2635,15 +2636,15 @@
                 }
             }
 
-            // If toggle is false or if we're playing (regardless of toggle), 
-            // then set the timer to hide the controls 
+            // If toggle is false or if we're playing (regardless of toggle),
+            // then set the timer to hide the controls
             if (!show || !plyr.media.paused) {
                 timers.hover = window.setTimeout(function() {
                     // If the mouse is over the controls (and not entering fullscreen), bail
                     if ((plyr.controls.pressed || plyr.controls.hover) && !isEnterFullscreen) {
                         return;
                     }
-                    
+
                     _toggleClass(plyr.container, config.classes.hideControls, true);
                 }, delay);
             }
@@ -2720,7 +2721,7 @@
                     _remove(plyr.videoContainer);
                 }
 
-                // Reset class name 
+                // Reset class name
                 if (plyr.container) {
                     plyr.container.removeAttribute('class');
                 }
@@ -2915,7 +2916,7 @@
                         count   = get().length;
 
                         // Only handle global key press if there's only one player
-                        // and the key is in the allowed keys 
+                        // and the key is in the allowed keys
                         // and if the focused element is not editable (e.g. text input)
                         // and any that accept key input http://webaim.org/techniques/keyboard/
                         if (count === 1 && _inArray(allowed, code) && (!_is.htmlElement(focused) || !_matches(focused, config.selectors.editable))) {
@@ -2949,7 +2950,7 @@
                         return;
                     }
 
-                    // Divide the max duration into 10th's and times by the number value 
+                    // Divide the max duration into 10th's and times by the number value
                     _seek((duration / 10) * (code - 48));
                 }
 
@@ -2967,18 +2968,18 @@
 
                     switch(code) {
                         // 0-9
-                        case 48: 
-                        case 49: 
-                        case 50: 
-                        case 51: 
-                        case 52: 
-                        case 53: 
-                        case 54: 
-                        case 55: 
+                        case 48:
+                        case 49:
+                        case 50:
+                        case 51:
+                        case 52:
+                        case 53:
+                        case 54:
+                        case 55:
                         case 56:
                         case 57: if (!held) { seekByKey(); } break;
                         // Space and K key
-                        case 32: 
+                        case 32:
                         case 75: if (!held) { _togglePlay(); } break;
                         // Arrow up
                         case 38: _increaseVolume(); break;
@@ -2996,7 +2997,7 @@
                         case 67: if (!held) { _toggleCaptions(); } break;
                     }
 
-                    // Escape is handle natively when in full screen 
+                    // Escape is handle natively when in full screen
                     // So we only need to worry about non native
                     if (!fullscreen.supportsFullScreen && plyr.isFullscreen && code === 27) {
                         _toggleFullscreen();
@@ -3075,12 +3076,12 @@
                 _on(plyr.container, 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen', _toggleControls);
 
                 // Watch for cursor over controls so they don't hide when trying to interact
-                _on(plyr.controls, 'mouseenter mouseleave', function(event) { 
+                _on(plyr.controls, 'mouseenter mouseleave', function(event) {
                     plyr.controls.hover = event.type === 'mouseenter';
                 });
 
                  // Watch for cursor over controls so they don't hide when trying to interact
-                _on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) { 
+                _on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) {
                     plyr.controls.pressed = _inArray(['mousedown', 'touchstart'], event.type);
                 });
 
@@ -3136,7 +3137,7 @@
                     if (plyr.type === 'video') {
                         _setCaption();
                     }
-                    
+
                     // Restart
                     _seek();
 
@@ -3238,7 +3239,7 @@
 
             // Type specific stuff
             switch (plyr.type) {
-                case 'youtube': 
+                case 'youtube':
                     // Clear timers
                     window.clearInterval(timers.buffering);
                     window.clearInterval(timers.playing);
@@ -3248,11 +3249,11 @@
 
                     // Clean up
                     cleanUp();
-                    
+
                     break;
 
                 case 'vimeo':
-                    // Destroy Vimeo API 
+                    // Destroy Vimeo API
                     // then clean up (wait, to prevent postmessage errors)
                     plyr.embed.unload().then(cleanUp);
 
@@ -3294,6 +3295,9 @@
                 // Replace the container with the original element provided
                 plyr.container.parentNode.replaceChild(original, plyr.container);
 
+                // Allow overflow (set on fullscreen)
+                document.body.style.overflow = '';
+
                 // Event
                 _triggerEvent(original, 'destroyed', true);
             }
@@ -3448,7 +3452,7 @@
             isMuted:            function() { return plyr.media.muted; },
             isReady:            function() { return _hasClass(plyr.container, config.classes.ready); },
             isLoading:          function() { return _hasClass(plyr.container, config.classes.loading); },
-            isPaused:           function() { return plyr.media.paused; }, 
+            isPaused:           function() { return plyr.media.paused; },
             on:                 function(event, callback) { _on(plyr.container, event, callback); return this; },
             play:               _play,
             pause:              _pause,
@@ -3473,7 +3477,7 @@
         // Everything done
         function _ready() {
             // Ready event at end of execution stack
-            window.setTimeout(function() { 
+            window.setTimeout(function() {
                 _triggerEvent(plyr.media, 'ready');
             }, 0);
 
@@ -3540,31 +3544,48 @@
         var browser     = _browserSniff(),
             isOldIE     = (browser.isIE && browser.version <= 9),
             isIos       = browser.isIos,
-            isIphone    = /iPhone|iPod/i.test(navigator.userAgent),
-            audio       = !!document.createElement('audio').canPlayType,
-            video       = !!document.createElement('video').canPlayType,
-            basic, full;
+            isIphone    = browser.isIphone,
+            audioSupport = !!document.createElement('audio').canPlayType,
+            videoSupport = !!document.createElement('video').canPlayType,
+            basic       = false,
+            full        = false;
 
         switch (type) {
             case 'video':
-                basic = video;
+                basic = videoSupport;
                 full  = (basic && (!isOldIE && !isIphone));
                 break;
 
             case 'audio':
-                basic = audio;
+                basic = audioSupport;
                 full  = (basic && !isOldIE);
                 break;
 
+            // Vimeo does not seem to be supported on iOS via API
+            // Issue raised https://github.com/vimeo/player.js/issues/87
             case 'vimeo':
+                basic = true;
+                full = (!isOldIE && !isIos);
+                break;
+
             case 'youtube':
+                basic = true;
+                full = (!isOldIE && !isIos);
+
+                // YouTube seems to work on iOS 10+ on iPad
+                if (isIos && !isIphone && browser.version >= 10) {
+                    full = true;
+                }
+
+                break;
+
             case 'soundcloud':
                 basic = true;
-                full  = (!isOldIE && !isIos);
+                full  = (!isOldIE && !isIphone);
                 break;
 
             default:
-                basic = (audio && video);
+                basic = (audioSupport && videoSupport);
                 full  = (basic && !isOldIE);
         }
 
@@ -3679,15 +3700,15 @@
             // Listen for events if debugging
             if (config.debug) {
                 var events = config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']);
-                
-                _on(instance.getContainer(), events.join(' '), function(event) { 
+
+                _on(instance.getContainer(), events.join(' '), function(event) {
                     console.log([config.logPrefix, 'event:', event.type].join(' '), event.detail.plyr);
                 });
             }
 
             // Callback
-            _event(instance.getContainer(), 'setup', true, { 
-                plyr: instance 
+            _event(instance.getContainer(), 'setup', true, {
+                plyr: instance
             });
 
             // Add to return array even if it's already setup
@@ -3718,7 +3739,7 @@
                 }
             });
 
-            return instances; 
+            return instances;
         }
 
         return [];
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 143e7f06..c9e3d7c3 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -61,14 +61,14 @@
         height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
         width: 100%;
         margin: 0;
-        padding: 0; 
+        padding: 0;
         vertical-align: middle;
-        
+
         appearance: none;
         cursor: pointer;
         border: none;
         background: transparent;
-        
+
         // WebKit
         &::-webkit-slider-runnable-track {
             .plyr-range-track();
@@ -86,7 +86,7 @@
         &::-moz-range-thumb {
             .plyr-range-thumb();
         }
-        
+
         // Microsoft
         &::-ms-track {
             height: @plyr-range-track-height;
@@ -104,7 +104,7 @@
         &::-ms-thumb {
             .plyr-range-thumb();
             // For some reason, Edge uses the -webkit margin above
-            margin-top: 0; 
+            margin-top: 0;
         }
         &::-ms-tooltip {
             display: none;
@@ -116,11 +116,11 @@
         }
         &::-moz-focus-outer {
             border: 0;
-        }        
+        }
         &.tab-focus:focus {
             outline-offset: 3px;
         }
-        
+
         // Pressed styles
         &:active {
             &::-webkit-slider-thumb {
@@ -179,9 +179,10 @@
 .plyr__video-embed {
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
-    overflow: hidden;
+    border-radius: inherit;
 
-    // Require z-index to force border-radius
+    // Require overflow and z-index to force border-radius
+    overflow: hidden;
     z-index: 0;
 
     iframe {
@@ -192,7 +193,6 @@
         height: 100%;
         border: 0;
         user-select: none;
-        z-index: 1;
     }
 
     // Vimeo hack
@@ -265,7 +265,7 @@
 // Playback controls
 .plyr__controls {
     display: flex;
-    align-items: center; 
+    align-items: center;
     line-height: 1;
     text-align: center;
 
@@ -329,7 +329,7 @@
         }
     }
 }
-// Hide controls 
+// Hide controls
 .plyr--hide-controls .plyr__controls {
     opacity: 0;
     pointer-events: none;
@@ -341,6 +341,7 @@
     left: 0;
     right: 0;
     bottom: 0;
+    z-index: 2;
     padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
     background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%));
     border-bottom-left-radius: inherit;
@@ -476,7 +477,7 @@
         height: 0;
         left: 50%;
         transform: translateX(-50%);
-    
+
         // The background triangle
         bottom: -@plyr-tooltip-arrow-size;
         border-right: @plyr-tooltip-arrow-size solid transparent;
@@ -624,16 +625,16 @@
     }
     &::-moz-progress-bar {
         transition: width .2s ease;
-    }    
+    }
     &::-ms-fill {
         transition: width .2s ease;
-    }            
+    }
 }
 .plyr--video .plyr__progress--buffer,
 .plyr--video .plyr__volume--display {
     background: @plyr-video-range-track-bg;
 }
-.plyr--video .plyr__progress--buffer { 
+.plyr--video .plyr__progress--buffer {
     color: @plyr-video-progress-buffered-bg;
 }
 .plyr--audio .plyr__progress--buffer,
@@ -740,6 +741,10 @@
         height: 100%;
         width: 100%;
     }
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
+    }
     .plyr__controls {
         position: absolute;
         bottom: 0;
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index 70518591..91a5d1b2 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -61,14 +61,14 @@
         height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale);
         width: 100%;
         margin: 0;
-        padding: 0; 
+        padding: 0;
         vertical-align: middle;
-        
+
         appearance: none;
         cursor: pointer;
         border: none;
         background: transparent;
-        
+
         // WebKit
         &::-webkit-slider-runnable-track {
             @include plyr-range-track();
@@ -86,7 +86,7 @@
         &::-moz-range-thumb {
             @include plyr-range-thumb();
         }
-        
+
         // Microsoft
         &::-ms-track {
             height: $plyr-range-track-height;
@@ -104,7 +104,7 @@
         &::-ms-thumb {
             @include plyr-range-thumb();
             // For some reason, Edge uses the -webkit margin above
-            margin-top: 0; 
+            margin-top: 0;
         }
         &::-ms-tooltip {
             display: none;
@@ -116,11 +116,11 @@
         }
         &::-moz-focus-outer {
             border: 0;
-        }        
+        }
         &.tab-focus:focus {
             outline-offset: 3px;
         }
-        
+
         // Pressed styles
         &:active {
             &::-webkit-slider-thumb {
@@ -178,10 +178,10 @@
 .plyr__video-embed {
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
-    overflow: hidden;
     border-radius: inherit;
 
-    // Require z-index to force border-radius
+    // Require overflow and z-index to force border-radius
+    overflow: hidden;
     z-index: 0;
 
     iframe {
@@ -264,7 +264,7 @@
 // Playback controls
 .plyr__controls {
     display: flex;
-    align-items: center; 
+    align-items: center;
     line-height: 1;
     text-align: center;
 
@@ -328,7 +328,7 @@
         }
     }
 }
-// Hide controls 
+// Hide controls
 .plyr--hide-controls .plyr__controls {
     opacity: 0;
     pointer-events: none;
@@ -475,7 +475,7 @@
         height: 0;
         left: 50%;
         transform: translateX(-50%);
-    
+
         // The background triangle
         bottom: -$plyr-tooltip-arrow-size;
         border-right: $plyr-tooltip-arrow-size solid transparent;
@@ -622,16 +622,16 @@
     }
     &::-moz-progress-bar {
         transition: width .2s ease;
-    }    
+    }
     &::-ms-fill {
         transition: width .2s ease;
-    }            
+    }
 }
 .plyr--video .plyr__progress--buffer,
 .plyr--video .plyr__volume--display {
     background: $plyr-video-range-track-bg;
 }
-.plyr--video .plyr__progress--buffer { 
+.plyr--video .plyr__progress--buffer {
     color: $plyr-video-progress-buffered-bg;
 }
 .plyr--audio .plyr__progress--buffer,
@@ -738,6 +738,10 @@
         height: 100%;
         width: 100%;
     }
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
+    }
     .plyr__controls {
         position: absolute;
         bottom: 0;
-- 
cgit v1.2.3


From a9bb8afca425188216c3eed667b4bc85bbb5ee91 Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Sun, 27 Nov 2016 20:18:30 +1100
Subject: v2.0.11

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

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 8a486d93..f1a0b192 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v2.0.10
+// plyr.js v2.0.11
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -43,7 +43,7 @@
         displayDuration:        true,
         loadSprite:             true,
         iconPrefix:             'plyr',
-        iconUrl:                'https://cdn.plyr.io/2.0.10/plyr.svg',
+        iconUrl:                'https://cdn.plyr.io/2.0.11/plyr.svg',
         clickToPlay:            true,
         hideControls:           true,
         showPosterOnEnd:        false,
-- 
cgit v1.2.3


From a1d5bccac23668e2c380982d5fe182138fb1edc4 Mon Sep 17 00:00:00 2001
From: Morten Vestergaard Hansen <movh@tv2.dk>
Date: Wed, 30 Nov 2016 08:54:24 +0100
Subject: Fixed typo

---
 src/js/plyr.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index f1a0b192..1119700c 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1490,7 +1490,7 @@
                 _toggleClass(plyr.container, config.classes.stopped, config.autoplay);
 
                 // Add iOS class
-                _toggleClass(plyr.ontainer, config.classes.isIos, plyr.browser.isIos);
+                _toggleClass(plyr.container, config.classes.isIos, plyr.browser.isIos);
 
                 // Add touch class
                 _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch);
-- 
cgit v1.2.3


From 96ae866baa3afbe0366f4037ac8f2afee864f8ab Mon Sep 17 00:00:00 2001
From: Jason Ronallo <jronallo@gmail.com>
Date: Mon, 26 Dec 2016 17:06:59 -0500
Subject: allow for setting additional listener for captions

---
 src/js/plyr.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index f1a0b192..fb75c9a7 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -3065,7 +3065,7 @@
             }
 
             // Captions
-            _on(plyr.buttons.captions, 'click', _toggleCaptions);
+            _proxyListener(plyr.buttons.captions, 'click', config.listeners.captions, _toggleCaptions);
 
             // Seek tooltip
             _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
-- 
cgit v1.2.3


From 7d5c507f16733a1789e540dcab612226e5bf1d32 Mon Sep 17 00:00:00 2001
From: Samuel Hodge <samuel.hodge@live.com>
Date: Sat, 11 Feb 2017 23:50:49 -0500
Subject: Allow configuration of the blank.mp4 URL

This is useful for people behind firewalls who need to host a blank mp4 themselves.
---
 src/js/plyr.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 1119700c..da4230de 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -44,6 +44,7 @@
         loadSprite:             true,
         iconPrefix:             'plyr',
         iconUrl:                'https://cdn.plyr.io/2.0.11/plyr.svg',
+        blankUrl:               'https://cdn.selz.com/plyr/blank.mp4',
         clickToPlay:            true,
         hideControls:           true,
         showPosterOnEnd:        false,
@@ -3217,7 +3218,7 @@
             // Set blank video src attribute
             // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
             // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
-            plyr.media.setAttribute('src', 'https://cdn.selz.com/plyr/blank.mp4');
+            plyr.media.setAttribute('src', config.blankUrl);
 
             // Load the new empty source
             // This will cancel existing requests
-- 
cgit v1.2.3


From 1fd742464d258ce75ffc02ee526952c543884ebd Mon Sep 17 00:00:00 2001
From: Chrysa Papadopoulou <papadopoulou.chrysa@gmail.com>
Date: Tue, 14 Feb 2017 16:04:58 +0200
Subject: Added key bindings for loop

---
 src/js/plyr.js | 42 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 490c2626..4f158f04 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -40,6 +40,11 @@
             loop: false,
             loopin: 0,
             loopout: null,
+            loopKeyEvents: {
+                toggleLoop:  76,
+                loopin:      73,
+                loopout:     79
+            },
             seekTime: 10,
             volume: 10,
             volumeMin: 0,
@@ -2463,7 +2468,7 @@
 
         // Toggle loop
         function toggleLoop(toggle) {
-            if (['loopin', 'loopout', 'loopall'].indexOf(toggle) === -1) {
+            if (['loopin', 'loopout', 'loopall', 'toggle'].indexOf(toggle) === -1) {
                 toggle = 'loopclear';
             }
 
@@ -2486,6 +2491,15 @@
                     config.loopin = 0;
                     config.loopout = plyr.media.duration - 2;
                     break;
+                case 'toggle':
+                    if (config.loop) {
+                      config.loopin = 0;
+                      config.loopout = null;
+                    } else {
+                      config.loopin = 0;
+                      config.loopout = plyr.media.duration - 2;
+                    }
+                    break;
                 default:
                     config.loopin = 0;
                     config.loopout = null;
@@ -3528,8 +3542,9 @@
                     // Which keycodes should we prevent default
                     var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67];
                     var checkFocus = [38, 40];
+                    var loopKeyEventsValues = Object.values(config.loopKeyEvents);
 
-                    if (inArray(checkFocus, code)) {
+                    if (inArray(checkFocus, code) || inArray(loopKeyEventsValues, code)) {
                         var focused = getFocusElement();
 
                         if (is.htmlElement(focused) && getFocusElement().type === "radio") {
@@ -3608,6 +3623,29 @@
                             break;
                     }
 
+                    //Loop events
+                    var loopKeyBindings = config.loopKeyEvents;
+                    var hasBindedKey = loopKeyEventsValues.filter(function(el) {
+                        return preventDefault.indexOf(el) > -1;
+                      }).length >= 1;
+
+                    if (hasBindedKey) {
+                        loopKeyBindings = defaults.loopKeyEvents;
+                    }
+                    console.log(loopKeyBindings,'~~~loopKeyBindings')
+
+                    switch (code) {
+                        case loopKeyBindings.toggleLoop:
+                          toggleLoop('toggle');
+                          break;
+                        case loopKeyBindings.loopin:
+                          toggleLoop('loopin');
+                          break;
+                        case loopKeyBindings.loopout:
+                          toggleLoop('loopout');
+                          break;
+                    }
+
                     // Escape is handle natively when in full screen
                     // So we only need to worry about non native
                     if (!support.fullscreen && plyr.isFullscreen && code === 27) {
-- 
cgit v1.2.3


From 3f45ef4908e560a130f0d3bffbddf216d89423fe Mon Sep 17 00:00:00 2001
From: Chrysa Papadopoulou <papadopoulou.chrysa@gmail.com>
Date: Tue, 14 Feb 2017 16:29:05 +0200
Subject: Removed console

---
 src/js/plyr.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 4f158f04..d2973952 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -3632,7 +3632,6 @@
                     if (hasBindedKey) {
                         loopKeyBindings = defaults.loopKeyEvents;
                     }
-                    console.log(loopKeyBindings,'~~~loopKeyBindings')
 
                     switch (code) {
                         case loopKeyBindings.toggleLoop:
-- 
cgit v1.2.3


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')

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 21d478d39602408aeb968c4e263d8e9bc712757e Mon Sep 17 00:00:00 2001
From: Chrysa Papadopoulou <papadopoulou.chrysa@gmail.com>
Date: Tue, 14 Feb 2017 17:15:27 +0200
Subject: Add looping key bindings to allowed array

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

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index d2973952..6043eef6 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -3497,6 +3497,9 @@
                             allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67],
                             count = get().length;
 
+                        //add also to allowed the keys of looping events
+                        allowed = allowed.concat(Object.values(config.loopKeyEvents));
+
                         // Only handle global key press if there's only one player
                         // and the key is in the allowed keys
                         // and if the focused element is not editable (e.g. text input)
-- 
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')

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')

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


From bc323e905cb8380016334b466965e444bf6699e9 Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Sat, 25 Mar 2017 10:27:03 +1100
Subject: Manual merge of #543 PR

---
 src/less/plyr.less |  6 ++----
 src/scss/plyr.scss | 37 ++++++++++++++++++-------------------
 2 files changed, 20 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/less/plyr.less b/src/less/plyr.less
index 9e1dee8d..b85a5221 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -291,16 +291,14 @@
     .plyr__menu {
         margin-left: (@plyr-control-spacing / 2);
 
-        &:first-child {
+        &:first-child,
+        &:first-child + [data-plyr="pause"] {
             margin-left: 0;
         }
     }
     .plyr__volume {
         margin-left: (@plyr-control-spacing / 2);
     }
-    [data-plyr="pause"] {
-        margin-left: 0;
-    }
 
     @media (min-width: @plyr-bp-screen-sm) {
         > .plyr__control,
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index 639caaf1..60d2e2fe 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -61,14 +61,14 @@
         height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale);
         width: 100%;
         margin: 0;
-        padding: 0; 
+        padding: 0;
         vertical-align: middle;
-        
+
         appearance: none;
         cursor: pointer;
         border: none;
         background: transparent;
-        
+
         // WebKit
         &::-webkit-slider-runnable-track {
             @include plyr-range-track();
@@ -86,7 +86,7 @@
         &::-moz-range-thumb {
             @include plyr-range-thumb();
         }
-        
+
         // Microsoft
         &::-ms-track {
             height: $plyr-range-track-height;
@@ -104,7 +104,7 @@
         &::-ms-thumb {
             @include plyr-range-thumb();
             // For some reason, Edge uses the -webkit margin above
-            margin-top: 0; 
+            margin-top: 0;
         }
         &::-ms-tooltip {
             display: none;
@@ -116,11 +116,11 @@
         }
         &::-moz-focus-outer {
             border: 0;
-        }        
+        }
         &.tab-focus:focus {
             outline-offset: 3px;
         }
-        
+
         // Pressed styles
         &:active {
             &::-webkit-slider-thumb {
@@ -264,26 +264,25 @@
 // Playback controls
 .plyr__controls {
     display: flex;
-    align-items: center; 
+    align-items: center;
     line-height: 1;
     text-align: center;
 
     // Spacing
-    > button,
+    > .plyr__control,
     .plyr__progress,
-    .plyr__time {
+    .plyr__time,
+    .plyr__menu {
         margin-left: ($plyr-control-spacing / 2);
 
-        &:first-child {
+        &:first-child,
+        &:first-child + [data-plyr="pause"] {
             margin-left: 0;
         }
     }
     .plyr__volume {
         margin-left: ($plyr-control-spacing / 2);
     }
-    [data-plyr="pause"] {
-        margin-left: 0;
-    }
 
     // Buttons
     button {
@@ -328,7 +327,7 @@
         }
     }
 }
-// Hide controls 
+// Hide controls
 .plyr--hide-controls .plyr__controls {
     opacity: 0;
     pointer-events: none;
@@ -475,7 +474,7 @@
         height: 0;
         left: 50%;
         transform: translateX(-50%);
-    
+
         // The background triangle
         bottom: -$plyr-tooltip-arrow-size;
         border-right: $plyr-tooltip-arrow-size solid transparent;
@@ -624,16 +623,16 @@
     }
     &::-moz-progress-bar {
         transition: width .2s ease;
-    }    
+    }
     &::-ms-fill {
         transition: width .2s ease;
-    }            
+    }
 }
 .plyr--video .plyr__progress--buffer,
 .plyr--video .plyr__volume--display {
     background: $plyr-video-range-track-bg;
 }
-.plyr--video .plyr__progress--buffer { 
+.plyr--video .plyr__progress--buffer {
     color: $plyr-video-progress-buffered-bg;
 }
 .plyr--audio .plyr__progress--buffer,
-- 
cgit v1.2.3


From 1a05f352c71e52b98ff4c0753c35bb51a6bf10f0 Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Sat, 25 Mar 2017 10:37:00 +1100
Subject: Code formatting

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

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index b5fcb18f..5f5e8404 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -3515,10 +3515,10 @@
                 // Handle global presses
                 if (config.keyboardShortcuts.global) {
                     on(window, 'keydown keyup', function(event) {
-                        var code = getKeyCode(event),
-                            focused = getFocusElement(),
-                            allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67],
-                            count = get().length;
+                        var code = getKeyCode(event);
+                        var focused = getFocusElement();
+                        var allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67];
+                        var count = get().length;
 
                         // Only handle global key press if there's only one player
                         // and the key is in the allowed keys
@@ -3535,9 +3535,9 @@
             }
 
             function handleKey(event) {
-                var code = getKeyCode(event),
-                    pressed = event.type === 'keydown',
-                    held = pressed && code === last;
+                var code = getKeyCode(event);
+                var pressed = event.type === 'keydown';
+                var held = pressed && code === last;
 
                 // If the event is bubbled from the media element
                 // Firefox doesn't get the keycode for whatever reason
@@ -3618,7 +3618,7 @@
                         case 77:
                             // M key
                             if (!held) {
-                                toggleMute()
+                                toggleMute();
                             }
                             break;
 
-- 
cgit v1.2.3


From a60868bfe8f358c7dee76159824a538915be0a81 Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Sat, 25 Mar 2017 10:47:37 +1100
Subject: Clean up

---
 src/js/plyr.js | 90 +++++++++++++++++++++++++---------------------------------
 1 file changed, 39 insertions(+), 51 deletions(-)

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 847f1a72..2c85af51 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -38,10 +38,10 @@
             debug: false,
             autoplay: false,
             loop: {
-                enabled: false,
+                active: false,
                 start: 0,
                 end: null,
-                inidicator: {
+                indicator: {
                     start: 0,
                     end: 0
                 }
@@ -2273,7 +2273,7 @@
             // https://github.com/vimeo/player.js
             plyr.embed = new window.Vimeo.Player(container, {
                 id: parseInt(mediaId),
-                loop: config.loop.enabled,
+                loop: config.loop.active,
                 autoplay: config.autoplay,
                 byline: false,
                 portrait: false,
@@ -2470,9 +2470,11 @@
         }
 
         // Toggle loop
+        // TODO: Set the indicator on load as user may pass loop as config
         function toggleLoop(type) {
-            if (!inArray(['start', 'end', 'all', 'toggle'], type)) {
-                type = 'none';
+            // Set default to be a true toggle
+            if (!inArray(['start', 'end', 'all', 'none', 'toggle'], type)) {
+                type = 'toggle';
             }
 
             var currentTime = Number(plyr.media.currentTime);
@@ -2502,15 +2504,15 @@
                     break;
 
                 case 'toggle':
-                    if (config.loop) {
-                      config.loop.start = 0;
-                      config.loop.end = null;
+                    if (config.loop.active) {
+                        config.loop.start = 0;
+                        config.loop.end = null;
                     } else {
-                      config.loop.start = 0;
-                      config.loop.end = plyr.media.duration - 2;
+                        config.loop.start = 0;
+                        config.loop.end = plyr.media.duration - 2;
                     }
                     break;
-                
+
                 default:
                     config.loop.start = 0;
                     config.loop.end = null;
@@ -2518,7 +2520,7 @@
             }
 
             // Check if can loop
-            config.loop = is.number(config.loop.start) && is.number(config.loop.end);
+            config.loop.active = is.number(config.loop.start) && is.number(config.loop.end);
             var start = updateTimeDisplay(config.loop.start, getElement('[data-plyr-loop="start"]'));
             var end = null;
 
@@ -2530,19 +2532,19 @@
                 //end = document.querySelector('[data-loop__value="loopout"]').innerHTML = '';
             }
 
-            if (config.loop) {
+            if (config.loop.active) {
                 // 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';
+                //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';
+                //getElement(config.selectors.progress.looped).style.width = '0px';
             }
         }
 
@@ -3022,8 +3024,8 @@
                 }
             }
 
-            if (is.number(config.loopin) && is.number(config.loopout) && plyr.media.currentTime >= config.loopout) {
-                seek(config.loopin);
+            if (is.number(config.loop.start) && is.number(config.loop.end) && plyr.media.currentTime >= config.loop.end) {
+                seek(config.loop.start);
             }
 
             setProgress(progress, value);
@@ -3395,7 +3397,7 @@
                     if ('poster' in source) {
                         plyr.media.setAttribute('poster', source.poster);
                     }
-                    if (config.loop) {
+                    if (config.loop.active) {
                         plyr.media.setAttribute('loop', '');
                     }
                 }
@@ -3527,12 +3529,9 @@
                     on(window, 'keydown keyup', function(event) {
                         var code = getKeyCode(event);
                         var focused = getFocusElement();
-                        var allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67];
+                        var allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67, 73, 76, 79];
                         var count = get().length;
 
-                        //add also to allowed the keys of looping events
-                        allowed = allowed.concat(Object.values(config.loopKeyEvents));
-
                         // Only handle global key press if there's only one player
                         // and the key is in the allowed keys
                         // and if the focused element is not editable (e.g. text input)
@@ -3576,11 +3575,10 @@
                 // Reset on keyup
                 if (pressed) {
                     // Which keycodes should we prevent default
-                    var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67];
+                    var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67, 73, 76, 79];
                     var checkFocus = [38, 40];
-                    var loopKeyEventsValues = Object.values(config.loopKeyEvents);
 
-                    if (inArray(checkFocus, code) || inArray(loopKeyEventsValues, code)) {
+                    if (inArray(checkFocus, code)) {
                         var focused = getFocusElement();
 
                         if (is.htmlElement(focused) && getFocusElement().type === "radio") {
@@ -3657,28 +3655,18 @@
                                 toggleCaptions();
                             }
                             break;
-                    }
 
-                    //Loop events
-                    var loopKeyBindings = config.loopKeyEvents;
-                    var hasBindedKey = loopKeyEventsValues.filter(function(el) {
-                        return preventDefault.indexOf(el) > -1;
-                      }).length >= 1;
+                        case 73:
+                            toggleLoop('start');
+                            break;
 
-                    if (hasBindedKey) {
-                        loopKeyBindings = defaults.loopKeyEvents;
-                    }
+                        case 76:
+                            toggleLoop();
+                            break;
 
-                    switch (code) {
-                        case loopKeyBindings.toggleLoop:
-                          toggleLoop('toggle');
-                          break;
-                        case loopKeyBindings.loopin:
-                          toggleLoop('loopin');
-                          break;
-                        case loopKeyBindings.loopout:
-                          toggleLoop('loopout');
-                          break;
+                        case 79:
+                            toggleLoop('end');
+                            break;
                     }
 
                     // Escape is handle natively when in full screen
@@ -4246,7 +4234,7 @@
                 return plyr.media.paused;
             },
             isLooping: function() {
-                return config.loopin && config.loopout;
+                return config.loop.active;
             },
             on: function(event, callback) {
                 on(plyr.container, event, callback);
-- 
cgit v1.2.3


From ebc7ed538a292211cf45cc6b638e9527170d0f06 Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Sat, 25 Mar 2017 10:49:04 +1100
Subject: Manual merge of #509

---
 src/less/plyr.less | 2 ++
 src/scss/plyr.scss | 2 ++
 2 files changed, 4 insertions(+)

(limited to 'src')

diff --git a/src/less/plyr.less b/src/less/plyr.less
index b85a5221..16bfbf14 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -341,6 +341,7 @@
         height: @plyr-control-icon-size;
         display: block;
         fill: currentColor;
+        pointer-events: none;
     }
     // Hide toggle icons by default
     .icon--exit-fullscreen,
@@ -421,6 +422,7 @@
         height: 20px;
         display: block;
         fill: currentColor;
+        pointer-events: none;
     }
 
     &:focus {
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index 60d2e2fe..08f41920 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -304,6 +304,7 @@
             height: $plyr-control-icon-size;
             display: block;
             fill: currentColor;
+            pointer-events: none;
         }
 
         // Default focus
@@ -397,6 +398,7 @@
         height: 20px;
         display: block;
         fill: currentColor;
+        pointer-events: none;
     }
 
     &:focus {
-- 
cgit v1.2.3


From 4957e4d80c833bbfa915c0c20d3d79245221b6f6 Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Sat, 25 Mar 2017 10:58:41 +1100
Subject: Version bump to 2.0.12

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

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 815a4c01..d86a2ecb 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v2.0.11
+// plyr.js v2.0.12
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -43,7 +43,7 @@
         displayDuration:        true,
         loadSprite:             true,
         iconPrefix:             'plyr',
-        iconUrl:                'https://cdn.plyr.io/2.0.11/plyr.svg',
+        iconUrl:                'https://cdn.plyr.io/2.0.12/plyr.svg',
         blankUrl:               'https://cdn.selz.com/plyr/blank.mp4',
         clickToPlay:            true,
         hideControls:           true,
-- 
cgit v1.2.3