diff options
Diffstat (limited to 'apps/web/src/hooks/use-keyboard-shortcuts.ts')
| -rw-r--r-- | apps/web/src/hooks/use-keyboard-shortcuts.ts | 334 |
1 files changed, 0 insertions, 334 deletions
diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts deleted file mode 100644 index 84cb78f8..00000000 --- a/apps/web/src/hooks/use-keyboard-shortcuts.ts +++ /dev/null @@ -1,334 +0,0 @@ -"use client";
-
-import { useEffect, useCallback } from "react";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { usePlaybackStore } from "@/stores/playback-store";
-import { useProjectStore } from "@/stores/project-store";
-import { toast } from "sonner";
-
-export interface KeyboardShortcut {
- id: string;
- keys: string[];
- description: string;
- category: string;
- action: () => void;
- enabled?: boolean;
- requiresSelection?: boolean;
- icon?: React.ReactNode;
-}
-
-interface UseKeyboardShortcutsOptions {
- enabled?: boolean;
- context?: "global" | "timeline" | "editor";
-}
-
-export const useKeyboardShortcuts = (
- options: UseKeyboardShortcutsOptions = {}
-) => {
- const { enabled = true, context = "editor" } = options;
-
- const {
- tracks,
- selectedElements,
- clearSelectedElements,
- setSelectedElements,
- removeElementFromTrack,
- splitElement,
- addElementToTrack,
- snappingEnabled,
- toggleSnapping,
- undo,
- redo,
- } = useTimelineStore();
-
- const { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore();
-
- const { activeProject } = useProjectStore();
-
- // Check if user is typing in an input field
- const isInputFocused = useCallback(() => {
- const activeElement = document.activeElement as HTMLElement;
- return (
- activeElement &&
- (activeElement.tagName === "INPUT" ||
- activeElement.tagName === "TEXTAREA" ||
- activeElement.contentEditable === "true")
- );
- }, []);
-
- // Define all shortcuts in one place
- const shortcuts: KeyboardShortcut[] = [
- // Playback Controls
- {
- id: "play-pause",
- keys: ["Space"],
- description: "Play/Pause",
- category: "Playback",
- action: () => {
- toggle();
- },
- },
- {
- id: "rewind",
- keys: ["j", "J"],
- description: "Rewind 1 second",
- category: "Playback",
- action: () => {
- seek(Math.max(0, currentTime - 1));
- },
- },
- {
- id: "play-pause-alt",
- keys: ["k", "K"],
- description: "Play/Pause (alternative)",
- category: "Playback",
- action: () => {
- toggle();
- },
- },
- {
- id: "fast-forward",
- keys: ["l", "L"],
- description: "Fast forward 1 second",
- category: "Playback",
- action: () => {
- seek(Math.min(duration, currentTime + 1));
- },
- },
-
- // Navigation
- {
- id: "frame-backward",
- keys: ["ArrowLeft"],
- description: "Frame step backward",
- category: "Navigation",
- action: () => {
- const projectFps = activeProject?.fps || 30;
- seek(Math.max(0, currentTime - 1 / projectFps));
- },
- },
- {
- id: "frame-forward",
- keys: ["ArrowRight"],
- description: "Frame step forward",
- category: "Navigation",
- action: () => {
- const projectFps = activeProject?.fps || 30;
- seek(Math.min(duration, currentTime + 1 / projectFps));
- },
- },
- {
- id: "jump-backward",
- keys: ["Shift+ArrowLeft"],
- description: "Jump back 5 seconds",
- category: "Navigation",
- action: () => {
- seek(Math.max(0, currentTime - 5));
- },
- },
- {
- id: "jump-forward",
- keys: ["Shift+ArrowRight"],
- description: "Jump forward 5 seconds",
- category: "Navigation",
- action: () => {
- seek(Math.min(duration, currentTime + 5));
- },
- },
- {
- id: "goto-start",
- keys: ["Home"],
- description: "Go to timeline start",
- category: "Navigation",
- action: () => {
- seek(0);
- },
- },
- {
- id: "goto-end",
- keys: ["End"],
- description: "Go to timeline end",
- category: "Navigation",
- action: () => {
- seek(duration);
- },
- },
-
- // Editing
- {
- id: "split-element",
- keys: ["s", "S"],
- description: "Split element at playhead",
- category: "Editing",
- requiresSelection: true,
- action: () => {
- if (selectedElements.length !== 1) {
- toast.error("Select exactly one element to split");
- return;
- }
-
- const { trackId, elementId } = selectedElements[0];
- const track = tracks.find((t: any) => t.id === trackId);
- const element = track?.elements.find((el: any) => el.id === elementId);
-
- if (element) {
- const effectiveStart = element.startTime;
- const effectiveEnd =
- element.startTime +
- (element.duration - element.trimStart - element.trimEnd);
-
- if (currentTime > effectiveStart && currentTime < effectiveEnd) {
- splitElement(trackId, elementId, currentTime);
- } else {
- toast.error("Playhead must be within selected element");
- }
- }
- },
- },
- {
- id: "delete-elements",
- keys: ["Delete", "Backspace"],
- description: "Delete selected elements",
- category: "Editing",
- requiresSelection: true,
- action: () => {
- if (selectedElements.length === 0) {
- toast.error("No elements selected");
- return;
- }
- selectedElements.forEach(
- ({ trackId, elementId }: { trackId: string; elementId: string }) => {
- removeElementFromTrack(trackId, elementId);
- }
- );
- clearSelectedElements();
- },
- },
- {
- id: "toggle-snapping",
- keys: ["n", "N"],
- description: "Toggle snapping",
- category: "Editing",
- action: () => {
- toggleSnapping();
- },
- },
-
- // Selection & Organization
- {
- id: "select-all",
- keys: ["Cmd+a", "Ctrl+a"],
- description: "Select all elements",
- category: "Selection",
- action: () => {
- const allElements = tracks.flatMap((track: any) =>
- track.elements.map((element: any) => ({
- trackId: track.id,
- elementId: element.id,
- }))
- );
- setSelectedElements(allElements);
- },
- },
- {
- id: "duplicate-element",
- keys: ["Cmd+d", "Ctrl+d"],
- description: "Duplicate selected element",
- category: "Selection",
- requiresSelection: true,
- action: () => {
- if (selectedElements.length !== 1) {
- toast.error("Select exactly one element to duplicate");
- return;
- }
-
- const { trackId, elementId } = selectedElements[0];
- const track = tracks.find((t: any) => t.id === trackId);
- const element = track?.elements.find((el: any) => el.id === elementId);
-
- if (element) {
- const newStartTime =
- element.startTime +
- (element.duration - element.trimStart - element.trimEnd) +
- 0.1;
- const { id, ...elementWithoutId } = element;
-
- addElementToTrack(trackId, {
- ...elementWithoutId,
- startTime: newStartTime,
- });
- }
- },
- },
-
- // History
- {
- id: "undo",
- keys: ["Cmd+z", "Ctrl+z"],
- description: "Undo",
- category: "History",
- action: () => {
- undo();
- },
- },
- {
- id: "redo",
- keys: ["Cmd+Shift+z", "Ctrl+Shift+z", "Cmd+y", "Ctrl+y"],
- description: "Redo",
- category: "History",
- action: () => {
- redo();
- },
- },
- ];
-
- // Parse keyboard event to match against shortcuts
- const parseKeyboardEvent = useCallback((e: KeyboardEvent): string => {
- const parts: string[] = [];
-
- if (e.metaKey || e.ctrlKey) parts.push(e.metaKey ? "Cmd" : "Ctrl");
- if (e.shiftKey) parts.push("Shift");
- if (e.altKey) parts.push("Alt");
-
- parts.push(e.key);
-
- return parts.join("+");
- }, []);
-
- // Handle keyboard events
- const handleKeyDown = useCallback(
- (e: KeyboardEvent) => {
- if (!enabled || isInputFocused()) return;
-
- const keyCombo = parseKeyboardEvent(e);
- const shortcut = shortcuts.find((s) =>
- s.keys.some((key) => key === keyCombo || key === e.key)
- );
-
- if (shortcut) {
- // Check if shortcut requires selection
- if (shortcut.requiresSelection && selectedElements.length === 0) {
- return;
- }
-
- e.preventDefault();
- shortcut.action();
- }
- },
- [enabled, shortcuts, selectedElements, parseKeyboardEvent, isInputFocused]
- );
-
- // Set up event listener
- useEffect(() => {
- if (!enabled) return;
-
- window.addEventListener("keydown", handleKeyDown);
- return () => window.removeEventListener("keydown", handleKeyDown);
- }, [enabled, handleKeyDown]);
-
- // Return shortcuts for help component
- return {
- shortcuts: shortcuts.filter((s) => s.enabled !== false),
- enabled,
- };
-};
|