Merge pull request #1796 from sampotts/develop

v3.6.0

.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 end_of_line = lf
-indent_size = 4
+indent_size = 2
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true

.github/issue_template.md

@@ -1,3 +1,3 @@
 PLEASE USE OUR SPECIFIC ISSUE TEMPLATES for bug reports, features and improvement suggestions.
 
-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
+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

.prettierrc

@@ -1,6 +1,6 @@
 {
   "useTabs": false,
-    "tabWidth": 4,
+  "tabWidth": 2,
   "singleQuote": true,
   "trailingComma": "all",
   "printWidth": 120

.stylelintrc.json

@@ -10,7 +10,7 @@
       }
     ],
     "string-no-newline": null,
-        "indentation": 4,
+    "indentation": 2,
     "string-quotes": "single",
     "max-nesting-depth": 2,
     "plugin/selector-bem-pattern": {

CONTRIBUTING.md

@@ -7,15 +7,17 @@ We welcome bug reports, feature requests and pull requests. If you want to help
 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.
+- 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.
+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
 
@@ -23,11 +25,11 @@ Please follow the instructions in our issue templates. Don't use github issues t
 
 ## 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.
+- 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
+- Fork Plyr, and create a new branch in your fork, based on the **develop** branch
 
-* To test locally, you can use the demo site. First make sure you have installed the dependencies with `npm install` or `yarn`. Run `gulp` to build and it will run a local web server for development and watch for any changes.
+- To test locally, you can use the demo site. First make sure you have installed the dependencies with `npm install` or `yarn`. Run `gulp` to build and it will run a local web server for development and watch for any changes.
 
 ### Online one-click setup for contributing
 
@@ -41,12 +43,12 @@ So that you can start straight away.
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)
 
-* Develop and test your modifications.
+- 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.
+- 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.
+- If your modifications changes the documented behavior or add new features, document these changes in [README.md](README.md).
 
-* When finished, push the changes to your GitHub repository and send a pull request to **develop**. Describe what your PR does.
+- 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.
+- 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.

README.md

@@ -42,7 +42,7 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
 ### HTML5 Video
 
 ```html
-<video poster="/path/to/poster.jpg" id="player" playsinline controls>
+<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
   <source src="/path/to/video.mp4" type="video/mp4" />
   <source src="/path/to/video.webm" type="video/webm" />
 
@@ -51,6 +51,8 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
 </video>
 ```
 
+**Note**: The poster image should be specified using `data-poster`. This is to prevent it [being downloaded twice](https://github.com/sampotts/plyr/issues/1531). If you're sure the image will be cached, you can still use the `poster` attribute for true progressive enhancement.
+
 ### HTML5 Audio
 
 ```html
@@ -170,12 +172,109 @@ Plyr has partnered up with [vi.ai](https://vi.ai/publisher-video-monetization/?a
 
 Any questions regarding the ads can be sent straight to vi.ai and any issues with rendering raised through GitHub issues.
 
+If you do not wish to use Vi, you can set your own `ads.tagUrl` [option](#options).
+
 # Advanced
 
-## SASS
+## Customizing the CSS
 
-You can use `bundle.scss` file included in `/src` as part of your build and change variables to suit your design. The SASS require you to
+If you want to change any design tokens used for the rendering of the player, you can do so using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
-use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you should be already!) as all declarations use the W3C definitions.
+
+Here's a list of the properties and what they are used for:
+
+| Name                                           | Description                                                                                             | Default / Fallback                                                    |
+| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `--plyr-color-main`                            | The primary UI color.                                                                                   | ![#f03c15](https://placehold.it/15/00b3ff/000000?text=+) `#00b3ff`    |
+| `--plyr-tab-focus-color`                       | The color used for the dotted outline when an element is `:focus-visible` (equivalent) keyboard focus.  | `--plyr-color-main`                                                   |
+| `--plyr-badge-background`                      | The background color for badges in the menu.                                                            | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
+| `--plyr-badge-text-color`                      | The text color for badges.                                                                              | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-badge-border-radius`                   | The border radius used for badges.                                                                      | `2px`                                                                 |
+| `--plyr-tab-focus-color`                       | The color used to highlight tab (keyboard) focus.                                                       | `--plyr-color-main`                                                   |
+| `--plyr-captions-background`                   | The color for the background of captions.                                                               | `rgba(0, 0, 0, 0.8)`                                                  |
+| `--plyr-captions-text-color`                   | The color used for the captions text.                                                                   | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-control-icon-size`                     | The size of the icons used in the controls.                                                             | `18px`                                                                |
+| `--plyr-control-spacing`                       | The space between controls (sometimes used in a multiple - e.g. `10px / 2 = 5px`).                      | `10px`                                                                |
+| `--plyr-control-padding`                       | The padding inside controls.                                                                            | `--plyr-control-spacing * 0.7` (`7px`)                                |
+| `--plyr-control-radius`                        | The border radius used on controls.                                                                     | `3px`                                                                 |
+| `--plyr-control-toggle-checked-background`     | The background color used for checked menu items.                                                       | `--plyr-color-main`                                                   |
+| `--plyr-video-controls-background`             | The background for the video controls.                                                                  | `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))`              |
+| `--plyr-video-control-color`                   | The text/icon color for video controls.                                                                 | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-video-control-color-hover`             | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent).  | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-video-control-background-hover`        | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main`                                                   |
+| `--plyr-audio-controls-background`             | The background for the audio controls.                                                                  | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-audio-control-color`                   | The text/icon color for audio controls.                                                                 | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
+| `--plyr-audio-control-color-hover`             | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent).  | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-audio-control-background-hover`        | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main`                                                   |
+| `--plyr-menu-background`                       | The background color for menus.                                                                         | `rgba(255, 255, 255, 0.9)`                                            |
+| `--plyr-menu-color`                            | The text/icon color for menu items.                                                                     | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
+| `--plyr-menu-shadow`                           | The shadow used on menus.                                                                               | `0 1px 2px rgba(0, 0, 0, 0.15)`                                       |
+| `--plyr-menu-radius`                           | The border radius on the menu.                                                                          | `4px`                                                                 |
+| `--plyr-menu-arrow-size`                       | The size of the arrow on the bottom of the menu.                                                        | `6px`                                                                 |
+| `--plyr-menu-item-arrow-color`                 | The color of the arrows in the menu.                                                                    | ![#728197](https://placehold.it/15/728197/000000?text=+) `#728197`    |
+| `--plyr-menu-item-arrow-size`                  | The size of the arrows in the menu.                                                                     | `4px`                                                                 |
+| `--plyr-menu-border-color`                     | The border color for the bottom of the back button in the top of the sub menu pages.                    | ![#dcdfe5](https://placehold.it/15/dcdfe5/000000?text=+) `#dcdfe5`    |
+| `--plyr-menu-border-shadow-color`              | The shadow below the border of the back button in the top of the sub menu pages.                        | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-progress-loading-size`                 | The size of the stripes in the loading state in the scrubber.                                           | `25px`                                                                |
+| `--plyr-progress-loading-background`           | The background color on the loading state in the scrubber.                                              | `rgba(35, 40, 47, 0.6)`                                               |
+| `--plyr-video-progress-buffered-background`    | The fill color for the buffer indication in the scrubber for video.                                     | `rgba(255, 255, 255, 0.25)`                                           |
+| `--plyr-audio-progress-buffered-background`    | The fill color for the buffer indication in the scrubber for audio.                                     | `rgba(193, 200, 209, 0.6)`                                            |
+| `--plyr-range-thumb-height`                    | The height of the scrubber handle/thumb.                                                                | `13px`                                                                |
+| `--plyr-range-thumb-background`                | The background of the scrubber handle/thumb.                                                            | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-range-thumb-shadow`                    | The shadow of the scrubber handle/thumb.                                                                | `0 1px 1px rgba(215, 26, 18, 0.15), 0 0 0 1px rgba(215, 26, 18, 0.2)` |
+| `--plyr-range-thumb-active-shadow-width`       | The width of the shadow when the scrubber handle/thumb is `:active` (pressed).                          | `3px`                                                                 |
+| `--plyr-range-track-height`                    | The height of the scrubber/progress track.                                                              | `5px`                                                                 |
+| `--plyr-range-fill-background`                 | The fill color of the scrubber/progress.                                                                | `--plyr-color-main`                                                   |
+| `--plyr-video-range-track-background`          | The background of the scrubber/progress.                                                                | `--plyr-video-progress-buffered-background`                           |
+| `--plyr-video-range-thumb-active-shadow-color` | The color of the shadow when the video scrubber handle/thumb is `:active` (pressed).                    | `rgba(255, 255, 255, 0.5)`                                            |
+| `--plyr-audio-range-track-background`          | The background of the scrubber/progress.                                                                | `--plyr-video-progress-buffered-background`                           |
+| `--plyr-audio-range-thumb-active-shadow-color` | The color of the shadow when the audio scrubber handle/thumb is `:active` (pressed).                    | `rgba(215, 26, 18, 0.1)`                                              |
+| `--plyr-tooltip-background`                    | The background color for tooltips.                                                                      | `rgba(255, 255, 255, 0.9)`                                            |
+| `--plyr-tooltip-color`                         | The text color for tooltips.                                                                            | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
+| `--plyr-tooltip-padding`                       | The padding for tooltips.                                                                               | `calc(var(--plyr-control-spacing) / 2))`                              |
+| `--plyr-tooltip-arrow-size`                    | The size of the arrow under tooltips.                                                                   | `4px`                                                                 |
+| `--plyr-tooltip-radius`                        | The border radius on tooltips.                                                                          | `3px`                                                                 |
+| `--plyr-tooltip-shadow`                        | The shadow on tooltips.                                                                                 | `0 1px 2px rgba(0, 0, 0, 0.15)`                                       |
+| `--plyr-font-family`                           | The font family used in the player.                                                                     |                                                                       |
+| `--plyr-font-size-base`                        | The base font size. Mainly used for captions.                                                           | `15px`                                                                |
+| `--plyr-font-size-small`                       | The smaller font size. Mainly used for captions.                                                        | `13px`                                                                |
+| `--plyr-font-size-large`                       | The larger font size. Mainly used for captions.                                                         | `18px`                                                                |
+| `--plyr-font-size-xlarge`                      | The even larger font size. Mainly used for captions.                                                    | `21px`                                                                |
+| `--plyr-font-size-time`                        | The font size for the time.                                                                             | `--plyr-font-size-small`                                              |
+| `--plyr-font-size-menu`                        | The font size used in the menu.                                                                         | `--plyr-font-size-small`                                              |
+| `--plyr-font-size-badge`                       | The font size used for badges.                                                                          | `9px`                                                                 |
+| `--plyr-font-weight-regular`                   | The regular font weight.                                                                                | `400`                                                                 |
+| `--plyr-font-weight-bold`                      | The bold font weight.                                                                                   | `600`                                                                 |
+| `--plyr-line-height`                           | The line height used within the player.                                                                 | `1.7`                                                                 |
+| `--plyr-font-smoothing`                        | Whether to enable font antialiasing within the player.                                                  | `false`                                                               |
+
+You can set them in your CSS for all players:
+
+```css
+:root {
+  --plyr-color-main: #1ac266;
+}
+```
+
+...or for a specific class name:
+
+```css
+.player {
+  --plyr-color-main: #1ac266;
+}
+```
+
+...or in your HTML:
+
+```html
+<video class="player" style="--plyr-color-main: #1ac266;">
+    ...
+</vieo>
+```
+
+### SASS
+
+You can use `plyr.scss` file included in `/src/sass` as part of your build and change variables to suit your design. The SASS requires you to
+use [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) (you should be already!) as all declarations use the W3C definitions.
 
 The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS
 you write. Check out the JavaScript source for more on this.
@@ -277,7 +376,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
 | -------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `enabled`            | Boolean                    | `true`                                                                                                                         | Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below.                                                                                                                                                                                                                                           |
 | `debug`              | Boolean                    | `false`                                                                                                                        | Display debugging information in the console                                                                                                                                                                                                                                                                                                                                                            |
-| `controls`           | Array, Function or Element | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; `id` (the unique id for the player), `seektime` (the seektime step in seconds), and `title` (the media title). See [controls.md](controls.md) for more info on how the html needs to be structured.                                  |
+| `controls`           | Array, Function or Element | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; `id` (the unique id for the player), `seektime` (the seektime step in seconds), and `title` (the media title). See [CONTROLS.md](CONTROLS.md) for more info on how the html needs to be structured.                                  |
 | `settings`           | Array                      | `['captions', 'quality', 'speed', 'loop']`                                                                                     | If the default controls are used, you can specify which settings to show in the menu                                                                                                                                                                                                                                                                                                                    |
 | `i18n`               | Object                     | See [defaults.js](/src/js/config/defaults.js)                                                                                  | Used for internationalization (i18n) of the text within the UI.                                                                                                                                                                                                                                                                                                                                         |
 | `loadSprite`         | Boolean                    | `true`                                                                                                                         | Load the SVG sprite specified as the `iconUrl` option (if a URL). If `false`, it is assumed you are handling sprite loading yourself.                                                                                                                                                                                                                                                                   |
@@ -301,13 +400,13 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
 | `toggleInvert`       | Boolean                    | `true`                                                                                                                         | Allow users to click to toggle the above.                                                                                                                                                                                                                                                                                                                                                               |
 | `listeners`          | Object                     | `null`                                                                                                                         | Allows binding of event listeners to the controls before the default handlers. See the `defaults.js` for available listeners. If your handler prevents default on the event (`event.preventDefault()`), the default handler will not fire.                                                                                                                                                              |
 | `captions`           | Object                     | `{ active: false, language: 'auto', update: false }`                                                                           | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available). 'auto' uses the browser language. `update`: Listen to changes to tracks and update menu. This is needed for some streaming libraries, but can result in unselectable language options).                                                                                        |
-| `fullscreen`         | Object                     | `{ enabled: true, fallback: true, iosNative: false }`                                                                          | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution (`true`/`false`/`'force'`). `iosNative`: whether to use native iOS fullscreen when entering fullscreen (no custom controls)                                                                                                                                                               |
+| `fullscreen`         | Object                     | `{ enabled: true, fallback: true, iosNative: false, container: null }`                                                         | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution (`true`/`false`/`'force'`). `iosNative`: whether to use native iOS fullscreen when entering fullscreen (no custom controls). `container`: A selector for an ancestor of the player element, allows contextual content to remain visual in fullscreen mode. Non-ancestors are ignored.     |
 | `ratio`              | String                     | `null`                                                                                                                         | Force an aspect ratio for all videos. The format is `'w:h'` - e.g. `'16:9'` or `'4:3'`. If this is not specified then the default for HTML5 and Vimeo is to use the native resolution of the video. As dimensions are not available from YouTube via SDK, 16:9 is forced as a sensible default.                                                                                                         |
 | `storage`            | Object                     | `{ enabled: true, key: 'plyr' }`                                                                                               | `enabled`: Allow use of local storage to store user settings. `key`: The key name to use.                                                                                                                                                                                                                                                                                                               |
 | `speed`              | Object                     | `{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }`                                                                 | `selected`: The default speed for playback. `options`: The speed options to display in the UI. YouTube and Vimeo will ignore any options outside of the 0.5-2 range, so options outside of this range will be hidden automatically.                                                                                                                                                                     |
 | `quality`            | Object                     | `{ default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] }`                                           | `default` is the default quality level (if it exists in your sources). `options` are the options to display. This is used to filter the available sources.                                                                                                                                                                                                                                              |
 | `loop`               | Object                     | `{ active: false }`                                                                                                            | `active`: Whether to loop the current video. If the `loop` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true This is an object to support future functionality.                                                                                                                                                                                          |
