Use useEventTarget

src/room/useGroupCall.ts

@@ -34,6 +34,7 @@ import { PosthogAnalytics } from "../PosthogAnalytics";
 import { TranslatedError, translatedError } from "../TranslatedError";
 import { ElementWidgetActions, ScreenshareStartData, widget } from "../widget";
 import { getSetting } from "../settings/useSetting";
+import { useEventTarget } from "../useEvents";
 
 export interface UseGroupCallReturnType {
   state: GroupCallState;
@@ -403,42 +404,46 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
     }
   }, [t]);
 
-  useEffect(() => {
+  useEventTarget(
-    const keyDownListener = (event) => {
+    window,
-      // Check if keyboard shortcuts are enabled
+    "keydown",
-      const keyboardShortcuts = getSetting("keyboard-shortcuts", true);
+    useCallback(
-      if (!keyboardShortcuts) {
+      (event: KeyboardEvent) => {
-        return;
+        // Check if keyboard shortcuts are enabled
-      }
+        const keyboardShortcuts = getSetting("keyboard-shortcuts", true);
+        if (!keyboardShortcuts) {
+          return;
+        }
 
-      if (event.key === "m") {
+        if (event.key === "m") {
-        toggleMicrophoneMuted();
+          toggleMicrophoneMuted();
-      }
+        }
-      if (event.key === " ") {
+        if (event.key === " ") {
-        setMicrophoneMuted(false);
+          setMicrophoneMuted(false);
-      }
+        }
-    };
+      },
+      [toggleMicrophoneMuted, setMicrophoneMuted]
+    )
+  );
 
-    const keyUpListener = (event) => {
+  useEventTarget(
-      // Check if keyboard shortcuts are enabled
+    window,
-      const keyboardShortcuts = getSetting("keyboard-shortcuts", true);
+    "keyup",
-      if (!keyboardShortcuts) {
+    useCallback(
-        return;
+      (event: KeyboardEvent) => {
-      }
+        // Check if keyboard shortcuts are enabled
+        const keyboardShortcuts = getSetting("keyboard-shortcuts", true);
+        if (!keyboardShortcuts) {
+          return;
+        }
 
-      if (event.key === " ") {
+        if (event.key === " ") {
-        setMicrophoneMuted(true);
+          setMicrophoneMuted(true);
-      }
+        }
-    };
+      },
-
+      [setMicrophoneMuted]
-    window.addEventListener("keydown", keyDownListener, true);
+    )
-    window.addEventListener("keyup", keyUpListener, true);
+  );
-
-    return () => {
-      window.removeEventListener("keydown", keyDownListener, true);
-      window.removeEventListener("keyup", keyUpListener, true);
-    };
-  }, [toggleMicrophoneMuted, setMicrophoneMuted]);
 
   return {
     state,