diff options
Diffstat (limited to 'apps/web')
| -rw-r--r-- | apps/web/package.json | 2 | ||||
| -rw-r--r-- | apps/web/src/components/editor/media-panel.tsx | 28 | ||||
| -rw-r--r-- | apps/web/src/components/editor/timeline.tsx | 30 |
3 files changed, 23 insertions, 37 deletions
diff --git a/apps/web/package.json b/apps/web/package.json index bc12e24d..27c07718 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -68,4 +68,4 @@ "tsx": "^4.7.1", "typescript": "^5" } -} +}
\ No newline at end of file diff --git a/apps/web/src/components/editor/media-panel.tsx b/apps/web/src/components/editor/media-panel.tsx index dfe08365..f717234d 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,21 @@ 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) => { + 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); + } + }); removeMediaItem(id); }; diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index 4de290a7..7e63e68b 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -1631,36 +1631,6 @@ function TimelineTrackContent({ onDragEnd={handleClipDragEnd}
>
{renderClipContent(clip)}
- {/* Clip options menu */}
- <div className="absolute top-1 right-1 z-10">
- <Button
- variant="text"
- size="icon"
- className="opacity-0 group-hover:opacity-100 transition-opacity"
- onClick={() => setClipMenuOpen(clip.id)}
- >
- <MoreVertical className="h-4 w-4" />
- </Button>
- {clipMenuOpen === clip.id && (
- <div className="absolute right-0 mt-2 w-32 bg-white text-black border rounded shadow z-50">
- <button
- className="flex items-center w-full px-3 py-2 text-sm hover:bg-muted/30"
- onClick={() => {
- handleSplitClip(clip);
- setClipMenuOpen(null);
- }}
- >
- <Scissors className="h-4 w-4 mr-2" /> Split
- </button>
- <button
- className="flex items-center w-full px-3 py-2 text-sm text-red-600 hover:bg-red-50"
- onClick={() => handleDeleteClip(clip.id)}
- >
- <Trash2 className="h-4 w-4 mr-2" /> Delete
- </button>
- </div>
- )}
- </div>
</div>
{/* Right trim handle */}
<div
|