From f76555dae530e9bbc2a892300b228404991d3458 Mon Sep 17 00:00:00 2001
From: priyankarpal <88102392+priyankarpal@users.noreply.github.com>
Date: Thu, 26 Jun 2025 21:29:03 +0530
Subject: fix: remmove video track when media is deleted

---
 apps/web/src/components/editor/media-panel.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

(limited to 'apps/web/src/components/editor/media-panel.tsx')

diff --git a/apps/web/src/components/editor/media-panel.tsx b/apps/web/src/components/editor/media-panel.tsx
index dfe08365..7ca22cc1 100644
--- a/apps/web/src/components/editor/media-panel.tsx
+++ b/apps/web/src/components/editor/media-panel.tsx
@@ -1,14 +1,15 @@
 "use client";
 
-import { Button } from "../ui/button";
-import { AspectRatio } from "../ui/aspect-ratio";
-import { DragOverlay } from "../ui/drag-overlay";
-import { useMediaStore, type MediaItem } from "@/stores/media-store";
-import { processMediaFiles } from "@/lib/media-processing";
-import { Plus, Image, Video, Music, Trash2, Upload } from "lucide-react";
 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, Trash2, Upload, Video } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
+import { AspectRatio } from "../ui/aspect-ratio";
+import { Button } from "../ui/button";
+import { DragOverlay } from "../ui/drag-overlay";
 
 // MediaPanel lets users add, view, and drag media (images, videos, audio) into the project.
 // You can upload files or drag them from your computer. Dragging from here to the timeline adds them to your video project.
@@ -58,6 +59,15 @@ export function MediaPanel() {
   const handleRemove = (e: React.MouseEvent, id: string) => {
     // Remove a media item from the store
     e.stopPropagation();
+
+
+    // Remove tracks automatically when delete media 
+    const { tracks, removeTrack } = useTimelineStore.getState();
+    tracks.forEach((track) => {
+      if (track.clips.some((clip) => clip.mediaId === id)) {
+        removeTrack(track.id);
+      }
+    });
     removeMediaItem(id);
   };
 
-- 
cgit v1.3.1


From fff95afbc628652e182cc35ac276068a39386116 Mon Sep 17 00:00:00 2001
From: priyankarpal <88102392+priyankarpal@users.noreply.github.com>
Date: Thu, 26 Jun 2025 21:41:26 +0530
Subject: fix: Only remove track if it becomes empty and has no other clips

---
 apps/web/src/components/editor/media-panel.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'apps/web/src/components/editor/media-panel.tsx')

diff --git a/apps/web/src/components/editor/media-panel.tsx b/apps/web/src/components/editor/media-panel.tsx
index 7ca22cc1..f717234d 100644
--- a/apps/web/src/components/editor/media-panel.tsx
+++ b/apps/web/src/components/editor/media-panel.tsx
@@ -64,7 +64,13 @@ export function MediaPanel() {
     // Remove tracks automatically when delete media 
     const { tracks, removeTrack } = useTimelineStore.getState();
     tracks.forEach((track) => {
-      if (track.clips.some((clip) => clip.mediaId === id)) {
+      const clipsToRemove = track.clips.filter((clip) => clip.mediaId === id);
+      clipsToRemove.forEach((clip) => {
+        useTimelineStore.getState().removeClipFromTrack(track.id, clip.id);
+      });
+      // Only remove track if it becomes empty and has no other clips
+      const updatedTrack = useTimelineStore.getState().tracks.find(t => t.id === track.id);
+      if (updatedTrack && updatedTrack.clips.length === 0) {
         removeTrack(track.id);
       }
     });
-- 
cgit v1.3.1