Prepare for 3.5.7 release

2020-01-30 11:34:07 +00:00
parent 5204f33d45
commit fefcca7805
21 changed files with 1500 additions and 1184 deletions
@@ -1,15 +1,35 @@
-## v3.5.6
+### v3.5.7
+
+-   Typescript typings (thanks @ondratra)
+-   `togglePlay` now also returns a `Promise` (thanks @azizhk)
+-   Documentation improvements (thanks @MaxGiting, @0xflotus and @thatrobotdev)
+-   Accessibility tweak for the play button (thanks @lunika)
+-   Fix for ads configuration (thanks @SoftCreatR)
+-   Added localisation key for PIP (picture-in-picture) (thanks @lmislm)
+-   Preserve viewBox attribute in SVG sprite symbols (thanks @bseib)
+-   Fix being unable to unmute autoplayed video on iOS (thanks @sumanbh)
+-   Fixed Plyr container not resizing responsively (thanks @shravan2x)
+-   Change vimeo demo video (thanks @thatrobotdev)
+-   Fix for `Uncaught RangeError: Maximum call stack size exceeded` (thanks @laukstein)
+-   Improve fullscreen experience on some devices (thanks @savroff)
+-   Improvements to buffering state for embedded players (thanks @doostinharrell)
+-   Prevents IE11 with resetOnEnd option set to true to play video again (thanks @Felipe K. De Boni)
+-   Fix for multiple poster image downloads (use the native poster only for HTML5 videos)
+-   Various presentational fixes
+-   Removed logic to hide/show volume controls based on audio track detection due to it's problematic nature. If you want to hide volume control, use the `controls` option to do so.
+
+### v3.5.6

 -   Another Edge fix (thanks Nick Hawk via Slack)

-## v3.5.5
+### v3.5.5

 -   YouTube fix for when there are other embeds on the page (thanks @aFarkas)
 -   Separated demo dependencies into their own package.json
 -   Fix for Edge controls flexbox issue when resizing the player (thanks Nick Hawk via Slack)
 -   More aspect ratio fixes

-## v3.5.4
+### v3.5.4

 -   Added: Set download URL via new setter
 -   Improvement: The order of the `controls` option now effects the order in the DOM - i.e. you can re-order the controls - Note: this may break any custom CSS you have setup. Please see the changes in the PR to the default SASS
@@ -22,7 +42,7 @@
 -   Improvement: Automatic aspect ratio for YouTube is now supported, meaning all aspect ratios are set based on media content - Note: we're now using a different API to get YouTube video metadata so you may need to adjust any CSPs you have setup
 -   Fix for menu in the Shadow DOM (thanks @emielbeinema)

-## v3.5.3
+### v3.5.3

 -   Improved the usage of the `ratio` config option; it now works as expected and for all video types. The default has not changed, it is to dynamically, where possible (except YouTube where 16:9 is used) determine the ratio from the media source so this is not a breaking change.
 -   Added new `ratio` getter and setter
@@ -30,11 +50,11 @@
 -   Fix: Allow absolute paths in preview thumbnails
 -   Improvement: Allow optional hours and ms in VTT parser in preview thumbnails

-## v3.5.2
+### v3.5.2

 -   Fixed issue where the preview thumbnail was present while scrubbing

-## v3.5.1
+### v3.5.1

 -   Fixed build issues with babel and browserslist

@@ -41,6 +41,40 @@ typeof navigator === "object" && (function (global, factory) {
    return obj;
  }

+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+
+    return target;
+  }
+
  function _slicedToArray(arr, i) {
    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
  }
