From f9f5223f2353fa268d4965ff766653e7271e3b79 Mon Sep 17 00:00:00 2001 From: Alex Stewart Date: Wed, 26 May 2021 15:55:11 +0000 Subject: [PATCH] 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 --- .../ft-video-player/ft-video-player.js | 10 +++++++++- .../player-settings/player-settings.js | 7 ++++++- .../player-settings/player-settings.vue | 6 ++++++ src/renderer/store/modules/settings.js | 19 +++++++++++++++++++ static/locales/en-US.yaml | 1 + static/locales/en_GB.yaml | 1 + 6 files changed, 42 insertions(+), 2 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 4df9f2c4..3177ddf8 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/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) diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js index 49a74d0d..f03baf8d 100644 --- a/src/renderer/components/player-settings/player-settings.js +++ b/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' ]) } }) diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue index 371eff7c..6594c1d7 100644 --- a/src/renderer/components/player-settings/player-settings.vue +++ b/src/renderer/components/player-settings/player-settings.vue @@ -37,6 +37,12 @@ :default-value="defaultTheatreMode" @change="updateDefaultTheatreMode" /> +
{ + 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 }, diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 1e248e16..c75b8f4d 100644 --- a/static/locales/en-US.yaml +++ b/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 diff --git a/static/locales/en_GB.yaml b/static/locales/en_GB.yaml index 31c786e5..5c5f4a07 100644 --- a/static/locales/en_GB.yaml +++ b/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: