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 = ({ 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 | 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]) }