-| `ads`                | Object                     | `{ enabled: false, publisherId: '' }`                                                                                          | `enabled`: Whether to enable advertisements. `publisherId`: Your unique [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) publisher ID.                                                                                                                                                                                                                                                   |
+| `ads`                | Object                     | `{ enabled: false, publisherId: '', tagUrl: '' }`                                                                              | `enabled`: Whether to enable advertisements. `publisherId`: Your unique [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) publisher ID. `tagUrl` is a URL for a custom VAST tag if you're not using Vi.                                                                                                                                                                                   |
 | `urls`               | Object                     | See source.                                                                                                                    | If you wish to override any API URLs then you can do so here. You can also set a custom download URL for the download button.                                                                                                                                                                                                                                                                           |
 | `vimeo`              | Object                     | `{ byline: false, portrait: false, title: false, speed: true, transparent: false }`                                            | See [Vimeo embed options](https://github.com/vimeo/player.js/#embed-options). Some are set automatically based on other config options, namely: `loop`, `autoplay`, `muted`, `gesture`, `playsinline`                                                                                                                                                                                                   |
 | `youtube`            | Object                     | `{ noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 }`                                               | See [YouTube embed options](https://developers.google.com/youtube/player_parameters#Parameters). The only custom option is `noCookie` to use an alternative to YouTube that doesn't use cookies (useful for GDPR, etc). Some are set automatically based on other config options, namely: `autoplay`, `hl`, `controls`, `disablekb`, `playsinline`, `cc_load_policy`, `cc_lang_pref`, `widget_referrer` |
@@ -352,10 +451,10 @@ player.fullscreen.enter(); // Enter fullscreen
 ```
 
 | Method                     | Parameters       | Description                                                                                                |
-| ------------------------ | ---------------- | ---------------------------------------------------------------------------------------------------------- |
+| -------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------- |
 | `play()`&sup1;             | -                | Start playback.                                                                                            |
 | `pause()`                  | -                | Pause playback.                                                                                            |
-| `togglePlay(toggle)`     | Boolean          | Toggle playback, if no parameters are passed, it will toggle based on current status.                      |
+| `togglePlay(toggle)`&sup1; | Boolean          | Toggle playback, if no parameters are passed, it will toggle based on current status.                      |
 | `stop()`                   | -                | Stop playback and reset to start.                                                                          |
 | `restart()`                | -                | Restart playback.                                                                                          |
 | `rewind(seekTime)`         | Number           | Rewind playback by the specified seek time. If no parameter is passed, the default seek time will be used. |
@@ -374,7 +473,7 @@ player.fullscreen.enter(); // Enter fullscreen
 | `supports(type)`           | String           | Check support for a mime type.                                                                             |
 | `destroy()`                | -                | Destroy the instance and garbage collect any elements.                                                     |
 
-1.  For HTML5 players, `play()` will return a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) in _some_ browsers - WebKit and Mozilla [according to MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) at time of writing.
+1.  For HTML5 players, `play()` will return a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) for most browsers - e.g. Chrome, Firefox, Opera, Safari and Edge [according to MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) at time of writing.
 
 ## Getters and Setters
 
@@ -448,7 +547,7 @@ player.source = {
   ],
   poster: '/path/to/poster.jpg',
   previewThumbnails: {
-        src: '/path/to/thumbnails.vtt'
+    src: '/path/to/thumbnails.vtt',
   },
   tracks: [
     {
@@ -775,7 +874,6 @@ Support this project with your organization. Your logo will show up here with a
 <a href="https://opencollective.com/plyr/organization/0/website"><img src="https://opencollective.com/plyr/organization/0/avatar.svg"></a>
 <a href="https://opencollective.com/plyr/organization/1/website"><img src="https://opencollective.com/plyr/organization/1/avatar.svg"></a><a href="https://opencollective.com/plyr/organization/2/website"><img src="https://opencollective.com/plyr/organization/2/avatar.svg"></a>
 
-
 # Copyright and License
 
-[The MIT license](license.md)
+[The MIT license](LICENSE.md)

demo/index.html

@@ -18,10 +18,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png" />
 
     <!-- Open Graph -->
-        <meta
+    <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player" />
-            property="og:title"
-            content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player"
-        />
     <meta property="og:site_name" content="Plyr" />
     <meta property="og:url" content="https://plyr.io" />
     <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png" />
@@ -133,14 +130,13 @@
           </a>
         </div>
       </header>
-
       <main>
         <div id="container">
           <video
             controls
             crossorigin
             playsinline
-                        poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
+            data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
             id="player"
           >
             <!-- Video files -->
@@ -176,9 +172,7 @@
             />
 
             <!-- 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
+            <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
-                            >Download</a
-                        >
           </video>
         </div>
 
@@ -191,9 +185,7 @@
                   d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
                 ></path>
               </svg>
-                            <a
+              <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank"
-                                href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
-                                target="_blank"
                 >View From A Blue Moon</a
               >
               &copy; Brainfarm
@@ -215,9 +207,7 @@
           </li>
           <li class="plyr__cite plyr__cite--youtube" hidden>
             <small>
-                            <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank"
+              <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a>
-                                >View From A Blue Moon</a
-                            >
               on&nbsp;
               <span class="color--youtube">
                 <svg class="icon" role="presentation">

demo/package.json

@@ -5,9 +5,9 @@
     "homepage": "https://plyr.io",
     "author": "Sam Potts <sam@potts.es>",
     "dependencies": {
+        "@sentry/browser": "^5.15.4",
         "core-js": "^3.6.4",
         "custom-event-polyfill": "^1.0.7",
-        "raven-js": "^3.27.2",
         "shr-buttons": "2.0.3",
         "url-polyfill": "^1.1.8"
     }

demo/src/js/demo.js

@@ -1,14 +1,14 @@
 // ==========================================================================
 // Plyr.io demo
 // This code is purely for the https://plyr.io website
-// Please see readme.md in the root or github.com/sampotts/plyr
+// Please see README.md in the root or github.com/sampotts/plyr
 // ==========================================================================
 
 import './tab-focus';
 import 'custom-event-polyfill';
 import 'url-polyfill';
 
-import Raven from 'raven-js';
+import * as Sentry from '@sentry/browser';
 import Shr from 'shr-buttons';
 
 import Plyr from '../../../src/js/plyr';
@@ -16,14 +16,17 @@ import sources from './sources';
 import toggleClass from './toggle-class';
 
 (() => {
-    const { host } = window.location;
+  const production = 'plyr.io';
-    const env = {
+
-        prod: host === 'plyr.io',
+  // Sentry for demo site (https://plyr.io) only
-        dev: host === 'dev.plyr.io',
+  if (window.location.host === production) {
-    };
+    Sentry.init({
+      dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
+      whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
+    });
+  }
 
   document.addEventListener('DOMContentLoaded', () => {
-        Raven.context(() => {
     const selector = '#player';
 
     // Setup share buttons
@@ -51,15 +54,12 @@ import toggleClass from './toggle-class';
         active: true,
       },
       ads: {
-                    enabled: env.prod || env.dev,
+        enabled: window.location.host.includes(production),
         publisherId: '918848828995742',
       },
       previewThumbnails: {
         enabled: true,
-                    src: [
+        src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
-                        'https://cdn.plyr.io/static/demo/thumbs/100p.vtt',
-                        'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
-                    ],
       },
       vimeo: {
         // Prevent Vimeo blocking plyr.io demo site
@@ -75,7 +75,7 @@ import toggleClass from './toggle-class';
     const types = Object.keys(sources);
     const historySupport = Boolean(window.history && window.history.pushState);
     let currentType = window.location.hash.substring(1);
-            const hasCurrentType = !currentType.length;
+    const hasInitialType = currentType.length;
 
     function render(type) {
       // Remove active classes
@@ -96,11 +96,7 @@ import toggleClass from './toggle-class';
     // Set a new source
     function setSource(type, init) {
       // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
-                if (
+      if (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {
-                    !types.includes(type) ||
-                    (!init && type === currentType) ||
-                    (!currentType.length && type === 'video')
-                ) {
         return;
       }
 
@@ -134,13 +130,13 @@ import toggleClass from './toggle-class';
     });
 
     // If there's no current type set, assume video
-            if (hasCurrentType) {
+    if (!hasInitialType) {
       currentType = 'video';
     }
 
     // Replace current history state
     if (historySupport && types.includes(currentType)) {
-                window.history.replaceState({ type: currentType }, '', hasCurrentType ? '' : `#${currentType}`);
+      window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');
     }
 
     // If it's not video, load the source
@@ -150,11 +146,4 @@ import toggleClass from './toggle-class';
 
     render(currentType);
   });
-    });
-
-    // Raven / Sentry
-    // For demo site (https://plyr.io) only
-    if (env.prod) {
-        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
-    }
 })();

demo/src/js/sources.js

@@ -40,6 +40,9 @@ const sources = {
         src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
       },
     ],
