v3.4.4

-   Fixed issue with double binding for `click` and `touchstart` for `clickToPlay` option
-   Improved "faux" fullscreen on iPhone X/XS phones with notch
-   Babel 7 upgrade (which reduced the polyfilled build by ~10kb!)

changelog.md

@@ -1,8 +1,31 @@
+# v3.4.4
+
+-   Fixed issue with double binding for `click` and `touchstart` for `clickToPlay` option
+-   Improved "faux" fullscreen on iPhone X/XS phones with notch
+-   Babel 7 upgrade (which reduced the polyfilled build by ~10kb!)
+
+# v3.4.3
+
+-   Fixed issue with nodeList for custom playback controls
+
+# v3.4.2
+
+-   Fix play/pause button state
+
+# v3.4.1
+
+-   Bug fix for custom controls (fixes #1161)
+
 # v3.4.0
 
 -   Accessibility improvements (see #905)
 -   Improvements to the way the controls work on iOS
 -   Demo code clean up
+-   YouTube quality selection removed due to their poor support for it. As a result, the `qualityrequested` event has been removed
+-   Controls spacing improvements
+-   Fix for pressed property missing with custom controls (Fixes #1062)
+-   Fix #1153: Captions language fallback (thanks @friday)
+-   Fix for setting pressed property of undefined (Fixes #1102)
 
 # v3.3.23
 

demo/dist/demo.js

@@ -1833,7 +1833,6 @@ typeof navigator === "object" && (function () {
 	  };
 	  this._fetchDefaults = {
 	    method: 'POST',
-	    keepalive: true,
 	    // Despite all stars in the sky saying that Edge supports old draft syntax, aka 'never', 'always', 'origin' and 'default
 	    // https://caniuse.com/#feat=referrer-policy
 	    // It doesn't. And it throw exception instead of ignoring this parameter...
@@ -1874,7 +1873,7 @@ typeof navigator === "object" && (function () {
 	  // webpack (using a build step causes webpack #1617). Grunt verifies that
 	  // this value matches package.json during build.
 	  //   See: https://github.com/getsentry/raven-js/issues/465
-	  VERSION: '3.26.4',
+	  VERSION: '3.27.0',
 
 	  debug: false,
 
@@ -2612,7 +2611,7 @@ typeof navigator === "object" && (function () {
 	    )
 	      return;
 
-	    options = Object.assign(
+	    options = objectMerge$1(
 	      {
 	        eventId: this.lastEventId(),
 	        dsn: this._dsn,
@@ -4094,12 +4093,10 @@ typeof navigator === "object" && (function () {
 
 	(function () {
 	  var host = window.location.host;
-
 	  var env = {
 	    prod: host === 'plyr.io',
 	    dev: host === 'dev.plyr.io'
 	  };
-
 	  document.addEventListener('DOMContentLoaded', function () {
 	    singleton.context(function () {
 	      var selector = '#player';
@@ -4111,39 +4108,37 @@ typeof navigator === "object" && (function () {
 	            classname: 'button__count'
 	          }
 	        });
-	            }
+	      } // Setup tab focus
 
-	            // Setup tab focus
-	            var tabClassName = 'tab-focus';
 
-	            // Remove class on blur
+	      var tabClassName = 'tab-focus'; // Remove class on blur
+
 	      document.addEventListener('focusout', function (event) {
-	                if (container.contains(event.target)) {
+	        if (!event.target.classList || container.contains(event.target)) {
 	          return;
 	        }
-	                event.target.classList.remove(tabClassName);
-	            });
 
-	            // Add classname to tabbed elements
+	        event.target.classList.remove(tabClassName);
+	      }); // Add classname to tabbed elements
+
 	      document.addEventListener('keydown', function (event) {
 	        if (event.keyCode !== 9) {
 	          return;
-	                }
-
-	                // Delay the adding of classname until the focus has changed
+	        } // Delay the adding of classname until the focus has changed
 	        // This event fires before the focusin event
+
+
 	        setTimeout(function () {
 	          var focused = document.activeElement;
 
-	                    if (!focused || container.contains(focused)) {
+	          if (!focused || !focused.classList || container.contains(focused)) {
 	            return;
 	          }
 
 	          focused.classList.add(tabClassName);
 	        }, 10);
-	            });
+	      }); // Setup the player
 
-	            // Setup the player
 	      var player = new Plyr(selector, {
 	        debug: true,
 	        title: 'View From A Blue Moon',
@@ -4164,12 +4159,10 @@ typeof navigator === "object" && (function () {
 	          enabled: env.prod || env.dev,
 	          publisherId: '918848828995742'
 	        }
-	            });
+	      }); // Expose for tinkering in the console
 
-	            // Expose for tinkering in the console
-	            window.player = player;
+	      window.player = player; // Setup type toggle
 
-	            // Setup type toggle
 	      var buttons = document.querySelectorAll('[data-source]');
 	      var types = {
 	        video: 'video',
@@ -4178,16 +4171,15 @@ typeof navigator === "object" && (function () {
 	        vimeo: 'vimeo'
 	      };
 	      var currentType = window.location.hash.replace('#', '');
-	            var historySupport = window.history && window.history.pushState;
+	      var historySupport = window.history && window.history.pushState; // Toggle class on an element
 
-	            // Toggle class on an element
 	      function toggleClass(element, className, state) {
 	        if (element) {
 	          element.classList[state ? 'add' : 'remove'](className);
 	        }
-	            }
+	      } // Set a new source
+
 
-	            // Set a new source
 	      function newSource(type, init) {
 	        // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
 	        if (!(type in types) || !init && type === currentType || !currentType.length && type === types.video) {
@@ -4230,7 +4222,6 @@ typeof navigator === "object" && (function () {
 	                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt'
 	              }]
 	            };
-
 	            break;
 
 	          case types.audio:
@@ -4245,7 +4236,6 @@ typeof navigator === "object" && (function () {
 	                type: 'audio/ogg'
 	              }]
 	            };
-
 	            break;
 
 	          case types.youtube:
@@ -4256,7 +4246,6 @@ typeof navigator === "object" && (function () {
 	                provider: 'youtube'
 	              }]
 	            };
-
 	            break;
 
 	          case types.vimeo:
@@ -4267,90 +4256,86 @@ typeof navigator === "object" && (function () {
 	                provider: 'vimeo'
 	              }]
 	            };
-
 	            break;
 
 	          default:
 	            break;
-	                }
+	        } // Set the current type for next time
 
-	                // Set the current type for next time
-	                currentType = type;
 
-	                // Remove active classes
+	        currentType = type; // Remove active classes
+
 	        Array.from(buttons).forEach(function (button) {
 	          return toggleClass(button.parentElement, 'active', false);
-	                });
+	        }); // Set active on parent
 
-	                // Set active on parent
-	                toggleClass(document.querySelector('[data-source="' + type + '"]'), 'active', true);
+	        toggleClass(document.querySelector("[data-source=\"".concat(type, "\"]")), 'active', true); // Show cite
 
-	                // Show cite
 	        Array.from(document.querySelectorAll('.plyr__cite')).forEach(function (cite) {
 	          cite.setAttribute('hidden', '');
 	        });
-	                document.querySelector('.plyr__cite--' + type).removeAttribute('hidden');
-	            }
+	        document.querySelector(".plyr__cite--".concat(type)).removeAttribute('hidden');
+	      } // Bind to each button
+
 
-	            // Bind to each button
 	      Array.from(buttons).forEach(function (button) {
 	        button.addEventListener('click', function () {
 	          var type = button.getAttribute('data-source');
-
 	          newSource(type);
 
 	          if (historySupport) {
-	                        window.history.pushState({ type: type }, '', '#' + type);
+	            window.history.pushState({
+	              type: type
+	            }, '', "#".concat(type));
 	          }
 	        });
-	            });
+	      }); // List for backwards/forwards
 
-	            // List for backwards/forwards
 	      window.addEventListener('popstate', function (event) {
 	        if (event.state && 'type' in event.state) {
 	          newSource(event.state.type);
 	        }
-	            });
+	      }); // On load
 
-	            // On load
 	      if (historySupport) {
-	                var video = !currentType.length;
+	        var video = !currentType.length; // If there's no current type set, assume video
 
-	                // If there's no current type set, assume video
 	        if (video) {
 	          currentType = types.video;
-	                }
+	        } // Replace current history state
+
 
-	                // Replace current history state
 	        if (currentType in types) {
 	          window.history.replaceState({
 	            type: currentType
-	                    }, '', video ? '' : '#' + currentType);
-	                }
+	          }, '', video ? '' : "#".concat(currentType));
+	        } // If it's not video, load the source
+
 
