refactor: streamline media converter UI and layout
- consolidated file upload and metadata display in single card - replaced complex FormatSelector with simple shadcn Select component - inlined all conversion options without toggle display - restructured layout to 2-column grid matching pastel app pattern: - left column: upload and conversion options - right column: conversion results - removed unused components (FileInfo, FormatSelector, ConversionOptionsPanel) - cleaned up imports and simplified component hierarchy Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Upload, X } from 'lucide-react';
|
||||
import { Upload, X, File, FileVideo, FileAudio, FileImage, Clock, HardDrive, Film } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { formatFileSize } from '@/lib/media/utils/fileUtils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { ConversionFormat } from '@/types/media';
|
||||
|
||||
export interface FileUploadProps {
|
||||
onFileSelect: (files: File[]) => void;
|
||||
@@ -14,6 +14,7 @@ export interface FileUploadProps {
|
||||
maxSizeMB?: number;
|
||||
disabled?: boolean;
|
||||
inputRef?: React.RefObject<HTMLInputElement | null>;
|
||||
inputFormat?: ConversionFormat;
|
||||
}
|
||||
|
||||
export function FileUpload({
|
||||
@@ -24,9 +25,137 @@ export function FileUpload({
|
||||
maxSizeMB = 500,
|
||||
disabled = false,
|
||||
inputRef,
|
||||
inputFormat,
|
||||
}: FileUploadProps) {
|
||||
const [isDragging, setIsDragging] = React.useState(false);
|
||||
const fileInputRef = inputRef || React.useRef<HTMLInputElement>(null);
|
||||
const [fileMetadata, setFileMetadata] = React.useState<Record<number, any>>({});
|
||||
const localFileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
const fileInputRef = inputRef || localFileInputRef;
|
||||
|
||||
// Extract metadata for files
|
||||
React.useEffect(() => {
|
||||
const extractMetadata = async () => {
|
||||
if (selectedFiles.length === 0 || !inputFormat) {
|
||||
setFileMetadata({});
|
||||
return;
|
||||
}
|
||||
|
||||
const metadata: Record<number, any> = {};
|
||||
|
||||
for (let i = 0; i < selectedFiles.length; i++) {
|
||||
const file = selectedFiles[i];
|
||||
const baseMetadata = {
|
||||
name: file.name,
|
||||
size: file.size < 1024 * 1024 ? `${(file.size / 1024).toFixed(2)} KB` : `${(file.size / (1024 * 1024)).toFixed(2)} MB`,
|
||||
type: inputFormat.name,
|
||||
};
|
||||
|
||||
// Extract media-specific metadata
|
||||
if (inputFormat.category === 'video' && file.type.startsWith('video/')) {
|
||||
try {
|
||||
const video = document.createElement('video');
|
||||
video.preload = 'metadata';
|
||||
|
||||
const metadataPromise = new Promise<any>((resolve) => {
|
||||
video.onloadedmetadata = () => {
|
||||
const duration = video.duration;
|
||||
const minutes = Math.floor(duration / 60);
|
||||
const seconds = Math.floor(duration % 60);
|
||||
resolve({
|
||||
...baseMetadata,
|
||||
duration: `${minutes}:${seconds.toString().padStart(2, '0')}`,
|
||||
dimensions: `${video.videoWidth} × ${video.videoHeight}`,
|
||||
});
|
||||
URL.revokeObjectURL(video.src);
|
||||
};
|
||||
|
||||
video.onerror = () => {
|
||||
resolve(baseMetadata);
|
||||
URL.revokeObjectURL(video.src);
|
||||
};
|
||||
});
|
||||
|
||||
video.src = URL.createObjectURL(file);
|
||||
metadata[i] = await metadataPromise;
|
||||
} catch (error) {
|
||||
metadata[i] = baseMetadata;
|
||||
}
|
||||
} else if (inputFormat.category === 'audio' && file.type.startsWith('audio/')) {
|
||||
try {
|
||||
const audio = document.createElement('audio');
|
||||
audio.preload = 'metadata';
|
||||
|
||||
const metadataPromise = new Promise<any>((resolve) => {
|
||||
audio.onloadedmetadata = () => {
|
||||
const duration = audio.duration;
|
||||
const minutes = Math.floor(duration / 60);
|
||||
const seconds = Math.floor(duration % 60);
|
||||
resolve({
|
||||
...baseMetadata,
|
||||
duration: `${minutes}:${seconds.toString().padStart(2, '0')}`,
|
||||
});
|
||||
URL.revokeObjectURL(audio.src);
|
||||
};
|
||||
|
||||
audio.onerror = () => {
|
||||
resolve(baseMetadata);
|
||||
URL.revokeObjectURL(audio.src);
|
||||
};
|
||||
});
|
||||
|
||||
audio.src = URL.createObjectURL(file);
|
||||
metadata[i] = await metadataPromise;
|
||||
} catch (error) {
|
||||
metadata[i] = baseMetadata;
|
||||
}
|
||||
} else if (inputFormat.category === 'image' && file.type.startsWith('image/')) {
|
||||
try {
|
||||
const img = new Image();
|
||||
|
||||
const metadataPromise = new Promise<any>((resolve) => {
|
||||
img.onload = () => {
|
||||
resolve({
|
||||
...baseMetadata,
|
||||
dimensions: `${img.width} × ${img.height}`,
|
||||
});
|
||||
URL.revokeObjectURL(img.src);
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
resolve(baseMetadata);
|
||||
URL.revokeObjectURL(img.src);
|
||||
};
|
||||
});
|
||||
|
||||
img.src = URL.createObjectURL(file);
|
||||
metadata[i] = await metadataPromise;
|
||||
} catch (error) {
|
||||
metadata[i] = baseMetadata;
|
||||
}
|
||||
} else {
|
||||
metadata[i] = baseMetadata;
|
||||
}
|
||||
}
|
||||
|
||||
setFileMetadata(metadata);
|
||||
};
|
||||
|
||||
extractMetadata();
|
||||
}, [selectedFiles, inputFormat]);
|
||||
|
||||
const getCategoryIcon = () => {
|
||||
if (!inputFormat) return <File className="h-5 w-5 text-primary" />;
|
||||
switch (inputFormat.category) {
|
||||
case 'video':
|
||||
return <FileVideo className="h-5 w-5 text-primary" />;
|
||||
case 'audio':
|
||||
return <FileAudio className="h-5 w-5 text-primary" />;
|
||||
case 'image':
|
||||
return <FileImage className="h-5 w-5 text-primary" />;
|
||||
default:
|
||||
return <File className="h-5 w-5 text-primary" />;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragEnter = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
@@ -113,28 +242,68 @@ export function FileUpload({
|
||||
|
||||
{selectedFiles.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{selectedFiles.map((file, index) => (
|
||||
<div key={`${file.name}-${index}`} className="border-2 border-border rounded-lg p-4 bg-card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">{file.name}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{formatFileSize(file.size)}
|
||||
</p>
|
||||
{selectedFiles.map((file, index) => {
|
||||
const metadata = fileMetadata[index];
|
||||
return (
|
||||
<div key={`${file.name}-${index}`} className="border border-border rounded-lg p-4 bg-card">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5">{getCategoryIcon()}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm font-medium text-foreground truncate" title={file.name}>
|
||||
{file.name}
|
||||
</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleRemove(index)}
|
||||
disabled={disabled}
|
||||
className="ml-2 flex-shrink-0"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Remove file</span>
|
||||
</Button>
|
||||
</div>
|
||||
{metadata && (
|
||||
<div className="mt-2 grid grid-cols-2 gap-2 text-xs">
|
||||
{/* File Size */}
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<HardDrive className="h-3.5 w-3.5" />
|
||||
<span>{metadata.size}</span>
|
||||
</div>
|
||||
|
||||
{/* Type */}
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<File className="h-3.5 w-3.5" />
|
||||
<span>{metadata.type}</span>
|
||||
</div>
|
||||
|
||||
{/* Duration (for video/audio) */}
|
||||
{metadata.duration && (
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Clock className="h-3.5 w-3.5" />
|
||||
<span>{metadata.duration}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dimensions */}
|
||||
{metadata.dimensions && (
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
{inputFormat?.category === 'video' ? (
|
||||
<Film className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<FileImage className="h-3.5 w-3.5" />
|
||||
)}
|
||||
<span>{metadata.dimensions}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleRemove(index)}
|
||||
disabled={disabled}
|
||||
className="ml-4"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Remove file</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Add more files button */}
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user