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 ba1b24cf52150..dbe7f49aef90b 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -182,6 +182,10 @@ export default Vue.extend({ return this.$store.getters.getVideoPlaybackRateMouseScroll }, + videoSkipMouseScroll: function () { + return this.$store.getters.getVideoSkipMouseScroll + }, + useSponsorBlock: function () { return this.$store.getters.getUseSponsorBlock }, @@ -478,6 +482,9 @@ export default Vue.extend({ this.player.el_.firstChild.style.pointerEvents = 'none' this.player.on('click', this.handlePlayerClick) } + if (this.videoSkipMouseScroll) { + this.player.on('wheel', this.mouseScrollSkip) + } this.player.on('fullscreenchange', this.fullscreenOverlay) this.player.on('fullscreenchange', this.toggleFullscreenClass) @@ -721,6 +728,20 @@ export default Vue.extend({ } }, + mouseScrollSkip: function (event) { + // ensure that the mouse is over the player + if (event.target && (event.target.matches('.vjs-tech') || event.target.matches('.ftVideoPlayer'))) { + event.preventDefault() + + if (event.wheelDelta > 0) { + this.changeDurationBySeconds(this.defaultSkipInterval * this.player.playbackRate()) + } + if (event.wheelDelta < 0) { + this.changeDurationBySeconds(-this.defaultSkipInterval * this.player.playbackRate()) + } + } + }, + handlePlayerClick: function (event) { if (event.target.matches('.ftVideoPlayer')) { if (event.ctrlKey || event.metaKey) { diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js index 8084b5a530ceb..c2c7551bd952c 100644 --- a/src/renderer/components/player-settings/player-settings.js +++ b/src/renderer/components/player-settings/player-settings.js @@ -129,6 +129,10 @@ export default Vue.extend({ return this.$store.getters.getVideoPlaybackRateMouseScroll }, + videoSkipMouseScroll: function () { + return this.$store.getters.getVideoSkipMouseScroll + }, + displayVideoPlayButton: function () { return this.$store.getters.getDisplayVideoPlayButton }, @@ -274,6 +278,7 @@ export default Vue.extend({ 'updateDefaultQuality', 'updateVideoVolumeMouseScroll', 'updateVideoPlaybackRateMouseScroll', + 'updateVideoSkipMouseScroll', 'updateDisplayVideoPlayButton', 'updateEnterFullscreenOnDisplayRotate', 'updateMaxVideoPlaybackRate', diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue index 3112abcbaa8ca..43fd0cbb34890 100644 --- a/src/renderer/components/player-settings/player-settings.vue +++ b/src/renderer/components/player-settings/player-settings.vue @@ -35,6 +35,7 @@ @@ -45,6 +46,14 @@ :tooltip="$t('Tooltips.Player Settings.Scroll Playback Rate Over Video Player')" @change="updateVideoPlaybackRateMouseScroll" /> +