From f65b093d40f1c1f0d4e5e8e47fcc128ff3ca74ea Mon Sep 17 00:00:00 2001 From: Nico <48532672+nbcl@users.noreply.github.com> Date: Mon, 23 Aug 2021 12:22:27 -0400 Subject: [PATCH] feat(ui): Add configurable rates (#3579) Adds configurable options for playback, fast forward and rewind rates. Closes: #3443 --- docs/tutorials/ui-customization.md | 16 ++++++++++++++++ ui/externs/ui.js | 9 +++++++++ ui/fast_forward_button.js | 15 ++++++++++----- ui/playback_rate_selection.js | 11 ++--------- ui/rewind_button.js | 16 ++++++++++------ ui/ui.js | 3 +++ 6 files changed, 50 insertions(+), 20 deletions(-) diff --git a/docs/tutorials/ui-customization.md b/docs/tutorials/ui-customization.md index bcbbe724ae..a589567f6a 100644 --- a/docs/tutorials/ui-customization.md +++ b/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. diff --git a/ui/externs/ui.js b/ui/externs/ui.js index 3780ce3387..938ab6ca48 100644 --- a/ui/externs/ui.js +++ b/ui/externs/ui.js @@ -65,6 +65,9 @@ shaka.extern.UIVolumeBarColors; * overflowMenuButtons: !Array., * contextMenuElements: !Array., * statisticsList: !Array., + * playbackRates: !Array., + * fastForwardRates: !Array., + * rewindRates: !Array., * addSeekBar: boolean, * addBigPlayButton: boolean, * customContextMenu: boolean, @@ -89,6 +92,12 @@ shaka.extern.UIVolumeBarColors; * The ordered list of buttons in the context menu. * @property {!Array.} statisticsList * The ordered list of statistics present in the statistics container. + * @property {!Array.} playbackRates + * The ordered list of rates for playback selection. + * @property {!Array.} fastForwardRates + * The ordered list of rates for fast forward selection. + * @property {!Array.} 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 diff --git a/ui/fast_forward_button.js b/ui/fast_forward_button.js index db21c453bf..5d65ceb142 100644 --- a/ui/fast_forward_button.js +++ b/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.} */ + 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); } }; diff --git a/ui/playback_rate_selection.js b/ui/playback_rate_selection.js index 6c0bd30130..fa2e3cf841 100644 --- a/ui/playback_rate_selection.js +++ b/ui/playback_rate_selection.js @@ -48,15 +48,8 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu { }); /** @type {!Map.} */ - 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_(); diff --git a/ui/rewind_button.js b/ui/rewind_button.js index 071330042d..25ac160bc4 100644 --- a/ui/rewind_button.js +++ b/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.} */ + 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); } }; diff --git a/ui/ui.js b/ui/ui.js index c0ec067be0..47e9d6236c 100644 --- a/ui/ui.js +++ b/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,