+    previewThumbnails: {
+      src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
+    },
   },
   audio: {
     type: 'audio',

demo/src/sass/bundles/demo.scss

@@ -3,6 +3,9 @@
 // ==========================================================================
 @charset 'UTF-8';
 
+@import '../../../../src/sass/lib/css-vars';
+$css-vars-use-native: true;
+
 // Settings
 @import '../settings/breakpoints';
 @import '../settings/colors';

demo/src/sass/components/players.scss

@@ -28,7 +28,7 @@
 
 // Style full supported player
 .plyr__cite {
-    color: $color-gray-5;
+  color: $color-gray-500;
 
   .icon {
     margin-right: ceil($spacing-base / 6);

demo/src/sass/settings/colors.scss

@@ -3,22 +3,22 @@
 // ==========================================================================
 
 // Grayscale
-$color-gray-9: hsl(210, 15%, 16%);
+$color-gray-900: hsl(210, 15%, 16%);
-$color-gray-8: lighten($color-gray-9, 9%);
+$color-gray-800: lighten($color-gray-900, 9%);
-$color-gray-7: lighten($color-gray-8, 9%);
+$color-gray-700: lighten($color-gray-800, 9%);
-$color-gray-6: lighten($color-gray-7, 9%);
+$color-gray-600: lighten($color-gray-700, 9%);
-$color-gray-5: lighten($color-gray-6, 9%);
+$color-gray-500: lighten($color-gray-600, 9%);
-$color-gray-4: lighten($color-gray-5, 9%);
+$color-gray-400: lighten($color-gray-500, 9%);
-$color-gray-3: lighten($color-gray-4, 9%);
+$color-gray-300: lighten($color-gray-400, 9%);
-$color-gray-2: lighten($color-gray-3, 9%);
+$color-gray-200: lighten($color-gray-300, 9%);
-$color-gray-1: lighten($color-gray-2, 9%);
+$color-gray-100: lighten($color-gray-200, 9%);
-$color-gray-0: lighten($color-gray-1, 9%);
+$color-gray-50: lighten($color-gray-100, 9%);
 
 // Branding
 $color-brand-primary: hsl(198, 100%, 50%);
 
 // Text
-$color-text: $color-gray-7;
+$color-text: $color-gray-700;
 $color-headings: $color-brand-primary;
 
 // Brands
@@ -36,7 +36,7 @@ $color-button-background: $color-brand-primary;
 $color-button-text: #fff;
 $color-button-background-hover: hsl(198, 100%, 55%);
 $color-button-count-background: #fff;
-$color-button-count-text: $color-gray-6;
+$color-button-count-text: $color-gray-600;
 
 // Focus
 $tab-focus-default-color: #fff;

demo/src/sass/settings/plyr.scss

@@ -2,24 +2,17 @@
 // Plyr Settings
 // ==========================================================================
 
-// Font
+@include css-vars(
-$plyr-font-family: inherit;
+  (
-
+    --plyr-color-main: $color-brand-primary,
-// Sizes
+    --plyr-font-size-base: 13px,
-$plyr-font-size-base: 13px;
+    --plyr-font-size-small: 12px,
-$plyr-font-size-small: 12px;
+    --plyr-font-size-time: 11px,
-$plyr-font-size-time: 11px;
+    --plyr-font-size-badges: 9px,
-$plyr-font-size-badges: 9px;
+    --plyr-font-size-menu: var(--plyr-font-size-base),
-
+    --plyr-font-weight-regular: 500,
-// Other
+    --plyr-font-weight-bold: 600,
-$plyr-font-smoothing: true;
+    --plyr-font-size-captions-medium: 18px,
-
+    --plyr-font-size-captions-large: 21px,
-// Colors
+  )
-$plyr-color-main: $color-brand-primary;
+);
-
-// Captions
-$plyr-font-size-captions-base: $plyr-font-size-base;
-$plyr-font-size-captions-small: $plyr-font-size-small;
-$plyr-font-size-captions-medium: 18px;
-$plyr-font-size-captions-large: 21px;
-$plyr-font-size-menu: $plyr-font-size-base;

demo/yarn.lock

@@ -2,27 +2,79 @@
 # yarn lockfile v1
 
 
-core-js@^3.1.4:
+"@sentry/browser@^5.15.4":
-  version "3.1.4"
+  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.15.4.tgz#5a7e7bad088556665ed8e69bceb0e18784e4f6c7"
-  integrity sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==
+  integrity sha512-l/auT1HtZM3KxjCGQHYO/K51ygnlcuOrM+7Ga8gUUbU9ZXDYw6jRi0+Af9aqXKmdDw1naNxr7OCSy6NBrLWVZw==
+  dependencies:
+    "@sentry/core" "5.15.4"
+    "@sentry/types" "5.15.4"
+    "@sentry/utils" "5.15.4"
+    tslib "^1.9.3"
+
+"@sentry/core@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.15.4.tgz#08b617e093a636168be5aebad141d1f744217085"
+  integrity sha512-9KP4NM4SqfV5NixpvAymC7Nvp36Zj4dU2fowmxiq7OIbzTxGXDhwuN/t0Uh8xiqlkpkQqSECZ1OjSFXrBldetQ==
+  dependencies:
+    "@sentry/hub" "5.15.4"
+    "@sentry/minimal" "5.15.4"
+    "@sentry/types" "5.15.4"
+    "@sentry/utils" "5.15.4"
+    tslib "^1.9.3"
+
+"@sentry/hub@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.15.4.tgz#cb64473725a60eec63b0be58ed1143eaaf894bee"
+  integrity sha512-1XJ1SVqadkbUT4zLS0TVIVl99si7oHizLmghR8LMFl5wOkGEgehHSoOydQkIAX2C7sJmaF5TZ47ORBHgkqclUg==
+  dependencies:
+    "@sentry/types" "5.15.4"
+    "@sentry/utils" "5.15.4"
+    tslib "^1.9.3"
+
+"@sentry/minimal@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.15.4.tgz#113f01fefb86b7830994c3dfa7ad4889ba7b2003"
+  integrity sha512-GL4GZ3drS9ge+wmxkHBAMEwulaE7DMvAEfKQPDAjg2p3MfcCMhAYfuY4jJByAC9rg9OwBGGehz7UmhWMFjE0tw==
+  dependencies:
+    "@sentry/hub" "5.15.4"
+    "@sentry/types" "5.15.4"
+    tslib "^1.9.3"
+
+"@sentry/types@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.15.4.tgz#37f30e35b06e8e12ad1101f1beec3e9b88ca1aab"
+  integrity sha512-quPHPpeAuwID48HLPmqBiyXE3xEiZLZ5D3CEbU3c3YuvvAg8qmfOOTI6z4Z3Eedi7flvYpnx3n7N3dXIEz30Eg==
+
+"@sentry/utils@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.15.4.tgz#02865ab3c9b745656cea0ab183767ec26c96f6e6"
+  integrity sha512-lO8SLBjrUDGADl0LOkd55R5oL510d/1SaI08/IBHZCxCUwI4TiYo5EPECq8mrj3XGfgCyq9osw33bymRlIDuSQ==
+  dependencies:
+    "@sentry/types" "5.15.4"
+    tslib "^1.9.3"
+
+core-js@^3.6.4:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
+  integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
 
 custom-event-polyfill@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
   integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
 
-raven-js@^3.27.2:
-  version "3.27.2"
-  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.27.2.tgz#6c33df952026cd73820aa999122b7b7737a66775"
-  integrity sha512-mFWQcXnhRFEQe5HeFroPaEghlnqy7F5E2J3Fsab189ondqUzcjwSVi7el7F36cr6PvQYXoZ1P2F5CSF2/azeMQ==
-
 shr-buttons@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/shr-buttons/-/shr-buttons-2.0.3.tgz#2ffd021fc3d789e1510ce2736b938bd09ea1da5a"
   integrity sha512-sPAgHiw4uaIt9TnxTfyZEedDChcldSVtnBHE44cpe/mSC7rqm4IEKZRLYqnVlTcGM+FSDNBPUNpSf50Q2ntd+w==
 
-url-polyfill@^1.1.5:
+tslib@^1.9.3:
-  version "1.1.5"
+  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.5.tgz#bec79b72b5407dba6d8cced2e32e4ab273aa9fb1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
-  integrity sha512-9XjIJ6nwrU+nGd8t90Ze0Zs7t8A+SU0gqsqPttj6j3zAVe5q0HFcuv37nDBdVSPpi4aTHTfbUF/i+ZVD+o2EbA==
+  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
+
+url-polyfill@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.8.tgz#21eb58ad61192f52b77dcac8ab5293ae7bc67060"
+  integrity sha512-Ey61F4FEqhcu1vHSOMmjl0Vd/RPRLEjMj402qszD/dhMBrVfoUsnIj8KSZo2yj+eIlxJGKFdnm6ES+7UzMgZ3Q==

gulpfile.js

@@ -1,522 +1,8 @@
 // ==========================================================================
 // Gulp build script
 // ==========================================================================
-/* eslint no-console: "off" */
 
-const path = require('path');
 const gulp = require('gulp');
-// ------------------------------------
+const HubRegistry = require('gulp-hub');
-// JavaScript
-// ------------------------------------
-const terser = require('gulp-terser');
-const rollup = require('gulp-better-rollup');
-const babel = require('rollup-plugin-babel');
-const commonjs = require('rollup-plugin-commonjs');
-const resolve = require('rollup-plugin-node-resolve');
-// ------------------------------------
-// CSS
-// ------------------------------------
-const sass = require('gulp-sass');
-const clean = require('gulp-clean-css');
-const prefix = require('gulp-autoprefixer');
-// ------------------------------------
-// Images
-// ------------------------------------
-const svgstore = require('gulp-svgstore');
-const imagemin = require('gulp-imagemin');
-// ------------------------------------
-// Utils
-// ------------------------------------
-const del = require('del');
-const filter = require('gulp-filter');
-const header = require('gulp-header');
-const gitbranch = require('git-branch');
-const rename = require('gulp-rename');
-const replace = require('gulp-replace');
-const ansi = require('ansi-colors');
-const log = require('fancy-log');
-const open = require('gulp-open');
-const plumber = require('gulp-plumber');
-const size = require('gulp-size');
-const sourcemaps = require('gulp-sourcemaps');
-const through = require('through2');
-const browserSync = require('browser-sync').create();
-// ------------------------------------
-// Deployment
-// ------------------------------------
-const aws = require('aws-sdk');
-const publish = require('gulp-awspublish');
-const FastlyPurge = require('fastly-purge');
-// ------------------------------------
-// Configs
-// ------------------------------------
-const pkg = require('./package.json');
-const build = require('./build.json');
-const deploy = require('./deploy.json');
-// ------------------------------------
-// Info from package
-// ------------------------------------
-const { browserslist: browsers, version } = pkg;
-const minSuffix = '.min';
 
-// Get AWS config
+gulp.registry(new HubRegistry(['tasks/*.js']));
-Object.values(deploy).forEach(target => {
-    Object.assign(target, {
-        publisher: publish.create({
-            region: target.region,
-            params: {
-                Bucket: target.bucket,
-            },
-            credentials: new aws.SharedIniFileCredentials({ profile: 'plyr' }),
-        }),
-    });
-});
-
-// Paths
-const paths = {
-    plyr: {
-        // Source paths
-        src: {
-            sass: path.join(__dirname, 'src/sass/**/*.scss'),
-            js: path.join(__dirname, 'src/js/**/*.js'),
-            sprite: path.join(__dirname, 'src/sprite/*.svg'),
-        },
-
-        // Output paths
-        output: path.join(__dirname, 'dist/'),
-    },
-    demo: {
-        // Source paths
-        src: {
-            sass: path.join(__dirname, 'demo/src/sass/**/*.scss'),
-            js: path.join(__dirname, 'demo/src/js/**/*.js'),
-        },
-
-        // Output paths
-        output: path.join(__dirname, 'demo/dist/'),
-
-        // Demo
-        root: path.join(__dirname, 'demo/'),
-    },
-    upload: [
-        path.join(__dirname, `dist/*${minSuffix}.*`),
-        path.join(__dirname, 'dist/*.css'),
-        path.join(__dirname, 'dist/*.svg'),
-        path.join(__dirname, `demo/dist/*${minSuffix}.*`),
-        path.join(__dirname, 'demo/dist/*.css'),
-        path.join(__dirname, 'demo/dist/*.svg'),
-    ],
-};
-
-// Task arrays
-const tasks = {
-    css: [],
-    js: [],
-    sprite: [],
-    clean: 'clean',
-};
-
-// Size plugin
-const sizeOptions = { showFiles: true, gzip: true };
-
-// Clean out /dist
-gulp.task(tasks.clean, done => {
-    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')}`);
-
-    del(dirs);
-
-    done();
-});
-
-// JavaScript
-Object.entries(build.js).forEach(([filename, entry]) => {
-    const { dist, formats, namespace, polyfill, src } = entry;
-
-    formats.forEach(format => {
-        const name = `js:${filename}:${format}`;
-        const extension = format === 'es' ? 'mjs' : 'js';
-        tasks.js.push(name);
-
-        gulp.task(name, () =>
-            gulp
-                .src(src)
-                .pipe(plumber())
-                .pipe(sourcemaps.init())
-                .pipe(
-                    rollup(
-                        {
-                            plugins: [
-                                resolve(),
-                                commonjs(),
-                                babel({
-                                    presets: [
-                                        [
-                                            '@babel/env',
-                                            {
-                                                // debug: true,
-                                                useBuiltIns: polyfill ? 'usage' : false,
-                                                corejs: polyfill ? 3 : undefined,
-                                            },
-                                        ],
-                                    ],
-                                    babelrc: false,
-                                    exclude: [/\/core-js\//],
-                                }),
-                            ],
-                        },
-                        {
-                            name: namespace,
-                            format,
-                        },
-                    ),
-                )
-                .pipe(header('typeof navigator === "object" && ')) // "Support" SSR (#935)
-                .pipe(
-                    rename({
-                        extname: `.${extension}`,
-                    }),
-                )
-                .pipe(gulp.dest(dist))
-                .pipe(filter(`**/*.${extension}`))
-                .pipe(terser())
-                .pipe(rename({ suffix: minSuffix }))
-                .pipe(size(sizeOptions))
-                .pipe(sourcemaps.write(''))
-                .pipe(gulp.dest(dist)),
-        );
-    });
-});
-
-// CSS
-Object.entries(build.css).forEach(([filename, entry]) => {
-    const { dist, src } = entry;
-    const name = `css:${filename}`;
-    tasks.css.push(name);
-
-    gulp.task(name, () =>
-        gulp
-            .src(src)
-            .pipe(plumber())
-            .pipe(sass())
-            .pipe(
-                prefix(browsers, {
-                    cascade: false,
-                }),
-            )
-            .pipe(clean())
-            .pipe(size(sizeOptions))
-            .pipe(gulp.dest(dist)),
-    );
-});
-
-// SVG Sprites
-Object.entries(build.sprite).forEach(([filename, entry]) => {
-    const { dist, src } = entry;
-    const name = `sprite:${filename}`;
-    tasks.sprite.push(name);
-
-    gulp.task(name, () =>
-        gulp
-            .src(src)
-            .pipe(plumber())
-            .pipe(
-                imagemin([
-                    imagemin.svgo({
-                        plugins: [{ removeViewBox: false }],
-                    }),
-                ]),
-            )
-            .pipe(svgstore())
-            .pipe(rename({ basename: path.parse(filename).name }))
-            .pipe(size(sizeOptions))
-            .pipe(gulp.dest(dist)),
-    );
-});
-
-// Build all JS
-gulp.task('js', () => gulp.parallel(...tasks.js));
-
-// Watch for file changes
-gulp.task('watch', () => {
-    // Plyr core
-    gulp.watch(paths.plyr.src.js, gulp.parallel(...tasks.js));
-    gulp.watch(paths.plyr.src.sass, gulp.parallel(...tasks.css));
-    gulp.watch(paths.plyr.src.sprite, gulp.parallel(...tasks.sprite));
-
-    // Demo
-    gulp.watch(paths.demo.src.js, gulp.parallel(...tasks.js));
-    gulp.watch(paths.demo.src.sass, gulp.parallel(...tasks.css));
-});
-
-// Serve via browser sync
-gulp.task('serve', () =>
-    browserSync.init({
-        server: {
-            baseDir: paths.demo.root,
-        },
-        notify: false,
-        watch: true,
-        ghostMode: false,
-    }),
-);
-
-// Build distribution
-gulp.task('build', gulp.series(tasks.clean, gulp.parallel(...tasks.js, ...tasks.css, ...tasks.sprite)));
-
-// Default gulp task
-gulp.task('default', gulp.series('build', gulp.parallel('serve', 'watch')));
-
-// Publish a version to CDN and demo
-// --------------------------------------------
-// Get deployment config
-let credentials = {};
-try {
-    credentials = require('./credentials.json'); //eslint-disable-line
-} catch (e) {
-    // Do nothing
-}
-
-// Get branch info
-const branch = {
-    current: gitbranch.sync(),
-    master: 'master',
-    beta: 'beta',
-};
-
-const maxAge = 31536000; // 1 year
-const options = {
-    cdn: {
-        headers: {
-            'Cache-Control': `max-age=${maxAge}`,
-        },
-    },
-    demo: {
-        uploadPath: branch.current === branch.beta ? '/beta' : null,
-        headers: {
-            'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
-        },
-    },
-    symlinks(ver, filename) {
-        return {
-            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',
-            },
-        };
-    },
-};
-
-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://${deploy.cdn.domain}/${version}`;
-const cdnpath = new RegExp(`${deploy.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.beta];
-
-    if (!allowed.includes(branch.current)) {
-        console.error(`Must be on ${allowed.join(', ')} to publish! (current: ${branch.current})`);
-
-        return false;
-    }
-
-    return true;
-};
-
-gulp.task('version', done => {
-    if (!canDeploy()) {
-        done();
-        return null;
-    }
-
-    const { domain } = deploy.cdn;
-
-    log(`Uploading ${ansi.green.bold(version)} to ${ansi.cyan(domain)}...`);
-
-    // Replace versioned URLs in source
-    const files = ['plyr.js', 'plyr.polyfilled.js', 'config/defaults.js'];
-
-    return gulp
-        .src(
-            files.map(file => path.join(__dirname, `src/js/${file}`)),
-            { base: '.' },
-        )
-        .pipe(replace(semver, `v${version}`))
-        .pipe(replace(cdnpath, `${domain}/${version}/`))
-        .pipe(gulp.dest('./'));
-});
-
-// Publish version to CDN bucket
-gulp.task('cdn', done => {
-    if (!canDeploy()) {
-        done();
-        return null;
-    }
-
-    const { domain, publisher } = deploy.cdn;
-
-    if (!publisher) {
-        throw new Error('No publisher instance. Check AWS configuration.');
-    }
-
-    log(`Uploading ${ansi.green.bold(pkg.version)} to ${ansi.cyan(domain)}...`);
-
-    // Upload to CDN
-    return (
-        gulp
-            .src(paths.upload)
-            .pipe(renameFile)
-            // Remove min suffix from source map URL
-            .pipe(
-                replace(
-                    /sourceMappingURL=([\w-?.]+)/,
-                    (match, filename) => `sourceMappingURL=${filename.replace(minSuffix, '')}`,
-                ),
-            )
-            .pipe(size(sizeOptions))
-            .pipe(replace(localPath, versionPath))
-            .pipe(publisher.publish(options.cdn.headers))
-            .pipe(publish.reporter())
-    );
-});
-
-// Purge the fastly cache incase any 403/404 are cached
-gulp.task('purge', () => {
-    if (!Object.keys(credentials).includes('fastly')) {
-        throw new Error('Fastly credentials required to purge cache.');
-    }
-
-    const { fastly } = credentials;
-    const list = [];
-
-    return gulp
-        .src(paths.upload)
-        .pipe(
-            through.obj((file, enc, cb) => {
-                const filename = file.path.split('/').pop();
-                list.push(`${versionPath}/${filename.replace(minSuffix, '')}`);
-                cb(null);
-            }),
-        )
-        .on('end', () => {
-            const purge = new FastlyPurge(fastly.token);
-
-            list.forEach(url => {
-                log(`Purging ${ansi.cyan(url)}...`);
-
-                purge.url(url, (error, result) => {
-                    if (error) {
-                        log.error(error);
-                    } else if (result) {
-                        log(result);
-                    }
-                });
-            });
-        });
-});
-
-// Publish to demo bucket
-gulp.task('demo', done => {
-    if (!canDeploy()) {
-        done();
-        return null;
-    }
-
-    const { publisher } = deploy.demo;
-    const { domain } = deploy.cdn;
-
-    if (!publisher) {
-        throw new Error('No publisher instance. Check AWS configuration.');
-    }
-
-    log(`Uploading ${ansi.green.bold(pkg.version)} to ${ansi.cyan(domain)}...`);
-
-    // Replace versioned files in readme.md
-    gulp.src([`${__dirname}/readme.md`])
-        .pipe(replace(cdnpath, `${domain}/${version}/`))
-        .pipe(gulp.dest(__dirname));
-
-    // Replace local file paths with remote paths in demo HTML
-    // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
-    const index = `${paths.demo.root}index.html`;
-    const error = `${paths.demo.root}error.html`;
-    const pages = [index];
-
-    if (branch.current === branch.master) {
-        pages.push(error);
-    }
-
-    return gulp
-        .src(pages)
-        .pipe(replace(localPath, versionPath))
-        .pipe(
-            rename(p => {
-                if (options.demo.uploadPath) {
-                    // eslint-disable-next-line no-param-reassign
-                    p.dirname += options.demo.uploadPath;
-                }
-            }),
-        )
-        .pipe(publisher.publish(options.demo.headers))
-        .pipe(publish.reporter());
-});
-
-gulp.task('error', done => {
-    // Only update CDN for master (prod)
-    if (!canDeploy() || branch.current !== branch.master) {
-        done();
-        return null;
-    }
-
-    const { publisher } = deploy.cdn;
-
-    if (!publisher) {
-        throw new Error('No publisher instance. Check AWS configuration.');
-    }
-
-    // Replace local file paths with remote paths in demo HTML
-    // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
-    // Upload error.html to cdn
-    return gulp
-        .src(`${paths.demo.root}error.html`)
-        .pipe(replace(localPath, versionPath))
-        .pipe(publisher.publish(options.demo.headers))
-        .pipe(publish.reporter());
-});
-
-// Open the demo site to check it's ok
-gulp.task('open', () => {
-    const { domain } = deploy.demo;
-
-    return gulp.src(__filename).pipe(
-        open({
-            uri: `https://${domain}/${branch.current === branch.beta ? 'beta' : ''}`,
-        }),
-    );
-});
-
-// Do everything
-gulp.task(
-    'deploy',
-    gulp.series(
-        'version',
-        tasks.clean,
-        gulp.parallel(...tasks.js, ...tasks.css, ...tasks.sprite),
-        'cdn',
-        'demo',
-        'purge',
-        'open',
-    ),
-);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-    "version": "3.5.10",
+  "version": "3.6.0",
   "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "https://plyr.io",
   "author": "Sam Potts <sam@potts.es>",
@@ -34,65 +34,67 @@
     "lint": "eslint src/js && npm run-script remark",
     "lint:fix": "eslint --fix src/js",
     "remark": "remark -f --use 'validate-links=repository:\"sampotts/plyr\"' '{,!(node_modules),.?**/}*.md'",
