From e88aeedbf15a708db173e482921921c2fd379c5e Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 22 Aug 2025 02:00:42 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20disable=20device=20sho?=
 =?UTF-8?q?rtcuts=20when=20permissions=20not=20granted?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix bug where device toggling shortcuts remained active despite lacking
permissions, by disabling device-related shortcuts until permissions
are granted.

Prevents confusing user experience where shortcuts appear to work but
have no effect due to missing media permissions.
---
 .../components/controls/Device/ToggleDevice.tsx   |  7 ++++++-
 .../src/features/shortcuts/useLongPress.ts        | 15 ++++++++++++++-
 .../shortcuts/useRegisterKeyboardShortcut.ts      | 11 +++++++++--
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx
index 41a4489b..0c4b96c1 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx
@@ -80,11 +80,16 @@ export const ToggleDevice = <T extends ToggleSource>({
   const cannotUseDevice = useCannotUseDevice(kind)
   const deviceShortcut = useDeviceShortcut(kind)
 
-  useRegisterKeyboardShortcut({ shortcut: deviceShortcut, handler: toggle })
+  useRegisterKeyboardShortcut({
+    shortcut: deviceShortcut,
+    handler: toggle,
+    isDisabled: cannotUseDevice,
+  })
   useLongPress({
     keyCode: kind === 'audioinput' ? 'Space' : undefined,
     onKeyDown,
     onKeyUp,
+    isDisabled: cannotUseDevice,
   })
 
   const toggleLabel = useMemo(() => {
diff --git a/src/frontend/src/features/shortcuts/useLongPress.ts b/src/frontend/src/features/shortcuts/useLongPress.ts
index 775f9237..678303d5 100644
--- a/src/frontend/src/features/shortcuts/useLongPress.ts
+++ b/src/frontend/src/features/shortcuts/useLongPress.ts
@@ -5,6 +5,7 @@ export type useLongPressProps = {
   onKeyDown: () => void
   onKeyUp: () => void
   longPressThreshold?: number
+  isDisabled?: boolean
 }
 
 export const useLongPress = ({
@@ -12,10 +13,18 @@ export const useLongPress = ({
   onKeyDown,
   onKeyUp,
   longPressThreshold = 300,
+  isDisabled = false,
 }: useLongPressProps) => {
   const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
+    if (isDisabled) {
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current)
+        timeoutIdRef.current = null
+      }
+      return
+    }
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.code != keyCode || timeoutIdRef.current) return
       timeoutIdRef.current = setTimeout(() => {
@@ -38,8 +47,12 @@ export const useLongPress = ({
     return () => {
       window.removeEventListener('keydown', handleKeyDown)
       window.removeEventListener('keyup', handleKeyUp)
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current)
+        timeoutIdRef.current = null
+      }
     }
-  }, [keyCode, onKeyDown, onKeyUp, longPressThreshold])
+  }, [keyCode, onKeyDown, onKeyUp, longPressThreshold, isDisabled])
 
   return
 }
diff --git a/src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts b/src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts
index 3637d465..70b816f7 100644
--- a/src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts
+++ b/src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts
@@ -6,14 +6,21 @@ import { Shortcut } from '@/features/shortcuts/types'
 export type useRegisterKeyboardShortcutProps = {
   shortcut?: Shortcut
   handler: () => void
+  isDisabled?: boolean
 }
 
 export const useRegisterKeyboardShortcut = ({
   shortcut,
   handler,
+  isDisabled = false,
 }: useRegisterKeyboardShortcutProps) => {
   useEffect(() => {
     if (!shortcut) return
-    keyboardShortcutsStore.shortcuts.set(formatShortcutKey(shortcut), handler)
-  }, [handler, shortcut])
+    const formattedKey = formatShortcutKey(shortcut)
+    if (isDisabled) {
+      keyboardShortcutsStore.shortcuts.delete(formattedKey)
+    } else {
+      keyboardShortcutsStore.shortcuts.set(formattedKey, handler)
+    }
+  }, [handler, shortcut, isDisabled])
 }