refactor: externalize shared primitives, remove shadcn mixing in tools
Shared components (components/ui/): - slider-row.tsx: SliderRow — label + display value + Slider, replaces inline slider blocks in FileConverter, QROptions - color-input.tsx: ColorInput — color swatch + hex text input pair, replaces repeated inline patterns in QROptions, KeyframeProperties, FaviconGenerator Media tool (FileConverter.tsx): - Remove all shadcn Select/SelectTrigger/SelectContent/SelectItem - Replace with native <select> + selectCls (matches AnimationSettings and all other tools) - Use SliderRow for video/audio bitrate and image quality sliders - Net: -6 shadcn Select trees, consistent with every other tool QROptions.tsx: - Use SliderRow for margin slider (remove raw Slider import) - Use ColorInput for foreground + background color pairs KeyframeProperties.tsx: - Use ColorInput for background color pair (keep local SliderRow which has a different layout with number input) FaviconGenerator.tsx: - Use ColorInput for background + theme color pairs AnimationSettings.tsx: - Remove dead bg-[#1a1a2e] per-option className (global CSS handles select option styling via bg-popover) Delete: - components/media/ConversionOptions.tsx — dead code (no imports), contained the shadcn Label/Input/Select/Slider patterns being replaced Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,271 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import type { ConversionOptions, ConversionFormat } from '@/types/media';
|
||||
|
||||
interface ConversionOptionsProps {
|
||||
inputFormat: ConversionFormat;
|
||||
outputFormat: ConversionFormat;
|
||||
options: ConversionOptions;
|
||||
onOptionsChange: (options: ConversionOptions) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function ConversionOptionsPanel({
|
||||
inputFormat,
|
||||
outputFormat,
|
||||
options,
|
||||
onOptionsChange,
|
||||
disabled = false,
|
||||
}: ConversionOptionsProps) {
|
||||
const [isExpanded, setIsExpanded] = React.useState(false);
|
||||
|
||||
const handleOptionChange = (key: string, value: any) => {
|
||||
onOptionsChange({ ...options, [key]: value });
|
||||
};
|
||||
|
||||
const renderVideoOptions = () => (
|
||||
<div className="space-y-4">
|
||||
{/* Video Codec */}
|
||||
<div className="space-y-2">
|
||||
<Label>Video Codec</Label>
|
||||
<Select
|
||||
value={options.videoCodec || 'default'}
|
||||
onValueChange={(value) => handleOptionChange('videoCodec', value === 'default' ? undefined : value)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<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>Video Bitrate</Label>
|
||||
<span className="text-xs text-muted-foreground">{options.videoBitrate || '2M'}</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={0.5}
|
||||
max={10}
|
||||
step={0.5}
|
||||
value={[parseFloat(options.videoBitrate?.replace('M', '') || '2')]}
|
||||
onValueChange={(vals) => handleOptionChange('videoBitrate', `${vals[0]}M`)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">Higher bitrate = better quality, larger file</p>
|
||||
</div>
|
||||
|
||||
{/* Resolution */}
|
||||
<div className="space-y-2">
|
||||
<Label>Resolution</Label>
|
||||
<Select
|
||||
value={options.videoResolution || 'original'}
|
||||
onValueChange={(value) => handleOptionChange('videoResolution', value === 'original' ? undefined : value)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<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>Frame Rate (FPS)</Label>
|
||||
<Select
|
||||
value={options.videoFps?.toString() || 'original'}
|
||||
onValueChange={(value) => handleOptionChange('videoFps', value === 'original' ? undefined : parseInt(value))}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<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>Audio Bitrate</Label>
|
||||
<span className="text-xs text-muted-foreground">{options.audioBitrate || '128k'}</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={64}
|
||||
max={320}
|
||||
step={32}
|
||||
value={[parseInt(options.audioBitrate?.replace('k', '') || '128')]}
|
||||
onValueChange={(vals) => handleOptionChange('audioBitrate', `${vals[0]}k`)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderAudioOptions = () => (
|
||||
<div className="space-y-4">
|
||||
{/* Audio Codec */}
|
||||
<div className="space-y-2">
|
||||
<Label>Audio Codec</Label>
|
||||
<Select
|
||||
value={options.audioCodec || 'default'}
|
||||
onValueChange={(value) => handleOptionChange('audioCodec', value === 'default' ? undefined : value)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<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>Bitrate</Label>
|
||||
<span className="text-xs text-muted-foreground">{options.audioBitrate || '192k'}</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={64}
|
||||
max={320}
|
||||
step={32}
|
||||
value={[parseInt(options.audioBitrate?.replace('k', '') || '192')]}
|
||||
onValueChange={(vals) => handleOptionChange('audioBitrate', `${vals[0]}k`)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sample Rate */}
|
||||
<div className="space-y-2">
|
||||
<Label>Sample Rate</Label>
|
||||
<Select
|
||||
value={options.audioSampleRate?.toString() || 'original'}
|
||||
onValueChange={(value) => handleOptionChange('audioSampleRate', value === 'original' ? undefined : parseInt(value))}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<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>Channels</Label>
|
||||
<Select
|
||||
value={options.audioChannels?.toString() || 'original'}
|
||||
onValueChange={(value) => handleOptionChange('audioChannels', value === 'original' ? undefined : parseInt(value))}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<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>
|
||||
);
|
||||
|
||||
const renderImageOptions = () => (
|
||||
<div className="space-y-4">
|
||||
{/* Quality */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Quality</Label>
|
||||
<span className="text-xs text-muted-foreground">{options.imageQuality || 85}%</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={1}
|
||||
max={100}
|
||||
step={1}
|
||||
value={[options.imageQuality || 85]}
|
||||
onValueChange={(vals) => handleOptionChange('imageQuality', vals[0])}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Width */}
|
||||
<div>
|
||||
<Label className="mb-2">Width (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={options.imageWidth || ''}
|
||||
onChange={(e) => handleOptionChange('imageWidth', e.target.value ? parseInt(e.target.value) : undefined)}
|
||||
placeholder="Original"
|
||||
disabled={disabled}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">Leave empty to keep original</p>
|
||||
</div>
|
||||
|
||||
{/* Height */}
|
||||
<div>
|
||||
<Label className="mb-2">Height (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={options.imageHeight || ''}
|
||||
onChange={(e) => handleOptionChange('imageHeight', e.target.value ? parseInt(e.target.value) : undefined)}
|
||||
placeholder="Original"
|
||||
disabled={disabled}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">Leave empty to maintain aspect ratio</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{outputFormat.category === 'video' && renderVideoOptions()}
|
||||
{outputFormat.category === 'audio' && renderAudioOptions()}
|
||||
{outputFormat.category === 'image' && renderImageOptions()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
import { SliderRow } from '@/components/ui/slider-row';
|
||||
import { FileUpload } from './FileUpload';
|
||||
import { ConversionPreview } from './ConversionPreview';
|
||||
import { toast } from 'sonner';
|
||||
@@ -30,6 +23,9 @@ type MobileTab = 'upload' | 'convert';
|
||||
const actionBtn =
|
||||
'flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
|
||||
|
||||
const selectCls =
|
||||
'w-full bg-transparent border border-border/40 rounded-lg px-2.5 py-1.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer disabled:opacity-40';
|
||||
|
||||
export function FileConverter() {
|
||||
const [selectedFiles, setSelectedFiles] = React.useState<File[]>([]);
|
||||
const [inputFormat, setInputFormat] = React.useState<ConversionFormat | undefined>();
|
||||
@@ -58,7 +54,6 @@ export function FileConverter() {
|
||||
setCompatibleFormats(compat);
|
||||
if (compat.length > 0 && !outputFormat) setOutputFormat(compat[0]);
|
||||
toast.success(`Detected: ${fmt.name} · ${selectedFiles.length} file${selectedFiles.length > 1 ? 's' : ''}`);
|
||||
// Auto-advance to convert tab on mobile
|
||||
setMobileTab('convert');
|
||||
} else {
|
||||
toast.error('Could not detect file format');
|
||||
@@ -208,7 +203,7 @@ export function FileConverter() {
|
||||
{/* ── Main layout ─────────────────────────────────────── */}
|
||||
<div
|
||||
className="grid grid-cols-1 lg:grid-cols-5 gap-4"
|
||||
style={{ height: 'calc(100svh - 180px)' }}
|
||||
style={{ height: 'calc(100svh - 180px)' }}
|
||||
>
|
||||
|
||||
{/* Left: upload zone */}
|
||||
@@ -246,7 +241,6 @@ export function FileConverter() {
|
||||
mobileTab !== 'convert' && 'hidden lg:flex'
|
||||
)}
|
||||
>
|
||||
{/* Options panel */}
|
||||
{inputFormat && compatibleFormats.length > 0 ? (
|
||||
<div className="glass rounded-xl p-4 shrink-0">
|
||||
{/* Detected format */}
|
||||
@@ -290,90 +284,70 @@ export function FileConverter() {
|
||||
<>
|
||||
<div className="space-y-1.5">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Video Codec</span>
|
||||
<Select
|
||||
<select
|
||||
value={conversionOptions.videoCodec || 'default'}
|
||||
onValueChange={(v) => setOpt({ videoCodec: v === 'default' ? undefined : v })}
|
||||
onChange={(e) => setOpt({ videoCodec: e.target.value === 'default' ? undefined : e.target.value })}
|
||||
disabled={isConverting}
|
||||
className={selectCls}
|
||||
>
|
||||
<SelectTrigger className="h-7 w-full text-xs border-border/30 bg-transparent hover:border-primary/30 transition-colors font-mono">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="default">Auto (Recommended)</SelectItem>
|
||||
<SelectItem value="libx264">H.264</SelectItem>
|
||||
<SelectItem value="libx265">H.265</SelectItem>
|
||||
<SelectItem value="libvpx">VP8 (WebM)</SelectItem>
|
||||
<SelectItem value="libvpx-vp9">VP9 (WebM)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<option value="default">Auto (Recommended)</option>
|
||||
<option value="libx264">H.264</option>
|
||||
<option value="libx265">H.265</option>
|
||||
<option value="libvpx">VP8 (WebM)</option>
|
||||
<option value="libvpx-vp9">VP9 (WebM)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Video Bitrate</span>
|
||||
<span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{conversionOptions.videoBitrate || '2M'}</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={0.5} max={10} step={0.5}
|
||||
value={[parseFloat(conversionOptions.videoBitrate?.replace('M', '') || '2')]}
|
||||
onValueChange={(v) => setOpt({ videoBitrate: `${v[0]}M` })}
|
||||
disabled={isConverting}
|
||||
/>
|
||||
</div>
|
||||
<SliderRow
|
||||
label="Video Bitrate"
|
||||
display={conversionOptions.videoBitrate || '2M'}
|
||||
value={parseFloat(conversionOptions.videoBitrate?.replace('M', '') || '2')}
|
||||
min={0.5} max={10} step={0.5}
|
||||
onChange={(v) => setOpt({ videoBitrate: `${v}M` })}
|
||||
disabled={isConverting}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="space-y-1.5">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Resolution</span>
|
||||
<Select
|
||||
<select
|
||||
value={conversionOptions.videoResolution || 'original'}
|
||||
onValueChange={(v) => setOpt({ videoResolution: v === 'original' ? undefined : v })}
|
||||
onChange={(e) => setOpt({ videoResolution: e.target.value === 'original' ? undefined : e.target.value })}
|
||||
disabled={isConverting}
|
||||
className={selectCls}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="original">Original</SelectItem>
|
||||
<SelectItem value="1920x-1">1080p</SelectItem>
|
||||
<SelectItem value="1280x-1">720p</SelectItem>
|
||||
<SelectItem value="854x-1">480p</SelectItem>
|
||||
<SelectItem value="640x-1">360p</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<option value="original">Original</option>
|
||||
<option value="1920x-1">1080p</option>
|
||||
<option value="1280x-1">720p</option>
|
||||
<option value="854x-1">480p</option>
|
||||
<option value="640x-1">360p</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">FPS</span>
|
||||
<Select
|
||||
<select
|
||||
value={conversionOptions.videoFps?.toString() || 'original'}
|
||||
onValueChange={(v) => setOpt({ videoFps: v === 'original' ? undefined : parseInt(v) })}
|
||||
onChange={(e) => setOpt({ videoFps: e.target.value === 'original' ? undefined : parseInt(e.target.value) })}
|
||||
disabled={isConverting}
|
||||
className={selectCls}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
|
||||
<SelectValue />
|
||||
</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>
|
||||
<option value="original">Original</option>
|
||||
<option value="60">60 fps</option>
|
||||
<option value="30">30 fps</option>
|
||||
<option value="24">24 fps</option>
|
||||
<option value="15">15 fps</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Audio Bitrate</span>
|
||||
<span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{conversionOptions.audioBitrate || '128k'}</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={64} max={320} step={32}
|
||||
value={[parseInt(conversionOptions.audioBitrate?.replace('k', '') || '128')]}
|
||||
onValueChange={(v) => setOpt({ audioBitrate: `${v[0]}k` })}
|
||||
disabled={isConverting}
|
||||
/>
|
||||
</div>
|
||||
<SliderRow
|
||||
label="Audio Bitrate"
|
||||
display={conversionOptions.audioBitrate || '128k'}
|
||||
value={parseInt(conversionOptions.audioBitrate?.replace('k', '') || '128')}
|
||||
min={64} max={320} step={32}
|
||||
onChange={(v) => setOpt({ audioBitrate: `${v}k` })}
|
||||
disabled={isConverting}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -382,73 +356,57 @@ export function FileConverter() {
|
||||
<>
|
||||
<div className="space-y-1.5">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Codec</span>
|
||||
<Select
|
||||
<select
|
||||
value={conversionOptions.audioCodec || 'default'}
|
||||
onValueChange={(v) => setOpt({ audioCodec: v === 'default' ? undefined : v })}
|
||||
onChange={(e) => setOpt({ audioCodec: e.target.value === 'default' ? undefined : e.target.value })}
|
||||
disabled={isConverting}
|
||||
className={selectCls}
|
||||
>
|
||||
<SelectTrigger className="h-7 w-full text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="default">Auto</SelectItem>
|
||||
<SelectItem value="libmp3lame">MP3 (LAME)</SelectItem>
|
||||
<SelectItem value="aac">AAC</SelectItem>
|
||||
<SelectItem value="libvorbis">Vorbis</SelectItem>
|
||||
<SelectItem value="libopus">Opus</SelectItem>
|
||||
<SelectItem value="flac">FLAC</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<option value="default">Auto</option>
|
||||
<option value="libmp3lame">MP3 (LAME)</option>
|
||||
<option value="aac">AAC</option>
|
||||
<option value="libvorbis">Vorbis</option>
|
||||
<option value="libopus">Opus</option>
|
||||
<option value="flac">FLAC</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Bitrate</span>
|
||||
<span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{conversionOptions.audioBitrate || '192k'}</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={64} max={320} step={32}
|
||||
value={[parseInt(conversionOptions.audioBitrate?.replace('k', '') || '192')]}
|
||||
onValueChange={(v) => setOpt({ audioBitrate: `${v[0]}k` })}
|
||||
disabled={isConverting}
|
||||
/>
|
||||
</div>
|
||||
<SliderRow
|
||||
label="Bitrate"
|
||||
display={conversionOptions.audioBitrate || '192k'}
|
||||
value={parseInt(conversionOptions.audioBitrate?.replace('k', '') || '192')}
|
||||
min={64} max={320} step={32}
|
||||
onChange={(v) => setOpt({ audioBitrate: `${v}k` })}
|
||||
disabled={isConverting}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="space-y-1.5">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Sample Rate</span>
|
||||
<Select
|
||||
<select
|
||||
value={conversionOptions.audioSampleRate?.toString() || 'original'}
|
||||
onValueChange={(v) => setOpt({ audioSampleRate: v === 'original' ? undefined : parseInt(v) })}
|
||||
onChange={(e) => setOpt({ audioSampleRate: e.target.value === 'original' ? undefined : parseInt(e.target.value) })}
|
||||
disabled={isConverting}
|
||||
className={selectCls}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="original">Original</SelectItem>
|
||||
<SelectItem value="48000">48 kHz</SelectItem>
|
||||
<SelectItem value="44100">44.1 kHz</SelectItem>
|
||||
<SelectItem value="22050">22 kHz</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<option value="original">Original</option>
|
||||
<option value="48000">48 kHz</option>
|
||||
<option value="44100">44.1 kHz</option>
|
||||
<option value="22050">22 kHz</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Channels</span>
|
||||
<Select
|
||||
<select
|
||||
value={conversionOptions.audioChannels?.toString() || 'original'}
|
||||
onValueChange={(v) => setOpt({ audioChannels: v === 'original' ? undefined : parseInt(v) })}
|
||||
onChange={(e) => setOpt({ audioChannels: e.target.value === 'original' ? undefined : parseInt(e.target.value) })}
|
||||
disabled={isConverting}
|
||||
className={selectCls}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="original">Original</SelectItem>
|
||||
<SelectItem value="2">Stereo</SelectItem>
|
||||
<SelectItem value="1">Mono</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<option value="original">Original</option>
|
||||
<option value="2">Stereo</option>
|
||||
<option value="1">Mono</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@@ -457,18 +415,14 @@ export function FileConverter() {
|
||||
{/* Image options */}
|
||||
{outputFormat.category === 'image' && (
|
||||
<>
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Quality</span>
|
||||
<span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{conversionOptions.imageQuality ?? 85}%</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={1} max={100} step={1}
|
||||
value={[conversionOptions.imageQuality ?? 85]}
|
||||
onValueChange={(v) => setOpt({ imageQuality: v[0] })}
|
||||
disabled={isConverting}
|
||||
/>
|
||||
</div>
|
||||
<SliderRow
|
||||
label="Quality"
|
||||
display={`${conversionOptions.imageQuality ?? 85}%`}
|
||||
value={conversionOptions.imageQuality ?? 85}
|
||||
min={1} max={100} step={1}
|
||||
onChange={(v) => setOpt({ imageQuality: v })}
|
||||
disabled={isConverting}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{(['imageWidth', 'imageHeight'] as const).map((key) => (
|
||||
@@ -496,11 +450,7 @@ export function FileConverter() {
|
||||
<button
|
||||
onClick={handleConvert}
|
||||
disabled={!selectedFiles.length || !outputFormat || isConverting}
|
||||
className={cn(actionBtn, 'flex-1 py-2',
|
||||
!isConverting && selectedFiles.length && outputFormat
|
||||
? 'hover:text-primary'
|
||||
: ''
|
||||
)}
|
||||
className={cn(actionBtn, 'flex-1 py-2')}
|
||||
>
|
||||
{isConverting
|
||||
? <><Loader2 className="w-3 h-3 animate-spin" />Converting…</>
|
||||
|
||||
Reference in New Issue
Block a user