YouTube speed menu fix

6 files changed, 38 insertions, 25 deletions

diff --git a/src/js/controls.js b/src/js/controls.js
index 828f0dcd..17d197c5 100644
--- a/src/js/controls.js
+++ b/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;
     },
 
diff --git a/src/js/defaults.js b/src/js/defaults.js
index 8331fbeb..d177fc6a 100644
--- a/src/js/defaults.js
+++ b/src/js/defaults.js
@@ -63,7 +63,7 @@ const defaults = {
 
     // Quality default
     quality: {
-        default: 720,
+        default: 576,
         options: [
             4320,
             2880,
diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js
index cd31f60b..55b5c804 100644
--- a/src/js/fullscreen.js
+++ b/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();
     }
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 27865d6f..d1ab537b 100644
--- a/src/js/plugins/youtube.js
+++ b/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) {
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 61505ba2..9393f804 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -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;
 
diff --git a/src/js/utils.js b/src/js/utils.js
index dd1466df..2ec57a50 100644
--- a/src/js/utils.js
+++ b/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