Merge branch 'main' into implement-workflows

3 files changed, 142 insertions, 79 deletions

diff --git a/apps/web/src/stores/panel-store.ts b/apps/web/src/stores/panel-store.ts
index ea2dacb9..7706417a 100644
--- a/apps/web/src/stores/panel-store.ts
+++ b/apps/web/src/stores/panel-store.ts
@@ -2,78 +2,40 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";

 

 interface PanelState {

-  // Horizontal panel sizes

+  // Panel sizes as percentages

   toolsPanel: number;

   previewPanel: number;

   propertiesPanel: number;

-

-  // Vertical panel sizes

   mainContent: number;

   timeline: number;

 

-  // Flag to prevent initial overwrites

-  isInitialized: boolean;

-

   // Actions

   setToolsPanel: (size: number) => void;

   setPreviewPanel: (size: number) => void;

   setPropertiesPanel: (size: number) => void;

   setMainContent: (size: number) => void;

   setTimeline: (size: number) => void;

-  setInitialized: () => void;

 }

 

 export const usePanelStore = create<PanelState>()(

   persist(

-    (set, get) => ({

-      // Default sizes

-      toolsPanel: 20,

-      previewPanel: 60,

+    (set) => ({

+      // Default sizes - optimized for responsiveness

+      toolsPanel: 25,

+      previewPanel: 75,

       propertiesPanel: 20,

-      mainContent: 50,

-      timeline: 50,

-      isInitialized: false,

+      mainContent: 70,

+      timeline: 30,

 

       // Actions

-      setToolsPanel: (size) => {

-        const state = get();

-        if (!state.isInitialized) return;

-        set({ toolsPanel: size });

-      },

-      setPreviewPanel: (size) => {

-        const state = get();

-        if (!state.isInitialized) return;

-        set({ previewPanel: size });

-      },

-      setPropertiesPanel: (size) => {

-        const state = get();

-        if (!state.isInitialized) return;

-        set({ propertiesPanel: size });

-      },

-      setMainContent: (size) => {

-        const state = get();

-        if (!state.isInitialized) return;

-        set({ mainContent: size });

-      },

-      setTimeline: (size) => {

-        const state = get();

-        if (!state.isInitialized) return;

-        set({ timeline: size });

-      },

-      setInitialized: () => {

-        console.log("Panel store initialized for resize events");

-        set({ isInitialized: true });

-      },

+      setToolsPanel: (size) => set({ toolsPanel: size }),

+      setPreviewPanel: (size) => set({ previewPanel: size }),

+      setPropertiesPanel: (size) => set({ propertiesPanel: size }),

+      setMainContent: (size) => set({ mainContent: size }),

+      setTimeline: (size) => set({ timeline: size }),

     }),

     {

       name: "panel-sizes",

-      partialize: (state) => ({

-        toolsPanel: state.toolsPanel,

-        previewPanel: state.previewPanel,

-        propertiesPanel: state.propertiesPanel,

-        mainContent: state.mainContent,

-        timeline: state.timeline,

-      }),

     }

   )

 );

diff --git a/apps/web/src/stores/playback-store.ts b/apps/web/src/stores/playback-store.ts
index 3c0bfdec..a4794b7f 100644
--- a/apps/web/src/stores/playback-store.ts
+++ b/apps/web/src/stores/playback-store.ts
@@ -6,15 +6,20 @@ interface PlaybackStore extends PlaybackState, PlaybackControls {
   setCurrentTime: (time: number) => void;
 }
 
-let playbackTimer: NodeJS.Timeout | null = null;
+let playbackTimer: number | null = null;
 
 const startTimer = (store: any) => {
-  if (playbackTimer) clearInterval(playbackTimer);
+  if (playbackTimer) cancelAnimationFrame(playbackTimer);
   
-  playbackTimer = setInterval(() => {
+  // Use requestAnimationFrame for smoother updates
+  const updateTime = () => {
     const state = store();
     if (state.isPlaying && state.currentTime < state.duration) {
-      const newTime = state.currentTime + 0.1;
+      const now = performance.now();
+      const delta = (now - lastUpdate) / 1000; // Convert to seconds
+      lastUpdate = now;
+      
+      const newTime = state.currentTime + (delta * state.speed);
       if (newTime >= state.duration) {
         state.pause();
       } else {
@@ -23,12 +28,16 @@ const startTimer = (store: any) => {
         window.dispatchEvent(new CustomEvent('playback-update', { detail: { time: newTime } }));
       }
     }
-  }, 100);
+    playbackTimer = requestAnimationFrame(updateTime);
+  };
+
+  let lastUpdate = performance.now();
+  playbackTimer = requestAnimationFrame(updateTime);
 };
 
 const stopTimer = () => {
   if (playbackTimer) {
-    clearInterval(playbackTimer);
+    cancelAnimationFrame(playbackTimer);
     playbackTimer = null;
   }
 };
@@ -38,6 +47,7 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
   currentTime: 0,
   duration: 0,
   volume: 1,
+  speed: 1.0,
 
   play: () => {
     set({ isPlaying: true });
@@ -64,10 +74,20 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
     set({ currentTime: clampedTime });
     
     // Notify video elements to seek
-    window.dispatchEvent(new CustomEvent('playback-seek', { detail: { time: clampedTime } }));
+    const event = new CustomEvent('playback-seek', { detail: { time: clampedTime } });
+    window.dispatchEvent(event);
   },
   
   setVolume: (volume: number) => set({ volume: Math.max(0, Math.min(1, volume)) }),
+  
+  setSpeed: (speed: number) => {
+    const newSpeed = Math.max(0.1, Math.min(2.0, speed));
+    set({ speed: newSpeed });
+    
+    const event = new CustomEvent('playback-speed', { detail: { speed: newSpeed } });
+    window.dispatchEvent(event);
+  },
+
   setDuration: (duration: number) => set({ duration }),
   setCurrentTime: (time: number) => set({ currentTime: time }),
 })); 
