diff options
| author | Maze Winther <mazewinther@gmail.com> | 2025-06-24 17:51:34 +0200 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2025-06-24 17:51:34 +0200 |
| commit | 2aa37920d5f183f9c0de2c42076fa57c5b48320e (patch) | |
| tree | 2bde61eddd07d43027ed65478222b70314800403 /apps/web/src/hooks | |
| parent | c3df43b8c8bf281da022514b665b532928f1fbd0 (diff) | |
| download | opencut-2aa37920d5f183f9c0de2c42076fa57c5b48320e.tar.gz | |
refactor: overhaul timeline component, separate into different files
Diffstat (limited to 'apps/web/src/hooks')
| -rw-r--r-- | apps/web/src/hooks/use-keyboard-shortcuts.ts | 51 |
1 files changed, 51 insertions, 0 deletions
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..5fd81bff --- /dev/null +++ b/apps/web/src/hooks/use-keyboard-shortcuts.ts @@ -0,0 +1,51 @@ +import { useEffect } from "react";
+import { useTimelineStore } from "@/stores/timeline-store";
+
+export function useKeyboardShortcuts() {
+ const { selectedClips, removeClipFromTrack, clearSelectedClips, undo, redo } =
+ useTimelineStore();
+
+ // Delete/Backspace - Delete selected clips
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (
+ (e.key === "Delete" || e.key === "Backspace") &&
+ selectedClips.length > 0
+ ) {
+ selectedClips.forEach(({ trackId, clipId }) => {
+ removeClipFromTrack(trackId, clipId);
+ });
+ clearSelectedClips();
+ }
+ };
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [selectedClips, removeClipFromTrack, clearSelectedClips]);
+
+ // Cmd+Z / Ctrl+Z - Undo
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if ((e.metaKey || e.ctrlKey) && e.key === "z" && !e.shiftKey) {
+ e.preventDefault();
+ undo();
+ }
+ };
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [undo]);
+
+ // Cmd+Shift+Z / Ctrl+Shift+Z or Cmd+Y / Ctrl+Y - Redo
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if ((e.metaKey || e.ctrlKey) && e.key === "z" && e.shiftKey) {
+ e.preventDefault();
+ redo();
+ } else if ((e.metaKey || e.ctrlKey) && e.key === "y") {
+ e.preventDefault();
+ redo();
+ }
+ };
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [redo]);
+}
|