Ctrl plus scroll to change playback rate (#1745)

* 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 <codysechelski@RMC02G68EYMD6R.local>

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)
       }
     },

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'
     ])
   }

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

@@ -42,6 +42,13 @@
           :default-value="videoVolumeMouseScroll"
           @change="updateVideoVolumeMouseScroll"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Player Settings.Scroll Playback Rate Over Video Player')"
+          :compact="true"
+          :default-value="videoPlaybackRateMouseScroll"
+          :tooltip="$t('Tooltips.Player Settings.Scroll Playback Rate Over Video Player')"
+          @change="updateVideoPlaybackRateMouseScroll"
+        />
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Display Play Button In Video Player')"
           :compact="true"
@@ -103,7 +110,7 @@
         :label="$t('Settings.Player Settings.Default Playback Rate')"
         :default-value="defaultPlayback"
         :min-value="0.25"
-        :max-value="3"
+        :max-value="8"
         :step="0.25"
         value-extension="×"
         @change="updateDefaultPlayback"

src/renderer/store/modules/settings.js

@@ -214,7 +214,8 @@ const state = {
   useProxy: false,
   useRssFeeds: false,
   useSponsorBlock: false,
-  videoVolumeMouseScroll: false
+  videoVolumeMouseScroll: false,
+  videoPlaybackRateMouseScroll: false
 }
 
 const stateWithSideEffects = {

static/locales/en-US.yaml

@@ -202,6 +202,7 @@ Settings:
     Autoplay Playlists: Autoplay Playlists
     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
     Display Play Button In Video Player: Display Play Button In Video Player
     Next Video Interval: Next Video Interval
     Fast-Forward / Rewind Interval: Fast-Forward / Rewind Interval
@@ -656,6 +657,10 @@ Tooltips:
     Default Video Format: Set the formats used when a video plays. DASH formats can
       play higher qualities. Legacy formats are limited to a max of 720p but use less
       bandwidth. Audio formats are audio only streams.
+    Scroll Playback Rate Over Video Player: While the cursor is over the video, press and
+      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).
   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.