-	                // If it's not video, load the source
 	        if (currentType !== types.video) {
 	          newSource(currentType, true);
 	        }
 	      }
 	    });
-	    });
-
-	    // Raven / Sentry
+	  }); // Raven / Sentry
 	  // For demo site (https://plyr.io) only
+
 	  if (env.prod) {
 	    singleton.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
-	    }
-
-	    // Google analytics
+	  } // Google analytics
 	  // For demo site (https://plyr.io) only
+
 	  /* eslint-disable */
+
+
 	  if (env.prod) {
 	    (function (i, s, o, g, r, a, m) {
 	      i.GoogleAnalyticsObject = r;
+
 	      i[r] = i[r] || function () {
 	        (i[r].q = i[r].q || []).push(arguments);
 	      };
+
 	      i[r].l = 1 * new Date();
 	      a = s.createElement(o);
 	      m = s.getElementsByTagName(o)[0];
@@ -4358,10 +4343,12 @@ typeof navigator === "object" && (function () {
 	      a.src = g;
 	      m.parentNode.insertBefore(a, m);
 	    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+
 	    window.ga('create', 'UA-40881672-11', 'auto');
 	    window.ga('send', 'pageview');
 	  }
 	  /* eslint-enable */
+
 	})();
 
 }());

demo/src/js/demo.js

