feat(UI): Add UI setting playbackRateSliderStep

demo/config.js

@@ -1249,6 +1249,9 @@ shakaDemo.Config = class {
         .addUINumberInput_('Playback Rate Slider Max',
             'playbackRateSliderMax',
             /* canBeDecimal= */ true)
+        .addUINumberInput_('Playback Rate Slider Step',
+            'playbackRateSliderStep',
+            /* canBeDecimal= */ true)
         .addUIArrayNumberInput_('Fast Forward Rates', 'fastForwardRates')
         .addUIArrayNumberInput_('Rewind Rates', 'rewindRates')
         .addUIArrayNumberInput_('Captions Font Scale Factors',

test/test/util/fake_demo_main.js

@@ -33,6 +33,7 @@ shaka.test.FakeDemoMain = class {
       playbackRates: [1, 1.25, 1.5, 2, 3],
       playbackRateSliderMin: 0.5,
       playbackRateSliderMax: 3,
+      playbackRateSliderStep: 0.05,
       fastForwardRates: [2, 4, 8, 1],
       rewindRates: [-1, -2, -4, -8],
       addSeekBar: true,

ui/externs/ui.js

@@ -306,6 +306,7 @@ shaka.extern.UITrackLabelCallback;
  *   playbackRates: !Array<number>,
  *   playbackRateSliderMin: number,
  *   playbackRateSliderMax: number,
+ *   playbackRateSliderStep: number,
  *   fastForwardRates: !Array<number>,
  *   rewindRates: !Array<number>,
  *   addSeekBar: boolean,
@@ -392,6 +393,10 @@ shaka.extern.UITrackLabelCallback;
  *   button to the playback-rate menu.
  *   <br>
  *   Defaults to <code>3</code>.
+ * @property {number} playbackRateSliderStep
+ *   Step size used for playback rate slider interaction and the +/- buttons
+ *   <br>
+ *   Defaults to <code>0.05</code>.
  * @property {!Array<number>} fastForwardRates
  *   The ordered list of rates for fast forward selection.
  *   <br>

ui/playback_rate_selection.js

@@ -97,6 +97,8 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
 
   /** @private */
   buildUI_() {
+    const config = this.controls.getConfig();
+
     // Slider section
     const sliderSection = shaka.util.Dom.createHTMLElement('div');
     sliderSection.classList.add('shaka-playback-rate-slider-section');
@@ -128,7 +130,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
         /* barClassNames= */ ['shaka-playback-rate-slider'],
         /* enableWheel= */ true);
 
-    this.rateSlider_.setStep(shaka.ui.PlaybackRateSelection.SLIDER_STEP);
+    this.rateSlider_.setStep(config.playbackRateSliderStep);
 
     this.rateSlider_.onChange = () => {
       this.applyRate_(this.rateSlider_.getValue());
@@ -147,10 +149,10 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
 
     // Step-button listeners.
     this.eventManager.listen(this.decreaseButton_, 'click', () => {
-      this.stepRate_(-shaka.ui.PlaybackRateSelection.SLIDER_STEP);
+      this.stepRate_(-this.controls.getConfig().playbackRateSliderStep);
     });
     this.eventManager.listen(this.increaseButton_, 'click', () => {
-      this.stepRate_(shaka.ui.PlaybackRateSelection.SLIDER_STEP);
+      this.stepRate_(this.controls.getConfig().playbackRateSliderStep);
     });
 
     // Preset pill buttons (horizontal)
@@ -189,7 +191,8 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
   }
 
   /**
-   * Steps the playback rate by `delta`, snapped to SLIDER_STEP and clamped to
+   * Steps the playback rate by `delta`, snapped to
+   * `config.playbackRateSliderStep` and clamped to
    * the configured [playbackRateSliderMin, playbackRateSliderMax] range.
    *
    * Snapping the current rate to the step grid before adding delta ensures that
@@ -204,7 +207,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
     const config = this.controls.getConfig();
     const min = config.playbackRateSliderMin;
     const max = config.playbackRateSliderMax;
-    const step = shaka.ui.PlaybackRateSelection.SLIDER_STEP;
+    const step = config.playbackRateSliderStep;
 
     const current = this.player.getPlaybackRate();
     // Snap current rate to the nearest step grid point, then apply delta.
@@ -281,6 +284,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
       this.playbackRateMark_.textContent = rate + 'x';
     }
     this.updateColors_();
+    this.updateStep_();
   }
 
   /**
@@ -322,14 +326,13 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
     this.rateSlider_.setBackground(
         'linear-gradient(' + gradient.join(',') + ')');
   }
-};
 
-
-/**
- * Step size used for slider interaction and the +/- buttons.
- * @const {number}
- */
-shaka.ui.PlaybackRateSelection.SLIDER_STEP = 0.05;
+  /** @private */
+  updateStep_() {
+    const config = this.controls.getConfig();
+    this.rateSlider_.setStep(config.playbackRateSliderStep);
+  }
+};
 
 
 /**

ui/ui.js

@@ -368,6 +368,7 @@ shaka.ui.Overlay = class {
       playbackRates: [1, 1.25, 1.5, 2, 3],
       playbackRateSliderMin: 0.5,
       playbackRateSliderMax: 3,
+      playbackRateSliderStep: 0.05,
       fastForwardRates: [2, 4, 8, 1],
       rewindRates: [-1, -2, -4, -8],
       addSeekBar: true,