diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx index fbd77d70..e9157b10 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx @@ -23,6 +23,7 @@ import { formatShortcutKey, appendShortcutLabel, } from '@/features/shortcuts/utils' +import { Shortcut } from '@/features/shortcuts/types' export type ToggleSource = Exclude< Track.Source, @@ -35,7 +36,7 @@ type SelectToggleDeviceConfig = { kind: MediaDeviceKind iconOn: RemixiconComponentType iconOff: RemixiconComponentType - shortcutKey?: string + shortcut?: Shortcut } type SelectToggleDeviceConfigMap = { @@ -47,20 +48,25 @@ const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = { kind: 'audioinput', iconOn: RiMicLine, iconOff: RiMicOffLine, - shortcutKey: 'd', + shortcut: { + key: 'd', + ctrlKey: true, + }, }, [Track.Source.Camera]: { kind: 'videoinput', iconOn: RiVideoOnLine, iconOff: RiVideoOffLine, - shortcutKey: 'e', + shortcut: { + key: 'e', + ctrlKey: true, + }, }, } type SelectToggleDeviceProps = UseTrackToggleProps & { onActiveDeviceChange: (deviceId: string) => void - shortcutKey?: string source: SelectToggleSource } @@ -85,21 +91,19 @@ export const SelectToggleDevice = ({ const label = t(enabled ? 'disable' : 'enable', { keyPrefix: `join.${kind}`, }) - return config.shortcutKey - ? appendShortcutLabel(label, config.shortcutKey, true) - : label - }, [enabled, kind, config.shortcutKey, t]) + return config.shortcut ? appendShortcutLabel(label, config.shortcut) : label + }, [enabled, kind, config.shortcut, t]) const selectLabel = t('choose', { keyPrefix: `join.${kind}` }) const Icon = enabled ? iconOn : iconOff useEffect(() => { - if (!config.shortcutKey) return + if (!config.shortcut) return keyboardShortcutsStore.shortcuts.set( - formatShortcutKey(config.shortcutKey, true), + formatShortcutKey(config.shortcut), () => toggle() ) - }, [toggle, config.shortcutKey]) + }, [toggle, config.shortcut]) return ( diff --git a/src/frontend/src/features/shortcuts/types.ts b/src/frontend/src/features/shortcuts/types.ts new file mode 100644 index 00000000..a5eb4914 --- /dev/null +++ b/src/frontend/src/features/shortcuts/types.ts @@ -0,0 +1,4 @@ +export type Shortcut = { + key: string + ctrlKey?: boolean +} diff --git a/src/frontend/src/features/shortcuts/useKeyboardShortcuts.ts b/src/frontend/src/features/shortcuts/useKeyboardShortcuts.ts index 26ec4df6..bfe0574a 100644 --- a/src/frontend/src/features/shortcuts/useKeyboardShortcuts.ts +++ b/src/frontend/src/features/shortcuts/useKeyboardShortcuts.ts @@ -12,10 +12,10 @@ export const useKeyboardShortcuts = () => { // Issues might occur. First draft. const onKeyDown = (e: KeyboardEvent) => { const { key, metaKey, ctrlKey } = e - const shortcutKey = formatShortcutKey( + const shortcutKey = formatShortcutKey({ key, - ctrlKey || (isMacintosh() && metaKey) - ) + ctrlKey: ctrlKey || (isMacintosh() && metaKey), + }) const shortcut = shortcutsSnap.shortcuts.get(shortcutKey) if (!shortcut) return e.preventDefault() diff --git a/src/frontend/src/features/shortcuts/utils.ts b/src/frontend/src/features/shortcuts/utils.ts index e24e8949..cf22f2a1 100644 --- a/src/frontend/src/features/shortcuts/utils.ts +++ b/src/frontend/src/features/shortcuts/utils.ts @@ -1,20 +1,17 @@ import { isMacintosh } from '@/utils/livekit' +import { Shortcut } from '@/features/shortcuts/types' export const CTRL = 'ctrl' -export const formatShortcutKey = (key: string, ctrlKey?: boolean) => { - if (ctrlKey) return `${CTRL}+${key.toUpperCase()}` - return key.toUpperCase() +export const formatShortcutKey = (shortcut: Shortcut) => { + if (shortcut.ctrlKey) return `${CTRL}+${shortcut.key.toUpperCase()}` + return shortcut.key.toUpperCase() } -export const appendShortcutLabel = ( - label: string, - key: string, - ctrlKey?: boolean -) => { - if (!key) return - let formattedKeyLabel = key.toLowerCase() - if (ctrlKey) { +export const appendShortcutLabel = (label: string, shortcut: Shortcut) => { + if (!shortcut.key) return + let formattedKeyLabel = shortcut.key.toLowerCase() + if (shortcut.ctrlKey) { formattedKeyLabel = `${isMacintosh() ? '⌘' : 'Ctrl'}+${formattedKeyLabel}` } return `${label} (${formattedKeyLabel})`