feat(ui): Add configurable rates (shaka-project#3579)

Adds configurable options for playback, fast forward and rewind rates.
Closes: shaka-project#3443

docs/tutorials/ui-customization.md

@@ -163,6 +163,22 @@ const config = {
 ui.configure(config);
 ```
 
+#### Configuring playback, fast forward and rewind rates
+The rate in which the player can play, fast forward and rewind content can be configured using the `playbackRates`, `fastForwardRates` and `rewindRates` options.
+
+* `playbackRates`: List of rates available in the `playback_rate` menu.
+* `fastForwardRates`: List of rates available to cycle through every time the `fast_forward` button is clicked.
+* `rewindRates`: List of rates available to cycle through every time the `rewind` button is clicked.
+
+ ```js
+const config = {
+  'controlPanelElements': ['playback_rate', 'fast_forward', 'rewind'],
+  'playbackRates': [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
+  'fastForwardRates': [2, 4, 8, 1],
+  'rewindRates': [-1, -2, -4, -8],
+}
+ui.configure(config);
+```
 
 #### Creating custom elements and adding them to the UI
 It's possible to add custom application-specific buttons to the UI.

ui/externs/ui.js

@@ -65,6 +65,9 @@ shaka.extern.UIVolumeBarColors;
  *   overflowMenuButtons: !Array.<string>,
  *   contextMenuElements: !Array.<string>,
  *   statisticsList: !Array.<string>,
+ *   playbackRates: !Array.<number>,
+ *   fastForwardRates: !Array.<number>,
+ *   rewindRates: !Array.<number>,
  *   addSeekBar: boolean,
  *   addBigPlayButton: boolean,
  *   customContextMenu: boolean,
@@ -89,6 +92,12 @@ shaka.extern.UIVolumeBarColors;
  *   The ordered list of buttons in the context menu.
  * @property {!Array.<string>} statisticsList
  *   The ordered list of statistics present in the statistics container.
+ * @property {!Array.<number>} playbackRates
+ *   The ordered list of rates for playback selection.
+  * @property {!Array.<number>} fastForwardRates
+ *   The ordered list of rates for fast forward selection.
+ * @property {!Array.<number>} rewindRates
+ *   The ordered list of rates for rewind selection.
  * @property {boolean} addSeekBar
  *   Whether or not a seek bar should be part of the UI.
  * @property {boolean} addBigPlayButton

ui/fast_forward_button.js

@@ -37,6 +37,9 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
 
+    /** @private {!Array.<number>} */
+    this.fastForwardRates_ = this.controls.getConfig().fastForwardRates;
+
     this.eventManager.listen(
         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
           this.updateAriaLabel_();
@@ -61,7 +64,7 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
   }
 
   /**
-   * Cycles trick play rate between 1, 2, 4, and 8.
+   * Cycles trick play rate between the selected fast forward rates.
    * @private
    */
   fastForward_() {
@@ -70,10 +73,12 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
     }
 
     const trickPlayRate = this.player.getPlaybackRate();
-    // Every time the button is clicked, the rate is multiplied by 2,
-    // unless the rate is at max (8), in which case it is dropped back to 1.
-    const newRate = (trickPlayRate < 0 || trickPlayRate > 4) ?
-        1 : trickPlayRate * 2;
+    const newRateIndex = this.fastForwardRates_.indexOf(trickPlayRate) + 1;
+
+    // When the button is clicked, the next rate in this.fastForwardRates_ is
+    // selected. If no more rates are available, the first one is set.
+    const newRate = (newRateIndex != this.fastForwardRates_.length) ?
+        this.fastForwardRates_[newRateIndex] : this.fastForwardRates_[0];
     this.player.trickPlay(newRate);
   }
 };

ui/playback_rate_selection.js

@@ -48,15 +48,8 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
     });
 
     /** @type {!Map.<string, number>} */
-    this.playbackRates_ = new Map([
-      ['0.5x', 0.5],
-      ['0.75x', 0.75],
-      ['1x', 1],
-      ['1.25x', 1.25],
-      ['1.5x', 1.5],
-      ['1.75x', 1.75],
-      ['2x', 2],
-    ]);
+    this.playbackRates_ = new Map(this.controls.getConfig().playbackRates
+        .map((rate) => [rate + 'x', rate]));
 
     // Set up all the strings in the user's preferred language.
     this.updateLocalizedStrings_();

ui/rewind_button.js

@@ -37,6 +37,9 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
 
+    /** @private {!Array.<number>} */
+    this.rewindRates_ = this.controls.getConfig().rewindRates;
+
     this.eventManager.listen(
         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
           this.updateAriaLabel_();
@@ -61,7 +64,7 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
   }
 
   /**
-   * Cycles trick play rate between -1, -2, -4, and -8.
+   * Cycles trick play rate between the selected rewind rates.
    * @private
    */
   rewind_() {
@@ -70,11 +73,12 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
     }
 
     const trickPlayRate = this.player.getPlaybackRate();
-    // Every time the button is clicked, the rate is multiplied by 2,
-    // unless the rate is at it's slowest (-8), in which case it is
-    // dropped back to 1.
-    const newRate = (trickPlayRate > 0 || trickPlayRate < -4) ?
-        -1 : trickPlayRate * 2;
+    const newRateIndex = this.rewindRates_.indexOf(trickPlayRate) + 1;
+
+    // When the button is clicked, the next rate in this.rewindRates_ is
+    // selected. If no more rates are available, the first one is set.
+    const newRate = (newRateIndex != this.rewindRates_.length) ?
+        this.rewindRates_[newRateIndex] : this.rewindRates_[0];
     this.player.trickPlay(newRate);
   }
 };

ui/ui.js

@@ -209,6 +209,9 @@ shaka.ui.Overlay = class {
       contextMenuElements: [
         'statistics',
       ],
+      playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
+      fastForwardRates: [2, 4, 8, 1],
+      rewindRates: [-1, -2, -4, -8],
       addSeekBar: true,
       addBigPlayButton: false,
       customContextMenu: false,