@@ -31,9 +31,10 @@ import Raven from 'raven-js';
 
             // Remove class on blur
             document.addEventListener('focusout', event => {
-                if (container.contains(event.target)) {
+                if (!event.target.classList || container.contains(event.target)) {
                     return;
                 }
+
                 event.target.classList.remove(tabClassName);
             });
 
@@ -48,7 +49,7 @@ import Raven from 'raven-js';
                 setTimeout(() => {
                     const focused = document.activeElement;
 
-                    if (!focused || container.contains(focused)) {
+                    if (!focused || !focused.classList || container.contains(focused)) {
                         return;
                     }
 

dist/plyr.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="plyr-airplay" viewBox="0 0 18 18"><path d="M16 1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3v-2H3V3h12v8h-2v2h3a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/><path d="M4 17h10l-5-6z"/></symbol><symbol id="plyr-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="plyr-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="plyr-pip" viewBox="0 0 18 18"><path d="M13.293 3.293L7.022 9.564l1.414 1.414 6.271-6.271L17 7V1h-6z"/><path d="M13 15H3V5h5V3H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-6h-2v5z"/></symbol><symbol id="plyr-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="plyr-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-settings" viewBox="0 0 18 18"><path d="M16.135 7.784a2 2 0 0 1-1.23-2.969c.322-.536.225-.998-.094-1.316l-.31-.31c-.318-.318-.78-.415-1.316-.094a2 2 0 0 1-2.969-1.23C10.065 1.258 9.669 1 9.219 1h-.438c-.45 0-.845.258-.997.865a2 2 0 0 1-2.969 1.23c-.536-.322-.999-.225-1.317.093l-.31.31c-.318.318-.415.781-.093 1.317a2 2 0 0 1-1.23 2.969C1.26 7.935 1 8.33 1 8.781v.438c0 .45.258.845.865.997a2 2 0 0 1 1.23 2.969c-.322.536-.225.998.094 1.316l.31.31c.319.319.782.415 1.316.094a2 2 0 0 1 2.969 1.23c.151.607.547.865.997.865h.438c.45 0 .845-.258.997-.865a2 2 0 0 1 2.969-1.23c.535.321.997.225 1.316-.094l.31-.31c.318-.318.415-.781.094-1.316a2 2 0 0 1 1.23-2.969c.607-.151.865-.547.865-.997v-.438c0-.451-.26-.846-.865-.997zM9 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></symbol><symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="plyr-airplay"><path d="M16 1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3v-2H3V3h12v8h-2v2h3a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/><path d="M4 17h10l-5-6z"/></symbol><symbol id="plyr-captions-off"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="plyr-captions-on"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="plyr-enter-fullscreen"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-muted"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="plyr-pause"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="plyr-pip"><path d="M13.293 3.293L7.022 9.564l1.414 1.414 6.271-6.271L17 7V1h-6z"/><path d="M13 15H3V5h5V3H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-6h-2v5z"/></symbol><symbol id="plyr-play"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="plyr-restart"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="plyr-rewind"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-settings"><path d="M16.135 7.784a2 2 0 0 1-1.23-2.969c.322-.536.225-.998-.094-1.316l-.31-.31c-.318-.318-.78-.415-1.316-.094a2 2 0 0 1-2.969-1.23C10.065 1.258 9.669 1 9.219 1h-.438c-.45 0-.845.258-.997.865a2 2 0 0 1-2.969 1.23c-.536-.322-.999-.225-1.317.093l-.31.31c-.318.318-.415.781-.093 1.317a2 2 0 0 1-1.23 2.969C1.26 7.935 1 8.33 1 8.781v.438c0 .45.258.845.865.997a2 2 0 0 1 1.23 2.969c-.322.536-.225.998.094 1.316l.31.31c.319.319.782.415 1.316.094a2 2 0 0 1 2.969 1.23c.151.607.547.865.997.865h.438c.45 0 .845-.258.997-.865a2 2 0 0 1 2.969-1.23c.535.321.997.225 1.316-.094l.31-.31c.318-.318.415-.781.094-1.316a2 2 0 0 1 1.23-2.969c.607-.151.865-.547.865-.997v-.438c0-.451-.26-.846-.865-.997zM9 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></symbol><symbol id="plyr-volume"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>

gulpfile.js

@@ -44,7 +44,7 @@ const paths = {
         // Source paths
         src: {
             sass: path.join(root, 'src/sass/**/*.scss'),
-            js: path.join(root, 'src/js/**/*'),
+            js: path.join(root, 'src/js/**/*.js'),
             sprite: path.join(root, 'src/sprite/*.svg'),
         },
 
@@ -55,7 +55,7 @@ const paths = {
         // Source paths
         src: {
             sass: path.join(root, 'demo/src/sass/**/*.scss'),
-            js: path.join(root, 'demo/src/js/**/*'),
+            js: path.join(root, 'demo/src/js/**/*.js'),
         },
 
         // Output paths
@@ -88,29 +88,26 @@ const sizeOptions = { showFiles: true, gzip: true };
 const browsers = ['> 1%'];
 
 // Babel config
-const babelrc = {
+const babelrc = (polyfill = false) => ({
     presets: [
         [
-            'env',
+            '@babel/preset-env',
             {
                 targets: {
                     browsers,
                 },
-                useBuiltIns: true,
+                useBuiltIns: polyfill ? 'usage' : false,
                 modules: false,
             },
         ],
     ],
-    plugins: ['external-helpers'],
     babelrc: false,
     exclude: 'node_modules/**',
-};
+});
 
 // Clean out /dist
 gulp.task('clean', () => {
-    const dirs = [paths.plyr.output, paths.demo.output].map(dir =>
-        path.join(dir, '**/*'),
-    );
+    const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*'));
 
     // Don't delete the mp4
     dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`);
@@ -124,6 +121,7 @@ const build = {
             const name = `js:${key}`;
             tasks.js.push(name);
             const { output } = paths[bundle];
+            const polyfill = name.includes('polyfilled');
 
             return gulp.task(name, () =>
                 gulp
@@ -133,11 +131,7 @@ const build = {
                     .pipe(
                         rollup(
                             {
-                                plugins: [
-                                    resolve(),
-                                    commonjs(),
-                                    babel(babelrc),
-                                ],
+                                plugins: [resolve(), commonjs(), babel(babelrc(polyfill))],
                             },
                             options,
                         ),
@@ -244,10 +238,7 @@ try {
 }
 
 // If deployment is setup
-if (
-    Object.keys(credentials).includes('aws') &&
-    Object.keys(credentials).includes('fastly')
-) {
+if (Object.keys(credentials).includes('aws') && Object.keys(credentials).includes('fastly')) {
     const { version } = pkg;
     const { aws, fastly } = credentials;
 
@@ -269,8 +260,7 @@ if (
         demo: {
             uploadPath: branch.current === branch.develop ? 'beta/' : null,
             headers: {
-                'Cache-Control':
-                    'no-cache, no-store, must-revalidate, max-age=0',
+                'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
                 Vary: 'Accept-Encoding',
             },
         },
@@ -279,8 +269,7 @@ if (
                 headers: {
                     // http://stackoverflow.com/questions/2272835/amazon-s3-object-redirect
                     'x-amz-website-redirect-location': `/${ver}/${filename}`,
-                    'Cache-Control':
-                        'no-cache, no-store, must-revalidate, max-age=0',
+                    'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
                 },
             };
         },
@@ -303,11 +292,7 @@ if (
         const allowed = [branch.master, branch.develop];
 
         if (!allowed.includes(branch.current)) {
-            console.error(
-                `Must be on ${allowed.join(', ')} to publish! (current: ${
-                    branch.current
-                })`,
-            );
+            console.error(`Must be on ${allowed.join(', ')} to publish! (current: ${branch.current})`);
 
             return false;
         }
@@ -349,8 +334,7 @@ if (
                 .pipe(
                     replace(
                         /sourceMappingURL=([\w-?.]+)/,
-                        (match, p1) =>
-                            `sourceMappingURL=${p1.replace(minSuffix, '')}`,
+                        (match, p1) => `sourceMappingURL=${p1.replace(minSuffix, '')}`,
                     ),
                 )
                 .pipe(
@@ -368,13 +352,16 @@ if (
     gulp.task('purge', () => {
         const list = [];
 
-        return gulp.src(paths.upload).pipe(
+        return gulp
+            .src(paths.upload)
+            .pipe(
                 through.obj((file, enc, cb) => {
                     const filename = file.path.split('/').pop();
                     list.push(`${versionPath}/${filename}`);
                     cb(null);
                 }),
-        ).on('end', () => {
+            )
+            .on('end', () => {
                 const purge = new FastlyPurge(fastly.token);
 
                 list.forEach(url => {
@@ -400,8 +387,7 @@ if (
         console.log(`Uploading '${version}' demo to ${aws.demo.domain}...`);
 
         // Replace versioned files in readme.md
-        gulp
-            .src([`${root}/readme.md`])
+        gulp.src([`${root}/readme.md`])
             .pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
             .pipe(gulp.dest(root));
 
@@ -415,8 +401,7 @@ if (
             pages.push(error);
         }
 
-        gulp
-            .src(pages)
+        gulp.src(pages)
             .pipe(replace(localPath, versionPath))
             .pipe(s3(aws.demo, options.demo));
 
@@ -468,16 +453,6 @@ if (
 
     // Do everything
     gulp.task('deploy', () =>
-        run(
-            'version',
-            tasks.clean,
-            tasks.js,
-            tasks.sass,
-            tasks.sprite,
-            'cdn',
-            'purge',
-            'demo',
-            'open',
-        ),
+        run('version', tasks.clean, tasks.js, tasks.sass, tasks.sprite, 'cdn', 'purge', 'demo', 'open'),
     );
 }

package.json

@@ -1,8 +1,7 @@
 {
     "name": "plyr",
-    "version": "3.4.0-beta.2",
-    "description":
-        "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
+    "version": "3.4.4",
+    "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "author": "Sam Potts <sam@potts.es>",
     "keywords": [
@@ -32,64 +31,62 @@
     "scripts": {
         "build": "gulp build",
         "lint": "eslint src/js && npm run-script remark",
-        "remark":
-            "remark -f --use 'validate-links=repository:\"sampotts/plyr\"' '{,!(node_modules),.?**/}*.md'",
+        "remark": "remark -f --use 'validate-links=repository:\"sampotts/plyr\"' '{,!(node_modules),.?**/}*.md'",
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "devDependencies": {
         "babel-core": "^6.26.3",
-        "babel-eslint": "^8.2.6",
-        "babel-plugin-external-helpers": "^6.22.0",
-        "babel-preset-env": "^1.7.0",
+        "babel-eslint": "^9.0.0",
+        "@babel/preset-env": "^7.1.0",
         "del": "^3.0.0",
-        "eslint": "^5.2.0",
-        "eslint-config-airbnb-base": "^13.0.0",
-        "eslint-config-prettier": "^2.9.0",
-        "eslint-plugin-import": "^2.13.0",
+        "eslint": "^5.6.0",
+        "eslint-config-airbnb-base": "^13.1.0",
+        "eslint-config-prettier": "^3.1.0",
+        "eslint-plugin-import": "^2.14.0",
         "fastly-purge": "^1.0.1",
         "git-branch": "^2.0.1",
         "gulp": "^3.9.1",
-        "gulp-autoprefixer": "^5.0.0",
+        "gulp-autoprefixer": "^6.0.0",
         "gulp-better-rollup": "^3.3.0",
-        "gulp-clean-css": "^3.9.4",
+        "gulp-clean-css": "^3.10.0",
         "gulp-concat": "^2.6.1",
         "gulp-filter": "^5.1.0",
         "gulp-header": "^2.0.5",
         "gulp-open": "^3.0.1",
-        "gulp-postcss": "^7.0.1",
+        "gulp-postcss": "^8.0.0",
         "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.0.0",
         "gulp-s3": "^0.11.0",
         "gulp-sass": "^4.0.1",
         "gulp-size": "^3.0.0",
         "gulp-sourcemaps": "^2.6.4",
-        "gulp-svgmin": "^1.2.4",
-        "gulp-svgstore": "^6.1.1",
+        "gulp-svgmin": "^2.1.0",
+        "gulp-svgstore": "^7.0.0",
         "gulp-uglify-es": "^1.0.4",
         "gulp-util": "^3.0.8",
-        "postcss-custom-properties": "^7.0.0",
+        "postcss-custom-properties": "^8.0.5",
         "prettier-eslint": "^8.8.2",
         "prettier-stylelint": "^0.4.2",
         "remark-cli": "^5.0.0",
-        "remark-validate-links": "^7.0.0",
-        "rollup-plugin-babel": "^3.0.7",
-        "rollup-plugin-commonjs": "^9.1.4",
-        "rollup-plugin-node-resolve": "^3.3.0",
+        "remark-validate-links": "^7.1.0",
+        "rollup-plugin-babel": "^4.0.3",
+        "rollup-plugin-commonjs": "^9.1.8",
+        "rollup-plugin-node-resolve": "^3.4.0",
         "run-sequence": "^2.2.1",
-        "stylelint": "^9.4.0",
-        "stylelint-config-prettier": "^3.3.0",
+        "stylelint": "^9.5.0",
+        "stylelint-config-prettier": "^4.0.0",
         "stylelint-config-recommended": "^2.1.0",
-        "stylelint-config-sass-guidelines": "^5.0.0",
-        "stylelint-order": "^0.8.1",
-        "stylelint-scss": "^3.2.0",
+        "stylelint-config-sass-guidelines": "^5.2.0",
+        "stylelint-order": "^1.0.0",
+        "stylelint-scss": "^3.3.1",
         "stylelint-selector-bem-pattern": "^2.0.0",
         "through2": "^2.0.3"
     },
     "dependencies": {
-        "babel-polyfill": "^6.26.0",
+        "core-js": "^2.5.7",
         "custom-event-polyfill": "^1.0.6",
         "loadjs": "^3.5.4",
-        "raven-js": "^3.26.4",
-        "url-polyfill": "^1.0.13"
+        "raven-js": "^3.27.0",
+        "url-polyfill": "^1.1.0"
     }
 }

readme.md

@@ -8,26 +8,26 @@ A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo medi
 
 ## Features
 
-*   **Accessible** - full support for VTT captions and screen readers
-*   **[Customisable](#html)** - make the player look how you want with the markup you want
-*   **Good HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
+-   **Accessible** - full support for VTT captions and screen readers
+-   **[Customisable](#html)** - make the player look how you want with the markup you want
+-   **Good HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
     `<span>` or `<a href="#">` button hacks
-*   **Responsive** - works with any screen size
-*   **HTML Video & Audio** - support for both formats
-*   **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
-*   **[Monetization](#ads)** - make money from your videos
-*   **[Streaming](#try-plyr-online)** - support for hls.js, Shaka and dash.js streaming playback
-*   **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
-*   **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
-*   **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
-*   **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
-*   **Picture-in-Picture** - supports Safari's picture-in-picture mode
-*   **Playsinline** - supports the `playsinline` attribute
-*   **Speed controls** - adjust speed on the fly
-*   **Multiple captions** - support for multiple caption tracks
-*   **i18n support** - support for internationalization of controls
-*   **No dependencies** - written in "vanilla" ES6 JavaScript, no jQuery required
-*   **SASS** - to include in your build processes
+-   **Responsive** - works with any screen size
+-   **HTML Video & Audio** - support for both formats
+-   **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
+-   **[Monetization](#ads)** - make money from your videos
+-   **[Streaming](#try-plyr-online)** - support for hls.js, Shaka and dash.js streaming playback
+-   **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
+-   **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
+-   **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
+-   **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
+-   **Picture-in-Picture** - supports Safari's picture-in-picture mode
+-   **Playsinline** - supports the `playsinline` attribute
+-   **Speed controls** - adjust speed on the fly
+-   **Multiple captions** - support for multiple caption tracks
+-   **i18n support** - support for internationalization of controls
+-   **No dependencies** - written in "vanilla" ES6 JavaScript, no jQuery required
+-   **SASS** - to include in your build processes
 
 Oh and yes, it works with Bootstrap.
 
@@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
 
 ```html
-<script src="https://cdn.plyr.io/3.4.0-beta.2/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.4.4/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.4.0-beta.2/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.4.4/plyr.polyfilled.js"></script>
 ```
 
 ### CSS
@@ -152,21 +152,21 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.4.0-beta.2/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.4.4/plyr.css">
 ```
 
 ### SVG Sprite
 
 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.0-beta.2/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.4/plyr.svg`.
 
 ## Ads
 
 Plyr has partnered up with [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) to offer monetization options for your videos. Getting setup is easy:
 
-*   [Sign up for a vi.ai account](https://vi.ai/publisher-video-monetization/?aid=plyrio)
-*   Grab your publisher ID from the code snippet
-*   Enable ads in the [config options](#options) and enter your publisher ID
+-   [Sign up for a vi.ai account](https://vi.ai/publisher-video-monetization/?aid=plyrio)
+-   Grab your publisher ID from the code snippet
+-   Enable ads in the [config options](#options) and enter your publisher ID
 
 Any questions regarding the ads can be sent straight to vi.ai and any issues with rendering raised through GitHub issues.
 
@@ -213,10 +213,10 @@ WebVTT captions are supported. To add a caption track, check the HTML example ab
 
 You can specify a range of arguments for the constructor to use:
 
-*   A CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
-*   A [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
-*   A [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)
-*   A [jQuery](https://jquery.com) object
+-   A CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
+-   A [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
+-   A [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)
+-   A [jQuery](https://jquery.com) object
 
 _Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element will be used for setup. To setup multiple players, see [setting up multiple players](#setting-up-multiple-players) below.
 
@@ -290,7 +290,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
 | `loadSprite`         | Boolean                    | `true`                                                                                                                         | Load the SVG sprite specified as the `iconUrl` option (if a URL). If `false`, it is assumed you are handling sprite loading yourself.                                                                                                                                                                                                                                  |
 | `iconUrl`            | String                     | `null`                                                                                                                         | Specify a URL or path to the SVG sprite. See the [SVG section](#svg) for more info.                                                                                                                                                                                                                                                                                    |
 | `iconPrefix`         | String                     | `plyr`                                                                                                                         | Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option.                                                                                                                                 |
-| `blankUrl`           | String                     | `https://cdn.plyr.io/static/blank.mp4`                                                                                         | Specify a URL or path to a blank video file used to properly cancel network requests.                                                                                                                                                                                                                                                                                  |
+| `blankVideo`         | String                     | `https://cdn.plyr.io/static/blank.mp4`                                                                                         | Specify a URL or path to a blank video file used to properly cancel network requests.                                                                                                                                                                                                                                                                                  |
 | `autoplay`           | Boolean                    | `false`                                                                                                                        | Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled by default in some browsers. If the `autoplay` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true.                                                                                                                      |
 | `autopause`&sup1;    | Boolean                    | `true`                                                                                                                         | Only allow one player playing at once.                                                                                                                                                                                                                                                                                                                                 |
 | `seekTime`           | Number                     | `10`                                                                                                                           | The time, in seconds, to seek when a user hits fast forward or rewind.                                                                                                                                                                                                                                                                                                 |
@@ -392,7 +392,7 @@ player.fullscreen.active; // false;
 ```
 
 | Property             | Getter | Setter | Description                                                                                                                                                                                                                                                                                                                            |
-| -------------------- | ------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| -------------------- | ------ | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `isHTML5`            | ✓      | -      | Returns a boolean indicating if the current player is HTML5.                                                                                                                                                                                                                                                                           |
 | `isEmbed`            | ✓      | -      | Returns a boolean indicating if the current player is an embedded player.                                                                                                                                                                                                                                                              |
 | `playing`            | ✓      | -      | Returns a boolean indicating if the current player is playing.                                                                                                                                                                                                                                                                         |
@@ -565,6 +565,7 @@ player.on('ready', event => {
 | `loadstart`      | Sent when loading of the media begins.                                                                                                                                                                                                                                                                                                         |
 | `loadeddata`     | The first frame of the media has finished loading.                                                                                                                                                                                                                                                                                             |
 | `loadedmetadata` | The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.                                                                                                                                                                                                                          |
+| `qualitychange`  | The quality of playback has changed.                                                                                                                                                                                                                                                                                                           |
 | `canplay`        | Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the `HAVE_ENOUGH_DATA` `readyState`.                                                                                                                                                                                     |
 | `canplaythrough` | Sent when the ready state changes to `CAN_PLAY_THROUGH`, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. _Note:_ Manually setting the `currentTime` will eventually fire a `canplaythrough` event in firefox. Other browsers might not fire this event. |
 | `stalled`        | Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.                                                                                                                                                                                                                                              |
@@ -576,10 +577,8 @@ player.on('ready', event => {
 #### YouTube only
 
 | Event Type    | Description                                                                                                                                                                                                                                                                                                                |
-| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `statechange` | The state of the player has changed. The code can be accessed via `event.detail.code`. Possible values are `-1`: Unstarted, `0`: Ended, `1`: Playing, `2`: Paused, `3`: Buffering, `5`: Video cued. See the [YouTube Docs](https://developers.google.com/youtube/iframe_api_reference#onStateChange) for more information. |
-| `qualitychange`    | The quality of playback has changed.                                                                                                                                                                                                                                                                                       |
-| `qualityrequested` | A change to playback quality has been requested. _Note:_ A change to quality can only be _requested_ via the API. There is no guarantee the quality will change to the level requested. You should listen to the `qualitychange` event for true changes.                                                                   |
 
 _Note:_ These events also bubble up the DOM. The event target will be the container element.
 
@@ -591,8 +590,8 @@ YouTube and Vimeo are currently supported and function much like a HTML5 video.
 to access the API's directly. You can do so via the `embed` property of your player object - e.g. `player.embed`. You can then use the relevant methods from the
 third party APIs. More info on the respective API's here:
 
-*   [YouTube iframe API Reference](https://developers.google.com/youtube/iframe_api_reference)
-*   [Vimeo player.js Reference](https://github.com/vimeo/player.js)
+-   [YouTube iframe API Reference](https://developers.google.com/youtube/iframe_api_reference)
+-   [Vimeo player.js Reference](https://github.com/vimeo/player.js)
 
 _Note_: Not all API methods may work 100%. Your mileage may vary. It's better to use the Plyr API where possible.
 
@@ -652,9 +651,9 @@ const supported = Plyr.supported('video', 'html5', true);
 
 The arguments are:
 
-*   Media type (`audio` or `video`)
-*   Provider (`html5`, `youtube` or `vimeo`)
-*   Whether the player has the `playsinline` attribute (only applicable to iOS 10+)
+-   Media type (`audio` or `video`)
+-   Provider (`html5`, `youtube` or `vimeo`)
+-   Whether the player has the `playsinline` attribute (only applicable to iOS 10+)
 
 ### Disable support programatically
 
@@ -687,33 +686,33 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]
 
 Plyr costs money to run, not only my time. I donate my time for free as I enjoy building Plyr but unfortunately have to pay for domains, hosting, and more. Any help with costs is appreciated...
 
-*   [Donate via Patron](https://www.patreon.com/plyr)
-*   [Donate via PayPal](https://www.paypal.me/pottsy/20usd)
+-   [Donate via Patreon](https://www.patreon.com/plyr)
+-   [Donate via PayPal](https://www.paypal.me/pottsy/20usd)
 
 ## Mentions
 
-*   [ProductHunt](https://www.producthunt.com/tech/plyr)
-*   [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
-*   [HTML5 Weekly #177](http://html5weekly.com/issues/177)
-*   [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
-*   [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
-*   [Hacker News](https://news.ycombinator.com/item?id=9136774)
-*   [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
-*   [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
-*   [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
-*   [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
+-   [ProductHunt](https://www.producthunt.com/tech/plyr)
+-   [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
+-   [HTML5 Weekly #177](http://html5weekly.com/issues/177)
+-   [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
+-   [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
+-   [Hacker News](https://news.ycombinator.com/item?id=9136774)
+-   [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
+-   [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
+-   [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
+-   [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
 
 ## Used by
 
-*   [Selz.com](https://selz.com)
-*   [Peugeot.fr](http://www.peugeot.fr/marque-et-technologie/technologies/peugeot-i-cockpit.html)
-*   [Peugeot.de](http://www.peugeot.de/modelle/modellberater/208-3-turer/fotos-videos.html)
-*   [TomTom.com](http://prioritydriving.tomtom.com/)
-*   [DIGBMX](http://digbmx.com/)
-*   [Grime Archive](https://grimearchive.com/)
-*   [koel - A personal music streaming server that works.](http://koel.phanan.net/)
-*   [Oscar Radio](http://oscar-radio.xyz/)
-*   [Sparkk TV](https://www.sparkktv.com/)
+-   [Selz.com](https://selz.com)
+-   [Peugeot.fr](http://www.peugeot.fr/marque-et-technologie/technologies/peugeot-i-cockpit.html)
+-   [Peugeot.de](http://www.peugeot.de/modelle/modellberater/208-3-turer/fotos-videos.html)
+-   [TomTom.com](http://prioritydriving.tomtom.com/)
+-   [DIGBMX](http://digbmx.com/)
+-   [Grime Archive](https://grimearchive.com/)
+-   [koel - A personal music streaming server that works.](http://koel.phanan.net/)
+-   [Oscar Radio](http://oscar-radio.xyz/)
+-   [Sparkk TV](https://www.sparkktv.com/)
 
 Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
 
@@ -721,8 +720,8 @@ Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the abo
 
 Credit to the PayPal HTML5 Video player from which Plyr's caption functionality was originally ported from:
 
-*   [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player)
-*   [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw)
+-   [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player)
+-   [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw)
 
 ## Thanks
 

src/js/captions.js

@@ -4,7 +4,6 @@
 // ==========================================================================
 
 import controls from './controls';
-import i18n from './i18n';
 import support from './support';
 import { dedupe } from './utils/arrays';
 import browser from './utils/browser';
@@ -18,6 +17,7 @@ import {
 } from './utils/elements';
 import { on, triggerEvent } from './utils/events';
 import fetch from './utils/fetch';
+import i18n from './utils/i18n';
 import is from './utils/is';
 import { getHTML } from './utils/strings';
 import { parseUrl } from './utils/urls';
@@ -83,11 +83,8 @@ const captions = {
         // * active:    The state preferred by user settings or config
         // * toggled:   The real captions state
 
-        const languages = dedupe(
-            Array.from(navigator.languages || navigator.language || navigator.userLanguage).map(
-                language => language.split('-')[0],
-            ),
-        );
+        const browserLanguages = navigator.languages || [navigator.language || navigator.userLanguage || 'en'];
+        const languages = dedupe(browserLanguages.map(language => language.split('-')[0]));
 
         let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();
 

src/js/config/defaults.js

@@ -68,19 +68,7 @@ const defaults = {
     // Quality default
     quality: {
         default: 576,
-        options: [
-            4320,
-            2880,
-            2160,
-            1440,
-            1080,
-            720,
-            576,
-            480,
-            360,
-            240,
-            'default', // YouTube's "auto"
-        ],
+        options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240],
     },
 
     // Set loops
@@ -268,8 +256,9 @@ const defaults = {
 
         // YouTube
         'statechange',
+
+        // Quality
         'qualitychange',
-        'qualityrequested',
 
         // Ads
         'adsloaded',

src/js/controls.js

@@ -5,13 +5,13 @@
 
 import captions from './captions';
 import html5 from './html5';
-import i18n from './i18n';
 import support from './support';
 import { repaint, transitionEndEvent } from './utils/animation';
 import { dedupe } from './utils/arrays';
 import browser from './utils/browser';
 import { createElement, emptyElement, getAttributesFromSelector, getElement, getElements, hasClass, matches, removeElement, setAttributes, setFocus, toggleClass, toggleHidden } from './utils/elements';
 import { off, on } from './utils/events';
+import i18n from './utils/i18n';
 import is from './utils/is';
 import loadSprite from './utils/loadSprite';
 import { extend } from './utils/objects';
@@ -275,18 +275,6 @@ const controls = {
             this.elements.buttons[type] = button;
         }
 
-        // Toggle classname when pressed property is set
-        const className = this.config.classNames.controlPressed;
-        Object.defineProperty(button, 'pressed', {
-            enumerable: true,
-            get() {
-                return hasClass(button, className);
-            },
-            set(pressed = false) {
-                toggleClass(button, className, pressed);
-            },
-        });
-
         return button;
     },
 
@@ -1142,9 +1130,8 @@ const controls = {
         // Focus the first item if key interaction
         if (show && is.keyboardEvent(input)) {
             controls.focusFirstMenuItem.call(this, null, true);
-        }
+        } else if (!show && !hidden) {
             // If closing, re-focus the button
-        else if (!show && !hidden) {
             setFocus.call(this, button, is.keyboardEvent(input));
         }
     },
@@ -1297,17 +1284,19 @@ const controls = {
             container.appendChild(controls.createTime.call(this, 'duration'));
         }
 
-        // Toggle mute button
-        if (this.config.controls.includes('mute')) {
-            container.appendChild(controls.createButton.call(this, 'mute'));
-        }
-
-        // Volume range control
-        if (this.config.controls.includes('volume')) {
+        // Volume controls
+        if (this.config.controls.includes('mute') || this.config.controls.includes('volume')) {
             const volume = createElement('div', {
                 class: 'plyr__volume',
             });
 
+            // Toggle mute button
+            if (this.config.controls.includes('mute')) {
+                volume.appendChild(controls.createButton.call(this, 'mute'));
+            }
+
+            // Volume range control
+            if (this.config.controls.includes('volume')) {
                 // Set the attributes
                 const attributes = {
                     max: 1,
@@ -1327,6 +1316,7 @@ const controls = {
                 );
 
                 this.elements.volume = volume;
+            }
 
             container.appendChild(volume);
         }
@@ -1512,6 +1502,7 @@ const controls = {
 
         this.elements.controls = container;
 
+        // Set available quality levels
         if (this.isHTML5) {
             controls.setQualityMenu.call(this, html5.getQualityOptions.call(this));
         }
@@ -1617,6 +1608,33 @@ const controls = {
             controls.findElements.call(this);
         }
 
+        // Add pressed property to buttons
+        if (!is.empty(this.elements.buttons)) {
+            const addProperty = button => {
+                const className = this.config.classNames.controlPressed;
+                Object.defineProperty(button, 'pressed', {
+                    enumerable: true,
+                    get() {
+                        return hasClass(button, className);
+                    },
+                    set(pressed = false) {
+                        toggleClass(button, className, pressed);
+                    },
+                });
+            };
+
+            // Toggle classname when pressed property is set
+            Object.values(this.elements.buttons)
+                .filter(Boolean)
+                .forEach(button => {
+                    if (is.array(button) || is.nodeList(button)) {
+                        Array.from(button).filter(Boolean).forEach(addProperty);
+                    } else {
+                        addProperty(button);
+                    }
+                });
+        }
+
         // Edge sometimes doesn't finish the paint so force a redraw
         if (window.navigator.userAgent.includes('Edge')) {
             repaint(target);

src/js/fullscreen.js

@@ -1,8 +1,10 @@
 // ==========================================================================
 // Fullscreen wrapper
 // https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#prefixing
+// https://webkit.org/blog/7929/designing-websites-for-iphone-x/
 // ==========================================================================
 
+import { repaint } from './utils/animation';
 import browser from './utils/browser';
 import { hasClass, toggleClass, trapFocus } from './utils/elements';
 import { on, triggerEvent } from './utils/events';
@@ -45,6 +47,37 @@ function toggleFallback(toggle = false) {
     // Toggle class hook
     toggleClass(this.target, this.player.config.classNames.fullscreen.fallback, toggle);
 
+    // Force full viewport on iPhone X+
+    if (browser.isIos) {
+        let viewport = document.head.querySelector('meta[name="viewport"]');
+        const property = 'viewport-fit=cover';
+
+        // Inject the viewport meta if required
+        if (!viewport) {
+            viewport = document.createElement('meta');
+            viewport.setAttribute('name', 'viewport');
+        }
+
+        // Check if the property already exists
+        const hasProperty = is.string(viewport.content) && viewport.content.includes(property);
+
+        if (toggle) {
+            this.cleanupViewport = !hasProperty;
+
+            if (!hasProperty) {
+                viewport.content += `,${property}`;
+            }
+        } else if (this.cleanupViewport) {
+            viewport.content = viewport.content
+                .split(',')
+                .filter(part => part.trim() !== property)
+                .join(',');
+        }
+
+        // Force a repaint as sometimes Safari doesn't want to fill the screen
+        setTimeout(() => repaint(this.target), 100);
+    }
+
     // Toggle button and fire events
     onChange.call(this);
 }
@@ -177,9 +210,7 @@ class Fullscreen {
 
         // iOS native fullscreen doesn't need the request step
         if (browser.isIos && this.player.config.fullscreen.iosNative) {
-            if (this.player.playing) {
             this.target.webkitEnterFullscreen();
-            }
         } else if (!Fullscreen.native) {
             toggleFallback.call(this, true);
         } else if (!this.prefix) {

src/js/html5.js

@@ -82,6 +82,9 @@ const html5 = {
                 triggerEvent.call(player, player.media, 'qualitychange', false, {
                     quality: input,
                 });
+
+                // Save to storage
+                player.storage.set({ quality: input });
             },
         });
     },

src/js/listeners.js

@@ -6,7 +6,7 @@ import controls from './controls';
 import ui from './ui';
 import { repaint } from './utils/animation';
 import browser from './utils/browser';
-import { getElement, getElements, hasClass, matches, toggleClass, toggleHidden } from './utils/elements';
+import { getElement, getElements, matches, toggleClass, toggleHidden } from './utils/elements';
 import { on, once, toggleListener, triggerEvent } from './utils/events';
 import is from './utils/is';
 
@@ -45,7 +45,7 @@ class Listeners {
         // Seek by the number keys
         const seekByKey = () => {
             // Divide the max duration into 10th's and times by the number value
-            player.currentTime = player.duration / 10 * (code - 48);
+            player.currentTime = (player.duration / 10) * (code - 48);
         };
 
         // Handle the key on keydown
@@ -277,7 +277,7 @@ class Listeners {
                 const { controls } = elements;
 
                 // Remove button states for fullscreen
-                if (event.type === 'enterfullscreen') {
+                if (controls && event.type === 'enterfullscreen') {
                     controls.pressed = false;
                     controls.hover = false;
                 }
@@ -372,7 +372,7 @@ class Listeners {
             }
 
             // On click play, pause ore restart
-            on.call(player, elements.container, 'click touchstart', event => {
+            on.call(player, elements.container, 'click', event => {
                 const targets = [elements.container, wrapper];
 
                 // Ignore if click if not container or in video wrapper
@@ -380,13 +380,8 @@ class Listeners {
                     return;
                 }
 
-                // First touch on touch devices will just show controls (if we're hiding controls)
-                // If controls are shown then it'll toggle like a pointer device
-                if (
-                    player.config.hideControls &&
-                    player.touch &&
-                    hasClass(elements.container, player.config.classNames.hideControls)
-                ) {
+                // Touch devices will just show controls (if hidden)
+                if (player.touch && player.config.hideControls) {
                     return;
                 }
 
@@ -430,12 +425,6 @@ class Listeners {
             player.storage.set({ speed: player.speed });
         });
 
-        // Quality request
-        on.call(player, player.media, 'qualityrequested', event => {
-            // Save to storage
-            player.storage.set({ quality: event.detail.quality });
-        });
-
         // Quality change
         on.call(player, player.media, 'qualitychange', event => {
             // Update UI
@@ -602,7 +591,7 @@ class Listeners {
         // Set range input alternative "value", which matches the tooltip time (#954)
         this.bind(elements.inputs.seek, 'mousedown mousemove', event => {
             const rect = elements.progress.getBoundingClientRect();
-            const percent = 100 / rect.width * (event.pageX - rect.left);
+            const percent = (100 / rect.width) * (event.pageX - rect.left);
             event.currentTarget.setAttribute('seek-value', percent);
         });
 
@@ -656,7 +645,7 @@ class Listeners {
 
                 seek.removeAttribute('seek-value');
 
-                player.currentTime = seekTo / seek.max * player.duration;
+                player.currentTime = (seekTo / seek.max) * player.duration;
             },
             'seek',
         );

src/js/plugins/ads.js

@@ -6,9 +6,9 @@
 
 /* global google */
 
-import i18n from '../i18n';
 import { createElement } from '../utils/elements';
 import { triggerEvent } from '../utils/events';
+import i18n from '../utils/i18n';
 import is from '../utils/is';
 import loadScript from '../utils/loadScript';
 import { formatTime } from '../utils/time';

src/js/plugins/youtube.js

@@ -2,9 +2,7 @@
 // YouTube plugin
 // ==========================================================================
 
-import controls from '../controls';
 import ui from '../ui';
-import { dedupe } from '../utils/arrays';
 import { createElement, replaceElement, toggleClass } from '../utils/elements';
 import { triggerEvent } from '../utils/events';
 import fetch from '../utils/fetch';
@@ -23,37 +21,6 @@ function parseId(url) {
     return url.match(regex) ? RegExp.$2 : url;
 }
 
-// Standardise YouTube quality unit
-function mapQualityUnit(input) {
-    const qualities = {
-        hd2160: 2160,
-        hd1440: 1440,
-        hd1080: 1080,
-        hd720: 720,
-        large: 480,
-        medium: 360,
-        small: 240,
-        tiny: 144,
-    };
-
-    const entry = Object.entries(qualities).find(entry => entry.includes(input));
-
-    if (entry) {
-        // Get the match corresponding to the input
-        return entry.find(value => value !== input);
-    }
-
-    return 'default';
-}
-
-function mapQualityUnits(levels) {
-    if (is.empty(levels)) {
-        return levels;
-    }
-
-    return dedupe(levels.map(level => mapQualityUnit(level)));
-}
-
 // Set playback state and trigger change (only on actual change)
 function assurePlaybackState(play) {
     if (play && !this.embed.hasPlayed) {
@@ -225,11 +192,6 @@ const youtube = {
                         triggerEvent.call(player, player.media, 'error');
                     }
                 },
-                onPlaybackQualityChange() {
-                    triggerEvent.call(player, player.media, 'qualitychange', false, {
-                        quality: player.media.quality,
-                    });
-                },
                 onPlaybackRateChange(event) {
                     // Get the instance
                     const instance = event.target;
@@ -299,16 +261,6 @@ const youtube = {
                         },
                     });
 
-                    // Quality
-                    Object.defineProperty(player.media, 'quality', {
-                        get() {
-                            return mapQualityUnit(instance.getPlaybackQuality());
-                        },
-                        set(input) {
-                            instance.setPlaybackQuality(mapQualityUnit(input));
-                        },
-                    });
-
                     // Volume
                     let { volume } = player.config;
                     Object.defineProperty(player.media, 'volume', {
@@ -457,12 +409,6 @@ const youtube = {
                                     player.media.duration = instance.getDuration();
                                     triggerEvent.call(player, player.media, 'durationchange');
                                 }
-
-                                // Get quality
-                                controls.setQualityMenu.call(
-                                    player,
-                                    mapQualityUnits(instance.getAvailableQualityLevels()),
-                                );
                             }
 
                             break;

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.4.0-beta.2
+// plyr.js v3.4.4
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -698,11 +698,6 @@ class Plyr {
             quality = value;
         }
 
-        // Trigger request event
-        triggerEvent.call(this, this.media, 'qualityrequested', false, {
-            quality,
-        });
-
         // Update config
         config.selected = quality;
 

src/js/plyr.polyfilled.js

@@ -1,11 +1,10 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.4.0-beta.2
+// plyr.js v3.4.4
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
 
-import 'babel-polyfill';
 import 'custom-event-polyfill';
 import 'url-polyfill';
 import Plyr from './plyr';

src/js/ui.js

@@ -4,11 +4,11 @@
 
 import captions from './captions';
 import controls from './controls';
-import i18n from './i18n';
 import support from './support';
 import browser from './utils/browser';
 import { getElement, toggleClass } from './utils/elements';
 import { ready, triggerEvent } from './utils/events';
+import i18n from './utils/i18n';
 import is from './utils/is';
 import loadImage from './utils/loadImage';
 

src/js/utils/animation.js

@@ -15,9 +15,7 @@ export const transitionEndEvent = (() => {
         transition: 'transitionend',
     };
 
-    const type = Object.keys(events).find(
-        event => element.style[event] !== undefined,
-    );
+    const type = Object.keys(events).find(event => element.style[event] !== undefined);
 
     return is.string(type) ? events[type] : false;
 })();

src/js/utils/i18n.js

@@ -2,9 +2,9 @@
 // Plyr internationalization
 // ==========================================================================
 
-import is from './utils/is';
-import { getDeep } from './utils/objects';
-import { replaceAll } from './utils/strings';
+import is from './is';
+import { getDeep } from './objects';
+import { replaceAll } from './strings';
 
 const i18n = {
     get(key = '', config = {}) {

src/js/utils/strings.js

@@ -24,7 +24,7 @@ export function getPercentage(current, max) {
         return 0;
     }
 
-    return (current / max * 100).toFixed(2);
+    return ((current / max) * 100).toFixed(2);
 }
 
 // Replace all occurances of a string in a string

src/sass/components/control.scss

@@ -81,11 +81,10 @@
     transform: translate(-50%, -50%);
     z-index: 2;
 
+    // Offset icon to make the play button look right
     svg {
-        height: $plyr-control-icon-size-large;
-        left: 2px; // Offset to make the play button look right
+        left: 2px;
         position: relative;
-        width: $plyr-control-icon-size-large;
     }
 
     &:hover,

src/sass/components/controls.scss

@@ -18,20 +18,24 @@
     > .plyr__control,
     .plyr__progress,
     .plyr__time,
-    .plyr__menu {
-        margin-left: ($plyr-control-spacing / 2);
-
-        &:first-child,
-        &:first-child + [data-plyr='pause'] {
-            margin-left: 0;
-            margin-right: auto;
-        }
-    }
-
+    .plyr__menu,
     .plyr__volume {
         margin-left: ($plyr-control-spacing / 2);
     }
 
+    .plyr__menu + .plyr__control,
+    > .plyr__control + .plyr__menu,
+    > .plyr__control + .plyr__control,
+    .plyr__progress + .plyr__control {
+        margin-left: floor($plyr-control-spacing / 4);
+    }
+
+    > .plyr__control:first-child,
+    > .plyr__control:first-child + [data-plyr='pause'] {
+        margin-left: 0;
+        margin-right: auto;
+    }
+
     // Hide empty controls
     &:empty {
         display: none;
@@ -39,17 +43,12 @@
 
     @media (min-width: $plyr-bp-sm) {
         > .plyr__control,
+        .plyr__menu,
         .plyr__progress,
         .plyr__time,
-        .plyr__menu {
+        .plyr__volume {
             margin-left: $plyr-control-spacing;
         }
-
-        > .plyr__control + .plyr__control,
-        .plyr__menu + .plyr__control,
-        > .plyr__control + .plyr__menu {
-            margin-left: ($plyr-control-spacing / 2);
-        }
     }
 }
 
@@ -72,12 +71,15 @@
     bottom: 0;
     color: $plyr-video-control-color;
     left: 0;
-    padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing
-        $plyr-control-spacing;
+    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
     position: absolute;
     right: 0;
     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
     z-index: 3;
+
+    @media (min-width: $plyr-bp-sm) {
+        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
+    }
 }
 
 // Hide video controls

src/sass/components/tooltips.scss

@@ -10,6 +10,7 @@
     color: $plyr-tooltip-color;
     font-size: $plyr-font-size-small;
     font-weight: $plyr-font-weight-regular;
+    left: 50%;
     line-height: 1.3;
     margin-bottom: ($plyr-tooltip-padding * 2);
     opacity: 0;
@@ -64,6 +65,7 @@
 
 // Last tooltip
 .plyr__controls > .plyr__control:last-child .plyr__tooltip {
+    left: auto;
     right: 0;
     transform: translate(0, 10px) scale(0.8);
     transform-origin: 100% 100%;

src/sass/components/video.scss

@@ -3,6 +3,7 @@
 // --------------------------------------------------------------
 
 .plyr--video {
+    background: #000;
     overflow: hidden;
 
     // Menu open

src/sass/components/volume.scss

@@ -3,20 +3,23 @@
 // --------------------------------------------------------------
 
 .plyr__volume {
+    align-items: center;
+    display: flex;
     flex: 1;
     position: relative;
 
     input[type='range'] {
+        margin-left: ($plyr-control-spacing / 2);
         position: relative;
         z-index: 2;
     }
 
     @media (min-width: $plyr-bp-sm) {
-        max-width: 50px;
+        max-width: 90px;
     }
 
     @media (min-width: $plyr-bp-md) {
-        max-width: 80px;
+        max-width: 110px;
     }
 }
 

src/sass/settings/controls.scss

@@ -3,7 +3,6 @@
 // ==========================================================================
 
 $plyr-control-icon-size: 18px !default;
-$plyr-control-icon-size-large: 20px !default;
 $plyr-control-spacing: 10px !default;
 $plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
 $plyr-control-radius: 3px !default;