xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remmove video track when media is deleted

Browse Source
This commit is contained in:
priyankarpal
2025-06-26 21:29:03 +05:30
parent 53184217bf
commit f76555dae5
3 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/web/src/components/editor/media-panel.tsx
View File

@ -1,14 +1,15 @@
"use client"; "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 { 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 { useEffect, useRef, useState } from "react";
import { toast } from "sonner"; 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. // 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. // 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) => { const handleRemove = (e: React.MouseEvent, id: string) => {
// Remove a media item from the store // Remove a media item from the store
e.stopPropagation(); 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); removeMediaItem(id);
}; };

32
apps/web/src/components/editor/timeline.tsx
View File

@ -781,15 +781,15 @@ export function Timeline() {
<div <div
key={i} key={i}
className={`absolute top-0 bottom-0 ${isMainMarker className={`absolute top-0 bottom-0 ${isMainMarker
? 'border-l border-muted-foreground/40' ? 'border-l border-muted-foreground/40'
: 'border-l border-muted-foreground/20' : 'border-l border-muted-foreground/20'
}`} }`}
style={{ left: `${time * 50 * zoomLevel}px` }} style={{ left: `${time * 50 * zoomLevel}px` }}
> >
<span <span
className={`absolute top-1 left-1 text-xs ${isMainMarker className={`absolute top-1 left-1 text-xs ${isMainMarker
? 'text-muted-foreground font-medium' ? 'text-muted-foreground font-medium'
: 'text-muted-foreground/70' : 'text-muted-foreground/70'
}`} }`}
> >
{(() => { {(() => {
@ -852,10 +852,10 @@ export function Timeline() {
<div className="flex items-center flex-1 min-w-0"> <div className="flex items-center flex-1 min-w-0">
<div <div
className={`w-3 h-3 rounded-full flex-shrink-0 ${track.type === 'video' className={`w-3 h-3 rounded-full flex-shrink-0 ${track.type === 'video'
? 'bg-blue-500' ? 'bg-blue-500'
: track.type === 'audio' : track.type === 'audio'
? 'bg-green-500' ? 'bg-green-500'
: 'bg-purple-500' : 'bg-purple-500'
}`} }`}
/> />
<span className="ml-2 text-sm font-medium truncate"> <span className="ml-2 text-sm font-medium truncate">
@ -1681,10 +1681,10 @@ function TimelineTrackContent({
return ( return (
<div <div
className={`w-full h-full transition-all duration-150 ease-out ${isDraggedOver className={`w-full h-full transition-all duration-150 ease-out ${isDraggedOver
? wouldOverlap ? wouldOverlap
? 'bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg' ? 'bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg'
: 'bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg' : 'bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg'
: 'hover:bg-muted/20' : 'hover:bg-muted/20'
}`} }`}
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
@ -1710,10 +1710,10 @@ function TimelineTrackContent({
{track.clips.length === 0 ? ( {track.clips.length === 0 ? (
<div <div
className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${isDropping className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${isDropping
? wouldOverlap ? wouldOverlap
? 'border-red-500 bg-red-500/10 text-red-600' ? 'border-red-500 bg-red-500/10 text-red-600'
: 'border-blue-500 bg-blue-500/10 text-blue-600' : 'border-blue-500 bg-blue-500/10 text-blue-600'
: 'border-muted/30' : 'border-muted/30'
}`} }`}
> >
{isDropping {isDropping