3.4.0-beta.2

Fix issue where enter key wasn’t setting focus correctly
Rounded aria-valuetext to 1 decimal place
2018-08-05 22:43:35 +10:00 · 2018-08-05 22:41:21 +10:00 · 2018-08-05 21:48:42 +10:00 · 2018-08-05 21:48:21 +10:00 · 2018-08-02 00:55:48 +10:00 · 2018-08-02 00:47:57 +10:00
53 changed files with 3279 additions and 2220 deletions
@@ -0,0 +1,55 @@
+---
+name: Bug report
+about: Report an issue or unexpected behaviour with Plyr
+---
+
+<!--
+
+Before creating the issue, please make sure that...
+
+* You aren't getting any errors in your own code, causing the problem.
+* You are using the latest version of Plyr.
+* There isn't already an open issue for your problem.
+* You are following the documentation correctly (https://github.com/sampotts/plyr/)
+* Your problem doesn't happen if you remove Plyr and use native HTML5 media (when applicable).
+
+For problems with autoplay, see our FAQ (https://github.com/sampotts/plyr/wiki/FAQ)
+
+If you have multiple unrelated problems, create separate issues rather than combining them into one.
+
+Note that leaving sections blank or being vague will make it difficult for us to troubleshoot and we may close the issue.
+-->
+
+### Expected behaviour
+
+### Actual behaviour
+
+### Steps to reproduce
+
+### Environment
+
+- Browser:
+- Version:
+- Operating System:
+- Version:
+
+### Console errors (if any)
+
+### Link to where the bug is happening
+
+<!--
+This link can be either to our demo at https://plyr.io/ if the problem can be observed there, or to a code playground with a **minimal** test case that demonstrates the problem.
+
+You can use one of our prepared templates to get started creating the test case:
+
+* HTML5 video: https://codepen.io/pen?template=bKeqpr
+* HTML5 audio: https://codepen.io/pen?template=rKLywR
+* YouTube: https://codepen.io/pen?template=GGqbbJ
+* Vimeo: https://codepen.io/pen?template=bKeXNq
+* Dash.js integration: https://codepen.io/pen?template=zaBgBy
+* Hls.js integration: https://codepen.io/pen?template=oyLKQb
+* Shaka Player integration: https://codepen.io/pen?template=ZRpzZO
+
+It's important that you keep the issue description and replication demo **minimal**. If your replication includes frameworks, libraries or customizations, this makes it much harder to understand the problem and find the bug. For more help on how to create the demo, see https://github.com/sampotts/plyr/wiki/Writing-helpful-issue-descriptions
+
+-->
@@ -0,0 +1,10 @@
+---
+name: New feature
+about: Request new functionality
+---
+
+<!--
+Please describe the behaviour that you want to add, and why. Be as clear as possible to avoid confusion.
+
+If you want to request multiple features that aren't directly related, then create one issue per feature.
+-->
@@ -0,0 +1,10 @@
+---
+name: Improvement
+about: Request a change that isn't a bug or new feature
+---
+
+<!--
+Please describe the behaviour that you want to change, and why. Be as clear as possible to avoid confusion.
+
+If you want to request multiple changes that aren't directly related, then create one issue per change.
+-->
@@ -1,15 +1,3 @@
-*Please _use this issue template_ as it makes replicating and fixing the issue easier for us. If you decide not to use it or you are vague your issue may be close instantly.*
+PLEASE USE OUR SPECIFIC ISSUE TEMPLATES for bug reports, features and improvement suggestions.

-### Expected behaviour
-
-### Actual behaviour
-
-### Environment
-
- Browser:
- Version:
- Operating System:
- Version:
-
-### Steps to reproduce
-
+Our issue tracker is not for support questions. If you need help, follow our support instructions: https://github.com/sampotts/plyr/blob/master/contributing.md#support
@@ -1,6 +1,6 @@
 node_modules
 .DS_Store
-aws.json
+credentials.json
 *.mp4
 !dist/blank.mp4
 index-*.html
@@ -8,4 +8,4 @@ npm-debug.log
 yarn-error.log
 package-lock.json
 *.webm
-.idea/
+.idea/
@@ -2,7 +2,7 @@ demo
 .github
 .vscode
 *.code-workspace
-aws.json
+credentials.json
 bundles.json
 yarn.lock
 package-lock.json
@@ -2,5 +2,6 @@
    "useTabs": false,
    "tabWidth": 4,
    "singleQuote": true,
-    "trailingComma": "all"
+    "trailingComma": "all",
+    "printWidth": 120
 }
@@ -1,61 +0,0 @@
-# Contributing
-
-We welcome bug reports, feature requests and pull requests. If you want to help us out, please follow these guidelines, in order to avoid redundant work.
-
-## Commenting
-When commenting, keep a civil tone and stay on topic. Don't ask for support (use [Stack Overflow](https://stackoverflow.com/) or [our Slack](https://bit.ly/plyr-chat) for that), or post "+1" or "I agree" type of comments. Use the emojis instead.
-
-Asking for the status on issues is discouraged. Unless someone has explicitly said in an issue that it's work in progress, most likely that means no one is working on it. We have a lot to do, and it may not be a top priority for us.
-
-We *may* moderate discussions. We do this to avoid threads being "hijacked", to avoid confusion in case the content is misleading or outdated, and to avoid bothering people with github notifications.
-
-## Reporting issues
-
-Our GitHub issue tracker is for bug reports and feature requests. Don't ask for support here. Use [Stack Overflow](https://stackoverflow.com/) or [our Slack](https://bit.ly/plyr-chat) for that.
-
-Please verify that your issue hasn't already been answered by our [FAQ](https://github.com/sampotts/plyr/wiki/FAQ), and that there isn't already an open issue for it.
-
-When applicable, check that your problem doesn't happen without Plyr (see [FAQ#1](https://github.com/sampotts/plyr/wiki/FAQ#1-does-plyr-work-with--)).
-
-Verify that you are following the documentation, are using the latest version of Plyr, and aren't getting any errors in your own code, causing the issues.
-
-Create one issue per problem or request (i.e. don't combine multiple problems to one git issue). Describe the issue as detailed as possible (see [Replication](#replication))
-
-## Replication
-
-In order to solve a problem, we first need to understand it. Please answer these questions when reporting issues or asking for help in [our Slack](https://bit.ly/plyr-chat).
-
-* Does it happen only with specific options and/or specific browsers?
-* Does is happen only with HTML5 video, audio, YouTube, Vimeo or a specific library?
-* Does the issue happen on [our demo](https://plyr.io/)? If not, please recreate it with a **minimal** example online. You can use our Codepen templates to get started:
-  * [HTML5 video](https://codepen.io/pen?template=bKeqpr)
-  * [HTML5 audio](https://codepen.io/pen?template=rKLywR)
-  * [YouTube](https://codepen.io/pen?template=GGqbbJ)
-  * [Vimeo](https://codepen.io/pen?template=bKeXNq)
-  * [Dash.js integration](https://codepen.io/pen?template=zaBgBy)
-  * [Hls.js integration](https://codepen.io/pen?template=oyLKQb)
-  * [Shaka Player integration](https://codepen.io/pen?template=ZRpzZO)
-
-It's important that you keep the issue description and replication demo **minimal**. If your replication includes frameworks, libraries or customizations, this makes it harder to debug and understand the issue. While it may be relevant to bring this up (ex: "I need Plyr to trigger the event sooner or it breaks Framework X"), please keep these out of your replication demo if they aren't strictly needed to reproduce the issue. If the issue is caused by something a library does that Plyr doesn't handle, it's more helpful for us if you find out what it is, and replicate the same problem without the library. Otherwise any developer who is willing to help out with the issue has to understand the frameworks, libraries and customizations of *your* choice, or no one will try to fix your issue because it's too much work.
-
-## Requesting features and improvements
-
-If you are missing something in Plyr, you can create a GitHub issue for this as well. Since we prioritize fixing bugs first, and may have a lot of other suggestions and architectural changes to work on as well, these may not be at the top of our list. 
-
-If your suggestion is important or urgent to you, you may want to first ensure it's something we want to have in Plyr, and then contribute it as a pull request. [Our Slack](https://bit.ly/plyr-chat) is the best place for questions like this.
-
-## Contributing features and documentation
-
-* Fork Plyr, and create a new branch in your fork, based on the **develop** branch
-
-* To test locally, you can use the demo. First make sure you have installed the dependencies with `npm install` or `yarn`. Run `gulp` to build while you are working, and run a local server from the repository root directory. If you have Python installed, this command should work: `python -m SimpleHTTPServer 8080`. Then go to `http://localhost:8080/demo/`
-
-* Develop and test your modifications.
-
-* Preferably commit your changes as independent logical chunks, with meaningful messages. Make sure you do not commit unnecessary files or changes, such as the build output, or logging and breakpoints you added for testing.
-
-* If your modifications changes the documented behavior or add new features, document these changes in readme.md.
-
-* When finished, push the changes to your GitHub repository and send a pull request to **develop**. Describe what your PR does.
-
-* If the Travis build fails, or if you get a code review with change requests, you can fix these by pushing new or rebased commits to the branch.
@@ -1,3 +1,16 @@
+# v3.4.0
+
+-   Accessibility improvements (see #905)
+-   Improvements to the way the controls work on iOS
+-   Demo code clean up
+
+# v3.3.23
+
+-   Add support for YouTube's hl param (thanks @renaudleo)
+-   Fix for captions positioning when no controls (thanks @friday and @mjfwebb)
+-   Fix #1108: Make sure youtube.onReady doesn't run twice (thanks @friday)
+-   Fix for WebKit redraw loop on the `<input type="range">` elements
+
 # v3.3.22

 -   Travis & CI improvements (thanks @friday)
@@ -0,0 +1,40 @@
+# Contributing
+
+We welcome bug reports, feature requests and pull requests. If you want to help us out, please follow these guidelines, in order to avoid redundant work.
+
+## Support
+
+Before asking questions, read our [documentation](https://github.com/sampotts/plyr) and [FAQ](https://github.com/sampotts/plyr/wiki/FAQ).
+
+If these doesn't answer your question
+* Use [Stack Overflow](https://stackoverflow.com/) for questions that doesn't directly involve Plyr. This includes for example how to use Javascript, CSS or HTML5 media in general, and how to use other frameworks, libraries and technology.
+* Use [our Slack](https://bit.ly/plyr-chat) if you need help using Plyr or have questions about Plyr.
+
+## Commenting
+When commenting, keep a civil tone and stay on topic. Don't ask for [support](#support), or post "+1" or "I agree" type of comments. Use the emojis instead.
+
+Asking for the status on issues is discouraged. Unless someone has explicitly said in an issue that it's work in progress, most likely that means no one is working on it. We have a lot to do, and it may not be a top priority for us.
+
+We *may* moderate discussions. We do this to avoid threads being "hijacked", to avoid confusion in case the content is misleading or outdated, and to avoid bothering people with github notifications.
+
+## Creating issues
+
+Please follow the instructions in our issue templates. Don't use github issues to ask for [support](#support).
+
+## Contributing features and documentation
+
+* If you want to add a feature or make critical changes, you may want to ensure that this is something we also want (so you don't waste your time). Ask us about this in the corresponding issue if there is one, or on [our Slack](https://bit.ly/plyr-chat) otherwise.
+
+* Fork Plyr, and create a new branch in your fork, based on the **develop** branch
+
+* To test locally, you can use the demo. First make sure you have installed the dependencies with `npm install` or `yarn`. Run `gulp` to build while you are working, and run a local server from the repository root directory. If you have Python installed, this command should work: `python -m SimpleHTTPServer 8080`. Then go to `http://localhost:8080/demo/`
+
+* Develop and test your modifications.
+
+* Preferably commit your changes as independent logical chunks, with meaningful messages. Make sure you do not commit unnecessary files or changes, such as the build output, or logging and breakpoints you added for testing.
+
+* If your modifications changes the documented behavior or add new features, document these changes in readme.md.
+
+* When finished, push the changes to your GitHub repository and send a pull request to **develop**. Describe what your PR does.
+
+* If the Travis build fails, or if you get a code review with change requests, you can fix these by pushing new or rebased commits to the branch.
@@ -3,7 +3,9 @@
 This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. You can pass the following to the `controls` option:

 -   `Array` of options (this builds the default controls based on your choices)
+-   `Element` with the controls
 -   `String` containing the desired HTML
+-   `false` (or empty string or array) to disable all controls
 -   `Function` that will be executed and should return one of the above

 ## Using default controls
@@ -1874,7 +1874,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.3',
+	  VERSION: '3.26.4',

 	  debug: false,

@@ -2612,34 +2612,40 @@ typeof navigator === "object" && (function () {
 	    )
 	      return;

-	    options = options || {};
+	    options = Object.assign(
+	      {
+	        eventId: this.lastEventId(),
+	        dsn: this._dsn,
+	        user: this._globalContext.user || {}
+	      },
+	      options
+	    );

-	    var lastEventId = options.eventId || this.lastEventId();
-	    if (!lastEventId) {
+	    if (!options.eventId) {
 	      throw new configError('Missing eventId');
 	    }

-	    var dsn = options.dsn || this._dsn;
-	    if (!dsn) {
+	    if (!options.dsn) {
 	      throw new configError('Missing DSN');
 	    }

 	    var encode = encodeURIComponent;
-	    var qs = '';
-	    qs += '?eventId=' + encode(lastEventId);
-	    qs += '&dsn=' + encode(dsn);
+	    var encodedOptions = [];

-	    var user = options.user || this._globalContext.user;
-	    if (user) {
-	      if (user.name) qs += '&name=' + encode(user.name);
-	      if (user.email) qs += '&email=' + encode(user.email);
+	    for (var key in options) {
+	      if (key === 'user') {
+	        var user = options.user;
+	        if (user.name) encodedOptions.push('name=' + encode(user.name));
+	        if (user.email) encodedOptions.push('email=' + encode(user.email));
+	      } else {
+	        encodedOptions.push(encode(key) + '=' + encode(options[key]));
+	      }
 	    }
-
-	    var globalServer = this._getGlobalServer(this._parseDSN(dsn));
+	    var globalServer = this._getGlobalServer(this._parseDSN(options.dsn));

 	    var script = _document.createElement('script');
 	    script.async = true;
-	    script.src = globalServer + '/api/embed/error-page/' + qs;
+	    script.src = globalServer + '/api/embed/error-page/?' + encodedOptions.join('&');
 	    (_document.head || _document.body).appendChild(script);
 	  },

@@ -4087,16 +4093,18 @@ typeof navigator === "object" && (function () {
 	// ==========================================================================

 	(function () {
-	    var isLive = window.location.host === 'plyr.io';
+	    var host = window.location.host;

-	    // Raven / Sentry
-	    // For demo site (https://plyr.io) only
-	    if (isLive) {
-	        singleton.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
-	    }
+	    var env = {
+	        prod: host === 'plyr.io',
+	        dev: host === 'dev.plyr.io'
+	    };

 	    document.addEventListener('DOMContentLoaded', function () {
 	        singleton.context(function () {
+	            var selector = '#player';
+	            var container = document.getElementById('container');
+
 	            if (window.shr) {
 	                window.shr.setup({
 	                    count: {
@@ -4110,6 +4118,9 @@ typeof navigator === "object" && (function () {

 	            // Remove class on blur
 	            document.addEventListener('focusout', function (event) {
+	                if (container.contains(event.target)) {
+	                    return;
+	                }
 	                event.target.classList.remove(tabClassName);
 	            });

@@ -4122,12 +4133,18 @@ typeof navigator === "object" && (function () {
 	                // Delay the adding of classname until the focus has changed
 	                // This event fires before the focusin event
 	                setTimeout(function () {
-	                    document.activeElement.classList.add(tabClassName);
-	                }, 0);
+	                    var focused = document.activeElement;
+
+	                    if (!focused || container.contains(focused)) {
+	                        return;
+	                    }
+
+	                    focused.classList.add(tabClassName);
+	                }, 10);
 	            });

 	            // Setup the player
-	            var player = new Plyr('#player', {
+	            var player = new Plyr(selector, {
 	                debug: true,
 	                title: 'View From A Blue Moon',
 	                iconUrl: '../dist/plyr.svg',
@@ -4137,57 +4154,6 @@ typeof navigator === "object" && (function () {
 	                tooltips: {
 	                    controls: true
 	                },
-	                clickToPlay: false,
-	                /* controls: [
-	                    'play-large',
-	                    'restart',
-	                    'rewind',
-	                    'play',
-	                    'fast-forward',
-	                    'progress',
-	                    'current-time',
-	                    'duration',
-	                    'mute',
-	                    'volume',
-	                    'captions',
-	                    'settings',
-	                    'pip',
-	                    'airplay',
-	                    'fullscreen',
-	                ], */
-	                /* i18n: {
-	                    restart: '重新開始',
-	                    rewind: '快退{seektime}秒',
-	                    play: '播放',
-	                    pause: '暫停',
-	                    fastForward: '快進{seektime}秒',
-	                    seek: '尋求',
-	                    played: '發揮',
-	                    buffered: '緩衝的',
-	                    currentTime: '當前時間戳',
-	                    duration: '長短',
-	                    volume: '音量',
-	                    mute: '靜音',
-	                    unmute: '取消靜音',
-	                    enableCaptions: '開啟字幕',
-	                    disableCaptions: '關閉字幕',
-	                    enterFullscreen: '進入全螢幕',
-	                    exitFullscreen: '退出全螢幕',
-	                    frameTitle: '球員為{title}',
-	                    captions: '字幕',
-	                    settings: '設定',
-	                    speed: '速度',
-	                    normal: '正常',
-	                    quality: '質量',
-	                    loop: '循環',
-	                    start: 'Start',
-	                    end: 'End',
-	                    all: 'All',
-	                    reset: '重啟',
-	                    disabled: '殘',
-	                    enabled: '啟用',
-	                    advertisement: '廣告',
-	                }, */
 	                captions: {
 	                    active: true
 	                },
@@ -4195,7 +4161,7 @@ typeof navigator === "object" && (function () {
 	                    google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c'
 	                },
 	                ads: {
-	                    enabled: true,
+	                    enabled: env.prod || env.dev,
 	                    publisherId: '918848828995742'
 	                }
 	            });
@@ -4370,10 +4336,16 @@ typeof navigator === "object" && (function () {
 	        });
 	    });

+	    // Raven / Sentry
+	    // For demo site (https://plyr.io) only
+	    if (env.prod) {
+	        singleton.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
+	    }
+
 	    // Google analytics
 	    // For demo site (https://plyr.io) only
 	    /* eslint-disable */
-	    if (isLive) {
+	    if (env.prod) {
 	        (function (i, s, o, g, r, a, m) {
 	            i.GoogleAnalyticsObject = r;
 	            i[r] = i[r] || function () {
@@ -91,21 +91,22 @@
        </header>

        <main>
-            <video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
-                <!-- Video files -->
-                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
-                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
-                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
-                <!-- <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440"> -->
+            <div id="container">
+                <video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
+                    <!-- Video files -->
+                    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
+                    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
+                    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">

-                <!-- Caption files -->
-                <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
-                    default>
-                <track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
+                    <!-- Caption files -->
+                    <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
+                        default>
+                    <track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">

-                <!-- Fallback for browsers that don't support the <video> element -->
-                <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
-            </video>
+                    <!-- Fallback for browsers that don't support the <video> element -->
+                    <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
+                </video>
+            </div>

            <ul>
                <li class="plyr__cite plyr__cite--video" hidden>
@@ -166,7 +167,7 @@
        </svg>
        <p>If you think Plyr's good,
            <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&amp;url=http%3A%2F%2Fplyr.io&amp;via=Sam_Potts"
-                target="_blank" data-shr-network="twitter">tweet it</a>
+                target="_blank" data-shr-network="twitter">tweet it</a> 👍
        </p>
    </aside>

@@ -7,16 +7,17 @@
 import Raven from 'raven-js';

 (() => {
-    const isLive = window.location.host === 'plyr.io';
-
-    // Raven / Sentry
-    // For demo site (https://plyr.io) only
-    if (isLive) {
-        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
-    }
+    const { host } = window.location;
+    const env = {
+        prod: host === 'plyr.io',
+        dev: host === 'dev.plyr.io',
+    };

    document.addEventListener('DOMContentLoaded', () => {
        Raven.context(() => {
+            const selector = '#player';
+            const container = document.getElementById('container');
+
            if (window.shr) {
                window.shr.setup({
                    count: {
@@ -30,6 +31,9 @@ import Raven from 'raven-js';

            // Remove class on blur
            document.addEventListener('focusout', event => {
+                if (container.contains(event.target)) {
+                    return;
+                }
                event.target.classList.remove(tabClassName);
            });

@@ -42,12 +46,18 @@ import Raven from 'raven-js';
                // Delay the adding of classname until the focus has changed
                // This event fires before the focusin event
                setTimeout(() => {
-                    document.activeElement.classList.add(tabClassName);
-                }, 0);
+                    const focused = document.activeElement;
+
+                    if (!focused || container.contains(focused)) {
+                        return;
+                    }
+
+                    focused.classList.add(tabClassName);
+                }, 10);
            });

            // Setup the player
-            const player = new Plyr('#player', {
+            const player = new Plyr(selector, {
                debug: true,
                title: 'View From A Blue Moon',
                iconUrl: '../dist/plyr.svg',
@@ -57,57 +67,6 @@ import Raven from 'raven-js';
                tooltips: {
                    controls: true,
                },
-                clickToPlay: false,
-                /* controls: [
-                    'play-large',
-                    'restart',
-                    'rewind',
-                    'play',
-                    'fast-forward',
-                    'progress',
-                    'current-time',
-                    'duration',
-                    'mute',
-                    'volume',
-                    'captions',
-                    'settings',
-                    'pip',
-                    'airplay',
-                    'fullscreen',
-                ], */
-                /* i18n: {
-                    restart: '重新開始',
-                    rewind: '快退{seektime}秒',
-                    play: '播放',
-                    pause: '暫停',
-                    fastForward: '快進{seektime}秒',
-                    seek: '尋求',
-                    played: '發揮',
-                    buffered: '緩衝的',
-                    currentTime: '當前時間戳',
-                    duration: '長短',
-                    volume: '音量',
-                    mute: '靜音',
-                    unmute: '取消靜音',
-                    enableCaptions: '開啟字幕',
-                    disableCaptions: '關閉字幕',
-                    enterFullscreen: '進入全螢幕',
-                    exitFullscreen: '退出全螢幕',
-                    frameTitle: '球員為{title}',
-                    captions: '字幕',
-                    settings: '設定',
-                    speed: '速度',
-                    normal: '正常',
-                    quality: '質量',
-                    loop: '循環',
-                    start: 'Start',
-                    end: 'End',
-                    all: 'All',
-                    reset: '重啟',
-                    disabled: '殘',
-                    enabled: '啟用',
-                    advertisement: '廣告',
-                }, */
                captions: {
                    active: true,
                },
@@ -115,7 +74,7 @@ import Raven from 'raven-js';
                    google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
                },
                ads: {
-                    enabled: true,
+                    enabled: env.prod || env.dev,
                    publisherId: '918848828995742',
                },
            });
@@ -311,11 +270,17 @@ import Raven from 'raven-js';
        });
    });

+    // Raven / Sentry
+    // For demo site (https://plyr.io) only
+    if (env.prod) {
+        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
+    }
+
    // Google analytics
    // For demo site (https://plyr.io) only
    /* eslint-disable */
-    if (isLive) {
-        (function(i, s, o, g, r, a, m) {
+    if (env.prod) {
+        ((i, s, o, g, r, a, m) => {
            i.GoogleAnalyticsObject = r;
            i[r] =
                i[r] ||
@@ -2,7 +2,8 @@
 // Typography
 // ==========================================================================

-$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
+$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';

 $font-size-base: 15;
 $font-size-small: 13;
@@ -29,18 +29,12 @@ const sourcemaps = require('gulp-sourcemaps');
 const uglify = require('gulp-uglify-es').default;
 const commonjs = require('rollup-plugin-commonjs');
 const resolve = require('rollup-plugin-node-resolve');
+const FastlyPurge = require('fastly-purge');
+const through = require('through2');

 const bundles = require('./bundles.json');
 const pkg = require('./package.json');

-// Get AWS config
-let aws = {};
-try {
-    aws = require('./aws.json'); //eslint-disable-line
-} catch (e) {
-    // Do nothing
-}
-
 const minSuffix = '.min';

 // Paths
@@ -95,16 +89,18 @@ const browsers = ['> 1%'];

 // Babel config
 const babelrc = {
-    presets: [[
-        'env',
-        {
-            targets: {
-                browsers,
+    presets: [
+        [
+            'env',
+            {
+                targets: {
+                    browsers,
+                },
+                useBuiltIns: true,
+                modules: false,
            },
-            useBuiltIns: true,
-            modules: false,
-        },
-    ]],
+        ],
+    ],
    plugins: ['external-helpers'],
    babelrc: false,
    exclude: 'node_modules/**',
@@ -112,10 +108,9 @@ const babelrc = {

 // 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')}`);
@@ -187,9 +182,11 @@ const build = {
                .src(paths[bundle].src.sprite)
                .pipe(
                    svgmin({
-                        plugins: [{
-                            removeDesc: true,
-                        }],
+                        plugins: [
+                            {
+                                removeDesc: true,
+                            },
+                        ],
                    }),
                )
                .pipe(svgstore())
@@ -238,9 +235,21 @@ gulp.task('default', () => {

 // Publish a version to CDN and demo
 // --------------------------------------------
-// If aws is setup
-if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
+// Get deployment config
+let credentials = {};
+try {
+    credentials = require('./credentials.json'); //eslint-disable-line
+} catch (e) {
+    // Do nothing
+}
+
+// If deployment is setup
+if (
+    Object.keys(credentials).includes('aws') &&
+    Object.keys(credentials).includes('fastly')
+) {
    const { version } = pkg;
+    const { aws, fastly } = credentials;

    // Get branch info
    const branch = {
@@ -248,10 +257,6 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
        master: 'master',
        develop: 'develop',
    };
-    const allowed = [
-        branch.master,
-        branch.develop,
-    ];

    const maxAge = 31536000; // 1 year
    const options = {
@@ -264,7 +269,8 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
        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',
            },
        },
@@ -273,27 +279,51 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
                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',
                },
            };
        },
    };

-    const regex = '(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*).(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?';
+    const regex =
+        '(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*).(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?';
    const semver = new RegExp(`v${regex}`, 'gi');
    const localPath = new RegExp('(../)?dist', 'gi');
    const versionPath = `https://${aws.cdn.domain}/${version}`;
    const cdnpath = new RegExp(`${aws.cdn.domain}/${regex}/`, 'gi');

+    const renameFile = rename(p => {
+        p.basename = p.basename.replace(minSuffix, ''); // eslint-disable-line
+        p.dirname = p.dirname.replace('.', version); // eslint-disable-line
+    });
+
+    // Check we're on the correct branch to deploy
+    const canDeploy = () => {
+        const allowed = [branch.master, branch.develop];
+
+        if (!allowed.includes(branch.current)) {
+            console.error(
+                `Must be on ${allowed.join(', ')} to publish! (current: ${
+                    branch.current
+                })`,
+            );
+
+            return false;
+        }
+
+        return true;
+    };
+
    gulp.task('version', () => {
+        if (!canDeploy()) {
+            return null;
+        }
+
        console.log(`Updating versions to '${version}'...`);

        // Replace versioned URLs in source
-        const files = [
-            'plyr.js',
-            'plyr.polyfilled.js',
-            'defaults.js',
-        ];
+        const files = ['plyr.js', 'plyr.polyfilled.js', 'defaults.js'];

        return gulp
            .src(files.map(file => path.join(root, `src/js/${file}`)))
@@ -304,8 +334,7 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {

    // Publish version to CDN bucket
    gulp.task('cdn', () => {
-        if (!allowed.includes(branch.current)) {
-            console.error(`Must be on ${allowed.join(', ')} to publish! (current: ${branch.current})`);
+        if (!canDeploy()) {
            return null;
        }

@@ -315,14 +344,15 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
        return (
            gulp
                .src(paths.upload)
-                .pipe(
-                    rename(p => {
-                        p.basename = p.basename.replace(minSuffix, ''); // eslint-disable-line
-                        p.dirname = p.dirname.replace('.', version); // eslint-disable-line
-                    }),
-                )
+                .pipe(renameFile)
                // Remove min suffix from source map URL
-                .pipe(replace(/sourceMappingURL=([\w-?.]+)/, (match, p1) => `sourceMappingURL=${p1.replace(minSuffix, '')}`))
+                .pipe(
+                    replace(
+                        /sourceMappingURL=([\w-?.]+)/,
+                        (match, p1) =>
+                            `sourceMappingURL=${p1.replace(minSuffix, '')}`,
+                    ),
+                )
                .pipe(
                    size({
                        showFiles: true,
@@ -334,10 +364,36 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
        );
    });

+    // Purge the fastly cache incase any 403/404 are cached
+    gulp.task('purge', () => {
+        const list = [];
+
+        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', () => {
+            const purge = new FastlyPurge(fastly.token);
+
+            list.forEach(url => {
+                console.log(`Purging ${url}...`);
+
+                purge.url(url, (error, result) => {
+                    if (error) {
+                        console.log(error);
+                    } else if (result) {
+                        console.log(result);
+                    }
+                });
+            });
+        });
+    });
+
    // Publish to demo bucket
    gulp.task('demo', () => {
-        if (!allowed.includes(branch.current)) {
-            console.error(`Must be on ${allowed.join(', ')} to publish! (current: ${branch.current})`);
+        if (!canDeploy()) {
            return null;
        }

@@ -399,22 +455,29 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
            }));
    }); */

-    // Open the demo site to check it's sweet
-    gulp.task('open', () => {
-        console.log(`Opening ${aws.demo.domain}...`);
-
-        // A file must be specified or gulp will skip the task
-        // Doesn't matter which file since we set the URL above
-        // Weird, I know...
-        return gulp.src([`${paths.demo.root}index.html`]).pipe(
-            open('', {
-                url: `http://${aws.demo.domain}`,
+    // Open the demo site to check it's ok
+    gulp.task('open', callback => {
+        gulp.src(__filename).pipe(
+            open({
+                uri: `https://${aws.demo.domain}`,
            }),
        );
+
+        callback();
    });

    // Do everything
-    gulp.task('publish', callback => {
-        run('version', tasks.clean, tasks.js, tasks.sass, tasks.sprite, 'cdn', 'demo', callback);
-    });
+    gulp.task('deploy', () =>
+        run(
+            'version',
+            tasks.clean,
+            tasks.js,
+            tasks.sass,
+            tasks.sprite,
+            'cdn',
+            'purge',
+            'demo',
+            'open',
+        ),
+    );
 }
@@ -1,6 +1,6 @@
 {
    "name": "plyr",
-    "version": "3.3.22",
+    "version": "3.4.0-beta.2",
    "description":
        "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
    "homepage": "https://plyr.io",
@@ -32,7 +32,8 @@
    "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": {
@@ -41,10 +42,11 @@
        "babel-plugin-external-helpers": "^6.22.0",
        "babel-preset-env": "^1.7.0",
        "del": "^3.0.0",
-        "eslint": "^5.1.0",
+        "eslint": "^5.2.0",
        "eslint-config-airbnb-base": "^13.0.0",
        "eslint-config-prettier": "^2.9.0",
        "eslint-plugin-import": "^2.13.0",
+        "fastly-purge": "^1.0.1",
        "git-branch": "^2.0.1",
        "gulp": "^3.9.1",
        "gulp-autoprefixer": "^5.0.0",
@@ -55,7 +57,7 @@
        "gulp-header": "^2.0.5",
        "gulp-open": "^3.0.1",
        "gulp-postcss": "^7.0.1",
-        "gulp-rename": "^1.3.0",
+        "gulp-rename": "^1.4.0",
        "gulp-replace": "^1.0.0",
        "gulp-s3": "^0.11.0",
        "gulp-sass": "^4.0.1",
@@ -71,22 +73,23 @@
        "remark-cli": "^5.0.0",
        "remark-validate-links": "^7.0.0",
        "rollup-plugin-babel": "^3.0.7",
-        "rollup-plugin-commonjs": "^9.1.3",
+        "rollup-plugin-commonjs": "^9.1.4",
        "rollup-plugin-node-resolve": "^3.3.0",
        "run-sequence": "^2.2.1",
-        "stylelint": "^9.3.0",
+        "stylelint": "^9.4.0",
        "stylelint-config-prettier": "^3.3.0",
        "stylelint-config-recommended": "^2.1.0",
        "stylelint-config-sass-guidelines": "^5.0.0",
        "stylelint-order": "^0.8.1",
-        "stylelint-scss": "^3.1.3",
-        "stylelint-selector-bem-pattern": "^2.0.0"
+        "stylelint-scss": "^3.2.0",
+        "stylelint-selector-bem-pattern": "^2.0.0",
+        "through2": "^2.0.3"
    },
    "dependencies": {
        "babel-polyfill": "^6.26.0",
-        "custom-event-polyfill": "^0.3.0",
+        "custom-event-polyfill": "^1.0.6",
        "loadjs": "^3.5.4",
-        "raven-js": "^3.26.3",
+        "raven-js": "^3.26.4",
        "url-polyfill": "^1.0.13"
    }
 }
@@ -80,7 +80,7 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
 </audio>
 ```

-For YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the default `<iframe>` embeds. Below are some examples. The `plyr__video-embed` classname will make the embed responsive. You can add the `autoplay`, `loop` and `playsinline` (YouTube only) query parameters to the URL and they will be set as config options automatically. For YouTube, the `origin` should be updated to reflect the domain you're hosting the embed on, or you can opt to omit it.
+For YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the default `<iframe>` embeds. Below are some examples. The `plyr__video-embed` classname will make the embed responsive. You can add the `autoplay`, `loop`, `hl` (YouTube only) and `playsinline` (YouTube only) query parameters to the URL and they will be set as config options automatically. For YouTube, the `origin` should be updated to reflect the domain you're hosting the embed on, or you can opt to omit it.

 #### YouTube embed

@@ -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.3.22/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.4.0-beta.2/plyr.js"></script>
 ```

 ...or...

 ```html
-<script src="https://cdn.plyr.io/3.3.22/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.4.0-beta.2/plyr.polyfilled.js"></script>
 ```

 ### CSS
@@ -152,19 +152,19 @@ 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.3.22/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.4.0-beta.2/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.3.22/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.0-beta.2/plyr.svg`.

 ## Ads

-Plyr has partnered up with [vi.ai](http://vi.ai/publisher-video-monetization/?aid=plyrio) to offer monetization options for your videos. Getting setup is easy:
+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](http://vi.ai/publisher-video-monetization/?aid=plyrio)
+*   [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

@@ -84,7 +84,9 @@ const captions = {
        // * toggled:   The real captions state

        const languages = dedupe(
-            Array.from(navigator.languages || navigator.language || navigator.userLanguage).map(language => language.split('-')[0]),
+            Array.from(navigator.languages || navigator.language || navigator.userLanguage).map(
+                language => language.split('-')[0],
+            ),
        );

        let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();
@@ -354,6 +354,9 @@ const defaults = {
        isTouch: 'plyr--is-touch',
        uiSupported: 'plyr--full-ui',
        noTransition: 'plyr--no-transition',
+        display: {
+            time: 'plyr__time',
+        },
        menu: {
            value: 'plyr__menu__value',
            badge: 'plyr__badge',
@@ -4,8 +4,9 @@

 import controls from './controls';
 import ui from './ui';
+import { repaint } from './utils/animation';
 import browser from './utils/browser';
-import { getElement, getElements, getFocusElement, matches, toggleClass, toggleHidden } from './utils/elements';
+import { getElement, getElements, hasClass, matches, toggleClass, toggleHidden } from './utils/elements';
 import { on, once, toggleListener, triggerEvent } from './utils/events';
 import is from './utils/is';

@@ -13,14 +14,19 @@ class Listeners {
    constructor(player) {
        this.player = player;
        this.lastKey = null;
+        this.focusTimer = null;
+        this.lastKeyDown = null;

        this.handleKey = this.handleKey.bind(this);
        this.toggleMenu = this.toggleMenu.bind(this);
+        this.setTabFocus = this.setTabFocus.bind(this);
        this.firstTouch = this.firstTouch.bind(this);
    }

    // Handle key presses
    handleKey(event) {
+        const { player } = this;
+        const { elements } = player;
        const code = event.keyCode ? event.keyCode : event.which;
        const pressed = event.type === 'keydown';
        const repeat = pressed && code === this.lastKey;
@@ -39,27 +45,32 @@ class Listeners {
        // Seek by the number keys
        const seekByKey = () => {
            // Divide the max duration into 10th's and times by the number value
-            this.player.currentTime = this.player.duration / 10 * (code - 48);
+            player.currentTime = player.duration / 10 * (code - 48);
        };

        // Handle the key on keydown
        // Reset on keyup
        if (pressed) {
-            // Which keycodes should we prevent default
-            const preventDefault = [32, 37, 38, 39, 40, 48, 49, 50, 51, 52, 53, 54, 56, 57, 67, 70, 73, 75, 76, 77, 79];
-
            // Check focused element
            // and if the focused element is not editable (e.g. text input)
            // and any that accept key input http://webaim.org/techniques/keyboard/
-            const focused = getFocusElement();
-            if (
-                is.element(focused) &&
-                (focused !== this.player.elements.inputs.seek &&
-                    matches(focused, this.player.config.selectors.editable))
-            ) {
-                return;
+            const focused = document.activeElement;
+            if (is.element(focused)) {
+                const { editable } = player.config.selectors;
+                const { seek } = elements.inputs;
+
+                if (focused !== seek && matches(focused, editable)) {
+                    return;
+                }
+
+                if (event.which === 32 && matches(focused, 'button, [role^="menuitem"]')) {
+                    return;
+                }
            }

+            // Which keycodes should we prevent default
+            const preventDefault = [32, 37, 38, 39, 40, 48, 49, 50, 51, 52, 53, 54, 56, 57, 67, 70, 73, 75, 76, 77, 79];
+
            // If the code is found prevent default (e.g. prevent scrolling for arrows)
            if (preventDefault.includes(code)) {
                event.preventDefault();
@@ -87,52 +98,52 @@ class Listeners {
                case 75:
                    // Space and K key
                    if (!repeat) {
-                        this.player.togglePlay();
+                        player.togglePlay();
                    }
                    break;

                case 38:
                    // Arrow up
-                    this.player.increaseVolume(0.1);
+                    player.increaseVolume(0.1);
                    break;

                case 40:
                    // Arrow down
-                    this.player.decreaseVolume(0.1);
+                    player.decreaseVolume(0.1);
                    break;

                case 77:
                    // M key
                    if (!repeat) {
-                        this.player.muted = !this.player.muted;
+                        player.muted = !player.muted;
                    }
                    break;

                case 39:
                    // Arrow forward
-                    this.player.forward();
+                    player.forward();
                    break;

                case 37:
                    // Arrow back
-                    this.player.rewind();
+                    player.rewind();
                    break;

                case 70:
                    // F key
-                    this.player.fullscreen.toggle();
+                    player.fullscreen.toggle();
                    break;

                case 67:
                    // C key
                    if (!repeat) {
-                        this.player.toggleCaptions();
+                        player.toggleCaptions();
                    }
                    break;

                case 76:
                    // L key
-                    this.player.loop = !this.player.loop;
+                    player.loop = !player.loop;
                    break;

                /* case 73:
@@ -153,8 +164,8 @@ class Listeners {

            // Escape is handle natively when in full screen
            // So we only need to worry about non native
-            if (!this.player.fullscreen.enabled && this.player.fullscreen.active && code === 27) {
-                this.player.fullscreen.toggle();
+            if (!player.fullscreen.enabled && player.fullscreen.active && code === 27) {
+                player.fullscreen.toggle();
            }

            // Store last code for next cycle
@@ -171,58 +182,99 @@ class Listeners {

    // Device is touch enabled
    firstTouch() {
-        this.player.touch = true;
+        const { player } = this;
+        const { elements } = player;
+
+        player.touch = true;

        // Add touch class
-        toggleClass(this.player.elements.container, this.player.config.classNames.isTouch, true);
+        toggleClass(elements.container, player.config.classNames.isTouch, true);
+    }
+
+    setTabFocus(event) {
+        const { player } = this;
+        const { elements } = player;
+
+        clearTimeout(this.focusTimer);
+
+        // Ignore any key other than tab
+        if (event.type === 'keydown' && event.which !== 9) {
+            return;
+        }
+
+        // Store reference to event timeStamp
+        if (event.type === 'keydown') {
+            this.lastKeyDown = event.timeStamp;
+        }
+
+        // Remove current classes
+        const removeCurrent = () => {
+            const className = player.config.classNames.tabFocus;
+            const current = getElements.call(player, `.${className}`);
+            toggleClass(current, className, false);
+        };
+
+        // Determine if a key was pressed to trigger this event
+        const wasKeyDown = event.timeStamp - this.lastKeyDown <= 20;
+
+        // Ignore focus events if a key was pressed prior
+        if (event.type === 'focus' && !wasKeyDown) {
+            return;
+        }
+
+        // Remove all current
+        removeCurrent();
+
+        // Delay the adding of classname until the focus has changed
+        // This event fires before the focusin event
+        this.focusTimer = setTimeout(() => {
+            const focused = document.activeElement;
+
+            // Ignore if current focus element isn't inside the player
+            if (!elements.container.contains(focused)) {
+                return;
+            }
+
+            toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
+        }, 10);
    }

    // Global window & document listeners
    global(toggle = true) {
+        const { player } = this;
+
        // Keyboard shortcuts
-        if (this.player.config.keyboard.global) {
-            toggleListener.call(this.player, window, 'keydown keyup', this.handleKey, toggle, false);
+        if (player.config.keyboard.global) {
+            toggleListener.call(player, window, 'keydown keyup', this.handleKey, toggle, false);
        }

        // Click anywhere closes menu
-        toggleListener.call(this.player, document.body, 'click', this.toggleMenu, toggle);
+        toggleListener.call(player, document.body, 'click', this.toggleMenu, toggle);

        // Detect touch by events
-        once.call(this.player, document.body, 'touchstart', this.firstTouch);
+        once.call(player, document.body, 'touchstart', this.firstTouch);
+
+        // Tab focus detection
+        toggleListener.call(player, document.body, 'keydown focus blur', this.setTabFocus, toggle, false, true);
    }

    // Container listeners
    container() {
+        const { player } = this;
+        const { elements } = player;
+
        // Keyboard shortcuts
-        if (!this.player.config.keyboard.global && this.player.config.keyboard.focused) {
-            on.call(this.player, this.player.elements.container, 'keydown keyup', this.handleKey, false);
+        if (!player.config.keyboard.global && player.config.keyboard.focused) {
+            on.call(player, elements.container, 'keydown keyup', this.handleKey, false);
        }

-        // Detect tab focus
-        // Remove class on blur/focusout
-        on.call(this.player, this.player.elements.container, 'focusout', event => {
-            toggleClass(event.target, this.player.config.classNames.tabFocus, false);
-        });
-        // Add classname to tabbed elements
-        on.call(this.player, this.player.elements.container, 'keydown', event => {
-            if (event.keyCode !== 9) {
-                return;
-            }
-
-            // Delay the adding of classname until the focus has changed
-            // This event fires before the focusin event
-            setTimeout(() => {
-                toggleClass(getFocusElement(), this.player.config.classNames.tabFocus, true);
-            }, 0);
-        });
-
        // Toggle controls on mouse events and entering fullscreen
        on.call(
-            this.player,
-            this.player.elements.container,
+            player,
+            elements.container,
            'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen',
            event => {
-                const { controls } = this.player.elements;
+                const { controls } = elements;

                // Remove button states for fullscreen
                if (event.type === 'enterfullscreen') {
@@ -236,85 +288,83 @@ class Listeners {
                let delay = 0;

                if (show) {
-                    ui.toggleControls.call(this.player, true);
+                    ui.toggleControls.call(player, true);
                    // Use longer timeout for touch devices
-                    delay = this.player.touch ? 3000 : 2000;
+                    delay = player.touch ? 3000 : 2000;
                }

                // Clear timer
-                clearTimeout(this.player.timers.controls);
-                // Timer to prevent flicker when seeking
-                this.player.timers.controls = setTimeout(() => ui.toggleControls.call(this.player, false), delay);
+                clearTimeout(player.timers.controls);
+
+                // Set new timer to prevent flicker when seeking
+                player.timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);
            },
        );
    }

    // Listen for media events
    media() {
+        const { player } = this;
+        const { elements } = player;
+
        // Time change on media
-        on.call(this.player, this.player.media, 'timeupdate seeking seeked', event =>
-            controls.timeUpdate.call(this.player, event),
-        );
+        on.call(player, player.media, 'timeupdate seeking seeked', event => controls.timeUpdate.call(player, event));

        // Display duration
-        on.call(this.player, this.player.media, 'durationchange loadeddata loadedmetadata', event =>
-            controls.durationUpdate.call(this.player, event),
+        on.call(player, player.media, 'durationchange loadeddata loadedmetadata', event =>
+            controls.durationUpdate.call(player, event),
        );

        // Check for audio tracks on load
        // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
-        on.call(this.player, this.player.media, 'canplay', () => {
-            toggleHidden(this.player.elements.volume, !this.player.hasAudio);
-            toggleHidden(this.player.elements.buttons.mute, !this.player.hasAudio);
+        on.call(player, player.media, 'canplay', () => {
+            toggleHidden(elements.volume, !player.hasAudio);
+            toggleHidden(elements.buttons.mute, !player.hasAudio);
        });

        // Handle the media finishing
-        on.call(this.player, this.player.media, 'ended', () => {
+        on.call(player, player.media, 'ended', () => {
            // Show poster on end
-            if (this.player.isHTML5 && this.player.isVideo && this.player.config.resetOnEnd) {
+            if (player.isHTML5 && player.isVideo && player.config.resetOnEnd) {
                // Restart
-                this.player.restart();
+                player.restart();
            }
        });

        // Check for buffer progress
-        on.call(this.player, this.player.media, 'progress playing seeking seeked', event =>
-            controls.updateProgress.call(this.player, event),
+        on.call(player, player.media, 'progress playing seeking seeked', event =>
+            controls.updateProgress.call(player, event),
        );

        // Handle volume changes
-        on.call(this.player, this.player.media, 'volumechange', event =>
-            controls.updateVolume.call(this.player, event),
-        );
+        on.call(player, player.media, 'volumechange', event => controls.updateVolume.call(player, event));

        // Handle play/pause
-        on.call(this.player, this.player.media, 'playing play pause ended emptied timeupdate', event =>
-            ui.checkPlaying.call(this.player, event),
+        on.call(player, player.media, 'playing play pause ended emptied timeupdate', event =>
+            ui.checkPlaying.call(player, event),
        );

        // Loading state
-        on.call(this.player, this.player.media, 'waiting canplay seeked playing', event =>
-            ui.checkLoading.call(this.player, event),
-        );
+        on.call(player, player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(player, event));

        // If autoplay, then load advertisement if required
        // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows
-        on.call(this.player, this.player.media, 'playing', () => {
-            if (!this.player.ads) {
+        on.call(player, player.media, 'playing', () => {
+            if (!player.ads) {
                return;
            }

            // If ads are enabled, wait for them first
-            if (this.player.ads.enabled && !this.player.ads.initialized) {
+            if (player.ads.enabled && !player.ads.initialized) {
                // Wait for manager response
-                this.player.ads.managerPromise.then(() => this.player.ads.play()).catch(() => this.player.play());
+                player.ads.managerPromise.then(() => player.ads.play()).catch(() => player.play());
            }
        });

        // Click video
-        if (this.player.supported.ui && this.player.config.clickToPlay && !this.player.isAudio) {
+        if (player.supported.ui && player.config.clickToPlay && !player.isAudio) {
            // Re-fetch the wrapper
-            const wrapper = getElement.call(this.player, `.${this.player.config.classNames.video}`);
+            const wrapper = getElement.call(player, `.${player.config.classNames.video}`);

            // Bail if there's no wrapper (this should never happen)
            if (!is.element(wrapper)) {
@@ -322,28 +372,38 @@ class Listeners {
            }

            // On click play, pause ore restart
-            on.call(this.player, wrapper, 'click', () => {
-                // Touch devices will just show controls (if we're hiding controls)
-                if (this.player.config.hideControls && this.player.touch && !this.player.paused) {
+            on.call(player, elements.container, 'click touchstart', event => {
+                const targets = [elements.container, wrapper];
+
+                // Ignore if click if not container or in video wrapper
+                if (!targets.includes(event.target) && !wrapper.contains(event.target)) {
                    return;
                }

-                if (this.player.paused) {
-                    this.player.play();
-                } else if (this.player.ended) {
-                    this.player.restart();
-                    this.player.play();
+                // 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)
+                ) {
+                    return;
+                }
+
+                if (player.ended) {
+                    player.restart();
+                    player.play();
                } else {
-                    this.player.pause();
+                    player.togglePlay();
                }
            });
        }

        // Disable right click
-        if (this.player.supported.ui && this.player.config.disableContextMenu) {
+        if (player.supported.ui && player.config.disableContextMenu) {
            on.call(
-                this.player,
-                this.player.elements.wrapper,
+                player,
+                elements.wrapper,
                'contextmenu',
                event => {
                    event.preventDefault();
@@ -353,220 +413,236 @@ class Listeners {
        }

        // Volume change
-        on.call(this.player, this.player.media, 'volumechange', () => {
+        on.call(player, player.media, 'volumechange', () => {
            // Save to storage
-            this.player.storage.set({ volume: this.player.volume, muted: this.player.muted });
+            player.storage.set({
+                volume: player.volume,
+                muted: player.muted,
+            });
        });

        // Speed change
-        on.call(this.player, this.player.media, 'ratechange', () => {
+        on.call(player, player.media, 'ratechange', () => {
            // Update UI
-            controls.updateSetting.call(this.player, 'speed');
+            controls.updateSetting.call(player, 'speed');

            // Save to storage
-            this.player.storage.set({ speed: this.player.speed });
+            player.storage.set({ speed: player.speed });
        });

        // Quality request
-        on.call(this.player, this.player.media, 'qualityrequested', event => {
+        on.call(player, player.media, 'qualityrequested', event => {
            // Save to storage
-            this.player.storage.set({ quality: event.detail.quality });
+            player.storage.set({ quality: event.detail.quality });
        });

        // Quality change
-        on.call(this.player, this.player.media, 'qualitychange', event => {
+        on.call(player, player.media, 'qualitychange', event => {
            // Update UI
-            controls.updateSetting.call(this.player, 'quality', null, event.detail.quality);
+            controls.updateSetting.call(player, 'quality', null, event.detail.quality);
        });

        // Proxy events to container
        // Bubble up key events for Edge
-        const proxyEvents = this.player.config.events.concat(['keyup', 'keydown']).join(' ');
-        on.call(this.player, this.player.media, proxyEvents, event => {
+        const proxyEvents = player.config.events.concat(['keyup', 'keydown']).join(' ');
+
+        on.call(player, player.media, proxyEvents, event => {
            let { detail = {} } = event;

            // Get error details from media
            if (event.type === 'error') {
-                detail = this.player.media.error;
+                detail = player.media.error;
            }

-            triggerEvent.call(this.player, this.player.elements.container, event.type, true, detail);
+            triggerEvent.call(player, elements.container, event.type, true, detail);
        });
    }

+    // Run default and custom handlers
+    proxy(event, defaultHandler, customHandlerKey) {
+        const { player } = this;
+        const customHandler = player.config.listeners[customHandlerKey];
+        const hasCustomHandler = is.function(customHandler);
+        let returned = true;
+
+        // Execute custom handler
+        if (hasCustomHandler) {
+            returned = customHandler.call(player, event);
+        }
+
+        // Only call default handler if not prevented in custom handler
+        if (returned && is.function(defaultHandler)) {
+            defaultHandler.call(player, event);
+        }
+    }
+
+    // Trigger custom and default handlers
+    bind(element, type, defaultHandler, customHandlerKey, passive = true) {
+        const { player } = this;
+        const customHandler = player.config.listeners[customHandlerKey];
+        const hasCustomHandler = is.function(customHandler);
+
+        on.call(
+            player,
+            element,
+            type,
+            event => this.proxy(event, defaultHandler, customHandlerKey),
+            passive && !hasCustomHandler,
+        );
+    }
+
    // Listen for control events
    controls() {
+        const { player } = this;
+        const { elements } = player;
+
        // IE doesn't support input event, so we fallback to change
        const inputEvent = browser.isIE ? 'change' : 'input';

-        // Run default and custom handlers
-        const proxy = (event, defaultHandler, customHandlerKey) => {
-            const customHandler = this.player.config.listeners[customHandlerKey];
-            const hasCustomHandler = is.function(customHandler);
-            let returned = true;
-
-            // Execute custom handler
-            if (hasCustomHandler) {
-                returned = customHandler.call(this.player, event);
-            }
-
-            // Only call default handler if not prevented in custom handler
-            if (returned && is.function(defaultHandler)) {
-                defaultHandler.call(this.player, event);
-            }
-        };
-
-        // Trigger custom and default handlers
-        const bind = (element, type, defaultHandler, customHandlerKey, passive = true) => {
-            const customHandler = this.player.config.listeners[customHandlerKey];
-            const hasCustomHandler = is.function(customHandler);
-
-            on.call(
-                this.player,
-                element,
-                type,
-                event => proxy(event, defaultHandler, customHandlerKey),
-                passive && !hasCustomHandler,
-            );
-        };
-
        // Play/pause toggle
-        if (this.player.elements.buttons.play) {
-            Array.from(this.player.elements.buttons.play).forEach(button => {
-                bind(button, 'click', this.player.togglePlay, 'play');
+        if (elements.buttons.play) {
+            Array.from(elements.buttons.play).forEach(button => {
+                this.bind(button, 'click', player.togglePlay, 'play');
            });
        }

        // Pause
-        bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart');
+        this.bind(elements.buttons.restart, 'click', player.restart, 'restart');

        // Rewind
-        bind(this.player.elements.buttons.rewind, 'click', this.player.rewind, 'rewind');
+        this.bind(elements.buttons.rewind, 'click', player.rewind, 'rewind');

        // Rewind
-        bind(this.player.elements.buttons.fastForward, 'click', this.player.forward, 'fastForward');
+        this.bind(elements.buttons.fastForward, 'click', player.forward, 'fastForward');

        // Mute toggle
-        bind(
-            this.player.elements.buttons.mute,
+        this.bind(
+            elements.buttons.mute,
            'click',
            () => {
-                this.player.muted = !this.player.muted;
+                player.muted = !player.muted;
            },
            'mute',
        );

        // Captions toggle
-        bind(this.player.elements.buttons.captions, 'click', () => this.player.toggleCaptions());
+        this.bind(elements.buttons.captions, 'click', () => player.toggleCaptions());

        // Fullscreen toggle
-        bind(
-            this.player.elements.buttons.fullscreen,
+        this.bind(
+            elements.buttons.fullscreen,
            'click',
            () => {
-                this.player.fullscreen.toggle();
+                player.fullscreen.toggle();
            },
            'fullscreen',
        );

        // Picture-in-Picture
-        bind(
-            this.player.elements.buttons.pip,
+        this.bind(
+            elements.buttons.pip,
            'click',
            () => {
-                this.player.pip = 'toggle';
+                player.pip = 'toggle';
            },
            'pip',
        );

        // Airplay
-        bind(this.player.elements.buttons.airplay, 'click', this.player.airplay, 'airplay');
+        this.bind(elements.buttons.airplay, 'click', player.airplay, 'airplay');

-        // Settings menu
-        bind(this.player.elements.buttons.settings, 'click', event => {
-            controls.toggleMenu.call(this.player, event);
-        });
-
-        // Settings menu
-        bind(this.player.elements.settings.form, 'click', event => {
+        // Settings menu - click toggle
+        this.bind(elements.buttons.settings, 'click', event => {
+            // Prevent the document click listener closing the menu
            event.stopPropagation();

-            // Go back to home tab on click
-            const showHomeTab = () => {
-                const id = `plyr-settings-${this.player.id}-home`;
-                controls.showTab.call(this.player, id);
-            };
+            controls.toggleMenu.call(player, event);
+        });

-            // Settings menu items - use event delegation as items are added/removed
-            if (matches(event.target, this.player.config.selectors.inputs.language)) {
-                proxy(
-                    event,
-                    () => {
-                        this.player.currentTrack = Number(event.target.value);
-                        showHomeTab();
-                    },
-                    'language',
-                );
-            } else if (matches(event.target, this.player.config.selectors.inputs.quality)) {
-                proxy(
-                    event,
-                    () => {
-                        this.player.quality = event.target.value;
-                        showHomeTab();
-                    },
-                    'quality',
-                );
-            } else if (matches(event.target, this.player.config.selectors.inputs.speed)) {
-                proxy(
-                    event,
-                    () => {
-                        this.player.speed = parseFloat(event.target.value);
-                        showHomeTab();
-                    },
-                    'speed',
-                );
-            } else {
-                const tab = event.target;
-                controls.showTab.call(this.player, tab.getAttribute('aria-controls'));
+        // Settings menu - keyboard toggle
+        // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
+        this.bind(
+            elements.buttons.settings,
+            'keyup',
+            event => {
+                const code = event.which;
+
+                // We only care about space and return
+                if (![13, 32].includes(code)) {
+                    return;
+                }
+
+                // Because return triggers a click anyway, all we need to do is set focus
+                if (code === 13) {
+                    controls.focusFirstMenuItem.call(player, null, true);
+                    return;
+                }
+
+                // Prevent scroll
+                event.preventDefault();
+
+                // Prevent playing video (Firefox)
+                event.stopPropagation();
+
+                // Toggle menu
+                controls.toggleMenu.call(player, event);
+            },
+            null,
+            false, // Can't be passive as we're preventing default
+        );
+
+        // Escape closes menu
+        this.bind(elements.settings.menu, 'keydown', event => {
+            if (event.which === 27) {
+                controls.toggleMenu.call(player, event);
            }
        });

        // Set range input alternative "value", which matches the tooltip time (#954)
-        bind(this.player.elements.inputs.seek, 'mousedown mousemove', event => {
-            const clientRect = this.player.elements.progress.getBoundingClientRect();
-            const percent = 100 / clientRect.width * (event.pageX - clientRect.left);
+        this.bind(elements.inputs.seek, 'mousedown mousemove', event => {
+            const rect = elements.progress.getBoundingClientRect();
+            const percent = 100 / rect.width * (event.pageX - rect.left);
            event.currentTarget.setAttribute('seek-value', percent);
        });

        // Pause while seeking
-        bind(this.player.elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', event => {
+        this.bind(elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', event => {
            const seek = event.currentTarget;
-
            const code = event.keyCode ? event.keyCode : event.which;
-            const eventType = event.type;
+            const attribute = 'play-on-seeked';

-            if ((eventType === 'keydown' || eventType === 'keyup') && (code !== 39 && code !== 37)) {
+            if (is.keyboardEvent(event) && (code !== 39 && code !== 37)) {
                return;
            }
+
            // Was playing before?
-            const play = seek.hasAttribute('play-on-seeked');
+            const play = seek.hasAttribute(attribute);

            // Done seeking
            const done = ['mouseup', 'touchend', 'keyup'].includes(event.type);

            // If we're done seeking and it was playing, resume playback
            if (play && done) {
-                seek.removeAttribute('play-on-seeked');
-                this.player.play();
-            } else if (!done && this.player.playing) {
-                seek.setAttribute('play-on-seeked', '');
-                this.player.pause();
+                seek.removeAttribute(attribute);
+                player.play();
+            } else if (!done && player.playing) {
+                seek.setAttribute(attribute, '');
+                player.pause();
            }
        });

+        // Fix range inputs on iOS
+        // Super weird iOS bug where after you interact with an <input type="range">,
+        // it takes over further interactions on the page. This is a hack
+        if (browser.isIos) {
+            const inputs = getElements.call(player, 'input[type="range"]');
+            Array.from(inputs).forEach(input => this.bind(input, inputEvent, event => repaint(event.target)));
+        }
+
        // Seek
-        bind(
-            this.player.elements.inputs.seek,
+        this.bind(
+            elements.inputs.seek,
            inputEvent,
            event => {
                const seek = event.currentTarget;
@@ -580,70 +656,71 @@ class Listeners {

                seek.removeAttribute('seek-value');

-                this.player.currentTime = seekTo / seek.max * this.player.duration;
+                player.currentTime = seekTo / seek.max * player.duration;
            },
            'seek',
        );

-        // Current time invert
-        // Only if one time element is used for both currentTime and duration
-        if (this.player.config.toggleInvert && !is.element(this.player.elements.display.duration)) {
-            bind(this.player.elements.display.currentTime, 'click', () => {
-                // Do nothing if we're at the start
-                if (this.player.currentTime === 0) {
-                    return;
-                }
-
-                this.player.config.invertTime = !this.player.config.invertTime;
-
-                controls.timeUpdate.call(this.player);
-            });
-        }
-
-        // Volume
-        bind(
-            this.player.elements.inputs.volume,
-            inputEvent,
-            event => {
-                this.player.volume = event.target.value;
-            },
-            'volume',
+        // Seek tooltip
+        this.bind(elements.progress, 'mouseenter mouseleave mousemove', event =>
+            controls.updateSeekTooltip.call(player, event),
        );

        // Polyfill for lower fill in <input type="range"> for webkit
        if (browser.isWebkit) {
-            Array.from(getElements.call(this.player, 'input[type="range"]')).forEach(element => {
-                bind(element, 'input', event => controls.updateRangeFill.call(this.player, event.target));
+            Array.from(getElements.call(player, 'input[type="range"]')).forEach(element => {
+                this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target));
            });
        }

-        // Seek tooltip
-        bind(this.player.elements.progress, 'mouseenter mouseleave mousemove', event =>
-            controls.updateSeekTooltip.call(this.player, event),
+        // Current time invert
+        // Only if one time element is used for both currentTime and duration
+        if (player.config.toggleInvert && !is.element(elements.display.duration)) {
+            this.bind(elements.display.currentTime, 'click', () => {
+                // Do nothing if we're at the start
+                if (player.currentTime === 0) {
+                    return;
+                }
+
+                player.config.invertTime = !player.config.invertTime;
+
+                controls.timeUpdate.call(player);
+            });
+        }
+
+        // Volume
+        this.bind(
+            elements.inputs.volume,
+            inputEvent,
+            event => {
+                player.volume = event.target.value;
+            },
+            'volume',
        );

        // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
-        bind(this.player.elements.controls, 'mouseenter mouseleave', event => {
-            this.player.elements.controls.hover = !this.player.touch && event.type === 'mouseenter';
+        this.bind(elements.controls, 'mouseenter mouseleave', event => {
+            elements.controls.hover = !player.touch && event.type === 'mouseenter';
        });

        // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
-        bind(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
-            this.player.elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
+        this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
+            elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
        });

        // Focus in/out on controls
-        bind(this.player.elements.controls, 'focusin focusout', event => {
-            const { config, elements, timers } = this.player;
+        this.bind(elements.controls, 'focusin focusout', event => {
+            const { config, elements, timers } = player;
+            const isFocusIn = event.type === 'focusin';

            // Skip transition to prevent focus from scrolling the parent element
-            toggleClass(elements.controls, config.classNames.noTransition, event.type === 'focusin');
+            toggleClass(elements.controls, config.classNames.noTransition, isFocusIn);

            // Toggle
-            ui.toggleControls.call(this.player, event.type === 'focusin');
+            ui.toggleControls.call(player, isFocusIn);

            // If focusin, hide again after delay
-            if (event.type === 'focusin') {
+            if (isFocusIn) {
                // Restore transition
                setTimeout(() => {
                    toggleClass(elements.controls, config.classNames.noTransition, false);
@@ -654,14 +731,15 @@ class Listeners {

                // Clear timer
                clearTimeout(timers.controls);
+
                // Hide
-                timers.controls = setTimeout(() => ui.toggleControls.call(this.player, false), delay);
+                timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);
            }
        });

        // Mouse wheel for volume
-        bind(
-            this.player.elements.inputs.volume,
+        this.bind(
+            elements.inputs.volume,
            'wheel',
            event => {
                // Detect "natural" scroll - suppored on OS X Safari only
@@ -675,10 +753,10 @@ class Listeners {
                const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);

                // Change the volume by 2%
-                this.player.increaseVolume(direction / 50);
+                player.increaseVolume(direction / 50);

                // Don't break page scrolling at max and min
-                const { volume } = this.player.media;
+                const { volume } = player.media;
                if ((direction === 1 && volume < 1) || (direction === -1 && volume > 0)) {
                    event.preventDefault();
                }
@@ -207,6 +207,11 @@ class Ads {
     * @param {Event} adsManagerLoadedEvent
     */
    onAdsManagerLoaded(event) {
+        // Load could occur after a source change (race condition)
+        if (!this.enabled) {
+            return;
+        }
+
        // Get the ads manager
        const settings = new google.ima.AdsRenderingSettings();

@@ -240,10 +245,6 @@ class Ads {
            });
        }

-        // Get skippable state
-        // TODO: Skip button
-        // this.player.debug.warn(this.manager.getAdSkippableState());
-
        // Set volume to match player
        this.manager.setVolume(this.player.volume);

@@ -188,6 +188,7 @@ const youtube = {
            videoId,
            playerVars: {
                autoplay: player.config.autoplay ? 1 : 0, // Autoplay
+                hl: player.config.hl, // iframe interface language
                controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
                rel: 0, // No related vids
                showinfo: 0, // Hide info
@@ -239,6 +240,10 @@ const youtube = {
                    triggerEvent.call(player, player.media, 'ratechange');
                },
                onReady(event) {
+                    // Bail if onReady has already been called. See issue #1108
+                    if (is.function(player.media.play)) {
+                        return;
+                    }
                    // Get the instance
                    const instance = event.target;

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.3.22
+// plyr.js v3.4.0-beta.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -75,16 +75,17 @@ class Plyr {
        // Elements cache
        this.elements = {
            container: null,
+            captions: null,
            buttons: {},
            display: {},
            progress: {},
            inputs: {},
            settings: {
+                popup: null,
                menu: null,
-                panes: {},
-                tabs: {},
+                panels: {},
+                buttons: {},
            },
-            captions: null,
        };

        // Captions
@@ -171,7 +172,7 @@ class Plyr {
                    this.elements.container.className = '';

                    // Get attributes from URL and set config
-                    if (url.searchParams.length) {
+                    if (url.search.length) {
                        const truthy = ['1', 'true'];

                        if (truthy.includes(url.searchParams.get('autoplay'))) {
@@ -185,6 +186,7 @@ class Plyr {
                        // YouTube requires the playsinline in the URL
                        if (this.isYouTube) {
                            this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
+                            this.config.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
                        } else {
                            this.config.playsinline = true;
                        }
@@ -220,7 +222,7 @@ class Plyr {
                if (this.media.hasAttribute('autoplay')) {
                    this.config.autoplay = true;
                }
-                if (this.media.hasAttribute('playsinline')) {
+                if (this.media.hasAttribute('playsinline') || this.media.hasAttribute('webkit-playsinline')) {
                    this.config.playsinline = true;
                }
                if (this.media.hasAttribute('muted')) {
@@ -292,7 +294,9 @@ class Plyr {
        this.fullscreen = new Fullscreen(this);

        // Setup ads if provided
-        this.ads = new Ads(this);
+        if (this.config.ads.enabled) {
+            this.ads = new Ads(this);
+        }

        // Autoplay if required
        if (this.config.autoplay) {
@@ -695,7 +699,9 @@ class Plyr {
        }

        // Trigger request event
-        triggerEvent.call(this, this.media, 'qualityrequested', false, { quality });
+        triggerEvent.call(this, this.media, 'qualityrequested', false, {
+            quality,
+        });

        // Update config
        config.selected = quality;
@@ -932,13 +938,16 @@ class Plyr {
            if (hiding && this.config.controls.includes('settings') && !is.empty(this.config.settings)) {
                controls.toggleMenu.call(this, false);
            }
+
            // Trigger event on change
            if (hiding !== isHidden) {
                const eventName = hiding ? 'controlshidden' : 'controlsshown';
                triggerEvent.call(this, this.media, eventName);
            }
+
            return !hiding;
        }
+
        return false;
    }

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.3.22
+// plyr.js v3.4.0-beta.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -15,7 +15,9 @@ 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;
 })();
@@ -23,8 +25,12 @@ export const transitionEndEvent = (() => {
 // Force repaint of element
 export function repaint(element) {
    setTimeout(() => {
-        toggleHidden(element, true);
-        element.offsetHeight; // eslint-disable-line
-        toggleHidden(element, false);
+        try {
+            toggleHidden(element, true);
+            element.offsetHeight; // eslint-disable-line
+            toggleHidden(element, false);
+        } catch (e) {
+            // Do nothing
+        }
    }, 0);
 }
@@ -70,12 +70,19 @@ export function createElement(type, attributes, text) {

 // Inaert an element after another
 export function insertAfter(element, target) {
+    if (!is.element(element) || !is.element(target)) {
+        return;
+    }
+
    target.parentNode.insertBefore(element, target.nextSibling);
 }

 // Insert a DocumentFragment
 export function insertElement(type, parent, attributes, text) {
-    // Inject the new <element>
+    if (!is.element(parent)) {
+        return;
+    }
+
    parent.appendChild(createElement(type, attributes, text));
 }

@@ -95,6 +102,10 @@ export function removeElement(element) {

 // Remove all child elements
 export function emptyElement(element) {
+    if (!is.element(element)) {
+        return;
+    }
+
    let { length } = element.childNodes;

    while (length > 0) {
@@ -180,7 +191,7 @@ export function toggleHidden(element, hidden) {
    let hide = hidden;

    if (!is.boolean(hide)) {
-        hide = !element.hasAttribute('hidden');
+        hide = !element.hidden;
    }

    if (hide) {
@@ -192,6 +203,10 @@ export function toggleHidden(element, hidden) {

 // Mirror Element.classList.toggle, with IE compatibility for "force" argument
 export function toggleClass(element, className, force) {
+    if (is.nodeList(element)) {
+        return Array.from(element).map(e => toggleClass(e, className, force));
+    }
+
    if (is.element(element)) {
        let method = 'toggle';
        if (typeof force !== 'undefined') {
@@ -202,7 +217,7 @@ export function toggleClass(element, className, force) {
        return element.classList.contains(className);
    }

-    return null;
+    return false;
 }

 // Has class name
@@ -238,19 +253,6 @@ export function getElement(selector) {
    return this.elements.container.querySelector(selector);
 }

-// Get the focused element
-export function getFocusElement() {
-    let focused = document.activeElement;
-
-    if (!focused || focused === document.body) {
-        focused = null;
-    } else {
-        focused = document.querySelector(':focus');
-    }
-
-    return focused;
-}
-
 // Trap focus inside container
 export function trapFocus(element = null, toggle = false) {
    if (!is.element(element)) {
@@ -268,7 +270,7 @@ export function trapFocus(element = null, toggle = false) {
        }

        // Get the current focused element
-        const focused = getFocusElement();
+        const focused = document.activeElement;

        if (focused === last && !event.shiftKey) {
            // Move focus to first element that can be tabbed if Shift isn't used
@@ -283,3 +285,18 @@ export function trapFocus(element = null, toggle = false) {

    toggleListener.call(this, this.elements.container, 'keydown', trap, toggle, false);
 }
+
+// Set focus and tab focus class
+export function setFocus(element = null, tabFocus = false) {
+    if (!is.element(element)) {
+        return;
+    }
+
+    // Set regular focus
+    element.focus();
+
+    // If we want to mimic keyboard focus via tab
+    if (tabFocus) {
+        toggleClass(element, this.config.classNames.tabFocus);
+    }
+}
@@ -16,6 +16,7 @@ const isNodeList = input => instanceOf(input, NodeList);
 const isElement = input => instanceOf(input, Element);
 const isTextNode = input => getConstructor(input) === Text;
 const isEvent = input => instanceOf(input, Event);
+const isKeyboardEvent = input => instanceOf(input, KeyboardEvent);
 const isCue = input => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
 const isTrack = input => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));

@@ -56,6 +57,7 @@ export default {
    element: isElement,
    textNode: isTextNode,
    event: isEvent,
+    keyboardEvent: isKeyboardEvent,
    cue: isCue,
    track: isTrack,
    url: isUrl,
@@ -17,7 +17,6 @@
    padding: $plyr-control-spacing;
    position: absolute;
    text-align: center;
-    transform: translateY(-($plyr-control-spacing * 4));
    transition: transform 0.4s ease-in-out;
    width: 100%;

@@ -53,6 +52,8 @@
    display: block;
 }

-.plyr--hide-controls .plyr__captions {
-    transform: translateY(-($plyr-control-spacing * 1.5));
+// If the lower controls are shown and not empty
+.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
+    transform: translateY(-($plyr-control-spacing * 4));
 }
+
@@ -41,7 +41,7 @@
    display: none;
 }

-// Audio styles
+// Audio control
 .plyr--audio .plyr__control {
    &.plyr__tab-focus,
    &:hover,
@@ -51,6 +51,21 @@
    }
 }

+// Video control
+.plyr--video .plyr__control {
+    svg {
+        filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
+    }
+
+    // Hover and tab focus
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: $plyr-video-control-bg-hover;
+        color: $plyr-video-control-color-hover;
+    }
+}
+
 // Large play button (video only)
 .plyr__control--overlaid {
    background: rgba($plyr-video-control-bg-hover, 0.8);
@@ -32,6 +32,11 @@
        margin-left: ($plyr-control-spacing / 2);
    }

+    // Hide empty controls
+    &:empty {
+        display: none;
+    }
+
    @media (min-width: $plyr-bp-sm) {
        > .plyr__control,
        .plyr__progress,
@@ -48,6 +53,14 @@
    }
 }

+// Audio controls
+.plyr--audio .plyr__controls {
+    background: $plyr-audio-controls-bg;
+    border-radius: inherit;
+    color: $plyr-audio-control-color;
+    padding: $plyr-control-spacing;
+}
+
 // Video controls
 .plyr--video .plyr__controls {
    background: linear-gradient(
@@ -64,32 +77,10 @@
    position: absolute;
    right: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
-    z-index: 2;
-
-    .plyr__control {
-        svg {
-            filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
-        }
-
-        // Hover and tab focus
-        &.plyr__tab-focus,
-        &:hover,
-        &[aria-expanded='true'] {
-            background: $plyr-video-control-bg-hover;
-            color: $plyr-video-control-color-hover;
-        }
-    }
+    z-index: 3;
 }

-// Audio controls
-.plyr--audio .plyr__controls {
-    background: $plyr-audio-controls-bg;
-    border-radius: inherit;
-    color: $plyr-audio-control-color;
-    padding: $plyr-control-spacing;
-}
-
-// Hide controls
+// Hide video controls
 .plyr--video.plyr--hide-controls .plyr__controls {
    opacity: 0;
    pointer-events: none;
@@ -39,7 +39,8 @@

        > div {
            overflow: hidden;
-            transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+            transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        // Arrow
@@ -54,18 +55,16 @@
            width: 0;
        }

-        ul {
-            list-style: none;
-            margin: 0;
-            overflow: hidden;
+        [role='menu'] {
            padding: $plyr-control-padding;
+        }

-            li {
-                margin-top: 2px;
+        [role='menuitem'],
+        [role='menuitemradio'] {
+            margin-top: 2px;

-                &:first-child {
-                    margin-top: 0;
-                }
+            &:first-child {
+                margin-top: 0;
            }
        }

@@ -75,10 +74,17 @@
            color: $plyr-menu-color;
            display: flex;
            font-size: $plyr-font-size-menu;
-            padding: ceil($plyr-control-padding / 2) ($plyr-control-padding * 2);
+            padding: ceil($plyr-control-padding / 2)
+                ceil($plyr-control-padding * 1.5);
            user-select: none;
            width: 100%;

+            > span {
+                align-items: inherit;
+                display: flex;
+                width: 100%;
+            }
+
            &::after {
                border: 4px solid transparent;
                content: '';
@@ -135,50 +141,49 @@
            }
        }

-        label.plyr__control {
+        .plyr__control[role='menuitemradio'] {
            padding-left: $plyr-control-padding;

-            input[type='radio'] + span {
-                background: rgba(#000, 0.1);
+            &::before,
+            &::after {
                border-radius: 100%;
+            }
+
+            &::before {
+                background: rgba(#000, 0.1);
+                content: '';
                display: block;
                flex-shrink: 0;
                height: 16px;
                margin-right: $plyr-control-spacing;
-                position: relative;
                transition: all 0.3s ease;
                width: 16px;
-
-                &::after {
-                    background: #fff;
-                    border-radius: 100%;
-                    content: '';
-                    height: 6px;
-                    left: 5px;
-                    opacity: 0;
-                    position: absolute;
-                    top: 5px;
-                    transform: scale(0);
-                    transition: transform 0.3s ease, opacity 0.3s ease;
-                    width: 6px;
-                }
            }

-            input[type='radio']:checked + span {
-                background: $plyr-color-main;
+            &::after {
+                background: #fff;
+                border: 0;
+                height: 6px;
+                left: 12px;
+                opacity: 0;
+                top: 50%;
+                transform: translateY(-50%) scale(0);
+                transition: transform 0.3s ease, opacity 0.3s ease;
+                width: 6px;
+            }

+            &[aria-checked='true'] {
+                &::before {
+                    background: $plyr-color-main;
+                }
                &::after {
                    opacity: 1;
-                    transform: scale(1);
+                    transform: translateY(-50%) scale(1);
                }
            }

-            input[type='radio']:focus + span {
-                @include plyr-tab-focus();
-            }
-
-            &.plyr__tab-focus input[type='radio'] + span,
-            &:hover input[type='radio'] + span {
+            &.plyr__tab-focus::before,
+            &:hover::before {
                background: rgba(#000, 0.1);
            }
        }
@@ -188,7 +193,7 @@
            align-items: center;
            display: flex;
            margin-left: auto;
-            margin-right: -$plyr-control-padding;
+            margin-right: -($plyr-control-padding - 2);
            overflow: hidden;
            padding-left: ceil($plyr-control-padding * 3.5);
            pointer-events: none;
@@ -12,12 +12,11 @@
    opacity: 0;
    position: absolute;
    top: 0;
-    transition: opacity 0.3s ease;
+    transition: opacity 0.2s ease;
    width: 100%;
    z-index: 1;
 }

 .plyr--stopped.plyr__poster-enabled .plyr__poster {
    opacity: 1;
-    pointer-events: none;
 }
@@ -3,7 +3,6 @@
 // --------------------------------------------------------------

 .plyr__progress {
-    display: flex;
    flex: 1;
    left: $plyr-range-thumb-height / 2;
    margin-right: $plyr-range-thumb-height;
@@ -19,7 +19,11 @@

    &::-webkit-slider-runnable-track {
        @include plyr-range-track();
-        background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
+        background-image: linear-gradient(
+            to right,
+            currentColor var(--value, 0%),
+            transparent var(--value, 0%)
+        );
    }

    &::-webkit-slider-thumb {
@@ -140,15 +144,21 @@
    // Pressed styles
    &:active {
        &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+            @include plyr-range-thumb-active(
+                $plyr-audio-range-thumb-shadow-color
+            );
        }

        &::-moz-range-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+            @include plyr-range-thumb-active(
+                $plyr-audio-range-thumb-shadow-color
+            );
        }

        &::-ms-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+            @include plyr-range-thumb-active(
+                $plyr-audio-range-thumb-shadow-color
+            );
        }
    }
 }
@@ -5,7 +5,7 @@
 // Nicer focus styles
 // ---------------------------------------
@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
-    box-shadow: 0 0 0 3px rgba($color, 0.35);
+    box-shadow: 0 0 0 5px rgba($color, 0.5);
    outline: 0;
 }

@@ -28,7 +28,7 @@
    border: 0;
    border-radius: ($plyr-range-track-height / 2);
    height: $plyr-range-track-height;
-    transition: all 0.3s ease;
+    transition: box-shadow 0.3s ease;
    user-select: none;
 }

@@ -37,7 +37,6 @@
    border: 0;
    border-radius: 100%;
    box-shadow: $plyr-range-thumb-shadow;
-    box-sizing: border-box;
    height: $plyr-range-thumb-height;
    position: relative;
    transition: all 0.2s ease;
@@ -22,3 +22,7 @@
        width: 1px;
    }
 }
+
+.plyr [hidden] {
+    display: none !important;
+}
@@ -407,6 +407,17 @@ autoprefixer@^8.0.0:
    postcss "^6.0.19"
    postcss-value-parser "^3.2.3"

+autoprefixer@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.0.1.tgz#b5b74aba3fa60b4f1403729e46a6a1246f16818f"
+  dependencies:
+    browserslist "^4.0.1"
+    caniuse-lite "^1.0.30000865"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^7.0.1"
+    postcss-value-parser "^3.2.3"
+
 aws-sign2@~0.6.0:
  version "0.6.0"
  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -1061,6 +1072,14 @@ browserslist@^3.2.6:
    caniuse-lite "^1.0.30000844"
    electron-to-chromium "^1.3.47"

+browserslist@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.0.1.tgz#61c05ce2a5843c7d96166408bc23d58b5416e818"
+  dependencies:
+    caniuse-lite "^1.0.30000865"
+    electron-to-chromium "^1.3.52"
+    node-releases "^1.0.0-alpha.10"
+
 buffer-from@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.0.tgz#87fcaa3a298358e0ade6e442cfce840740d1ad04"
@@ -1136,6 +1155,10 @@ caniuse-lite@^1.0.30000844:
  version "1.0.30000847"
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000847.tgz#be77f439be29bbc57ae08004b1e470b653b1ec1d"

+caniuse-lite@^1.0.30000865:
+  version "1.0.30000865"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz#70026616e8afe6e1442f8bb4e1092987d81a2f25"
+
 capture-stack-trace@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
@@ -1597,9 +1620,9 @@ currently-unhandled@^0.4.1:
  dependencies:
    array-find-index "^1.0.1"

-custom-event-polyfill@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-0.3.0.tgz#99807839be62edb446b645832e0d80ead6fa1888"
+custom-event-polyfill@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.6.tgz#6b026e81cd9f7bc896bd6b016a427407bb068db1"

 d@1:
  version "1.0.0"
@@ -1859,6 +1882,10 @@ electron-to-chromium@^1.3.47:
  version "1.3.48"
  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.48.tgz#d3b0d8593814044e092ece2108fc3ac9aea4b900"

+electron-to-chromium@^1.3.52:
+  version "1.3.52"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.52.tgz#d2d9f1270ba4a3b967b831c40ef71fb4d9ab5ce0"
+
 "emoji-regex@>=6.0.0 <=6.1.1":
  version "6.1.1"
  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.1.1.tgz#c6cd0ec1b0642e2a3c67a1137efc5e796da4f88e"
@@ -2044,9 +2071,9 @@ eslint@^4.0.0:
    table "4.0.2"
    text-table "~0.2.0"

-eslint@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.1.0.tgz#2ed611f1ce163c0fb99e1e0cda5af8f662dff645"
+eslint@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.2.0.tgz#3901ae249195d473e633c4acbc370068b1c964dc"
  dependencies:
    ajv "^6.5.0"
    babel-code-frame "^6.26.0"
@@ -2064,7 +2091,7 @@ eslint@^5.1.0:
    functional-red-black-tree "^1.0.1"
    glob "^7.1.2"
    globals "^11.7.0"
-    ignore "^3.3.3"
+    ignore "^4.0.2"
    imurmurhash "^0.1.4"
    inquirer "^5.2.0"
    is-resolvable "^1.1.0"
@@ -2319,6 +2346,12 @@ fast-levenshtein@~2.0.4:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"

+fastly-purge@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fastly-purge/-/fastly-purge-1.0.1.tgz#3bdfe9ea1d0fbf2a65712f2f5fe2eca63fcb5960"
+  dependencies:
+    request "^2.55.0"
+
 fault@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.2.tgz#c3d0fec202f172a3a4d414042ad2bb5e2a3ffbaa"
@@ -2883,9 +2916,9 @@ gulp-postcss@^7.0.1:
    postcss-load-config "^1.2.0"
    vinyl-sourcemaps-apply "^0.2.1"

-gulp-rename@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-1.3.0.tgz#2e789d8f563ab0c924eeb62967576f37ff4cb826"
+gulp-rename@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-1.4.0.tgz#de1c718e7c4095ae861f7296ef4f3248648240bd"

 gulp-replace@^1.0.0:
  version "1.0.0"
@@ -3232,6 +3265,10 @@ ignore@^3.3.3, ignore@^3.3.5:
  version "3.3.7"
  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"

+ignore@^4.0.0, ignore@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.2.tgz#0a8dd228947ec78c2d7f736b1642a9f7317c1905"
+
 import-lazy@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
@@ -4628,6 +4665,12 @@ node-pre-gyp@^0.10.0:
    semver "^5.3.0"
    tar "^4"

+node-releases@^1.0.0-alpha.10:
+  version "1.0.0-alpha.10"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.0.0-alpha.10.tgz#61c8d5f9b5b2e05d84eba941d05b6f5202f68a2a"
+  dependencies:
+    semver "^5.3.0"
+
 node-sass@^4.8.3:
  version "4.8.3"
  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.8.3.tgz#d077cc20a08ac06f661ca44fb6f19cd2ed41debb"
@@ -5138,9 +5181,9 @@ postcss-html@^0.15.0:
    remark "^9.0.0"
    unist-util-find-all-after "^1.0.1"

-postcss-html@^0.28.0:
-  version "0.28.0"
-  resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.28.0.tgz#3dd0f5b5d7f886b8181bf844396d43a7898162cb"
+postcss-html@^0.31.0:
+  version "0.31.0"
+  resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.31.0.tgz#ea6ae2e95df60a03032e9ab5aba72143d8ca0325"
  dependencies:
    htmlparser2 "^3.9.2"

@@ -5179,9 +5222,9 @@ postcss-load-plugins@^2.3.0:
    cosmiconfig "^2.1.1"
    object-assign "^4.1.0"

-postcss-markdown@^0.28.0:
-  version "0.28.0"
-  resolved "https://registry.yarnpkg.com/postcss-markdown/-/postcss-markdown-0.28.0.tgz#99d1c4e74967af9e9c98acb2e2b66df4b3c6ed86"
+postcss-markdown@^0.31.0:
+  version "0.31.0"
+  resolved "https://registry.yarnpkg.com/postcss-markdown/-/postcss-markdown-0.31.0.tgz#e4c699ad34b14a29ad5d47132bb1b3100b60ef75"
  dependencies:
    remark "^9.0.0"
    unist-util-find-all-after "^1.0.2"
@@ -5209,6 +5252,12 @@ postcss-safe-parser@^3.0.1:
  dependencies:
    postcss "^6.0.6"

+postcss-safe-parser@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-4.0.1.tgz#8756d9e4c36fdce2c72b091bbc8ca176ab1fcdea"
+  dependencies:
+    postcss "^7.0.0"
+
 postcss-sass@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/postcss-sass/-/postcss-sass-0.2.0.tgz#e55516441e9526ba4b380a730d3a02e9eaa78c7a"
@@ -5229,6 +5278,12 @@ postcss-scss@^1.0.2:
  dependencies:
    postcss "^6.0.19"

+postcss-scss@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-2.0.0.tgz#248b0a28af77ea7b32b1011aba0f738bda27dea1"
+  dependencies:
+    postcss "^7.0.0"
+
 postcss-selector-parser@^3.1.0, postcss-selector-parser@^3.1.1:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
@@ -5252,9 +5307,13 @@ postcss-sorting@^3.1.0:
    lodash "^4.17.4"
    postcss "^6.0.13"

-postcss-syntax@^0.28.0:
-  version "0.28.0"
-  resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.28.0.tgz#e17572a7dcf5388f0c9b68232d2dad48fa7f0b12"
+postcss-styled@^0.31.0:
+  version "0.31.0"
+  resolved "https://registry.yarnpkg.com/postcss-styled/-/postcss-styled-0.31.0.tgz#ab532a2b3c469dfcca306a7623c4d4a98bb077d5"
+
+postcss-syntax@^0.31.0:
+  version "0.31.0"
+  resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.31.0.tgz#13d955c705d339595d10a19efa4a1bee82dfb78f"

 postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
  version "3.3.0"
@@ -5293,6 +5352,14 @@ postcss@^6.0.17:
    source-map "^0.6.1"
    supports-color "^5.3.0"

+postcss@^7.0.0, postcss@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.1.tgz#db20ca4fc90aa56809674eea75864148c66b67fa"
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
 prelude-ls@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -5414,9 +5481,9 @@ randomatic@^1.1.3:
    is-number "^3.0.0"
    kind-of "^4.0.0"

-raven-js@^3.26.3:
-  version "3.26.3"
-  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.26.3.tgz#0efb49969b5b11ab965f7b0d6da4ca102b763cb0"
+raven-js@^3.26.4:
+  version "3.26.4"
+  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.26.4.tgz#32aae3a63a9314467a453c94c89a364ea43707be"

 rc@^1.0.1, rc@^1.1.6:
  version "1.2.6"
@@ -5801,6 +5868,31 @@ request@2:
    tunnel-agent "^0.6.0"
    uuid "^3.1.0"

+request@^2.55.0:
+  version "2.87.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
 request@~2.79.0:
  version "2.79.0"
  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
@@ -5917,9 +6009,9 @@ rollup-plugin-babel@^3.0.7:
  dependencies:
    rollup-pluginutils "^1.5.0"

-rollup-plugin-commonjs@^9.1.3:
-  version "9.1.3"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.1.3.tgz#37bfbf341292ea14f512438a56df8f9ca3ba4d67"
+rollup-plugin-commonjs@^9.1.4:
+  version "9.1.4"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.1.4.tgz#525b701adfd40e314b5bb6888d88edc28e10442f"
  dependencies:
    estree-walker "^0.5.1"
    magic-string "^0.22.4"
@@ -6225,6 +6317,10 @@ specificity@^0.3.1:
  version "0.3.2"
  resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.3.2.tgz#99e6511eceef0f8d9b57924937aac2cb13d13c42"

+specificity@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.0.tgz#301b1ab5455987c37d6d94f8c956ef9d9fb48c1d"
+
 split-string@^3.0.1, split-string@^3.0.2:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -6436,9 +6532,9 @@ stylelint-scss@^2.0.0:
    postcss-selector-parser "^3.1.1"
    postcss-value-parser "^3.3.0"

-stylelint-scss@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.1.3.tgz#28f881ae298c3f5db667b10b6cf94a1a219001d6"
+stylelint-scss@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.2.0.tgz#13545a1be5ab5435ea94e761b2d4824eb32033b3"
  dependencies:
    lodash "^4.17.10"
    postcss-media-query-parser "^0.2.3"
@@ -6544,11 +6640,11 @@ stylelint@^8.1.1:
    svg-tags "^1.0.0"
    table "^4.0.1"

-stylelint@^9.3.0:
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.3.0.tgz#fe176e4e421ac10eac1a6b6d9f28e908eb58c5db"
+stylelint@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.4.0.tgz#2f2b82ae9db53a06735ae0724f41b134fdb84a10"
  dependencies:
-    autoprefixer "^8.0.0"
+    autoprefixer "^9.0.0"
    balanced-match "^1.0.0"
    chalk "^2.4.1"
    cosmiconfig "^5.0.0"
@@ -6559,7 +6655,7 @@ stylelint@^9.3.0:
    globby "^8.0.0"
    globjoin "^0.1.4"
    html-tags "^2.0.0"
-    ignore "^3.3.3"
+    ignore "^4.0.0"
    import-lazy "^3.1.0"
    imurmurhash "^0.1.4"
    known-css-properties "^0.6.0"
@@ -6570,22 +6666,23 @@ stylelint@^9.3.0:
    micromatch "^2.3.11"
    normalize-selector "^0.2.0"
    pify "^3.0.0"
-    postcss "^6.0.16"
-    postcss-html "^0.28.0"
+    postcss "^7.0.0"
+    postcss-html "^0.31.0"
    postcss-less "^2.0.0"
-    postcss-markdown "^0.28.0"
+    postcss-markdown "^0.31.0"
    postcss-media-query-parser "^0.2.3"
    postcss-reporter "^5.0.0"
    postcss-resolve-nested-selector "^0.1.1"
-    postcss-safe-parser "^3.0.1"
+    postcss-safe-parser "^4.0.0"
    postcss-sass "^0.3.0"
-    postcss-scss "^1.0.2"
+    postcss-scss "^2.0.0"
    postcss-selector-parser "^3.1.0"
-    postcss-syntax "^0.28.0"
+    postcss-styled "^0.31.0"
+    postcss-syntax "^0.31.0"
    postcss-value-parser "^3.3.0"
    resolve-from "^4.0.0"
    signal-exit "^3.0.2"
-    specificity "^0.3.1"
+    specificity "^0.4.0"
    string-width "^2.1.0"
    style-search "^0.1.0"
    sugarss "^1.0.0"
Author	SHA1	Message	Date
Sam Potts	3ad118c026	3.4.0-beta.2	2018-08-05 22:43:35 +10:00
Sam Potts	0bc6b1f1b3	Fix issue where enter key wasn’t setting focus correctly	2018-08-05 22:41:21 +10:00
Sam Potts	4ea458e1a3	Rounded aria-valuetext to 1 decimal place	2018-08-05 21:48:42 +10:00
Sam Potts	aacb172017	Removed aria-labelled-by	2018-08-05 21:48:21 +10:00
Sam Potts	b96fcfc8ac	v3.4.0-beta.1	2018-08-02 00:55:48 +10:00
Sam Potts	18b4d26bee	Merge pull request #1142 from sampotts/a11y-improvements A11y improvements	2018-08-02 00:47:57 +10:00
Sam Potts	7f4b74e2d4	Fix for hover over iframed players not showing controls	2018-08-02 00:47:03 +10:00
Sam Potts	0892d69ba2	Handle race condition for ads lib loading after source change	2018-08-01 13:56:49 +10:00
Sam Potts	ba511b51c7	Box shadow fix for range track	2018-08-01 13:00:51 +10:00
Sam Potts	e090581913	Ads on dev or prod only	2018-08-01 11:49:42 +10:00
Sam Potts	aaa56caa9c	Only focus button if menu wasn’t hidden already	2018-08-01 01:38:57 +10:00
Sam Potts	c8db1e55dd	Escape closes menu	2018-08-01 01:26:15 +10:00
Sam Potts	58079393e6	Build	2018-08-01 00:58:27 +10:00
Sam Potts	0b44f2d897	Demo config	2018-08-01 00:57:45 +10:00
Sam Potts	2371619486	Linting	2018-08-01 00:56:44 +10:00
Sam Potts	13a54b5dbe	Merge branch 'develop' into a11y-improvements # Conflicts: # src/js/controls.js	2018-08-01 00:46:26 +10:00
Sam Potts	fa0861ff2e	Merge pull request #1141 from friday/1137 Improve captions positioning consistency	2018-08-01 00:41:48 +10:00
Sam Potts	748aa5179f	Comments about keydown vs keyup for Firefox	2018-08-01 00:38:19 +10:00
Sam Potts	56a485bac6	Fix Firefox spacebar issue	2018-08-01 00:37:55 +10:00
Albin Larsson	9488de30e5	Fix #1137 : Improve captions positioning consistency	2018-07-31 16:26:34 +02:00
Sam Potts	e3dfd16096	Merge pull request #1139 from friday/controls-input Controls input fixes	2018-07-31 09:08:08 +10:00
Albin Larsson	c230ccce86	Update controls.md docs	2018-07-31 00:44:07 +02:00
Albin Larsson	db22a8e9c4	Improve handling of the 'controls' argument	2018-07-31 00:43:56 +02:00
Sam Potts	3a3358e2b4	Make iOS range fix more universal	2018-07-30 23:29:14 +10:00
Sam Potts	248005e8e0	Fix merge	2018-07-30 23:29:02 +10:00
Sam Potts	dae272ef66	Merge branch 'develop' into a11y-improvements # Conflicts: # demo/dist/demo.css # dist/plyr.css # dist/plyr.js.map # dist/plyr.min.js # dist/plyr.min.js.map # dist/plyr.polyfilled.js.map # dist/plyr.polyfilled.min.js # dist/plyr.polyfilled.min.js.map # package.json # src/js/plyr.js	2018-07-30 23:09:12 +10:00
Sam Potts	2679c5898e	v3.2.23	2018-07-30 22:55:34 +10:00
Sam Potts	efb7401e6d	Merge pull request #1136 from sampotts/develop v3.3.23	2018-07-30 22:54:03 +10:00
Sam Potts	60a0f0c979	Missed reference	2018-07-30 22:53:42 +10:00
Sam Potts	5d168d0e14	v3.3.23	2018-07-30 22:53:09 +10:00
Sam Potts	f964e34d8c	Merge pull request #1134 from mjfwebb/hide-empty-controls Hide empty controls	2018-07-30 22:47:10 +10:00
Sam Potts	021ba0b8e9	Update controls.scss	2018-07-30 22:46:48 +10:00
Sam Potts	96d371546c	Merge pull request #1135 from sampotts/master Merge back	2018-07-30 22:45:59 +10:00
Sam Potts	e1780a4df0	Fix for redraw issue	2018-07-30 22:44:19 +10:00
Albin Larsson	e5e169a1e2	Don't move caption up when "showing" the lower controls when the controls are empty	2018-07-30 01:02:13 +02:00
mjfwebb	5eda498516	If the plyr__controls is empty it is still showing the transition causing captions to be pushed up when hovering over where the controls would be. This change hides the plyr__controls div when it is empty.	2018-07-29 22:02:16 +02:00
Sam Potts	599b33e55f	Click to play fix, poster fix, iOS controls fixes	2018-07-30 01:13:12 +10:00
Sam Potts	3a8332bdb3	Fix for webkit redrawing issue	2018-07-29 12:32:26 +10:00
Sam Potts	44b5d9f6b9	Merge pull request #1131 from friday/1108 Make sure youtube.onReady doesn't run twice	2018-07-29 00:19:37 +10:00
Albin Larsson	24deff0e2d	Fix #1108 : Make sure youtube.onReady doesn't run twice	2018-07-28 04:04:57 +02:00
Sam Potts	0933b48c2a	Merge pull request #1113 from friday/issue-templates Use GitHub's new issue template prompt	2018-07-27 13:12:49 +10:00
Sam Potts	71578e07ec	Merge pull request #1120 from didacte/add-missing-youtube-hl-param Add support for YouTube's hl param	2018-07-26 00:03:10 +10:00
Léo Renaud-Allaire	671325dd17	Add support for YouTube's hl param	2018-07-24 16:36:25 -04:00
Sam Potts	53a3d06103	Merge branch 'develop' into a11y-improvements # Conflicts: # demo/dist/demo.css # demo/dist/demo.js.map # demo/dist/demo.min.js # demo/dist/demo.min.js.map # dist/plyr.css # dist/plyr.js.map # dist/plyr.min.js # dist/plyr.min.js.map # dist/plyr.polyfilled.js.map # dist/plyr.polyfilled.min.js # dist/plyr.polyfilled.min.js.map # package.json # yarn.lock	2018-07-24 09:38:26 +10:00
Albin Larsson	ad1989e45e	New issue templates (with prompt)	2018-07-23 06:21:46 +02:00
Albin Larsson	f9ac98bc6d	Lowercase contributing.md (like the other docs)	2018-07-23 06:21:25 +02:00
Sam Potts	544ab0086b	Logic fix	2018-07-19 10:02:41 +10:00
Sam Potts	13bf80d372	Deployment improvements (auto purge cache etc)	2018-07-19 09:47:11 +10:00
Sam Potts	e63ad7c74b	Keyboard and focus improvements	2018-07-15 19:23:28 +10:00
Sam Potts	ead6601394	Merge	2018-07-02 23:11:59 +10:00
Sam Potts	e61ebd8d05	Merge branch 'develop' into a11y-improvements	2018-07-02 23:11:50 +10:00
Sam Potts	3bf1c59bd6	Work on key bindings for menu	2018-06-28 23:44:07 +10:00
Sam Potts	e59fe1aacf	Merge branch 'develop' into a11y-improvements # Conflicts: # dist/plyr.js # dist/plyr.js.map # dist/plyr.min.js # dist/plyr.min.js.map # dist/plyr.polyfilled.js # dist/plyr.polyfilled.js.map # dist/plyr.polyfilled.min.js # dist/plyr.polyfilled.min.js.map # src/js/listeners.js	2018-06-25 23:09:13 +10:00
Sam Potts	1f1d74ba50	Work on menus	2018-06-21 09:01:16 +10:00
Sam Potts	bb546fe43f	Merge branch 'develop' into a11y-improvements # Conflicts: # dist/plyr.js.map # dist/plyr.min.js # dist/plyr.min.js.map # dist/plyr.polyfilled.js.map # dist/plyr.polyfilled.min.js # dist/plyr.polyfilled.min.js.map	2018-06-19 19:24:47 +10:00
Sam Potts	9e1218547b	WIP	2018-06-19 09:11:35 +10:00
Sam Potts	715b88c09b	Merge branch 'develop' into a11y-improvements # Conflicts: # dist/plyr.js.map # dist/plyr.min.js # dist/plyr.min.js.map # dist/plyr.polyfilled.js.map # dist/plyr.polyfilled.min.js # dist/plyr.polyfilled.min.js.map	2018-06-18 23:29:25 +10:00
Sam Potts	7b9ef7d757	More work on menus	2018-06-18 23:13:40 +10:00
Sam Potts	d64ed4ba5a	Merge branch 'develop' into a11y-improvements # Conflicts: # dist/plyr.js.map # dist/plyr.min.js # dist/plyr.min.js.map	2018-06-18 22:17:34 +10:00
Sam Potts	ffd864ed39	Work on controls	2018-06-18 21:39:47 +10:00