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

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

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

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,

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

src/invidious/views/user/preferences.ecr

@@ -46,6 +46,11 @@
                 </select>
             </div>
 
+            <div class="pure-control-group">
+                <label for="toggle_speed_onscroll"><%= translate(locale, "preferences_toggle_speed_onscroll_label") %></label>
+                <input name="toggle_speed_onscroll" id="toggle_speed_onscroll" type="checkbox" <% if preferences.toggle_speed_onscroll %>checked<% end %>>
+            </div>
+
             <div class="pure-control-group">
                 <label for="quality"><%= translate(locale, "preferences_quality_label") %></label>
                 <select name="quality" id="quality">