From 82b223ea97f874754862fee36036fb4aec696a97 Mon Sep 17 00:00:00 2001 From: absidue <48293849+absidue@users.noreply.github.com> Date: Tue, 30 Nov 2021 22:08:33 +0000 Subject: [PATCH] Select current playback rate in playback rate selector (#1902) * Select current playback rate in playback rate selector * More concise implementation Co-authored-by: PikachuEXE * Scroll to the selected element instead of focusing it Co-authored-by: PikachuEXE --- .../ft-video-player/ft-video-player.js | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js index 6f924932..2a15d527 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -322,6 +322,36 @@ export default Vue.extend({ this.player.removeChild('BigPlayButton') } + // Makes the playback rate menu focus the current item on mouse hover + // or the closest item if the playback rate is between two items + // which is likely to be the case when the playback rate is changed by scrolling + const playbackRateMenuButton = this.player.controlBar.getChild('playbackRateMenuButton') + playbackRateMenuButton.on(playbackRateMenuButton.menuButton_, 'mouseenter', () => { + const playbackRate = this.player.playbackRate() + const rates = this.player.playbackRates() + + // iterate through the items in reverse order as the highest is displayed first + // `slice` must be used as `reverse` does reversing in place + const targetPlaybackRateMenuItemIndex = rates.slice().reverse().findIndex((rate) => { + return rate === playbackRate || rate < playbackRate + }) + + // center the selected item in the middle of the visible area + // the first and last items will never be in the center so it can be skipped for them + if (targetPlaybackRateMenuItemIndex !== 0 && targetPlaybackRateMenuItemIndex !== rates.length - 1) { + const playbackRateMenu = playbackRateMenuButton.menu + const menuElement = playbackRateMenu.contentEl() + + const itemHeight = playbackRateMenu.children()[targetPlaybackRateMenuItemIndex].contentEl().clientHeight + + // clientHeight is the height of the visible part of an element + const centerOfVisibleArea = (menuElement.clientHeight - itemHeight) / 2 + const menuScrollOffset = (itemHeight * targetPlaybackRateMenuItemIndex) - centerOfVisibleArea + + menuElement.scrollTo({ top: menuScrollOffset }) + } + }) + if (this.storyboardSrc !== '') { this.player.vttThumbnails({ src: this.storyboardSrc,