\ No newline at end of file
diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index c569ae11..e1474bae 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -20,6 +20,15 @@ export interface TimelineTrack {
 

 interface TimelineStore {

   tracks: TimelineTrack[];

+  history: TimelineTrack[][];

+  redoStack: TimelineTrack[][];

+

+  // Multi-selection

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

+  selectClip: (trackId: string, clipId: string, multi?: boolean) => void;

+  deselectClip: (trackId: string, clipId: string) => void;

+  clearSelectedClips: () => void;

+  setSelectedClips: (clips: { trackId: string; clipId: string }[]) => void;

 

   // Actions

   addTrack: (type: "video" | "audio" | "effects") => string;

@@ -46,12 +55,67 @@ interface TimelineStore {
 

   // Computed values

   getTotalDuration: () => number;

+

+  // New actions

+  undo: () => void;

+  redo: () => void;

+  pushHistory: () => void;

 }

 

 export const useTimelineStore = create<TimelineStore>((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(

+        (c) => c.trackId === trackId && c.clipId === clipId

+      );

+      if (multi) {

+        // Toggle selection

+        return exists

+          ? { selectedClips: state.selectedClips.filter((c) => !(c.trackId === trackId && c.clipId === clipId)) }

+          : { selectedClips: [...state.selectedClips, { trackId, clipId }] };

+      } else {

+        return { selectedClips: [{ trackId, clipId }] };

+      }

+    });

+  },

+  deselectClip: (trackId, clipId) => {

+    set((state) => ({

+      selectedClips: state.selectedClips.filter((c) => !(c.trackId === trackId && c.clipId === clipId)),

+    }));

+  },

+  clearSelectedClips: () => {

+    set({ selectedClips: [] });

+  },

+

+  setSelectedClips: (clips) => set({ selectedClips: clips }),

 

   addTrack: (type) => {

+    get().pushHistory();

     const newTrack: TimelineTrack = {

       id: crypto.randomUUID(),

       name: `${type.charAt(0).toUpperCase() + type.slice(1)} Track`,

@@ -66,12 +130,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(),

@@ -90,19 +156,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);

@@ -110,25 +178,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

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

 

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

+    get().pushHistory();

     set((state) => ({

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

         track.id === trackId

@@ -159,6 +232,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

@@ -180,4 +254,11 @@ export const useTimelineStore = create<TimelineStore>((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) });

+  },

 }));