Clean up speed options logic

src/js/config/defaults.js

@@ -69,6 +69,7 @@ const defaults = {
     // Quality default
     quality: {
         default: 576,
+        // The options to display in the UI, if available for the source media
         options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240],
         forced: false,
         onChange: null,
@@ -84,7 +85,8 @@ const defaults = {
     // Speed default and options to display
     speed: {
         selected: 1,
-        options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
+        // The options to display in the UI, if available for the source media (e.g. Vimeo does not support 4x)
+        options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4],
     },
 
     // Keyboard shortcut settings

src/js/controls.js

@@ -9,7 +9,7 @@ import captions from './captions';
 import html5 from './html5';
 import support from './support';
 import { repaint, transitionEndEvent } from './utils/animation';
-import { dedupe } from './utils/arrays';
+import { dedupe, fillRange } from './utils/arrays';
 import browser from './utils/browser';
 import {
     createElement,
@@ -1044,7 +1044,7 @@ const controls = {
     },
 
     // Set a list of available captions languages
-    setSpeedMenu(options) {
+    setSpeedMenu() {
         // Menu required
         if (!is.element(this.elements.settings.panels.speed)) {
             return;
@@ -1053,18 +1053,14 @@ const controls = {
         const type = 'speed';
         const list = this.elements.settings.panels.speed.querySelector('[role="menu"]');
 
-        // Set the speed options
+        // Determine options to display
-        if (is.array(options)) {
+        // Vimeo and YouTube limit to 0.5x-2x
-            this.options.speed = options;
+        if (this.isVimeo || this.isYouTube) {
-        } else if (is.array(this.config.speed.options)) {
+            this.options.speed = fillRange(0.5, 2, 0.25).filter(s => this.config.speed.options.includes(s));
+        } else {
             this.options.speed = this.config.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
-        this.options.speed = this.options.speed.filter(speed => this.config.speed.options.includes(speed));
-
         // Toggle the pane and tab
         const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;
         controls.toggleMenuButton.call(this, type, toggle);

src/js/plugins/vimeo.js

@@ -196,12 +196,6 @@ const vimeo = {
                     .then(() => {
                         speed = input;
                         triggerEvent.call(player, player.media, 'ratechange');
-                    })
-                    .catch(error => {
-                        // Hide menu item (and menu if empty)
-                        if (error.name === 'Error') {
-                            controls.setSpeedMenu.call(player, []);
-                        }
                     });
             },
         });

src/js/utils/arrays.js

@@ -21,3 +21,11 @@ export function closest(array, value) {
 
     return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
 }
+
+export function fillRange(start, end, step = 1) {
+    const len = Math.floor((end - start) / step) + 1;
+
+    return Array(len)
+        .fill()
+        .map((_, idx) => start + idx * step);
+}