diff --git a/demo/config.js b/demo/config.js index e790657a61..799bb41cf3 100644 --- a/demo/config.js +++ b/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', diff --git a/test/test/util/fake_demo_main.js b/test/test/util/fake_demo_main.js index 8d6ff9597f..c273efee81 100644 --- a/test/test/util/fake_demo_main.js +++ b/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, diff --git a/ui/externs/ui.js b/ui/externs/ui.js index 2d313a8786..3ec6c15a78 100644 --- a/ui/externs/ui.js +++ b/ui/externs/ui.js @@ -306,6 +306,7 @@ shaka.extern.UITrackLabelCallback; * playbackRates: !Array, * playbackRateSliderMin: number, * playbackRateSliderMax: number, + * playbackRateSliderStep: number, * fastForwardRates: !Array, * rewindRates: !Array, * addSeekBar: boolean, @@ -392,6 +393,10 @@ shaka.extern.UITrackLabelCallback; * button to the playback-rate menu. *
* Defaults to 3. + * @property {number} playbackRateSliderStep + * Step size used for playback rate slider interaction and the +/- buttons + *
+ * Defaults to 0.05. * @property {!Array} fastForwardRates * The ordered list of rates for fast forward selection. *
diff --git a/ui/playback_rate_selection.js b/ui/playback_rate_selection.js index b5df961ad5..d233e661ec 100644 --- a/ui/playback_rate_selection.js +++ b/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); + } +}; /** diff --git a/ui/ui.js b/ui/ui.js index 89451b29eb..8deac146cf 100644 --- a/ui/ui.js +++ b/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,