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:
4
.gitignore
vendored
4
.gitignore
vendored
@@ -37,3 +37,7 @@ yarn-error.log*
|
|||||||
# typescript
|
# typescript
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
next-env.d.ts
|
next-env.d.ts
|
||||||
|
|
||||||
|
# agents
|
||||||
|
.github
|
||||||
|
.claude
|
||||||
@@ -274,7 +274,7 @@ export function ConversionPreview({ job, onDownload, onRetry }: ConversionPrevie
|
|||||||
|
|
||||||
{/* Download button */}
|
{/* Download button */}
|
||||||
{job.status === 'completed' && job.result && (
|
{job.status === 'completed' && job.result && (
|
||||||
<Button onClick={handleDownload} className="w-full gap-2">
|
<Button onClick={handleDownload} className="w-full" variant="default" size="lg">
|
||||||
<Download className="h-4 w-4" />
|
<Download className="h-4 w-4" />
|
||||||
Download{' '}
|
Download{' '}
|
||||||
{generateOutputFilename(job.inputFile.name, job.outputFormat.extension)}
|
{generateOutputFilename(job.inputFile.name, job.outputFormat.extension)}
|
||||||
|
|||||||
@@ -1,17 +1,20 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { ArrowRight, ArrowDown } from 'lucide-react';
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Slider } from '@/components/ui/slider';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
import { FileUpload } from './FileUpload';
|
import { FileUpload } from './FileUpload';
|
||||||
import { FormatSelector } from './FormatSelector';
|
|
||||||
import { ConversionPreview } from './ConversionPreview';
|
import { ConversionPreview } from './ConversionPreview';
|
||||||
import { ConversionOptionsPanel } from './ConversionOptions';
|
|
||||||
import { FileInfo } from './FileInfo';
|
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import {
|
import {
|
||||||
SUPPORTED_FORMATS,
|
|
||||||
getFormatByExtension,
|
getFormatByExtension,
|
||||||
getFormatByMimeType,
|
getFormatByMimeType,
|
||||||
getCompatibleFormats,
|
getCompatibleFormats,
|
||||||
@@ -362,10 +365,12 @@ export function FileConverter() {
|
|||||||
const completedCount = conversionJobs.filter(job => job.status === 'completed').length;
|
const completedCount = conversionJobs.filter(job => job.status === 'completed').length;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full space-y-8">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 w-full">
|
||||||
{/* Header */}
|
{/* Left Column: Upload and Conversion Options */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Upload Card */}
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="space-y-6">
|
<CardContent className="pt-6">
|
||||||
{/* File upload */}
|
{/* File upload */}
|
||||||
<FileUpload
|
<FileUpload
|
||||||
onFileSelect={handleFileSelect}
|
onFileSelect={handleFileSelect}
|
||||||
@@ -373,80 +378,301 @@ export function FileConverter() {
|
|||||||
selectedFiles={selectedFiles}
|
selectedFiles={selectedFiles}
|
||||||
disabled={isConverting}
|
disabled={isConverting}
|
||||||
inputRef={fileInputRef}
|
inputRef={fileInputRef}
|
||||||
/>
|
|
||||||
|
|
||||||
{/* File Info - show first file */}
|
|
||||||
{selectedFiles.length > 0 && inputFormat && (
|
|
||||||
<FileInfo file={selectedFiles[0]} format={inputFormat} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Format selection */}
|
|
||||||
{inputFormat && compatibleFormats.length > 0 && (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-4 items-start">
|
|
||||||
{/* Input format */}
|
|
||||||
<div>
|
|
||||||
<label className="text-sm font-medium text-foreground mb-2 block">Input Format</label>
|
|
||||||
<Card className="p-4">
|
|
||||||
<p className="font-medium">{inputFormat.name}</p>
|
|
||||||
<p className="text-xs text-muted-foreground mt-1">{inputFormat.description}</p>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Arrow - horizontal on desktop, vertical on mobile */}
|
|
||||||
<div className="flex md:hidden items-center justify-center py-2">
|
|
||||||
<ArrowDown className="h-5 w-5 text-muted-foreground" />
|
|
||||||
</div>
|
|
||||||
<div className="hidden md:flex items-center justify-center pt-8">
|
|
||||||
<ArrowRight className="h-5 w-5 text-muted-foreground" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Output format */}
|
|
||||||
<FormatSelector
|
|
||||||
formats={compatibleFormats}
|
|
||||||
selectedFormat={outputFormat}
|
|
||||||
onFormatSelect={setOutputFormat}
|
|
||||||
label="Output Format"
|
|
||||||
disabled={isConverting}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Conversion Options */}
|
|
||||||
{inputFormat && outputFormat && (
|
|
||||||
<ConversionOptionsPanel
|
|
||||||
inputFormat={inputFormat}
|
inputFormat={inputFormat}
|
||||||
outputFormat={outputFormat}
|
/>
|
||||||
options={conversionOptions}
|
</CardContent>
|
||||||
onOptionsChange={setConversionOptions}
|
</Card>
|
||||||
|
|
||||||
|
{/* Conversion Options Card */}
|
||||||
|
{inputFormat && compatibleFormats.length > 0 && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Conversion Options</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{/* Output Format Select */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-foreground">Output Format</label>
|
||||||
|
<Select
|
||||||
|
value={outputFormat?.id || ''}
|
||||||
|
onValueChange={(formatId) => {
|
||||||
|
const format = compatibleFormats.find(f => f.id === formatId);
|
||||||
|
if (format) setOutputFormat(format);
|
||||||
|
}}
|
||||||
|
disabled={isConverting}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder="Select output format" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{compatibleFormats.map((format) => (
|
||||||
|
<SelectItem key={format.id} value={format.id}>
|
||||||
|
{format.name} (.{format.extension})
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Advanced Options - Inline */}
|
||||||
|
{outputFormat && (
|
||||||
|
<>
|
||||||
|
{outputFormat.category === 'video' && (
|
||||||
|
<div className="space-y-4 pt-4 border-t border-border">
|
||||||
|
{/* Video Codec */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-foreground block">Video Codec</label>
|
||||||
|
<Select
|
||||||
|
value={conversionOptions.videoCodec || 'default'}
|
||||||
|
onValueChange={(value) => setConversionOptions({ ...conversionOptions, videoCodec: value === 'default' ? undefined : value })}
|
||||||
|
disabled={isConverting}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder="Select video codec" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="default">Auto (Recommended)</SelectItem>
|
||||||
|
<SelectItem value="libx264">H.264 (MP4, AVI, MOV)</SelectItem>
|
||||||
|
<SelectItem value="libx265">H.265 (MP4)</SelectItem>
|
||||||
|
<SelectItem value="libvpx">VP8 (WebM)</SelectItem>
|
||||||
|
<SelectItem value="libvpx-vp9">VP9 (WebM)</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Video Bitrate */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<label className="text-sm font-medium text-foreground">Video Bitrate</label>
|
||||||
|
<span className="text-xs text-muted-foreground">{conversionOptions.videoBitrate || '2M'}</span>
|
||||||
|
</div>
|
||||||
|
<Slider
|
||||||
|
min={0.5}
|
||||||
|
max={10}
|
||||||
|
step={0.5}
|
||||||
|
value={[parseFloat(conversionOptions.videoBitrate?.replace('M', '') || '2')]}
|
||||||
|
onValueChange={(vals) => setConversionOptions({ ...conversionOptions, videoBitrate: `${vals[0]}M` })}
|
||||||
disabled={isConverting}
|
disabled={isConverting}
|
||||||
/>
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground">Higher bitrate = better quality, larger file</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Resolution */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-foreground block">Resolution</label>
|
||||||
|
<Select
|
||||||
|
value={conversionOptions.videoResolution || 'original'}
|
||||||
|
onValueChange={(value) => setConversionOptions({ ...conversionOptions, videoResolution: value === 'original' ? undefined : value })}
|
||||||
|
disabled={isConverting}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder="Select resolution" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="original">Original</SelectItem>
|
||||||
|
<SelectItem value="1920x-1">1080p (1920x1080)</SelectItem>
|
||||||
|
<SelectItem value="1280x-1">720p (1280x720)</SelectItem>
|
||||||
|
<SelectItem value="854x-1">480p (854x480)</SelectItem>
|
||||||
|
<SelectItem value="640x-1">360p (640x360)</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FPS */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-foreground block">Frame Rate (FPS)</label>
|
||||||
|
<Select
|
||||||
|
value={conversionOptions.videoFps?.toString() || 'original'}
|
||||||
|
onValueChange={(value) => setConversionOptions({ ...conversionOptions, videoFps: value === 'original' ? undefined : parseInt(value) })}
|
||||||
|
disabled={isConverting}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder="Select frame rate" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="original">Original</SelectItem>
|
||||||
|
<SelectItem value="60">60 fps</SelectItem>
|
||||||
|
<SelectItem value="30">30 fps</SelectItem>
|
||||||
|
<SelectItem value="24">24 fps</SelectItem>
|
||||||
|
<SelectItem value="15">15 fps</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Audio Bitrate */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<label className="text-sm font-medium text-foreground">Audio Bitrate</label>
|
||||||
|
<span className="text-xs text-muted-foreground">{conversionOptions.audioBitrate || '128k'}</span>
|
||||||
|
</div>
|
||||||
|
<Slider
|
||||||
|
min={64}
|
||||||
|
max={320}
|
||||||
|
step={32}
|
||||||
|
value={[parseInt(conversionOptions.audioBitrate?.replace('k', '') || '128')]}
|
||||||
|
onValueChange={(vals) => setConversionOptions({ ...conversionOptions, audioBitrate: `${vals[0]}k` })}
|
||||||
|
disabled={isConverting}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{outputFormat.category === 'audio' && (
|
||||||
|
<div className="space-y-4 pt-4 border-t border-border">
|
||||||
|
{/* Audio Codec */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-foreground block">Audio Codec</label>
|
||||||
|
<Select
|
||||||
|
value={conversionOptions.audioCodec || 'default'}
|
||||||
|
onValueChange={(value) => setConversionOptions({ ...conversionOptions, audioCodec: value === 'default' ? undefined : value })}
|
||||||
|
disabled={isConverting}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder="Select audio codec" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="default">Auto (Recommended)</SelectItem>
|
||||||
|
<SelectItem value="libmp3lame">MP3 (LAME)</SelectItem>
|
||||||
|
<SelectItem value="aac">AAC</SelectItem>
|
||||||
|
<SelectItem value="libvorbis">Vorbis (OGG)</SelectItem>
|
||||||
|
<SelectItem value="libopus">Opus</SelectItem>
|
||||||
|
<SelectItem value="flac">FLAC (Lossless)</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bitrate */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<label className="text-sm font-medium text-foreground">Bitrate</label>
|
||||||
|
<span className="text-xs text-muted-foreground">{conversionOptions.audioBitrate || '192k'}</span>
|
||||||
|
</div>
|
||||||
|
<Slider
|
||||||
|
min={64}
|
||||||
|
max={320}
|
||||||
|
step={32}
|
||||||
|
value={[parseInt(conversionOptions.audioBitrate?.replace('k', '') || '192')]}
|
||||||
|
onValueChange={(vals) => setConversionOptions({ ...conversionOptions, audioBitrate: `${vals[0]}k` })}
|
||||||
|
disabled={isConverting}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sample Rate */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-foreground block">Sample Rate</label>
|
||||||
|
<Select
|
||||||
|
value={conversionOptions.audioSampleRate?.toString() || 'original'}
|
||||||
|
onValueChange={(value) => setConversionOptions({ ...conversionOptions, audioSampleRate: value === 'original' ? undefined : parseInt(value) })}
|
||||||
|
disabled={isConverting}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder="Select sample rate" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="original">Original</SelectItem>
|
||||||
|
<SelectItem value="48000">48 kHz (Studio)</SelectItem>
|
||||||
|
<SelectItem value="44100">44.1 kHz (CD Quality)</SelectItem>
|
||||||
|
<SelectItem value="22050">22.05 kHz</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Channels */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-foreground block">Channels</label>
|
||||||
|
<Select
|
||||||
|
value={conversionOptions.audioChannels?.toString() || 'original'}
|
||||||
|
onValueChange={(value) => setConversionOptions({ ...conversionOptions, audioChannels: value === 'original' ? undefined : parseInt(value) })}
|
||||||
|
disabled={isConverting}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder="Select channels" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="original">Original</SelectItem>
|
||||||
|
<SelectItem value="2">Stereo (2 channels)</SelectItem>
|
||||||
|
<SelectItem value="1">Mono (1 channel)</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{outputFormat.category === 'image' && (
|
||||||
|
<div className="space-y-4 pt-4 border-t border-border">
|
||||||
|
{/* Quality */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<label className="text-sm font-medium text-foreground">Quality</label>
|
||||||
|
<span className="text-xs text-muted-foreground">{conversionOptions.imageQuality || 85}%</span>
|
||||||
|
</div>
|
||||||
|
<Slider
|
||||||
|
min={1}
|
||||||
|
max={100}
|
||||||
|
step={1}
|
||||||
|
value={[conversionOptions.imageQuality || 85]}
|
||||||
|
onValueChange={(vals) => setConversionOptions({ ...conversionOptions, imageQuality: vals[0] })}
|
||||||
|
disabled={isConverting}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Width */}
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-foreground mb-2 block">Width (px)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={conversionOptions.imageWidth || ''}
|
||||||
|
onChange={(e) => setConversionOptions({ ...conversionOptions, imageWidth: e.target.value ? parseInt(e.target.value) : undefined })}
|
||||||
|
placeholder="Original"
|
||||||
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||||
|
disabled={isConverting}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">Leave empty to keep original</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Height */}
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-foreground mb-2 block">Height (px)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={conversionOptions.imageHeight || ''}
|
||||||
|
onChange={(e) => setConversionOptions({ ...conversionOptions, imageHeight: e.target.value ? parseInt(e.target.value) : undefined })}
|
||||||
|
placeholder="Original"
|
||||||
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||||
|
disabled={isConverting}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">Leave empty to maintain aspect ratio</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Convert button */}
|
{/* Convert button */}
|
||||||
{inputFormat && outputFormat && (
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<Button
|
<Button
|
||||||
onClick={handleConvert}
|
onClick={handleConvert}
|
||||||
disabled={isConvertDisabled}
|
disabled={isConvertDisabled}
|
||||||
className="flex-1"
|
className="w-full"
|
||||||
size="lg"
|
size="lg"
|
||||||
>
|
>
|
||||||
{isConverting
|
{isConverting
|
||||||
? 'Converting...'
|
? 'Converting...'
|
||||||
: `Convert ${selectedFiles.length} File${selectedFiles.length > 1 ? 's' : ''}`}
|
: `Convert ${selectedFiles.length} File${selectedFiles.length > 1 ? 's' : ''}`}
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={handleReset} variant="outline" size="lg">
|
<Button onClick={handleReset} variant="outline" size="lg" className="w-full">
|
||||||
Reset
|
Reset
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column: Results */}
|
||||||
|
<div className="space-y-6">
|
||||||
{/* Download All Button */}
|
{/* Download All Button */}
|
||||||
{completedCount > 0 && (
|
{completedCount > 0 && (
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="pt-6">
|
<CardContent>
|
||||||
<Button
|
<Button
|
||||||
onClick={handleDownloadAll}
|
onClick={handleDownloadAll}
|
||||||
className="w-full"
|
className="w-full"
|
||||||
@@ -473,5 +699,6 @@ export function FileConverter() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,210 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import { File, FileVideo, FileAudio, FileImage, Clock, HardDrive, Film, Music } from 'lucide-react';
|
|
||||||
import { Card } from '@/components/ui/card';
|
|
||||||
import type { ConversionFormat } from '@/types/media';
|
|
||||||
|
|
||||||
interface FileInfoProps {
|
|
||||||
file: File;
|
|
||||||
format: ConversionFormat;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface FileMetadata {
|
|
||||||
name: string;
|
|
||||||
size: string;
|
|
||||||
type: string;
|
|
||||||
category: string;
|
|
||||||
duration?: string;
|
|
||||||
dimensions?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function FileInfo({ file, format }: FileInfoProps) {
|
|
||||||
const [metadata, setMetadata] = React.useState<FileMetadata | null>(null);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
extractMetadata(file, format);
|
|
||||||
}, [file, format]);
|
|
||||||
|
|
||||||
const extractMetadata = async (file: File, format: ConversionFormat) => {
|
|
||||||
const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
|
|
||||||
const baseMetadata: FileMetadata = {
|
|
||||||
name: file.name,
|
|
||||||
size: file.size < 1024 * 1024 ? `${(file.size / 1024).toFixed(2)} KB` : `${sizeInMB} MB`,
|
|
||||||
type: format.name,
|
|
||||||
category: format.category,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Try to extract media-specific metadata
|
|
||||||
if (format.category === 'video' && file.type.startsWith('video/')) {
|
|
||||||
try {
|
|
||||||
const video = document.createElement('video');
|
|
||||||
video.preload = 'metadata';
|
|
||||||
|
|
||||||
const promise = new Promise<FileMetadata>((resolve) => {
|
|
||||||
video.onloadedmetadata = () => {
|
|
||||||
const duration = video.duration;
|
|
||||||
const minutes = Math.floor(duration / 60);
|
|
||||||
const seconds = Math.floor(duration % 60);
|
|
||||||
const durationStr = `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
||||||
|
|
||||||
resolve({
|
|
||||||
...baseMetadata,
|
|
||||||
duration: durationStr,
|
|
||||||
dimensions: `${video.videoWidth} × ${video.videoHeight}`,
|
|
||||||
});
|
|
||||||
|
|
||||||
URL.revokeObjectURL(video.src);
|
|
||||||
};
|
|
||||||
|
|
||||||
video.onerror = () => {
|
|
||||||
resolve(baseMetadata);
|
|
||||||
URL.revokeObjectURL(video.src);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
video.src = URL.createObjectURL(file);
|
|
||||||
const result = await promise;
|
|
||||||
setMetadata(result);
|
|
||||||
return;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to extract video metadata:', error);
|
|
||||||
}
|
|
||||||
} else if (format.category === 'audio' && file.type.startsWith('audio/')) {
|
|
||||||
try {
|
|
||||||
const audio = document.createElement('audio');
|
|
||||||
audio.preload = 'metadata';
|
|
||||||
|
|
||||||
const promise = new Promise<FileMetadata>((resolve) => {
|
|
||||||
audio.onloadedmetadata = () => {
|
|
||||||
const duration = audio.duration;
|
|
||||||
const minutes = Math.floor(duration / 60);
|
|
||||||
const seconds = Math.floor(duration % 60);
|
|
||||||
const durationStr = `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
||||||
|
|
||||||
resolve({
|
|
||||||
...baseMetadata,
|
|
||||||
duration: durationStr,
|
|
||||||
});
|
|
||||||
|
|
||||||
URL.revokeObjectURL(audio.src);
|
|
||||||
};
|
|
||||||
|
|
||||||
audio.onerror = () => {
|
|
||||||
resolve(baseMetadata);
|
|
||||||
URL.revokeObjectURL(audio.src);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
audio.src = URL.createObjectURL(file);
|
|
||||||
const result = await promise;
|
|
||||||
setMetadata(result);
|
|
||||||
return;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to extract audio metadata:', error);
|
|
||||||
}
|
|
||||||
} else if (format.category === 'image' && file.type.startsWith('image/')) {
|
|
||||||
try {
|
|
||||||
const img = new Image();
|
|
||||||
|
|
||||||
const promise = new Promise<FileMetadata>((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);
|
|
||||||
const result = await promise;
|
|
||||||
setMetadata(result);
|
|
||||||
return;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to extract image metadata:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setMetadata(baseMetadata);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getCategoryIcon = () => {
|
|
||||||
switch (format.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" />;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!metadata) {
|
|
||||||
return (
|
|
||||||
<Card className="p-4 animate-pulse">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<div className="w-5 h-5 bg-secondary rounded"></div>
|
|
||||||
<div className="flex-1 space-y-2">
|
|
||||||
<div className="h-4 bg-secondary rounded w-3/4"></div>
|
|
||||||
<div className="h-3 bg-secondary rounded w-1/2"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<div className="mt-0.5">{getCategoryIcon()}</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h3 className="text-sm font-medium text-foreground truncate" title={metadata.name}>
|
|
||||||
{metadata.name}
|
|
||||||
</h3>
|
|
||||||
<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">
|
|
||||||
{format.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>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,10 +1,10 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import * as React from 'react';
|
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 { cn } from '@/lib/utils/cn';
|
||||||
import { formatFileSize } from '@/lib/media/utils/fileUtils';
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
|
import type { ConversionFormat } from '@/types/media';
|
||||||
|
|
||||||
export interface FileUploadProps {
|
export interface FileUploadProps {
|
||||||
onFileSelect: (files: File[]) => void;
|
onFileSelect: (files: File[]) => void;
|
||||||
@@ -14,6 +14,7 @@ export interface FileUploadProps {
|
|||||||
maxSizeMB?: number;
|
maxSizeMB?: number;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
inputRef?: React.RefObject<HTMLInputElement | null>;
|
inputRef?: React.RefObject<HTMLInputElement | null>;
|
||||||
|
inputFormat?: ConversionFormat;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function FileUpload({
|
export function FileUpload({
|
||||||
@@ -24,9 +25,137 @@ export function FileUpload({
|
|||||||
maxSizeMB = 500,
|
maxSizeMB = 500,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
inputRef,
|
inputRef,
|
||||||
|
inputFormat,
|
||||||
}: FileUploadProps) {
|
}: FileUploadProps) {
|
||||||
const [isDragging, setIsDragging] = React.useState(false);
|
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) => {
|
const handleDragEnter = (e: React.DragEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -113,28 +242,68 @@ export function FileUpload({
|
|||||||
|
|
||||||
{selectedFiles.length > 0 ? (
|
{selectedFiles.length > 0 ? (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{selectedFiles.map((file, index) => (
|
{selectedFiles.map((file, index) => {
|
||||||
<div key={`${file.name}-${index}`} className="border-2 border-border rounded-lg p-4 bg-card">
|
const metadata = fileMetadata[index];
|
||||||
<div className="flex items-center justify-between">
|
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-1 min-w-0">
|
||||||
<p className="text-sm font-medium text-foreground truncate">{file.name}</p>
|
<div className="flex items-start justify-between gap-2">
|
||||||
<p className="text-xs text-muted-foreground mt-1">
|
<p className="text-sm font-medium text-foreground truncate" title={file.name}>
|
||||||
{formatFileSize(file.size)}
|
{file.name}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
onClick={handleRemove(index)}
|
onClick={handleRemove(index)}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
className="ml-4"
|
className="ml-2 flex-shrink-0"
|
||||||
>
|
>
|
||||||
<X className="h-4 w-4" />
|
<X className="h-4 w-4" />
|
||||||
<span className="sr-only">Remove file</span>
|
<span className="sr-only">Remove file</span>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</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>
|
</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>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
{/* Add more files button */}
|
{/* Add more files button */}
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
Reference in New Issue
Block a user