diff options
Diffstat (limited to 'apps/web/src')
| -rw-r--r-- | apps/web/src/components/keyboard-shortcuts-help.tsx | 47 | ||||
| -rw-r--r-- | apps/web/src/hooks/use-keybindings.ts | 6 | ||||
| -rw-r--r-- | apps/web/src/hooks/use-keyboard-shortcuts-help.ts | 13 | ||||
| -rw-r--r-- | apps/web/src/stores/keybindings-store.ts | 24 |
4 files changed, 49 insertions, 41 deletions
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx index 4c8bfff5..f6f2f222 100644 --- a/apps/web/src/components/keyboard-shortcuts-help.tsx +++ b/apps/web/src/components/keyboard-shortcuts-help.tsx @@ -6,11 +6,11 @@ import { Dialog, DialogContent, DialogDescription, + DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./ui/dialog"; -import { getPlatformSpecialKey } from "@/lib/utils"; import { Keyboard } from "lucide-react"; import { useKeyboardShortcutsHelp, @@ -19,30 +19,13 @@ import { import { useKeybindingsStore } from "@/stores/keybindings-store"; import { toast } from "sonner"; -const modifier: { - [key: string]: string; -} = { - Shift: "Shift", - Alt: "Alt", - ArrowLeft: "←", - ArrowRight: "→", - ArrowUp: "↑", - ArrowDown: "↓", - Space: "Space", -}; - -function getKeyWithModifier(key: string) { - if (key === "Ctrl") return getPlatformSpecialKey(); - return modifier[key] || key; -} - const ShortcutItem = ({ shortcut, - recordingKey, + isRecording, onStartRecording, }: { shortcut: KeyboardShortcut; - recordingKey: string | null; + isRecording: boolean; onStartRecording: (keyId: string, shortcut: KeyboardShortcut) => void; }) => { // Filter out lowercase duplicates for display - if both "j" and "J" exist, only show "J" @@ -76,10 +59,10 @@ const ShortcutItem = ({ keyId={keyId} originalKey={key} shortcut={shortcut} - isRecording={recordingKey === keyId} + isRecording={isRecording} onStartRecording={() => onStartRecording(keyId, shortcut)} > - {getKeyWithModifier(keyPart)} + {keyPart} </EditableShortcutKey> ); })} @@ -144,6 +127,8 @@ export const KeyboardShortcutsHelp = () => { getKeybindingString, validateKeybinding, getKeybindingsForAction, + setIsRecording, + resetToDefaults, } = useKeybindingsStore(); // Get shortcuts from centralized hook @@ -163,11 +148,11 @@ export const KeyboardShortcutsHelp = () => { // Auto-save the new keybinding const conflict = validateKeybinding( keyString, - recordingShortcut.action + recordingShortcut.action, ); if (conflict) { toast.error( - `Key "${keyString}" is already bound to "${conflict.existingAction}"` + `Key "${keyString}" is already bound to "${conflict.existingAction}"`, ); setRecordingKey(null); setRecordingShortcut(null); @@ -181,14 +166,16 @@ export const KeyboardShortcutsHelp = () => { // Add new keybinding updateKeybinding(keyString, recordingShortcut.action); + setIsRecording(false); setRecordingKey(null); setRecordingShortcut(null); } }; - const handleClickOutside = (e: MouseEvent) => { + const handleClickOutside = () => { setRecordingKey(null); setRecordingShortcut(null); + setIsRecording(false); }; document.addEventListener("keydown", handleKeyDown); @@ -211,6 +198,7 @@ export const KeyboardShortcutsHelp = () => { const handleStartRecording = (keyId: string, shortcut: KeyboardShortcut) => { setRecordingKey(keyId); setRecordingShortcut(shortcut); + setIsRecording(true); }; return ( @@ -246,7 +234,9 @@ export const KeyboardShortcutsHelp = () => { <ShortcutItem key={index} shortcut={shortcut} - recordingKey={recordingKey} + isRecording={ + shortcut.action === recordingShortcut?.action + } onStartRecording={handleStartRecording} /> ))} @@ -254,6 +244,11 @@ export const KeyboardShortcutsHelp = () => { </div> ))} </div> + <DialogFooter> + <Button size="sm" className="mt-4" onClick={resetToDefaults}> + Reset to Default + </Button> + </DialogFooter> </DialogContent> </Dialog> ); diff --git a/apps/web/src/hooks/use-keybindings.ts b/apps/web/src/hooks/use-keybindings.ts index 7887f3f1..0e2045ac 100644 --- a/apps/web/src/hooks/use-keybindings.ts +++ b/apps/web/src/hooks/use-keybindings.ts @@ -8,13 +8,15 @@ import { useKeybindingsStore } from "@/stores/keybindings-store"; * the appropriate actions based on keybindings */ export function useKeybindingsListener() { - const { keybindings, getKeybindingString, keybindingsEnabled } = + const { keybindings, getKeybindingString, keybindingsEnabled, isRecording } = useKeybindingsStore(); useEffect(() => { const handleKeyDown = (ev: KeyboardEvent) => { // Do not check keybinds if the mode is disabled if (!keybindingsEnabled) return; + // ignore key events if user is changing keybindings + if (isRecording) return; const binding = getKeybindingString(ev); if (!binding) return; @@ -45,7 +47,7 @@ export function useKeybindingsListener() { return () => { document.removeEventListener("keydown", handleKeyDown); }; - }, [keybindings, getKeybindingString, keybindingsEnabled]); + }, [keybindings, getKeybindingString, keybindingsEnabled, isRecording]); } /** diff --git a/apps/web/src/hooks/use-keyboard-shortcuts-help.ts b/apps/web/src/hooks/use-keyboard-shortcuts-help.ts index c7de8466..2f1a4d4a 100644 --- a/apps/web/src/hooks/use-keyboard-shortcuts-help.ts +++ b/apps/web/src/hooks/use-keyboard-shortcuts-help.ts @@ -3,6 +3,7 @@ import { useMemo } from "react"; import { useKeybindingsStore } from "@/stores/keybindings-store"; import { Action } from "@/constants/actions"; +import { getPlatformAlternateKey, getPlatformSpecialKey } from "@/lib/utils"; export interface KeyboardShortcut { id: string; @@ -67,13 +68,13 @@ const actionDescriptions: Record< // Convert key binding format to display format const formatKey = (key: string): string => { return key - .replace("ctrl", "Cmd") - .replace("alt", "Alt") + .replace("ctrl", getPlatformSpecialKey()) + .replace("alt", getPlatformAlternateKey()) .replace("shift", "Shift") - .replace("left", "ArrowLeft") - .replace("right", "ArrowRight") - .replace("up", "ArrowUp") - .replace("down", "ArrowDown") + .replace("left", "←") + .replace("right", "→") + .replace("up", "↑") + .replace("down", "↓") .replace("space", "Space") .replace("home", "Home") .replace("end", "End") diff --git a/apps/web/src/stores/keybindings-store.ts b/apps/web/src/stores/keybindings-store.ts index 3e525b86..ed1d6b8c 100644 --- a/apps/web/src/stores/keybindings-store.ts +++ b/apps/web/src/stores/keybindings-store.ts @@ -39,6 +39,7 @@ interface KeybindingsState { keybindings: KeybindingConfig; isCustomized: boolean; keybindingsEnabled: boolean; + isRecording: boolean; // Actions updateKeybinding: (key: ShortcutKey, action: ActionWithOptionalArgs) => void; @@ -48,11 +49,12 @@ interface KeybindingsState { exportKeybindings: () => KeybindingConfig; enableKeybindings: () => void; disableKeybindings: () => void; + setIsRecording: (isRecording: boolean) => void; // Validation validateKeybinding: ( key: ShortcutKey, - action: ActionWithOptionalArgs + action: ActionWithOptionalArgs, ) => KeybindingConflict | null; getKeybindingsForAction: (action: ActionWithOptionalArgs) => ShortcutKey[]; @@ -66,6 +68,7 @@ export const useKeybindingsStore = create<KeybindingsState>()( keybindings: { ...defaultKeybindings }, isCustomized: false, keybindingsEnabled: true, + isRecording: false, updateKeybinding: (key: ShortcutKey, action: ActionWithOptionalArgs) => { set((state) => { @@ -126,7 +129,7 @@ export const useKeybindingsStore = create<KeybindingsState>()( validateKeybinding: ( key: ShortcutKey, - action: ActionWithOptionalArgs + action: ActionWithOptionalArgs, ) => { const { keybindings } = get(); const existingAction = keybindings[key]; @@ -141,11 +144,14 @@ export const useKeybindingsStore = create<KeybindingsState>()( return null; }, + setIsRecording: (isRecording: boolean) => { + set({ isRecording }); + }, getKeybindingsForAction: (action: ActionWithOptionalArgs) => { const { keybindings } = get(); return Object.keys(keybindings).filter( - (key) => keybindings[key as ShortcutKey] === action + (key) => keybindings[key as ShortcutKey] === action, ) as ShortcutKey[]; }, @@ -156,8 +162,8 @@ export const useKeybindingsStore = create<KeybindingsState>()( { name: "opencut-keybindings", version: 1, - } - ) + }, + ), ); // Utility functions @@ -211,8 +217,12 @@ function getPressedKey(ev: KeyboardEvent): string | null { if (key === "backspace") return "backspace"; // Check letter keys - const isLetter = key.length === 1 && key >= "a" && key <= "z"; - if (isLetter) return key; + if (code.startsWith("Key")) { + const letter = code.slice(3).toLowerCase(); + if (letter.length === 1 && letter >= "a" && letter <= "z") { + return letter; + } + } // Check number keys using physical position for AZERTY support if (code.startsWith("Digit")) { |