Allow changing volume by scrolling over any part of video player (#1254)

* Added toggle component to settings

* Setting to toggle this feature is now functional. Video volume can now be changed by scrolling anywhere on the video, or just on the slider, depending on this setting

* Added translation lines for en_US and en_GB

* Changed setting line from 'Scroll Volume Over Video' to 'Scroll Volume Over Video Player'

* Changed 'mousewheel' to 'wheel' event, as 'mousewheel' is deprecated

* Ran lint check in settings.js

Co-authored-by: Alex Stewart <albinexotech@gmail.com>

src/renderer/components/ft-video-player/ft-video-player.js

@@ -155,6 +155,10 @@ export default Vue.extend({
       return this.$store.getters.getAutoplayVideos
     },
 
+    videoVolumeMouseScroll: function () {
+      return this.$store.getters.getVideoVolumeMouseScroll
+    },
+
     useSponsorBlock: function () {
       return this.$store.getters.getUseSponsorBlock
     },
@@ -251,7 +255,11 @@ export default Vue.extend({
         this.player.on('mouseleave', this.removeMouseTimeout)
 
         this.player.on('volumechange', this.updateVolume)
-        this.player.controlBar.getChild('volumePanel').on('mousewheel', this.mouseScrollVolume)
+        if (this.videoVolumeMouseScroll) {
+          this.player.on('wheel', this.mouseScrollVolume)
+        } else {
+          this.player.controlBar.getChild('volumePanel').on('wheel', this.mouseScrollVolume)
+        }
 
         this.player.on('fullscreenchange', this.fullscreenOverlay)
         this.player.on('fullscreenchange', this.toggleFullscreenClass)

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

@@ -90,6 +90,10 @@ export default Vue.extend({
       return this.$store.getters.getHideRecommendedVideos
     },
 
+    videoVolumeMouseScroll: function () {
+      return this.$store.getters.getVideoVolumeMouseScroll
+    },
+
     formatNames: function () {
       return [
         this.$t('Settings.Player Settings.Default Video Format.Dash Formats'),
@@ -127,7 +131,8 @@ export default Vue.extend({
       'updateDefaultVolume',
       'updateDefaultPlayback',
       'updateDefaultVideoFormat',
-      'updateDefaultQuality'
+      'updateDefaultQuality',
+      'updateVideoVolumeMouseScroll'
     ])
   }
 })

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

@@ -37,6 +37,12 @@
           :default-value="defaultTheatreMode"
           @change="updateDefaultTheatreMode"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Player Settings.Scroll Volume Over Video Player')"
+          :compact="true"
+          :default-value="videoVolumeMouseScroll"
+          @change="updateVideoVolumeMouseScroll"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch

src/renderer/store/modules/settings.js

@@ -77,6 +77,7 @@ const state = {
   hidePlaylists: false,
   hideLiveChat: false,
   hideActiveSubscriptions: false,
+  videoVolumeMouseScroll: false,
   useSponsorBlock: false,
   sponsorBlockUrl: 'https://sponsor.ajay.app',
   sponsorBlockShowSkippedToast: true
@@ -267,6 +268,10 @@ const getters = {
     return state.hideActiveSubscriptions
   },
 
+  getVideoVolumeMouseScroll: () => {
+    return state.videoVolumeMouseScroll
+  },
+
   getUseSponsorBlock: () => {
     return state.useSponsorBlock
   },
@@ -432,6 +437,9 @@ const actions = {
               case 'hideActiveSubscriptions':
                 commit('setHideActiveSubscriptions', result.value)
                 break
+              case 'videoVolumeMouseScroll':
+                commit('setVideoVolumeMouseScroll', result.value)
+                break
               case 'useSponsorBlock':
                 commit('setUseSponsorBlock', result.value)
                 break
@@ -811,6 +819,14 @@ const actions = {
     })
   },
 
+  updateVideoVolumeMouseScroll ({ commit }, videoVolumeMouseScroll) {
+    settingsDb.update({ _id: 'videoVolumeMouseScroll' }, { _id: 'videoVolumeMouseScroll', value: videoVolumeMouseScroll }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setVideoVolumeMouseScroll', videoVolumeMouseScroll)
+      }
+    })
+  },
+
   updateUseSponsorBlock ({ commit }, useSponsorBlock) {
     settingsDb.update({ _id: 'useSponsorBlock' }, { _id: 'useSponsorBlock', value: useSponsorBlock }, { upsert: true }, (err, numReplaced) => {
       if (!err) {
@@ -992,6 +1008,9 @@ const mutations = {
   setHideActiveSubscriptions (state, hideActiveSubscriptions) {
     state.hideActiveSubscriptions = hideActiveSubscriptions
   },
+  setVideoVolumeMouseScroll (state, videoVolumeMouseScroll) {
+    state.videoVolumeMouseScroll = videoVolumeMouseScroll
+  },
   setUseSponsorBlock (state, useSponsorBlock) {
     state.useSponsorBlock = useSponsorBlock
   },

static/locales/en-US.yaml

@@ -173,6 +173,7 @@ Settings:
     Proxy Videos Through Invidious: Proxy Videos Through Invidious
     Autoplay Playlists: Autoplay Playlists
     Enable Theatre Mode by Default: Enable Theatre Mode by Default
+    Scroll Volume Over Video Player: Scroll Volume Over Video Player
     Next Video Interval: Next Video Interval
     Default Volume: Default Volume
     Default Playback Rate: Default Playback Rate

static/locales/en_GB.yaml

@@ -170,6 +170,7 @@ Settings:
     Proxy Videos Through Invidious: 'Proxy Videos Through Invidious'
     Autoplay Playlists: 'Autoplay Playlists'
     Enable Theatre Mode by Default: 'Enable Theatre Mode by Default'
+    Scroll Volume Over Video Player: 'Scroll Volume Over Video Player'
     Default Volume: 'Default Volume'
     Default Playback Rate: 'Default Playback Rate'
     Default Video Format: