From 37051d8518315f5cfe6fdec3f34b93e3ff003a19 Mon Sep 17 00:00:00 2001 From: Cody Sechelski Date: Wed, 24 Nov 2021 15:52:56 -0600 Subject: [PATCH] Ctrl plus scroll to change playback rate (#1745) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * added the setting to toggle the 'scroll playback rate over video player' on and off. Set the default to off * • Added Setting to toggle the 'ctrl+scroll for playback rate' feature • Added the label and tooltip to the en-US local file • Added the ctrl+scroll functionality to the video player component • Added the ctrl+click functionality to the video player component • Modified the existing scroll to change volume funtionality to ignore the event if the ctrl key is pressed * changed the max playrate to 8 in Player Settings. Changed the available playrate options in the video player component popup menu to go up to 8 in steps of .25 * reverted back to hard coded values for playback rates * opps, forgot to remove the playbackRates method. It has been removed now. * fixed (at lesast I think) the hacky way I was overwriding the click handler. Also added a check for event.meteKey for mac users. * added a check for if the metakey is pressedin the the mosueScrollVlumne method * made a slight change to the tooltip text. The point of this commit is just to try and get the tests to re-run after I marked the PR as ready for review. * added 'event.metaKey' back to the 'mouseScrollPlaybackRate' method. Not sure how I ended up leaving it off a few commits ago Co-authored-by: Cody Sechelski --- .../ft-video-player/ft-video-player.js | 74 +++++++++++++++++-- .../player-settings/player-settings.js | 5 ++ .../player-settings/player-settings.vue | 9 ++- src/renderer/store/modules/settings.js | 3 +- static/locales/en-US.yaml | 5 ++ 5 files changed, 88 insertions(+), 8 deletions(-) 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 5389dc052..6f9249325 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -131,7 +131,27 @@ export default Vue.extend({ 2.25, 2.5, 2.75, - 3 + 3, + 3.25, + 3.5, + 3.75, + 4, + 4.25, + 4.5, + 4.75, + 5, + 5.25, + 5.5, + 5.75, + 6, + 6.25, + 6.5, + 6.75, + 7, + 7.25, + 7.5, + 7.75, + 8 ] }, stats: { @@ -194,6 +214,10 @@ export default Vue.extend({ return this.$store.getters.getVideoVolumeMouseScroll }, + videoPlaybackRateMouseScroll: function () { + return this.$store.getters.getVideoPlaybackRateMouseScroll + }, + useSponsorBlock: function () { return this.$store.getters.getUseSponsorBlock }, @@ -342,6 +366,14 @@ export default Vue.extend({ this.player.controlBar.getChild('volumePanel').on('wheel', this.mouseScrollVolume) } + if (this.videoPlaybackRateMouseScroll) { + this.player.on('wheel', this.mouseScrollPlaybackRate) + // Removes the 'out-of-the-box' click event and adds a custom click event so that a user can + // ctrl-click (or command+click on a mac) without toggling play/pause + this.player.el_.firstChild.style.pointerEvents = 'none' + this.player.on('click', this.handlePlayerClick) + } + this.player.on('fullscreenchange', this.fullscreenOverlay) this.player.on('fullscreenchange', this.toggleFullscreenClass) @@ -526,11 +558,41 @@ export default Vue.extend({ this.player.volume(0) } - if (!this.player.muted()) { + if (!event.ctrlKey && !event.metaKey) { + if (!this.player.muted()) { + if (event.wheelDelta > 0) { + this.changeVolume(0.05) + } else if (event.wheelDelta < 0) { + this.changeVolume(-0.05) + } + } + } + } + }, + + mouseScrollPlaybackRate: function (event) { + if (event.target && !event.currentTarget.querySelector('.vjs-menu:hover')) { + event.preventDefault() + + if (event.ctrlKey || event.metaKey) { if (event.wheelDelta > 0) { - this.changeVolume(0.05) + this.changePlayBackRate(0.05) } else if (event.wheelDelta < 0) { - this.changeVolume(-0.05) + this.changePlayBackRate(-0.05) + } + } + } + }, + + handlePlayerClick: function (event) { + if (event.target.matches('.ftVideoPlayer')) { + if (event.ctrlKey || event.metaKey) { + this.player.playbackRate(this.defaultPlayback) + } else { + if (this.player.paused() || !this.player.hasStarted()) { + this.player.play() + } else { + this.player.pause() } } } @@ -904,9 +966,9 @@ export default Vue.extend({ }, changePlayBackRate: function (rate) { - const newPlaybackRate = this.player.playbackRate() + rate + const newPlaybackRate = (this.player.playbackRate() + rate).toFixed(2) - if (newPlaybackRate >= 0.25 && newPlaybackRate <= 3) { + if (newPlaybackRate >= 0.25 && newPlaybackRate <= 8) { this.player.playbackRate(newPlaybackRate) } }, diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js index 724acf285..55e24c81a 100644 --- a/src/renderer/components/player-settings/player-settings.js +++ b/src/renderer/components/player-settings/player-settings.js @@ -98,6 +98,10 @@ export default Vue.extend({ return this.$store.getters.getVideoVolumeMouseScroll }, + videoPlaybackRateMouseScroll: function () { + return this.$store.getters.getVideoPlaybackRateMouseScroll + }, + displayVideoPlayButton: function () { return this.$store.getters.getDisplayVideoPlayButton }, @@ -138,6 +142,7 @@ export default Vue.extend({ 'updateDefaultVideoFormat', 'updateDefaultQuality', 'updateVideoVolumeMouseScroll', + 'updateVideoPlaybackRateMouseScroll', 'updateDisplayVideoPlayButton' ]) } diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue index cf258e38d..f6f808429 100644 --- a/src/renderer/components/player-settings/player-settings.vue +++ b/src/renderer/components/player-settings/player-settings.vue @@ -42,6 +42,13 @@ :default-value="videoVolumeMouseScroll" @change="updateVideoVolumeMouseScroll" /> +