lasers
/
FreeTube
mirror of https://github.com/FreeTubeApp/FreeTube
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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>
This commit is contained in:
Cody Sechelski 2021-11-24 15:52:56 -06:00 committed by GitHub
parent 12a511d34c
commit 37051d8518
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 88 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/renderer/components/ft-video-player/ft-video-player.js
View File

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

5
src/renderer/components/player-settings/player-settings.js
View File

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

9
src/renderer/components/player-settings/player-settings.vue
View File

@ -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"

3
src/renderer/store/modules/settings.js
View File

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

5
static/locales/en-US.yaml
View File

@ -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.