diff options
Diffstat (limited to 'apps/web/src/components/editor/media-panel')
| -rw-r--r-- | apps/web/src/components/editor/media-panel/index.tsx | 2 | ||||
| -rw-r--r-- | apps/web/src/components/editor/media-panel/tabbar.tsx | 4 | ||||
| -rw-r--r-- | apps/web/src/components/editor/media-panel/views/media.tsx | 25 |
3 files changed, 6 insertions, 25 deletions
diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx index 51e9a264..9f7322c7 100644 --- a/apps/web/src/components/editor/media-panel/index.tsx +++ b/apps/web/src/components/editor/media-panel/index.tsx @@ -47,7 +47,7 @@ export function MediaPanel() { };
return (
- <div className="h-full flex flex-col">
+ <div className="h-full flex flex-col bg-panel rounded-sm overflow-hidden">
<TabBar />
<div className="flex-1">{viewMap[activeTab]}</div>
</div>
diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx index 580394b9..f4e520b2 100644 --- a/apps/web/src/components/editor/media-panel/tabbar.tsx +++ b/apps/web/src/components/editor/media-panel/tabbar.tsx @@ -69,7 +69,7 @@ export function TabBar() { />
<div
ref={scrollContainerRef}
- className="h-12 bg-accent/50 px-3 flex justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative"
+ className="h-12 bg-panel-accent px-3 flex justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative"
>
{(Object.keys(tabs) as Tab[]).map((tabKey) => {
const tab = tabs[tabKey];
@@ -111,7 +111,7 @@ function ScrollButton({ const Icon = direction === "left" ? ChevronLeft : ChevronRight;
return (
- <div className="bg-accent/50 w-12 h-full flex items-center justify-center">
+ <div className="bg-panel-accent w-12 h-full flex items-center justify-center">
<Button
size="icon"
className="rounded-[0.4rem] w-4 h-7 !bg-foreground/10"
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 f7da684d..48e54961 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);
};
@@ -254,7 +235,7 @@ export function MediaView() { size="sm"
onClick={handleFileSelect}
disabled={isProcessing}
- className="flex-none min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center"
+ className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center"
>
{isProcessing ? (
<>
@@ -297,7 +278,7 @@ export function MediaView() { {/* Render each media item as a draggable button */}
{filteredMediaItems.map((item) => (
<ContextMenu key={item.id}>
- <ContextMenuTrigger asChild>
+ <ContextMenuTrigger>
<DraggableMediaItem
name={item.name}
preview={renderPreview(item)}
|