{shortcuts
- .filter(shortcut => shortcut.category === category)
+ .filter((shortcut) => shortcut.category === category)
.map((shortcut, index) => (
))}
@@ -208,7 +99,9 @@ export const KeyboardShortcutsHelp = () => {
Tips:
- - • Shortcuts work when the editor is focused (not typing in inputs)
+ -
+ • Shortcuts work when the editor is focused (not typing in inputs)
+
- • J/K/L are industry-standard video editing shortcuts
- • Use arrow keys for frame-perfect positioning
- • Hold Shift with arrow keys for larger jumps
@@ -217,4 +110,4 @@ export const KeyboardShortcutsHelp = () => {
);
-};
\ No newline at end of file
+};
diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts
new file mode 100644
index 00000000..86190c94
--- /dev/null
+++ b/apps/web/src/hooks/use-keyboard-shortcuts.ts
@@ -0,0 +1,349 @@
+"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();
+ toast.info(isPlaying ? "Paused" : "Playing", { duration: 1000 });
+ },
+ },
+ {
+ id: "rewind",
+ keys: ["j", "J"],
+ description: "Rewind 1 second",
+ category: "Playback",
+ action: () => {
+ seek(Math.max(0, currentTime - 1));
+ toast.info("Rewind 1s", { duration: 1000 });
+ },
+ },
+ {
+ id: "play-pause-alt",
+ keys: ["k", "K"],
+ description: "Play/Pause (alternative)",
+ category: "Playback",
+ action: () => {
+ toggle();
+ toast.info(isPlaying ? "Paused" : "Playing", { duration: 1000 });
+ },
+ },
+ {
+ id: "fast-forward",
+ keys: ["l", "L"],
+ description: "Fast forward 1 second",
+ category: "Playback",
+ action: () => {
+ seek(Math.min(duration, currentTime + 1));
+ toast.info("Forward 1s", { duration: 1000 });
+ },
+ },
+
+ // 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);
+ toast.info("Start of timeline", { duration: 1000 });
+ },
+ },
+ {
+ id: "goto-end",
+ keys: ["End"],
+ description: "Go to timeline end",
+ category: "Navigation",
+ action: () => {
+ seek(duration);
+ toast.info("End of timeline", { duration: 1000 });
+ },
+ },
+
+ // 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);
+ toast.success("Element split at playhead");
+ } 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();
+ toast.info(`Snapping ${snappingEnabled ? "disabled" : "enabled"}`, {
+ duration: 1000,
+ });
+ },
+ },
+
+ // 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);
+ toast.info(`Selected ${allElements.length} elements`, {
+ duration: 1000,
+ });
+ },
+ },
+ {
+ 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,
+ });
+
+ toast.success("Element duplicated");
+ }
+ },
+ },
+
+ // 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,
+ };
+};
diff --git a/apps/web/src/hooks/use-playback-controls.ts b/apps/web/src/hooks/use-playback-controls.ts
index 1191d4b4..ecbd1232 100644
--- a/apps/web/src/hooks/use-playback-controls.ts
+++ b/apps/web/src/hooks/use-playback-controls.ts
@@ -106,68 +106,4 @@ export const usePlaybackControls = () => {
separateAudio(trackId, elementId);
}, [selectedElements, tracks, separateAudio]);
-
- const handleKeyPress = useCallback(
- (e: KeyboardEvent) => {
- if (
- e.target instanceof HTMLInputElement ||
- e.target instanceof HTMLTextAreaElement
- ) {
- return;
- }
-
- switch (e.key) {
- case " ":
- e.preventDefault();
- if (isPlaying) {
- pause();
- } else {
- play();
- }
- break;
-
- case "s":
- if (e.ctrlKey || e.metaKey) {
- e.preventDefault();
- handleSplitSelectedElement();
- }
- break;
-
- case "q":
- if (e.ctrlKey || e.metaKey) {
- e.preventDefault();
- handleSplitAndKeepLeftCallback();
- }
- break;
-
- case "w":
- if (e.ctrlKey || e.metaKey) {
- e.preventDefault();
- handleSplitAndKeepRightCallback();
- }
- break;
-
- case "d":
- if (e.ctrlKey || e.metaKey) {
- e.preventDefault();
- handleSeparateAudioCallback();
- }
- break;
- }
- },
- [
- isPlaying,
- play,
- pause,
- handleSplitSelectedElement,
- handleSplitAndKeepLeftCallback,
- handleSplitAndKeepRightCallback,
- handleSeparateAudioCallback,
- ]
- );
-
- useEffect(() => {
- document.addEventListener("keydown", handleKeyPress);
- return () => document.removeEventListener("keydown", handleKeyPress);
- }, [handleKeyPress]);
};
diff --git a/apps/web/src/types/global.d.ts b/apps/web/src/types/global.d.ts
deleted file mode 100644
index f99e4cc3..00000000
--- a/apps/web/src/types/global.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-///
-///
-
-// Global React types
-declare global {
- namespace JSX {
- interface IntrinsicElements {
- [elemName: string]: any;
- }
- }
-}
-
-// React module declarations
-declare module 'react' {
- export * from '@types/react';
-}
-
-// Ensure this file is treated as a module
-export {};
\ No newline at end of file
diff --git a/apps/web/src/types/modules.d.ts b/apps/web/src/types/modules.d.ts
deleted file mode 100644
index 7cb7adfd..00000000
--- a/apps/web/src/types/modules.d.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-// Type declarations for external modules without @types packages
-
-declare module 'lucide-react' {
- import { FC, SVGProps } from 'react';
-
- export interface IconProps extends SVGProps {
- size?: string | number;
- strokeWidth?: string | number;
- }
-
- export const Scissors: FC;
- export const ArrowLeftToLine: FC;
- export const ArrowRightToLine: FC;
- export const Trash2: FC;
- export const Snowflake: FC;
- export const Copy: FC;
- export const SplitSquareHorizontal: FC;
- export const Pause: FC;
- export const Play: FC;
- export const Video: FC;
- export const Music: FC;
- export const TypeIcon: FC;
- export const Magnet: FC;
- export const Lock: FC;
- export const ChevronLeft: FC;
- export const ChevronRight: FC;
- export const ChevronDown: FC;
- export const ChevronUp: FC;
- export const Download: FC;
- export const Keyboard: FC;
- export const SkipBack: FC;
- export const SkipForward: FC;
- export const Loader2: FC;
- export const ExternalLink: FC;
- export const ArrowRight: FC;
- export const ArrowLeft: FC;
- export const Expand: FC;
- export const Plus: FC;
- export const Upload: FC;
- export const Image: FC;
- export const MoreVertical: FC;
- export const MoreHorizontal: FC;
- export const Eye: FC;
- export const EyeOff: FC;
- export const Check: FC;
- export const Circle: FC;
- export const Search: FC;
- export const X: FC;
- export const PanelLeft: FC;
- export const ChevronsUpDown: FC;
- export const CheckIcon: FC;
- export const Minus: FC;
- export const RefreshCw: FC;
- export const PipetteIcon: FC;
- export const Type: FC;
- export const Calendar: FC;
- export const CaptionsIcon: FC;
- export const ArrowLeftRightIcon: FC;
- export const SparklesIcon: FC;
- export const StickerIcon: FC;
- export const MusicIcon: FC;
- export const VideoIcon: FC;
- export const BlendIcon: FC;
- export const SlidersHorizontalIcon: FC;
- export type LucideIcon = FC;
- // Add other icons as needed
-}
-
-declare module 'sonner' {
- export interface ToastOptions {
- duration?: number;
- position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
- style?: React.CSSProperties;
- className?: string;
- description?: string;
- action?: {
- label: string;
- onClick: () => void;
- };
- cancel?: {
- label: string;
- onClick?: () => void;
- };
- id?: string | number;
- onDismiss?: (toast: any) => void;
- onAutoClose?: (toast: any) => void;
- }
-
- export interface Toast {
- success: (message: string, options?: ToastOptions) => void;
- error: (message: string, options?: ToastOptions) => void;
- info: (message: string, options?: ToastOptions) => void;
- warning: (message: string, options?: ToastOptions) => void;
- loading: (message: string, options?: ToastOptions) => void;
- custom: (jsx: React.ReactNode, options?: ToastOptions) => void;
- }
-
- export const toast: Toast;
- export const Toaster: React.FC;
-}
\ No newline at end of file
diff --git a/bun.lock b/bun.lock
index 915c3d0e..7102ca46 100644
--- a/bun.lock
+++ b/bun.lock
@@ -38,7 +38,7 @@
"embla-carousel-react": "^8.5.1",
"framer-motion": "^11.13.1",
"input-otp": "^1.4.1",
- "lucide-react": "^0.525.0",
+ "lucide-react": "^0.468.0",
"motion": "^12.18.1",
"next": "^15.4.1",
"next-themes": "^0.4.4",
@@ -734,7 +734,7 @@
"lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
- "lucide-react": ["lucide-react@0.525.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ=="],
+ "lucide-react": ["lucide-react@0.468.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" } }, "sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA=="],
"mdast-util-from-markdown": ["mdast-util-from-markdown@2.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "mdast-util-to-string": "^4.0.0", "micromark": "^4.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA=="],