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

UI fixes to the media-panel component

Browse Source
This commit is contained in:
Shubbu03
2025-06-25 12:13:16 +05:30
parent 3989da93c3
commit 7444ab2894
1 changed files with 44 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -84,17 +84,20 @@ export function MediaPanel() {
useEffect(() => { useEffect(() => {
const filtered = mediaItems.filter((item) => { const filtered = mediaItems.filter((item) => {
if (mediaFilter && mediaFilter !== 'all' && item.type !== mediaFilter) { if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) {
return false; return false;
} }
if (searchQuery && !item.name.toLowerCase().includes(searchQuery.toLowerCase())) { if (
searchQuery &&
!item.name.toLowerCase().includes(searchQuery.toLowerCase())
) {
return false; return false;
} }
return true; return true;
}); });
setFilteredMediaItems(filtered); setFilteredMediaItems(filtered);
}, [mediaItems, mediaFilter, searchQuery]); }, [mediaItems, mediaFilter, searchQuery]);
@ -209,23 +212,23 @@ export function MediaPanel() {
{/* Button to add/upload media */} {/* Button to add/upload media */}
<div className="flex gap-2"> <div className="flex gap-2">
{/* Search and filter controls */} {/* Search and filter controls */}
<select <select
value={mediaFilter} value={mediaFilter}
onChange={(e) => setMediaFilter(e.target.value)} onChange={(e) => setMediaFilter(e.target.value)}
className="px-2 py-1 text-xs border rounded bg-background" className="px-2 py-1 text-xs border rounded bg-background"
> >
<option value="all">All</option> <option value="all">All</option>
<option value="video">Video</option> <option value="video">Video</option>
<option value="audio">Audio</option> <option value="audio">Audio</option>
<option value="image">Image</option> <option value="image">Image</option>
</select> </select>
<input <input
type="text" type="text"
placeholder="Search media..." placeholder="Search media..."
className="min-w-[60px] flex-1 px-2 py-1 text-xs border rounded bg-background" className="min-w-[60px] flex-1 px-2 py-1 text-xs border rounded bg-background"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
/> />
{/* Add media button */} {/* Add media button */}
<Button <Button
@ -233,21 +236,26 @@ export function MediaPanel() {
size="sm" size="sm"
onClick={handleFileSelect} onClick={handleFileSelect}
disabled={isProcessing} disabled={isProcessing}
className="flex-none min-w-[80px] whitespace-nowrap" className="flex-none min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center"
> >
{isProcessing ? ( {isProcessing ? (
<> <>
<Upload className="h-4 w-4 mr-2 animate-spin" /> <Upload className="h-4 w-4 animate-spin" />
Processing... <span className="hidden md:inline ml-2">Processing...</span>
</> </>
) : ( ) : (
<> <>
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Add <span
className="hidden min-w-[40px]:inline ml-2"
aria-label="Add file"
>
Add
</span>
</> </>
)} )}
</Button> </Button>
</div> </div>
</div> </div>
<div className="flex-1 overflow-y-auto p-2"> <div className="flex-1 overflow-y-auto p-2">
@ -276,7 +284,15 @@ export function MediaPanel() {
<AspectRatio ratio={item.aspectRatio}> <AspectRatio ratio={item.aspectRatio}>
{renderPreview(item)} {renderPreview(item)}
</AspectRatio> </AspectRatio>
<span className="text-xs truncate px-1">{item.name}</span> <span
className="text-xs truncate px-1 max-w-full"
aria-label={item.name}
title={item.name}
>
{item.name.length > 8
? `${item.name.slice(0, 4)}...${item.name.slice(-3)}`
: item.name}
</span>
</Button> </Button>
{/* Show remove button on hover */} {/* Show remove button on hover */}