705 lines
28 KiB
TypeScript
705 lines
28 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
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 { ConversionPreview } from './ConversionPreview';
|
|
import { toast } from 'sonner';
|
|
import {
|
|
getFormatByExtension,
|
|
getFormatByMimeType,
|
|
getCompatibleFormats,
|
|
} from '@/lib/media/utils/formatMappings';
|
|
import { convertWithFFmpeg } from '@/lib/media/converters/ffmpegService';
|
|
import { convertWithImageMagick } from '@/lib/media/converters/imagemagickService';
|
|
import { addToHistory } from '@/lib/media/storage/history';
|
|
import { downloadBlobsAsZip, generateOutputFilename } from '@/lib/media/utils/fileUtils';
|
|
import type { ConversionJob, ConversionFormat, ConversionOptions } from '@/types/media';
|
|
|
|
export function FileConverter() {
|
|
const [selectedFiles, setSelectedFiles] = React.useState<File[]>([]);
|
|
const [inputFormat, setInputFormat] = React.useState<ConversionFormat | undefined>();
|
|
const [outputFormat, setOutputFormat] = React.useState<ConversionFormat | undefined>();
|
|
const [compatibleFormats, setCompatibleFormats] = React.useState<ConversionFormat[]>([]);
|
|
const [conversionJobs, setConversionJobs] = React.useState<ConversionJob[]>([]);
|
|
const [conversionOptions, setConversionOptions] = React.useState<ConversionOptions>({});
|
|
|
|
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
|
|
|
// Detect input format when files are selected
|
|
React.useEffect(() => {
|
|
if (selectedFiles.length === 0) {
|
|
setInputFormat(undefined);
|
|
setOutputFormat(undefined);
|
|
setCompatibleFormats([]);
|
|
setConversionJobs([]);
|
|
return;
|
|
}
|
|
|
|
// Use first file to detect format (assume all files same format for batch)
|
|
const firstFile = selectedFiles[0];
|
|
|
|
// Try to detect format from extension
|
|
const ext = firstFile.name.split('.').pop()?.toLowerCase();
|
|
let format = ext ? getFormatByExtension(ext) : undefined;
|
|
|
|
// Fallback to MIME type
|
|
if (!format) {
|
|
format = getFormatByMimeType(firstFile.type);
|
|
}
|
|
|
|
if (format) {
|
|
setInputFormat(format);
|
|
const compatible = getCompatibleFormats(format);
|
|
setCompatibleFormats(compatible);
|
|
|
|
// Auto-select first compatible format
|
|
if (compatible.length > 0 && !outputFormat) {
|
|
setOutputFormat(compatible[0]);
|
|
}
|
|
|
|
toast.success(`Detected format: ${format.name} (${selectedFiles.length} file${selectedFiles.length > 1 ? 's' : ''})`);
|
|
} else {
|
|
toast.error('Could not detect file format');
|
|
setInputFormat(undefined);
|
|
setCompatibleFormats([]);
|
|
}
|
|
}, [selectedFiles]);
|
|
|
|
const handleConvert = async () => {
|
|
if (selectedFiles.length === 0 || !inputFormat || !outputFormat) {
|
|
toast.error('Please select files and output format');
|
|
return;
|
|
}
|
|
|
|
// Create conversion jobs for all files
|
|
const jobs: ConversionJob[] = selectedFiles.map((file) => ({
|
|
id: Math.random().toString(36).substring(7),
|
|
inputFile: file,
|
|
inputFormat,
|
|
outputFormat,
|
|
options: conversionOptions,
|
|
status: 'pending',
|
|
progress: 0,
|
|
startTime: Date.now(),
|
|
}));
|
|
|
|
setConversionJobs(jobs);
|
|
|
|
// Track success/failure counts
|
|
let successCount = 0;
|
|
let failureCount = 0;
|
|
|
|
// Convert files sequentially
|
|
for (let i = 0; i < jobs.length; i++) {
|
|
const job = jobs[i];
|
|
|
|
try {
|
|
// Update job to loading
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === i ? { ...j, status: 'loading' as const } : j)
|
|
);
|
|
|
|
// Update job to processing
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === i ? { ...j, status: 'processing' as const, progress: 10 } : j)
|
|
);
|
|
|
|
// Call appropriate converter
|
|
let result;
|
|
|
|
if (!outputFormat) throw new Error('Output format not selected');
|
|
|
|
switch (outputFormat.converter) {
|
|
case 'ffmpeg':
|
|
result = await convertWithFFmpeg(job.inputFile, outputFormat.extension, conversionOptions, (progress) => {
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === i ? { ...j, progress } : j)
|
|
);
|
|
});
|
|
break;
|
|
|
|
case 'imagemagick':
|
|
result = await convertWithImageMagick(
|
|
job.inputFile,
|
|
outputFormat.extension,
|
|
conversionOptions,
|
|
(progress) => {
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === i ? { ...j, progress } : j)
|
|
);
|
|
}
|
|
);
|
|
break;
|
|
|
|
default:
|
|
throw new Error(`Unknown converter: ${outputFormat.converter}`);
|
|
}
|
|
|
|
// Update job with result
|
|
if (result.success && result.blob) {
|
|
successCount++;
|
|
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === i ? {
|
|
...j,
|
|
status: 'completed' as const,
|
|
progress: 100,
|
|
result: result.blob,
|
|
endTime: Date.now(),
|
|
} : j)
|
|
);
|
|
|
|
// Add to history
|
|
addToHistory({
|
|
inputFileName: job.inputFile.name,
|
|
inputFormat: inputFormat.name,
|
|
outputFormat: outputFormat.name,
|
|
outputFileName: `output.${outputFormat.extension}`,
|
|
fileSize: result.blob.size,
|
|
result: result.blob,
|
|
});
|
|
} else {
|
|
failureCount++;
|
|
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === i ? {
|
|
...j,
|
|
status: 'error' as const,
|
|
error: result.error || 'Unknown error',
|
|
endTime: Date.now(),
|
|
} : j)
|
|
);
|
|
}
|
|
} catch (error) {
|
|
failureCount++;
|
|
const errorMessage = error instanceof Error ? error.message : 'Unknown error';
|
|
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === i ? {
|
|
...j,
|
|
status: 'error' as const,
|
|
error: errorMessage,
|
|
endTime: Date.now(),
|
|
} : j)
|
|
);
|
|
}
|
|
}
|
|
|
|
// Show completion message
|
|
if (successCount === jobs.length) {
|
|
toast.success(`All ${jobs.length} files converted successfully!`);
|
|
} else if (successCount > 0) {
|
|
toast.info(`${successCount}/${jobs.length} files converted successfully`);
|
|
} else {
|
|
toast.error('All conversions failed');
|
|
}
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setSelectedFiles([]);
|
|
setInputFormat(undefined);
|
|
setOutputFormat(undefined);
|
|
setCompatibleFormats([]);
|
|
setConversionJobs([]);
|
|
setConversionOptions({});
|
|
};
|
|
|
|
const handleFileSelect = (files: File[]) => {
|
|
setSelectedFiles((prev) => [...prev, ...files]);
|
|
};
|
|
|
|
const handleFileRemove = (index: number) => {
|
|
setSelectedFiles((prev) => prev.filter((_, i) => i !== index));
|
|
};
|
|
|
|
const handleDownloadAll = async () => {
|
|
if (!outputFormat) return;
|
|
|
|
const completedJobs = conversionJobs.filter(job => job.status === 'completed' && job.result);
|
|
|
|
if (completedJobs.length === 0) {
|
|
toast.error('No files to download');
|
|
return;
|
|
}
|
|
|
|
if (completedJobs.length === 1) {
|
|
// Just download the single file
|
|
const job = completedJobs[0];
|
|
const filename = generateOutputFilename(job.inputFile.name, outputFormat.extension);
|
|
const url = URL.createObjectURL(job.result!);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = filename;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
return;
|
|
}
|
|
|
|
// Download multiple files as ZIP
|
|
const files = completedJobs.map(job => ({
|
|
blob: job.result!,
|
|
filename: generateOutputFilename(job.inputFile.name, outputFormat.extension),
|
|
}));
|
|
|
|
await downloadBlobsAsZip(files, `converted-files.zip`);
|
|
toast.success(`Downloaded ${files.length} files as ZIP`);
|
|
};
|
|
|
|
const handleRetry = async (jobId: string) => {
|
|
const jobIndex = conversionJobs.findIndex(j => j.id === jobId);
|
|
if (jobIndex === -1 || !outputFormat) return;
|
|
|
|
const job = conversionJobs[jobIndex];
|
|
|
|
try {
|
|
// Reset job to loading
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === jobIndex ? {
|
|
...j,
|
|
status: 'loading' as const,
|
|
progress: 0,
|
|
error: undefined,
|
|
startTime: Date.now(),
|
|
} : j)
|
|
);
|
|
|
|
// Update to processing
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === jobIndex ? { ...j, status: 'processing' as const, progress: 10 } : j)
|
|
);
|
|
|
|
// Call appropriate converter
|
|
let result;
|
|
|
|
switch (outputFormat.converter) {
|
|
case 'ffmpeg':
|
|
result = await convertWithFFmpeg(job.inputFile, outputFormat.extension, conversionOptions, (progress) => {
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === jobIndex ? { ...j, progress } : j)
|
|
);
|
|
});
|
|
break;
|
|
|
|
case 'imagemagick':
|
|
result = await convertWithImageMagick(
|
|
job.inputFile,
|
|
outputFormat.extension,
|
|
conversionOptions,
|
|
(progress) => {
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === jobIndex ? { ...j, progress } : j)
|
|
);
|
|
}
|
|
);
|
|
break;
|
|
|
|
default:
|
|
throw new Error(`Unknown converter: ${outputFormat.converter}`);
|
|
}
|
|
|
|
// Update job with result
|
|
if (result.success && result.blob) {
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === jobIndex ? {
|
|
...j,
|
|
status: 'completed' as const,
|
|
progress: 100,
|
|
result: result.blob,
|
|
endTime: Date.now(),
|
|
} : j)
|
|
);
|
|
|
|
toast.success('Conversion completed successfully!');
|
|
|
|
// Add to history
|
|
addToHistory({
|
|
inputFileName: job.inputFile.name,
|
|
inputFormat: job.inputFormat.name,
|
|
outputFormat: outputFormat.name,
|
|
outputFileName: `output.${outputFormat.extension}`,
|
|
fileSize: result.blob.size,
|
|
result: result.blob,
|
|
});
|
|
} else {
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === jobIndex ? {
|
|
...j,
|
|
status: 'error' as const,
|
|
error: result.error || 'Unknown error',
|
|
endTime: Date.now(),
|
|
} : j)
|
|
);
|
|
|
|
toast.error(result.error || 'Retry failed');
|
|
}
|
|
} catch (error) {
|
|
const errorMessage = error instanceof Error ? error.message : 'Unknown error';
|
|
|
|
setConversionJobs((prev) =>
|
|
prev.map((j, idx) => idx === jobIndex ? {
|
|
...j,
|
|
status: 'error' as const,
|
|
error: errorMessage,
|
|
endTime: Date.now(),
|
|
} : j)
|
|
);
|
|
|
|
toast.error(`Retry failed: ${errorMessage}`);
|
|
}
|
|
};
|
|
|
|
const isConverting = conversionJobs.some(job => job.status === 'loading' || job.status === 'processing');
|
|
const isConvertDisabled = selectedFiles.length === 0 || !outputFormat || isConverting;
|
|
const completedCount = conversionJobs.filter(job => job.status === 'completed').length;
|
|
|
|
return (
|
|
<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>
|
|
|
|
{/* 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 block">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="w-full"
|
|
size="lg"
|
|
>
|
|
{isConverting
|
|
? 'Converting...'
|
|
: `Convert ${selectedFiles.length} File${selectedFiles.length > 1 ? 's' : ''}`}
|
|
</Button>
|
|
<Button onClick={handleReset} variant="outline" size="lg" className="w-full">
|
|
Reset
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
|
|
{/* 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>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|