-        "deploy": "yarn lint && gulp deploy"
+    "deploy": "yarn lint && gulp version && gulp build && gulp deploy",
+    "format": "prettier --write \"./{src,demo/src}/**/*.{js,scss}\""
   },
   "devDependencies": {
     "ansi-colors": "^4.1.1",
-        "aws-sdk": "^2.614.0",
+    "autoprefixer": "^9.7.6",
-        "@babel/core": "^7.8.4",
+    "aws-sdk": "^2.661.0",
-        "@babel/preset-env": "^7.8.4",
+    "@babel/core": "^7.9.0",
-        "babel-eslint": "^10.0.3",
+    "@babel/preset-env": "^7.9.5",
+    "babel-eslint": "^10.1.0",
     "browser-sync": "^2.26.7",
     "del": "^5.1.0",
     "eslint": "^6.8.0",
-        "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-config-airbnb-base": "^14.1.0",
-        "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^6.11.0",
-        "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "^2.20.2",
-        "eslint-plugin-simple-import-sort": "^5.0.1",
+    "eslint-plugin-simple-import-sort": "^5.0.2",
     "fancy-log": "^1.3.3",
     "fastly-purge": "^1.0.1",
     "git-branch": "^2.0.1",
     "gulp": "^4.0.2",
-        "gulp-autoprefixer": "^7.0.1",
     "gulp-awspublish": "^4.1.1",
     "gulp-better-rollup": "^4.0.1",
-        "gulp-clean-css": "^4.2.0",
     "gulp-filter": "^6.0.0",
     "gulp-header": "^2.0.9",
+    "gulp-hub": "^4.2.0",
     "gulp-imagemin": "^7.1.0",
     "gulp-open": "^3.0.1",
     "gulp-plumber": "^1.2.1",
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-replace": "^1.0.0",
-        "gulp-sass": "^4.0.2",
+    "gulp-sass": "^4.1.0",
     "gulp-size": "^3.0.0",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-svgstore": "^7.0.1",
     "gulp-terser": "^1.2.0",
-        "postcss-custom-properties": "^9.0.2",
+    "postcss-clean": "^1.1.0",
+    "postcss-custom-properties": "^9.1.1",
     "prettier-eslint": "^9.0.1",
     "prettier-stylelint": "^0.4.2",
-        "remark-cli": "^7.0.1",
+    "remark-cli": "^8.0.0",
-        "remark-validate-links": "^9.2.0",
+    "remark-validate-links": "^10.0.0",
-        "rollup": "^1.31.0",
+    "rollup": "^2.7.2",
-        "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-        "stylelint": "^13.1.0",
+    "stylelint": "^13.3.3",
     "stylelint-config-prettier": "^8.0.1",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-sass-guidelines": "^7.0.0",
     "stylelint-order": "^4.0.0",
-        "stylelint-scss": "^3.14.2",
+    "stylelint-scss": "^3.17.1",
     "stylelint-selector-bem-pattern": "^2.1.0",
     "through2": "^3.0.1"
   },
   "dependencies": {
-        "core-js": "^3.6.4",
+    "core-js": "^3.6.5",
     "custom-event-polyfill": "^1.0.7",
     "loadjs": "^4.2.0",
-        "rangetouch": "^2.0.0",
+    "rangetouch": "^2.0.1",
     "url-polyfill": "^1.1.8"
   }
 }

src/js/captions.js

@@ -127,14 +127,20 @@ const captions = {
         .filter(track => !meta.get(track))
         .forEach(track => {
           this.debug.log('Track added', track);
+
           // Attempt to store if the original dom element was "default"
           meta.set(track, {
             default: track.mode === 'showing',
           });
 
           // Turn off native caption rendering to avoid double captions
+          // Note: mode='hidden' forces a track to download. To ensure every track
+          // isn't downloaded at once, only 'showing' tracks should be reassigned
+          // eslint-disable-next-line no-param-reassign
+          if (track.mode === 'showing') {
             // eslint-disable-next-line no-param-reassign
             track.mode = 'hidden';
+          }
 
           // Add event listener for cue changes
           on.call(this, track, 'cuechange', () => captions.updateCues.call(this));
@@ -151,7 +157,11 @@ const captions = {
     toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks));
 
     // Update available languages in list
-        if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) {
+    if (
+      is.array(this.config.controls) &&
+      this.config.controls.includes('settings') &&
+      this.config.settings.includes('captions')
+    ) {
       controls.setCaptionsMenu.call(this);
     }
   },
@@ -207,6 +217,14 @@ const captions = {
       // Trigger event (not used internally)
       triggerEvent.call(this, this.media, active ? 'captionsenabled' : 'captionsdisabled');
     }
+
+    // Wait for the call stack to clear before setting mode='hidden'
+    // on the active track - forcing the browser to download it
+    setTimeout(() => {
+      if (active && this.captions.toggled) {
+        this.captions.currentTrackNode.mode = 'hidden';
+      }
+    });
   },
 
   // Set captions by track index

src/js/config/defaults.js

@@ -115,6 +115,9 @@ const defaults = {
     enabled: true, // Allow fullscreen?
     fallback: true, // Fallback using full viewport/window
     iosNative: false, // Use the native fullscreen in iOS (disables custom controls)
+    // Selector for the fullscreen container so contextual / non-player content can remain visible in fullscreen mode
+    // Non-ancestors of the player element will be ignored
+    // container: null, // defaults to the player element
   },
 
   // Local storage
