Merge pull request #18 from aashishparuvada/main

enabled-multiclip-selection-and-deselection

1 files changed, 30 insertions, 9 deletions

diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index ea6fc35e..4b55a53d 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -21,10 +21,12 @@ export interface TimelineTrack {
 interface TimelineStore {

   tracks: TimelineTrack[];

 

-  // Selection

-  selectedClip: { trackId: string; clipId: string } | null;

-  selectClip: (trackId: string, clipId: string) => void;

-  clearSelectedClip: () => void;

+  // 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;

@@ -55,15 +57,34 @@ interface TimelineStore {
 

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

   tracks: [],

-  selectedClip: null,

+  selectedClips: [],

 

-  selectClip: (trackId, clipId) => {

-    set({ selectedClip: { trackId, clipId } });

+  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)),

+    }));

   },

-  clearSelectedClip: () => {

-    set({ selectedClip: null });

+  clearSelectedClips: () => {

+    set({ selectedClips: [] });

   },

 

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

+

   addTrack: (type) => {

     const newTrack: TimelineTrack = {

       id: crypto.randomUUID(),