Option to skip through the video by scrolling (#2418)

* initial commit

* remove extra play button toggle

* add missing comment

Co-authored-by: Alin <ai6@tutanota.com>
Co-authored-by: ChunkyPtogrammer <78101139+ChunkyProgrammer@users.noreply.github.com>

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) {

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',

src/renderer/components/player-settings/player-settings.vue

@@ -35,6 +35,7 @@
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Scroll Volume Over Video Player')"
           :compact="true"
+          :disabled="videoSkipMouseScroll"
           :default-value="videoVolumeMouseScroll"
           @change="updateVideoVolumeMouseScroll"
         />
@@ -45,6 +46,14 @@
           :tooltip="$t('Tooltips.Player Settings.Scroll Playback Rate Over Video Player')"
           @change="updateVideoPlaybackRateMouseScroll"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Player Settings.Skip by Scrolling Over Video Player')"
+          :compact="true"
+          :disabled="videoVolumeMouseScroll"
+          :default-value="videoSkipMouseScroll"
+          :tooltip="$t('Tooltips.Player Settings.Skip by Scrolling Over Video Player')"
+          @change="updateVideoSkipMouseScroll"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch

src/renderer/store/modules/settings.js

@@ -266,6 +266,7 @@ const state = {
   useSponsorBlock: false,
   videoVolumeMouseScroll: false,
   videoPlaybackRateMouseScroll: false,
+  videoSkipMouseScroll: false,
   videoPlaybackRateInterval: 0.25,
   downloadFolderPath: '',
   downloadBehavior: 'download',

static/locales/en-US.yaml

@@ -237,6 +237,7 @@ Settings:
     Enable Theatre Mode by Default: Enable Theatre Mode by Default
     Scroll Volume Over Video Player: Scroll Volume Over Video Player
     Scroll Playback Rate Over Video Player: Scroll Playback Rate Over Video Player
+    Skip by Scrolling Over Video Player: Skip by Scrolling Over Video Player
     Display Play Button In Video Player: Display Play Button In Video Player
     Enter Fullscreen on Display Rotate: Enter Fullscreen on Display Rotate
     Next Video Interval: Next Video Interval
@@ -775,6 +776,7 @@ Tooltips:
       hold the Control key (Command Key on Mac) and scroll the mouse wheel forwards or backwards to control
       the playback rate. Press and hold the Control key (Command Key on Mac) and left click the mouse
       to quickly return to the default playback rate (1x unless it has been changed in the settings).
+    Skip by Scrolling Over Video Player: Use the scroll wheel to skip through the video, MPV style.
   External Player Settings:
     External Player: Choosing an external player will display an icon, for opening the
       video (playlist if supported) in the external player, on the thumbnail. Warning, Invidious settings do not affect external players.