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

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

@ -84,11 +84,14 @@ export function MediaPanel() {
useEffect(() => {
const filtered = mediaItems.filter((item) => {
if (mediaFilter && mediaFilter !== 'all' && item.type !== mediaFilter) {
if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) {
return false;
}
if (searchQuery && !item.name.toLowerCase().includes(searchQuery.toLowerCase())) {
if (
searchQuery &&
!item.name.toLowerCase().includes(searchQuery.toLowerCase())
) {
return false;
}
@ -233,17 +236,22 @@ export function MediaPanel() {
size="sm"
onClick={handleFileSelect}
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 ? (
<>
<Upload className="h-4 w-4 mr-2 animate-spin" />
Processing...
<Upload className="h-4 w-4 animate-spin" />
<span className="hidden md:inline ml-2">Processing...</span>
</>
) : (
<>
<Plus className="h-4 w-4" />
<span
className="hidden min-w-[40px]:inline ml-2"
aria-label="Add file"
>
Add
</span>
</>
)}
</Button>
@ -276,7 +284,15 @@ export function MediaPanel() {
<AspectRatio ratio={item.aspectRatio}>
{renderPreview(item)}
</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>
{/* Show remove button on hover */}