feat: volume slider scroll sensitivity

assets/translations/README.md

@@ -6,15 +6,15 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 ### Translation progress:
 | Locale | Translated keys | Based on |
 | ------ | --------------- | :------: |
-| `en_US` | 101 (default locale) | ─ |
-| `de_DE` | 🚫 `97/101` (96.0%) | ─ |
-| `en_UK` | ✅ `101/101` (100.0%) | `en_US` |
-| `es_ES` | 🚫 `97/101` (96.0%) | ─ |
-| `fr_FR` | 🚫 `97/101` (96.0%) | ─ |
-| `hi_IN` | 🚫 `97/101` (96.0%) | ─ |
-| `ja_JA` | 🚫 `97/101` (96.0%) | ─ |
-| `pt_BR` | 🚫 `97/101` (96.0%) | ─ |
-| `zh_CN` | 🚫 `97/101` (96.0%) | ─ |
+| `en_US` | 102 (default locale) | ─ |
+| `de_DE` | 🚫 `97/102` (95.1%) | ─ |
+| `en_UK` | ✅ `102/102` (100.0%) | `en_US` |
+| `es_ES` | 🚫 `97/102` (95.1%) | ─ |
+| `fr_FR` | 🚫 `97/102` (95.1%) | ─ |
+| `hi_IN` | 🚫 `97/102` (95.1%) | ─ |
+| `ja_JA` | 🚫 `97/102` (95.1%) | ─ |
+| `pt_BR` | 🚫 `97/102` (95.1%) | ─ |
+| `zh_CN` | 🚫 `97/102` (95.1%) | ─ |
 
 <br>
 
@@ -25,79 +25,86 @@ This means you need to manually check against the base locales for missing keys
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 4 missing keys (click to show)</summary>
+<details><summary><code>de_DE</code> - 5 missing keys (click to show)</summary>
 
 | Key | English text |
 | --- | ------------ |
 | `list_button_placement_queue_only` | `"Up next" queue only` |
 | `list_button_placement_everywhere` | `In every song list` |
 | `feature_category_songLists` | `Song Lists` |
+| `feature_desc_volumeSliderScrollStep` | `Volume slider scroll wheel sensitivity in percent - snaps to the nearest sensitivity value from above` |
 | `feature_desc_listButtonsPlacement` | `Where should the queue buttons show up?` |
 
 </details>
 
-<details><summary><code>es_ES</code> - 4 missing keys (click to show)</summary>
+<details><summary><code>es_ES</code> - 5 missing keys (click to show)</summary>
 
 | Key | English text |
 | --- | ------------ |
 | `list_button_placement_queue_only` | `"Up next" queue only` |
 | `list_button_placement_everywhere` | `In every song list` |
 | `feature_category_songLists` | `Song Lists` |
+| `feature_desc_volumeSliderScrollStep` | `Volume slider scroll wheel sensitivity in percent - snaps to the nearest sensitivity value from above` |
 | `feature_desc_listButtonsPlacement` | `Where should the queue buttons show up?` |
 
 </details>
 
-<details><summary><code>fr_FR</code> - 4 missing keys (click to show)</summary>
+<details><summary><code>fr_FR</code> - 5 missing keys (click to show)</summary>
 
 | Key | English text |
 | --- | ------------ |
 | `list_button_placement_queue_only` | `"Up next" queue only` |
 | `list_button_placement_everywhere` | `In every song list` |
 | `feature_category_songLists` | `Song Lists` |
+| `feature_desc_volumeSliderScrollStep` | `Volume slider scroll wheel sensitivity in percent - snaps to the nearest sensitivity value from above` |
 | `feature_desc_listButtonsPlacement` | `Where should the queue buttons show up?` |
 
 </details>
 
-<details><summary><code>hi_IN</code> - 4 missing keys (click to show)</summary>
+<details><summary><code>hi_IN</code> - 5 missing keys (click to show)</summary>
 
 | Key | English text |
 | --- | ------------ |
 | `list_button_placement_queue_only` | `"Up next" queue only` |
 | `list_button_placement_everywhere` | `In every song list` |
 | `feature_category_songLists` | `Song Lists` |
+| `feature_desc_volumeSliderScrollStep` | `Volume slider scroll wheel sensitivity in percent - snaps to the nearest sensitivity value from above` |
 | `feature_desc_listButtonsPlacement` | `Where should the queue buttons show up?` |
 
 </details>
 
-<details><summary><code>ja_JA</code> - 4 missing keys (click to show)</summary>
+<details><summary><code>ja_JA</code> - 5 missing keys (click to show)</summary>
 
 | Key | English text |
 | --- | ------------ |
 | `list_button_placement_queue_only` | `"Up next" queue only` |
 | `list_button_placement_everywhere` | `In every song list` |
 | `feature_category_songLists` | `Song Lists` |
+| `feature_desc_volumeSliderScrollStep` | `Volume slider scroll wheel sensitivity in percent - snaps to the nearest sensitivity value from above` |
 | `feature_desc_listButtonsPlacement` | `Where should the queue buttons show up?` |
 
 </details>
 
-<details><summary><code>pt_BR</code> - 4 missing keys (click to show)</summary>
+<details><summary><code>pt_BR</code> - 5 missing keys (click to show)</summary>
 
 | Key | English text |
 | --- | ------------ |
 | `list_button_placement_queue_only` | `"Up next" queue only` |
 | `list_button_placement_everywhere` | `In every song list` |
 | `feature_category_songLists` | `Song Lists` |
