v3.4.7

-   Fix for Vimeo fullscreen with non native aspect ratios (fixes #854)

dist/plyr.js

@@ -570,15 +570,12 @@ typeof navigator === "object" && (function (global, factory) {
   } // Element matches selector
 
   function matches(element, selector) {
-    var prototype = {
-      Element: Element
-    };
 
     function match() {
       return Array.from(document.querySelectorAll(selector)).includes(this);
     }
 
-    var matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
+    var matches = match;
     return matches.call(element, selector);
   } // Find all elements
 
@@ -634,7 +631,9 @@ typeof navigator === "object" && (function (global, factory) {
     } // Set regular focus
 
 
-    element.focus(); // If we want to mimic keyboard focus via tab
+    element.focus({
+      preventScroll: true
+    }); // If we want to mimic keyboard focus via tab
 
     if (tabFocus) {
       toggleClass(element, this.config.classNames.tabFocus);
@@ -739,26 +738,20 @@ typeof navigator === "object" && (function (global, factory) {
           _inputType$split2 = _slicedToArray(_inputType$split, 1),
           mediaType = _inputType$split2[0];
 
+      var type = inputType; // Verify we're using HTML5 and there's no media type mismatch
+
       if (!this.isHTML5 || mediaType !== this.type) {
         return false;
-      }
+      } // Add codec if required
 
-      var type;
 
-      if (inputType && inputType.includes('codecs=')) {
-        // Use input directly
-        type = inputType;
-      } else if (inputType === 'audio/mpeg') {
-        // Skip codec
-        type = 'audio/mpeg;';
-      } else if (inputType in defaultCodecs) {
-        // Use codec
-        type = "".concat(inputType, "; codecs=\"").concat(defaultCodecs[inputType], "\"");
+      if (Object.keys(defaultCodecs).includes(type)) {
+        type += "; codecs=\"".concat(defaultCodecs[inputType], "\"");
       }
 
       try {
         return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
-      } catch (err) {
+      } catch (e) {
         return false;
       }
     },
@@ -3192,7 +3185,7 @@ typeof navigator === "object" && (function (global, factory) {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg',
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
     // Quality default
@@ -4315,7 +4308,7 @@ typeof navigator === "object" && (function (global, factory) {
         }); // 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', function () {
+        on.call(player, player.media, 'canplay loadeddata', function () {
           toggleHidden(elements.volume, !player.hasAudio);
           toggleHidden(elements.buttons.mute, !player.hasAudio);
         }); // Handle the media finishing
@@ -4710,9 +4703,7 @@ typeof navigator === "object" && (function (global, factory) {
 
   var loadjs_umd = createCommonjsModule(function (module, exports) {
   (function(root, factory) {
-    if (typeof undefined === 'function' && undefined.amd) {
-      undefined([], factory);
-    } else {
+    {
       module.exports = factory();
     }
   }(commonjsGlobal, function() {
@@ -5069,12 +5060,13 @@ typeof navigator === "object" && (function (global, factory) {
     // Set aspect ratio
     // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
     setAspectRatio: function setAspectRatio(input) {
-      var _split = (is.string(input) ? input : this.config.ratio).split(':'),
-          _split2 = _slicedToArray(_split, 2),
-          x = _split2[0],
-          y = _split2[1];
+      var _split$map = (is.string(input) ? input : this.config.ratio).split(':').map(Number),
+          _split$map2 = _slicedToArray(_split$map, 2),
+          x = _split$map2[0],
+          y = _split$map2[1];
 
       var padding = 100 / x * y;
+      vimeo.padding = padding;
       this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");
 
       if (this.supported.ui) {
@@ -5278,8 +5270,8 @@ typeof navigator === "object" && (function (global, factory) {
       }); // Set aspect ratio based on video size
 
       Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
-        var ratio = getAspectRatio(dimensions[0], dimensions[1]);
-        vimeo.setAspectRatio.call(_this2, ratio);
+        vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
+        vimeo.setAspectRatio.call(_this2, vimeo.ratio);
       }); // Set autopause
 
       player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -5370,6 +5362,24 @@ typeof navigator === "object" && (function (global, factory) {
       player.embed.on('error', function (detail) {
         player.media.error = detail;
         triggerEvent.call(player, player.media, 'error');
+      }); // Set height/width on fullscreen
+
+      player.on('enterfullscreen exitfullscreen', function (event) {
+        var target = player.fullscreen.target; // Ignore for iOS native
+
+        if (target !== player.elements.container) {
+          return;
+        }
+
+        var toggle = event.type === 'enterfullscreen';
+
+        var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number),
+            _vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2),
+            x = _vimeo$ratio$split$ma2[0],
+            y = _vimeo$ratio$split$ma2[1];
+
+        var dimension = x > y ? 'width' : 'height';
+        target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null;
       }); // Rebuild UI
 
       setTimeout(function () {
@@ -6547,18 +6557,20 @@ typeof navigator === "object" && (function (global, factory) {
 
         if (_this2.isHTML5) {
           // Setup captions
-          if ('tracks' in input) {
+          if (Object.keys(input).includes('tracks')) {
             source.insertElements.call(_this2, 'track', input.tracks);
-          } // Load HTML5 sources
-
-
-          _this2.media.load();
+          }
         } // If HTML5 or embed but not fully supported, setupInterface and call ready now
 
 
         if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {
           // Setup interface
           ui.build.call(_this2);
+        }
+
+        if (_this2.isHTML5) {
+          // Load HTML5 sources
+          _this2.media.load();
         } // Update the fullscreen support
 
 

dist/plyr.polyfilled.js

@@ -1480,7 +1480,7 @@ typeof navigator === "object" && (function (global, factory) {
         // Set @@toStringTag to native iterators
         _setToStringTag(IteratorPrototype, TAG, true);
         // fix for some old engines
-        if (typeof IteratorPrototype[ITERATOR$3] != 'function') _hide(IteratorPrototype, ITERATOR$3, returnThis);
+        if (!_library && typeof IteratorPrototype[ITERATOR$3] != 'function') _hide(IteratorPrototype, ITERATOR$3, returnThis);
       }
     }
     // fix Array#{values, @@iterator}.name in V8 / FF
@@ -1489,7 +1489,7 @@ typeof navigator === "object" && (function (global, factory) {
       $default = function values() { return $native.call(this); };
     }
     // Define iterator
-    if (BUGGY || VALUES_BUG || !proto[ITERATOR$3]) {
+    if ((!_library || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR$3])) {
       _hide(proto, ITERATOR$3, $default);
     }
     // Plug for library
@@ -2650,7 +2650,7 @@ typeof navigator === "object" && (function (global, factory) {
       return capability.promise;
     }
   });
-  _export(_export.S + _export.F * (!USE_NATIVE), PROMISE, {
+  _export(_export.S + _export.F * (_library || !USE_NATIVE), PROMISE, {
     // 25.4.4.6 Promise.resolve(x)
     resolve: function resolve(x) {
       return _promiseResolve(_library && this === Wrapper ? $Promise : this, x);
@@ -3195,15 +3195,12 @@ typeof navigator === "object" && (function (global, factory) {
   } // Element matches selector
 
   function matches(element, selector) {
-    var prototype = {
-      Element: Element
-    };
 
     function match() {
       return Array.from(document.querySelectorAll(selector)).includes(this);
     }
 
-    var matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
+    var matches = match;
     return matches.call(element, selector);
   } // Find all elements
 
@@ -3259,7 +3256,9 @@ typeof navigator === "object" && (function (global, factory) {
     } // Set regular focus
 
 
-    element.focus(); // If we want to mimic keyboard focus via tab
+    element.focus({
+      preventScroll: true
+    }); // If we want to mimic keyboard focus via tab
 
     if (tabFocus) {
       toggleClass(element, this.config.classNames.tabFocus);
@@ -3363,26 +3362,20 @@ typeof navigator === "object" && (function (global, factory) {
           _inputType$split2 = _slicedToArray(_inputType$split, 1),
           mediaType = _inputType$split2[0];
 
+      var type = inputType; // Verify we're using HTML5 and there's no media type mismatch
+
       if (!this.isHTML5 || mediaType !== this.type) {
         return false;
-      }
+      } // Add codec if required
 
-      var type;
 
-      if (inputType && inputType.includes('codecs=')) {
-        // Use input directly
-        type = inputType;
-      } else if (inputType === 'audio/mpeg') {
-        // Skip codec
-        type = 'audio/mpeg;';
-      } else if (inputType in defaultCodecs) {
-        // Use codec
-        type = "".concat(inputType, "; codecs=\"").concat(defaultCodecs[inputType], "\"");
+      if (Object.keys(defaultCodecs).includes(type)) {
+        type += "; codecs=\"".concat(defaultCodecs[inputType], "\"");
       }
 
       try {
         return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
-      } catch (err) {
+      } catch (e) {
         return false;
       }
     },
@@ -5855,7 +5848,7 @@ typeof navigator === "object" && (function (global, factory) {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg',
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
     // Quality default
@@ -6988,7 +6981,7 @@ typeof navigator === "object" && (function (global, factory) {
         }); // 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', function () {
+        on.call(player, player.media, 'canplay loadeddata', function () {
           toggleHidden(elements.volume, !player.hasAudio);
           toggleHidden(elements.buttons.mute, !player.hasAudio);
         }); // Handle the media finishing
@@ -7404,9 +7397,7 @@ typeof navigator === "object" && (function (global, factory) {
 
   var loadjs_umd = createCommonjsModule(function (module, exports) {
   (function(root, factory) {
-    if (typeof undefined === 'function' && undefined.amd) {
-      undefined([], factory);
-    } else {
+    {
       module.exports = factory();
     }
   }(commonjsGlobal, function() {
@@ -7762,12 +7753,13 @@ typeof navigator === "object" && (function (global, factory) {
     // Set aspect ratio
     // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
     setAspectRatio: function setAspectRatio(input) {
-      var _split = (is$1.string(input) ? input : this.config.ratio).split(':'),
-          _split2 = _slicedToArray(_split, 2),
-          x = _split2[0],
-          y = _split2[1];
+      var _split$map = (is$1.string(input) ? input : this.config.ratio).split(':').map(Number),
+          _split$map2 = _slicedToArray(_split$map, 2),
+          x = _split$map2[0],
+          y = _split$map2[1];
 
       var padding = 100 / x * y;
+      vimeo.padding = padding;
       this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");
 
       if (this.supported.ui) {
@@ -7971,8 +7963,8 @@ typeof navigator === "object" && (function (global, factory) {
       }); // Set aspect ratio based on video size
 
       Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
-        var ratio = getAspectRatio(dimensions[0], dimensions[1]);
-        vimeo.setAspectRatio.call(_this2, ratio);
+        vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
+        vimeo.setAspectRatio.call(_this2, vimeo.ratio);
       }); // Set autopause
 
       player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -8063,6 +8055,24 @@ typeof navigator === "object" && (function (global, factory) {
       player.embed.on('error', function (detail) {
         player.media.error = detail;
         triggerEvent.call(player, player.media, 'error');
+      }); // Set height/width on fullscreen
+
+      player.on('enterfullscreen exitfullscreen', function (event) {
+        var target = player.fullscreen.target; // Ignore for iOS native
+
+        if (target !== player.elements.container) {
+          return;
+        }
+
+        var toggle = event.type === 'enterfullscreen';
+
+        var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number),
+            _vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2),
+            x = _vimeo$ratio$split$ma2[0],
+            y = _vimeo$ratio$split$ma2[1];
+
+        var dimension = x > y ? 'width' : 'height';
+        target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null;
       }); // Rebuild UI
 
       setTimeout(function () {
@@ -9237,18 +9247,20 @@ typeof navigator === "object" && (function (global, factory) {
 
         if (_this2.isHTML5) {
           // Setup captions
-          if ('tracks' in input) {
+          if (Object.keys(input).includes('tracks')) {
             source.insertElements.call(_this2, 'track', input.tracks);
-          } // Load HTML5 sources
-
-
-          _this2.media.load();
+          }
         } // If HTML5 or embed but not fully supported, setupInterface and call ready now
 
 
         if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {
           // Setup interface
           ui.build.call(_this2);
+        }
+
+        if (_this2.isHTML5) {
+          // Load HTML5 sources
+          _this2.media.load();
         } // Update the fullscreen support
 
 

gulpfile.js

@@ -447,7 +447,16 @@ if (Object.keys(credentials).includes('aws') && Object.keys(credentials).include
     });
 
     // Do everything
-    gulp.task('deploy', () =>
-        run('version', tasks.clean, tasks.js, tasks.sass, tasks.sprite, 'cdn', 'purge', 'demo', 'open'),
+    gulp.task(
+        'deploy',
+        gulp.series(
+            'version',
+            tasks.clean,
+            gulp.parallel(tasks.js, tasks.sass, tasks.sprite),
+            'cdn',
+            'demo',
+            'purge',
+            'open',
+        ),
     );
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.4.6",
+    "version": "3.4.7",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "author": "Sam Potts <sam@potts.es>",

readme.md

@@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
 
 ```html
-<script src="https://cdn.plyr.io/3.4.6/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.4.7/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.4.6/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script>
 ```
 
 ### CSS
@@ -152,13 +152,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.4.6/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css">
 ```
 
 ### SVG Sprite
 
 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.6/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.7/plyr.svg`.
 
 ## Ads
 

src/js/config/defaults.js

@@ -60,7 +60,7 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.4.6
+// plyr.js v3.4.7
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.4.6
+// plyr.js v3.4.7
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================