feat(player): use state-specific debouncer, not global

src/video/state/init.ts

@@ -33,6 +33,7 @@ function initPlayer(): VideoPlayerState {
       leftControlHovering: false,
       popoutBounds: null,
       volumeChangedWithKeybind: false,
+      volumeChangedWithKeybindDebounce: null,
     },
 
     mediaPlaying: {

src/video/state/logic/controls.ts

@@ -5,8 +5,6 @@ import { VideoPlayerMeta } from "@/video/state/types";
 import { getPlayerState } from "../cache";
 import { VideoPlayerStateController } from "../providers/providerTypes";
 
-let volumeChangedWithKeybindDebounce: NodeJS.Timeout | null = null;
-
 export type ControlMethods = {
   openPopout(id: string): void;
   closePopout(): void;
@@ -52,13 +50,13 @@ export function useControls(
     },
     setVolume(volume, isKeyboardEvent = false) {
       if (isKeyboardEvent) {
-        if (volumeChangedWithKeybindDebounce)
-          clearTimeout(volumeChangedWithKeybindDebounce);
+        if (state.interface.volumeChangedWithKeybindDebounce)
+          clearTimeout(state.interface.volumeChangedWithKeybindDebounce);
 
         state.interface.volumeChangedWithKeybind = true;
         updateInterface(descriptor, state);
 
-        volumeChangedWithKeybindDebounce = setTimeout(() => {
+        state.interface.volumeChangedWithKeybindDebounce = setTimeout(() => {
           state.interface.volumeChangedWithKeybind = false;
           updateInterface(descriptor, state);
         }, 3e3);

src/video/state/types.ts

@@ -29,6 +29,7 @@ export type VideoPlayerState = {
     popout: string | null; // id of current popout (eg source select, episode select)
     isFocused: boolean; // is the video player the users focus? (shortcuts only works when its focused)
     volumeChangedWithKeybind: boolean; // has the volume recently been adjusted with the up/down arrows recently?
+    volumeChangedWithKeybindDebounce: NodeJS.Timeout | null; // debounce for the duration of the "volume changed thingamajig"
     leftControlHovering: boolean; // is the cursor hovered over the left side of player controls
     popoutBounds: null | DOMRect; // bounding box of current popout
   };