+| `feature_desc_volumeSliderScrollStep` | `Volume slider scroll wheel sensitivity in percent - snaps to the nearest sensitivity value from above` |
 | `feature_desc_listButtonsPlacement` | `Where should the queue buttons show up?` |
 
 </details>
 
-<details><summary><code>zh_CN</code> - 4 missing keys (click to show)</summary>
+<details><summary><code>zh_CN</code> - 5 missing keys (click to show)</summary>
 
 | Key | English text |
 | --- | ------------ |
 | `list_button_placement_queue_only` | `"Up next" queue only` |
 | `list_button_placement_everywhere` | `In every song list` |
 | `feature_category_songLists` | `Song Lists` |
+| `feature_desc_volumeSliderScrollStep` | `Volume slider scroll wheel sensitivity in percent - snaps to the nearest sensitivity value from above` |
 | `feature_desc_listButtonsPlacement` | `Where should the queue buttons show up?` |
 
 </details>

assets/translations/en_US.json

@@ -89,6 +89,7 @@
     "feature_desc_volumeSliderLabel": "Add a percentage label next to the volume slider",
     "feature_desc_volumeSliderSize": "The width of the volume slider in pixels",
     "feature_desc_volumeSliderStep": "Volume slider sensitivity (by how little percent the volume can be changed at a time)",
+    "feature_desc_volumeSliderScrollStep": "Volume slider scroll wheel sensitivity in percent - snaps to the nearest sensitivity value from above",
     "feature_desc_watermarkEnabled": "Show a watermark under the site logo that opens this config menu",
     "feature_desc_removeShareTrackingParam": "Remove the tracking parameter \"&si\" from links in the share popup",
     "feature_desc_numKeysSkipToTime": "Enable skipping to a specific time in the video by pressing a number key (0-9)",

src/config.ts

@@ -42,6 +42,7 @@ export const migrations: ConfigMigrationsDict = {
         alt: oldSwitchSitesHotkey.meta ?? false,
       },
       listButtonsPlacement: "queueOnly",
+      volumeSliderScrollStep: 10,
     };
   },
 };

src/features/index.ts

@@ -87,6 +87,16 @@ export const featInfo = {
     enable: () => void "TODO",
     change: () => void "TODO",
   },
+  volumeSliderScrollStep: {
+    type: "slider",
+    category: "layout",
+    min: 1,
+    max: 25,
+    default: 10,
+    unit: "%",
+    enable: () => void "TODO",
+    change: () => void "TODO",
+  },
   watermarkEnabled: {
     type: "toggle",
     category: "layout",

src/features/layout.ts

@@ -1,11 +1,12 @@
-import { addGlobalStyle, addParent, autoPlural, fetchAdvanced, getUnsafeWindow, insertAfter, pauseFor } from "@sv443-network/userutils";
+import { addGlobalStyle, addParent, autoPlural, fetchAdvanced, insertAfter, pauseFor } from "@sv443-network/userutils";
 import { onSelectorOld } from "../onSelector";
 import type { FeatureConfig } from "../types";
-import { mode, scriptInfo } from "../constants";
-import { error, getResourceUrl, info, log, warn, videoSelector } from "../utils";
+import { scriptInfo } from "../constants";
+import { error, getResourceUrl, log, warn } from "../utils";
 import { t } from "../translations";
 import { openCfgMenu } from "../menu/menu_old";
 import "./layout.css";
+import { featInfo } from ".";
 
 let features: FeatureConfig;
 
@@ -187,6 +188,28 @@ export async function initVolumeFeatures() {
       const volSliderCont = document.createElement("div");
       volSliderCont.id = "bytm-vol-slider-cont";
 
+      if(features.volumeSliderScrollStep !== featInfo.volumeSliderScrollStep.default) {
+        for(const evtName of ["wheel", "scroll", "mousewheel", "DOMMouseScroll"]) {
+          volSliderCont.addEventListener(evtName, (e) => {
+            e.preventDefault();
+            // cancels all the other events that would be fired
+            e.stopImmediatePropagation();
+
+            const delta = (e as WheelEvent).deltaY ?? (e as CustomEvent<number | undefined>).detail ?? 1;
+            const volumeDir = -Math.sign(delta);
+            const newVolume = String(Number(sliderElem.value) + (features.volumeSliderScrollStep * volumeDir));
+
+            sliderElem.value = newVolume;
+            sliderElem.setAttribute("aria-valuenow", newVolume);
+            // make the site actually change the volume
+            sliderElem.dispatchEvent(new Event("change", { bubbles: true }));
+          }, {
+            // takes precedence over the slider's own event listener
+            capture: true,
+          });
+        }
+      }
+
       addParent(sliderElem, volSliderCont);
 
       if(typeof features.volumeSliderSize === "number")

src/types.ts

@@ -51,6 +51,8 @@ export interface FeatureConfig {
   volumeSliderSize: number;
   /** Volume slider sensitivity - the smaller this number, the finer the volume control */
   volumeSliderStep: number;
+  /** Volume slider scroll wheel sensitivity */
+  volumeSliderScrollStep: number;
   /** Show a BetterYTM watermark under the YTM logo */
   watermarkEnabled: boolean;
   /** Remove the "si" tracking parameter from links in the share popup */