From 7007f030e19572db271c83cdd0a086e0d08094cc Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Thu, 20 Apr 2023 21:07:44 +0200
Subject: [PATCH] feat(player): use state-specific debouncer, not global

---
 src/video/state/init.ts           | 1 +
 src/video/state/logic/controls.ts | 8 +++-----
 src/video/state/types.ts          | 1 +
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/video/state/init.ts b/src/video/state/init.ts
index 3c55a642..570d27d3 100644
--- a/src/video/state/init.ts
+++ b/src/video/state/init.ts
@@ -33,6 +33,7 @@ function initPlayer(): VideoPlayerState {
       leftControlHovering: false,
       popoutBounds: null,
       volumeChangedWithKeybind: false,
+      volumeChangedWithKeybindDebounce: null,
     },
 
     mediaPlaying: {
diff --git a/src/video/state/logic/controls.ts b/src/video/state/logic/controls.ts
index fc8f99e5..76cc8e2e 100644
--- a/src/video/state/logic/controls.ts
+++ b/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);
diff --git a/src/video/state/types.ts b/src/video/state/types.ts
index be6016c4..fc059979 100644
--- a/src/video/state/types.ts
+++ b/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
   };