valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove media conversion presets

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-25 19:20:22 +01:00
parent 4668d771c1
commit 56cdb1ae4a
4 changed files with 3 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
components/media/ConversionOptions.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
import { ChevronDown, ChevronUp, Sparkles } from 'lucide-react';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Slider } from '@/components/ui/slider';
@@ -22,14 +22,6 @@ interface ConversionOptionsProps {
disabled?: boolean;
}
interface QualityPreset {
id: string;
name: string;
description: string;
icon: string;
options: ConversionOptions;
}
export function ConversionOptionsPanel({
inputFormat,
outputFormat,
@@ -38,141 +30,8 @@ export function ConversionOptionsPanel({
disabled = false,
}: ConversionOptionsProps) {
const [isExpanded, setIsExpanded] = React.useState(false);
const [selectedPreset, setSelectedPreset] = React.useState<string | null>(null);
// Quality presets based on output format category
const getPresets = (): QualityPreset[] => {
const category = outputFormat.category;
if (category === 'video') {
return [
{
id: 'high-quality',
name: 'High Quality',
description: 'Best quality, larger file size',
icon: '',
options: {
videoBitrate: '5M',
videoCodec: outputFormat.extension === 'webm' ? 'libvpx' : 'libx264',
audioBitrate: '192k',
audioCodec: outputFormat.extension === 'webm' ? 'libvorbis' : 'aac',
},
},
{
id: 'balanced',
name: 'Balanced',
description: 'Good quality, moderate size',
icon: '',
options: {
videoBitrate: '2M',
videoCodec: outputFormat.extension === 'webm' ? 'libvpx' : 'libx264',
audioBitrate: '128k',
audioCodec: outputFormat.extension === 'webm' ? 'libvorbis' : 'aac',
},
},
{
id: 'small-file',
name: 'Small File',
description: 'Smaller size, lower quality',
icon: '',
options: {
videoBitrate: '1M',
videoCodec: outputFormat.extension === 'webm' ? 'libvpx' : 'libx264',
audioBitrate: '96k',
audioCodec: outputFormat.extension === 'webm' ? 'libvorbis' : 'aac',
},
},
{
id: 'web-optimized',
name: 'Web Optimized',
description: 'Fast loading for web',
icon: '',
options: {
videoBitrate: '1.5M',
videoCodec: 'libvpx',
audioBitrate: '128k',
audioCodec: 'libvorbis',
videoResolution: '720x-1',
},
},
];
} else if (category === 'audio') {
return [
{
id: 'high-quality',
name: 'High Quality',
description: 'Best audio quality',
icon: '',
options: {
audioBitrate: '320k',
audioCodec: outputFormat.extension === 'mp3' ? 'libmp3lame' : 'default',
},
},
{
id: 'balanced',
name: 'Balanced',
description: 'Good quality, smaller size',
icon: '',
options: {
audioBitrate: '192k',
audioCodec: outputFormat.extension === 'mp3' ? 'libmp3lame' : 'default',
},
},
{
id: 'small-file',
name: 'Small File',
description: 'Minimum file size',
icon: '',
options: {
audioBitrate: '128k',
audioCodec: outputFormat.extension === 'mp3' ? 'libmp3lame' : 'default',
},
},
];
} else if (category === 'image') {
return [
{
id: 'high-quality',
name: 'High Quality',
description: 'Best image quality',
icon: '',
options: {
imageQuality: 95,
},
},
{
id: 'balanced',
name: 'Balanced',
description: 'Good quality',
icon: '',
options: {
imageQuality: 85,
},
},
{
id: 'web-optimized',
name: 'Web Optimized',
description: 'Optimized for web',
icon: '',
options: {
imageQuality: 75,
},
},
];
}
return [];
};
const presets = getPresets();
const handlePresetClick = (preset: QualityPreset) => {
setSelectedPreset(preset.id);
onOptionsChange({ ...options, ...preset.options });
};
const handleOptionChange = (key: string, value: any) => {
setSelectedPreset(null); // Clear preset when manual change
onOptionsChange({ ...options, [key]: value });
};
@@ -407,36 +266,10 @@ export function ConversionOptionsPanel({
return (
<Card className="p-4">
{/* Presets Section */}
{presets.length > 0 && (
<div className="mb-4">
<div className="flex items-center gap-2 mb-3">
<Sparkles className="h-4 w-4 text-primary" />
<h3 className="text-sm font-semibold">Quality Presets</h3>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
{presets.map((preset) => (
<Button
key={preset.id}
onClick={() => handlePresetClick(preset)}
variant={selectedPreset === preset.id ? 'default' : 'outline'}
size="sm"
className="flex flex-col h-auto py-3 px-3 text-left items-start"
disabled={disabled}
>
{preset.icon && <span className="text-base mb-1">{preset.icon}</span>}
<span className="text-xs font-medium">{preset.name}</span>
<span className="text-xs text-muted-foreground mt-1">{preset.description}</span>
</Button>
))}
</div>
</div>
)}
{/* Advanced Options Toggle */}
<button
onClick={() => setIsExpanded(!isExpanded)}
className="w-full flex items-center justify-between text-sm font-medium text-foreground hover:text-primary transition-colors mb-3"
className="w-full flex items-center justify-between text-sm font-medium text-foreground hover:text-primary transition-colors"
disabled={disabled}
>
<span>Advanced Options</span>
@@ -445,7 +278,7 @@ export function ConversionOptionsPanel({
{/* Advanced Options Panel */}
{isExpanded && (
<div className="pt-3 border-t border-border">
<div className="pt-3 mt-3 border-t border-border">
{outputFormat.category === 'video' && renderVideoOptions()}
{outputFormat.category === 'audio' && renderAudioOptions()}
{outputFormat.category === 'image' && renderImageOptions()}