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,17 +1,20 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { ArrowRight, ArrowDown } from 'lucide-react';
|
||||
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 { FormatSelector } from './FormatSelector';
|
||||
import { ConversionPreview } from './ConversionPreview';
|
||||
import { ConversionOptionsPanel } from './ConversionOptions';
|
||||
import { FileInfo } from './FileInfo';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
SUPPORTED_FORMATS,
|
||||
getFormatByExtension,
|
||||
getFormatByMimeType,
|
||||
getCompatibleFormats,
|
||||
@@ -362,116 +365,340 @@ export function FileConverter() {
|
||||
const completedCount = conversionJobs.filter(job => job.status === 'completed').length;
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-8">
|
||||
{/* Header */}
|
||||
<Card>
|
||||
<CardContent className="space-y-6">
|
||||
{/* File upload */}
|
||||
<FileUpload
|
||||
onFileSelect={handleFileSelect}
|
||||
onFileRemove={handleFileRemove}
|
||||
selectedFiles={selectedFiles}
|
||||
disabled={isConverting}
|
||||
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}
|
||||
outputFormat={outputFormat}
|
||||
options={conversionOptions}
|
||||
onOptionsChange={setConversionOptions}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 w-full">
|
||||
{/* Left Column: Upload and Conversion Options */}
|
||||
<div className="space-y-6">
|
||||
{/* Upload Card */}
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
{/* File upload */}
|
||||
<FileUpload
|
||||
onFileSelect={handleFileSelect}
|
||||
onFileRemove={handleFileRemove}
|
||||
selectedFiles={selectedFiles}
|
||||
disabled={isConverting}
|
||||
inputRef={fileInputRef}
|
||||
inputFormat={inputFormat}
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Convert button */}
|
||||
{inputFormat && outputFormat && (
|
||||
<div className="flex gap-3">
|
||||
{/* 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}
|
||||
/>
|
||||
<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 */}
|
||||
<Button
|
||||
onClick={handleConvert}
|
||||
disabled={isConvertDisabled}
|
||||
className="flex-1"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
>
|
||||
{isConverting
|
||||
? 'Converting...'
|
||||
: `Convert ${selectedFiles.length} File${selectedFiles.length > 1 ? 's' : ''}`}
|
||||
</Button>
|
||||
<Button onClick={handleReset} variant="outline" size="lg">
|
||||
<Button onClick={handleReset} variant="outline" size="lg" className="w-full">
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Download All Button */}
|
||||
{completedCount > 0 && (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<Button
|
||||
onClick={handleDownloadAll}
|
||||
className="w-full"
|
||||
size="lg"
|
||||
variant="default"
|
||||
>
|
||||
Download All ({completedCount} file{completedCount > 1 ? 's' : ''})
|
||||
{completedCount > 1 && ' as ZIP'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
{/* Right Column: Results */}
|
||||
<div className="space-y-6">
|
||||
{/* Download All Button */}
|
||||
{completedCount > 0 && (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Button
|
||||
onClick={handleDownloadAll}
|
||||
className="w-full"
|
||||
size="lg"
|
||||
variant="default"
|
||||
>
|
||||
Download All ({completedCount} file{completedCount > 1 ? 's' : ''})
|
||||
{completedCount > 1 && ' as ZIP'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Conversion previews */}
|
||||
{conversionJobs.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
{conversionJobs.map((job) => (
|
||||
<ConversionPreview
|
||||
key={job.id}
|
||||
job={job}
|
||||
onRetry={() => handleRetry(job.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* Conversion previews */}
|
||||
{conversionJobs.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
{conversionJobs.map((job) => (
|
||||
<ConversionPreview
|
||||
key={job.id}
|
||||
job={job}
|
||||
onRetry={() => handleRetry(job.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user