fix: Fix playback rate iteration if rates are not in the ascending order (videojs#7618)

BruceRodrigues · web-flow · commit 50fe5f659b7e · 2022-02-23T12:28:14.000-05:00
diff --git a/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js b/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js
@@ -115,17 +115,11 @@ class PlaybackRateMenuButton extends MenuButton {
     // select next rate option
     const currentRate = this.player().playbackRate();
     const rates = this.playbackRates();
+    const currentIndex = rates.indexOf(currentRate);
+    // this get the next rate and it will select first one if the last one currently selected
+    const newIndex = (currentIndex + 1) % rates.length;
 
-    // this will select first one if the last one currently selected
-    let newRate = rates[0];
-
-    for (let i = 0; i < rates.length; i++) {
-      if (rates[i] > currentRate) {
-        newRate = rates[i];
-        break;
-      }
-    }
-    this.player().playbackRate(newRate);
+    this.player().playbackRate(rates[newIndex]);
   }
 
   /**
diff --git a/test/unit/control-bar/playback-rate-menu/playback-rate-menu-button.test.js b/test/unit/control-bar/playback-rate-menu/playback-rate-menu-button.test.js
@@ -0,0 +1,52 @@
+/* eslint-env qunit */
+import PlaybackRateMenuButton from '../../../../src/js/control-bar/playback-rate-menu/playback-rate-menu-button';
+import TestHelpers from '../../test-helpers.js';
+import * as Events from '../../../../src/js/utils/events.js';
+
+QUnit.module('PlaybackRateMenuButton', {
+  beforeEach(assert) {
+    this.player = TestHelpers.makePlayer({
+      playbackRates: [1, 2, 3]
+    });
+  },
+  afterEach(assert) {
+    this.player.dispose();
+  }
+});
+
+QUnit.test('playback rate default value', function(assert) {
+  const currentRate = this.player.playbackRate();
+
+  assert.strictEqual(currentRate, 1, 'Playbackrate begins with value 1"');
+});
+
+QUnit.test('clicking should move to the next available rate', function(assert) {
+  const playbackRateMenu = new PlaybackRateMenuButton(this.player);
+
+  const el = playbackRateMenu.menuButton_.el();
+
+  Events.trigger(el, 'click');
+
+  const currentRate = this.player.playbackRate();
+
+  assert.strictEqual(currentRate, 2, 'Playbackrate changes to value 2"');
+});
+
+QUnit.test('keep clicking should move to all possible rates in loop', function(assert) {
+  const playbackRateMenu = new PlaybackRateMenuButton(this.player);
+
+  const el = playbackRateMenu.menuButton_.el();
+
+  Events.trigger(el, 'click');
+  let currentRate = this.player.playbackRate();
+
+  assert.strictEqual(currentRate, 2, 'Playbackrate changes to value 2"');
+
+  Events.trigger(el, 'click');
+  currentRate = this.player.playbackRate();
+  assert.strictEqual(currentRate, 3, 'Playbackrate changes to value 3"');
+
+  Events.trigger(el, 'click');
+  currentRate = this.player.playbackRate();
+  assert.strictEqual(currentRate, 1, 'Playbackrate changes back to value 1"');
+});
