diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index db810d3..41e842b 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -40,7 +40,7 @@ export function Timeline() { // Timeline shows all tracks (video, audio, effects) and their clips. // You can drag media here to add it to your project. // Clips can be trimmed, deleted, and moved. - const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClips, selectClip, deselectClip, clearSelectedClips, setSelectedClips } = + const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClips, selectClip, deselectClip, clearSelectedClips, setSelectedClips, updateClipTrim, undo, redo } = useTimelineStore(); const { mediaItems, addMediaItem } = useMediaStore(); const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle, setSpeed, speed } = usePlaybackStore(); @@ -98,6 +98,33 @@ export function Timeline() { return () => window.removeEventListener("keydown", handleKeyDown); }, [selectedClips, removeClipFromTrack, clearSelectedClips]); + // Keyboard event for undo (Cmd+Z) + 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]); + + // Keyboard event for redo (Cmd+Shift+Z or Cmd+Y) + 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]); + // Mouse down on timeline background to start marquee const handleTimelineMouseDown = (e: React.MouseEvent) => { if (e.target === e.currentTarget && e.button === 0) { @@ -309,9 +336,13 @@ export function Timeline() { }; const handleWheel = (e: React.WheelEvent) => { - e.preventDefault(); - const delta = e.deltaY > 0 ? -0.05 : 0.05; - setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta))); + // Only zoom if user is using pinch gesture (ctrlKey or metaKey is true) + if (e.ctrlKey || e.metaKey) { + e.preventDefault(); + const delta = e.deltaY > 0 ? -0.05 : 0.05; + setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta))); + } + // Otherwise, allow normal scrolling }; const dragProps = { @@ -321,6 +352,92 @@ export function Timeline() { onDrop: handleDrop, }; + // Action handlers for toolbar + const handleSplitSelected = () => { + if (selectedClips.length === 0) { + toast.error("No clips selected"); + return; + } + selectedClips.forEach(({ trackId, clipId }) => { + const track = tracks.find(t => t.id === trackId); + const clip = track?.clips.find(c => c.id === clipId); + if (clip && track) { + const splitTime = currentTime; + const effectiveStart = clip.startTime; + const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); + if (splitTime > effectiveStart && splitTime < effectiveEnd) { + updateClipTrim(track.id, clip.id, clip.trimStart, clip.trimEnd + (effectiveEnd - splitTime)); + addClipToTrack(track.id, { + mediaId: clip.mediaId, + name: clip.name + " (split)", + duration: clip.duration, + startTime: splitTime, + trimStart: clip.trimStart + (splitTime - effectiveStart), + trimEnd: clip.trimEnd, + }); + } + } + }); + toast.success("Split selected clip(s)"); + }; + + const handleDuplicateSelected = () => { + if (selectedClips.length === 0) { + toast.error("No clips selected"); + return; + } + selectedClips.forEach(({ trackId, clipId }) => { + const track = tracks.find(t => t.id === trackId); + const clip = track?.clips.find(c => c.id === clipId); + if (clip && track) { + addClipToTrack(track.id, { + mediaId: clip.mediaId, + name: clip.name + " (copy)", + duration: clip.duration, + startTime: clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd) + 0.1, + trimStart: clip.trimStart, + trimEnd: clip.trimEnd, + }); + } + }); + toast.success("Duplicated selected clip(s)"); + }; + + const handleFreezeSelected = () => { + if (selectedClips.length === 0) { + toast.error("No clips selected"); + return; + } + selectedClips.forEach(({ trackId, clipId }) => { + const track = tracks.find(t => t.id === trackId); + const clip = track?.clips.find(c => c.id === clipId); + if (clip && track) { + // Add a new freeze frame clip at the playhead + addClipToTrack(track.id, { + mediaId: clip.mediaId, + name: clip.name + " (freeze)", + duration: 1, // 1 second freeze frame + startTime: currentTime, + trimStart: 0, + trimEnd: clip.duration - 1, + }); + } + }); + toast.success("Freeze frame added for selected clip(s)"); + }; + + const handleDeleteSelected = () => { + if (selectedClips.length === 0) { + toast.error("No clips selected"); + return; + } + selectedClips.forEach(({ trackId, clipId }) => { + removeClipFromTrack(trackId, clipId); + }); + clearSelectedClips(); + toast.success("Deleted selected clip(s)"); + }; + return (
- @@ -429,7 +546,7 @@ export function Timeline() { - @@ -438,7 +555,7 @@ export function Timeline() { - @@ -447,7 +564,7 @@ export function Timeline() { - @@ -645,15 +762,14 @@ export function Timeline() {
{/* Timeline Tracks Content */} -
- +
+
+ {/* Timeline grid and clips area (with left margin for sidebar) */}
0 ? `${tracks.length * 60}px` : "200px", }} onClick={handleTimelineAreaClick} onMouseDown={handleTimelineMouseDown} @@ -696,7 +812,6 @@ export function Timeline() { zoomLevel={zoomLevel} setContextMenu={setContextMenu} /> -
))} @@ -711,7 +826,7 @@ export function Timeline() { )}
- +
@@ -777,7 +892,7 @@ export function Timeline() { const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); if (splitTime > effectiveStart && splitTime < effectiveEnd) { - useTimelineStore.getState().updateClipTrim( + updateClipTrim( track.id, clip.id, clip.trimStart, @@ -1441,9 +1556,18 @@ function TimelineTrackContent({ style={{ width: `${clipWidth}px`, left: `${clipLeft}px` }} onClick={(e) => { e.stopPropagation(); + const isSelected = selectedClips.some( + (c) => c.trackId === track.id && c.clipId === clip.id + ); + if (e.metaKey || e.ctrlKey || e.shiftKey) { + // Multi-selection mode: toggle the clip selectClip(track.id, clip.id, true); + } else if (isSelected) { + // If clip is already selected, deselect it + deselectClip(track.id, clip.id); } else { + // If clip is not selected, select it (replacing other selections) selectClip(track.id, clip.id, false); } }} @@ -1516,8 +1640,7 @@ function TimelineTrackContent({ {/* Drop position indicator */} {isDraggedOver && dropPosition !== null && (
number; + + // New actions + undo: () => void; + redo: () => void; + pushHistory: () => void; } export const useTimelineStore = create((set, get) => ({ tracks: [], + history: [], + redoStack: [], selectedClips: [], + pushHistory: () => { + const { tracks, history, redoStack } = get(); + // Deep copy tracks + set({ + history: [...history, JSON.parse(JSON.stringify(tracks))], + redoStack: [] // Clear redo stack when new action is performed + }); + }, + + undo: () => { + const { history, redoStack, tracks } = get(); + if (history.length === 0) return; + const prev = history[history.length - 1]; + set({ + tracks: prev, + history: history.slice(0, -1), + redoStack: [...redoStack, JSON.parse(JSON.stringify(tracks))] // Add current state to redo stack + }); + }, + selectClip: (trackId, clipId, multi = false) => { set((state) => { const exists = state.selectedClips.some( @@ -86,6 +115,7 @@ export const useTimelineStore = create((set, get) => ({ setSelectedClips: (clips) => set({ selectedClips: clips }), addTrack: (type) => { + get().pushHistory(); const newTrack: TimelineTrack = { id: crypto.randomUUID(), name: `${type.charAt(0).toUpperCase() + type.slice(1)} Track`, @@ -100,12 +130,14 @@ export const useTimelineStore = create((set, get) => ({ }, removeTrack: (trackId) => { + get().pushHistory(); set((state) => ({ tracks: state.tracks.filter((track) => track.id !== trackId), })); }, addClipToTrack: (trackId, clipData) => { + get().pushHistory(); const newClip: TimelineClip = { ...clipData, id: crypto.randomUUID(), @@ -124,19 +156,21 @@ export const useTimelineStore = create((set, get) => ({ }, removeClipFromTrack: (trackId, clipId) => { + get().pushHistory(); set((state) => ({ - tracks: state.tracks.map((track) => - track.id === trackId - ? { - ...track, - clips: track.clips.filter((clip) => clip.id !== clipId), - } - : track - ), + tracks: state.tracks + .map((track) => + track.id === trackId + ? { ...track, clips: track.clips.filter((clip) => clip.id !== clipId) } + : track + ) + // Remove track if it becomes empty + .filter((track) => track.clips.length > 0), })); }, moveClipToTrack: (fromTrackId, toTrackId, clipId) => { + get().pushHistory(); set((state) => { const fromTrack = state.tracks.find((track) => track.id === fromTrackId); const clipToMove = fromTrack?.clips.find((clip) => clip.id === clipId); @@ -144,25 +178,29 @@ export const useTimelineStore = create((set, get) => ({ if (!clipToMove) return state; return { - tracks: state.tracks.map((track) => { - if (track.id === fromTrackId) { - return { - ...track, - clips: track.clips.filter((clip) => clip.id !== clipId), - }; - } else if (track.id === toTrackId) { - return { - ...track, - clips: [...track.clips, clipToMove], - }; - } - return track; - }), + tracks: state.tracks + .map((track) => { + if (track.id === fromTrackId) { + return { + ...track, + clips: track.clips.filter((clip) => clip.id !== clipId), + }; + } else if (track.id === toTrackId) { + return { + ...track, + clips: [...track.clips, clipToMove], + }; + } + return track; + }) + // Remove track if it becomes empty + .filter((track) => track.clips.length > 0), }; }); }, updateClipTrim: (trackId, clipId, trimStart, trimEnd) => { + get().pushHistory(); set((state) => ({ tracks: state.tracks.map((track) => track.id === trackId @@ -178,6 +216,7 @@ export const useTimelineStore = create((set, get) => ({ }, updateClipStartTime: (trackId, clipId, startTime) => { + get().pushHistory(); set((state) => ({ tracks: state.tracks.map((track) => track.id === trackId @@ -193,6 +232,7 @@ export const useTimelineStore = create((set, get) => ({ }, toggleTrackMute: (trackId) => { + get().pushHistory(); set((state) => ({ tracks: state.tracks.map((track) => track.id === trackId ? { ...track, muted: !track.muted } : track @@ -214,4 +254,11 @@ export const useTimelineStore = create((set, get) => ({ return Math.max(...trackEndTimes, 0); }, + + redo: () => { + const { redoStack } = get(); + if (redoStack.length === 0) return; + const next = redoStack[redoStack.length - 1]; + set({ tracks: next, redoStack: redoStack.slice(0, -1) }); + }, })); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..9891ac9 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "OpenCut", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}