v3.1.0-beta.2

dist/plyr.js

@@ -84,7 +84,7 @@ var defaults = {
 
     // Quality default
     quality: {
-        default: 720,
+        default: 576,
         options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240, 'default']
     },
 
@@ -1542,6 +1542,18 @@ var utils = {
     },
 
 
+    // Get the closest value in an array
+    closest: function closest(array, value) {
+        if (!utils.is.array(array) || !array.length) {
+            return null;
+        }
+
+        return array.reduce(function (prev, curr) {
+            return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;
+        });
+    },
+
+
     // Get the provider for a given URL
     getProviderByUrl: function getProviderByUrl(url) {
         // YouTube
@@ -1951,13 +1963,13 @@ var Fullscreen = function () {
         });
 
         // Fullscreen toggle on double click
-        utils.on(this.player.elements.container, 'dblclick', function () {
-            _this.toggle();
-        });
+        utils.on(this.player.elements.container, 'dblclick', function (event) {
+            // Ignore double click in controls
+            if (_this.player.elements.controls.contains(event.target)) {
+                return;
+            }
 
-        // Prevent double click on controls bubbling up
-        utils.on(this.player.elements.controls, 'dblclick', function (event) {
-            return event.stopPropagation();
+            _this.toggle();
         });
 
         // Update the UI
@@ -3316,13 +3328,7 @@ var controls = {
                     break;
 
                 case 1440:
-                    label = 'WQHD';
-                    break;
-
                 case 1080:
-                    label = 'HD';
-                    break;
-
                 case 720:
                     label = 'HD';
                     break;
@@ -3496,14 +3502,14 @@ var controls = {
         var list = this.elements.settings.panes.captions.querySelector('ul');
 
         // Toggle the pane and tab
-        var hasTracks = captions.getTracks.call(this).length;
-        controls.toggleTab.call(this, type, hasTracks);
+        var toggle = captions.getTracks.call(this).length;
+        controls.toggleTab.call(this, type, toggle);
 
         // Empty the menu
         utils.emptyElement(list);
 
         // If there's no captions, bail
-        if (!hasTracks) {
+        if (!toggle) {
             return;
         }
 
@@ -3547,10 +3553,10 @@ var controls = {
         var type = 'speed';
 
         // Set the speed options
-        if (!utils.is.array(options)) {
-            this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-        } else {
+        if (utils.is.array(options)) {
             this.options.speed = options;
+        } else if (this.isHTML5 || this.isVimeo) {
+            this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
         }
 
         // Set options if passed and filter based on config
@@ -3559,7 +3565,7 @@ var controls = {
         });
 
         // Toggle the pane and tab
-        var toggle = !utils.is.empty(this.options.speed);
+        var toggle = !utils.is.empty(this.options.speed) && this.options.speed.length > 1;
         controls.toggleTab.call(this, type, toggle);
 
         // Check if we need to toggle the parent
@@ -3582,7 +3588,8 @@ var controls = {
 
         // Create items
         this.options.speed.forEach(function (speed) {
-            return controls.createMenuItem.call(_this4, speed, list, type, controls.getLabel.call(_this4, 'speed', speed));
+            var label = controls.getLabel.call(_this4, 'speed', speed);
+            controls.createMenuItem.call(_this4, speed, list, type, label);
         });
 
         controls.updateSetting.call(this, type, list);
@@ -3866,7 +3873,8 @@ var controls = {
         // Settings button / menu
         if (this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) {
             var menu = utils.createElement('div', {
-                class: 'plyr__menu'
+                class: 'plyr__menu',
+                hidden: ''
             });
 
             menu.appendChild(controls.createButton.call(this, 'settings', {
@@ -3991,12 +3999,12 @@ var controls = {
 
         this.elements.controls = container;
 
-        controls.setSpeedMenu.call(this);
-
         if (this.isHTML5) {
             controls.setQualityMenu.call(this, html5.getQualityOptions.call(this));
         }
 
+        controls.setSpeedMenu.call(this);
+
         return container;
     },
 
@@ -5804,8 +5812,7 @@ var youtube = {
                     });
 
                     // Get available speeds
-                    var options = instance.getAvailablePlaybackRates();
-                    controls.setSpeedMenu.call(player, options);
+                    player.options.speed = instance.getAvailablePlaybackRates();
 
                     // Set the tabindex to avoid focus entering iframe
                     if (player.supported.ui) {
@@ -7560,11 +7567,16 @@ var Plyr = function () {
                 quality = this.config.quality.default;
             }
 
-            if (!this.options.quality.includes(quality)) {
-                this.debug.warn('Unsupported quality option (' + quality + ')');
+            if (!this.options.quality.length) {
                 return;
             }
 
+            if (!this.options.quality.includes(quality)) {
+                var closest = utils.closest(this.options.quality, quality);
+                this.debug.warn('Unsupported quality option: ' + quality + ', using ' + closest + ' instead');
+                quality = closest;
+            }
+
             // Update config
             this.config.quality.selected = quality;
 

dist/plyr.polyfilled.js

@@ -5117,14 +5117,14 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.1.0-beta.1/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.1.0-beta.2/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
 
     // Quality default
     quality: {
-        default: 720,
+        default: 576,
         options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240, 'default']
     },
 
@@ -6576,6 +6576,18 @@ var utils = {
     },
 
 
+    // Get the closest value in an array
+    closest: function closest(array, value) {
+        if (!utils.is.array(array) || !array.length) {
+            return null;
+        }
+
+        return array.reduce(function (prev, curr) {
+            return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;
+        });
+    },
+
+
     // Get the provider for a given URL
     getProviderByUrl: function getProviderByUrl(url) {
         // YouTube
@@ -6985,13 +6997,13 @@ var Fullscreen = function () {
         });
 
         // Fullscreen toggle on double click
-        utils.on(this.player.elements.container, 'dblclick', function () {
-            _this.toggle();
-        });
+        utils.on(this.player.elements.container, 'dblclick', function (event) {
+            // Ignore double click in controls
+            if (_this.player.elements.controls.contains(event.target)) {
+                return;
+            }
 
-        // Prevent double click on controls bubbling up
-        utils.on(this.player.elements.controls, 'dblclick', function (event) {
-            return event.stopPropagation();
+            _this.toggle();
         });
 
         // Update the UI
@@ -8350,13 +8362,7 @@ var controls = {
                     break;
 
                 case 1440:
-                    label = 'WQHD';
-                    break;
-
                 case 1080:
-                    label = 'HD';
-                    break;
-
                 case 720:
                     label = 'HD';
                     break;
@@ -8530,14 +8536,14 @@ var controls = {
         var list = this.elements.settings.panes.captions.querySelector('ul');
 
         // Toggle the pane and tab
-        var hasTracks = captions.getTracks.call(this).length;
-        controls.toggleTab.call(this, type, hasTracks);
+        var toggle = captions.getTracks.call(this).length;
+        controls.toggleTab.call(this, type, toggle);
 
         // Empty the menu
         utils.emptyElement(list);
 
         // If there's no captions, bail
-        if (!hasTracks) {
+        if (!toggle) {
             return;
         }
 
@@ -8581,10 +8587,10 @@ var controls = {
         var type = 'speed';
 
         // Set the speed options
-        if (!utils.is.array(options)) {
-            this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-        } else {
+        if (utils.is.array(options)) {
             this.options.speed = options;
+        } else if (this.isHTML5 || this.isVimeo) {
+            this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
         }
 
         // Set options if passed and filter based on config
@@ -8593,7 +8599,7 @@ var controls = {
         });
 
         // Toggle the pane and tab
-        var toggle = !utils.is.empty(this.options.speed);
+        var toggle = !utils.is.empty(this.options.speed) && this.options.speed.length > 1;
         controls.toggleTab.call(this, type, toggle);
 
         // Check if we need to toggle the parent
@@ -8616,7 +8622,8 @@ var controls = {
 
         // Create items
         this.options.speed.forEach(function (speed) {
-            return controls.createMenuItem.call(_this4, speed, list, type, controls.getLabel.call(_this4, 'speed', speed));
+            var label = controls.getLabel.call(_this4, 'speed', speed);
+            controls.createMenuItem.call(_this4, speed, list, type, label);
         });
 
         controls.updateSetting.call(this, type, list);
@@ -8900,7 +8907,8 @@ var controls = {
         // Settings button / menu
         if (this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) {
             var menu = utils.createElement('div', {
-                class: 'plyr__menu'
+                class: 'plyr__menu',
+                hidden: ''
             });
 
             menu.appendChild(controls.createButton.call(this, 'settings', {
@@ -9025,12 +9033,12 @@ var controls = {
 
         this.elements.controls = container;
 
-        controls.setSpeedMenu.call(this);
-
         if (this.isHTML5) {
             controls.setQualityMenu.call(this, html5.getQualityOptions.call(this));
         }
 
+        controls.setSpeedMenu.call(this);
+
         return container;
     },
 
@@ -10838,8 +10846,7 @@ var youtube = {
                     });
 
                     // Get available speeds
-                    var options = instance.getAvailablePlaybackRates();
-                    controls.setSpeedMenu.call(player, options);
+                    player.options.speed = instance.getAvailablePlaybackRates();
 
                     // Set the tabindex to avoid focus entering iframe
                     if (player.supported.ui) {
@@ -12594,11 +12601,16 @@ var Plyr = function () {
                 quality = this.config.quality.default;
             }
 
-            if (!this.options.quality.includes(quality)) {
-                this.debug.warn('Unsupported quality option (' + quality + ')');
+            if (!this.options.quality.length) {
                 return;
             }
 
+            if (!this.options.quality.includes(quality)) {
+                var closest = utils.closest(this.options.quality, quality);
+                this.debug.warn('Unsupported quality option: ' + quality + ', using ' + closest + ' instead');
+                quality = closest;
+            }
+
             // Update config
             this.config.quality.selected = quality;
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.1.0-beta.1",
+    "version": "3.1.0-beta.2",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",

readme.md

@@ -128,7 +128,7 @@ See [initialising](#initialising) for more information on advanced setups.
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
 
 ```html
-<script src="https://cdn.plyr.io/3.1.0-beta.1/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.1.0-beta.2/plyr.js"></script>
 ```
 
 _Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
@@ -144,13 +144,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.1.0-beta.1/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.1.0-beta.2/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.1.0-beta.1/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.1.0-beta.2/plyr.svg`.
 
 ## Ads
 

src/js/controls.js

@@ -474,13 +474,7 @@ const controls = {
                     break;
 
                 case 1440:
-                    label = 'WQHD';
-                    break;
-
                 case 1080:
-                    label = 'HD';
-                    break;
-
                 case 720:
                     label = 'HD';
                     break;
@@ -656,14 +650,14 @@ const controls = {
         const list = this.elements.settings.panes.captions.querySelector('ul');
 
         // Toggle the pane and tab
-        const hasTracks = captions.getTracks.call(this).length;
-        controls.toggleTab.call(this, type, hasTracks);
+        const toggle = captions.getTracks.call(this).length;
+        controls.toggleTab.call(this, type, toggle);
 
         // Empty the menu
         utils.emptyElement(list);
 
         // If there's no captions, bail
-        if (!hasTracks) {
+        if (!toggle) {
             return;
         }
 
@@ -710,7 +704,9 @@ const controls = {
         const type = 'speed';
 
         // Set the speed options
-        if (!utils.is.array(options)) {
+        if (utils.is.array(options)) {
+            this.options.speed = options;
+        } else if (this.isHTML5 || this.isVimeo) {
             this.options.speed = [
                 0.5,
                 0.75,
@@ -720,15 +716,13 @@ const controls = {
                 1.75,
                 2,
             ];
-        } else {
-            this.options.speed = options;
         }
 
         // Set options if passed and filter based on config
         this.options.speed = this.options.speed.filter(speed => this.config.speed.options.includes(speed));
 
         // Toggle the pane and tab
-        const toggle = !utils.is.empty(this.options.speed);
+        const toggle = !utils.is.empty(this.options.speed) && this.options.speed.length > 1;
         controls.toggleTab.call(this, type, toggle);
 
         // Check if we need to toggle the parent
@@ -750,7 +744,10 @@ const controls = {
         utils.emptyElement(list);
 
         // Create items
-        this.options.speed.forEach(speed => controls.createMenuItem.call(this, speed, list, type, controls.getLabel.call(this, 'speed', speed)));
+        this.options.speed.forEach(speed => {
+            const label = controls.getLabel.call(this, 'speed', speed);
+            controls.createMenuItem.call(this, speed, list, type, label);
+        });
 
         controls.updateSetting.call(this, type, list);
     },
@@ -1033,6 +1030,7 @@ const controls = {
         if (this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) {
             const menu = utils.createElement('div', {
                 class: 'plyr__menu',
+                hidden: '',
             });
 
             menu.appendChild(
@@ -1167,12 +1165,12 @@ const controls = {
 
         this.elements.controls = container;
 
-        controls.setSpeedMenu.call(this);
-
         if (this.isHTML5) {
             controls.setQualityMenu.call(this, html5.getQualityOptions.call(this));
         }
 
+        controls.setSpeedMenu.call(this);
+
         return container;
     },
 

src/js/defaults.js

@@ -56,14 +56,14 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.1.0-beta.1/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.1.0-beta.2/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
 
     // Quality default
     quality: {
-        default: 720,
+        default: 576,
         options: [
             4320,
             2880,

src/js/fullscreen.js

@@ -68,13 +68,15 @@ class Fullscreen {
         });
 
         // Fullscreen toggle on double click
-        utils.on(this.player.elements.container, 'dblclick', () => {
+        utils.on(this.player.elements.container, 'dblclick', event => {
+            // Ignore double click in controls
+            if (this.player.elements.controls.contains(event.target)) {
+                return;
+            }
+
             this.toggle();
         });
 
-        // Prevent double click on controls bubbling up
-        utils.on(this.player.elements.controls, 'dblclick', event => event.stopPropagation());
-
         // Update the UI
         this.update();
     }

src/js/plugins/youtube.js

@@ -351,8 +351,7 @@ const youtube = {
                     });
 
                     // Get available speeds
-                    const options = instance.getAvailablePlaybackRates();
-                    controls.setSpeedMenu.call(player, options);
+                    player.options.speed = instance.getAvailablePlaybackRates();
 
                     // Set the tabindex to avoid focus entering iframe
                     if (player.supported.ui) {

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.1.0-beta.1
+// plyr.js v3.1.0-beta.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -692,11 +692,16 @@ class Plyr {
             quality = this.config.quality.default;
         }
 
-        if (!this.options.quality.includes(quality)) {
-            this.debug.warn(`Unsupported quality option (${quality})`);
+        if (!this.options.quality.length) {
             return;
         }
 
+        if (!this.options.quality.includes(quality)) {
+            const closest = utils.closest(this.options.quality, quality);
+            this.debug.warn(`Unsupported quality option: ${quality}, using ${closest} instead`);
+            quality = closest;
+        }
+
         // Update config
         this.config.quality.selected = quality;
 

src/js/plyr.polyfilled.js

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

src/js/utils.js

@@ -746,6 +746,15 @@ const utils = {
         return array.filter((item, index) => array.indexOf(item) === index);
     },
 
+    // Get the closest value in an array
+    closest(array, value) {
+        if (!utils.is.array(array) || !array.length) {
+            return null;
+        }
+
+        return array.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
+    },
+
     // Get the provider for a given URL
     getProviderByUrl(url) {
         // YouTube