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 5389dc05..6f924932 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.js
+++ b/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)
}
},
diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js
index 724acf28..55e24c81 100644
--- a/src/renderer/components/player-settings/player-settings.js
+++ b/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'
])
}
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index cf258e38..f6f80842 100644
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/src/renderer/components/player-settings/player-settings.vue
@@ -42,6 +42,13 @@
:default-value="videoVolumeMouseScroll"
@change="updateVideoVolumeMouseScroll"
/>
+