v3.5.10

Merge pull request #1692 from sampotts/develop
v3.5.10
2020-02-14 17:37:32 +00:00 · 2020-02-14 17:33:41 +00:00 · 2020-02-14 17:33:09 +00:00 · 2020-02-14 17:00:33 +00:00 · 2020-02-14 16:55:56 +00:00 · 2020-02-14 16:54:22 +00:00
52 changed files with 1923 additions and 1308 deletions
@@ -2,3 +2,4 @@

 github: sampotts
 patreon: plyr
+open_collective: plyr
@@ -0,0 +1 @@
+v13.8.0
@@ -1,3 +1,22 @@
+### v3.5.10
+
+-   iOS volume display fix
+
+### v3.5.9
+
+-   Fix for regression with volume control width
+-   Ensure poster image is not downloaded again for HTML5 videos
+
+### v3.5.8
+
+-   Added `flex-direction` property to fix some issues introduced in v3.5.7 when using custom CSS
+-   Cleaned up the organisation of some of the SCSS files (should not effect CSS output)
+-   Added `referrerPolicy` option for Vimeo to prevent an issue present in the demo site
+-   Remove all Vimeo controls for Pro & Premium accounts
+-   Improve thumbnail size calculations when size is set per css (thanks @ydylla)
+-   Add previewThumbnails source setter (thanks @ydylla)
+-   More speed setting logic improvements
+
 ### v3.5.7

 -   Typescript typings (thanks @ondratra)
@@ -192,7 +211,9 @@ Thanks @friday for the following:
 -   Suggestion: Remove array newline rule
 -   Contributions improvements

-   fix: html5.cancelRequest not remove source tag correctly (thanks @a60814billy)
+and other folks for:
+
+-   Fix: html5.cancelRequest not remove source tag correctly (thanks @a60814billy)
 -   remove event listeners in destroy() (thanks @cky917)
 -   Fix markdown in README (thanks @azu)
 -   Some parts of the accessibility improvements outlined in #905 (more on the way...)
@@ -233,7 +233,8 @@
                    </li>
                    <li class="plyr__cite plyr__cite--vimeo" hidden>
                        <small>
-                            <a href="https://vimeo.com/76979871" target="_blank">The New Vimeo Player</a> on&nbsp;
+                            <a href="https://vimeo.com/40648169" target="_blank">Toob “Wavaphon” Music Video</a>
+                            on&nbsp;
                            <span class="color--vimeo">
                                <svg class="icon" role="presentation">
                                    <title>Vimeo</title>
@@ -5,10 +5,10 @@
    "homepage": "https://plyr.io",
    "author": "Sam Potts <sam@potts.es>",
    "dependencies": {
-        "core-js": "^3.1.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.5"
+        "url-polyfill": "^1.1.8"
    }
 }
@@ -50,9 +50,6 @@ import toggleClass from './toggle-class';
                captions: {
                    active: true,
                },
-                keys: {
-                    google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
-                },
                ads: {
                    enabled: env.prod || env.dev,
                    publisherId: '918848828995742',
@@ -64,6 +61,10 @@ import toggleClass from './toggle-class';
                        'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
                    ],
                },
+                vimeo: {
+                    // Prevent Vimeo blocking plyr.io demo site
+                    referrerPolicy: 'no-referrer',
+                },
            });

            // Expose for tinkering in the console
@@ -68,7 +68,7 @@ const sources = {
        type: 'video',
        sources: [
            {
-                src: 'https://vimeo.com/383514704',
+                src: 'https://vimeo.com/40648169',
                provider: 'vimeo',
            },
        ],
@@ -1259,12 +1259,14 @@ typeof navigator === "object" && (function (global, factory) {
        return Number(source.getAttribute('size'));
      }).filter(Boolean);
    },
-    extend: function extend() {
+    setup: function setup() {
      if (!this.isHTML5) {
        return;
      }

-      var player = this; // Set aspect ratio if fixed
+      var player = this; // Set speed options from config
+
+      player.options.speed = player.config.speed.options; // Set aspect ratio if fixed

      if (!is$1.empty(this.config.ratio)) {
        setAspectRatio.call(player);
@@ -1376,13 +1378,6 @@ typeof navigator === "object" && (function (global, factory) {
      return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;
    });
  }
-  function fillRange(start, end) {
-    var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-    var len = Math.floor((end - start) / step) + 1;
-    return Array(len).fill().map(function (_, idx) {
-      return start + idx * step;
-    });
-  }

  // ==========================================================================

@@ -2617,17 +2612,11 @@ typeof navigator === "object" && (function (global, factory) {
      }

      var type = 'speed';
-      var list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Determine options to display
-      // Vimeo and YouTube limit to 0.5x-2x
-
-      if (this.isVimeo || this.isYouTube) {
-        this.options.speed = fillRange(0.5, 2, 0.25).filter(function (s) {
-          return _this8.config.speed.options.includes(s);
-        });
-      } else {
-        this.options.speed = this.config.speed.options;
-      } // Toggle the pane and tab
+      var list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Filter out invalid speeds

+      this.options.speed = this.options.speed.filter(function (o) {
+        return o >= _this8.minimumSpeed && o <= _this8.maximumSpeed;
+      }); // Toggle the pane and tab

      var toggle = !is$1.empty(this.options.speed) && this.options.speed.length > 1;
      controls.toggleMenuButton.call(this, type, toggle); // Empty the menu
@@ -3671,7 +3660,7 @@ typeof navigator === "object" && (function (global, factory) {
    // Sprite (for icons)
    loadSprite: true,
    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.5.7/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.5.10/plyr.svg',
    // Blank video (used to prevent errors on source change)
    blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
    // Quality default
@@ -3955,7 +3944,13 @@ typeof navigator === "object" && (function (global, factory) {
      portrait: false,
      title: false,
      speed: true,
-      transparent: false
+      transparent: false,
+      // These settings require a pro or premium account to work
+      sidedock: false,
+      controls: false,
+      // Custom settings from Plyr
+      referrerPolicy: null // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
+
    },
    // YouTube plugin
    youtube: {
@@ -4496,7 +4491,12 @@ typeof navigator === "object" && (function (global, factory) {
      } // Set property synchronously to respect the call order


-      this.media.setAttribute('poster', poster); // Wait until ui is ready
+      this.media.setAttribute('poster', poster); // HTML5 uses native poster attribute
+
+      if (this.isHTML5) {
+        return Promise.resolve(poster);
+      } // Wait until ui is ready
+

      return ready.call(this) // Load image
      .then(function () {
@@ -5674,26 +5674,27 @@ typeof navigator === "object" && (function (global, factory) {

  var vimeo = {
    setup: function setup() {
-      var _this = this;
+      var player = this; // Add embed class for responsive

-      // Add embed class for responsive
-      toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set intial ratio
+      toggleClass(player.elements.wrapper, player.config.classNames.embed, true); // Set speed options from config

-      setAspectRatio.call(this); // Load the SDK if not already
+      player.options.speed = player.config.speed.options; // Set intial ratio
+
+      setAspectRatio.call(player); // Load the SDK if not already

      if (!is$1.object(window.Vimeo)) {
-        loadScript(this.config.urls.vimeo.sdk).then(function () {
-          vimeo.ready.call(_this);
+        loadScript(player.config.urls.vimeo.sdk).then(function () {
+          vimeo.ready.call(player);
        }).catch(function (error) {
-          _this.debug.warn('Vimeo SDK (player.js) failed to load', error);
+          player.debug.warn('Vimeo SDK (player.js) failed to load', error);
        });
      } else {
-        vimeo.ready.call(this);
+        vimeo.ready.call(player);
      }
    },
    // API Ready
    ready: function ready() {
-      var _this2 = this;
+      var _this = this;

      var player = this;
      var config = player.config.vimeo; // Get Vimeo params for the iframe
@@ -5719,7 +5720,12 @@ typeof navigator === "object" && (function (global, factory) {
      iframe.setAttribute('src', src);
      iframe.setAttribute('allowfullscreen', '');
      iframe.setAttribute('allowtransparency', '');
-      iframe.setAttribute('allow', 'autoplay'); // Get poster, if already set
+      iframe.setAttribute('allow', 'autoplay'); // Set the referrer policy if required
+
+      if (!is$1.empty(config.referrerPolicy)) {
+        iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+      } // Get poster, if already set
+

      var poster = player.poster; // Inject the package

@@ -5861,7 +5867,7 @@ typeof navigator === "object" && (function (global, factory) {
        currentSrc = value;
        controls.setDownloadUrl.call(player);
      }).catch(function (error) {
-        _this2.debug.warn(error);
+        _this.debug.warn(error);
      });
      Object.defineProperty(player.media, 'currentSrc', {
        get: function get() {
@@ -5881,7 +5887,7 @@ typeof navigator === "object" && (function (global, factory) {
            height = _dimensions[1];

        player.embed.ratio = [width, height];
-        setAspectRatio.call(_this2);
+        setAspectRatio.call(_this);
      }); // Set autopause

      player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -5890,7 +5896,7 @@ typeof navigator === "object" && (function (global, factory) {

      player.embed.getVideoTitle().then(function (title) {
        player.config.title = title;
-        ui.setTitle.call(_this2);
+        ui.setTitle.call(_this);
      }); // Get current time

      player.embed.getCurrentTime().then(function (value) {
@@ -6265,7 +6271,11 @@ typeof navigator === "object" && (function (global, factory) {
              }
            }); // Get available speeds

-            player.options.speed = instance.getAvailablePlaybackRates(); // Set the tabindex to avoid focus entering iframe
+            var speeds = instance.getAvailablePlaybackRates(); // Filter based on config
+
+            player.options.speed = speeds.filter(function (s) {
+              return player.config.speed.options.includes(s);
+            }); // Set the tabindex to avoid focus entering iframe

            if (player.supported.ui) {
              player.media.setAttribute('tabindex', -1);
@@ -6424,7 +6434,7 @@ typeof navigator === "object" && (function (global, factory) {
      }

      if (this.isHTML5) {
-        html5.extend.call(this);
+        html5.setup.call(this);
      } else if (this.isYouTube) {
        youtube.setup.call(this);
      } else if (this.isVimeo) {
@@ -7170,7 +7180,7 @@ typeof navigator === "object" && (function (global, factory) {
      value: function load() {
        var _this = this;

-        // Togglethe regular seek tooltip
+        // Toggle the regular seek tooltip
        if (this.player.elements.display.seekTooltip) {
          this.player.elements.display.seekTooltip.hidden = this.enabled;
        }
@@ -7397,6 +7407,17 @@ typeof navigator === "object" && (function (global, factory) {
        });
        this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
      }
+    }, {
+      key: "destroy",
+      value: function destroy() {
+        if (this.elements.thumb.container) {
+          this.elements.thumb.container.remove();
+        }
+
+        if (this.elements.scrubbing.container) {
+          this.elements.scrubbing.container.remove();
+        }
+      }
    }, {
      key: "showImageAtCurrentTime",
      value: function showImageAtCurrentTime() {
@@ -7642,7 +7663,7 @@ typeof navigator === "object" && (function (global, factory) {
    }, {
      key: "determineContainerAutoSizing",
      value: function determineContainerAutoSizing() {
-        if (this.elements.thumb.imageContainer.clientHeight > 20) {
+        if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
          // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
          this.sizeSpecifiedInCSS = true;
        }
@@ -7655,6 +7676,13 @@ typeof navigator === "object" && (function (global, factory) {
          var thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
          this.elements.thumb.imageContainer.style.height = "".concat(this.thumbContainerHeight, "px");
          this.elements.thumb.imageContainer.style.width = "".concat(thumbWidth, "px");
+        } else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
+          var _thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
+
+          this.elements.thumb.imageContainer.style.width = "".concat(_thumbWidth, "px");
+        } else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
+          var thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
+          this.elements.thumb.imageContainer.style.height = "".concat(thumbHeight, "px");
        }

        this.setThumbContainerPos();
@@ -7753,6 +7781,11 @@ typeof navigator === "object" && (function (global, factory) {
              height = _fitRatio2.height;

          return height;
+        } // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)
+
+
+        if (this.sizeSpecifiedInCSS) {
+          return this.elements.thumb.imageContainer.clientHeight;
        }

        return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@@ -7902,11 +7935,22 @@ typeof navigator === "object" && (function (global, factory) {

        if (_this2.isHTML5) {
          _this2.media.load();
-        } // Reload thumbnails
+        } // Update previewThumbnails config & reload plugin


-        if (_this2.previewThumbnails) {
-          _this2.previewThumbnails.load();
+        if (!is$1.empty(input.previewThumbnails)) {
+          Object.assign(_this2.config.previewThumbnails, input.previewThumbnails); // Cleanup previewThumbnails plugin if it was loaded
+
+          if (_this2.previewThumbnails && _this2.previewThumbnails.loaded) {
+            _this2.previewThumbnails.destroy();
+
+            _this2.previewThumbnails = null;
+          } // Create new instance if it is still enabled
+
+
+          if (_this2.config.previewThumbnails.enabled) {
+            _this2.previewThumbnails = new PreviewThumbnails(_this2);
+          }
        } // Update the fullscreen support


@@ -1253,12 +1253,14 @@ var html5 = {
      return Number(source.getAttribute('size'));
    }).filter(Boolean);
  },
-  extend: function extend() {
+  setup: function setup() {
    if (!this.isHTML5) {
      return;
    }

-    var player = this; // Set aspect ratio if fixed
+    var player = this; // Set speed options from config
+
+    player.options.speed = player.config.speed.options; // Set aspect ratio if fixed

    if (!is$1.empty(this.config.ratio)) {
      setAspectRatio.call(player);
@@ -1370,13 +1372,6 @@ function closest(array, value) {
    return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;
  });
 }
-function fillRange(start, end) {
-  var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  var len = Math.floor((end - start) / step) + 1;
-  return Array(len).fill().map(function (_, idx) {
-    return start + idx * step;
-  });
-}

 // ==========================================================================

@@ -2611,17 +2606,11 @@ var controls = {
    }

    var type = 'speed';
-    var list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Determine options to display
-    // Vimeo and YouTube limit to 0.5x-2x
-
-    if (this.isVimeo || this.isYouTube) {
-      this.options.speed = fillRange(0.5, 2, 0.25).filter(function (s) {
-        return _this8.config.speed.options.includes(s);
-      });
-    } else {
-      this.options.speed = this.config.speed.options;
-    } // Toggle the pane and tab
+    var list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Filter out invalid speeds

+    this.options.speed = this.options.speed.filter(function (o) {
+      return o >= _this8.minimumSpeed && o <= _this8.maximumSpeed;
+    }); // Toggle the pane and tab

    var toggle = !is$1.empty(this.options.speed) && this.options.speed.length > 1;
    controls.toggleMenuButton.call(this, type, toggle); // Empty the menu
@@ -3665,7 +3654,7 @@ var defaults$1 = {
  // Sprite (for icons)
  loadSprite: true,
  iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.5.7/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.5.10/plyr.svg',
  // Blank video (used to prevent errors on source change)
  blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
  // Quality default
@@ -3949,7 +3938,13 @@ var defaults$1 = {
    portrait: false,
    title: false,
    speed: true,
-    transparent: false
+    transparent: false,
+    // These settings require a pro or premium account to work
+    sidedock: false,
+    controls: false,
+    // Custom settings from Plyr
+    referrerPolicy: null // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
+
  },
  // YouTube plugin
  youtube: {
@@ -4490,7 +4485,12 @@ var ui = {
    } // Set property synchronously to respect the call order


-    this.media.setAttribute('poster', poster); // Wait until ui is ready
+    this.media.setAttribute('poster', poster); // HTML5 uses native poster attribute
+
+    if (this.isHTML5) {
+      return Promise.resolve(poster);
+    } // Wait until ui is ready
+

    return ready.call(this) // Load image
    .then(function () {
@@ -5668,26 +5668,27 @@ function assurePlaybackState(play) {

 var vimeo = {
  setup: function setup() {
-    var _this = this;
+    var player = this; // Add embed class for responsive

-    // Add embed class for responsive
-    toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set intial ratio
+    toggleClass(player.elements.wrapper, player.config.classNames.embed, true); // Set speed options from config

-    setAspectRatio.call(this); // Load the SDK if not already
+    player.options.speed = player.config.speed.options; // Set intial ratio
+
+    setAspectRatio.call(player); // Load the SDK if not already

    if (!is$1.object(window.Vimeo)) {
-      loadScript(this.config.urls.vimeo.sdk).then(function () {
-        vimeo.ready.call(_this);
+      loadScript(player.config.urls.vimeo.sdk).then(function () {
+        vimeo.ready.call(player);
      }).catch(function (error) {
-        _this.debug.warn('Vimeo SDK (player.js) failed to load', error);
+        player.debug.warn('Vimeo SDK (player.js) failed to load', error);
      });
    } else {
-      vimeo.ready.call(this);
+      vimeo.ready.call(player);
    }
  },
  // API Ready
  ready: function ready() {
-    var _this2 = this;
+    var _this = this;

    var player = this;
    var config = player.config.vimeo; // Get Vimeo params for the iframe
@@ -5713,7 +5714,12 @@ var vimeo = {
    iframe.setAttribute('src', src);
    iframe.setAttribute('allowfullscreen', '');
    iframe.setAttribute('allowtransparency', '');
-    iframe.setAttribute('allow', 'autoplay'); // Get poster, if already set
+    iframe.setAttribute('allow', 'autoplay'); // Set the referrer policy if required
+
+    if (!is$1.empty(config.referrerPolicy)) {
+      iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+    } // Get poster, if already set
+

    var poster = player.poster; // Inject the package

@@ -5855,7 +5861,7 @@ var vimeo = {
      currentSrc = value;
      controls.setDownloadUrl.call(player);
    }).catch(function (error) {
-      _this2.debug.warn(error);
+      _this.debug.warn(error);
    });
    Object.defineProperty(player.media, 'currentSrc', {
      get: function get() {
@@ -5875,7 +5881,7 @@ var vimeo = {
          height = _dimensions[1];

      player.embed.ratio = [width, height];
-      setAspectRatio.call(_this2);
+      setAspectRatio.call(_this);
    }); // Set autopause

    player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -5884,7 +5890,7 @@ var vimeo = {

    player.embed.getVideoTitle().then(function (title) {
      player.config.title = title;
-      ui.setTitle.call(_this2);
+      ui.setTitle.call(_this);
    }); // Get current time

    player.embed.getCurrentTime().then(function (value) {
@@ -6259,7 +6265,11 @@ var youtube = {
            }
          }); // Get available speeds

-          player.options.speed = instance.getAvailablePlaybackRates(); // Set the tabindex to avoid focus entering iframe
+          var speeds = instance.getAvailablePlaybackRates(); // Filter based on config
+
+          player.options.speed = speeds.filter(function (s) {
+            return player.config.speed.options.includes(s);
+          }); // Set the tabindex to avoid focus entering iframe

          if (player.supported.ui) {
            player.media.setAttribute('tabindex', -1);
@@ -6418,7 +6428,7 @@ var media = {
    }

    if (this.isHTML5) {
-      html5.extend.call(this);
+      html5.setup.call(this);
    } else if (this.isYouTube) {
      youtube.setup.call(this);
    } else if (this.isVimeo) {
@@ -7164,7 +7174,7 @@ function () {
    value: function load() {
      var _this = this;

-      // Togglethe regular seek tooltip
+      // Toggle the regular seek tooltip
      if (this.player.elements.display.seekTooltip) {
        this.player.elements.display.seekTooltip.hidden = this.enabled;
      }
@@ -7391,6 +7401,17 @@ function () {
      });
      this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.elements.thumb.container) {
+        this.elements.thumb.container.remove();
+      }
+
+      if (this.elements.scrubbing.container) {
+        this.elements.scrubbing.container.remove();
+      }
+    }
  }, {
    key: "showImageAtCurrentTime",
    value: function showImageAtCurrentTime() {
@@ -7636,7 +7657,7 @@ function () {
  }, {
    key: "determineContainerAutoSizing",
    value: function determineContainerAutoSizing() {
-      if (this.elements.thumb.imageContainer.clientHeight > 20) {
+      if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
        // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
        this.sizeSpecifiedInCSS = true;
      }
@@ -7649,6 +7670,13 @@ function () {
        var thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
        this.elements.thumb.imageContainer.style.height = "".concat(this.thumbContainerHeight, "px");
        this.elements.thumb.imageContainer.style.width = "".concat(thumbWidth, "px");
+      } else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
+        var _thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
+
+        this.elements.thumb.imageContainer.style.width = "".concat(_thumbWidth, "px");
+      } else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
+        var thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
+        this.elements.thumb.imageContainer.style.height = "".concat(thumbHeight, "px");
      }

      this.setThumbContainerPos();
@@ -7747,6 +7775,11 @@ function () {
            height = _fitRatio2.height;

        return height;
+      } // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)
+
+
+      if (this.sizeSpecifiedInCSS) {
+        return this.elements.thumb.imageContainer.clientHeight;
      }

      return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@@ -7896,11 +7929,22 @@ var source = {

      if (_this2.isHTML5) {
        _this2.media.load();
-      } // Reload thumbnails
+      } // Update previewThumbnails config & reload plugin


-      if (_this2.previewThumbnails) {
-        _this2.previewThumbnails.load();
+      if (!is$1.empty(input.previewThumbnails)) {
+        Object.assign(_this2.config.previewThumbnails, input.previewThumbnails); // Cleanup previewThumbnails plugin if it was loaded
+
+        if (_this2.previewThumbnails && _this2.previewThumbnails.loaded) {
+          _this2.previewThumbnails.destroy();
+
+          _this2.previewThumbnails = null;
+        } // Create new instance if it is still enabled
+
+
+        if (_this2.config.previewThumbnails.enabled) {
+          _this2.previewThumbnails = new PreviewThumbnails(_this2);
+        }
      } // Update the fullscreen support


@@ -7456,12 +7456,14 @@ typeof navigator === "object" && (function (global, factory) {
        return Number(source.getAttribute('size'));
      }).filter(Boolean);
    },
-    extend: function extend() {
+    setup: function setup() {
      if (!this.isHTML5) {
        return;
      }

-      var player = this; // Set aspect ratio if fixed
+      var player = this; // Set speed options from config
+
+      player.options.speed = player.config.speed.options; // Set aspect ratio if fixed

      if (!is$1.empty(this.config.ratio)) {
        setAspectRatio.call(player);
@@ -7552,28 +7554,6 @@ typeof navigator === "object" && (function (global, factory) {
    }
  };

-  // `Array.prototype.fill` method implementation
-  // https://tc39.github.io/ecma262/#sec-array.prototype.fill
-  var arrayFill = function fill(value /* , start = 0, end = @length */) {
-    var O = toObject(this);
-    var length = toLength(O.length);
-    var argumentsLength = arguments.length;
-    var index = toAbsoluteIndex(argumentsLength > 1 ? arguments[1] : undefined, length);
-    var end = argumentsLength > 2 ? arguments[2] : undefined;
-    var endPos = end === undefined ? length : toAbsoluteIndex(end, length);
-    while (endPos > index) O[index++] = value;
-    return O;
-  };
-
-  // `Array.prototype.fill` method
-  // https://tc39.github.io/ecma262/#sec-array.prototype.fill
-  _export({ target: 'Array', proto: true }, {
-    fill: arrayFill
-  });
-
-  // https://tc39.github.io/ecma262/#sec-array.prototype-@@unscopables
-  addToUnscopables('fill');
-
  function dedupe(array) {
    if (!is$1.array(array)) {
      return array;
@@ -7593,13 +7573,6 @@ typeof navigator === "object" && (function (global, factory) {
      return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;
    });
  }
-  function fillRange(start, end) {
-    var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-    var len = Math.floor((end - start) / step) + 1;
-    return Array(len).fill().map(function (_, idx) {
-      return start + idx * step;
-    });
-  }

  var defineProperty$6 = objectDefineProperty.f;
  var getOwnPropertyNames$1 = objectGetOwnPropertyNames.f;
@@ -8922,17 +8895,11 @@ typeof navigator === "object" && (function (global, factory) {
      }

      var type = 'speed';
-      var list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Determine options to display
-      // Vimeo and YouTube limit to 0.5x-2x
-
-      if (this.isVimeo || this.isYouTube) {
-        this.options.speed = fillRange(0.5, 2, 0.25).filter(function (s) {
-          return _this8.config.speed.options.includes(s);
-        });
-      } else {
-        this.options.speed = this.config.speed.options;
-      } // Toggle the pane and tab
+      var list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Filter out invalid speeds

+      this.options.speed = this.options.speed.filter(function (o) {
+        return o >= _this8.minimumSpeed && o <= _this8.maximumSpeed;
+      }); // Toggle the pane and tab

      var toggle = !is$1.empty(this.options.speed) && this.options.speed.length > 1;
      controls.toggleMenuButton.call(this, type, toggle); // Empty the menu
@@ -9976,7 +9943,7 @@ typeof navigator === "object" && (function (global, factory) {
    // Sprite (for icons)
    loadSprite: true,
    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.5.7/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.5.10/plyr.svg',
    // Blank video (used to prevent errors on source change)
    blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
    // Quality default
@@ -10260,7 +10227,13 @@ typeof navigator === "object" && (function (global, factory) {
      portrait: false,
      title: false,
      speed: true,
-      transparent: false
+      transparent: false,
+      // These settings require a pro or premium account to work
+      sidedock: false,
+      controls: false,
+      // Custom settings from Plyr
+      referrerPolicy: null // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
+
    },
    // YouTube plugin
    youtube: {
@@ -10813,7 +10786,12 @@ typeof navigator === "object" && (function (global, factory) {
      } // Set property synchronously to respect the call order


-      this.media.setAttribute('poster', poster); // Wait until ui is ready
+      this.media.setAttribute('poster', poster); // HTML5 uses native poster attribute
+
+      if (this.isHTML5) {
+        return Promise.resolve(poster);
+      } // Wait until ui is ready
+

      return ready.call(this) // Load image
      .then(function () {
@@ -12044,26 +12022,27 @@ typeof navigator === "object" && (function (global, factory) {

  var vimeo = {
    setup: function setup() {
-      var _this = this;
+      var player = this; // Add embed class for responsive

-      // Add embed class for responsive
-      toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set intial ratio
+      toggleClass(player.elements.wrapper, player.config.classNames.embed, true); // Set speed options from config

-      setAspectRatio.call(this); // Load the SDK if not already
+      player.options.speed = player.config.speed.options; // Set intial ratio
+
+      setAspectRatio.call(player); // Load the SDK if not already

      if (!is$1.object(window.Vimeo)) {
-        loadScript(this.config.urls.vimeo.sdk).then(function () {
-          vimeo.ready.call(_this);
+        loadScript(player.config.urls.vimeo.sdk).then(function () {
+          vimeo.ready.call(player);
        }).catch(function (error) {
-          _this.debug.warn('Vimeo SDK (player.js) failed to load', error);
+          player.debug.warn('Vimeo SDK (player.js) failed to load', error);
        });
      } else {
-        vimeo.ready.call(this);
+        vimeo.ready.call(player);
      }
    },
    // API Ready
    ready: function ready() {
-      var _this2 = this;
+      var _this = this;

      var player = this;
      var config = player.config.vimeo; // Get Vimeo params for the iframe
@@ -12089,7 +12068,12 @@ typeof navigator === "object" && (function (global, factory) {
      iframe.setAttribute('src', src);
      iframe.setAttribute('allowfullscreen', '');
      iframe.setAttribute('allowtransparency', '');
-      iframe.setAttribute('allow', 'autoplay'); // Get poster, if already set
+      iframe.setAttribute('allow', 'autoplay'); // Set the referrer policy if required
+
+      if (!is$1.empty(config.referrerPolicy)) {
+        iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+      } // Get poster, if already set
+

      var poster = player.poster; // Inject the package

@@ -12231,7 +12215,7 @@ typeof navigator === "object" && (function (global, factory) {
        currentSrc = value;
        controls.setDownloadUrl.call(player);
      }).catch(function (error) {
-        _this2.debug.warn(error);
+        _this.debug.warn(error);
      });
      Object.defineProperty(player.media, 'currentSrc', {
        get: function get() {
@@ -12251,7 +12235,7 @@ typeof navigator === "object" && (function (global, factory) {
            height = _dimensions[1];

        player.embed.ratio = [width, height];
-        setAspectRatio.call(_this2);
+        setAspectRatio.call(_this);
      }); // Set autopause

      player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -12260,7 +12244,7 @@ typeof navigator === "object" && (function (global, factory) {

      player.embed.getVideoTitle().then(function (title) {
        player.config.title = title;
-        ui.setTitle.call(_this2);
+        ui.setTitle.call(_this);
      }); // Get current time

      player.embed.getCurrentTime().then(function (value) {
@@ -12633,7 +12617,11 @@ typeof navigator === "object" && (function (global, factory) {
              }
            }); // Get available speeds

-            player.options.speed = instance.getAvailablePlaybackRates(); // Set the tabindex to avoid focus entering iframe
+            var speeds = instance.getAvailablePlaybackRates(); // Filter based on config
+
+            player.options.speed = speeds.filter(function (s) {
+              return player.config.speed.options.includes(s);
+            }); // Set the tabindex to avoid focus entering iframe

            if (player.supported.ui) {
              player.media.setAttribute('tabindex', -1);
@@ -12791,7 +12779,7 @@ typeof navigator === "object" && (function (global, factory) {
      }

      if (this.isHTML5) {
-        html5.extend.call(this);
+        html5.setup.call(this);
      } else if (this.isYouTube) {
        youtube.setup.call(this);
      } else if (this.isVimeo) {
@@ -13588,7 +13576,7 @@ typeof navigator === "object" && (function (global, factory) {
      value: function load() {
        var _this = this;

-        // Togglethe regular seek tooltip
+        // Toggle the regular seek tooltip
        if (this.player.elements.display.seekTooltip) {
          this.player.elements.display.seekTooltip.hidden = this.enabled;
        }
@@ -13815,6 +13803,17 @@ typeof navigator === "object" && (function (global, factory) {
        });
        this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
      }
+    }, {
+      key: "destroy",
+      value: function destroy() {
+        if (this.elements.thumb.container) {
+          this.elements.thumb.container.remove();
+        }
+
+        if (this.elements.scrubbing.container) {
+          this.elements.scrubbing.container.remove();
+        }
+      }
    }, {
      key: "showImageAtCurrentTime",
      value: function showImageAtCurrentTime() {
@@ -14060,7 +14059,7 @@ typeof navigator === "object" && (function (global, factory) {
    }, {
      key: "determineContainerAutoSizing",
      value: function determineContainerAutoSizing() {
-        if (this.elements.thumb.imageContainer.clientHeight > 20) {
+        if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
          // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
          this.sizeSpecifiedInCSS = true;
        }
@@ -14073,6 +14072,13 @@ typeof navigator === "object" && (function (global, factory) {
          var thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
          this.elements.thumb.imageContainer.style.height = "".concat(this.thumbContainerHeight, "px");
          this.elements.thumb.imageContainer.style.width = "".concat(thumbWidth, "px");
+        } else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
+          var _thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
+
+          this.elements.thumb.imageContainer.style.width = "".concat(_thumbWidth, "px");
+        } else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
+          var thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
+          this.elements.thumb.imageContainer.style.height = "".concat(thumbHeight, "px");
        }

        this.setThumbContainerPos();
@@ -14171,6 +14177,11 @@ typeof navigator === "object" && (function (global, factory) {
              height = _fitRatio2.height;

          return height;
+        } // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)
+
+
+        if (this.sizeSpecifiedInCSS) {
+          return this.elements.thumb.imageContainer.clientHeight;
        }

        return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@@ -14320,11 +14331,22 @@ typeof navigator === "object" && (function (global, factory) {

        if (_this2.isHTML5) {
          _this2.media.load();
-        } // Reload thumbnails
+        } // Update previewThumbnails config & reload plugin


-        if (_this2.previewThumbnails) {
-          _this2.previewThumbnails.load();
+        if (!is$1.empty(input.previewThumbnails)) {
+          Object.assign(_this2.config.previewThumbnails, input.previewThumbnails); // Cleanup previewThumbnails plugin if it was loaded
+
+          if (_this2.previewThumbnails && _this2.previewThumbnails.loaded) {
+            _this2.previewThumbnails.destroy();
+
+            _this2.previewThumbnails = null;
+          } // Create new instance if it is still enabled
+
+
+          if (_this2.config.previewThumbnails.enabled) {
+            _this2.previewThumbnails = new PreviewThumbnails(_this2);
+          }
        } // Update the fullscreen support


@@ -7450,12 +7450,14 @@ var html5 = {
      return Number(source.getAttribute('size'));
    }).filter(Boolean);
  },
-  extend: function extend() {
+  setup: function setup() {
    if (!this.isHTML5) {
      return;
    }

-    var player = this; // Set aspect ratio if fixed
+    var player = this; // Set speed options from config
+
+    player.options.speed = player.config.speed.options; // Set aspect ratio if fixed

    if (!is$1.empty(this.config.ratio)) {
      setAspectRatio.call(player);
@@ -7546,28 +7548,6 @@ var html5 = {
  }
 };

-// `Array.prototype.fill` method implementation
-// https://tc39.github.io/ecma262/#sec-array.prototype.fill
-var arrayFill = function fill(value /* , start = 0, end = @length */) {
-  var O = toObject(this);
-  var length = toLength(O.length);
-  var argumentsLength = arguments.length;
-  var index = toAbsoluteIndex(argumentsLength > 1 ? arguments[1] : undefined, length);
-  var end = argumentsLength > 2 ? arguments[2] : undefined;
-  var endPos = end === undefined ? length : toAbsoluteIndex(end, length);
-  while (endPos > index) O[index++] = value;
-  return O;
-};
-
-// `Array.prototype.fill` method
-// https://tc39.github.io/ecma262/#sec-array.prototype.fill
-_export({ target: 'Array', proto: true }, {
-  fill: arrayFill
-});
-
-// https://tc39.github.io/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('fill');
-
 function dedupe(array) {
  if (!is$1.array(array)) {
    return array;
@@ -7587,13 +7567,6 @@ function closest(array, value) {
    return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;
  });
 }
-function fillRange(start, end) {
-  var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  var len = Math.floor((end - start) / step) + 1;
-  return Array(len).fill().map(function (_, idx) {
-    return start + idx * step;
-  });
-}

 var defineProperty$6 = objectDefineProperty.f;
 var getOwnPropertyNames$1 = objectGetOwnPropertyNames.f;
@@ -8916,17 +8889,11 @@ var controls = {
    }

    var type = 'speed';
-    var list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Determine options to display
-    // Vimeo and YouTube limit to 0.5x-2x
-
-    if (this.isVimeo || this.isYouTube) {
-      this.options.speed = fillRange(0.5, 2, 0.25).filter(function (s) {
-        return _this8.config.speed.options.includes(s);
-      });
-    } else {
-      this.options.speed = this.config.speed.options;
-    } // Toggle the pane and tab
+    var list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Filter out invalid speeds

+    this.options.speed = this.options.speed.filter(function (o) {
+      return o >= _this8.minimumSpeed && o <= _this8.maximumSpeed;
+    }); // Toggle the pane and tab

    var toggle = !is$1.empty(this.options.speed) && this.options.speed.length > 1;
    controls.toggleMenuButton.call(this, type, toggle); // Empty the menu
@@ -9970,7 +9937,7 @@ var defaults$1 = {
  // Sprite (for icons)
  loadSprite: true,
  iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.5.7/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.5.10/plyr.svg',
  // Blank video (used to prevent errors on source change)
  blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
  // Quality default
@@ -10254,7 +10221,13 @@ var defaults$1 = {
    portrait: false,
    title: false,
    speed: true,
-    transparent: false
+    transparent: false,
+    // These settings require a pro or premium account to work
+    sidedock: false,
+    controls: false,
+    // Custom settings from Plyr
+    referrerPolicy: null // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
+
  },
  // YouTube plugin
  youtube: {
@@ -10807,7 +10780,12 @@ var ui = {
    } // Set property synchronously to respect the call order


-    this.media.setAttribute('poster', poster); // Wait until ui is ready
+    this.media.setAttribute('poster', poster); // HTML5 uses native poster attribute
+
+    if (this.isHTML5) {
+      return Promise.resolve(poster);
+    } // Wait until ui is ready
+

    return ready.call(this) // Load image
    .then(function () {
@@ -12038,26 +12016,27 @@ function assurePlaybackState(play) {

 var vimeo = {
  setup: function setup() {
-    var _this = this;
+    var player = this; // Add embed class for responsive

-    // Add embed class for responsive
-    toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set intial ratio
+    toggleClass(player.elements.wrapper, player.config.classNames.embed, true); // Set speed options from config

-    setAspectRatio.call(this); // Load the SDK if not already
+    player.options.speed = player.config.speed.options; // Set intial ratio
+
+    setAspectRatio.call(player); // Load the SDK if not already

    if (!is$1.object(window.Vimeo)) {
-      loadScript(this.config.urls.vimeo.sdk).then(function () {
-        vimeo.ready.call(_this);
+      loadScript(player.config.urls.vimeo.sdk).then(function () {
+        vimeo.ready.call(player);
      }).catch(function (error) {
-        _this.debug.warn('Vimeo SDK (player.js) failed to load', error);
+        player.debug.warn('Vimeo SDK (player.js) failed to load', error);
      });
    } else {
-      vimeo.ready.call(this);
+      vimeo.ready.call(player);
    }
  },
  // API Ready
  ready: function ready() {
-    var _this2 = this;
+    var _this = this;

    var player = this;
    var config = player.config.vimeo; // Get Vimeo params for the iframe
@@ -12083,7 +12062,12 @@ var vimeo = {
    iframe.setAttribute('src', src);
    iframe.setAttribute('allowfullscreen', '');
    iframe.setAttribute('allowtransparency', '');
-    iframe.setAttribute('allow', 'autoplay'); // Get poster, if already set
+    iframe.setAttribute('allow', 'autoplay'); // Set the referrer policy if required
+
+    if (!is$1.empty(config.referrerPolicy)) {
+      iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+    } // Get poster, if already set
+

    var poster = player.poster; // Inject the package

@@ -12225,7 +12209,7 @@ var vimeo = {
      currentSrc = value;
      controls.setDownloadUrl.call(player);
    }).catch(function (error) {
-      _this2.debug.warn(error);
+      _this.debug.warn(error);
    });
    Object.defineProperty(player.media, 'currentSrc', {
      get: function get() {
@@ -12245,7 +12229,7 @@ var vimeo = {
          height = _dimensions[1];

      player.embed.ratio = [width, height];
-      setAspectRatio.call(_this2);
+      setAspectRatio.call(_this);
    }); // Set autopause

    player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -12254,7 +12238,7 @@ var vimeo = {

    player.embed.getVideoTitle().then(function (title) {
      player.config.title = title;
-      ui.setTitle.call(_this2);
+      ui.setTitle.call(_this);
    }); // Get current time

    player.embed.getCurrentTime().then(function (value) {
@@ -12627,7 +12611,11 @@ var youtube = {
            }
          }); // Get available speeds

-          player.options.speed = instance.getAvailablePlaybackRates(); // Set the tabindex to avoid focus entering iframe
+          var speeds = instance.getAvailablePlaybackRates(); // Filter based on config
+
+          player.options.speed = speeds.filter(function (s) {
+            return player.config.speed.options.includes(s);
+          }); // Set the tabindex to avoid focus entering iframe

          if (player.supported.ui) {
            player.media.setAttribute('tabindex', -1);
@@ -12785,7 +12773,7 @@ var media = {
    }

    if (this.isHTML5) {
-      html5.extend.call(this);
+      html5.setup.call(this);
    } else if (this.isYouTube) {
      youtube.setup.call(this);
    } else if (this.isVimeo) {
@@ -13582,7 +13570,7 @@ function () {
    value: function load() {
      var _this = this;

-      // Togglethe regular seek tooltip
+      // Toggle the regular seek tooltip
      if (this.player.elements.display.seekTooltip) {
        this.player.elements.display.seekTooltip.hidden = this.enabled;
      }
@@ -13809,6 +13797,17 @@ function () {
      });
      this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.elements.thumb.container) {
+        this.elements.thumb.container.remove();
+      }
+
+      if (this.elements.scrubbing.container) {
+        this.elements.scrubbing.container.remove();
+      }
+    }
  }, {
    key: "showImageAtCurrentTime",
    value: function showImageAtCurrentTime() {
@@ -14054,7 +14053,7 @@ function () {
  }, {
    key: "determineContainerAutoSizing",
    value: function determineContainerAutoSizing() {
-      if (this.elements.thumb.imageContainer.clientHeight > 20) {
+      if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
        // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
        this.sizeSpecifiedInCSS = true;
      }
@@ -14067,6 +14066,13 @@ function () {
        var thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
        this.elements.thumb.imageContainer.style.height = "".concat(this.thumbContainerHeight, "px");
        this.elements.thumb.imageContainer.style.width = "".concat(thumbWidth, "px");
+      } else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
+        var _thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
+
+        this.elements.thumb.imageContainer.style.width = "".concat(_thumbWidth, "px");
+      } else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
+        var thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
+        this.elements.thumb.imageContainer.style.height = "".concat(thumbHeight, "px");
      }

      this.setThumbContainerPos();
@@ -14165,6 +14171,11 @@ function () {
            height = _fitRatio2.height;

        return height;
+      } // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)
+
+
+      if (this.sizeSpecifiedInCSS) {
+        return this.elements.thumb.imageContainer.clientHeight;
      }

      return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@@ -14314,11 +14325,22 @@ var source = {

      if (_this2.isHTML5) {
        _this2.media.load();
-      } // Reload thumbnails
+      } // Update previewThumbnails config & reload plugin


-      if (_this2.previewThumbnails) {
-        _this2.previewThumbnails.load();
+      if (!is$1.empty(input.previewThumbnails)) {
+        Object.assign(_this2.config.previewThumbnails, input.previewThumbnails); // Cleanup previewThumbnails plugin if it was loaded
+
+        if (_this2.previewThumbnails && _this2.previewThumbnails.loaded) {
+          _this2.previewThumbnails.destroy();
+
+          _this2.previewThumbnails = null;
+        } // Create new instance if it is still enabled
+
+
+        if (_this2.config.previewThumbnails.enabled) {
+          _this2.previewThumbnails = new PreviewThumbnails(_this2);
+        }
      } // Update the fullscreen support


@@ -1,6 +1,6 @@
 {
    "name": "plyr",
-    "version": "3.5.7",
+    "version": "3.5.10",
    "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
    "homepage": "https://plyr.io",
    "author": "Sam Potts <sam@potts.es>",
@@ -130,13 +130,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.

 ```html
-<script src="https://cdn.plyr.io/3.5.7/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.5.10/plyr.js"></script>
 ```

 ...or...

 ```html
-<script src="https://cdn.plyr.io/3.5.7/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.5.10/plyr.polyfilled.js"></script>
 ```

 ## CSS
@@ -150,13 +150,13 @@ Include the `plyr.css` stylsheet into your `<head>`.
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:

 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.5.7/plyr.css" />
+<link rel="stylesheet" href="https://cdn.plyr.io/3.5.10/plyr.css" />
 ```

 ## SVG Sprite

 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.5.7/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.5.10/plyr.svg`.

 # Ads

@@ -445,6 +445,9 @@ player.source = {
        },
    ],
    poster: '/path/to/poster.jpg',
+    previewThumbnails: {
+        src: '/path/to/thumbnails.vtt'
+    },
    tracks: [
        {
            kind: 'captions',
@@ -514,13 +517,14 @@ player.source = {

 _Note:_ `src` property for YouTube and Vimeo can either be the video ID or the whole URL.

-| Property       | Type   | Description                                                                                                                                                                                                                                                                                                                                                                                                    |
-| -------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`         | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources.                                                                                                                                                                                                                                                                                                             |
-| `title`        | String | _Optional._ Title of the new media. Used for the `aria-label` attribute on the play button, and outer container. YouTube and Vimeo are populated automatically.                                                                                                                                                                                                                                                |
-| `sources`      | Array  | This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required.                                                                                                                                                                                                                                             |
-| `poster`&sup1; | String | The URL for the poster image (HTML5 video only).                                                                                                                                                                                                                                                                                                                                                               |
-| `tracks`&sup1; | String | An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as `<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>` and similar for the French version. Booleans are converted to HTML5 value-less attributes. |
+| Property                  | Type   | Description                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                    | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources.                                                                                                                                                                                                                                                                                                             |
+| `title`                   | String | _Optional._ Title of the new media. Used for the `aria-label` attribute on the play button, and outer container. YouTube and Vimeo are populated automatically.                                                                                                                                                                                                                                                |
+| `sources`                 | Array  | This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required.                                                                                                                                                                                                                                             |
+| `poster`&sup1;            | String | The URL for the poster image (HTML5 video only).                                                                                                                                                                                                                                                                                                                                                               |
+| `tracks`&sup1;            | String | An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as `<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>` and similar for the French version. Booleans are converted to HTML5 value-less attributes. |
+| `previewThumbnails`&sup1; | Object | The same object like in the `previewThumbnails` constructor option. This means you can either change the thumbnails vtt via the `src` key or disable the thumbnails plugin for the next video by passing `{ enabled: false }`.                                                                                                                                                                                 |

 1.  HTML5 only

@@ -61,7 +61,7 @@ const defaults = {
    // Sprite (for icons)
    loadSprite: true,
    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.5.7/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.5.10/plyr.svg',

    // Blank video (used to prevent errors on source change)
    blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -419,6 +419,11 @@ const defaults = {
        title: false,
        speed: true,
        transparent: false,
+        // These settings require a pro or premium account to work
+        sidedock: false,
+        controls: false,
+        // Custom settings from Plyr
+        referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
    },

    // YouTube plugin
@@ -9,7 +9,7 @@ import captions from './captions';
 import html5 from './html5';
 import support from './support';
 import { repaint, transitionEndEvent } from './utils/animation';
-import { dedupe, fillRange } from './utils/arrays';
+import { dedupe } from './utils/arrays';
 import browser from './utils/browser';
 import {
    createElement,
@@ -1053,13 +1053,8 @@ const controls = {
        const type = 'speed';
        const list = this.elements.settings.panels.speed.querySelector('[role="menu"]');

-        // Determine options to display
-        // Vimeo and YouTube limit to 0.5x-2x
-        if (this.isVimeo || this.isYouTube) {
-            this.options.speed = fillRange(0.5, 2, 0.25).filter(s => this.config.speed.options.includes(s));
-        } else {
-            this.options.speed = this.config.speed.options;
-        }
+        // Filter out invalid speeds
+        this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed);

        // Toggle the pane and tab
        const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;
@@ -42,13 +42,16 @@ const html5 = {
            .filter(Boolean);
    },

-    extend() {
+    setup() {
        if (!this.isHTML5) {
            return;
        }

        const player = this;

+        // Set speed options from config
+        player.options.speed = player.config.speed.options;
+
        // Set aspect ratio if fixed
        if (!is.empty(this.config.ratio)) {
            setAspectRatio.call(player);
@@ -93,7 +96,6 @@ const html5 = {
                    if (preload !== 'none' || readyState) {
                        // Restore time
                        player.once('loadedmetadata', () => {
-
                            player.speed = playbackRate;
                            player.currentTime = currentTime;

@@ -49,7 +49,7 @@ const media = {
        }

        if (this.isHTML5) {
-            html5.extend.call(this);
+            html5.setup.call(this);
        } else if (this.isYouTube) {
            youtube.setup.call(this);
        } else if (this.isVimeo) {
@@ -104,7 +104,7 @@ class PreviewThumbnails {
    }

    load() {
-        // Togglethe regular seek tooltip
+        // Toggle the regular seek tooltip
        if (this.player.elements.display.seekTooltip) {
            this.player.elements.display.seekTooltip.hidden = this.enabled;
        }
@@ -328,6 +328,15 @@ class PreviewThumbnails {
        this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
    }

+    destroy() {
+        if (this.elements.thumb.container) {
+            this.elements.thumb.container.remove();
+        }
+        if (this.elements.scrubbing.container) {
+            this.elements.scrubbing.container.remove();
+        }
+    }
+
    showImageAtCurrentTime() {
        if (this.mouseDown) {
            this.setScrubbingContainerSize();
@@ -561,6 +570,11 @@ class PreviewThumbnails {
            return height;
        }

+        // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)
+        if (this.sizeSpecifiedInCSS) {
+            return this.elements.thumb.imageContainer.clientHeight;
+        }
+
        return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
    }

@@ -601,7 +615,7 @@ class PreviewThumbnails {
    }

    determineContainerAutoSizing() {
-        if (this.elements.thumb.imageContainer.clientHeight > 20) {
+        if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
            // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
            this.sizeSpecifiedInCSS = true;
        }
@@ -613,6 +627,12 @@ 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) {
+            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) {
+            const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
+            this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
        }

        this.setThumbContainerPos();
@@ -42,23 +42,28 @@ function assurePlaybackState(play) {

 const vimeo = {
    setup() {
+        const player = this;
+
        // Add embed class for responsive
-        toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
+        toggleClass(player.elements.wrapper, player.config.classNames.embed, true);
+
+        // Set speed options from config
+        player.options.speed = player.config.speed.options;

        // Set intial ratio
-        setAspectRatio.call(this);
+        setAspectRatio.call(player);

        // Load the SDK if not already
        if (!is.object(window.Vimeo)) {
-            loadScript(this.config.urls.vimeo.sdk)
+            loadScript(player.config.urls.vimeo.sdk)
                .then(() => {
-                    vimeo.ready.call(this);
+                    vimeo.ready.call(player);
                })
                .catch(error => {
-                    this.debug.warn('Vimeo SDK (player.js) failed to load', error);
+                    player.debug.warn('Vimeo SDK (player.js) failed to load', error);
                });
        } else {
-            vimeo.ready.call(this);
+            vimeo.ready.call(player);
        }
    },

@@ -99,6 +104,11 @@ const vimeo = {
        iframe.setAttribute('allowtransparency', '');
        iframe.setAttribute('allow', 'autoplay');

+        // Set the referrer policy if required
+        if (!is.empty(config.referrerPolicy)) {
+            iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+        }
+
        // Get poster, if already set
        const { poster } = player;
        // Inject the package
@@ -191,12 +201,10 @@ const vimeo = {
                return speed;
            },
            set(input) {
-                player.embed
-                    .setPlaybackRate(input)
-                    .then(() => {
-                        speed = input;
-                        triggerEvent.call(player, player.media, 'ratechange');
-                    });
+                player.embed.setPlaybackRate(input).then(() => {
+                    speed = input;
+                    triggerEvent.call(player, player.media, 'ratechange');
+                });
            },
        });

@@ -297,7 +297,9 @@ const youtube = {
                    });

                    // Get available speeds
-                    player.options.speed = instance.getAvailablePlaybackRates();
+                    const speeds = instance.getAvailablePlaybackRates();
+                    // Filter based on config
+                    player.options.speed = speeds.filter(s => player.config.speed.options.includes(s));

                    // Set the tabindex to avoid focus entering iframe
                    if (player.supported.ui) {
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.5.7
+// plyr.js v3.5.10
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.5.7
+// plyr.js v3.5.10
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -5,6 +5,7 @@
 import { providers } from './config/types';
 import html5 from './html5';
 import media from './media';
+import PreviewThumbnails from './plugins/preview-thumbnails';
 import support from './support';
 import ui from './ui';
 import { createElement, insertElement, removeElement } from './utils/elements';
@@ -130,9 +131,20 @@ const source = {
                    this.media.load();
                }

-                // Reload thumbnails
-                if (this.previewThumbnails) {
-                    this.previewThumbnails.load();
+                // Update previewThumbnails config & reload plugin
+                if (!is.empty(input.previewThumbnails)) {
+                    Object.assign(this.config.previewThumbnails, input.previewThumbnails);
+
+                    // Cleanup previewThumbnails plugin if it was loaded
+                    if (this.previewThumbnails && this.previewThumbnails.loaded) {
+                        this.previewThumbnails.destroy();
+                        this.previewThumbnails = null;
+                    }
+
+                    // Create new instance if it is still enabled
+                    if (this.config.previewThumbnails.enabled) {
+                        this.previewThumbnails = new PreviewThumbnails(this);
+                    }
                }

                // Update the fullscreen support
@@ -172,6 +172,11 @@ const ui = {
        // Set property synchronously to respect the call order
        this.media.setAttribute('poster', poster);

+        // HTML5 uses native poster attribute
+        if (this.isHTML5) {
+            return Promise.resolve(poster);
+        }
+
        // Wait until ui is ready
        return (
            ready
@@ -21,11 +21,3 @@ export function closest(array, value) {

    return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
 }
-
-export function fillRange(start, end, step = 1) {
-    const len = Math.floor((end - start) / step) + 1;
-
-    return Array(len)
-        .fill()
-        .map((_, idx) => start + idx * step);
-}
@@ -8,6 +8,7 @@
    align-items: center;
    direction: ltr;
    display: flex;
+    flex-direction: column;
    font-family: $plyr-font-family;
    font-variant-numeric: tabular-nums; // Force monosace-esque number widths
    font-weight: $plyr-font-weight-regular;
@@ -1,7 +0,0 @@
-// --------------------------------------------------------------
-// Audio styles
-// --------------------------------------------------------------
-
-.plyr--audio {
-    display: block;
-}
@@ -50,59 +50,3 @@ a.plyr__control {
 .plyr__control.plyr__control--pressed .label--not-pressed {
    display: none;
 }
-
-// Audio control
-.plyr--audio .plyr__control {
-    &.plyr__tab-focus,
-    &:hover,
-    &[aria-expanded='true'] {
-        background: $plyr-audio-control-bg-hover;
-        color: $plyr-audio-control-color-hover;
-    }
-}
-
-// Video control
-.plyr--video .plyr__control {
-    // Hover and tab focus
-    &.plyr__tab-focus,
-    &:hover,
-    &[aria-expanded='true'] {
-        background: $plyr-video-control-bg-hover;
-        color: $plyr-video-control-color-hover;
-    }
-}
-
-// Large play button (video only)
-.plyr__control--overlaid {
-    background: rgba($plyr-video-control-bg-hover, 0.8);
-    border: 0;
-    border-radius: 100%;
-    color: $plyr-video-control-color;
-    display: none;
-    left: 50%;
-    padding: ceil($plyr-control-spacing * 1.5);
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 2;
-
-    // Offset icon to make the play button look right
-    svg {
-        left: 2px;
-        position: relative;
-    }
-
-    &:hover,
-    &:focus {
-        background: $plyr-video-control-bg-hover;
-    }
-}
-
-.plyr--playing .plyr__control--overlaid {
-    opacity: 0;
-    visibility: hidden;
-}
-
-.plyr--full-ui.plyr--video .plyr__control--overlaid {
-    display: block;
-}
@@ -49,40 +49,6 @@
    }
 }

-// Audio controls
-.plyr--audio .plyr__controls {
-    background: $plyr-audio-controls-bg;
-    border-radius: inherit;
-    color: $plyr-audio-control-color;
-    padding: $plyr-control-spacing;
-}
-
-// Video controls
-.plyr--video .plyr__controls {
-    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
-    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);
-    position: absolute;
-    right: 0;
-    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
-    z-index: 3;
-
-    @media (min-width: $plyr-bp-sm) {
-        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
-    }
-}
-
-// Hide video controls
-.plyr--video.plyr--hide-controls .plyr__controls {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(100%);
-}
-
 // Some options are hidden by default
 .plyr [data-plyr='captions'],
 .plyr [data-plyr='pip'],
@@ -39,8 +39,7 @@

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

        // Arrow
@@ -74,8 +73,7 @@
            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: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
            user-select: none;
            width: 100%;

@@ -67,15 +67,6 @@ $plyr-progress-offset: $plyr-range-thumb-height;
    }
 }

-.plyr--video .plyr__progress__buffer {
-    box-shadow: 0 1px 1px rgba(#000, 0.15);
-    color: $plyr-video-progress-buffered-bg;
-}
-
-.plyr--audio .plyr__progress__buffer {
-    color: $plyr-audio-progress-buffered-bg;
-}
-
 // Loading state
 .plyr--loading .plyr__progress__buffer {
    animation: plyr-progress 1s linear infinite;
@@ -19,11 +19,7 @@

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

    &::-webkit-slider-thumb {
@@ -96,69 +92,3 @@
        }
    }
 }
-
-// Video range inputs
-.plyr--full-ui.plyr--video input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    &::-moz-range-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    &::-ms-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    // Pressed styles
-    &:active {
-        &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active();
-        }
-
-        &::-moz-range-thumb {
-            @include plyr-range-thumb-active();
-        }
-
-        &::-ms-thumb {
-            @include plyr-range-thumb-active();
-        }
-    }
-}
-
-// Audio range inputs
-.plyr--full-ui.plyr--audio input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background-color: $plyr-audio-range-track-bg;
-    }
-
-    &::-moz-range-track {
-        background-color: $plyr-audio-range-track-bg;
-    }
-
-    &::-ms-track {
-        background-color: $plyr-audio-range-track-bg;
-    }
-
-    // Pressed styles
-    &:active {
-        &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active(
-                $plyr-audio-range-thumb-shadow-color
-            );
-        }
-
-        &::-moz-range-thumb {
-            @include plyr-range-thumb-active(
-                $plyr-audio-range-thumb-shadow-color
-            );
-        }
-
-        &::-ms-thumb {
-            @include plyr-range-thumb-active(
-                $plyr-audio-range-thumb-shadow-color
-            );
-        }
-    }
-}
@@ -18,7 +18,3 @@
        display: none;
    }
 }
-
-.plyr--video .plyr__time {
-    text-shadow: 0 1px 1px rgba(#000, 0.15);
-}
@@ -1,51 +0,0 @@
-// --------------------------------------------------------------
-// Video styles
-// --------------------------------------------------------------
-
-.plyr--video {
-    background: #000;
-    overflow: hidden;
-
-    // Menu open
-    &.plyr--menu-open {
-        overflow: visible;
-    }
-}
-
-.plyr__video-wrapper {
-    background: #000;
-    height: 100%;
-    margin: auto;
-    overflow: hidden;
-    width: 100%;
-}
-
-// Default to 16:9 ratio but this is set by JavaScript based on config
-$embed-padding: ((100 / 16) * 9);
-
-.plyr__video-embed,
-.plyr__video-wrapper--fixed-ratio {
-    height: 0;
-    padding-bottom: to-percentage($embed-padding);
-}
-
-.plyr__video-embed iframe,
-.plyr__video-wrapper--fixed-ratio video {
-    border: 0;
-    left: 0;
-    position: absolute;
-    top: 0;
-}
-
-// If the full custom UI is supported
-.plyr--full-ui .plyr__video-embed {
-    $height: 240;
-    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
-
-    // Only used for Vimeo
-    > .plyr__video-embed__container {
-        padding-bottom: to-percentage($height);
-        position: relative;
-        transform: translateY(-$offset);
-    }
-}
@@ -5,7 +5,10 @@
 .plyr__volume {
    align-items: center;
    display: flex;
+    max-width: 110px;
+    min-width: 80px;
    position: relative;
+    width: 20%;

    input[type='range'] {
        margin-left: ($plyr-control-spacing / 2);
@@ -13,12 +16,10 @@
        position: relative;
        z-index: 2;
    }
-
-    @media (min-width: $plyr-bp-sm) {
-        max-width: 90px;
-    }
-
-    @media (min-width: $plyr-bp-md) {
-        max-width: 110px;
-    }
+}
+
+// Auto size on iOS as there's no slider
+.plyr--is-ios .plyr__volume {
+    min-width: 0;
+    width: auto;
 }
@@ -25,7 +25,6 @@

@import 'base';

-@import 'components/audio';
@import 'components/badges';
@import 'components/captions';
@import 'components/control';
@@ -35,10 +34,12 @@
@import 'components/poster';
@import 'components/times';
@import 'components/tooltips';
-@import 'components/video';
@import 'components/progress';
@import 'components/volume';

+@import 'types/audio';
+@import 'types/video';
+
@import 'states/fullscreen';

@import 'plugins/ads';
@@ -5,6 +5,6 @@
 $plyr-menu-bg: rgba(#fff, 0.9) !default;
 $plyr-menu-color: $plyr-color-gray-7 !default;
 $plyr-menu-arrow-size: 6px !default;
-$plyr-menu-border-color: $plyr-color-gray-2 !default;
+$plyr-menu-border-color: rgba($plyr-color-gray-5, 0.2) !default;
 $plyr-menu-border-shadow-color: #fff !default;
 $plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
@@ -0,0 +1,61 @@
+// --------------------------------------------------------------
+// Audio styles
+// --------------------------------------------------------------
+
+// Container
+.plyr--audio {
+    display: block;
+}
+
+// Controls container
+.plyr--audio .plyr__controls {
+    background: $plyr-audio-controls-bg;
+    border-radius: inherit;
+    color: $plyr-audio-control-color;
+    padding: $plyr-control-spacing;
+}
+
+// Control elements
+.plyr--audio .plyr__control {
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: $plyr-audio-control-bg-hover;
+        color: $plyr-audio-control-color-hover;
+    }
+}
+
+// Range inputs
+.plyr--full-ui.plyr--audio input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background-color: $plyr-audio-range-track-bg;
+    }
+
+    &::-moz-range-track {
+        background-color: $plyr-audio-range-track-bg;
+    }
+
+    &::-ms-track {
+        background-color: $plyr-audio-range-track-bg;
+    }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+    }
+}
+
+// Progress
+.plyr--audio .plyr__progress__buffer {
+    color: $plyr-audio-progress-buffered-bg;
+}
@@ -0,0 +1,158 @@
+// --------------------------------------------------------------
+// Video styles
+// --------------------------------------------------------------
+
+// Container
+.plyr--video {
+    background: #000;
+    overflow: hidden;
+
+    &.plyr--menu-open {
+        overflow: visible;
+    }
+}
+
+.plyr__video-wrapper {
+    background: #000;
+    height: 100%;
+    margin: auto;
+    overflow: hidden;
+    width: 100%;
+}
+
+// Default to 16:9 ratio but this is set by JavaScript based on config
+$embed-padding: ((100 / 16) * 9);
+
+.plyr__video-embed,
+.plyr__video-wrapper--fixed-ratio {
+    height: 0;
+    padding-bottom: to-percentage($embed-padding);
+}
+
+.plyr__video-embed iframe,
+.plyr__video-wrapper--fixed-ratio video {
+    border: 0;
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+// If the full custom UI is supported
+.plyr--full-ui .plyr__video-embed {
+    $height: 240;
+    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
+
+    // Only used for Vimeo
+    > .plyr__video-embed__container {
+        padding-bottom: to-percentage($height);
+        position: relative;
+        transform: translateY(-$offset);
+    }
+}
+
+// Controls container
+.plyr--video .plyr__controls {
+    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
+    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);
+    position: absolute;
+    right: 0;
+    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
+    z-index: 3;
+
+    @media (min-width: $plyr-bp-sm) {
+        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
+    }
+}
+
+// Hide controls
+.plyr--video.plyr--hide-controls .plyr__controls {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(100%);
+}
+
+// Control elements
+.plyr--video .plyr__control {
+    // Hover and tab focus
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: $plyr-video-control-bg-hover;
+        color: $plyr-video-control-color-hover;
+    }
+}
+
+// Large play button (video only)
+.plyr__control--overlaid {
+    background: rgba($plyr-video-control-bg-hover, 0.8);
+    border: 0;
+    border-radius: 100%;
+    color: $plyr-video-control-color;
+    display: none;
+    left: 50%;
+    padding: ceil($plyr-control-spacing * 1.5);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+
+    // Offset icon to make the play button look right
+    svg {
+        left: 2px;
+        position: relative;
+    }
+
+    &:hover,
+    &:focus {
+        background: $plyr-video-control-bg-hover;
+    }
+}
+
+.plyr--playing .plyr__control--overlaid {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.plyr--full-ui.plyr--video .plyr__control--overlaid {
+    display: block;
+}
+
+// Video range inputs
+.plyr--full-ui.plyr--video input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    &::-moz-range-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    &::-ms-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active();
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active();
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active();
+        }
+    }
+}
+
+// Progress
+.plyr--video .plyr__progress__buffer {
+    color: $plyr-video-progress-buffered-bg;
+}
Author	SHA1	Message	Date
Sam Potts	206e3b57d1	v3.5.10	2020-02-14 17:37:32 +00:00
Sam Potts	a34bc3ef29	Merge pull request #1692 from sampotts/develop v3.5.10	2020-02-14 17:33:41 +00:00
Sam Potts	6350b7b9e4	v3.5.10 - iOS volume display fix	2020-02-14 17:33:09 +00:00
Sam Potts	04d06f2242	v3.5.9 deployed	2020-02-14 17:00:33 +00:00
Sam Potts	924049aa14	Merge pull request #1691 from sampotts/develop v3.5.9	2020-02-14 16:55:56 +00:00
Sam Potts	442427ebd5	v3.5.9 - Fix for regression with volume control width - Ensure poster image is not downloaded again for HTML5 videos	2020-02-14 16:54:22 +00:00
Sam Potts	7954c92c0b	Merge branch 'master' into develop	2020-02-14 16:53:55 +00:00
Sam Potts	5afb14283a	Fix for regression with volume control width	2020-02-14 16:53:31 +00:00
Sam Potts	bfc541b880	Ensure poster image is not downloaded again for HTML5 videos	2020-02-14 16:53:23 +00:00
Sam Potts	426280f90c	Merge branch 'master' into develop	2020-02-13 15:06:57 +00:00
Sam Potts	2e2c5ad72a	Styles	2020-02-13 15:06:38 +00:00
Sam Potts	ecb091af6b	Fix syntax with funding.yml	2020-02-13 12:40:08 +00:00
Sam Potts	ecb882b719	Added Open Collective as funding option	2020-02-13 12:39:30 +00:00
Sam Potts	cddd9c30db	More styles clean up	2020-02-12 14:36:30 +00:00
Sam Potts	f6a4625495	Removed redundant keys property	2020-02-12 11:35:47 +00:00
Sam Potts	a6ff0274a9	v3.5.8 deployed	2020-02-10 18:38:54 +00:00
Sam Potts	841746210a	Merge pull request #1684 from sampotts/develop v3.5.8	2020-02-10 18:35:42 +00:00
Sam Potts	156abda66a	Changelog update	2020-02-10 18:34:26 +00:00
Sam Potts	1619510dcf	Speed settings logic improvements	2020-02-10 18:34:05 +00:00
Sam Potts	ff8dedd4ec	Menu border color tweak	2020-02-10 17:53:23 +00:00
Sam Potts	637823c8ce	Started on v3.5.8 changelog	2020-02-10 11:31:39 +00:00
Sam Potts	01219be817	Comment clean up	2020-02-10 11:31:18 +00:00
Sam Potts	59e3afba03	Merge branch 'develop' of github.com:sampotts/plyr into develop	2020-02-10 11:28:59 +00:00
Sam Potts	db05322ba2	Merge pull request #1670 from ydylla/previewThumbnails-setter Add previewThumbnails source setter	2020-02-10 11:28:20 +00:00
Sam Potts	74e5c78b3f	Merge pull request #1678 from ydylla/fix-thumb-size-per-css Improve thumbnail size calculations when size is set per css	2020-02-10 11:26:53 +00:00
Sam Potts	ea350f9d1d	Update demo video	2020-02-10 11:25:48 +00:00
Sam Potts	eda192639d	Demo packages updated	2020-02-10 11:25:39 +00:00
Sam Potts	0f16a018ff	Set referrerPolicy in the demo	2020-02-10 11:25:25 +00:00
Sam Potts	7ca74f48bc	Added vimeo options to hide controls and set referrerPolicy	2020-02-10 11:24:38 +00:00
Sam Potts	5837c2d5f0	SASS orginasation clean up and flex-direction added	2020-02-10 11:23:57 +00:00
Sam Potts	e50b35d195	Merge pull request #1554 from sampotts/dependabot/npm_and_yarn/mixin-deep-1.3.2 Bump mixin-deep from 1.3.1 to 1.3.2	2020-02-09 22:17:19 +00:00
Sam Potts	433b729c45	Merge pull request #1575 from sampotts/dependabot/npm_and_yarn/lodash.merge-4.6.2 Bump lodash.merge from 4.6.1 to 4.6.2	2020-02-09 22:17:10 +00:00
ydylla	d7d0f5fca0	add previewThumbnails to source setter docs	2020-02-09 17:03:31 +01:00
ydylla	97f8093a8d	allows to set only width or height for thumb css size Also fixes sprites when css thumb size is used	2020-02-08 19:15:02 +01:00
ydylla	61a24eab76	add previewThumbnails source setter #1369	2020-02-01 16:32:19 +01:00
dependabot[bot]	640bc99661	Bump lodash.merge from 4.6.1 to 4.6.2 Bumps [lodash.merge](https://github.com/lodash/lodash) from 4.6.1 to 4.6.2. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/commits) Signed-off-by: dependabot[bot] <support@github.com>	2019-09-22 15:26:12 +00:00
dependabot[bot]	32bf684b17	Bump mixin-deep from 1.3.1 to 1.3.2 Bumps [mixin-deep](https://github.com/jonschlinkert/mixin-deep) from 1.3.1 to 1.3.2. - [Release notes](https://github.com/jonschlinkert/mixin-deep/releases) - [Commits](https://github.com/jonschlinkert/mixin-deep/compare/1.3.1...1.3.2) Signed-off-by: dependabot[bot] <support@github.com>	2019-08-28 22:38:57 +00:00