2 files changed, 23 insertions, 20 deletions

diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
index 929aec18..00b9478b 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -3,7 +3,6 @@
 import { useDragDrop } from "@/hooks/use-drag-drop";

 import { processMediaFiles } from "@/lib/media-processing";

 import { useMediaStore, type MediaItem } from "@/stores/media-store";

-import { useTimelineStore } from "@/stores/timeline-store";

 import { Image, Music, Plus, Upload, Video } from "lucide-react";

 import { useEffect, useRef, useState } from "react";

 import { toast } from "sonner";

@@ -85,25 +84,7 @@ export function MediaView() {
       return;

     }

 

-    // Remove elements automatically when delete media

-    const { tracks, removeTrack } = useTimelineStore.getState();

-    tracks.forEach((track) => {

-      const elementsToRemove = track.elements.filter(

-        (element) => element.type === "media" && element.mediaId === id

-      );

-      elementsToRemove.forEach((element) => {

-        useTimelineStore

-          .getState()

-          .removeElementFromTrack(track.id, element.id);

-      });

-      // Only remove track if it becomes empty and has no other elements

-      const updatedTrack = useTimelineStore

-        .getState()

-        .tracks.find((t) => t.id === track.id);

-      if (updatedTrack && updatedTrack.elements.length === 0) {

-        removeTrack(track.id);

-      }

-    });

+    // Media store now handles cascade deletion automatically

     await removeMediaItem(activeProject.id, id);

   };

 

diff --git a/apps/web/src/stores/media-store.ts b/apps/web/src/stores/media-store.ts
index 268fd0fc..40aa2c66 100644
--- a/apps/web/src/stores/media-store.ts
+++ b/apps/web/src/stores/media-store.ts
@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { storageService } from "@/lib/storage/storage-service";
+import { useTimelineStore } from "./timeline-store";
 
 export type MediaType = "image" | "video" | "audio";
 
@@ -192,6 +193,27 @@ export const useMediaStore = create<MediaStore>((set, get) => ({
       }
     }
 
+    // CASCADE DELETION - Remove timeline elements that use this media
+    const { tracks, removeElementFromTrack, removeTrack } =
+      useTimelineStore.getState();
+
+    tracks.forEach((track) => {
+      const elementsToRemove = track.elements.filter(
+        (element) => element.type === "media" && element.mediaId === id
+      );
+      elementsToRemove.forEach((element) => {
+        removeElementFromTrack(track.id, element.id);
+      });
+    });
+
+    // Clean up empty tracks after removing elements
+    const updatedTracks = useTimelineStore.getState().tracks;
+    updatedTracks.forEach((track) => {
+      if (track.elements.length === 0) {
+        removeTrack(track.id);
+      }
+    });
+
     // Remove from local state immediately
     set((state) => ({
       mediaItems: state.mediaItems.filter((media) => media.id !== id),