@@ -419,16 +422,16 @@ const defaults = {
     title: false,
     speed: true,
     transparent: false,
-        // These settings require a pro or premium account to work
+    // Whether the owner of the video has a Pro or Business account
-        sidedock: false,
+    // (which allows us to properly hide controls without CSS hacks, etc)
-        controls: false,
+    premium: false,
     // Custom settings from Plyr
     referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
   },
 
   // YouTube plugin
   youtube: {
-        noCookie: false, // Whether to use an alternative version of YouTube without cookies
+    noCookie: true, // Whether to use an alternative version of YouTube without cookies
     rel: 0, // No related vids
     showinfo: 0, // Hide info
     iv_load_policy: 3, // Hide annotations

src/js/controls.js

@@ -84,9 +84,7 @@ const controls = {
 
       // Seek tooltip
       if (is.element(this.elements.progress)) {
-                this.elements.display.seekTooltip = this.elements.progress.querySelector(
+        this.elements.display.seekTooltip = this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`);
-                    `.${this.config.classNames.tooltip}`,
-                );
       }
 
       return true;
@@ -111,7 +109,7 @@ const controls = {
     setAttributes(
       icon,
       extend(attributes, {
-                role: 'presentation',
+        'aria-hidden': 'true',
         focusable: 'false',
       }),
     );

src/js/fullscreen.js

@@ -5,9 +5,10 @@
 // ==========================================================================
 
 import browser from './utils/browser';
-import { getElements, hasClass, toggleClass } from './utils/elements';
+import { closest,getElements, hasClass, toggleClass } from './utils/elements';
 import { on, triggerEvent } from './utils/events';
 import is from './utils/is';
+import { silencePromise } from './utils/promise';
 
 class Fullscreen {
   constructor(player) {
@@ -24,6 +25,11 @@ class Fullscreen {
     // Force the use of 'full window/browser' rather than fullscreen
     this.forceFallback = player.config.fullscreen.fallback === 'force';
 
+    // Get the fullscreen element
+    // Checks container is an ancestor, defaults to null
+    this.player.elements.fullscreen =
+      player.config.fullscreen.container && closest(this.player.elements.container, player.config.fullscreen.container);
+
     // Register event listeners
     // Handle event (incase user presses escape etc)
     on.call(
@@ -118,14 +124,14 @@ class Fullscreen {
 
     const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`];
 
-        return element === this.target;
+    return element && element.shadowRoot ? element === this.target.getRootNode().host : element === this.target;
   }
 
   // Get target element
   get target() {
     return browser.isIos && this.player.config.fullscreen.iosNative
       ? this.player.media
-            : this.player.elements.container;
+      : this.player.elements.fullscreen || this.player.elements.container;
   }
 
   onChange() {
@@ -201,10 +207,7 @@ class Fullscreen {
 
     // Get the current focused element
     const focused = document.activeElement;
-        const focusable = getElements.call(
+    const focusable = getElements.call(this.player, 'a[href], button:not(:disabled), input:not(:disabled), [tabindex]');
-            this.player,
-            'a[href], button:not(:disabled), input:not(:disabled), [tabindex]',
-        );
     const [first] = focusable;
     const last = focusable[focusable.length - 1];
 
@@ -268,7 +271,7 @@ class Fullscreen {
     // iOS native fullscreen
     if (browser.isIos && this.player.config.fullscreen.iosNative) {
       this.target.webkitExitFullscreen();
-            this.player.play();
+      silencePromise(this.player.play());
     } else if (!Fullscreen.native || this.forceFallback) {
       this.toggleFallback(false);
     } else if (!this.prefix) {

src/js/html5.js

@@ -6,6 +6,7 @@ import support from './support';
 import { removeElement } from './utils/elements';
 import { triggerEvent } from './utils/events';
 import is from './utils/is';
+import { silencePromise } from './utils/promise';
 import { setAspectRatio } from './utils/style';
 
 const html5 = {
@@ -101,7 +102,7 @@ const html5 = {
 
               // Resume playing
               if (!paused) {
-                                player.play();
+                silencePromise(player.play());
               }
             });
 

src/js/listeners.js

@@ -9,6 +9,7 @@ import browser from './utils/browser';
 import { getElement, getElements, matches, toggleClass } from './utils/elements';
 import { off, on, once, toggleListener, triggerEvent } from './utils/events';
 import is from './utils/is';
+import { silencePromise } from './utils/promise';
 import { getAspectRatio, setAspectRatio } from './utils/style';
 
 class Listeners {
@@ -99,7 +100,7 @@ class Listeners {
         case 75:
           // Space and K key
           if (!repeat) {
-                        player.togglePlay();
+            silencePromise(player.togglePlay());
           }
           break;
 
@@ -228,6 +229,7 @@ class Listeners {
 
     // Delay the adding of classname until the focus has changed
     // This event fires before the focusin event
+    if (event.type !== 'focusout') {
       this.focusTimer = setTimeout(() => {
         const focused = document.activeElement;
 
@@ -239,6 +241,7 @@ class Listeners {
         toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
       }, 10);
     }
+  }
 
   // Global window & document listeners
   global(toggle = true) {
@@ -256,7 +259,7 @@ class Listeners {
     once.call(player, document.body, 'touchstart', this.firstTouch);
 
     // Tab focus detection
-        toggleListener.call(player, document.body, 'keydown focus blur', this.setTabFocus, toggle, false, true);
+    toggleListener.call(player, document.body, 'keydown focus blur focusout', this.setTabFocus, toggle, false, true);
   }
 
   // Container listeners
@@ -303,7 +306,7 @@ class Listeners {
 
     // Set a gutter for Vimeo
     const setGutter = (ratio, padding, toggle) => {
-            if (!player.isVimeo) {
+      if (!player.isVimeo || player.config.vimeo.premium) {
         return;
       }
 
@@ -353,7 +356,7 @@ class Listeners {
       // Set Vimeo gutter
       setGutter(ratio, padding, isEnter);
 
-            // If not using native fullscreen, we need to check for resizes of viewport
+      // If not using native browser fullscreen API, we need to check for resizes of viewport
       if (!usingNative) {
         if (isEnter) {
           on.call(player, window, 'resize', resized);
@@ -431,9 +434,21 @@ class Listeners {
 
         if (player.ended) {
           this.proxy(event, player.restart, 'restart');
-                    this.proxy(event, player.play, 'play');
+          this.proxy(
+            event,
+            () => {
+              silencePromise(player.play());
+            },
+            'play',
+          );
         } else {
-                    this.proxy(event, player.togglePlay, 'play');
+          this.proxy(
+            event,
+            () => {
+              silencePromise(player.togglePlay());
+            },
+            'play',
+          );
         }
       });
     }
@@ -539,7 +554,14 @@ class Listeners {
     // Play/pause toggle
     if (elements.buttons.play) {
       Array.from(elements.buttons.play).forEach(button => {
-                this.bind(button, 'click', player.togglePlay, 'play');
+        this.bind(
+          button,
+          'click',
+          () => {
+            silencePromise(player.togglePlay());
+          },
+          'play',
+        );
       });
     }
 
@@ -610,7 +632,7 @@ class Listeners {
         controls.toggleMenu.call(player, event);
       },
       null,
-            false
+      false,
     ); // Can't be passive as we're preventing default
 
     // Settings menu - keyboard toggle
@@ -681,7 +703,7 @@ class Listeners {
       // If we're done seeking and it was playing, resume playback
       if (play && done) {
         seek.removeAttribute(attribute);
-                player.play();
+        silencePromise(player.play());
       } else if (!done && player.playing) {
         seek.setAttribute(attribute, '');
         player.pause();
@@ -794,6 +816,17 @@ class Listeners {
       elements.controls.hover = !player.touch && event.type === 'mouseenter';
     });
 
+    // Also update controls.hover state for any non-player children of fullscreen element (as above)
+    if (elements.fullscreen) {
+      Array.from(elements.fullscreen.children)
+        .filter(c => !c.contains(elements.container))
+        .forEach(child => {
+          this.bind(child, 'mouseenter mouseleave', event => {
+            elements.controls.hover = !player.touch && event.type === 'mouseenter';
+          });
+        });
+    }
+
     // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
     this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
       elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);

src/js/media.js

@@ -38,15 +38,13 @@ const media = {
       // Wrap the video in a container
       wrap(this.media, this.elements.wrapper);
 
-            // Faux poster container
+      // Poster image container
-            if (this.isEmbed) {
       this.elements.poster = createElement('div', {
         class: this.config.classNames.poster,
       });
 
       this.elements.wrapper.appendChild(this.elements.poster);
     }
-        }
 
     if (this.isHTML5) {
       html5.setup.call(this);

src/js/plugins/ads.js

@@ -11,6 +11,7 @@ import { triggerEvent } from '../utils/events';
 import i18n from '../utils/i18n';
 import is from '../utils/is';
 import loadScript from '../utils/load-script';
+import { silencePromise } from '../utils/promise';
 import { formatTime } from '../utils/time';
 import { buildUrlParams } from '../utils/urls';
 
@@ -172,17 +173,6 @@ class Ads {
     // We assume the adContainer is the video container of the plyr element that will house the ads
     this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container, this.player.media);
 
-        // Request video ads to be pre-loaded
-        this.requestAds();
-    }
-
-    /**
-     * Request advertisements
-     */
-    requestAds() {
-        const { container } = this.player.elements;
-
-        try {
     // Create ads loader
     this.loader = new google.ima.AdsLoader(this.elements.displayContainer);
 
@@ -194,6 +184,17 @@ class Ads {
     );
     this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false);
 
+    // Request video ads to be pre-loaded
+    this.requestAds();
+  }
+
+  /**
+   * Request advertisements
+   */
+  requestAds() {
+    const { container } = this.player.elements;
+
+    try {
       // Request video ads
       const request = new google.ima.AdsRequest();
       request.adTagUrl = this.tagUrl;
@@ -369,7 +370,12 @@ class Ads {
         // TODO: So there is still this thing where a video should only be allowed to start
         // playing when the IMA SDK is ready or has failed
 
+        if (this.player.ended) {
           this.loadAds();
+        } else {
+          // The SDK won't allow new ads to be called without receiving a contentComplete()
+          this.loader.contentComplete();
+        }
 
         break;
 
@@ -510,7 +516,7 @@ class Ads {
     this.playing = false;
 
     // Play video
-        this.player.media.play();
+    silencePromise(this.player.media.play());
   }
 
   /**
@@ -563,6 +569,8 @@ class Ads {
           this.on('loaded', resolve);
           this.player.debug.log(this.manager);
         });
+        // Now that the manager has been destroyed set it to also be un-initialized
+        this.initialized = false;
 
         // Now request some new advertisements
         this.requestAds();

src/js/plugins/preview-thumbnails.js

@@ -137,19 +137,32 @@ class PreviewThumbnails {
         throw new Error('Missing previewThumbnails.src config attribute');
       }
 
-            // If string, convert into single-element list
+      // Resolve promise
-            const urls = is.string(src) ? [src] : src;
+      const sortAndResolve = () => {
-            // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails
-            const promises = urls.map(u => this.getThumbnail(u));
-
-            Promise.all(promises).then(() => {
         // Sort smallest to biggest (e.g., [120p, 480p, 1080p])
         this.thumbnails.sort((x, y) => x.height - y.height);
 
         this.player.debug.log('Preview thumbnails', this.thumbnails);
 
         resolve();
+      };
+
+      // Via callback()
+      if (is.function(src)) {
+        src(thumbnails => {
+          this.thumbnails = thumbnails;
+          sortAndResolve();
         });
+      }
+      // VTT urls
+      else {
+        // If string, convert into single-element list
+        const urls = is.string(src) ? [src] : src;
+        // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails
+        const promises = urls.map(u => this.getThumbnail(u));
+        // Resolve
+        Promise.all(promises).then(sortAndResolve);
+      }
     });
   }
 
@@ -404,8 +417,7 @@ class PreviewThumbnails {
       this.player.debug.log(`Loading image: ${thumbUrl}`);
 
       // For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function...
-            previewImage.onload = () =>
+      previewImage.onload = () => this.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);
-                this.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);
       this.loadingImage = previewImage;
       this.removeOldImages(previewImage);
     } else {
@@ -499,8 +511,7 @@ class PreviewThumbnails {
                 previewImage.src = thumbURL;
                 previewImage.onload = () => {
                   this.player.debug.log(`Preloaded thumb filename: ${newThumbFilename}`);
-                                    if (!this.loadedImages.includes(newThumbFilename))
+                  if (!this.loadedImages.includes(newThumbFilename)) this.loadedImages.push(newThumbFilename);
-                                        this.loadedImages.push(newThumbFilename);
 
                   // We don't resolve until the thumb is loaded
                   resolve();
@@ -627,10 +638,16 @@ class PreviewThumbnails {
       const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
       this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
       this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
-        } else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
+    } else if (
+      this.elements.thumb.imageContainer.clientHeight > 20 &&
+      this.elements.thumb.imageContainer.clientWidth < 20
+    ) {
       const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
       this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
-        } else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
+    } else if (
+      this.elements.thumb.imageContainer.clientHeight < 20 &&
+      this.elements.thumb.imageContainer.clientWidth > 20
+    ) {
       const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
       this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
     }

src/js/plugins/vimeo.js

@@ -10,7 +10,6 @@ import { triggerEvent } from '../utils/events';
 import fetch from '../utils/fetch';
 import is from '../utils/is';
 import loadScript from '../utils/load-script';
-import { extend } from '../utils/objects';
 import { format, stripHTML } from '../utils/strings';
 import { setAspectRatio } from '../utils/style';
 import { buildUrlParams } from '../utils/urls';
@@ -71,21 +70,25 @@ const vimeo = {
   ready() {
     const player = this;
     const config = player.config.vimeo;
+    const { premium, referrerPolicy, ...frameParams } = config;
+
+    // If the owner has a pro or premium account then we can hide controls etc
+    if (premium) {
+      Object.assign(frameParams, {
+        controls: false,
+        sidedock: false,
+      });
+    }
 
     // Get Vimeo params for the iframe
-        const params = buildUrlParams(
+    const params = buildUrlParams({
-            extend(
-                {},
-                {
       loop: player.config.loop.active,
       autoplay: player.autoplay,
       muted: player.muted,
       gesture: 'media',
       playsinline: !this.config.fullscreen.iosNative,
-                },
+      ...frameParams,
-                config,
+    });
-            ),
-        );
 
     // Get the source URL or ID
     let source = player.media.getAttribute('src');
@@ -101,20 +104,23 @@ const vimeo = {
     const src = format(player.config.urls.vimeo.iframe, id, params);
     iframe.setAttribute('src', src);
     iframe.setAttribute('allowfullscreen', '');
-        iframe.setAttribute('allowtransparency', '');
+    iframe.setAttribute('allow', 'autoplay,fullscreen,picture-in-picture');
-        iframe.setAttribute('allow', 'autoplay');
 
     // Set the referrer policy if required
-        if (!is.empty(config.referrerPolicy)) {
+    if (!is.empty(referrerPolicy)) {
-            iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+      iframe.setAttribute('referrerPolicy', referrerPolicy);
     }
 
-        // Get poster, if already set
-        const { poster } = player;
     // Inject the package
-        const wrapper = createElement('div', { poster, class: player.config.classNames.embedContainer });
+    const { poster } = player;
+    if (premium) {
+      iframe.setAttribute('data-poster', poster);
+      player.media = replaceElement(iframe, player.media);
+    } else {
+      const wrapper = createElement('div', { class: player.config.classNames.embedContainer, 'data-poster': poster });
       wrapper.appendChild(iframe);
       player.media = replaceElement(wrapper, player.media);
+    }
 
     // Get poster image
     fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => {
@@ -201,9 +207,15 @@ const vimeo = {
         return speed;
       },
       set(input) {
-                player.embed.setPlaybackRate(input).then(() => {
+        player.embed
+          .setPlaybackRate(input)
+          .then(() => {
             speed = input;
             triggerEvent.call(player, player.media, 'ratechange');
+          })
+          .catch(() => {
+            // Cannot set Playback Rate, Video is probably not on Pro account
+            player.options.speed = [1];
           });
       },
     });

src/js/plugins/youtube.js

@@ -124,7 +124,7 @@ const youtube = {
     // Get poster, if already set
     const { poster } = player;
     // Replace media element
-        const container = createElement('div', { id, poster });
+    const container = createElement('div', { id, 'data-poster': poster });
     player.media = replaceElement(container, player.media);
 
     // Id to poster wrapper

src/js/plyr.d.ts

@@ -133,6 +133,21 @@ declare class Plyr {
    */
   pip: boolean;
 
+  /**
+   * Gets or sets the aspect ratio for embedded players.
+   */
+  ratio?: string;
+
+  /**
+   * Returns the current video Provider
+   */
+  readonly provider: 'html5' | 'vimeo' | 'youtube';
+
+  /**
+   * Returns the native API for Vimeo or Youtube players
+   */
+  readonly embed?: any;
+
   readonly fullscreen: Plyr.FullscreenControl;
 
   /**
@@ -306,7 +321,7 @@ declare namespace Plyr {
 
     /**
      * If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function;
-         * id (the unique id for the player), seektime (the seektime step in seconds), and title (the media title). See controls.md for more info on how the html needs to be structured.
+     * id (the unique id for the player), seektime (the seektime step in seconds), and title (the media title). See CONTROLS.md for more info on how the html needs to be structured.
      * Defaults to ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']
      */
     controls?: string[] | ((id: string, seektime: number, title: string) => unknown) | Element;
@@ -471,6 +486,16 @@ declare namespace Plyr {
      * enabled: Whether to enable vi.ai ads. publisherId: Your unique vi.ai publisher ID.
      */
     ads?: AdOptions;
+
+    /**
+     * Vimeo Player Options.
+     */
+    vimeo?: object;
+
+    /**
+     * Youtube Player Options.
+     */
+    youtube?: object;
   }
 
   interface QualityOptions {
@@ -506,6 +531,7 @@ declare namespace Plyr {
     enabled?: boolean;
     fallback?: boolean;
     allowAudio?: boolean;
+    iosNative?: boolean;
   }
 
   interface CaptionOptions {

src/js/plyr.js

@@ -27,6 +27,7 @@ import is from './utils/is';
 import loadSprite from './utils/load-sprite';
 import { clamp } from './utils/numbers';
 import { cloneDeep, extend } from './utils/objects';
+import { silencePromise } from './utils/promise';
 import { getAspectRatio, reduceAspectRatio, setAspectRatio, validateRatio } from './utils/style';
 import { parseUrl } from './utils/urls';
 
@@ -79,6 +80,7 @@ class Plyr {
     // Elements cache
     this.elements = {
       container: null,
+      fullscreen: null,
       captions: null,
       buttons: {},
       display: {},
@@ -268,6 +270,9 @@ class Plyr {
       wrap(this.media, this.elements.container);
     }
 
+    // Migrate custom properties from media to container (so they work 😉)
+    ui.migrateStyles.call(this);
+
     // Add style hook
     ui.addStyleHook.call(this);
 
@@ -281,6 +286,9 @@ class Plyr {
       });
     }
 
+    // Setup fullscreen
+    this.fullscreen = new Fullscreen(this);
+
     // Setup interface
     // If embed but not fully supported, build interface now to avoid flash of controls
     if (this.isHTML5 || (this.isEmbed && !this.supported.ui)) {
@@ -293,9 +301,6 @@ class Plyr {
     // Global listeners
     this.listeners.global();
 
-        // Setup fullscreen
-        this.fullscreen = new Fullscreen(this);
-
     // Setup ads if provided
     if (this.config.ads.enabled) {
       this.ads = new Ads(this);
@@ -303,7 +308,7 @@ class Plyr {
 
     // Autoplay if required
     if (this.isHTML5 && this.config.autoplay) {
-            setTimeout(() => this.play(), 10);
+      setTimeout(() => silencePromise(this.play()), 10);
     }
 
     // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
@@ -356,7 +361,7 @@ class Plyr {
 
     // Intecept play with ads
     if (this.ads && this.ads.enabled) {
-            this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play());
+      this.ads.managerPromise.then(() => this.ads.play()).catch(() => silencePromise(this.media.play()));
     }
 
     // Return the promise (for HTML5)
@@ -885,7 +890,7 @@ class Plyr {
       return null;
     }
 
-        return this.media.getAttribute('poster');
+    return this.media.getAttribute('poster') || this.media.getAttribute('data-poster');
   }
 
   /**

src/js/ui.js

@@ -170,12 +170,7 @@ const ui = {
     }
 
     // Set property synchronously to respect the call order
-        this.media.setAttribute('poster', poster);
+    this.media.setAttribute('data-poster', poster);
-
-        // HTML5 uses native poster attribute
-        if (this.isHTML5) {
-            return Promise.resolve(poster);
-        }
 
     // Wait until ui is ready
     return (
@@ -264,16 +259,31 @@ const ui = {
       // Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide
       this.toggleControls(
         Boolean(
-                    force ||
+          force || this.loading || this.paused || controlsElement.pressed || controlsElement.hover || recentTouchSeek,
-                        this.loading ||
-                        this.paused ||
-                        controlsElement.pressed ||
-                        controlsElement.hover ||
-                        recentTouchSeek,
         ),
       );
     }
   },
+
+  // Migrate any custom properties from the media to the parent
+  migrateStyles() {
+    // Loop through values (as they are the keys when the object is spread 🤔)
+    Object.values({ ...this.media.style })
+      // We're only fussed about Plyr specific properties
+      .filter(key => key.startsWith('--plyr'))
+      .forEach(key => {
+        // Set on the container
+        this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));
+
+        // Clean up from media element
+        this.media.style.removeProperty(key);
+      });
+
+    // Remove attribute if empty
+    if (is.empty(this.media.style)) {
+      this.media.removeAttribute('style');
+    }
+  },
 };
 
 export default ui;

src/js/utils/elements.js

@@ -221,7 +221,7 @@ export function hasClass(element, className) {
 
 // Element matches selector
 export function matches(element, selector) {
-    const prototype = { Element };
+  const { prototype } = Element;
 
   function match() {
     return Array.from(document.querySelectorAll(selector)).includes(this);
@@ -237,6 +237,26 @@ export function matches(element, selector) {
   return method.call(element, selector);
 }
 
+// Closest ancestor element matching selector (also tests element itself)
+export function closest(element, selector) {
+  const { prototype } = Element;
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
+  function closestElement() {
+    let el = this;
+
+    do {
+      if (matches.matches(el, selector)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  }
+
+  const method = prototype.closest || closestElement;
+
+  return method.call(element, selector);
+}
+
 // Find all elements
 export function getElements(selector) {
   return this.elements.container.querySelectorAll(selector);

src/js/utils/events.js

@@ -90,7 +90,7 @@ export function triggerEvent(element, type = '', bubbles = false, detail = {}) {
   // Create and dispatch the event
   const event = new CustomEvent(type, {
     bubbles,
-        detail: { ...detail, plyr: this,},
+    detail: { ...detail, plyr: this },
   });
 
   // Dispatch the event

src/js/utils/is.js

@@ -19,7 +19,7 @@ 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));
-const isPromise = input => instanceOf(input, Promise);
+const isPromise = input => instanceOf(input, Promise) && isFunction(input.then);
 
 const isEmpty = input =>
   isNullOrUndefined(input) ||

src/js/utils/promise.js

@@ -0,0 +1,14 @@
+import is from './is';
+/**
+ * Silence a Promise-like object.
+ * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+ * play promise" rejection error messages.
+ * @param  {Object} value An object that may or may not be `Promise`-like.
+ */
+export function silencePromise(value) {
+  if (is.promise(value)) {
+    value.then(null, () => {});
+  }
+}
+
+export default { silencePromise };

src/js/utils/strings.js

@@ -28,17 +28,12 @@ export function getPercentage(current, max) {
 }
 
 // Replace all occurances of a string in a string
-export function replaceAll(input = '', find = '', replace = '') {
+export const replaceAll = (input = '', find = '', replace = '') =>
-    return input.replace(
+  input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
-        new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'),
-        replace.toString(),
-    );
-}
 
 // Convert to title case
-export function toTitleCase(input = '') {
+export const toTitleCase = (input = '') =>
-    return input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
+  input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
-}
 
 // Convert string to pascalCase
 export function toPascalCase(input = '') {

src/js/utils/style.js

@@ -64,9 +64,10 @@ export function setAspectRatio(input) {
   wrapper.style.paddingBottom = `${padding}%`;
 
   // For Vimeo we have an extra <div> to hide the standard controls and UI
-    if (this.isVimeo && this.supported.ui) {
+  if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
-        const height = 240;
+    const height = (100 / this.media.offsetWidth) * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
     const offset = (height - padding) / (height / 50);
+
     this.media.style.transform = `translateY(-${offset}%)`;
   } else if (this.isHTML5) {
     wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);

src/sass/components/badges.scss

@@ -3,9 +3,9 @@
 // --------------------------------------------------------------
 
 .plyr__badge {
-    background: $plyr-badge-bg;
+  background: $plyr-badge-background;
-    border-radius: 2px;
+  border-radius: $plyr-badge-border-radius;
-    color: $plyr-badge-color;
+  color: $plyr-badge-text-color;
   font-size: $plyr-font-size-badge;
   line-height: 1;
   padding: 3px 4px;

src/sass/components/captions.scss

@@ -10,7 +10,6 @@
 .plyr__captions {
   animation: plyr-fade-in 0.3s ease;
   bottom: 0;
-    color: $plyr-captions-color;
   display: none;
   font-size: $plyr-font-size-captions-small;
   left: 0;
@@ -20,27 +19,13 @@
   transition: transform 0.4s ease-in-out;
   width: 100%;
 
-    .plyr__caption {
-        background: $plyr-captions-bg;
-        border-radius: 2px;
-        box-decoration-break: clone;
-        line-height: 185%;
-        padding: 0.2em 0.5em;
-        white-space: pre-wrap;
-
-        // Firefox adds a <div> when using getCueAsHTML()
-        div {
-            display: inline;
-        }
-    }
-
   span:empty {
     display: none;
   }
 
   @media (min-width: $plyr-bp-sm) {
     font-size: $plyr-font-size-captions-base;
-        padding: ($plyr-control-spacing * 2);
+    padding: calc(#{$plyr-control-spacing} * 2);
   }
 
   @media (min-width: $plyr-bp-md) {
@@ -54,6 +39,20 @@
 
 // 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));
+  transform: translateY(calc(#{$plyr-control-spacing} * -4));
 }
 
+.plyr__caption {
+  background: $plyr-captions-background;
+  border-radius: 2px;
+  box-decoration-break: clone;
+  color: $plyr-captions-text-color;
+  line-height: 185%;
+  padding: 0.2em 0.5em;
+  white-space: pre-wrap;
+
+  // Firefox adds a <div> when using getCueAsHTML()
+  div {
+    display: inline;
+  }
+}

src/sass/components/controls.scss

@@ -21,7 +21,7 @@
 
   // Spacing
   .plyr__controls__item {
-        margin-left: ($plyr-control-spacing / 4);
+    margin-left: calc(#{$plyr-control-spacing} / 4);
 
     &:first-child {
       margin-left: 0;
@@ -29,11 +29,11 @@
     }
 
     &.plyr__progress__container {
-            padding-left: ($plyr-control-spacing / 4);
+      padding-left: calc(#{$plyr-control-spacing} / 4);
     }
 
     &.plyr__time {
-            padding: 0 ($plyr-control-spacing / 2);
+      padding: 0 calc(#{$plyr-control-spacing} / 2);
     }
 
     &.plyr__progress__container:first-child,

src/sass/components/menus.scss

@@ -24,7 +24,7 @@
   // The actual menu container
   &__container {
     animation: plyr-popup 0.2s ease;
-        background: $plyr-menu-bg;
+    background: $plyr-menu-background;
     border-radius: 4px;
     bottom: 100%;
     box-shadow: $plyr-menu-shadow;
@@ -44,12 +44,12 @@
 
     // Arrow
     &::after {
-            border: 4px solid transparent;
+      border: $plyr-menu-arrow-size solid transparent;
-            border-top-color: $plyr-menu-bg;
+      border-top-color: $plyr-menu-background;
       content: '';
       height: 0;
       position: absolute;
-            right: 15px;
+      right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
       top: 100%;
       width: 0;
     }
@@ -73,7 +73,10 @@
       color: $plyr-menu-color;
       display: flex;
       font-size: $plyr-font-size-menu;
-            padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
+      padding-bottom: calc(#{$plyr-control-padding} / 1.5);
+      padding-left: calc(#{$plyr-control-padding} * 1.5);
+      padding-right: calc(#{$plyr-control-padding} * 1.5);
+      padding-top: calc(#{$plyr-control-padding} / 1.5);
       user-select: none;
       width: 100%;
 
@@ -84,7 +87,7 @@
       }
 
       &::after {
-                border: 4px solid transparent;
+        border: $plyr-menu-item-arrow-size solid transparent;
         content: '';
         position: absolute;
         top: 50%;
@@ -92,11 +95,11 @@
       }
 
       &--forward {
-                padding-right: ceil($plyr-control-padding * 4);
+        padding-right: calc(#{$plyr-control-padding} * 4);
 
         &::after {
-                    border-left-color: rgba($plyr-menu-color, 0.8);
+          border-left-color: $plyr-menu-item-arrow-color;
-                    right: 5px;
+          right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
         &.plyr__tab-focus::after,
@@ -106,26 +109,25 @@
       }
 
       &--back {
-                $horizontal-padding: ($plyr-control-padding * 2);
         font-weight: $plyr-font-weight-regular;
         margin: $plyr-control-padding;
-                margin-bottom: floor($plyr-control-padding / 2);
+        margin-bottom: calc(#{$plyr-control-padding} / 2);
-                padding-left: ceil($plyr-control-padding * 4);
+        padding-left: calc(#{$plyr-control-padding} * 4);
         position: relative;
-                width: calc(100% - #{$horizontal-padding});
+        width: calc(100% - (#{$plyr-control-padding} * 2));
 
         &::after {
-                    border-right-color: rgba($plyr-menu-color, 0.8);
+          border-right-color: $plyr-menu-item-arrow-color;
-                    left: $plyr-control-padding;
+          left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
         &::before {
-                    background: $plyr-menu-border-color;
+          background: $plyr-menu-back-border-color;
-                    box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
+          box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
           content: '';
           height: 1px;
           left: 0;
-                    margin-top: ceil($plyr-control-padding / 2);
+          margin-top: calc(#{$plyr-control-padding} / 2);
           overflow: hidden;
           position: absolute;
           right: 0;
@@ -172,7 +174,7 @@
 
       &[aria-checked='true'] {
         &::before {
-                    background: $plyr-color-main;
+          background: $plyr-control-toggle-checked-background;
         }
         &::after {
           opacity: 1;
@@ -182,7 +184,7 @@
 
       &.plyr__tab-focus::before,
       &:hover::before {
-                background: rgba(#000, 0.1);
+        background: rgba($plyr-color-gray-900, 0.1);
       }
     }
 
@@ -191,9 +193,9 @@
       align-items: center;
       display: flex;
       margin-left: auto;
-            margin-right: -($plyr-control-padding - 2);
+      margin-right: calc((#{$plyr-control-padding} - 2) * -1);
       overflow: hidden;
-            padding-left: ceil($plyr-control-padding * 3.5);
+      padding-left: calc(#{$plyr-control-padding} * 3.5);
       pointer-events: none;
     }
   }

src/sass/components/progress.scss

@@ -6,14 +6,14 @@
 $plyr-progress-offset: $plyr-range-thumb-height;
 
 .plyr__progress {
-    left: $plyr-progress-offset / 2;
+  left: calc(#{$plyr-progress-offset} * 0.5);
   margin-right: $plyr-progress-offset;
   position: relative;
 
   input[type='range'],
   &__buffer {
-        margin-left: -($plyr-progress-offset / 2);
+    margin-left: calc(#{$plyr-progress-offset} * -0.5);
-        margin-right: -($plyr-progress-offset / 2);
+    margin-right: calc(#{$plyr-progress-offset} * -0.5);
     width: calc(100% + #{$plyr-progress-offset});
   }
 
@@ -36,7 +36,7 @@ $plyr-progress-offset: $plyr-range-thumb-height;
   border-radius: 100px;
   height: $plyr-range-track-height;
   left: 0;
-    margin-top: -($plyr-range-track-height / 2);
+  margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
   padding: 0;
   position: absolute;
   top: 50%;
@@ -72,11 +72,11 @@ $plyr-progress-offset: $plyr-range-thumb-height;
   animation: plyr-progress 1s linear infinite;
   background-image: linear-gradient(
     -45deg,
-        $plyr-progress-loading-bg 25%,
+    $plyr-progress-loading-background 25%,
     transparent 25%,
     transparent 50%,
-        $plyr-progress-loading-bg 50%,
+    $plyr-progress-loading-background 50%,
-        $plyr-progress-loading-bg 75%,
+    $plyr-progress-loading-background 75%,
     transparent 75%,
     transparent
   );
@@ -86,9 +86,9 @@ $plyr-progress-offset: $plyr-range-thumb-height;
 }
 
 .plyr--video.plyr--loading .plyr__progress__buffer {
-    background-color: $plyr-video-progress-buffered-bg;
+  background-color: $plyr-video-progress-buffered-background;
 }
 
 .plyr--audio.plyr--loading .plyr__progress__buffer {
-    background-color: $plyr-audio-progress-buffered-bg;
+  background-color: $plyr-audio-progress-buffered-background;
 }

src/sass/components/sliders.scss

@@ -7,11 +7,11 @@
   -webkit-appearance: none; /* stylelint-disable-line */
   background: transparent;
   border: 0;
-    border-radius: ($plyr-range-thumb-height * 2);
+  border-radius: calc(#{$plyr-range-thumb-height} * 2);
-    // color is used in JS to populate lower fill for WebKit
+  // `color` property is used in JS to populate lower fill for WebKit
-    color: $plyr-range-fill-bg;
+  color: $plyr-range-fill-background;
   display: block;
-    height: $plyr-range-max-height;
+  height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
   margin: 0;
   padding: 0;
   transition: box-shadow 0.3s ease;
@@ -25,7 +25,7 @@
   &::-webkit-slider-thumb {
     @include plyr-range-thumb();
     -webkit-appearance: none; /* stylelint-disable-line */
-        margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
+    margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
   }
 
   // Mozilla
@@ -39,7 +39,7 @@
 
   &::-moz-range-progress {
     background: currentColor;
-        border-radius: ($plyr-range-track-height / 2);
+    border-radius: calc(#{$plyr-range-track-height} / 2);
     height: $plyr-range-track-height;
   }
 

src/sass/components/times.scss

@@ -14,7 +14,7 @@
     margin-right: $plyr-control-spacing;
   }
 
-    @media (max-width: $plyr-bp-sm-max) {
+  @media (max-width: calc(#{$plyr-bp-md} - 1)) {
     display: none;
   }
 }

src/sass/components/tooltips.scss

@@ -3,7 +3,7 @@
 // --------------------------------------------------------------
 
 .plyr__tooltip {
-    background: $plyr-tooltip-bg;
+  background: $plyr-tooltip-background;
   border-radius: $plyr-tooltip-radius;
   bottom: 100%;
   box-shadow: $plyr-tooltip-shadow;
@@ -12,9 +12,9 @@
   font-weight: $plyr-font-weight-regular;
   left: 50%;
   line-height: 1.3;
-    margin-bottom: ($plyr-tooltip-padding * 2);
+  margin-bottom: calc(#{$plyr-tooltip-padding} * 2);
   opacity: 0;
-    padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
+  padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5);
   pointer-events: none;
   position: absolute;
   transform: translate(-50%, 10px) scale(0.8);
@@ -27,8 +27,8 @@
   &::before {
     border-left: $plyr-tooltip-arrow-size solid transparent;
     border-right: $plyr-tooltip-arrow-size solid transparent;
-        border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
+    border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
-        bottom: -$plyr-tooltip-arrow-size;
+    bottom: calc(#{$plyr-tooltip-arrow-size} * -1);
     content: '';
     height: 0;
     left: 50%;
@@ -59,7 +59,7 @@
   transform-origin: 0 100%;
 
   &::before {
-        left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+    left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
   }
 }
 
@@ -72,7 +72,7 @@
 
   &::before {
     left: auto;
-        right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+    right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
     transform: translateX(50%);
   }
 }

src/sass/components/volume.scss

@@ -11,8 +11,8 @@
   width: 20%;
 
   input[type='range'] {
-        margin-left: ($plyr-control-spacing / 2);
+    margin-left: calc(#{$plyr-control-spacing} / 2);
-        margin-right: ($plyr-control-spacing / 2);
+    margin-right: calc(#{$plyr-control-spacing} / 2);
     position: relative;
     z-index: 2;
   }

src/sass/lib/css-vars.scss

@@ -0,0 +1,100 @@
+// Downloaded from https://github.com/malyw/css-vars (and modified)
+
+// global map to be filled via variables
+$css-vars: ();
+
+// the variable may be set to "true" anywhere in the code,
+// so native CSS custom properties will be used instead of the Sass global map
+$css-vars-use-native: false !default;
+
+///
+// Assigns a variable to the global map
+///
+@function css-var-assign($varName: null, $varValue: null) {
+  @return map-merge(
+    $css-vars,
+    (
+      $varName: $varValue,
+    )
+  );
+}
+
+///
+// Emulates var() CSS native function behavior
+//
+// $args[0] {String} "--" + variable name
+// [$args[1]] Optional default value if variable is not assigned yet
+//
+// E.G.:
+// color: var(--main-color);
+// background: var(--main-background, green);
+///
+@function var($args...) {
+  // CHECK PARAMS
+  @if (length($args) ==0) {
+    @error 'Variable name is expected to be passed to the var() function';
+  }
+  @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
+    @error "Variable name is expected to start from '--'";
+  }
+
+  // PROCESS
+  $var-name: nth($args, 1);
+  $var-value: map-get($css-vars, $var-name);
+
+  @if ($css-vars-use-native) {
+    // CSS variables
+    // Native CSS: don't process function in case of native
+    @return unquote('var(' + $args + ')');
+  } @else {
+    @if ($var-value == null) {
+      // variable is not provided so far
+      @if (length($args) == 2) {
+        $var-value: nth($args, 2);
+      }
+    }
+
+    // Sass: return value from the map
+    @return $var-value;
+  }
+}
+
+///
+// SASS mixin to provide variables
+// E.G.:
+// @include css-vars((
+//    --color: rebeccapurple,
+//    --height: 68px,
+//    --margin-top: calc(2vh + 20px)
+// ));
+///
+@mixin css-vars($var-map: null) {
+  // CHECK PARAMS
+  @if ($var-map == null) {
+    @error 'Map of variables is expected, instead got: null';
+  }
+  @if (type_of($var-map) != map) {
+    @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
+  }
+
+  // PROCESS
+  @if ($css-vars-use-native) {
+    // CSS variables
+    // Native CSS: assign CSS custom properties to the global scope
+    @at-root :root {
+      @each $var-name, $var-value in $var-map {
+        @if (type_of($var-value) == string) {
+          #{$var-name}: $var-value; // to prevent quotes interpolation
+        } @else {
+          #{$var-name}: #{$var-value};
+        }
+      }
+    }
+  } @else {
+    // Sass or debug
+    // merge variables and values to the global map (provides no output)
+    @each $var-name, $var-value in $var-map {
+      $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable
+    }
+  }
+}

src/sass/lib/mixins.scss

@@ -4,9 +4,11 @@
 
 // Nicer focus styles
 // ---------------------------------------
-@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
+@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
-    box-shadow: 0 0 0 5px rgba($color, 0.5);
+  outline-color: $color;
-    outline: 0;
+  outline-offset: 2px;
+  outline-style: dotted;
+  outline-width: 3px;
 }
 
 // Font smoothing
@@ -15,9 +17,6 @@
   @if $mode {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-    } @else {
-        -moz-osx-font-smoothing: auto;
-        -webkit-font-smoothing: subpixel-antialiased;
   }
 }
 
@@ -26,14 +25,14 @@
 @mixin plyr-range-track() {
   background: transparent;
   border: 0;
-    border-radius: ($plyr-range-track-height / 2);
+  border-radius: calc(#{$plyr-range-track-height} / 2);
   height: $plyr-range-track-height;
   transition: box-shadow 0.3s ease;
   user-select: none;
 }
 
 @mixin plyr-range-thumb() {
-    background: $plyr-range-thumb-bg;
+  background: $plyr-range-thumb-background;
   border: 0;
   border-radius: 100%;
   box-shadow: $plyr-range-thumb-shadow;
@@ -43,7 +42,7 @@
   width: $plyr-range-thumb-height;
 }
 
-@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) {
+@mixin plyr-range-thumb-active($color) {
   box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
 }
 
@@ -69,8 +68,6 @@
   &.plyr--vimeo .plyr__video-wrapper {
     height: 0;
     position: relative;
-        top: 50%;
-        transform: translateY(-50%);
   }
 
   // Display correct icon

src/sass/plugins/ads.scss

@@ -23,7 +23,7 @@
 
   // The countdown label
   &::after {
-        background: rgba($plyr-color-gray-9, 0.8);
+    background: $plyr-color-gray-900;
     border-radius: 2px;
     bottom: $plyr-control-spacing;
     color: #fff;

src/sass/plugins/preview-thumbnails.scss

@@ -1,118 +0,0 @@
-// --------------------------------------------------------------
-// Preview Thumbnails
-// --------------------------------------------------------------
-
-$plyr-preview-padding: $plyr-tooltip-padding !default;
-$plyr-preview-bg: $plyr-tooltip-bg !default;
-$plyr-preview-radius: $plyr-tooltip-radius !default;
-$plyr-preview-shadow: $plyr-tooltip-shadow !default;
-$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
-$plyr-preview-image-bg: $plyr-color-gray-2 !default;
-$plyr-preview-time-font-size: $plyr-font-size-time !default;
-$plyr-preview-time-padding: 3px 6px !default;
-$plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
-$plyr-preview-time-color: #fff;
-$plyr-preview-time-bottom-offset: 6px;
-
-.plyr__preview-thumb {
-    background-color: $plyr-preview-bg;
-    border-radius: 3px;
-    bottom: 100%;
-    box-shadow: $plyr-preview-shadow;
-    margin-bottom: $plyr-preview-padding * 2;
-    opacity: 0;
-    padding: $plyr-preview-radius;
-    pointer-events: none;
-    position: absolute;
-    transform: translate(0, 10px) scale(0.8);
-    transform-origin: 50% 100%;
-    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
-    z-index: 2;
-
-    &--is-shown {
-        opacity: 1;
-        transform: translate(0, 0) scale(1);
-    }
-
-    // The background triangle
-    &::before {
-        border-left: $plyr-preview-arrow-size solid transparent;
-        border-right: $plyr-preview-arrow-size solid transparent;
-        border-top: $plyr-preview-arrow-size solid $plyr-preview-bg;
-        bottom: -$plyr-preview-arrow-size;
-        content: '';
-        height: 0;
-        left: 50%;
-        position: absolute;
-        transform: translateX(-50%);
-        width: 0;
-        z-index: 2;
-    }
-
-    &__image-container {
-        background: $plyr-preview-image-bg;
-        border-radius: ($plyr-preview-radius - 1px);
-        overflow: hidden;
-        position: relative;
-        z-index: 0;
-
-        img {
-            height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
-            left: 0;
-            max-height: none;
-            max-width: none;
-            position: absolute;
-            top: 0;
-            width: 100%;
-        }
-    }
-
-    // Seek time text
-    &__time-container {
-        bottom: $plyr-preview-time-bottom-offset;
-        left: 0;
-        position: absolute;
-        right: 0;
-        white-space: nowrap;
-        z-index: 3;
-
-        span {
-            background-color: $plyr-preview-time-bg;
-            border-radius: ($plyr-preview-radius - 1px);
-            color: $plyr-preview-time-color;
-            font-size: $plyr-preview-time-font-size;
-            padding: $plyr-preview-time-padding;
-        }
-    }
-}
-
-.plyr__preview-scrubbing {
-    bottom: 0;
-    filter: blur(1px);
-    height: 100%;
-    left: 0;
-    margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
-    opacity: 0;
-    overflow: hidden;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: opacity 0.3s ease;
-    width: 100%;
-    z-index: 1;
-
-    &--is-shown {
-        opacity: 1;
-    }
-
-    img {
-        height: 100%;
-        left: 0;
-        max-height: none;
-        max-width: none;
-        object-fit: contain;
-        position: absolute;
-        top: 0;
-        width: 100%;
-    }
-}

src/sass/plugins/preview-thumbnails/index.scss

@@ -0,0 +1,109 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+@import './settings';
+
+.plyr__preview-thumb {
+  background-color: $plyr-preview-background;
+  border-radius: 3px;
+  bottom: 100%;
+  box-shadow: $plyr-preview-shadow;
+  margin-bottom: calc(#{$plyr-preview-padding} * 2);
+  opacity: 0;
+  padding: $plyr-preview-radius;
+  pointer-events: none;
+  position: absolute;
+  transform: translate(0, 10px) scale(0.8);
+  transform-origin: 50% 100%;
+  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+  z-index: 2;
+
+  &--is-shown {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+
+  // The background triangle
+  &::before {
+    border-left: $plyr-preview-arrow-size solid transparent;
+    border-right: $plyr-preview-arrow-size solid transparent;
+    border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
+    bottom: calc(#{$plyr-preview-arrow-size} * -1);
+    content: '';
+    height: 0;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 0;
+    z-index: 2;
+  }
+
+  &__image-container {
+    background: $plyr-preview-image-background;
+    border-radius: calc(#{$plyr-preview-radius} - 1px);
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+
+    img {
+      height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
+      left: 0;
+      max-height: none;
+      max-width: none;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  // Seek time text
+  &__time-container {
+    bottom: $plyr-preview-time-bottom-offset;
+    left: 0;
+    position: absolute;
+    right: 0;
+    white-space: nowrap;
+    z-index: 3;
+
+    span {
+      background-color: $plyr-preview-time-background;
+      border-radius: calc(#{$plyr-preview-radius} - 1px);
+      color: $plyr-preview-time-color;
+      font-size: $plyr-preview-time-font-size;
+      padding: $plyr-preview-time-padding;
+    }
+  }
+}
+
+.plyr__preview-scrubbing {
+  bottom: 0;
+  filter: blur(1px);
+  height: 100%;
+  left: 0;
+  margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: opacity 0.3s ease;
+  width: 100%;
+  z-index: 1;
+
+  &--is-shown {
+    opacity: 1;
+  }
+
+  img {
+    height: 100%;
+    left: 0;
+    max-height: none;
+    max-width: none;
+    object-fit: contain;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}

src/sass/plugins/preview-thumbnails/settings.scss

@@ -0,0 +1,15 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+$plyr-preview-padding: $plyr-tooltip-padding !default;
+$plyr-preview-background: $plyr-tooltip-background !default;
+$plyr-preview-radius: $plyr-tooltip-radius !default;
+$plyr-preview-shadow: $plyr-tooltip-shadow !default;
+$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
+$plyr-preview-image-background: $plyr-color-gray-200 !default;
+$plyr-preview-time-font-size: $plyr-font-size-time !default;
+$plyr-preview-time-padding: 3px 6px !default;
+$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
+$plyr-preview-time-color: #fff;
+$plyr-preview-time-bottom-offset: 6px;

src/sass/plyr.scss

@@ -5,6 +5,9 @@
 // ==========================================================================
 @charset 'UTF-8';
 
+@import 'lib/css-vars';
+$css-vars-use-native: true;
+
 @import 'settings/breakpoints';
 @import 'settings/colors';
 @import 'settings/cosmetics';
@@ -43,7 +46,7 @@
 @import 'states/fullscreen';
 
 @import 'plugins/ads';
-@import 'plugins/preview-thumbnails';
+@import 'plugins/preview-thumbnails/index';
 
 @import 'utils/animation';
 @import 'utils/hidden';

src/sass/settings/badges.scss

@@ -2,5 +2,6 @@
 // Badges
 // ==========================================================================
 
-$plyr-badge-bg: $plyr-color-gray-7 !default;
+$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
-$plyr-badge-color: #fff !default;
+$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default;
+$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;

src/sass/settings/breakpoints.scss

@@ -1,12 +1,9 @@
 // ==========================================================================
 // Breakpoints
+// NOTE: we can't use CSS variables for breakpoints unfortunately
+// https://www.w3.org/TR/css-variables-1/#using-variables
 // ==========================================================================
 
 $plyr-bp-sm: 480px !default;
 $plyr-bp-md: 768px !default;
 $plyr-bp-lg: 1024px !default;
-
-// Max-width media queries
-$plyr-bp-xs-max: ($plyr-bp-sm - 1);
-$plyr-bp-sm-max: ($plyr-bp-md - 1);
-$plyr-bp-md-max: ($plyr-bp-lg - 1);

src/sass/settings/captions.scss

@@ -2,8 +2,9 @@
 // Captions
 // ==========================================================================
 
-$plyr-captions-bg: rgba(#000, 0.8) !default;
+$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
-$plyr-captions-color: #fff !default;
+$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
+
 $plyr-font-size-captions-base: $plyr-font-size-base !default;
 $plyr-font-size-captions-small: $plyr-font-size-small !default;
 $plyr-font-size-captions-medium: $plyr-font-size-large !default;

src/sass/settings/colors.scss

@@ -2,16 +2,16 @@
 // Colors
 // ==========================================================================
 
-$plyr-color-main: hsl(198, 100%, 50%) !default;
+$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
 
 // Grayscale
-$plyr-color-gray-9: hsl(210, 15%, 16%);
+$plyr-color-gray-900: hsl(216, 15%, 16%) !default;
-$plyr-color-gray-8: lighten($plyr-color-gray-9, 9%);
+$plyr-color-gray-800: hsl(216, 15%, 25%) !default;
-$plyr-color-gray-7: lighten($plyr-color-gray-8, 9%);
+$plyr-color-gray-700: hsl(216, 15%, 34%) !default;
-$plyr-color-gray-6: lighten($plyr-color-gray-7, 9%);
+$plyr-color-gray-600: hsl(216, 15%, 43%) !default;
-$plyr-color-gray-5: lighten($plyr-color-gray-6, 9%);
+$plyr-color-gray-500: hsl(216, 15%, 52%) !default;
-$plyr-color-gray-4: lighten($plyr-color-gray-5, 9%);
+$plyr-color-gray-400: hsl(216, 15%, 61%) !default;
-$plyr-color-gray-3: lighten($plyr-color-gray-4, 9%);
+$plyr-color-gray-300: hsl(216, 15%, 70%) !default;
-$plyr-color-gray-2: lighten($plyr-color-gray-3, 9%);
+$plyr-color-gray-200: hsl(216, 15%, 79%) !default;
-$plyr-color-gray-1: lighten($plyr-color-gray-2, 9%);
+$plyr-color-gray-100: hsl(216, 15%, 88%) !default;
-$plyr-color-gray-0: lighten($plyr-color-gray-1, 9%);
+$plyr-color-gray-50: hsl(216, 15%, 97%) !default;

src/sass/settings/controls.scss

@@ -2,17 +2,31 @@
 // Controls
 // ==========================================================================
 
-$plyr-control-icon-size: 18px !default;
+$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
-$plyr-control-spacing: 10px !default;
+$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
-$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
+$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default;
-$plyr-control-radius: 3px !default;
+$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
 
-$plyr-video-controls-bg: #000 !default;
+$plyr-control-toggle-checked-background: var(
-$plyr-video-control-color: #fff !default;
+  --plyr-control-toggle-checked-background,
-$plyr-video-control-color-hover: #fff !default;
+  var(--plyr-color-main, $plyr-color-main)
-$plyr-video-control-bg-hover: $plyr-color-main !default;
+) !default;
 
-$plyr-audio-controls-bg: #fff !default;
+$plyr-video-controls-background: var(
-$plyr-audio-control-color: $plyr-color-gray-7 !default;
+  --plyr-video-controls-background,
-$plyr-audio-control-color-hover: #fff !default;
+  linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
-$plyr-audio-control-bg-hover: $plyr-color-main !default;
+) !default;
+$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;
+$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;
+$plyr-video-control-background-hover: var(
+  --plyr-video-control-background-hover,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;
+
+$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;
+$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;
+$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;
+$plyr-audio-control-background-hover: var(
+  --plyr-audio-control-background-hover,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;

src/sass/settings/cosmetics.scss

@@ -2,4 +2,4 @@
 // Cosmetic
 // ==========================================================================
 
-$plyr-tab-focus-default-color: $plyr-color-main !default;
+$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;

src/sass/settings/menus.scss

@@ -2,9 +2,14 @@
 // Menus
 // ==========================================================================
 
-$plyr-menu-bg: rgba(#fff, 0.9) !default;
+$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
-$plyr-menu-color: $plyr-color-gray-7 !default;
+$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
-$plyr-menu-arrow-size: 6px !default;
+$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
-$plyr-menu-border-color: rgba($plyr-color-gray-5, 0.2) !default;
+$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
-$plyr-menu-border-shadow-color: #fff !default;
+$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
-$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
+
+$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
+$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
+
+$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
+$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;

src/sass/settings/progress.scss

@@ -3,9 +3,12 @@
 // ==========================================================================
 
 // Loading
-$plyr-progress-loading-size: 25px !default;
+$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;
-$plyr-progress-loading-bg: rgba($plyr-color-gray-9, 0.6) !default;
+$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;
 
 // Buffered
-$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
+$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
-$plyr-audio-progress-buffered-bg: rgba($plyr-color-gray-2, 0.66) !default;
+$plyr-audio-progress-buffered-background: var(
+  --plyr-audio-progress-buffered-background,
+  rgba($plyr-color-gray-200, 0.6)
+) !default;

src/sass/settings/sliders.scss

@@ -2,23 +2,39 @@
 // Sliders
 // ==========================================================================
 
-// Active state
-$plyr-range-thumb-active-shadow-width: 3px !default;
-
 // Thumb
-$plyr-range-thumb-height: 13px !default;
+$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
-$plyr-range-thumb-bg: #fff !default;
+$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
-$plyr-range-thumb-border: 2px solid transparent !default;
+$plyr-range-thumb-shadow: var(
-$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-9, 0.2) !default;
+  --plyr-range-thumb-shadow,
+  0 1px 1px rgba($plyr-color-gray-900, 0.15),
+  0 0 0 1px rgba($plyr-color-gray-900, 0.2)
+) !default;
+
+// Active state
+$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
 
 // Track
-$plyr-range-track-height: 5px !default;
+$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;
-$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
 
 // Fill
-$plyr-range-fill-bg: $plyr-color-main !default;
+$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
 
 // Type specific
-$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
+$plyr-video-range-track-background: var(
-$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
+  --plyr-video-range-track-background,
-$plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;
+  $plyr-video-progress-buffered-background
+) !default;
+$plyr-video-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
+  rgba(#fff, 0.5)
+) !default;
+
+$plyr-audio-range-track-background: var(
+  --plyr-audio-range-track-background,
+  $plyr-audio-progress-buffered-background
+) !default;
+$plyr-audio-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
+  rgba($plyr-color-gray-900, 0.1)
+) !default;

src/sass/settings/tooltips.scss

@@ -2,9 +2,9 @@
 // Tooltips
 // ==========================================================================
 
-$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
+$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
-$plyr-tooltip-color: $plyr-color-gray-7 !default;
+$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
-$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
+$plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default;
-$plyr-tooltip-arrow-size: 4px !default;
+$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
-$plyr-tooltip-radius: 3px !default;
+$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
-$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;
+$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;

src/sass/settings/type.scss

@@ -2,19 +2,19 @@
 // Typography
 // ==========================================================================
 
-$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
+$plyr-font-family: var(--plyr-font-family, inherit) !default;
-$plyr-font-size-base: 16px !default;
+$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
-$plyr-font-size-small: 14px !default;
+$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
-$plyr-font-size-large: 18px !default;
+$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
-$plyr-font-size-xlarge: 21px !default;
+$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
 
-$plyr-font-size-time: $plyr-font-size-small !default;
+$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
-$plyr-font-size-badge: 9px !default;
+$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
-$plyr-font-size-menu: $plyr-font-size-small !default;
+$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
 
-$plyr-font-weight-regular: 500 !default;
+$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
-$plyr-font-weight-bold: 600 !default;
+$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
 
-$plyr-line-height: 1.7 !default;
+$plyr-line-height: var(--plyr-line-height, 1.7) !default;
 
-$plyr-font-smoothing: false !default;
+$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;

src/sass/types/audio.scss

@@ -9,7 +9,7 @@
 
 // Controls container
 .plyr--audio .plyr__controls {
-    background: $plyr-audio-controls-bg;
+  background: $plyr-audio-controls-background;
   border-radius: inherit;
   color: $plyr-audio-control-color;
   padding: $plyr-control-spacing;
@@ -20,7 +20,7 @@
   &.plyr__tab-focus,
   &:hover,
   &[aria-expanded='true'] {
-        background: $plyr-audio-control-bg-hover;
+    background: $plyr-audio-control-background-hover;
     color: $plyr-audio-control-color-hover;
   }
 }
@@ -28,34 +28,34 @@
 // Range inputs
 .plyr--full-ui.plyr--audio input[type='range'] {
   &::-webkit-slider-runnable-track {
-        background-color: $plyr-audio-range-track-bg;
+    background-color: $plyr-audio-range-track-background;
   }
 
   &::-moz-range-track {
-        background-color: $plyr-audio-range-track-bg;
+    background-color: $plyr-audio-range-track-background;
   }
 
   &::-ms-track {
-        background-color: $plyr-audio-range-track-bg;
+    background-color: $plyr-audio-range-track-background;
   }
 
   // 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-active-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-active-shadow-color);
     }
 
     &::-ms-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
   }
 }
 
 // Progress
 .plyr--audio .plyr__progress__buffer {
-    color: $plyr-audio-progress-buffered-bg;
+  color: $plyr-audio-progress-buffered-background;
 }

src/sass/types/video.scss

@@ -17,6 +17,7 @@
   height: 100%;
   margin: auto;
   overflow: hidden;
+  position: relative;
   width: 100%;
 }
 
@@ -52,20 +53,22 @@ $embed-padding: ((100 / 16) * 9);
 
 // Controls container
 .plyr--video .plyr__controls {
-    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
+  background: $plyr-video-controls-background;
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
   bottom: 0;
   color: $plyr-video-control-color;
   left: 0;
-    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
+  padding: calc(#{$plyr-control-spacing} / 2);
+  padding-top: calc(#{$plyr-control-spacing} * 2);
   position: absolute;
   right: 0;
   transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
   z-index: 3;
 
   @media (min-width: $plyr-bp-sm) {
-        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
+    padding: $plyr-control-spacing;
+    padding-top: calc(#{$plyr-control-spacing} * 3.5);
   }
 }
 
@@ -82,23 +85,25 @@ $embed-padding: ((100 / 16) * 9);
   &.plyr__tab-focus,
   &:hover,
   &[aria-expanded='true'] {
-        background: $plyr-video-control-bg-hover;
+    background: $plyr-video-control-background-hover;
     color: $plyr-video-control-color-hover;
   }
 }
 
 // Large play button (video only)
 .plyr__control--overlaid {
-    background: rgba($plyr-video-control-bg-hover, 0.8);
+  background: $plyr-video-control-background-hover;
   border: 0;
   border-radius: 100%;
   color: $plyr-video-control-color;
   display: none;
   left: 50%;
-    padding: ceil($plyr-control-spacing * 1.5);
+  opacity: 0.9;
+  padding: calc(#{$plyr-control-spacing} * 1.5);
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
+  transition: 0.3s;
   z-index: 2;
 
   // Offset icon to make the play button look right
@@ -109,7 +114,7 @@ $embed-padding: ((100 / 16) * 9);
 
   &:hover,
   &:focus {
-        background: $plyr-video-control-bg-hover;
+    opacity: 1;
   }
 }
 
@@ -125,34 +130,34 @@ $embed-padding: ((100 / 16) * 9);
 // Video range inputs
 .plyr--full-ui.plyr--video input[type='range'] {
   &::-webkit-slider-runnable-track {
-        background-color: $plyr-video-range-track-bg;
+    background-color: $plyr-video-range-track-background;
   }
 
   &::-moz-range-track {
-        background-color: $plyr-video-range-track-bg;
+    background-color: $plyr-video-range-track-background;
   }
 
   &::-ms-track {
-        background-color: $plyr-video-range-track-bg;
+    background-color: $plyr-video-range-track-background;
   }
 
   // Pressed styles
   &:active {
     &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
 
     &::-moz-range-thumb {
-            @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
 
     &::-ms-thumb {
-            @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
   }
 }
 
 // Progress
 .plyr--video .plyr__progress__buffer {
-    color: $plyr-video-progress-buffered-bg;
+  color: $plyr-video-progress-buffered-background;
 }

tasks/build.js

@@ -0,0 +1,222 @@
+/* eslint-disable import/no-extraneous-dependencies */
+// ==========================================================================
+// Gulp build script
+// ==========================================================================
+/* eslint no-console: "off" */
+
+const path = require('path');
+const gulp = require('gulp');
+// JavaScript
+const terser = require('gulp-terser');
+const rollup = require('gulp-better-rollup');
+const babel = require('rollup-plugin-babel');
+const commonjs = require('rollup-plugin-commonjs');
+const resolve = require('rollup-plugin-node-resolve');
+// CSS
+const sass = require('gulp-sass');
+const postcss = require('gulp-postcss');
+const autoprefixer = require('autoprefixer');
+const clean = require('postcss-clean');
+const customprops = require('postcss-custom-properties');
+// Images
+const svgstore = require('gulp-svgstore');
+const imagemin = require('gulp-imagemin');
+// Utils
+const del = require('del');
+const filter = require('gulp-filter');
+const header = require('gulp-header');
+const rename = require('gulp-rename');
+const plumber = require('gulp-plumber');
+const size = require('gulp-size');
+const sourcemaps = require('gulp-sourcemaps');
+const browserSync = require('browser-sync').create();
+// Configs
+const build = require('../build.json');
+// Info from package
+const minSuffix = '.min';
+// Paths
+const root = path.join(__dirname, '..');
+const paths = {
+  plyr: {
+    // Source paths
+    src: {
+      sass: path.join(root, 'src/sass/**/*.scss'),
+      js: path.join(root, 'src/js/**/*.js'),
+      sprite: path.join(root, 'src/sprite/*.svg'),
+    },
+
+    // Output paths
+    output: path.join(root, 'dist/'),
+  },
+  demo: {
+    // Source paths
+    src: {
+      sass: path.join(root, 'demo/src/sass/**/*.scss'),
+      js: path.join(root, 'demo/src/js/**/*.js'),
+    },
+
+    // Output paths
+    output: path.join(root, 'demo/dist/'),
+
+    // Demo
+    root: path.join(root, 'demo/'),
+  },
+};
+
+// Task lists
+const tasks = {
+  css: [],
+  js: [],
+  sprite: [],
+};
+
+// Size plugin
+const sizeOptions = { showFiles: true, gzip: true };
+
+// Clean out /dist
+gulp.task('clean', done => {
+  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')}`);
+
+  del(dirs);
+
+  done();
+});
+
+// JavaScript
+Object.entries(build.js).forEach(([filename, entry]) => {
+  const { dist, formats, namespace, polyfill, src } = entry;
+
+  formats.forEach(format => {
+    const name = `js:${filename}:${format}`;
+    const extension = format === 'es' ? 'mjs' : 'js';
+    tasks.js.push(name);
+
+    gulp.task(name, () =>
+      gulp
+        .src(src)
+        .pipe(plumber())
+        .pipe(sourcemaps.init())
+        .pipe(
+          rollup(
+            {
+              plugins: [
+                resolve(),
+                commonjs(),
+                babel({
+                  presets: [
+                    [
+                      '@babel/env',
+                      {
+                        // debug: true,
+                        useBuiltIns: polyfill ? 'usage' : false,
+                        corejs: polyfill ? 3 : undefined,
+                        bugfixes: true,
+                      },
+                    ],
+                  ],
+                  babelrc: false,
+                  exclude: [/\/core-js\//],
+                }),
+              ],
+            },
+            {
+              name: namespace,
+              format,
+            },
+          ),
+        )
+        .pipe(header('typeof navigator === "object" && ')) // "Support" SSR (#935)
+        .pipe(
+          rename({
+            extname: `.${extension}`,
+          }),
+        )
+        .pipe(gulp.dest(dist))
+        .pipe(filter(`**/*.${extension}`))
+        .pipe(terser())
+        .pipe(rename({ suffix: minSuffix }))
+        .pipe(size(sizeOptions))
+        .pipe(sourcemaps.write(''))
+        .pipe(gulp.dest(dist)),
+    );
+  });
+});
+
+// CSS
+Object.entries(build.css).forEach(([filename, entry]) => {
+  const { dist, src } = entry;
+  const name = `css:${filename}`;
+  tasks.css.push(name);
+
+  gulp.task(name, () =>
+    gulp
+      .src(src)
+      .pipe(plumber())
+      .pipe(sass())
+      .pipe(postcss([customprops(), autoprefixer(), clean()]))
+      .pipe(size(sizeOptions))
+      .pipe(gulp.dest(dist)),
+  );
+});
+
+// SVG Sprites
+Object.entries(build.sprite).forEach(([filename, entry]) => {
+  const { dist, src } = entry;
+  const name = `sprite:${filename}`;
+  tasks.sprite.push(name);
+
+  gulp.task(name, () =>
+    gulp
+      .src(src)
+      .pipe(plumber())
+      .pipe(
+        imagemin([
+          imagemin.svgo({
+            plugins: [{ removeViewBox: false }],
+          }),
+        ]),
+      )
+      .pipe(svgstore())
+      .pipe(rename({ basename: path.parse(filename).name }))
+      .pipe(size(sizeOptions))
+      .pipe(gulp.dest(dist)),
+  );
+});
+
+// Build all tasks
+gulp.task('js', gulp.parallel(...tasks.js));
+gulp.task('css', gulp.parallel(...tasks.css));
+gulp.task('sprites', gulp.parallel(...tasks.sprite));
+
+// Watch for file changes
+gulp.task('watch', () => {
+  // Plyr core
+  gulp.watch(paths.plyr.src.js, gulp.parallel('js'));
+  gulp.watch(paths.plyr.src.sass, gulp.parallel('css'));
+  gulp.watch(paths.plyr.src.sprite, gulp.parallel('sprites'));
+
+  // Demo
+  gulp.watch(paths.demo.src.js, gulp.parallel('js'));
+  gulp.watch(paths.demo.src.sass, gulp.parallel('css'));
+});
+
+// Serve via browser sync
+gulp.task('serve', () =>
+  browserSync.init({
+    server: {
+      baseDir: paths.demo.root,
+    },
+    notify: false,
+    watch: true,
+    ghostMode: false,
+  }),
+);
+
+// Build distribution
+gulp.task('build', gulp.series('clean', gulp.parallel('js', 'css', 'sprites')));
+
+// Default gulp task
+gulp.task('default', gulp.series('build', gulp.parallel('serve', 'watch')));

tasks/deploy.js

@@ -0,0 +1,273 @@
+/* eslint-disable import/no-extraneous-dependencies */
+// ==========================================================================
+// Publish a version to CDN and demo
+// ==========================================================================
+/* eslint no-console: "off" */
+
+const path = require('path');
+const gulp = require('gulp');
+// Utils
+const gitbranch = require('git-branch');
+const rename = require('gulp-rename');
+const replace = require('gulp-replace');
+const ansi = require('ansi-colors');
+const log = require('fancy-log');
+const open = require('gulp-open');
+const size = require('gulp-size');
+const through = require('through2');
+// Deployment
+const aws = require('aws-sdk');
+const publish = require('gulp-awspublish');
+const FastlyPurge = require('fastly-purge');
+// Configs
+const pkg = require('../package.json');
+const deploy = require('../deploy.json');
+// Info from package
+const { version } = pkg;
+const minSuffix = '.min';
+
+// Get AWS config
+Object.values(deploy).forEach(target => {
+  Object.assign(target, {
+    publisher: publish.create({
+      region: target.region,
+      params: {
+        Bucket: target.bucket,
+      },
+      credentials: new aws.SharedIniFileCredentials({ profile: 'plyr' }),
+    }),
+  });
+});
+
+// Paths
+const root = path.join(__dirname, '..');
+const paths = {
+  upload: [
+    path.join(root, `dist/*${minSuffix}.*`),
+    path.join(root, 'dist/*.css'),
+    path.join(root, 'dist/*.svg'),
+    path.join(root, `demo/dist/*${minSuffix}.*`),
+    path.join(root, 'demo/dist/*.css'),
+    path.join(root, 'demo/dist/*.svg'),
+  ],
+};
+
+// Get credentials
+let credentials = {};
+try {
+  credentials = require('../credentials.json'); //eslint-disable-line
+} catch (e) {
+  // Do nothing
+}
+
+// Get branch info
+const branch = {
+  current: gitbranch.sync(),
+  master: 'master',
+  beta: 'beta',
+};
+
+const maxAge = 31536000; // 1 year
+const options = {
+  cdn: {
+    headers: {
+      'Cache-Control': `max-age=${maxAge}, immutable`,
+    },
+  },
+  demo: {
+    uploadPath: branch.current === branch.beta ? '/beta' : null,
+    headers: {
+      'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
+    },
+  },
+  symlinks(ver, filename) {
+    return {
+      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',
+      },
+    };
+  },
+};
+
+// Size plugin
+const sizeOptions = { showFiles: true, gzip: true };
+
+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://${deploy.cdn.domain}/${version}`;
+const cdnpath = new RegExp(`${deploy.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.beta];
+
+  if (!allowed.includes(branch.current)) {
+    console.error(`Must be on ${allowed.join(', ')} to publish! (current: ${branch.current})`);
+
+    return false;
+  }
+
+  return true;
+};
+
+gulp.task('version', done => {
+  if (!canDeploy()) {
+    done();
+    return null;
+  }
+
+  const { domain } = deploy.cdn;
+
+  log(`Uploading ${ansi.green.bold(version)} to ${ansi.cyan(domain)}...`);
+
+  // Replace versioned URLs in source
+  const files = ['plyr.js', 'plyr.polyfilled.js', 'config/defaults.js'];
+
+  return gulp
+    .src(
+      files.map(file => path.join(__dirname, `src/js/${file}`)),
+      { base: '.' },
+    )
+    .pipe(replace(semver, `v${version}`))
+    .pipe(replace(cdnpath, `${domain}/${version}/`))
+    .pipe(gulp.dest('./'));
+});
+
+// Publish version to CDN bucket
+gulp.task('cdn', done => {
+  if (!canDeploy()) {
+    done();
+    return null;
+  }
+
+  const { domain, publisher } = deploy.cdn;
+
+  if (!publisher) {
+    throw new Error('No publisher instance. Check AWS configuration.');
+  }
+
+  log(`Uploading ${ansi.green.bold(pkg.version)} to ${ansi.cyan(domain)}...`);
+
+  // Upload to CDN
+  return (
+    gulp
+      .src(paths.upload)
+      .pipe(renameFile)
+      // Remove min suffix from source map URL
+      .pipe(
+        replace(
+          /sourceMappingURL=([\w-?.]+)/,
+          (match, filename) => `sourceMappingURL=${filename.replace(minSuffix, '')}`,
+        ),
+      )
+      .pipe(size(sizeOptions))
+      .pipe(replace(localPath, versionPath))
+      .pipe(publisher.publish(options.cdn.headers))
+      .pipe(publish.reporter())
+  );
+});
+
+// Purge the fastly cache incase any 403/404 are cached
+gulp.task('purge', () => {
+  if (!Object.keys(credentials).includes('fastly')) {
+    throw new Error('Fastly credentials required to purge cache.');
+  }
+
+  const { fastly } = credentials;
+  const list = [];
+
+  return gulp
+    .src(paths.upload)
+    .pipe(
+      through.obj((file, enc, cb) => {
+        const filename = file.path.split('/').pop();
+        list.push(`${versionPath}/${filename.replace(minSuffix, '')}`);
+        cb(null);
+      }),
+    )
+    .on('end', () => {
+      const purge = new FastlyPurge(fastly.token);
+
+      list.forEach(url => {
+        log(`Purging ${ansi.cyan(url)}...`);
+
+        purge.url(url, (error, result) => {
+          if (error) {
+            log.error(error);
+          } else if (result) {
+            log(result);
+          }
+        });
+      });
+    });
+});
+
+// Publish to demo bucket
+gulp.task('demo', done => {
+  if (!canDeploy()) {
+    done();
+    return null;
+  }
+
+  const { publisher } = deploy.demo;
+  const { domain } = deploy.cdn;
+
+  if (!publisher) {
+    throw new Error('No publisher instance. Check AWS configuration.');
+  }
+
+  log(`Uploading ${ansi.green.bold(pkg.version)} to ${ansi.cyan(domain)}...`);
+
+  // Replace versioned files in README.md
+  gulp
+    .src([`${__dirname}/README.md`])
+    .pipe(replace(cdnpath, `${domain}/${version}/`))
+    .pipe(gulp.dest(__dirname));
+
+  // Replace local file paths with remote paths in demo HTML
+  // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
+  const index = `${paths.demo.root}index.html`;
+  const error = `${paths.demo.root}error.html`;
+  const pages = [index];
+
+  if (branch.current === branch.master) {
+    pages.push(error);
+  }
+
+  return gulp
+    .src(pages)
+    .pipe(replace(localPath, versionPath))
+    .pipe(
+      rename(p => {
+        if (options.demo.uploadPath) {
+          // eslint-disable-next-line no-param-reassign
+          p.dirname += options.demo.uploadPath;
+        }
+      }),
+    )
+    .pipe(publisher.publish(options.demo.headers))
+    .pipe(publish.reporter());
+});
+
+// Open the demo site to check it's ok
+gulp.task('open', () => {
+  const { domain } = deploy.demo;
+
+  return gulp.src(__filename).pipe(
+    open({
+      uri: `https://${domain}/${branch.current === branch.beta ? 'beta' : ''}`,
+    }),
+  );
+});
+
+// Do everything
+gulp.task('deploy', gulp.series('cdn', 'demo', 'purge', 'open'));