From 3512a3fe2bb0db6662f3858bd6c2d6e9a3881495 Mon Sep 17 00:00:00 2001 From: Daniil Date: Wed, 22 Nov 2023 11:20:21 +0200 Subject: [PATCH 1/5] Control speed of playback using mousewheel Allow user to control playback speed by hovering over "playback rate" button and scrolling on mouse. Clicking on the button will still increment speed in pre-defined steps, unless the speed is custom. --- assets/js/player.js | 55 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 50 insertions(+), 5 deletions(-) diff --git a/assets/js/player.js b/assets/js/player.js index 16bb2752..6b4f864e 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -580,11 +580,29 @@ function toggle_fullscreen() { } function increase_playback_rate(steps) { - const maxIndex = options.playbackRates.length - 1; - const curIndex = options.playbackRates.indexOf(player.playbackRate()); - let newIndex = curIndex + steps; - newIndex = helpers.clamp(newIndex, 0, maxIndex); - player.playbackRate(options.playbackRates[newIndex]); + let speed = player.playbackRate(); + + // Considering 1/-1 as step against pre-defined speeds, + // otherwise treat as absolute change + if (steps == 1 || steps == -1) { + // If current speed is not pre-defined, reset it to 1 + if (!options.playbackRates.includes(speed)) { + speed = 1; + } + else { + const maxIndex = options.playbackRates.length - 1; + const curIndex = options.playbackRates.indexOf(player.playbackRate()); + let newIndex = curIndex + steps; + newIndex = helpers.clamp(newIndex, 0, maxIndex); + speed = options.playbackRates[newIndex] + } + } + else { + speed += steps; + speed = parseFloat(speed.toFixed(2)); + } + + player.playbackRate(speed); } addEventListener('keydown', function (e) { @@ -721,6 +739,33 @@ addEventListener('keydown', function (e) { player.on('DOMMouseScroll', mouseScroll); }()); +(function () { + const pEl = document.getElementById('player'); + + var speedHover = false; + var speedSelector = pEl.querySelector('.vjs-playback-rate'); + if (speedSelector !== null) { + speedSelector.onmouseover = function () { speedHover = true; }; + speedSelector.onmouseout = function () { speedHover = false; }; + // Increase speed by a single step when pre-defined, or reset + speedSelector.onclick = function() { increase_playback_rate(1); }; + } + + function mouseScroll(event) { + // When controls are disabled, hotkeys will be disabled as well + if (!player.controls() || !speedHover) return; + + event.preventDefault(); + var wheelMove = event.wheelDelta || -event.detail; + var speedSign = Math.sign(wheelMove); + + increase_playback_rate(speedSign * 0.10); // increase speed by .10 + } + + player.on('mousewheel', mouseScroll); + player.on('DOMMouseScroll', mouseScroll); +}()); + // Since videojs-share can sometimes be blocked, we defer it until last if (player.share) player.share(shareOptions); From c3c73cd672796241b8c1f9e683d5e15bfac54e45 Mon Sep 17 00:00:00 2001 From: Daniil Date: Wed, 22 Nov 2023 12:48:35 +0200 Subject: [PATCH 2/5] Add configuration option for user to toggle scrollable playback speed Give user ability to select in preferencesif they want to control speed granually using scrollwheel. --- assets/js/player.js | 25 +++++++++++++++--------- src/invidious/config.cr | 1 + src/invidious/routes/preferences.cr | 5 +++++ src/invidious/user/preferences.cr | 1 + src/invidious/views/user/preferences.ecr | 5 +++++ 5 files changed, 28 insertions(+), 9 deletions(-) diff --git a/assets/js/player.js b/assets/js/player.js index 6b4f864e..29084def 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -579,7 +579,7 @@ function toggle_fullscreen() { player.isFullscreen() ? player.exitFullscreen() : player.requestFullscreen(); } -function increase_playback_rate(steps) { +function increase_playback_rate(steps, scrollAction=false) { let speed = player.playbackRate(); // Considering 1/-1 as step against pre-defined speeds, @@ -592,9 +592,15 @@ function increase_playback_rate(steps) { else { const maxIndex = options.playbackRates.length - 1; const curIndex = options.playbackRates.indexOf(player.playbackRate()); - let newIndex = curIndex + steps; - newIndex = helpers.clamp(newIndex, 0, maxIndex); - speed = options.playbackRates[newIndex] + // Reset speed if maximum selected + if (curIndex == maxIndex) { + speed = 1; + } + else{ + let newIndex = curIndex + steps; + newIndex = helpers.clamp(newIndex, 0, maxIndex); + speed = options.playbackRates[newIndex]; + } } } else { @@ -744,16 +750,17 @@ addEventListener('keydown', function (e) { var speedHover = false; var speedSelector = pEl.querySelector('.vjs-playback-rate'); + var allowscroll = video_data.preferences.toggle_speed_onscroll; if (speedSelector !== null) { speedSelector.onmouseover = function () { speedHover = true; }; speedSelector.onmouseout = function () { speedHover = false; }; - // Increase speed by a single step when pre-defined, or reset - speedSelector.onclick = function() { increase_playback_rate(1); }; + // Increase speed by a single step, or reset when scrollable + speedSelector.onclick = function() { allowscroll ? player.playbackRate(video_data.preferences.speed) : increase_playback_rate(1); }; } function mouseScroll(event) { // When controls are disabled, hotkeys will be disabled as well - if (!player.controls() || !speedHover) return; + if (!player.controls() || !speedHover || !allowscroll) return; event.preventDefault(); var wheelMove = event.wheelDelta || -event.detail; @@ -762,8 +769,8 @@ addEventListener('keydown', function (e) { increase_playback_rate(speedSign * 0.10); // increase speed by .10 } - player.on('mousewheel', mouseScroll); - player.on('DOMMouseScroll', mouseScroll); + player.on('mousewheel', mouseScroll); + player.on('DOMMouseScroll', mouseScroll); }()); // Since videojs-share can sometimes be blocked, we defer it until last diff --git a/src/invidious/config.cr b/src/invidious/config.cr index 429d9246..b7e7c030 100644 --- a/src/invidious/config.cr +++ b/src/invidious/config.cr @@ -36,6 +36,7 @@ struct ConfigPreferences property related_videos : Bool = true property sort : String = "published" property speed : Float32 = 1.0_f32 + property toggle_speed_onscroll : Bool = false property thin_mode : Bool = false property unseen_only : Bool = false property video_loop : Bool = false diff --git a/src/invidious/routes/preferences.cr b/src/invidious/routes/preferences.cr index 112535bd..7b002a3f 100644 --- a/src/invidious/routes/preferences.cr +++ b/src/invidious/routes/preferences.cr @@ -54,6 +54,10 @@ module Invidious::Routes::PreferencesRoute speed = env.params.body["speed"]?.try &.as(String).to_f32? speed ||= CONFIG.default_user_preferences.speed + toggle_speed_onscroll = env.params.body["toggle_speed_onscroll"]?.try &.as(String) + toggle_speed_onscroll ||= "off" + toggle_speed_onscroll = toggle_speed_onscroll == "on" + player_style = env.params.body["player_style"]?.try &.as(String) player_style ||= CONFIG.default_user_preferences.player_style @@ -167,6 +171,7 @@ module Invidious::Routes::PreferencesRoute related_videos: related_videos, sort: sort, speed: speed, + toggle_speed_onscroll: toggle_speed_onscroll, thin_mode: thin_mode, unseen_only: unseen_only, video_loop: video_loop, diff --git a/src/invidious/user/preferences.cr b/src/invidious/user/preferences.cr index b3059403..01e7cd0a 100644 --- a/src/invidious/user/preferences.cr +++ b/src/invidious/user/preferences.cr @@ -49,6 +49,7 @@ struct Preferences @[JSON::Field(converter: Preferences::ProcessString)] property sort : String = CONFIG.default_user_preferences.sort property speed : Float32 = CONFIG.default_user_preferences.speed + property toggle_speed_onscroll : Bool = CONFIG.default_user_preferences.toggle_speed_onscroll property thin_mode : Bool = CONFIG.default_user_preferences.thin_mode property unseen_only : Bool = CONFIG.default_user_preferences.unseen_only property video_loop : Bool = CONFIG.default_user_preferences.video_loop diff --git a/src/invidious/views/user/preferences.ecr b/src/invidious/views/user/preferences.ecr index 55349c5a..91b89d07 100644 --- a/src/invidious/views/user/preferences.ecr +++ b/src/invidious/views/user/preferences.ecr @@ -46,6 +46,11 @@ +
+ + checked<% end %>> +
+