feat:implemented-undo-feature-for-timeline

2 files changed, 65 insertions, 23 deletions

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index fb94b374..484e1a6b 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, updateClipTrim } =

+  const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClips, selectClip, deselectClip, clearSelectedClips, setSelectedClips, updateClipTrim, undo } =

     useTimelineStore();

   const { mediaItems, addMediaItem } = useMediaStore();

   const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle, setSpeed, speed } = usePlaybackStore();

@@ -98,6 +98,18 @@ 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]);

+

   // Mouse down on timeline background to start marquee

   const handleTimelineMouseDown = (e: React.MouseEvent) => {

     if (e.target === e.currentTarget && e.button === 0) {

diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index 4b55a53d..a369d574 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -20,6 +20,7 @@ export interface TimelineTrack {
 

 interface TimelineStore {

   tracks: TimelineTrack[];

+  history: TimelineTrack[][];

 

   // Multi-selection

   selectedClips: { trackId: string; clipId: string }[];

@@ -53,12 +54,30 @@ interface TimelineStore {
 

   // Computed values

   getTotalDuration: () => number;

+

+  // New actions

+  undo: () => void;

+  pushHistory: () => void;

 }

 

 export const useTimelineStore = create<TimelineStore>((set, get) => ({

   tracks: [],

+  history: [],

   selectedClips: [],

 

+  pushHistory: () => {

+    const { tracks, history } = get();

+    // Deep copy tracks

+    set({ history: [...history, JSON.parse(JSON.stringify(tracks))] });

+  },

+

+  undo: () => {

+    const { history } = get();

+    if (history.length === 0) return;

+    const prev = history[history.length - 1];

+    set({ tracks: prev, history: history.slice(0, -1) });

+  },

+

   selectClip: (trackId, clipId, multi = false) => {

     set((state) => {

       const exists = state.selectedClips.some(

@@ -86,6 +105,7 @@ export const useTimelineStore = create<TimelineStore>((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 +120,14 @@ export const useTimelineStore = create<TimelineStore>((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 +146,21 @@ export const useTimelineStore = create<TimelineStore>((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 +168,29 @@ export const useTimelineStore = create<TimelineStore>((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 +206,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
   },

 

   updateClipStartTime: (trackId, clipId, startTime) => {

+    get().pushHistory();

     set((state) => ({

       tracks: state.tracks.map((track) =>

         track.id === trackId

@@ -193,6 +222,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
   },

 

   toggleTrackMute: (trackId) => {

+    get().pushHistory();

     set((state) => ({

       tracks: state.tracks.map((track) =>

         track.id === trackId ? { ...track, muted: !track.muted } : track