1 files changed, 24 insertions, 17 deletions

diff --git a/dist/plyr.js b/dist/plyr.js
index 1f0f012f..7a673573 100644
--- a/dist/plyr.js
+++ b/dist/plyr.js
@@ -1,7 +1,7 @@
 typeof navigator === "object" && (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define('Plyr', factory) :
-  (global = global || self, global.Plyr = factory());
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Plyr = factory());
 }(this, (function () { 'use strict';
 
   function _classCallCheck(instance, Constructor) {
@@ -163,7 +163,7 @@ typeof navigator === "object" && (function (global, factory) {
     if (typeof o === "string") return _arrayLikeToArray(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Map" || n === "Set") return Array.from(o);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
   }
 
@@ -1084,7 +1084,7 @@ typeof navigator === "object" && (function (global, factory) {
 
     var event = new CustomEvent(type, {
       bubbles: bubbles,
-      detail: _objectSpread2({}, detail, {
+      detail: _objectSpread2(_objectSpread2({}, detail), {}, {
         plyr: this
       })
     }); // Dispatch the event
@@ -1197,7 +1197,12 @@ typeof navigator === "object" && (function (global, factory) {
     if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
       var height = 100 / this.media.offsetWidth * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
       var offset = (height - padding) / (height / 50);
-      this.media.style.transform = "translateY(-".concat(offset, "%)");
+
+      if (this.fullscreen.active) {
+        wrapper.style.paddingBottom = null;
+      } else {
+        this.media.style.transform = "translateY(-".concat(offset, "%)");
+      }
     } else if (this.isHTML5) {
       wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
     }
@@ -1786,7 +1791,7 @@ typeof navigator === "object" && (function (global, factory) {
       var attr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var text = i18n.get(key, this.config);
 
-      var attributes = _objectSpread2({}, attr, {
+      var attributes = _objectSpread2(_objectSpread2({}, attr), {}, {
         class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' ')
       });
 
@@ -2786,7 +2791,7 @@ typeof navigator === "object" && (function (global, factory) {
           showMenuPanel = controls.showMenuPanel;
       this.elements.controls = null; // Larger overlaid play button
 
-      if (this.config.controls.includes('play-large')) {
+      if (is$1.array(this.config.controls) && this.config.controls.includes('play-large')) {
         this.elements.container.appendChild(createButton.call(this, 'play-large'));
       } // Create the container
 
@@ -2798,7 +2803,7 @@ typeof navigator === "object" && (function (global, factory) {
         class: 'plyr__controls__item'
       }; // Loop through controls in order
 
-      dedupe(this.config.controls).forEach(function (control) {
+      dedupe(is$1.array(this.config.controls) ? this.config.controls : []).forEach(function (control) {
         // Restart button
         if (control === 'restart') {
           container.appendChild(createButton.call(_this10, 'restart', defaultAttributes));
@@ -3117,8 +3122,6 @@ typeof navigator === "object" && (function (global, factory) {
       if (update) {
         if (is$1.string(this.config.controls)) {
           container = replace(container);
-        } else if (is$1.element(container)) {
-          container.innerHTML = replace(container.innerHTML);
         }
       } // Controls container
 
@@ -3656,7 +3659,7 @@ typeof navigator === "object" && (function (global, factory) {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.6.1/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.6.2/plyr.svg',
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
     // Quality default
@@ -4103,10 +4106,12 @@ typeof navigator === "object" && (function (global, factory) {
 
         if (is$1.element(button)) {
           button.pressed = this.active;
-        } // Trigger an event
+        } // Always trigger events on the plyr / media element (not a fullscreen container) and let them bubble up
+
 
+        var target = this.target === this.player.media ? this.target : this.player.elements.container; // Trigger an event
 
-        triggerEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
+        triggerEvent.call(this.player, target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
       }
     }, {
       key: "toggleFallback",
@@ -4572,7 +4577,7 @@ typeof navigator === "object" && (function (global, factory) {
       // Loop through values (as they are the keys when the object is spread 🤔)
       Object.values(_objectSpread2({}, this.media.style)) // We're only fussed about Plyr specific properties
       .filter(function (key) {
-        return !is$1.empty(key) && key.startsWith('--plyr');
+        return !is$1.empty(key) && is$1.string(key) && key.startsWith('--plyr');
       }).forEach(function (key) {
         // Set on the container
         _this5.elements.container.style.setProperty(key, _this5.media.style.getPropertyValue(key)); // Clean up from media element
@@ -8293,9 +8298,9 @@ typeof navigator === "object" && (function (global, factory) {
 
 
       if (this.isHTML5 && this.config.autoplay) {
-        setTimeout(function () {
+        this.once('canplay', function () {
           return silencePromise(_this.play());
-        }, 10);
+        });
       } // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
 
 
@@ -8491,7 +8496,7 @@ typeof navigator === "object" && (function (global, factory) {
 
           var hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force); // Close menu
 
-          if (hiding && this.config.controls.includes('settings') && !is$1.empty(this.config.settings)) {
+          if (hiding && is$1.array(this.config.controls) && this.config.controls.includes('settings') && !is$1.empty(this.config.settings)) {
             controls.toggleMenu.call(this, false);
           } // Trigger event on change
 
@@ -8584,7 +8589,9 @@ typeof navigator === "object" && (function (global, factory) {
             }
           } else {
             // Unbind listeners
-            unbindListeners.call(_this3); // Replace the container with the original element provided
+            unbindListeners.call(_this3); // Cancel current network requests
+
+            html5.cancelRequests.call(_this3); // Replace the container with the original element provided
 
             replaceElement(_this3.elements.original, _this3.elements.container); // Event