diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/package.json | 1 | ||||
| -rw-r--r-- | apps/web/src/app/projects/page.tsx | 2 | ||||
| -rw-r--r-- | apps/web/src/hooks/use-editor-actions.ts | 280 |
3 files changed, 176 insertions, 107 deletions
diff --git a/apps/web/package.json b/apps/web/package.json index f5cd7da4..e19e1953 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -72,6 +72,7 @@ "devDependencies": { "@tailwindcss/typography": "^0.5.16", "@types/bun": "latest", + "@types/node": "^24.1.0", "@types/pg": "^8.15.4", "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx index 4b68791b..2cd20730 100644 --- a/apps/web/src/app/projects/page.tsx +++ b/apps/web/src/app/projects/page.tsx @@ -399,7 +399,7 @@ function ProjectCard({ > {isSelectionMode && ( <div className="absolute top-3 left-3 z-10"> - <div className="w-5 h-5 rounded bg-background/80 backdrop-blur-sm border flex items-center justify-center"> + <div className="w-4.9 h-4.9 rounded-full bg-background/80 backdrop-blur-sm border flex items-center justify-center"> <Checkbox checked={isSelected} onCheckedChange={(checked) => diff --git a/apps/web/src/hooks/use-editor-actions.ts b/apps/web/src/hooks/use-editor-actions.ts index b2fad55f..bfe9a7b9 100644 --- a/apps/web/src/hooks/use-editor-actions.ts +++ b/apps/web/src/hooks/use-editor-actions.ts @@ -26,136 +26,204 @@ export function useEditorActions() { const { activeProject } = useProjectStore(); // Playback actions - useActionHandler("toggle-play", () => { - toggle(); - }, undefined); - - useActionHandler("stop-playback", () => { - if (isPlaying) { + useActionHandler( + "toggle-play", + () => { toggle(); - } - seek(0); - }, undefined); + }, + undefined + ); + + useActionHandler( + "stop-playback", + () => { + if (isPlaying) { + toggle(); + } + seek(0); + }, + undefined + ); - useActionHandler("seek-forward", (args) => { - const seconds = args?.seconds ?? 1; - seek(Math.min(duration, currentTime + seconds)); - }, undefined); + useActionHandler( + "seek-forward", + (args) => { + const seconds = args?.seconds ?? 1; + seek(Math.min(duration, currentTime + seconds)); + }, + undefined + ); - useActionHandler("seek-backward", (args) => { - const seconds = args?.seconds ?? 1; - seek(Math.max(0, currentTime - seconds)); - }, undefined); + useActionHandler( + "seek-backward", + (args) => { + const seconds = args?.seconds ?? 1; + seek(Math.max(0, currentTime - seconds)); + }, + undefined + ); - useActionHandler("frame-step-forward", () => { - const projectFps = activeProject?.fps || 30; - seek(Math.min(duration, currentTime + 1 / projectFps)); - }, undefined); + useActionHandler( + "frame-step-forward", + () => { + const projectFps = activeProject?.fps || 30; + seek(Math.min(duration, currentTime + 1 / projectFps)); + }, + undefined + ); - useActionHandler("frame-step-backward", () => { - const projectFps = activeProject?.fps || 30; - seek(Math.max(0, currentTime - 1 / projectFps)); - }, undefined); + useActionHandler( + "frame-step-backward", + () => { + const projectFps = activeProject?.fps || 30; + seek(Math.max(0, currentTime - 1 / projectFps)); + }, + undefined + ); - useActionHandler("jump-forward", (args) => { - const seconds = args?.seconds ?? 5; - seek(Math.min(duration, currentTime + seconds)); - }, undefined); + useActionHandler( + "jump-forward", + (args) => { + const seconds = args?.seconds ?? 5; + seek(Math.min(duration, currentTime + seconds)); + }, + undefined + ); - useActionHandler("jump-backward", (args) => { - const seconds = args?.seconds ?? 5; - seek(Math.max(0, currentTime - seconds)); - }, undefined); + useActionHandler( + "jump-backward", + (args) => { + const seconds = args?.seconds ?? 5; + seek(Math.max(0, currentTime - seconds)); + }, + undefined + ); - useActionHandler("goto-start", () => { - seek(0); - }, undefined); + useActionHandler( + "goto-start", + () => { + seek(0); + }, + undefined + ); - useActionHandler("goto-end", () => { - seek(duration); - }, undefined); + useActionHandler( + "goto-end", + () => { + seek(duration); + }, + undefined + ); // Timeline editing actions - useActionHandler("split-element", () => { - if (selectedElements.length !== 1) { - toast.error("Select exactly one element to split"); - return; - } + useActionHandler( + "split-element", + () => { + 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); + 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 (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"); + if (currentTime > effectiveStart && currentTime < effectiveEnd) { + splitElement(trackId, elementId, currentTime); + } else { + toast.error("Playhead must be within selected element"); + } } - } - }, undefined); + }, + undefined + ); - useActionHandler("delete-selected", () => { - if (selectedElements.length === 0) { - return; - } - selectedElements.forEach( - ({ trackId, elementId }: { trackId: string; elementId: string }) => { - removeElementFromTrack(trackId, elementId); + useActionHandler( + "delete-selected", + () => { + if (selectedElements.length === 0) { + return; } - ); - clearSelectedElements(); - }, undefined); + selectedElements.forEach( + ({ trackId, elementId }: { trackId: string; elementId: string }) => { + removeElementFromTrack(trackId, elementId); + } + ); + clearSelectedElements(); + }, + undefined + ); - useActionHandler("select-all", () => { - const allElements = tracks.flatMap((track: any) => - track.elements.map((element: any) => ({ - trackId: track.id, - elementId: element.id, - })) - ); - setSelectedElements(allElements); - }, undefined); + useActionHandler( + "select-all", + () => { + const allElements = tracks.flatMap((track: any) => + track.elements.map((element: any) => ({ + trackId: track.id, + elementId: element.id, + })) + ); + setSelectedElements(allElements); + }, + undefined + ); - useActionHandler("duplicate-selected", () => { - if (selectedElements.length !== 1) { - toast.error("Select exactly one element to duplicate"); - return; - } + useActionHandler( + "duplicate-selected", + () => { + 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); + 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; + if (element) { + const newStartTime = + element.startTime + + (element.duration - element.trimStart - element.trimEnd) + + 0.1; + const { id, ...elementWithoutId } = element; - addElementToTrack(trackId, { - ...elementWithoutId, - startTime: newStartTime, - }); - } - }, undefined); + addElementToTrack(trackId, { + ...elementWithoutId, + startTime: newStartTime, + }); + } + }, + undefined + ); - useActionHandler("toggle-snapping", () => { - toggleSnapping(); - }, undefined); + useActionHandler( + "toggle-snapping", + () => { + toggleSnapping(); + }, + undefined + ); // History actions - useActionHandler("undo", () => { - undo(); - }, undefined); + useActionHandler( + "undo", + () => { + undo(); + }, + undefined + ); - useActionHandler("redo", () => { - redo(); - }, undefined); + useActionHandler( + "redo", + () => { + redo(); + }, + undefined + ); } |