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

feat: implement media panel with tab navigation

Browse Source
This commit is contained in:
Maze Winther
2025-07-03 20:43:23 +02:00
parent ef0828a13d
commit 59a6c539a1
4 changed files with 500 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
apps/web/src/components/editor/media-panel/index.tsx Normal file
View File

@ -0,0 +1,56 @@
"use client";
import { TabBar } from "./tabbar";
import { MediaView } from "./views/media";
import { useMediaPanelStore, Tab } from "./store";
export function MediaPanel() {
const { activeTab } = useMediaPanelStore();
const viewMap: Record<Tab, React.ReactNode> = {
media: <MediaView />,
audio: (
<div className="p-4 text-muted-foreground">Audio view coming soon...</div>
),
text: (
<div className="p-4 text-muted-foreground">Text view coming soon...</div>
),
stickers: (
<div className="p-4 text-muted-foreground">
Stickers view coming soon...
</div>
),
effects: (
<div className="p-4 text-muted-foreground">
Effects view coming soon...
</div>
),
transitions: (
<div className="p-4 text-muted-foreground">
Transitions view coming soon...
</div>
),
captions: (
<div className="p-4 text-muted-foreground">
Captions view coming soon...
</div>
),
filters: (
<div className="p-4 text-muted-foreground">
Filters view coming soon...
</div>
),
adjustment: (
<div className="p-4 text-muted-foreground">
Adjustment view coming soon...
</div>
),
};
return (
<div className="h-full flex flex-col">
<TabBar />
<div className="flex-1">{viewMap[activeTab]}</div>
</div>
);
}

73
apps/web/src/components/editor/media-panel/store.ts Normal file
View File

@ -0,0 +1,73 @@
import {
CaptionsIcon,
ArrowLeftRightIcon,
SparklesIcon,
StickerIcon,
TextIcon,
MusicIcon,
VideoIcon,
BlendIcon,
SlidersHorizontalIcon,
LucideIcon,
} from "lucide-react";
import { create } from "zustand";
export type Tab =
| "media"
| "audio"
| "text"
| "stickers"
| "effects"
| "transitions"
| "captions"
| "filters"
| "adjustment";
export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
media: {
icon: VideoIcon,
label: "Media",
},
audio: {
icon: MusicIcon,
label: "Audio",
},
text: {
icon: TextIcon,
label: "Text",
},
stickers: {
icon: StickerIcon,
label: "Stickers",
},
effects: {
icon: SparklesIcon,
label: "Effects",
},
transitions: {
icon: ArrowLeftRightIcon,
label: "Transitions",
},
captions: {
icon: CaptionsIcon,
label: "Captions",
},
filters: {
icon: BlendIcon,
label: "Filters",
},
adjustment: {
icon: SlidersHorizontalIcon,
label: "Adjustment",
},
};
interface MediaPanelStore {
activeTab: Tab;
setActiveTab: (tab: Tab) => void;
}
export const useMediaPanelStore = create<MediaPanelStore>((set) => ({
activeTab: "media",
setActiveTab: (tab) => set({ activeTab: tab }),
}));

29
apps/web/src/components/editor/media-panel/tabbar.tsx Normal file
View File

@ -0,0 +1,29 @@
"use client";
import { cn } from "@/lib/utils";
import { Tab, tabs, useMediaPanelStore } from "./store";
export function TabBar() {
const { activeTab, setActiveTab } = useMediaPanelStore();
return (
<div className="h-12 bg-accent/50 px-3 flex justify-start items-center gap-6">
{(Object.keys(tabs) as Tab[]).map((tabKey) => {
const tab = tabs[tabKey];
return (
<div
className={cn(
"flex flex-col gap-0.5 items-center cursor-pointer",
activeTab === tabKey ? "text-primary" : "text-muted-foreground"
)}
onClick={() => setActiveTab(tabKey)}
key={tabKey}
>
<tab.icon className="!size-5" />
<span className="text-[0.65rem]">{tab.label}</span>
</div>
);
})}
</div>
);
}

731
apps/web/src/components/editor/media-panel.tsx → apps/web/src/components/editor/media-panel/views/media.tsx
View File