@@ -587,7 +621,6 @@ typeof navigator === "object" && (function (global, factory) {
    isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
  };

-  // ==========================================================================
  // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
  // https://www.youtube.com/watch?v=NPM6172J22g

@@ -704,7 +737,7 @@ typeof navigator === "object" && (function (global, factory) {

    var event = new CustomEvent(type, {
      bubbles: bubbles,
-      detail: Object.assign({}, detail, {
+      detail: _objectSpread2({}, detail, {
        plyr: this
      })
    }); // Dispatch the event
@@ -1203,6 +1236,7 @@ typeof navigator === "object" && (function (global, factory) {
      return {};
    }

+    var wrapper = this.elements.wrapper;
    var ratio = getAspectRatio.call(this, input);

    var _ref = is$1.array(ratio) ? ratio : [0, 0],
@@ -1211,14 +1245,14 @@ typeof navigator === "object" && (function (global, factory) {
        h = _ref2[1];

    var padding = 100 / w * h;
-    this.elements.wrapper.style.paddingBottom = "".concat(padding, "%"); // For Vimeo we have an extra <div> to hide the standard controls and UI
+    wrapper.style.paddingBottom = "".concat(padding, "%"); // For Vimeo we have an extra <div> to hide the standard controls and UI

    if (this.isVimeo && this.supported.ui) {
      var height = 240;
      var offset = (height - padding) / (height / 50);
      this.media.style.transform = "translateY(-".concat(offset, "%)");
    } else if (this.isHTML5) {
-      this.elements.wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
+      wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
    }

    return {
@@ -1250,7 +1284,12 @@ typeof navigator === "object" && (function (global, factory) {
    },
    // Get quality levels
    getQualityOptions: function getQualityOptions() {
-      // Get sizes from <source> elements
+      // Whether we're forcing all options (e.g. for streaming)
+      if (this.config.quality.forced) {
+        return this.config.quality.options;
+      } // Get sizes from <source> elements
+
+
      return html5.getSources.call(this).map(function (source) {
        return Number(source.getAttribute('size'));
      }).filter(Boolean);
@@ -1278,37 +1317,46 @@ typeof navigator === "object" && (function (global, factory) {
          return source && Number(source.getAttribute('size'));
        },
        set: function set(input) {
-          // Get sources
-          var sources = html5.getSources.call(player); // Get first match for requested size
+          // If we're using an an external handler...
+          if (player.config.quality.forced && is$1.function(player.config.quality.onChange)) {
+            player.config.quality.onChange(input);
+          } else {
+            // Get sources
+            var sources = html5.getSources.call(player); // Get first match for requested size

-          var source = sources.find(function (s) {
-            return Number(s.getAttribute('size')) === input;
-          }); // No matching source found
+            var source = sources.find(function (s) {
+              return Number(s.getAttribute('size')) === input;
+            }); // No matching source found

-          if (!source) {
-            return;
-          } // Get current state
+            if (!source) {
+              return;
+            } // Get current state


-          var _player$media = player.media,
-              currentTime = _player$media.currentTime,
-              paused = _player$media.paused,
-              preload = _player$media.preload,
-              readyState = _player$media.readyState; // Set new source
+            var _player$media = player.media,
+                currentTime = _player$media.currentTime,
+                paused = _player$media.paused,
+                preload = _player$media.preload,
+                readyState = _player$media.readyState; // Set new source

-          player.media.src = source.getAttribute('src'); // Prevent loading if preload="none" and the current source isn't loaded (#1044)
+            player.media.src = source.getAttribute('src'); // Prevent loading if preload="none" and the current source isn't loaded (#1044)

-          if (preload !== 'none' || readyState) {
-            // Restore time
-            player.once('loadedmetadata', function () {
-              player.currentTime = currentTime; // Resume playing
+            if (preload !== 'none' || readyState) {
+              // Restore time
+              player.once('loadedmetadata', function () {
+                if (player.currentTime === 0) {
+                  return;
+                }

-              if (!paused) {
-                player.play();
-              }
-            }); // Load new source
+                player.currentTime = currentTime; // Resume playing

-            player.media.load();
+                if (!paused) {
+                  player.play();
+                }
+              }); // Load new source
+
+              player.media.load();
+            }
          } // Trigger change event


@@ -1679,7 +1727,7 @@ typeof navigator === "object" && (function (global, factory) {

    // Bail if the value isn't a number
    if (!is$1.number(time)) {
-      return formatTime(null, displayHours, inverted);
+      return formatTime(undefined, displayHours, inverted);
    } // Format time component to add leading zero


@@ -1788,9 +1836,11 @@ typeof navigator === "object" && (function (global, factory) {
    createLabel: function createLabel(key) {
      var attr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      var text = i18n.get(key, this.config);
-      var attributes = Object.assign({}, attr, {
+
+      var attributes = _objectSpread2({}, attr, {
        class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' ')
      });
+
      return createElement('span', attributes, text);
    },
    // Create a badge
@@ -2000,7 +2050,7 @@ typeof navigator === "object" && (function (global, factory) {
      var _this2 = this;

      // Navigate through menus via arrow keys and space
-      on(menuItem, 'keydown keyup', function (event) {
+      on.call(this, menuItem, 'keydown keyup', function (event) {
        // We only care about space and ⬆️ ⬇️️ ➡️
        if (![32, 38, 39, 40].includes(event.which)) {
          return;
@@ -2042,7 +2092,7 @@ typeof navigator === "object" && (function (global, factory) {
      }, false); // Enter will fire a `click` event but we still need to manage focus
      // So we bind to keyup which fires after and set focus here

-      on(menuItem, 'keyup', function (event) {
+      on.call(this, menuItem, 'keyup', function (event) {
        if (event.which !== 13) {
          return;
        }
@@ -2880,9 +2930,11 @@ typeof navigator === "object" && (function (global, factory) {
          if (control === 'mute') {
            volume.appendChild(createButton.call(_this10, 'mute'));
          } // Volume range control
+          // Ignored on iOS as it's handled globally
+          // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html


-          if (control === 'volume') {
+          if (control === 'volume' && !browser.isIos) {
            // Set the attributes
            var attributes = {
              max: 1,
@@ -2941,7 +2993,7 @@ typeof navigator === "object" && (function (global, factory) {

            bindMenuItemShortcuts.call(_this10, menuItem, type); // Show menu on click

-            on(menuItem, 'click', function () {
+            on.call(_this10, menuItem, 'click', function () {
              showMenuPanel.call(_this10, type, false);
            });
            var flex = createElement('span', null, i18n.get(type, _this10.config));
@@ -2972,7 +3024,7 @@ typeof navigator === "object" && (function (global, factory) {
              class: _this10.config.classNames.hidden
            }, i18n.get('menuBack', _this10.config))); // Go back via keyboard

-            on(pane, 'keydown', function (event) {
+            on.call(_this10, pane, 'keydown', function (event) {
              // We only care about <-
              if (event.which !== 37) {
                return;
@@ -2985,7 +3037,7 @@ typeof navigator === "object" && (function (global, factory) {
              showMenuPanel.call(_this10, 'home', true);
            }, false); // Go back via button click

-            on(backButton, 'click', function () {
+            on.call(_this10, backButton, 'click', function () {
              showMenuPanel.call(_this10, 'home', false);
            }); // Add to pane

@@ -3647,7 +3699,9 @@ typeof navigator === "object" && (function (global, factory) {
    // Quality default
    quality: {
      default: 576,
-      options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]
+      options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240],
+      forced: false,
+      onChange: null
    },
    // Set loops
    loop: {
@@ -3724,6 +3778,7 @@ typeof navigator === "object" && (function (global, factory) {
      frameTitle: 'Player for {title}',
      captions: 'Captions',
      settings: 'Settings',
+      pip: 'PIP',
      menuBack: 'Go back to previous menu',
      speed: 'Speed',
      normal: 'Normal',
@@ -4163,7 +4218,9 @@ typeof navigator === "object" && (function (global, factory) {
        } else if (!Fullscreen.native || this.forceFallback) {
          toggleFallback.call(this, true);
        } else if (!this.prefix) {
-          this.target.requestFullscreen();
+          this.target.requestFullscreen({
+            navigationUI: "hide"
+          });
        } else if (!is$1.empty(this.prefix)) {
          this.target["".concat(this.prefix, "Request").concat(this.property)]();
        }
@@ -4470,6 +4527,7 @@ typeof navigator === "object" && (function (global, factory) {
        Object.assign(target, {
          pressed: _this3.playing
        });
+        target.setAttribute('aria-label', i18n.get(_this3.playing ? 'pause' : 'play', _this3.config));
      }); // Only update controls on non timeupdate events

      if (is$1.event(event) && event.type === 'timeupdate') {
@@ -4866,19 +4924,15 @@ typeof navigator === "object" && (function (global, factory) {

        on.call(player, player.media, 'durationchange loadeddata loadedmetadata', function (event) {
          return controls.durationUpdate.call(player, event);
-        }); // Check for audio tracks on load
-        // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
-
-        on.call(player, player.media, 'canplay loadeddata', function () {
-          toggleHidden(elements.volume, !player.hasAudio);
-          toggleHidden(elements.buttons.mute, !player.hasAudio);
        }); // Handle the media finishing

        on.call(player, player.media, 'ended', function () {
          // Show poster on end
          if (player.isHTML5 && player.isVideo && player.config.resetOnEnd) {
            // Restart
-            player.restart();
+            player.restart(); // Call pause otherwise IE11 will start playing the video again
+
+            player.pause();
          }
        }); // Check for buffer progress

@@ -4991,7 +5045,7 @@ typeof navigator === "object" && (function (global, factory) {
        } // Only call default handler if not prevented in custom handler


-        if (returned && is$1.function(defaultHandler)) {
+        if (returned !== false && is$1.function(defaultHandler)) {
          defaultHandler.call(player, event);
        }
      } // Trigger custom and default handlers
@@ -5871,6 +5925,12 @@ typeof navigator === "object" && (function (global, factory) {
          frame.setAttribute('tabindex', -1);
        }
      });
+      player.embed.on('bufferstart', function () {
+        triggerEvent.call(player, player.media, 'waiting');
+      });
+      player.embed.on('bufferend', function () {
+        triggerEvent.call(player, player.media, 'playing');
+      });
      player.embed.on('play', function () {
        assurePlaybackState.call(player, true);
        triggerEvent.call(player, player.media, 'playing');
@@ -6303,6 +6363,11 @@ typeof navigator === "object" && (function (global, factory) {

                assurePlaybackState$1.call(player, false);
                break;
+
+              case 3:
+                // Trigger waiting event to add loading classes to container as the video buffers.
+                triggerEvent.call(player, player.media, 'waiting');
+                break;
            }

            triggerEvent.call(player, player.elements.container, 'statechange', false, {
@@ -6343,10 +6408,12 @@ typeof navigator === "object" && (function (global, factory) {

        wrap(this.media, this.elements.wrapper); // Faux poster container

-        this.elements.poster = createElement('div', {
-          class: this.config.classNames.poster
-        });
-        this.elements.wrapper.appendChild(this.elements.poster);
+        if (this.isEmbed) {
+          this.elements.poster = createElement('div', {
+            class: this.config.classNames.poster
+          });
+          this.elements.wrapper.appendChild(this.elements.poster);
+        }
      }

      if (this.isHTML5) {
@@ -6987,7 +7054,7 @@ typeof navigator === "object" && (function (global, factory) {
          cb: Date.now(),
          AV_WIDTH: 640,
          AV_HEIGHT: 480,
-          AV_CDIM2: this.publisherId
+          AV_CDIM2: config.publisherId
        };
        var base = 'https://go.aniview.com/api/adserver6/vast/';
        return "".concat(base, "?").concat(buildUrlParams(params));
@@ -7052,6 +7119,21 @@ typeof navigator === "object" && (function (global, factory) {
   */


+  var fitRatio = function fitRatio(ratio, outer) {
+    var targetRatio = outer.width / outer.height;
+    var result = {};
+
+    if (ratio > targetRatio) {
+      result.width = outer.width;
+      result.height = 1 / ratio * outer.width;
+    } else {
+      result.height = outer.height;
+      result.width = ratio * outer.height;
+    }
+
+    return result;
+  };
+
  var PreviewThumbnails =
  /*#__PURE__*/
  function () {
@@ -7596,9 +7678,15 @@ typeof navigator === "object" && (function (global, factory) {
    }, {
      key: "setScrubbingContainerSize",
      value: function setScrubbingContainerSize() {
-        this.elements.scrubbing.container.style.width = "".concat(this.player.media.clientWidth, "px"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below
+        var _fitRatio = fitRatio(this.thumbAspectRatio, {
+          width: this.player.media.clientWidth,
+          height: this.player.media.clientHeight
+        }),
+            width = _fitRatio.width,
+            height = _fitRatio.height;

-        this.elements.scrubbing.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px");
+        this.elements.scrubbing.container.style.width = "".concat(width, "px");
+        this.elements.scrubbing.container.style.height = "".concat(height, "px");
      } // Sprites need to be offset to the correct location

    }, {
@@ -7611,9 +7699,9 @@ typeof navigator === "object" && (function (global, factory) {

        var multiplier = this.thumbContainerHeight / frame.h; // eslint-disable-next-line no-param-reassign

-        previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * multiplier), "px"); // eslint-disable-next-line no-param-reassign
+        previewImage.style.height = "".concat(previewImage.naturalHeight * multiplier, "px"); // eslint-disable-next-line no-param-reassign

-        previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * multiplier), "px"); // eslint-disable-next-line no-param-reassign
+        previewImage.style.width = "".concat(previewImage.naturalWidth * multiplier, "px"); // eslint-disable-next-line no-param-reassign

        previewImage.style.left = "-".concat(frame.x * multiplier, "px"); // eslint-disable-next-line no-param-reassign

@@ -7651,8 +7739,13 @@ typeof navigator === "object" && (function (global, factory) {
      key: "thumbContainerHeight",
      get: function get() {
        if (this.mouseDown) {
-          // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below
-          return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio);
+          var _fitRatio2 = fitRatio(this.thumbAspectRatio, {
+            width: this.player.media.clientWidth,
+            height: this.player.media.clientHeight
+          }),
+              height = _fitRatio2.height;
+
+          return height;
        }

        return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@@ -8136,10 +8229,10 @@ typeof navigator === "object" && (function (global, factory) {
      key: "pause",
      value: function pause() {
        if (!this.playing || !is$1.function(this.media.pause)) {
-          return;
+          return null;
        }

-        this.media.pause();
+        return this.media.pause();
      }
      /**
       * Get playing state
@@ -8157,10 +8250,10 @@ typeof navigator === "object" && (function (global, factory) {
        var toggle = is$1.boolean(input) ? input : !this.playing;

        if (toggle) {
-          this.play();
-        } else {
-          this.pause();
+          return this.play();
        }
+
+        return this.pause();
      }
      /**
       * Stop playback
@@ -8193,7 +8286,7 @@ typeof navigator === "object" && (function (global, factory) {
    }, {
      key: "rewind",
      value: function rewind(seekTime) {
-        this.currentTime = this.currentTime - (is$1.number(seekTime) ? seekTime : this.config.seekTime);
+        this.currentTime -= is$1.number(seekTime) ? seekTime : this.config.seekTime;
      }
      /**
       * Fast forward
@@ -8203,7 +8296,7 @@ typeof navigator === "object" && (function (global, factory) {
    }, {
      key: "forward",
      value: function forward(seekTime) {
-        this.currentTime = this.currentTime + (is$1.number(seekTime) ? seekTime : this.config.seekTime);
+        this.currentTime += is$1.number(seekTime) ? seekTime : this.config.seekTime;
      }
      /**
       * Seek to a time
@@ -35,6 +35,40 @@ function _defineProperty(obj, key, value) {
  return obj;
 }

+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
 }
@@ -581,7 +615,6 @@ var browser = {
  isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
 };

-// ==========================================================================
 // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
 // https://www.youtube.com/watch?v=NPM6172J22g

@@ -698,7 +731,7 @@ function triggerEvent(element) {

  var event = new CustomEvent(type, {
    bubbles: bubbles,
-    detail: Object.assign({}, detail, {
+    detail: _objectSpread2({}, detail, {
      plyr: this
    })
  }); // Dispatch the event
@@ -1197,6 +1230,7 @@ function setAspectRatio(input) {
    return {};
  }

+  var wrapper = this.elements.wrapper;
  var ratio = getAspectRatio.call(this, input);

  var _ref = is$1.array(ratio) ? ratio : [0, 0],
@@ -1205,14 +1239,14 @@ function setAspectRatio(input) {
      h = _ref2[1];

  var padding = 100 / w * h;
-  this.elements.wrapper.style.paddingBottom = "".concat(padding, "%"); // For Vimeo we have an extra <div> to hide the standard controls and UI
+  wrapper.style.paddingBottom = "".concat(padding, "%"); // For Vimeo we have an extra <div> to hide the standard controls and UI

  if (this.isVimeo && this.supported.ui) {
    var height = 240;
    var offset = (height - padding) / (height / 50);
    this.media.style.transform = "translateY(-".concat(offset, "%)");
  } else if (this.isHTML5) {
-    this.elements.wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
+    wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
  }

  return {
@@ -1244,7 +1278,12 @@ var html5 = {
  },
  // Get quality levels
  getQualityOptions: function getQualityOptions() {
-    // Get sizes from <source> elements
+    // Whether we're forcing all options (e.g. for streaming)
+    if (this.config.quality.forced) {
+      return this.config.quality.options;
+    } // Get sizes from <source> elements
+
+
    return html5.getSources.call(this).map(function (source) {
      return Number(source.getAttribute('size'));
    }).filter(Boolean);
@@ -1272,37 +1311,46 @@ var html5 = {
        return source && Number(source.getAttribute('size'));
      },
      set: function set(input) {
-        // Get sources
-        var sources = html5.getSources.call(player); // Get first match for requested size
+        // If we're using an an external handler...
+        if (player.config.quality.forced && is$1.function(player.config.quality.onChange)) {
+          player.config.quality.onChange(input);
+        } else {
+          // Get sources
+          var sources = html5.getSources.call(player); // Get first match for requested size

-        var source = sources.find(function (s) {
-          return Number(s.getAttribute('size')) === input;
-        }); // No matching source found
+          var source = sources.find(function (s) {
+            return Number(s.getAttribute('size')) === input;
+          }); // No matching source found

-        if (!source) {
-          return;
-        } // Get current state
+          if (!source) {
+            return;
+          } // Get current state


-        var _player$media = player.media,
-            currentTime = _player$media.currentTime,
-            paused = _player$media.paused,
-            preload = _player$media.preload,
-            readyState = _player$media.readyState; // Set new source
+          var _player$media = player.media,
+              currentTime = _player$media.currentTime,
+              paused = _player$media.paused,
+              preload = _player$media.preload,
+              readyState = _player$media.readyState; // Set new source

-        player.media.src = source.getAttribute('src'); // Prevent loading if preload="none" and the current source isn't loaded (#1044)
+          player.media.src = source.getAttribute('src'); // Prevent loading if preload="none" and the current source isn't loaded (#1044)

-        if (preload !== 'none' || readyState) {
-          // Restore time
-          player.once('loadedmetadata', function () {
-            player.currentTime = currentTime; // Resume playing
+          if (preload !== 'none' || readyState) {
+            // Restore time
+            player.once('loadedmetadata', function () {
+              if (player.currentTime === 0) {
+                return;
+              }

-            if (!paused) {
-              player.play();
-            }
-          }); // Load new source
+              player.currentTime = currentTime; // Resume playing

-          player.media.load();
+              if (!paused) {
+                player.play();
+              }
+            }); // Load new source
+
+            player.media.load();
+          }
        } // Trigger change event


@@ -1673,7 +1721,7 @@ function formatTime() {

  // Bail if the value isn't a number
  if (!is$1.number(time)) {
-    return formatTime(null, displayHours, inverted);
+    return formatTime(undefined, displayHours, inverted);
  } // Format time component to add leading zero


@@ -1782,9 +1830,11 @@ var controls = {
  createLabel: function createLabel(key) {
    var attr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var text = i18n.get(key, this.config);
-    var attributes = Object.assign({}, attr, {
+
+    var attributes = _objectSpread2({}, attr, {
      class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' ')
    });
+
    return createElement('span', attributes, text);
  },
  // Create a badge
@@ -1994,7 +2044,7 @@ var controls = {
    var _this2 = this;

    // Navigate through menus via arrow keys and space
-    on(menuItem, 'keydown keyup', function (event) {
+    on.call(this, menuItem, 'keydown keyup', function (event) {
      // We only care about space and ⬆️ ⬇️️ ➡️
      if (![32, 38, 39, 40].includes(event.which)) {
        return;
@@ -2036,7 +2086,7 @@ var controls = {
    }, false); // Enter will fire a `click` event but we still need to manage focus
    // So we bind to keyup which fires after and set focus here

-    on(menuItem, 'keyup', function (event) {
+    on.call(this, menuItem, 'keyup', function (event) {
      if (event.which !== 13) {
        return;
      }
@@ -2874,9 +2924,11 @@ var controls = {
        if (control === 'mute') {
          volume.appendChild(createButton.call(_this10, 'mute'));
        } // Volume range control
+        // Ignored on iOS as it's handled globally
+        // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html


-        if (control === 'volume') {
+        if (control === 'volume' && !browser.isIos) {
          // Set the attributes
          var attributes = {
            max: 1,
@@ -2935,7 +2987,7 @@ var controls = {

          bindMenuItemShortcuts.call(_this10, menuItem, type); // Show menu on click

-          on(menuItem, 'click', function () {
+          on.call(_this10, menuItem, 'click', function () {
            showMenuPanel.call(_this10, type, false);
          });
          var flex = createElement('span', null, i18n.get(type, _this10.config));
@@ -2966,7 +3018,7 @@ var controls = {
            class: _this10.config.classNames.hidden
          }, i18n.get('menuBack', _this10.config))); // Go back via keyboard

-          on(pane, 'keydown', function (event) {
+          on.call(_this10, pane, 'keydown', function (event) {
            // We only care about <-
            if (event.which !== 37) {
              return;
@@ -2979,7 +3031,7 @@ var controls = {
            showMenuPanel.call(_this10, 'home', true);
          }, false); // Go back via button click

-          on(backButton, 'click', function () {
+          on.call(_this10, backButton, 'click', function () {
            showMenuPanel.call(_this10, 'home', false);
          }); // Add to pane

@@ -3641,7 +3693,9 @@ var defaults$1 = {
  // Quality default
  quality: {
    default: 576,
-    options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]
+    options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240],
+    forced: false,
+    onChange: null
  },
  // Set loops
  loop: {
@@ -3718,6 +3772,7 @@ var defaults$1 = {
    frameTitle: 'Player for {title}',
    captions: 'Captions',
    settings: 'Settings',
+    pip: 'PIP',
    menuBack: 'Go back to previous menu',
    speed: 'Speed',
    normal: 'Normal',
@@ -4157,7 +4212,9 @@ function () {
      } else if (!Fullscreen.native || this.forceFallback) {
        toggleFallback.call(this, true);
      } else if (!this.prefix) {
-        this.target.requestFullscreen();
+        this.target.requestFullscreen({
+          navigationUI: "hide"
+        });
      } else if (!is$1.empty(this.prefix)) {
        this.target["".concat(this.prefix, "Request").concat(this.property)]();
      }
@@ -4464,6 +4521,7 @@ var ui = {
      Object.assign(target, {
        pressed: _this3.playing
      });
+      target.setAttribute('aria-label', i18n.get(_this3.playing ? 'pause' : 'play', _this3.config));
    }); // Only update controls on non timeupdate events

    if (is$1.event(event) && event.type === 'timeupdate') {
@@ -4860,19 +4918,15 @@ function () {

      on.call(player, player.media, 'durationchange loadeddata loadedmetadata', function (event) {
        return controls.durationUpdate.call(player, event);
-      }); // Check for audio tracks on load
-      // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
-
-      on.call(player, player.media, 'canplay loadeddata', function () {
-        toggleHidden(elements.volume, !player.hasAudio);
-        toggleHidden(elements.buttons.mute, !player.hasAudio);
      }); // Handle the media finishing

      on.call(player, player.media, 'ended', function () {
        // Show poster on end
        if (player.isHTML5 && player.isVideo && player.config.resetOnEnd) {
          // Restart
-          player.restart();
+          player.restart(); // Call pause otherwise IE11 will start playing the video again
+
+          player.pause();
        }
      }); // Check for buffer progress

@@ -4985,7 +5039,7 @@ function () {
      } // Only call default handler if not prevented in custom handler


-      if (returned && is$1.function(defaultHandler)) {
+      if (returned !== false && is$1.function(defaultHandler)) {
        defaultHandler.call(player, event);
      }
    } // Trigger custom and default handlers
@@ -5865,6 +5919,12 @@ var vimeo = {
        frame.setAttribute('tabindex', -1);
      }
    });
+    player.embed.on('bufferstart', function () {
+      triggerEvent.call(player, player.media, 'waiting');
+    });
+    player.embed.on('bufferend', function () {
+      triggerEvent.call(player, player.media, 'playing');
+    });
    player.embed.on('play', function () {
      assurePlaybackState.call(player, true);
      triggerEvent.call(player, player.media, 'playing');
@@ -6297,6 +6357,11 @@ var youtube = {

              assurePlaybackState$1.call(player, false);
              break;
+
+            case 3:
+              // Trigger waiting event to add loading classes to container as the video buffers.
+              triggerEvent.call(player, player.media, 'waiting');
+              break;
          }

          triggerEvent.call(player, player.elements.container, 'statechange', false, {
@@ -6337,10 +6402,12 @@ var media = {

      wrap(this.media, this.elements.wrapper); // Faux poster container

-      this.elements.poster = createElement('div', {
-        class: this.config.classNames.poster
-      });
-      this.elements.wrapper.appendChild(this.elements.poster);
+      if (this.isEmbed) {
+        this.elements.poster = createElement('div', {
+          class: this.config.classNames.poster
+        });
+        this.elements.wrapper.appendChild(this.elements.poster);
+      }
    }

    if (this.isHTML5) {
@@ -6981,7 +7048,7 @@ function () {
        cb: Date.now(),
        AV_WIDTH: 640,
        AV_HEIGHT: 480,
-        AV_CDIM2: this.publisherId
+        AV_CDIM2: config.publisherId
      };
      var base = 'https://go.aniview.com/api/adserver6/vast/';
      return "".concat(base, "?").concat(buildUrlParams(params));
@@ -7046,6 +7113,21 @@ var parseVtt = function parseVtt(vttDataString) {
 */


+var fitRatio = function fitRatio(ratio, outer) {
+  var targetRatio = outer.width / outer.height;
+  var result = {};
+
+  if (ratio > targetRatio) {
+    result.width = outer.width;
+    result.height = 1 / ratio * outer.width;
+  } else {
+    result.height = outer.height;
+    result.width = ratio * outer.height;
+  }
+
+  return result;
+};
+
 var PreviewThumbnails =
 /*#__PURE__*/
 function () {
@@ -7590,9 +7672,15 @@ function () {
  }, {
    key: "setScrubbingContainerSize",
    value: function setScrubbingContainerSize() {
-      this.elements.scrubbing.container.style.width = "".concat(this.player.media.clientWidth, "px"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below
+      var _fitRatio = fitRatio(this.thumbAspectRatio, {
+        width: this.player.media.clientWidth,
+        height: this.player.media.clientHeight
+      }),
+          width = _fitRatio.width,
+          height = _fitRatio.height;

-      this.elements.scrubbing.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px");
+      this.elements.scrubbing.container.style.width = "".concat(width, "px");
+      this.elements.scrubbing.container.style.height = "".concat(height, "px");
    } // Sprites need to be offset to the correct location

  }, {
@@ -7605,9 +7693,9 @@ function () {

      var multiplier = this.thumbContainerHeight / frame.h; // eslint-disable-next-line no-param-reassign

-      previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * multiplier), "px"); // eslint-disable-next-line no-param-reassign
+      previewImage.style.height = "".concat(previewImage.naturalHeight * multiplier, "px"); // eslint-disable-next-line no-param-reassign

-      previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * multiplier), "px"); // eslint-disable-next-line no-param-reassign
+      previewImage.style.width = "".concat(previewImage.naturalWidth * multiplier, "px"); // eslint-disable-next-line no-param-reassign

      previewImage.style.left = "-".concat(frame.x * multiplier, "px"); // eslint-disable-next-line no-param-reassign

@@ -7645,8 +7733,13 @@ function () {
    key: "thumbContainerHeight",
    get: function get() {
      if (this.mouseDown) {
-        // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below
-        return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio);
+        var _fitRatio2 = fitRatio(this.thumbAspectRatio, {
+          width: this.player.media.clientWidth,
+          height: this.player.media.clientHeight
+        }),
+            height = _fitRatio2.height;
+
+        return height;
      }

      return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@@ -8130,10 +8223,10 @@ function () {
    key: "pause",
    value: function pause() {
      if (!this.playing || !is$1.function(this.media.pause)) {
-        return;
+        return null;
      }

-      this.media.pause();
+      return this.media.pause();
    }
    /**
     * Get playing state
@@ -8151,10 +8244,10 @@ function () {
      var toggle = is$1.boolean(input) ? input : !this.playing;

      if (toggle) {
-        this.play();
-      } else {
-        this.pause();
+        return this.play();
      }
+
+      return this.pause();
    }
    /**
     * Stop playback
@@ -8187,7 +8280,7 @@ function () {
  }, {
    key: "rewind",
    value: function rewind(seekTime) {
-      this.currentTime = this.currentTime - (is$1.number(seekTime) ? seekTime : this.config.seekTime);
+      this.currentTime -= is$1.number(seekTime) ? seekTime : this.config.seekTime;
    }
    /**
     * Fast forward
@@ -8197,7 +8290,7 @@ function () {
  }, {
    key: "forward",
    value: function forward(seekTime) {
-      this.currentTime = this.currentTime + (is$1.number(seekTime) ? seekTime : this.config.seekTime);
+      this.currentTime += is$1.number(seekTime) ? seekTime : this.config.seekTime;
    }
    /**
     * Seek to a time
@@ -269,7 +269,7 @@ typeof navigator === "object" && (function (global, factory) {
  (module.exports = function (key, value) {
    return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
  })('versions', []).push({
-    version: '3.6.3',
+    version: '3.6.4',
    mode:  'global',
    copyright: '© 2020 Denis Pushkarev (zloirock.ru)'
  });
@@ -1195,28 +1195,25 @@ typeof navigator === "object" && (function (global, factory) {
  };

  var defineProperty$3 = Object.defineProperty;
+  var cache = {};

  var thrower = function (it) { throw it; };

  var arrayMethodUsesToLength = function (METHOD_NAME, options) {
+    if (has(cache, METHOD_NAME)) return cache[METHOD_NAME];
    if (!options) options = {};
    var method = [][METHOD_NAME];
    var ACCESSORS = has(options, 'ACCESSORS') ? options.ACCESSORS : false;
    var argument0 = has(options, 0) ? options[0] : thrower;
    var argument1 = has(options, 1) ? options[1] : undefined;

-    return !!method && !fails(function () {
+    return cache[METHOD_NAME] = !!method && !fails(function () {
      if (ACCESSORS && !descriptors) return true;
      var O = { length: -1 };

-      var addTrap = function (key) {
-        if (ACCESSORS) defineProperty$3(O, key, { enumerable: true, get: thrower });
-        else O[key] = 1;
-      };
+      if (ACCESSORS) defineProperty$3(O, 1, { enumerable: true, get: thrower });
+      else O[1] = 1;

-      addTrap(1);
-      addTrap(2147483646);
-      addTrap(4294967294);
      method.call(O, argument0, argument1);
    });
  };
@@ -4090,6 +4087,40 @@ typeof navigator === "object" && (function (global, factory) {
    return obj;
  }

+  function ownKeys$1(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+
+      if (i % 2) {
+        ownKeys$1(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys$1(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+
+    return target;
+  }
+
  function _slicedToArray(arr, i) {
    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
  }
@@ -4416,7 +4447,7 @@ typeof navigator === "object" && (function (global, factory) {
    var checkIfURLIsSupported = function checkIfURLIsSupported() {
      try {
        var u = new global.URL('b', 'http://a');
-        u.pathname = 'c%20d';
+        u.pathname = 'c d';
        return u.href === 'http://a/c%20d' && u.searchParams;
      } catch (e) {
        return false;
@@ -6851,7 +6882,7 @@ typeof navigator === "object" && (function (global, factory) {

    var event = new CustomEvent(type, {
      bubbles: bubbles,
-      detail: Object.assign({}, detail, {
+      detail: _objectSpread2({}, detail, {
        plyr: this
      })
    }); // Dispatch the event
@@ -7401,6 +7432,7 @@ typeof navigator === "object" && (function (global, factory) {
      return {};
    }

+    var wrapper = this.elements.wrapper;
    var ratio = getAspectRatio.call(this, input);

    var _ref = is$1.array(ratio) ? ratio : [0, 0],
@@ -7409,14 +7441,14 @@ typeof navigator === "object" && (function (global, factory) {
        h = _ref2[1];

    var padding = 100 / w * h;
-    this.elements.wrapper.style.paddingBottom = "".concat(padding, "%"); // For Vimeo we have an extra <div> to hide the standard controls and UI
+    wrapper.style.paddingBottom = "".concat(padding, "%"); // For Vimeo we have an extra <div> to hide the standard controls and UI

    if (this.isVimeo && this.supported.ui) {
      var height = 240;
      var offset = (height - padding) / (height / 50);
      this.media.style.transform = "translateY(-".concat(offset, "%)");
    } else if (this.isHTML5) {
-      this.elements.wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
+      wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
    }

    return {
@@ -7447,7 +7479,12 @@ typeof navigator === "object" && (function (global, factory) {
    },
    // Get quality levels
    getQualityOptions: function getQualityOptions() {
-      // Get sizes from <source> elements
+      // Whether we're forcing all options (e.g. for streaming)
+      if (this.config.quality.forced) {
+        return this.config.quality.options;
+      } // Get sizes from <source> elements
+
+
      return html5.getSources.call(this).map(function (source) {
        return Number(source.getAttribute('size'));
      }).filter(Boolean);
@@ -7475,37 +7512,46 @@ typeof navigator === "object" && (function (global, factory) {
          return source && Number(source.getAttribute('size'));
        },
        set: function set(input) {
-          // Get sources
-          var sources = html5.getSources.call(player); // Get first match for requested size
+          // If we're using an an external handler...
+          if (player.config.quality.forced && is$1.function(player.config.quality.onChange)) {
+            player.config.quality.onChange(input);
+          } else {
+            // Get sources
+            var sources = html5.getSources.call(player); // Get first match for requested size

-          var source = sources.find(function (s) {
-            return Number(s.getAttribute('size')) === input;
-          }); // No matching source found
+            var source = sources.find(function (s) {
+              return Number(s.getAttribute('size')) === input;
+            }); // No matching source found

-          if (!source) {
-            return;
-          } // Get current state
+            if (!source) {
+              return;
+            } // Get current state


-          var _player$media = player.media,
-              currentTime = _player$media.currentTime,
-              paused = _player$media.paused,
-              preload = _player$media.preload,
-              readyState = _player$media.readyState; // Set new source
+            var _player$media = player.media,
+                currentTime = _player$media.currentTime,
+                paused = _player$media.paused,
+                preload = _player$media.preload,
+                readyState = _player$media.readyState; // Set new source

-          player.media.src = source.getAttribute('src'); // Prevent loading if preload="none" and the current source isn't loaded (#1044)
+            player.media.src = source.getAttribute('src'); // Prevent loading if preload="none" and the current source isn't loaded (#1044)

-          if (preload !== 'none' || readyState) {
-            // Restore time
-            player.once('loadedmetadata', function () {
-              player.currentTime = currentTime; // Resume playing
+            if (preload !== 'none' || readyState) {
+              // Restore time
+              player.once('loadedmetadata', function () {
+                if (player.currentTime === 0) {
+                  return;
+                }

-              if (!paused) {
-                player.play();
-              }
-            }); // Load new source
+                player.currentTime = currentTime; // Resume playing

-            player.media.load();
+                if (!paused) {
+                  player.play();
+                }
+              }); // Load new source
+
+              player.media.load();
+            }
          } // Trigger change event


@@ -7962,7 +8008,7 @@ typeof navigator === "object" && (function (global, factory) {

    // Bail if the value isn't a number
    if (!is$1.number(time)) {
-      return formatTime(null, displayHours, inverted);
+      return formatTime(undefined, displayHours, inverted);
    } // Format time component to add leading zero


@@ -8071,9 +8117,11 @@ typeof navigator === "object" && (function (global, factory) {
    createLabel: function createLabel(key) {
      var attr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      var text = i18n.get(key, this.config);
-      var attributes = Object.assign({}, attr, {
+
+      var attributes = _objectSpread2({}, attr, {
        class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' ')
      });
+
      return createElement('span', attributes, text);
    },
    // Create a badge
@@ -8283,7 +8331,7 @@ typeof navigator === "object" && (function (global, factory) {
      var _this2 = this;

      // Navigate through menus via arrow keys and space
-      on(menuItem, 'keydown keyup', function (event) {
+      on.call(this, menuItem, 'keydown keyup', function (event) {
        // We only care about space and ⬆️ ⬇️️ ➡️
        if (![32, 38, 39, 40].includes(event.which)) {
          return;
@@ -8325,7 +8373,7 @@ typeof navigator === "object" && (function (global, factory) {
      }, false); // Enter will fire a `click` event but we still need to manage focus
      // So we bind to keyup which fires after and set focus here

-      on(menuItem, 'keyup', function (event) {
+      on.call(this, menuItem, 'keyup', function (event) {
        if (event.which !== 13) {
          return;
        }
@@ -9163,9 +9211,11 @@ typeof navigator === "object" && (function (global, factory) {
          if (control === 'mute') {
            volume.appendChild(createButton.call(_this10, 'mute'));
          } // Volume range control
+          // Ignored on iOS as it's handled globally
+          // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html


-          if (control === 'volume') {
+          if (control === 'volume' && !browser.isIos) {
            // Set the attributes
            var attributes = {
              max: 1,
@@ -9224,7 +9274,7 @@ typeof navigator === "object" && (function (global, factory) {

            bindMenuItemShortcuts.call(_this10, menuItem, type); // Show menu on click

-            on(menuItem, 'click', function () {
+            on.call(_this10, menuItem, 'click', function () {
              showMenuPanel.call(_this10, type, false);
            });
            var flex = createElement('span', null, i18n.get(type, _this10.config));
@@ -9255,7 +9305,7 @@ typeof navigator === "object" && (function (global, factory) {
              class: _this10.config.classNames.hidden
            }, i18n.get('menuBack', _this10.config))); // Go back via keyboard

-            on(pane, 'keydown', function (event) {
+            on.call(_this10, pane, 'keydown', function (event) {
              // We only care about <-
              if (event.which !== 37) {
                return;
@@ -9268,7 +9318,7 @@ typeof navigator === "object" && (function (global, factory) {
              showMenuPanel.call(_this10, 'home', true);
            }, false); // Go back via button click

-            on(backButton, 'click', function () {
+            on.call(_this10, backButton, 'click', function () {
              showMenuPanel.call(_this10, 'home', false);
            }); // Add to pane

@@ -9930,7 +9980,9 @@ typeof navigator === "object" && (function (global, factory) {
    // Quality default
    quality: {
      default: 576,
-      options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]
+      options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240],
+      forced: false,
+      onChange: null
    },
    // Set loops
    loop: {
@@ -10007,6 +10059,7 @@ typeof navigator === "object" && (function (global, factory) {
      frameTitle: 'Player for {title}',
      captions: 'Captions',
      settings: 'Settings',
+      pip: 'PIP',
      menuBack: 'Go back to previous menu',
      speed: 'Speed',
      normal: 'Normal',
@@ -10446,7 +10499,9 @@ typeof navigator === "object" && (function (global, factory) {
        } else if (!Fullscreen.native || this.forceFallback) {
          toggleFallback.call(this, true);
        } else if (!this.prefix) {
-          this.target.requestFullscreen();
+          this.target.requestFullscreen({
+            navigationUI: "hide"
+          });
        } else if (!is$1.empty(this.prefix)) {
          this.target["".concat(this.prefix, "Request").concat(this.property)]();
        }
@@ -10765,6 +10820,7 @@ typeof navigator === "object" && (function (global, factory) {
        Object.assign(target, {
          pressed: _this3.playing
        });
+        target.setAttribute('aria-label', i18n.get(_this3.playing ? 'pause' : 'play', _this3.config));
      }); // Only update controls on non timeupdate events

      if (is$1.event(event) && event.type === 'timeupdate') {
@@ -11161,19 +11217,15 @@ typeof navigator === "object" && (function (global, factory) {

        on.call(player, player.media, 'durationchange loadeddata loadedmetadata', function (event) {
          return controls.durationUpdate.call(player, event);
-        }); // Check for audio tracks on load
-        // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
-
-        on.call(player, player.media, 'canplay loadeddata', function () {
-          toggleHidden(elements.volume, !player.hasAudio);
-          toggleHidden(elements.buttons.mute, !player.hasAudio);
        }); // Handle the media finishing

        on.call(player, player.media, 'ended', function () {
          // Show poster on end
          if (player.isHTML5 && player.isVideo && player.config.resetOnEnd) {
            // Restart
-            player.restart();
+            player.restart(); // Call pause otherwise IE11 will start playing the video again
+
+            player.pause();
          }
        }); // Check for buffer progress

@@ -11286,7 +11338,7 @@ typeof navigator === "object" && (function (global, factory) {
        } // Only call default handler if not prevented in custom handler


-        if (returned && is$1.function(defaultHandler)) {
+        if (returned !== false && is$1.function(defaultHandler)) {
          defaultHandler.call(player, event);
        }
      } // Trigger custom and default handlers
@@ -12241,6 +12293,12 @@ typeof navigator === "object" && (function (global, factory) {
          frame.setAttribute('tabindex', -1);
        }
      });
+      player.embed.on('bufferstart', function () {
+        triggerEvent.call(player, player.media, 'waiting');
+      });
+      player.embed.on('bufferend', function () {
+        triggerEvent.call(player, player.media, 'playing');
+      });
      player.embed.on('play', function () {
        assurePlaybackState.call(player, true);
        triggerEvent.call(player, player.media, 'playing');
@@ -12671,6 +12729,11 @@ typeof navigator === "object" && (function (global, factory) {

                assurePlaybackState$1.call(player, false);
                break;
+
+              case 3:
+                // Trigger waiting event to add loading classes to container as the video buffers.
+                triggerEvent.call(player, player.media, 'waiting');
+                break;
            }

            triggerEvent.call(player, player.elements.container, 'statechange', false, {
@@ -12710,10 +12773,12 @@ typeof navigator === "object" && (function (global, factory) {

        wrap$1(this.media, this.elements.wrapper); // Faux poster container

-        this.elements.poster = createElement('div', {
-          class: this.config.classNames.poster
-        });
-        this.elements.wrapper.appendChild(this.elements.poster);
+        if (this.isEmbed) {
+          this.elements.poster = createElement('div', {
+            class: this.config.classNames.poster
+          });
+          this.elements.wrapper.appendChild(this.elements.poster);
+        }
      }

      if (this.isHTML5) {
@@ -13354,7 +13419,7 @@ typeof navigator === "object" && (function (global, factory) {
          cb: Date.now(),
          AV_WIDTH: 640,
          AV_HEIGHT: 480,
-          AV_CDIM2: this.publisherId
+          AV_CDIM2: config.publisherId
        };
        var base = 'https://go.aniview.com/api/adserver6/vast/';
        return "".concat(base, "?").concat(buildUrlParams(params));
@@ -13391,7 +13456,8 @@ typeof navigator === "object" && (function (global, factory) {
  var nativeLastIndexOf = [].lastIndexOf;
  var NEGATIVE_ZERO$1 = !!nativeLastIndexOf && 1 / [1].lastIndexOf(1, -0) < 0;
  var STRICT_METHOD$6 = arrayMethodIsStrict('lastIndexOf');
-  var USES_TO_LENGTH$c = arrayMethodUsesToLength('lastIndexOf', { ACCESSORS: true, 1: 2147483647 });
+  // For preventing possible almost infinite loop in non-standard implementations, test the forward version of the method
+  var USES_TO_LENGTH$c = arrayMethodUsesToLength('indexOf', { ACCESSORS: true, 1: 0 });
  var FORCED$4 = NEGATIVE_ZERO$1 || !STRICT_METHOD$6 || !USES_TO_LENGTH$c;

  // `Array.prototype.lastIndexOf` method implementation
@@ -13469,6 +13535,21 @@ typeof navigator === "object" && (function (global, factory) {
   */


+  var fitRatio = function fitRatio(ratio, outer) {
+    var targetRatio = outer.width / outer.height;
+    var result = {};
+
+    if (ratio > targetRatio) {
+      result.width = outer.width;
+      result.height = 1 / ratio * outer.width;
+    } else {
+      result.height = outer.height;
+      result.width = ratio * outer.height;
+    }
+
+    return result;
+  };
+
  var PreviewThumbnails =
  /*#__PURE__*/
  function () {
@@ -14013,9 +14094,15 @@ typeof navigator === "object" && (function (global, factory) {
    }, {
      key: "setScrubbingContainerSize",
      value: function setScrubbingContainerSize() {
-        this.elements.scrubbing.container.style.width = "".concat(this.player.media.clientWidth, "px"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below
+        var _fitRatio = fitRatio(this.thumbAspectRatio, {
+          width: this.player.media.clientWidth,
+          height: this.player.media.clientHeight
+        }),
+            width = _fitRatio.width,
+            height = _fitRatio.height;

-        this.elements.scrubbing.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px");
+        this.elements.scrubbing.container.style.width = "".concat(width, "px");
+        this.elements.scrubbing.container.style.height = "".concat(height, "px");
      } // Sprites need to be offset to the correct location

    }, {
@@ -14028,9 +14115,9 @@ typeof navigator === "object" && (function (global, factory) {

        var multiplier = this.thumbContainerHeight / frame.h; // eslint-disable-next-line no-param-reassign

-        previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * multiplier), "px"); // eslint-disable-next-line no-param-reassign
+        previewImage.style.height = "".concat(previewImage.naturalHeight * multiplier, "px"); // eslint-disable-next-line no-param-reassign

-        previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * multiplier), "px"); // eslint-disable-next-line no-param-reassign
+        previewImage.style.width = "".concat(previewImage.naturalWidth * multiplier, "px"); // eslint-disable-next-line no-param-reassign

        previewImage.style.left = "-".concat(frame.x * multiplier, "px"); // eslint-disable-next-line no-param-reassign

@@ -14068,8 +14155,13 @@ typeof navigator === "object" && (function (global, factory) {
      key: "thumbContainerHeight",
      get: function get() {
        if (this.mouseDown) {
-          // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below
-          return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio);
+          var _fitRatio2 = fitRatio(this.thumbAspectRatio, {
+            width: this.player.media.clientWidth,
+            height: this.player.media.clientHeight
+          }),
+              height = _fitRatio2.height;
+
+          return height;
        }

        return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@@ -14553,10 +14645,10 @@ typeof navigator === "object" && (function (global, factory) {
      key: "pause",
      value: function pause() {
        if (!this.playing || !is$1.function(this.media.pause)) {
-          return;
+          return null;
        }

-        this.media.pause();
+        return this.media.pause();
      }
      /**
       * Get playing state
@@ -14574,10 +14666,10 @@ typeof navigator === "object" && (function (global, factory) {
        var toggle = is$1.boolean(input) ? input : !this.playing;

        if (toggle) {
-          this.play();
-        } else {
-          this.pause();
+          return this.play();
        }
+
+        return this.pause();
      }
      /**
       * Stop playback
@@ -14610,7 +14702,7 @@ typeof navigator === "object" && (function (global, factory) {
    }, {
      key: "rewind",
      value: function rewind(seekTime) {
-        this.currentTime = this.currentTime - (is$1.number(seekTime) ? seekTime : this.config.seekTime);
+        this.currentTime -= is$1.number(seekTime) ? seekTime : this.config.seekTime;
      }
      /**
       * Fast forward
@@ -14620,7 +14712,7 @@ typeof navigator === "object" && (function (global, factory) {
    }, {
      key: "forward",
      value: function forward(seekTime) {
-        this.currentTime = this.currentTime + (is$1.number(seekTime) ? seekTime : this.config.seekTime);
+        this.currentTime += is$1.number(seekTime) ? seekTime : this.config.seekTime;
      }
      /**
       * Seek to a time
@@ -263,7 +263,7 @@ var shared = createCommonjsModule(function (module) {
 (module.exports = function (key, value) {
  return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.6.3',
+  version: '3.6.4',
  mode:  'global',
  copyright: '© 2020 Denis Pushkarev (zloirock.ru)'
 });
@@ -1189,28 +1189,25 @@ var arrayMethodIsStrict = function (METHOD_NAME, argument) {
 };

 var defineProperty$3 = Object.defineProperty;
+var cache = {};

 var thrower = function (it) { throw it; };

 var arrayMethodUsesToLength = function (METHOD_NAME, options) {
+  if (has(cache, METHOD_NAME)) return cache[METHOD_NAME];
  if (!options) options = {};
  var method = [][METHOD_NAME];
  var ACCESSORS = has(options, 'ACCESSORS') ? options.ACCESSORS : false;
  var argument0 = has(options, 0) ? options[0] : thrower;
  var argument1 = has(options, 1) ? options[1] : undefined;

-  return !!method && !fails(function () {
+  return cache[METHOD_NAME] = !!method && !fails(function () {
    if (ACCESSORS && !descriptors) return true;
    var O = { length: -1 };

-    var addTrap = function (key) {
-      if (ACCESSORS) defineProperty$3(O, key, { enumerable: true, get: thrower });
-      else O[key] = 1;
-    };
+    if (ACCESSORS) defineProperty$3(O, 1, { enumerable: true, get: thrower });
+    else O[1] = 1;

-    addTrap(1);
-    addTrap(2147483646);
-    addTrap(4294967294);
    method.call(O, argument0, argument1);
  });
 };
@@ -4084,6 +4081,40 @@ function _defineProperty(obj, key, value) {
  return obj;
 }

+function ownKeys$1(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys$1(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys$1(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
 }
@@ -4410,7 +4441,7 @@ function _nonIterableRest() {
  var checkIfURLIsSupported = function checkIfURLIsSupported() {
    try {
      var u = new global.URL('b', 'http://a');
-      u.pathname = 'c%20d';
+      u.pathname = 'c d';
      return u.href === 'http://a/c%20d' && u.searchParams;
    } catch (e) {
      return false;
@@ -6845,7 +6876,7 @@ function triggerEvent(element) {

  var event = new CustomEvent(type, {
    bubbles: bubbles,
-    detail: Object.assign({}, detail, {
+    detail: _objectSpread2({}, detail, {
      plyr: this
    })
  }); // Dispatch the event
@@ -7395,6 +7426,7 @@ function setAspectRatio(input) {
    return {};
  }

+  var wrapper = this.elements.wrapper;
  var ratio = getAspectRatio.call(this, input);

  var _ref = is$1.array(ratio) ? ratio : [0, 0],
@@ -7403,14 +7435,14 @@ function setAspectRatio(input) {
      h = _ref2[1];

  var padding = 100 / w * h;
-  this.elements.wrapper.style.paddingBottom = "".concat(padding, "%"); // For Vimeo we have an extra <div> to hide the standard controls and UI
+  wrapper.style.paddingBottom = "".concat(padding, "%"); // For Vimeo we have an extra <div> to hide the standard controls and UI

  if (this.isVimeo && this.supported.ui) {
    var height = 240;
    var offset = (height - padding) / (height / 50);
    this.media.style.transform = "translateY(-".concat(offset, "%)");
  } else if (this.isHTML5) {
-    this.elements.wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
+    wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
  }

  return {
@@ -7441,7 +7473,12 @@ var html5 = {
  },
  // Get quality levels
  getQualityOptions: function getQualityOptions() {
-    // Get sizes from <source> elements
+    // Whether we're forcing all options (e.g. for streaming)
+    if (this.config.quality.forced) {
+      return this.config.quality.options;
+    } // Get sizes from <source> elements
+
+
    return html5.getSources.call(this).map(function (source) {
      return Number(source.getAttribute('size'));
    }).filter(Boolean);
@@ -7469,37 +7506,46 @@ var html5 = {
        return source && Number(source.getAttribute('size'));
      },
      set: function set(input) {
-        // Get sources
-        var sources = html5.getSources.call(player); // Get first match for requested size
+        // If we're using an an external handler...
+        if (player.config.quality.forced && is$1.function(player.config.quality.onChange)) {
+          player.config.quality.onChange(input);
+        } else {
+          // Get sources
+          var sources = html5.getSources.call(player); // Get first match for requested size

-        var source = sources.find(function (s) {
-          return Number(s.getAttribute('size')) === input;
-        }); // No matching source found
+          var source = sources.find(function (s) {
+            return Number(s.getAttribute('size')) === input;
+          }); // No matching source found

-        if (!source) {
-          return;
-        } // Get current state
+          if (!source) {
+            return;
+          } // Get current state


-        var _player$media = player.media,
-            currentTime = _player$media.currentTime,
-            paused = _player$media.paused,
-            preload = _player$media.preload,
-            readyState = _player$media.readyState; // Set new source
+          var _player$media = player.media,
+              currentTime = _player$media.currentTime,
+              paused = _player$media.paused,
+              preload = _player$media.preload,
+              readyState = _player$media.readyState; // Set new source

-        player.media.src = source.getAttribute('src'); // Prevent loading if preload="none" and the current source isn't loaded (#1044)
+          player.media.src = source.getAttribute('src'); // Prevent loading if preload="none" and the current source isn't loaded (#1044)

-        if (preload !== 'none' || readyState) {
-          // Restore time
-          player.once('loadedmetadata', function () {
-            player.currentTime = currentTime; // Resume playing
+          if (preload !== 'none' || readyState) {
+            // Restore time
+            player.once('loadedmetadata', function () {
+              if (player.currentTime === 0) {
+                return;
+              }

-            if (!paused) {
-              player.play();
-            }
-          }); // Load new source
+              player.currentTime = currentTime; // Resume playing

-          player.media.load();
+              if (!paused) {
+                player.play();
+              }
+            }); // Load new source
+
+            player.media.load();
+          }
        } // Trigger change event


@@ -7956,7 +8002,7 @@ function formatTime() {

  // Bail if the value isn't a number
  if (!is$1.number(time)) {
-    return formatTime(null, displayHours, inverted);
+    return formatTime(undefined, displayHours, inverted);
  } // Format time component to add leading zero


@@ -8065,9 +8111,11 @@ var controls = {
  createLabel: function createLabel(key) {
    var attr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var text = i18n.get(key, this.config);
-    var attributes = Object.assign({}, attr, {
+
+    var attributes = _objectSpread2({}, attr, {
      class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' ')
    });
+
    return createElement('span', attributes, text);
  },
  // Create a badge
@@ -8277,7 +8325,7 @@ var controls = {
    var _this2 = this;

    // Navigate through menus via arrow keys and space
-    on(menuItem, 'keydown keyup', function (event) {
+    on.call(this, menuItem, 'keydown keyup', function (event) {
      // We only care about space and ⬆️ ⬇️️ ➡️
      if (![32, 38, 39, 40].includes(event.which)) {
        return;
@@ -8319,7 +8367,7 @@ var controls = {
    }, false); // Enter will fire a `click` event but we still need to manage focus
    // So we bind to keyup which fires after and set focus here

-    on(menuItem, 'keyup', function (event) {
+    on.call(this, menuItem, 'keyup', function (event) {
      if (event.which !== 13) {
        return;
      }
@@ -9157,9 +9205,11 @@ var controls = {
        if (control === 'mute') {
          volume.appendChild(createButton.call(_this10, 'mute'));
        } // Volume range control
+        // Ignored on iOS as it's handled globally
+        // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html


-        if (control === 'volume') {
+        if (control === 'volume' && !browser.isIos) {
          // Set the attributes
          var attributes = {
            max: 1,
@@ -9218,7 +9268,7 @@ var controls = {

          bindMenuItemShortcuts.call(_this10, menuItem, type); // Show menu on click

-          on(menuItem, 'click', function () {
+          on.call(_this10, menuItem, 'click', function () {
            showMenuPanel.call(_this10, type, false);
          });
          var flex = createElement('span', null, i18n.get(type, _this10.config));
@@ -9249,7 +9299,7 @@ var controls = {
            class: _this10.config.classNames.hidden
          }, i18n.get('menuBack', _this10.config))); // Go back via keyboard

-          on(pane, 'keydown', function (event) {
+          on.call(_this10, pane, 'keydown', function (event) {
            // We only care about <-
            if (event.which !== 37) {
              return;
@@ -9262,7 +9312,7 @@ var controls = {
            showMenuPanel.call(_this10, 'home', true);
          }, false); // Go back via button click

-          on(backButton, 'click', function () {
+          on.call(_this10, backButton, 'click', function () {
            showMenuPanel.call(_this10, 'home', false);
          }); // Add to pane

@@ -9924,7 +9974,9 @@ var defaults$1 = {
  // Quality default
  quality: {
    default: 576,
-    options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]
+    options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240],
+    forced: false,
+    onChange: null
  },
  // Set loops
  loop: {
@@ -10001,6 +10053,7 @@ var defaults$1 = {
    frameTitle: 'Player for {title}',
    captions: 'Captions',
    settings: 'Settings',
+    pip: 'PIP',
    menuBack: 'Go back to previous menu',
    speed: 'Speed',
    normal: 'Normal',
@@ -10440,7 +10493,9 @@ function () {
      } else if (!Fullscreen.native || this.forceFallback) {
        toggleFallback.call(this, true);
      } else if (!this.prefix) {
-        this.target.requestFullscreen();
+        this.target.requestFullscreen({
+          navigationUI: "hide"
+        });
      } else if (!is$1.empty(this.prefix)) {
        this.target["".concat(this.prefix, "Request").concat(this.property)]();
      }
@@ -10759,6 +10814,7 @@ var ui = {
      Object.assign(target, {
        pressed: _this3.playing
      });
+      target.setAttribute('aria-label', i18n.get(_this3.playing ? 'pause' : 'play', _this3.config));
    }); // Only update controls on non timeupdate events

    if (is$1.event(event) && event.type === 'timeupdate') {
@@ -11155,19 +11211,15 @@ function () {

      on.call(player, player.media, 'durationchange loadeddata loadedmetadata', function (event) {
        return controls.durationUpdate.call(player, event);
-      }); // Check for audio tracks on load
-      // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
-
-      on.call(player, player.media, 'canplay loadeddata', function () {
-        toggleHidden(elements.volume, !player.hasAudio);
-        toggleHidden(elements.buttons.mute, !player.hasAudio);
      }); // Handle the media finishing

      on.call(player, player.media, 'ended', function () {
        // Show poster on end
        if (player.isHTML5 && player.isVideo && player.config.resetOnEnd) {
          // Restart
-          player.restart();
+          player.restart(); // Call pause otherwise IE11 will start playing the video again
+
+          player.pause();
        }
      }); // Check for buffer progress

@@ -11280,7 +11332,7 @@ function () {
      } // Only call default handler if not prevented in custom handler


-      if (returned && is$1.function(defaultHandler)) {
+      if (returned !== false && is$1.function(defaultHandler)) {
        defaultHandler.call(player, event);
      }
    } // Trigger custom and default handlers
@@ -12235,6 +12287,12 @@ var vimeo = {
        frame.setAttribute('tabindex', -1);
      }
    });
+    player.embed.on('bufferstart', function () {
+      triggerEvent.call(player, player.media, 'waiting');
+    });
+    player.embed.on('bufferend', function () {
+      triggerEvent.call(player, player.media, 'playing');
+    });
    player.embed.on('play', function () {
      assurePlaybackState.call(player, true);
      triggerEvent.call(player, player.media, 'playing');
@@ -12665,6 +12723,11 @@ var youtube = {

              assurePlaybackState$1.call(player, false);
              break;
+
+            case 3:
+              // Trigger waiting event to add loading classes to container as the video buffers.
+              triggerEvent.call(player, player.media, 'waiting');
+              break;
          }

          triggerEvent.call(player, player.elements.container, 'statechange', false, {
@@ -12704,10 +12767,12 @@ var media = {

      wrap$1(this.media, this.elements.wrapper); // Faux poster container

-      this.elements.poster = createElement('div', {
-        class: this.config.classNames.poster
-      });
-      this.elements.wrapper.appendChild(this.elements.poster);
+      if (this.isEmbed) {
+        this.elements.poster = createElement('div', {
+          class: this.config.classNames.poster
+        });
+        this.elements.wrapper.appendChild(this.elements.poster);
+      }
    }

    if (this.isHTML5) {
@@ -13348,7 +13413,7 @@ function () {
        cb: Date.now(),
        AV_WIDTH: 640,
        AV_HEIGHT: 480,
-        AV_CDIM2: this.publisherId
+        AV_CDIM2: config.publisherId
      };
      var base = 'https://go.aniview.com/api/adserver6/vast/';
      return "".concat(base, "?").concat(buildUrlParams(params));
@@ -13385,7 +13450,8 @@ var min$6 = Math.min;
 var nativeLastIndexOf = [].lastIndexOf;
 var NEGATIVE_ZERO$1 = !!nativeLastIndexOf && 1 / [1].lastIndexOf(1, -0) < 0;
 var STRICT_METHOD$6 = arrayMethodIsStrict('lastIndexOf');
-var USES_TO_LENGTH$c = arrayMethodUsesToLength('lastIndexOf', { ACCESSORS: true, 1: 2147483647 });
+// For preventing possible almost infinite loop in non-standard implementations, test the forward version of the method
+var USES_TO_LENGTH$c = arrayMethodUsesToLength('indexOf', { ACCESSORS: true, 1: 0 });
 var FORCED$4 = NEGATIVE_ZERO$1 || !STRICT_METHOD$6 || !USES_TO_LENGTH$c;

 // `Array.prototype.lastIndexOf` method implementation
@@ -13463,6 +13529,21 @@ var parseVtt = function parseVtt(vttDataString) {
 */


+var fitRatio = function fitRatio(ratio, outer) {
+  var targetRatio = outer.width / outer.height;
+  var result = {};
+
+  if (ratio > targetRatio) {
+    result.width = outer.width;
+    result.height = 1 / ratio * outer.width;
+  } else {
+    result.height = outer.height;
+    result.width = ratio * outer.height;
+  }
+
+  return result;
+};
+
 var PreviewThumbnails =
 /*#__PURE__*/
 function () {
@@ -14007,9 +14088,15 @@ function () {
  }, {
    key: "setScrubbingContainerSize",
    value: function setScrubbingContainerSize() {
-      this.elements.scrubbing.container.style.width = "".concat(this.player.media.clientWidth, "px"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below
+      var _fitRatio = fitRatio(this.thumbAspectRatio, {
+        width: this.player.media.clientWidth,
+        height: this.player.media.clientHeight
+      }),
+          width = _fitRatio.width,
+          height = _fitRatio.height;

-      this.elements.scrubbing.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px");
+      this.elements.scrubbing.container.style.width = "".concat(width, "px");
+      this.elements.scrubbing.container.style.height = "".concat(height, "px");
    } // Sprites need to be offset to the correct location

  }, {
@@ -14022,9 +14109,9 @@ function () {

      var multiplier = this.thumbContainerHeight / frame.h; // eslint-disable-next-line no-param-reassign

-      previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * multiplier), "px"); // eslint-disable-next-line no-param-reassign
+      previewImage.style.height = "".concat(previewImage.naturalHeight * multiplier, "px"); // eslint-disable-next-line no-param-reassign

-      previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * multiplier), "px"); // eslint-disable-next-line no-param-reassign
+      previewImage.style.width = "".concat(previewImage.naturalWidth * multiplier, "px"); // eslint-disable-next-line no-param-reassign

      previewImage.style.left = "-".concat(frame.x * multiplier, "px"); // eslint-disable-next-line no-param-reassign

@@ -14062,8 +14149,13 @@ function () {
    key: "thumbContainerHeight",
    get: function get() {
      if (this.mouseDown) {
-        // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below
-        return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio);
+        var _fitRatio2 = fitRatio(this.thumbAspectRatio, {
+          width: this.player.media.clientWidth,
+          height: this.player.media.clientHeight
+        }),
+            height = _fitRatio2.height;
+
+        return height;
      }

      return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@@ -14547,10 +14639,10 @@ function () {
    key: "pause",
    value: function pause() {
      if (!this.playing || !is$1.function(this.media.pause)) {
-        return;
+        return null;
      }

-      this.media.pause();
+      return this.media.pause();
    }
    /**
     * Get playing state
@@ -14568,10 +14660,10 @@ function () {
      var toggle = is$1.boolean(input) ? input : !this.playing;

      if (toggle) {
-        this.play();
-      } else {
-        this.pause();
+        return this.play();
      }
+
+      return this.pause();
    }
    /**
     * Stop playback
@@ -14604,7 +14696,7 @@ function () {
  }, {
    key: "rewind",
    value: function rewind(seekTime) {
-      this.currentTime = this.currentTime - (is$1.number(seekTime) ? seekTime : this.config.seekTime);
+      this.currentTime -= is$1.number(seekTime) ? seekTime : this.config.seekTime;
    }
    /**
     * Fast forward
@@ -14614,7 +14706,7 @@ function () {
  }, {
    key: "forward",
    value: function forward(seekTime) {
-      this.currentTime = this.currentTime + (is$1.number(seekTime) ? seekTime : this.config.seekTime);
+      this.currentTime += is$1.number(seekTime) ? seekTime : this.config.seekTime;
    }
    /**
     * Seek to a time
@@ -810,9 +810,9 @@
  integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=

 "@types/node@*":
-  version "13.5.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.5.0.tgz#4e498dbf355795a611a87ae5ef811a8660d42662"
-  integrity sha512-Onhn+z72D2O2Pb2ql2xukJ55rglumsVo1H6Fmyi8mlU9SvKdBk/pUSUAiBY/d9bAOF7VVWajX3sths/+g6ZiAQ==
+  version "13.5.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.5.2.tgz#3de53b55fd39efc428a901a0f6db31f761cfa131"
+  integrity sha512-Fr6a47c84PRLfd7M7u3/hEknyUdQrrBA6VoPmkze0tcflhU5UnpWEX2kn12ktA/lb+MNHSqFlSiPHIHsaErTPA==

 "@types/normalize-package-data@^2.4.0":
  version "2.4.0"
@@ -1719,13 +1719,13 @@ browserslist@^2.11.3:
    electron-to-chromium "^1.3.30"

 browserslist@^4.8.2, browserslist@^4.8.3:
-  version "4.8.5"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.5.tgz#691af4e327ac877b25e7a3f7ee869c4ef36cdea3"
-  integrity sha512-4LMHuicxkabIB+n9874jZX/az1IaZ5a+EUuvD7KFOu9x/Bd5YHyO0DIz2ls/Kl8g0ItS4X/ilEgf4T1Br0lgSg==
+  version "4.8.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.6.tgz#96406f3f5f0755d272e27a66f4163ca821590a7e"
+  integrity sha512-ZHao85gf0eZ0ESxLfCp73GG9O/VTytYDIkIiZDlURppLTI9wErSM/5yAKEq6rcUdxBLjMELmrYUJGg5sxGKMHg==
  dependencies:
-    caniuse-lite "^1.0.30001022"
-    electron-to-chromium "^1.3.338"
-    node-releases "^1.1.46"
+    caniuse-lite "^1.0.30001023"
+    electron-to-chromium "^1.3.341"
+    node-releases "^1.1.47"

 bs-recipes@1.3.4:
  version "1.3.4"
@@ -1880,9 +1880,9 @@ camelcase-keys@^4.0.0:
    quick-lru "^1.0.0"

 camelcase-keys@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.1.1.tgz#0d24dde78cea4c7d2da7f4ea40b7995083328c8d"
-  integrity sha512-kEPCddRFChEzO0d6w61yh0WbBiSv9gBnfZWGfXRYPlGqIdIGef6HMR6pgqVSEWCYkrp8B0AtEpEXNY+Jx0xk1A==
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.1.2.tgz#531a289aeea93249b63ec1249db9265f305041f7"
+  integrity sha512-QfFrU0CIw2oltVvpndW32kuJ/9YOJwUnmWrjlXt1nnJZHCaS9i6bfOpg9R4Lw8aZjStkJWM+jc0cdXjWBgVJSw==
  dependencies:
    camelcase "^5.3.1"
    map-obj "^4.0.0"
@@ -1908,7 +1908,7 @@ camelcase@^5.0.0, camelcase@^5.3.1:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

-caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30001020, caniuse-lite@^1.0.30001022:
+caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30001020, caniuse-lite@^1.0.30001023:
  version "1.0.30001023"
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001023.tgz#b82155827f3f5009077bdd2df3d8968bcbcc6fc4"
  integrity sha512-C5TDMiYG11EOhVOA62W1p3UsJ2z4DsHtMBQtjzp3ZsUglcQn62WOUgW0y795c7A5uZ+GCEIvzkMatLIlAsbNTA==
@@ -2990,10 +2990,10 @@ ee-first@1.1.1:
  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=

-electron-to-chromium@^1.3.30, electron-to-chromium@^1.3.338:
-  version "1.3.340"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.340.tgz#5d4fe78e984d4211194cf5a52e08069543da146f"
-  integrity sha512-hRFBAglhcj5iVYH+o8QU0+XId1WGoc0VGowJB1cuJAt3exHGrivZvWeAO5BRgBZqwZtwxjm8a5MQeGoT/Su3ww==
+electron-to-chromium@^1.3.30, electron-to-chromium@^1.3.341:
+  version "1.3.343"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.343.tgz#a60f76a8b9980d44e39276c199fbfb6a39e8b115"
+  integrity sha512-zSPaMbYuNpas96cCf4hcKB1Zs/1ClntnsH3S+CvFi75LBBsa767Xnmo5jhCI1HiG0za6rJMRk5n2MCgd8w2iYA==

 "emoji-regex@>=6.0.0 <=6.1.1":
  version "6.1.1"
@@ -3189,9 +3189,9 @@ eslint-config-airbnb-base@^14.0.0:
    object.entries "^1.1.0"

 eslint-config-prettier@^6.9.0:
-  version "6.9.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.9.0.tgz#430d24822e82f7deb1e22a435bfa3999fae4ad64"
-  integrity sha512-k4E14HBtcLv0uqThaI6I/n1LEqROp8XaPu6SO9Z32u5NlGRC07Enu1Bh2KEFw4FNHbekH8yzbIU9kUGxbiGmCA==
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.10.0.tgz#7b15e303bf9c956875c948f6b21500e48ded6a7f"
+  integrity sha512-AtndijGte1rPILInUdHjvKEGbIV06NuvPrqlIEaEaWtbtvJh464mDeyGMdZEQMsGvC0ZVkiex1fSNcC4HAbRGg==
  dependencies:
    get-stdin "^6.0.0"

@@ -5867,9 +5867,9 @@ leven@^3.1.0:
  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==

 levenary@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.0.tgz#fc146fe75f32dc483a0a2c64aef720f602cd6210"
-  integrity sha512-VHcwhO0UTpUW7rLPN2/OiWJdgA1e9BqEDALhrgCe/F+uUJnep6CoUsTzMeP8Rh0NGr9uKquXxqe7lwLZo509nQ==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
+  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
  dependencies:
    leven "^3.1.0"

@@ -6029,26 +6029,11 @@ lodash.foreach@^4.3.0:
  resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
  integrity sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=

-lodash.isboolean@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
-  integrity sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=
-
 lodash.isfinite@^3.3.2:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"
  integrity sha1-+4m2WpqAKBgz8LdHizpRBPiY67M=

-lodash.isregexp@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.isregexp/-/lodash.isregexp-4.0.1.tgz#e13e647b30cd559752a04cd912086faf7da1c30b"
-  integrity sha1-4T5kezDNVZdSoEzZEghvr32hwws=
-
-lodash.isstring@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
-  integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
-
 lodash.map@^4.4.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
@@ -6676,7 +6661,7 @@ node-pre-gyp@*:
    semver "^5.3.0"
    tar "^4.4.2"

-node-releases@^1.1.46:
+node-releases@^1.1.47:
  version "1.1.47"
  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.47.tgz#c59ef739a1fd7ecbd9f0b7cf5b7871e8a8b591e4"
  integrity sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==
@@ -8569,9 +8554,9 @@ rimraf@2.6.3, rimraf@~2.6.2:
    glob "^7.1.3"

 rimraf@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.0.tgz#614176d4b3010b75e5c390eb0ee96f6dc0cebb9b"
-  integrity sha512-NDGVxTsjqfunkds7CqsOiEnxln4Bo7Nddl3XhS4pXg5OzwkLqJ971ZVAAnB+DDLnF76N+VnDEiBHaVV8I06SUg==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.1.tgz#48d3d4cb46c80d388ab26cd61b1b466ae9ae225a"
+  integrity sha512-IQ4ikL8SjBiEDZfk+DFVwqRK8md24RWMEJkdSlgNLkyyAImcjf8SWvU1qFMDOb4igBClbTQ/ugPqXcRwdFTxZw==
  dependencies:
    glob "^7.1.3"

@@ -8613,9 +8598,9 @@ rollup-pluginutils@^2.8.1:
    estree-walker "^0.6.1"

 rollup@^1.29.1:
-  version "1.29.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.29.1.tgz#8715d0a4ca439be3079f8095989ec8aa60f637bc"
-  integrity sha512-dGQ+b9d1FOX/gluiggTAVnTvzQZUEkCi/TwZcax7ujugVRHs0nkYJlV9U4hsifGEMojnO+jvEML2CJQ6qXgbHA==
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.30.1.tgz#3fd28d6198beb2f3cd1640732047d5ec16c2d3a0"
+  integrity sha512-Uus8mwQXwaO+ZVoNwBcXKhT0AvycFCBW/W8VZtkpVGsotRllWk9oldfCjqWmTnFRI0y7x6BnEqSqc65N+/YdBw==
  dependencies:
    "@types/estree" "*"
    "@types/node" "*"
@@ -9430,13 +9415,11 @@ stylelint-order@^4.0.0:
    postcss-sorting "^5.0.1"

 stylelint-scss@^3.13.0, stylelint-scss@^3.4.0:
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.13.0.tgz#875c76e61d95333c4f0ae737a310be6f1d27d780"
-  integrity sha512-SaLnvQyndaPcsgVJsMh6zJ1uKVzkRZJx+Wg/stzoB1mTBdEmGketbHrGbMQNymzH/0mJ06zDSpeCDvNxqIJE5A==
+  version "3.14.2"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.14.2.tgz#e449a47e0ac410e6909f1a71b49550202c978bf9"
+  integrity sha512-59/BkIEWyFoORiejDIQB2P2kmg0KcqMn7wtj1y5sRvS4N+Qh+Ng3hbKelOzgS+OM2Ezbai0uEev8xckXxkh9TQ==
  dependencies:
-    lodash.isboolean "^3.0.3"
-    lodash.isregexp "^4.0.1"
-    lodash.isstring "^4.0.1"
+    lodash "^4.17.15"
    postcss-media-query-parser "^0.2.3"
    postcss-resolve-nested-selector "^0.1.1"
    postcss-selector-parser "^6.0.2"
@@ -10340,9 +10323,9 @@ url-parse-lax@^3.0.0:
    prepend-http "^2.0.0"

 url-polyfill@^1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.7.tgz#402ee84360eb549bbeb585f4c7971e79a31de9e3"
-  integrity sha512-ZrAxYWCREjmMtL8gSbSiKKLZZticgihCvVBtrFbUVpyoETt8GQJeG2okMWA8XryDAaHMjJfhnc+rnhXRbI4DXA==
+  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==

 url-regex@^5.0.0:
  version "5.0.0"