@ -1,389 +1,342 @@
"use client"; "use client";
import { useDragDrop } from "@/hooks/use-drag-drop"; import { useDragDrop } from "@/hooks/use-drag-drop";
import { processMediaFiles } from "@/lib/media-processing"; import { processMediaFiles } from "@/lib/media-processing";
import { useMediaStore, type MediaItem } from "@/stores/media-store"; import { useMediaStore, type MediaItem } from "@/stores/media-store";
import { useTimelineStore } from "@/stores/timeline-store"; import { useTimelineStore } from "@/stores/timeline-store";
import { Image, Music, MusicIcon, Plus, TextIcon, Upload, Video, VideoIcon } from "lucide-react"; import { Image, Music, Plus, 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 { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "../ui/button"; import { Button } from "@/components/ui/button";
import { DragOverlay } from "../ui/drag-overlay"; import { DragOverlay } from "@/components/ui/drag-overlay";
import { import {
ContextMenu, ContextMenu,
ContextMenuContent, ContextMenuContent,
ContextMenuItem, ContextMenuItem,
ContextMenuTrigger, ContextMenuTrigger,
} from "../ui/context-menu"; } from "@/components/ui/context-menu";
import { Input } from "../ui/input"; import { Input } from "@/components/ui/input";
import { import {
Select, Select,
SelectContent, SelectContent,
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "../ui/select"; } from "@/components/ui/select";
import { cn } from "@/lib/utils";
export function MediaView() {
// MediaPanel lets users add, view, and drag media (images, videos, audio) into the project. const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();
// You can upload files or drag them from your computer. Dragging from here to the timeline adds them to your video project. const fileInputRef = useRef<HTMLInputElement>(null);
const [isProcessing, setIsProcessing] = useState(false);
export function MediaPanel() { const [progress, setProgress] = useState(0);
const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore(); const [searchQuery, setSearchQuery] = useState("");
const fileInputRef = useRef<HTMLInputElement>(null); const [mediaFilter, setMediaFilter] = useState("all");
const [isProcessing, setIsProcessing] = useState(false);
const [progress, setProgress] = useState(0); const processFiles = async (files: FileList | File[]) => {
const [searchQuery, setSearchQuery] = useState(""); if (!files || files.length === 0) return;
const [mediaFilter, setMediaFilter] = useState("all"); setIsProcessing(true);
setProgress(0);
const processFiles = async (files: FileList | File[]) => { try {
if (!files || files.length === 0) return; // Process files (extract metadata, generate thumbnails, etc.)
setIsProcessing(true); const processedItems = await processMediaFiles(files, (p) =>
setProgress(0); setProgress(p)
try { );
// Process files (extract metadata, generate thumbnails, etc.) // Add each processed media item to the store
const processedItems = await processMediaFiles(files, (p) => for (const item of processedItems) {
setProgress(p) await addMediaItem(item);
); }
// Add each processed media item to the store } catch (error) {
for (const item of processedItems) { // Show error toast if processing fails
await addMediaItem(item); console.error("Error processing files:", error);
} toast.error("Failed to process files");
} catch (error) { } finally {
// Show error toast if processing fails setIsProcessing(false);
console.error("Error processing files:", error); setProgress(0);
toast.error("Failed to process files"); }
} finally { };
setIsProcessing(false);
setProgress(0); const { isDragOver, dragProps } = useDragDrop({
} // When files are dropped, process them
}; onDrop: processFiles,
});
const { isDragOver, dragProps } = useDragDrop({
// When files are dropped, process them const handleFileSelect = () => fileInputRef.current?.click(); // Open file picker
onDrop: processFiles,
}); const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// When files are selected via file picker, process them
const handleFileSelect = () => fileInputRef.current?.click(); // Open file picker if (e.target.files) processFiles(e.target.files);
e.target.value = ""; // Reset input
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { };
// When files are selected via file picker, process them
if (e.target.files) processFiles(e.target.files); const handleRemove = async (e: React.MouseEvent, id: string) => {
e.target.value = ""; // Reset input // Remove a media item from the store
}; e.stopPropagation();
const handleRemove = async (e: React.MouseEvent, id: string) => { // Remove tracks automatically when delete media
// Remove a media item from the store const { tracks, removeTrack } = useTimelineStore.getState();
e.stopPropagation(); tracks.forEach((track) => {
const clipsToRemove = track.clips.filter((clip) => clip.mediaId === id);
// Remove tracks automatically when delete media clipsToRemove.forEach((clip) => {
const { tracks, removeTrack } = useTimelineStore.getState(); useTimelineStore.getState().removeClipFromTrack(track.id, clip.id);
tracks.forEach((track) => { });
const clipsToRemove = track.clips.filter((clip) => clip.mediaId === id); // Only remove track if it becomes empty and has no other clips
clipsToRemove.forEach((clip) => { const updatedTrack = useTimelineStore
useTimelineStore.getState().removeClipFromTrack(track.id, clip.id); .getState()
}); .tracks.find((t) => t.id === track.id);
// Only remove track if it becomes empty and has no other clips if (updatedTrack && updatedTrack.clips.length === 0) {
const updatedTrack = useTimelineStore removeTrack(track.id);
.getState() }
.tracks.find((t) => t.id === track.id); });
if (updatedTrack && updatedTrack.clips.length === 0) { await removeMediaItem(id);
removeTrack(track.id); };
}
}); const formatDuration = (duration: number) => {
await removeMediaItem(id); // Format seconds as mm:ss
}; const min = Math.floor(duration / 60);
const sec = Math.floor(duration % 60);
const formatDuration = (duration: number) => { return `${min}:${sec.toString().padStart(2, "0")}`;
// Format seconds as mm:ss };
const min = Math.floor(duration / 60);
const sec = Math.floor(duration % 60); const startDrag = (e: React.DragEvent, item: MediaItem) => {
return `${min}:${sec.toString().padStart(2, "0")}`; // When dragging a media item, set drag data for timeline to read
}; e.dataTransfer.setData(
"application/x-media-item",
const startDrag = (e: React.DragEvent, item: MediaItem) => { JSON.stringify({
// When dragging a media item, set drag data for timeline to read id: item.id,
e.dataTransfer.setData( type: item.type,
"application/x-media-item", name: item.name,
JSON.stringify({ })
id: item.id, );
type: item.type, e.dataTransfer.effectAllowed = "copy";
name: item.name, };
})
); const [filteredMediaItems, setFilteredMediaItems] = useState(mediaItems);
e.dataTransfer.effectAllowed = "copy";
}; useEffect(() => {
const filtered = mediaItems.filter((item) => {
const [filteredMediaItems, setFilteredMediaItems] = useState(mediaItems); if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) {
return false;
useEffect(() => { }
const filtered = mediaItems.filter((item) => {
if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) { if (
return false; searchQuery &&
} !item.name.toLowerCase().includes(searchQuery.toLowerCase())
) {
if ( return false;
searchQuery && }
!item.name.toLowerCase().includes(searchQuery.toLowerCase())
) { return true;
return false; });
}
setFilteredMediaItems(filtered);
return true; }, [mediaItems, mediaFilter, searchQuery]);
});
const renderPreview = (item: MediaItem) => {
setFilteredMediaItems(filtered); // Render a preview for each media type (image, video, audio, unknown)
}, [mediaItems, mediaFilter, searchQuery]); if (item.type === "image") {
return (
const renderPreview = (item: MediaItem) => { <div className="w-full h-full flex items-center justify-center">
// Render a preview for each media type (image, video, audio, unknown) <img
if (item.type === "image") { src={item.url}
return ( alt={item.name}
<div className="w-full h-full flex items-center justify-center"> className="max-w-full max-h-full object-contain rounded"
<img loading="lazy"
src={item.url} />
alt={item.name} </div>
className="max-w-full max-h-full object-contain rounded" );
loading="lazy" }
/>
</div> if (item.type === "video") {
); if (item.thumbnailUrl) {
} return (
<div className="relative w-full h-full">
if (item.type === "video") { <img
if (item.thumbnailUrl) { src={item.thumbnailUrl}
return ( alt={item.name}
<div className="relative w-full h-full"> className="w-full h-full object-cover rounded"
<img loading="lazy"
src={item.thumbnailUrl} />
alt={item.name} <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded">
className="w-full h-full object-cover rounded" <Video className="h-6 w-6 text-white drop-shadow-md" />
loading="lazy" </div>
/> {item.duration && (
<div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded"> <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded">
<Video className="h-6 w-6 text-white drop-shadow-md" /> {formatDuration(item.duration)}
</div> </div>
{item.duration && ( )}
<div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded"> </div>
{formatDuration(item.duration)} );
</div> }
)} return (
</div> <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">
); <Video className="h-6 w-6 mb-1" />
} <span className="text-xs">Video</span>
return ( {item.duration && (
<div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded"> <span className="text-xs opacity-70">
<Video className="h-6 w-6 mb-1" /> {formatDuration(item.duration)}
<span className="text-xs">Video</span> </span>
{item.duration && ( )}
<span className="text-xs opacity-70"> </div>
{formatDuration(item.duration)} );
</span> }
)}
</div> if (item.type === "audio") {
); return (
} <div className="w-full h-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20">
<Music className="h-6 w-6 mb-1" />
if (item.type === "audio") { <span className="text-xs">Audio</span>
return ( {item.duration && (
<div className="w-full h-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20"> <span className="text-xs opacity-70">
<Music className="h-6 w-6 mb-1" /> {formatDuration(item.duration)}
<span className="text-xs">Audio</span> </span>
{item.duration && ( )}
<span className="text-xs opacity-70"> </div>
{formatDuration(item.duration)} );
</span> }
)}
</div> return (
); <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">
} <Image className="h-6 w-6" />
<span className="text-xs mt-1">Unknown</span>
return ( </div>
<div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded"> );
<Image className="h-6 w-6" /> };
<span className="text-xs mt-1">Unknown</span>
</div> return (
); <>
}; {/* Hidden file input for uploading media */}
<input
return ( ref={fileInputRef}
<> type="file"
{/* Hidden file input for uploading media */} accept="image/*,video/*,audio/*"
<input multiple
ref={fileInputRef} className="hidden"
type="file" onChange={handleFileChange}
accept="image/*,video/*,audio/*" />
multiple
className="hidden" <div
onChange={handleFileChange} className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`}
/> {...dragProps}
>
<div {/* Show overlay when dragging files over the panel */}
className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`} <DragOverlay isVisible={isDragOver} />
{...dragProps}
> <div className="p-3 pb-2">
{/* Show overlay when dragging files over the panel */} {/* Button to add/upload media */}
<DragOverlay isVisible={isDragOver} /> <div className="flex gap-2">
{/* Search and filter controls */}
<TabBar /> <Select value={mediaFilter} onValueChange={setMediaFilter}>
<SelectTrigger className="w-[80px] h-full text-xs">
<div className="p-3 pb-2"> <SelectValue />
{/* Button to add/upload media */} </SelectTrigger>
<div className="flex gap-2"> <SelectContent className="">
{/* Search and filter controls */} <SelectItem value="all">All</SelectItem>
<Select value={mediaFilter} onValueChange={setMediaFilter}> <SelectItem value="video">Video</SelectItem>
<SelectTrigger className="w-[80px] h-7 text-xs"> <SelectItem value="audio">Audio</SelectItem>
<SelectValue /> <SelectItem value="image">Image</SelectItem>
</SelectTrigger> </SelectContent>
<SelectContent> </Select>
<SelectItem value="all">All</SelectItem> <Input
<SelectItem value="video">Video</SelectItem> type="text"
<SelectItem value="audio">Audio</SelectItem> placeholder="Search media..."
<SelectItem value="image">Image</SelectItem> className="min-w-[60px] flex-1 h-full text-xs"
</SelectContent> value={searchQuery}
</Select> onChange={(e) => setSearchQuery(e.target.value)}
<Input />
type="text"
placeholder="Search media..." {/* Add media button */}
className="min-w-[60px] flex-1 h-7 text-xs" <Button
value={searchQuery} variant="outline"
onChange={(e) => setSearchQuery(e.target.value)} size="sm"
/> onClick={handleFileSelect}
disabled={isProcessing}
{/* Add media button */} className="flex-none min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center"
<Button >
variant="outline" {isProcessing ? (
size="sm" <>
onClick={handleFileSelect} <Upload className="h-4 w-4 animate-spin" />
disabled={isProcessing} <span className="hidden md:inline ml-2">{progress}%</span>
className="flex-none min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center" </>
> ) : (
{isProcessing ? ( <>
<> <Plus className="h-4 w-4" />
<Upload className="h-4 w-4 animate-spin" /> <span className="hidden sm:inline ml-2" aria-label="Add file">
<span className="hidden md:inline ml-2">{progress}%</span> Add
</> </span>
) : ( </>
<> )}
<Plus className="h-4 w-4" /> </Button>
<span className="hidden sm:inline ml-2" aria-label="Add file"> </div>
Add </div>
</span>
</> <div className="flex-1 overflow-y-auto p-3 pt-0">
)} {/* Show message if no media, otherwise show media grid */}
</Button> {filteredMediaItems.length === 0 ? (
</div> <div className="flex flex-col items-center justify-center py-8 text-center h-full">
</div> <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
<Image className="h-8 w-8 text-muted-foreground" />
<div className="flex-1 overflow-y-auto p-3 pt-0"> </div>
{/* Show message if no media, otherwise show media grid */} <p className="text-sm text-muted-foreground">
{filteredMediaItems.length === 0 ? ( No media in project
<div className="flex flex-col items-center justify-center py-8 text-center h-full"> </p>
<div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4"> <p className="text-xs text-muted-foreground/70 mt-1">
<Image className="h-8 w-8 text-muted-foreground" /> Drag files here or use the button above
</div> </p>
<p className="text-sm text-muted-foreground"> </div>
No media in project ) : (
</p> <div
<p className="text-xs text-muted-foreground/70 mt-1"> className="grid gap-2"
Drag files here or use the button above style={{
</p> gridTemplateColumns: "repeat(auto-fill, 160px)",
</div> }}
) : ( >
<div {/* Render each media item as a draggable button */}
className="grid gap-2" {filteredMediaItems.map((item) => (
style={{ <div key={item.id} className="relative group">
gridTemplateColumns: "repeat(auto-fill, 160px)", <ContextMenu>
}} <ContextMenuTrigger asChild>
> <Button
{/* Render each media item as a draggable button */} variant="outline"
{filteredMediaItems.map((item) => ( className="flex flex-col gap-1 p-2 h-auto w-full relative border-none !bg-transparent cursor-default"
<div key={item.id} className="relative group"> >
<ContextMenu> <AspectRatio
<ContextMenuTrigger asChild> ratio={16 / 9}
<Button className="bg-accent"
variant="outline" draggable={true}
className="flex flex-col gap-1 p-2 h-auto w-full relative border-none !bg-transparent cursor-default" onDragStart={(e: React.DragEvent) =>
> startDrag(e, item)
<AspectRatio }
ratio={16 / 9} >
className="bg-accent" {renderPreview(item)}
draggable={true} </AspectRatio>
onDragStart={(e: React.DragEvent) => <span
startDrag(e, item) className="text-[0.7rem] text-muted-foreground truncate w-full text-left"
} aria-label={item.name}
> title={item.name}
{renderPreview(item)} >
</AspectRatio> {item.name.length > 8
<span ? `${item.name.slice(0, 4)}...${item.name.slice(-3)}`
className="text-[0.7rem] text-muted-foreground truncate w-full text-left" : item.name}
aria-label={item.name} </span>
title={item.name} </Button>
> </ContextMenuTrigger>
{item.name.length > 8 <ContextMenuContent>
? `${item.name.slice(0, 4)}...${item.name.slice(-3)}` <ContextMenuItem>Export clips</ContextMenuItem>
: item.name} <ContextMenuItem
</span> variant="destructive"
</Button> onClick={(e) => handleRemove(e, item.id)}
</ContextMenuTrigger> >
<ContextMenuContent> Delete
<ContextMenuItem>Export clips</ContextMenuItem> </ContextMenuItem>
<ContextMenuItem </ContextMenuContent>
variant="destructive" </ContextMenu>
onClick={(e) => handleRemove(e, item.id)} </div>
> ))}
Delete </div>
</ContextMenuItem> )}
</ContextMenuContent> </div>
</ContextMenu> </div>
</div> </>
))} );
</div> }
)}
</div>
</div>
</>
);
}
type Tab = "media" | "audio" | "text";
function TabBar() {
const [activeTab, setActiveTab] = useState<Tab>("media");
const tabs = [
{
icon: VideoIcon,
label: "Media",
},
{
icon: MusicIcon,
label: "Audio",
},
{
icon: TextIcon,
label: "Text",
},
];
return (
<div className="bg-accent/50 h-12 px-4 flex justify-start items-center gap-6">
{tabs.map((tab) => (
<div
className={cn(
"flex flex-col gap-0.5 items-center cursor-pointer",
activeTab === tab.label.toLowerCase()
? "text-primary"
: "text-muted-foreground"
)}
onClick={() => setActiveTab(tab.label.toLowerCase() as Tab)}
key={tab.label}
>
<tab.icon className="!size-5" />
<span className="text-xs">{tab.label}</span>
</div>
))}
</div>
);
}