feat: add media converter app and fix compilation errors
This commit is contained in:
17
app/(app)/media/page.tsx
Normal file
17
app/(app)/media/page.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { FileConverter } from '@/components/media/FileConverter';
|
||||
|
||||
export default function MediaPage() {
|
||||
return (
|
||||
<div className="min-h-screen py-12">
|
||||
<div className="max-w-7xl mx-auto px-8 space-y-8">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold mb-2">Media Converter</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Professional browser-based media conversion for video, audio, and images
|
||||
</p>
|
||||
</div>
|
||||
<FileConverter />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,8 +10,8 @@ import {
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
|
||||
import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
|
||||
import { PaletteGrid } from '@/components/pastel/PaletteGrid';
|
||||
import { ExportMenu } from '@/components/pastel/ExportMenu';
|
||||
import { useLighten, useDarken, useSaturate, useDesaturate, useRotate } from '@/lib/pastel/api/queries';
|
||||
import { Loader2, Upload, Download } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ColorPicker } from '@/components/pastel/color/ColorPicker';
|
||||
import { ColorDisplay } from '@/components/pastel/color/ColorDisplay';
|
||||
import { ColorPicker } from '@/components/pastel/ColorPicker';
|
||||
import { ColorDisplay } from '@/components/pastel/ColorDisplay';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Select,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { ColorPicker } from '@/components/pastel/color/ColorPicker';
|
||||
import { ColorPicker } from '@/components/pastel/ColorPicker';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { getContrastRatio, hexToRgb, checkWCAGCompliance } from '@/lib/pastel/utils/color';
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
|
||||
import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
|
||||
import { PaletteGrid } from '@/components/pastel/PaletteGrid';
|
||||
import { ExportMenu } from '@/components/pastel/ExportMenu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ColorPicker } from '@/components/pastel/color/ColorPicker';
|
||||
import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
|
||||
import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
|
||||
import { ColorPicker } from '@/components/pastel/ColorPicker';
|
||||
import { PaletteGrid } from '@/components/pastel/PaletteGrid';
|
||||
import { ExportMenu } from '@/components/pastel/ExportMenu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useGenerateGradient } from '@/lib/pastel/api/queries';
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ColorPicker } from '@/components/pastel/color/ColorPicker';
|
||||
import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
|
||||
import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
|
||||
import { ColorPicker } from '@/components/pastel/ColorPicker';
|
||||
import { PaletteGrid } from '@/components/pastel/PaletteGrid';
|
||||
import { ExportMenu } from '@/components/pastel/ExportMenu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Select,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo } from 'react';
|
||||
import { ColorSwatch } from '@/components/pastel/color/ColorSwatch';
|
||||
import { ColorSwatch } from '@/components/pastel/ColorSwatch';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
|
||||
import { useState, useEffect, Suspense } from 'react';
|
||||
import { useSearchParams, useRouter } from 'next/navigation';
|
||||
import { ColorPicker } from '@/components/pastel/color/ColorPicker';
|
||||
import { ColorDisplay } from '@/components/pastel/color/ColorDisplay';
|
||||
import { ColorInfo } from '@/components/pastel/color/ColorInfo';
|
||||
import { ManipulationPanel } from '@/components/pastel/tools/ManipulationPanel';
|
||||
import { ColorPicker } from '@/components/pastel/ColorPicker';
|
||||
import { ColorDisplay } from '@/components/pastel/ColorDisplay';
|
||||
import { ColorInfo } from '@/components/pastel/ColorInfo';
|
||||
import { ManipulationPanel } from '@/components/pastel/ManipulationPanel';
|
||||
import { useColorInfo } from '@/lib/pastel/api/queries';
|
||||
import { useColorHistory } from '@/lib/pastel/stores/historyStore';
|
||||
import { Loader2, Share2, History, X } from 'lucide-react';
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ColorPicker } from '@/components/pastel/color/ColorPicker';
|
||||
import { ColorDisplay } from '@/components/pastel/color/ColorDisplay';
|
||||
import { ColorPicker } from '@/components/pastel/ColorPicker';
|
||||
import { ColorDisplay } from '@/components/pastel/ColorDisplay';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useTextColor } from '@/lib/pastel/api/queries';
|
||||
import { Loader2, Palette, Plus, X, CheckCircle2, XCircle } from 'lucide-react';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import MainConverter from '@/components/units/converter/MainConverter';
|
||||
import MainConverter from '@/components/units/MainConverter';
|
||||
|
||||
export default function UnitsPage() {
|
||||
return (
|
||||
|
||||
@@ -219,6 +219,10 @@ html {
|
||||
background: linear-gradient(135deg, #eab308 0%, #f59e0b 100%);
|
||||
}
|
||||
|
||||
@utility gradient-green-teal {
|
||||
background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
|
||||
}
|
||||
|
||||
@utility gradient-brand {
|
||||
background: linear-gradient(to right, #a78bfa, #f472b6, #22d3ee);
|
||||
}
|
||||
|
||||
@@ -50,6 +50,19 @@ const tools = [
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Media',
|
||||
description: 'Modern browser-based file converter powered by WebAssembly. Convert videos, images, and audio locally without server uploads. Privacy-first with no file size limits.',
|
||||
url: '/media',
|
||||
gradient: 'gradient-green-teal',
|
||||
accentColor: '#10b981',
|
||||
badges: ['Open Source', 'Converter', 'Free'],
|
||||
icon: (
|
||||
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function ToolsGrid() {
|
||||
@@ -73,7 +86,7 @@ export default function ToolsGrid() {
|
||||
</motion.div>
|
||||
|
||||
{/* Tools grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{tools.map((tool, index) => (
|
||||
<ToolCard
|
||||
key={tool.title}
|
||||
|
||||
@@ -55,6 +55,13 @@ const FigletIcon = (props: any) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
|
||||
const MediaIcon = (props: any) => (
|
||||
<svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const navigation: NavGroup[] = [
|
||||
{
|
||||
label: 'Toolkit',
|
||||
@@ -84,6 +91,11 @@ const navigation: NavGroup[] = [
|
||||
{ title: 'Batch Operations', href: '/pastel/batch' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Media Converter',
|
||||
href: '/media',
|
||||
icon: <MediaIcon className="h-4 w-4" />
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
173
components/media/ConversionHistory.tsx
Normal file
173
components/media/ConversionHistory.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { History, Trash2, ArrowRight, Clock } from 'lucide-react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { formatFileSize } from '@/lib/media/utils/fileUtils';
|
||||
import { getHistory, clearHistory, removeHistoryItem } from '@/lib/media/storage/history';
|
||||
import type { ConversionHistoryItem } from '@/types/media';
|
||||
|
||||
export function ConversionHistory() {
|
||||
const [history, setHistory] = React.useState<ConversionHistoryItem[]>([]);
|
||||
|
||||
// Load history on mount and listen for updates
|
||||
React.useEffect(() => {
|
||||
const loadHistory = () => {
|
||||
const items = getHistory();
|
||||
setHistory(items);
|
||||
};
|
||||
|
||||
loadHistory();
|
||||
|
||||
// Listen for storage changes (e.g., from other tabs)
|
||||
const handleStorageChange = (e: StorageEvent) => {
|
||||
if (e.key === 'convert-ui-history') {
|
||||
loadHistory();
|
||||
}
|
||||
};
|
||||
|
||||
// Listen for custom event (same-page updates)
|
||||
const handleHistoryUpdate = () => {
|
||||
loadHistory();
|
||||
};
|
||||
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
window.addEventListener('conversionHistoryUpdated', handleHistoryUpdate);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('storage', handleStorageChange);
|
||||
window.removeEventListener('conversionHistoryUpdated', handleHistoryUpdate);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleClearHistory = () => {
|
||||
if (confirm('Are you sure you want to clear all conversion history?')) {
|
||||
clearHistory();
|
||||
setHistory([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveItem = (id: string) => {
|
||||
removeHistoryItem(id);
|
||||
setHistory((prev) => prev.filter((item) => item.id !== id));
|
||||
};
|
||||
|
||||
const formatTimestamp = (timestamp: number) => {
|
||||
const date = new Date(timestamp);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
const diffHours = Math.floor(diffMs / 3600000);
|
||||
const diffDays = Math.floor(diffMs / 86400000);
|
||||
|
||||
if (diffMins < 1) return 'Just now';
|
||||
if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`;
|
||||
if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
|
||||
if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
|
||||
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
if (history.length === 0) {
|
||||
return (
|
||||
<div className="w-full max-w-4xl mx-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<History className="h-5 w-5" />
|
||||
Conversion History
|
||||
</CardTitle>
|
||||
<CardDescription>Your recent conversions will appear here</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<History className="h-12 w-12 mx-auto mb-4 opacity-50" />
|
||||
<p>No conversion history yet</p>
|
||||
<p className="text-sm mt-1">Convert some files to see them here</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-4xl mx-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<History className="h-5 w-5" />
|
||||
Conversion History
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Recent conversions ({history.length} item{history.length > 1 ? 's' : ''})
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={handleClearHistory}>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Clear All
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{history.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="border border-border rounded-lg p-4 hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* File conversion info */}
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-sm font-medium text-foreground truncate">
|
||||
{item.inputFileName}
|
||||
</span>
|
||||
<ArrowRight className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
|
||||
<span className="text-sm font-medium text-foreground truncate">
|
||||
{item.outputFileName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Format conversion */}
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
|
||||
<span className="px-2 py-0.5 bg-muted rounded">
|
||||
{item.inputFormat}
|
||||
</span>
|
||||
<ArrowRight className="h-3 w-3" />
|
||||
<span className="px-2 py-0.5 bg-muted rounded">
|
||||
{item.outputFormat}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>{formatFileSize(item.fileSize)}</span>
|
||||
</div>
|
||||
|
||||
{/* Timestamp */}
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<Clock className="h-3 w-3" />
|
||||
<span>{formatTimestamp(item.timestamp)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Remove button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleRemoveItem(item.id)}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<span className="sr-only">Remove</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
456
components/media/ConversionOptions.tsx
Normal file
456
components/media/ConversionOptions.tsx
Normal file
@@ -0,0 +1,456 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { ChevronDown, ChevronUp, Sparkles } from 'lucide-react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
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;
|
||||
}
|
||||
|
||||
interface QualityPreset {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
options: ConversionOptions;
|
||||
}
|
||||
|
||||
export function ConversionOptionsPanel({
|
||||
inputFormat,
|
||||
outputFormat,
|
||||
options,
|
||||
onOptionsChange,
|
||||
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 });
|
||||
};
|
||||
|
||||
const renderVideoOptions = () => (
|
||||
<div className="space-y-4">
|
||||
{/* Video Codec */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground block">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 className="text-sm font-medium text-foreground">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 className="text-sm font-medium text-foreground block">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 className="text-sm font-medium text-foreground block">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 className="text-sm font-medium text-foreground">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 className="text-sm font-medium text-foreground block">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 className="text-sm font-medium text-foreground">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 className="text-sm font-medium text-foreground block">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 className="text-sm font-medium text-foreground block">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 className="text-sm font-medium text-foreground">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="text-sm font-medium text-foreground mb-2 block">Width (px)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={options.imageWidth || ''}
|
||||
onChange={(e) => handleOptionChange('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={disabled}
|
||||
/>
|
||||
<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={options.imageHeight || ''}
|
||||
onChange={(e) => handleOptionChange('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={disabled}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">Leave empty to maintain aspect ratio</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
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}
|
||||
>
|
||||
<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"
|
||||
disabled={disabled}
|
||||
>
|
||||
<span>Advanced Options</span>
|
||||
{isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</button>
|
||||
|
||||
{/* Advanced Options Panel */}
|
||||
{isExpanded && (
|
||||
<div className="pt-3 border-t border-border">
|
||||
{outputFormat.category === 'video' && renderVideoOptions()}
|
||||
{outputFormat.category === 'audio' && renderAudioOptions()}
|
||||
{outputFormat.category === 'image' && renderImageOptions()}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
294
components/media/ConversionPreview.tsx
Normal file
294
components/media/ConversionPreview.tsx
Normal file
@@ -0,0 +1,294 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Download, CheckCircle, XCircle, Loader2, Clock, TrendingUp, FileCheck2, ArrowRight, RefreshCw } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { downloadBlob, formatFileSize, generateOutputFilename } from '@/lib/media/utils/fileUtils';
|
||||
import type { ConversionJob } from '@/types/media';
|
||||
|
||||
export interface ConversionPreviewProps {
|
||||
job: ConversionJob;
|
||||
onDownload?: () => void;
|
||||
onRetry?: () => void;
|
||||
}
|
||||
|
||||
export function ConversionPreview({ job, onDownload, onRetry }: ConversionPreviewProps) {
|
||||
const [previewUrl, setPreviewUrl] = React.useState<string | null>(null);
|
||||
const [elapsedTime, setElapsedTime] = React.useState(0);
|
||||
const [estimatedTimeRemaining, setEstimatedTimeRemaining] = React.useState<number | null>(null);
|
||||
|
||||
// Timer for elapsed time and estimation
|
||||
React.useEffect(() => {
|
||||
if (job.status === 'processing' || job.status === 'loading') {
|
||||
const interval = setInterval(() => {
|
||||
if (job.startTime) {
|
||||
const elapsed = Date.now() - job.startTime;
|
||||
setElapsedTime(elapsed);
|
||||
|
||||
// Estimate time remaining based on progress
|
||||
if (job.progress > 5 && job.progress < 100) {
|
||||
const progressRate = job.progress / elapsed;
|
||||
const remainingProgress = 100 - job.progress;
|
||||
const estimated = remainingProgress / progressRate;
|
||||
setEstimatedTimeRemaining(estimated);
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
} else {
|
||||
setEstimatedTimeRemaining(null);
|
||||
}
|
||||
}, [job.status, job.startTime, job.progress]);
|
||||
|
||||
// Create preview URL for result
|
||||
React.useEffect(() => {
|
||||
if (job.result && job.status === 'completed') {
|
||||
console.log('[Preview] Creating object URL for blob');
|
||||
const url = URL.createObjectURL(job.result);
|
||||
setPreviewUrl(url);
|
||||
console.log('[Preview] Object URL created:', url);
|
||||
|
||||
return () => {
|
||||
console.log('[Preview] Revoking object URL:', url);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
} else {
|
||||
setPreviewUrl(null);
|
||||
}
|
||||
}, [job.result, job.status]);
|
||||
|
||||
const handleDownload = () => {
|
||||
if (job.result) {
|
||||
const filename = generateOutputFilename(job.inputFile.name, job.outputFormat.extension);
|
||||
downloadBlob(job.result, filename);
|
||||
onDownload?.();
|
||||
}
|
||||
};
|
||||
|
||||
const renderPreview = () => {
|
||||
if (!previewUrl || !job.result) return null;
|
||||
|
||||
const category = job.outputFormat.category;
|
||||
|
||||
// Log blob details for debugging
|
||||
console.log('[Preview] Blob details:', {
|
||||
size: job.result.size,
|
||||
type: job.result.type,
|
||||
previewUrl,
|
||||
outputFormat: job.outputFormat.extension,
|
||||
});
|
||||
|
||||
switch (category) {
|
||||
case 'image':
|
||||
return (
|
||||
<div className="mt-4 rounded-lg overflow-hidden bg-muted/30 flex items-center justify-center p-4">
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt="Converted image preview"
|
||||
className="max-w-full max-h-64 object-contain"
|
||||
onError={(e) => {
|
||||
console.error('[Preview] Image failed to load:', {
|
||||
src: previewUrl,
|
||||
blobSize: job.result?.size,
|
||||
blobType: job.result?.type,
|
||||
error: e,
|
||||
});
|
||||
}}
|
||||
onLoad={() => {
|
||||
console.log('[Preview] Image loaded successfully');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'video':
|
||||
return (
|
||||
<div className="mt-4 rounded-lg overflow-hidden bg-muted/30">
|
||||
<video src={previewUrl} controls className="w-full max-h-64">
|
||||
Your browser does not support video playback.
|
||||
</video>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'audio':
|
||||
return (
|
||||
<div className="mt-4 rounded-lg overflow-hidden bg-muted/30 p-4">
|
||||
<audio src={previewUrl} controls className="w-full">
|
||||
Your browser does not support audio playback.
|
||||
</audio>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (ms: number) => {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
if (seconds < 60) return `${seconds}s`;
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
return `${minutes}m ${remainingSeconds}s`;
|
||||
};
|
||||
|
||||
const renderStatus = () => {
|
||||
switch (job.status) {
|
||||
case 'loading':
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 text-info">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span className="text-sm font-medium">Loading WASM converter...</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Clock className="h-3.5 w-3.5" />
|
||||
<span>Elapsed: {formatTime(elapsedTime)}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'processing':
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-info">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span className="text-sm font-medium">Converting...</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{job.progress}%</span>
|
||||
</div>
|
||||
<Progress value={job.progress} />
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="h-3.5 w-3.5" />
|
||||
<span>Elapsed: {formatTime(elapsedTime)}</span>
|
||||
</div>
|
||||
{estimatedTimeRemaining && (
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="h-3.5 w-3.5" />
|
||||
<span>~{formatTime(estimatedTimeRemaining)} remaining</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'completed':
|
||||
const inputSize = job.inputFile.size;
|
||||
const outputSize = job.result?.size || 0;
|
||||
const sizeReduction = inputSize > 0 ? ((inputSize - outputSize) / inputSize) * 100 : 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 text-success">
|
||||
<CheckCircle className="h-5 w-5" />
|
||||
<span className="text-sm font-medium">Conversion complete!</span>
|
||||
</div>
|
||||
|
||||
{/* File size comparison */}
|
||||
<div className="bg-muted/50 rounded-lg p-3 space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileCheck2 className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">Input:</span>
|
||||
</div>
|
||||
<span className="font-medium">{formatFileSize(inputSize)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center py-1">
|
||||
<ArrowRight className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileCheck2 className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">Output:</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{formatFileSize(outputSize)}</span>
|
||||
{Math.abs(sizeReduction) > 1 && (
|
||||
<span className={cn(
|
||||
"text-xs px-2 py-0.5 rounded-full",
|
||||
sizeReduction > 0
|
||||
? "bg-success/10 text-success"
|
||||
: "bg-info/10 text-info"
|
||||
)}>
|
||||
{sizeReduction > 0 ? '-' : '+'}{Math.abs(sizeReduction).toFixed(0)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'error':
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-destructive">
|
||||
<XCircle className="h-5 w-5" />
|
||||
<span className="text-sm font-medium">Conversion failed</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
if (job.status === 'pending') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="animate-fadeIn">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Conversion Status</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{/* Status */}
|
||||
{renderStatus()}
|
||||
|
||||
{/* Error message */}
|
||||
{job.error && (
|
||||
<div className="bg-destructive/10 border border-destructive/20 rounded-md p-3">
|
||||
<p className="text-sm text-destructive">{job.error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Retry button */}
|
||||
{job.status === 'error' && onRetry && (
|
||||
<Button onClick={onRetry} variant="outline" className="w-full gap-2">
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
Retry Conversion
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Preview */}
|
||||
{job.status === 'completed' && renderPreview()}
|
||||
|
||||
{/* Download button */}
|
||||
{job.status === 'completed' && job.result && (
|
||||
<Button onClick={handleDownload} className="w-full gap-2">
|
||||
<Download className="h-4 w-4" />
|
||||
Download{' '}
|
||||
{generateOutputFilename(job.inputFile.name, job.outputFormat.extension)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Duration */}
|
||||
{job.status === 'completed' && job.startTime && job.endTime && (
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
Completed in {((job.endTime - job.startTime) / 1000).toFixed(2)}s
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
587
components/media/FileConverter.tsx
Normal file
587
components/media/FileConverter.tsx
Normal file
@@ -0,0 +1,587 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { ArrowRight, ArrowDown, Keyboard } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { FileUpload } from './FileUpload';
|
||||
import { FormatSelector } from './FormatSelector';
|
||||
import { ConversionPreview } from './ConversionPreview';
|
||||
import { ConversionOptionsPanel } from './ConversionOptions';
|
||||
import { FileInfo } from './FileInfo';
|
||||
import { FormatPresets } from './FormatPresets';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
SUPPORTED_FORMATS,
|
||||
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 { getPresetById, type FormatPreset } from '@/lib/media/utils/formatPresets';
|
||||
import { useKeyboardShortcuts, type KeyboardShortcut } from '@/lib/media/hooks/useKeyboardShortcuts';
|
||||
import { KeyboardShortcutsModal } from '@/components/ui/KeyboardShortcutsModal';
|
||||
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 [showShortcutsModal, setShowShortcutsModal] = React.useState(false);
|
||||
|
||||
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 handlePresetSelect = (preset: FormatPreset) => {
|
||||
// Find the output format that matches the preset
|
||||
const format = compatibleFormats.find(f => f.extension === preset.outputFormat);
|
||||
|
||||
if (format) {
|
||||
setOutputFormat(format);
|
||||
setConversionOptions(preset.options);
|
||||
toast.success(`Applied ${preset.name} preset`);
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
// Define keyboard shortcuts
|
||||
const shortcuts: KeyboardShortcut[] = [
|
||||
{
|
||||
key: 'o',
|
||||
ctrl: true,
|
||||
description: 'Open file dialog',
|
||||
action: () => {
|
||||
if (!isConverting) {
|
||||
fileInputRef.current?.click();
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'Enter',
|
||||
ctrl: true,
|
||||
description: 'Start conversion',
|
||||
action: () => {
|
||||
if (!isConvertDisabled) {
|
||||
handleConvert();
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 's',
|
||||
ctrl: true,
|
||||
description: 'Download results',
|
||||
action: () => {
|
||||
if (completedCount > 0) {
|
||||
handleDownloadAll();
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'r',
|
||||
ctrl: true,
|
||||
description: 'Reset converter',
|
||||
action: () => {
|
||||
if (!isConverting) {
|
||||
handleReset();
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
key: '/',
|
||||
ctrl: true,
|
||||
description: 'Show keyboard shortcuts',
|
||||
action: () => setShowShortcutsModal(true),
|
||||
},
|
||||
{
|
||||
key: 'Escape',
|
||||
description: 'Close shortcuts modal',
|
||||
action: () => setShowShortcutsModal(false),
|
||||
},
|
||||
{
|
||||
key: '?',
|
||||
description: 'Show keyboard shortcuts',
|
||||
action: () => setShowShortcutsModal(true),
|
||||
},
|
||||
];
|
||||
|
||||
// Enable keyboard shortcuts
|
||||
useKeyboardShortcuts(shortcuts, !showShortcutsModal);
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-4xl mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>File Converter</CardTitle>
|
||||
<CardDescription>
|
||||
Convert videos, audio, and images directly in your browser using WebAssembly
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<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 Presets */}
|
||||
{inputFormat && (
|
||||
<FormatPresets
|
||||
inputFormat={inputFormat}
|
||||
onPresetSelect={handlePresetSelect}
|
||||
disabled={isConverting}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 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}
|
||||
disabled={isConverting}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Convert button */}
|
||||
{inputFormat && outputFormat && (
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
onClick={handleConvert}
|
||||
disabled={isConvertDisabled}
|
||||
className="flex-1"
|
||||
size="lg"
|
||||
>
|
||||
{isConverting
|
||||
? 'Converting...'
|
||||
: `Convert ${selectedFiles.length} File${selectedFiles.length > 1 ? 's' : ''}`}
|
||||
</Button>
|
||||
<Button onClick={handleReset} variant="outline" size="lg">
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
|
||||
{/* Conversion previews */}
|
||||
{conversionJobs.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
{conversionJobs.map((job) => (
|
||||
<ConversionPreview
|
||||
key={job.id}
|
||||
job={job}
|
||||
onRetry={() => handleRetry(job.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Keyboard Shortcuts Button */}
|
||||
<Button
|
||||
onClick={() => setShowShortcutsModal(true)}
|
||||
className="fixed bottom-6 right-6 rounded-full w-12 h-12 p-0 shadow-lg"
|
||||
title="Keyboard Shortcuts (Ctrl+/)"
|
||||
>
|
||||
<Keyboard className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
{/* Keyboard Shortcuts Modal */}
|
||||
<KeyboardShortcutsModal
|
||||
shortcuts={shortcuts}
|
||||
isOpen={showShortcutsModal}
|
||||
onClose={() => setShowShortcutsModal(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
210
components/media/FileInfo.tsx
Normal file
210
components/media/FileInfo.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
178
components/media/FileUpload.tsx
Normal file
178
components/media/FileUpload.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Upload, X } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { formatFileSize } from '@/lib/media/utils/fileUtils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export interface FileUploadProps {
|
||||
onFileSelect: (files: File[]) => void;
|
||||
onFileRemove: (index: number) => void;
|
||||
selectedFiles?: File[];
|
||||
accept?: string;
|
||||
maxSizeMB?: number;
|
||||
disabled?: boolean;
|
||||
inputRef?: React.RefObject<HTMLInputElement | null>;
|
||||
}
|
||||
|
||||
export function FileUpload({
|
||||
onFileSelect,
|
||||
onFileRemove,
|
||||
selectedFiles = [],
|
||||
accept,
|
||||
maxSizeMB = 500,
|
||||
disabled = false,
|
||||
inputRef,
|
||||
}: FileUploadProps) {
|
||||
const [isDragging, setIsDragging] = React.useState(false);
|
||||
const fileInputRef = inputRef || React.useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleDragEnter = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!disabled) {
|
||||
setIsDragging(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragLeave = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
|
||||
if (disabled) return;
|
||||
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
if (files.length > 0) {
|
||||
handleFiles(files);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = Array.from(e.target.files || []);
|
||||
if (files.length > 0) {
|
||||
handleFiles(files);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFiles = (files: File[]) => {
|
||||
// Check file sizes
|
||||
const maxBytes = maxSizeMB * 1024 * 1024;
|
||||
const validFiles = files.filter(file => {
|
||||
if (file.size > maxBytes) {
|
||||
alert(`${file.name} exceeds ${maxSizeMB}MB limit and will be skipped.`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
if (validFiles.length > 0) {
|
||||
onFileSelect(validFiles);
|
||||
}
|
||||
|
||||
// Reset input
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (!disabled) {
|
||||
fileInputRef.current?.click();
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = (index: number) => (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onFileRemove(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-3">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
accept={accept}
|
||||
onChange={handleFileInput}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
{selectedFiles.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{selectedFiles.map((file, index) => (
|
||||
<div key={`${file.name}-${index}`} className="border-2 border-border rounded-lg p-4 bg-card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">{file.name}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{formatFileSize(file.size)}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleRemove(index)}
|
||||
disabled={disabled}
|
||||
className="ml-4"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Remove file</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Add more files button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
className="w-full"
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
Add More Files
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
onClick={handleClick}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
className={cn(
|
||||
'border-2 border-dashed rounded-lg p-12 text-center cursor-pointer transition-colors',
|
||||
'hover:border-primary hover:bg-primary/5',
|
||||
{
|
||||
'border-primary bg-primary/10': isDragging,
|
||||
'border-border bg-background': !isDragging,
|
||||
'opacity-50 cursor-not-allowed': disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Upload className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
|
||||
<p className="text-sm font-medium text-foreground mb-1">
|
||||
Drop your files here or click to browse
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Maximum file size: {maxSizeMB}MB per file
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
67
components/media/FormatPresets.tsx
Normal file
67
components/media/FormatPresets.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { getPresetsByCategory, type FormatPreset } from '@/lib/media/utils/formatPresets';
|
||||
import type { ConversionFormat } from '@/types/media';
|
||||
|
||||
interface FormatPresetsProps {
|
||||
inputFormat: ConversionFormat;
|
||||
onPresetSelect: (preset: FormatPreset) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function FormatPresets({ inputFormat, onPresetSelect, disabled = false }: FormatPresetsProps) {
|
||||
const [selectedPresetId, setSelectedPresetId] = React.useState<string | null>(null);
|
||||
|
||||
// Get presets for the input format's category
|
||||
const presets = getPresetsByCategory(inputFormat.category);
|
||||
|
||||
if (presets.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handlePresetClick = (preset: FormatPreset) => {
|
||||
setSelectedPresetId(preset.id);
|
||||
onPresetSelect(preset);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Sparkles className="h-5 w-5 text-primary" />
|
||||
<h3 className="text-sm font-semibold">Quick Presets</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{presets.map((preset) => (
|
||||
<Button
|
||||
key={preset.id}
|
||||
onClick={() => handlePresetClick(preset)}
|
||||
variant={selectedPresetId === preset.id ? 'default' : 'outline'}
|
||||
className={cn(
|
||||
'h-auto py-4 px-4 flex flex-col items-start text-left gap-2',
|
||||
selectedPresetId === preset.id && 'ring-2 ring-primary ring-offset-2'
|
||||
)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<span className="text-2xl">{preset.icon}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-semibold text-sm">{preset.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground w-full">{preset.description}</p>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-3 text-xs text-muted-foreground">
|
||||
Select a preset to automatically configure optimal settings for your use case
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
136
components/media/FormatSelector.tsx
Normal file
136
components/media/FormatSelector.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Fuse from 'fuse.js';
|
||||
import { Search } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import type { ConversionFormat } from '@/types/media';
|
||||
|
||||
export interface FormatSelectorProps {
|
||||
formats: ConversionFormat[];
|
||||
selectedFormat?: ConversionFormat;
|
||||
onFormatSelect: (format: ConversionFormat) => void;
|
||||
label?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function FormatSelector({
|
||||
formats,
|
||||
selectedFormat,
|
||||
onFormatSelect,
|
||||
label = 'Select format',
|
||||
disabled = false,
|
||||
}: FormatSelectorProps) {
|
||||
const [searchQuery, setSearchQuery] = React.useState('');
|
||||
const [filteredFormats, setFilteredFormats] = React.useState<ConversionFormat[]>(formats);
|
||||
|
||||
// Set up Fuse.js for fuzzy search
|
||||
const fuse = React.useMemo(() => {
|
||||
return new Fuse(formats, {
|
||||
keys: ['name', 'extension', 'description'],
|
||||
threshold: 0.3,
|
||||
includeScore: true,
|
||||
});
|
||||
}, [formats]);
|
||||
|
||||
// Filter formats based on search query
|
||||
React.useEffect(() => {
|
||||
if (!searchQuery.trim()) {
|
||||
setFilteredFormats(formats);
|
||||
return;
|
||||
}
|
||||
|
||||
const results = fuse.search(searchQuery);
|
||||
setFilteredFormats(results.map((result) => result.item));
|
||||
}, [searchQuery, formats, fuse]);
|
||||
|
||||
// Group formats by category
|
||||
const groupedFormats = React.useMemo(() => {
|
||||
const groups: Record<string, ConversionFormat[]> = {};
|
||||
|
||||
filteredFormats.forEach((format) => {
|
||||
if (!groups[format.category]) {
|
||||
groups[format.category] = [];
|
||||
}
|
||||
groups[format.category].push(format);
|
||||
});
|
||||
|
||||
return groups;
|
||||
}, [filteredFormats]);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<label className="text-sm font-medium text-foreground mb-2 block">{label}</label>
|
||||
|
||||
{/* Search input */}
|
||||
<div className="relative mb-3">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search formats..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
disabled={disabled}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Format list */}
|
||||
<Card className="max-h-64 overflow-y-auto custom-scrollbar">
|
||||
{Object.entries(groupedFormats).length === 0 ? (
|
||||
<div className="p-4 text-center text-sm text-muted-foreground">
|
||||
No formats found matching "{searchQuery}"
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-2">
|
||||
{Object.entries(groupedFormats).map(([category, categoryFormats]) => (
|
||||
<div key={category} className="mb-3 last:mb-0">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2 px-2">
|
||||
{category}
|
||||
</h3>
|
||||
<div className="space-y-1">
|
||||
{categoryFormats.map((format) => (
|
||||
<button
|
||||
key={format.id}
|
||||
onClick={() => !disabled && onFormatSelect(format)}
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
'w-full text-left px-3 py-2 rounded-md transition-colors',
|
||||
'hover:bg-accent hover:text-accent-foreground',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
{
|
||||
'bg-primary text-primary-foreground hover:bg-primary/90':
|
||||
selectedFormat?.id === format.id,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium">{format.name}</p>
|
||||
{format.description && (
|
||||
<p className="text-xs opacity-75 mt-0.5">{format.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs font-mono opacity-75">.{format.extension}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Selected format display */}
|
||||
{selectedFormat && (
|
||||
<div className="mt-2 text-xs text-muted-foreground">
|
||||
Selected: <span className="font-medium text-foreground">{selectedFormat.name}</span> (.
|
||||
{selectedFormat.extension})
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { ThemeToggle } from './ThemeToggle';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { Palette } from 'lucide-react';
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Playground', href: '/pastel' },
|
||||
{ name: 'Harmony', href: '/pastel/harmony' },
|
||||
{ name: 'Contrast', href: '/pastel/contrast' },
|
||||
{ name: 'Names', href: '/pastel/names' },
|
||||
{ name: 'Batch', href: '/pastel/batch' },
|
||||
];
|
||||
|
||||
export function Navbar() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="max-w-7xl mx-auto px-8">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center space-x-2 font-bold text-xl">
|
||||
<Palette className="h-6 w-6 text-primary" />
|
||||
<span className="bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-clip-text text-transparent">
|
||||
Pastel UI
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex items-center space-x-1">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
'px-3 py-2 rounded-md text-sm font-medium transition-colors',
|
||||
pathname === item.href
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right side */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
<div className="md:hidden pb-3 space-y-1">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
'block px-3 py-2 rounded-md text-sm font-medium transition-colors',
|
||||
pathname === item.href
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Moon, Sun } from 'lucide-react';
|
||||
import { useTheme } from '@/components/providers/ThemeProvider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { theme, setTheme, resolvedTheme } = useTheme();
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={toggleTheme}
|
||||
aria-label={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}
|
||||
>
|
||||
{resolvedTheme === 'dark' ? (
|
||||
<Sun className="h-5 w-5" />
|
||||
) : (
|
||||
<Moon className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { Toaster } from 'sonner';
|
||||
import { useState } from 'react';
|
||||
import { ThemeProvider } from './ThemeProvider';
|
||||
|
||||
export function Providers({ children }: { children: React.ReactNode }) {
|
||||
const [queryClient] = useState(
|
||||
() =>
|
||||
new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 60 * 1000, // 1 minute
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{children}
|
||||
<Toaster position="top-right" richColors />
|
||||
</QueryClientProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { createContext, useContext, useEffect, useState } from 'react';
|
||||
|
||||
type Theme = 'light' | 'dark' | 'system';
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme;
|
||||
setTheme: (theme: Theme) => void;
|
||||
resolvedTheme: 'light' | 'dark';
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||
|
||||
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
const [theme, setTheme] = useState<Theme>('system');
|
||||
const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');
|
||||
|
||||
useEffect(() => {
|
||||
// Load theme from localStorage
|
||||
const stored = localStorage.getItem('theme') as Theme | null;
|
||||
if (stored) {
|
||||
setTheme(stored);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement;
|
||||
|
||||
// Remove previous theme classes
|
||||
root.classList.remove('light', 'dark');
|
||||
|
||||
if (theme === 'system') {
|
||||
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: 'light';
|
||||
root.classList.add(systemTheme);
|
||||
setResolvedTheme(systemTheme);
|
||||
} else {
|
||||
root.classList.add(theme);
|
||||
setResolvedTheme(theme);
|
||||
}
|
||||
|
||||
// Save to localStorage
|
||||
localStorage.setItem('theme', theme);
|
||||
}, [theme]);
|
||||
|
||||
// Listen for system theme changes
|
||||
useEffect(() => {
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
const handleChange = () => {
|
||||
if (theme === 'system') {
|
||||
const systemTheme = mediaQuery.matches ? 'dark' : 'light';
|
||||
setResolvedTheme(systemTheme);
|
||||
window.document.documentElement.classList.remove('light', 'dark');
|
||||
window.document.documentElement.classList.add(systemTheme);
|
||||
}
|
||||
};
|
||||
|
||||
mediaQuery.addEventListener('change', handleChange);
|
||||
return () => mediaQuery.removeEventListener('change', handleChange);
|
||||
}, [theme]);
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
const context = useContext(ThemeContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useTheme must be used within a ThemeProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
61
components/ui/KeyboardShortcutsModal.tsx
Normal file
61
components/ui/KeyboardShortcutsModal.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
import { formatShortcut, type KeyboardShortcut } from '@/lib/media/hooks/useKeyboardShortcuts';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface KeyboardShortcutsModalProps {
|
||||
shortcuts: KeyboardShortcut[];
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function KeyboardShortcutsModal({ shortcuts, isOpen, onClose }: KeyboardShortcutsModalProps) {
|
||||
React.useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<Card className="relative w-full max-w-md shadow-2xl animate-in zoom-in-95 duration-200">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-xl font-bold">Keyboard Shortcuts</CardTitle>
|
||||
<Button variant="ghost" size="icon" onClick={onClose} className="rounded-full">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-4">
|
||||
<div className="space-y-4">
|
||||
{shortcuts.map((shortcut, index) => (
|
||||
<div key={index} className="flex items-center justify-between gap-4">
|
||||
<span className="text-sm text-muted-foreground">{shortcut.description}</span>
|
||||
<kbd className="pointer-events-none inline-flex h-6 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
|
||||
{formatShortcut(shortcut)}
|
||||
</kbd>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-6 flex justify-end">
|
||||
<Button onClick={onClose}>Close</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
31
components/ui/progress.tsx
Normal file
31
components/ui/progress.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Progress as ProgressPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils/index"
|
||||
|
||||
function Progress({
|
||||
className,
|
||||
value,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
||||
return (
|
||||
<ProgressPrimitive.Root
|
||||
data-slot="progress"
|
||||
className={cn(
|
||||
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
data-slot="progress-indicator"
|
||||
className="bg-primary h-full w-full flex-1 transition-all"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Progress }
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
} from '@/components/ui/select';
|
||||
import SearchUnits from './SearchUnits';
|
||||
import VisualComparison from './VisualComparison';
|
||||
import CommandPalette from '@/components/units/ui/CommandPalette';
|
||||
|
||||
import {
|
||||
getAllMeasures,
|
||||
getUnitsForMeasure,
|
||||
@@ -118,11 +118,6 @@ export default function MainConverter() {
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-8">
|
||||
{/* Command Palette */}
|
||||
<CommandPalette
|
||||
onSelectMeasure={setSelectedMeasure}
|
||||
onSelectUnit={handleSearchSelect}
|
||||
/>
|
||||
|
||||
{/* Quick Access Row */}
|
||||
<div className="flex flex-col md:flex-row md:items-center gap-4 justify-between bg-card p-4 rounded-lg border">
|
||||
@@ -1,77 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { createContext, useContext, useEffect, useState } from 'react';
|
||||
|
||||
type Theme = 'dark' | 'light' | 'system';
|
||||
|
||||
interface ThemeProviderProps {
|
||||
children: React.ReactNode;
|
||||
defaultTheme?: Theme;
|
||||
storageKey?: string;
|
||||
}
|
||||
|
||||
interface ThemeProviderState {
|
||||
theme: Theme;
|
||||
setTheme: (theme: Theme) => void;
|
||||
}
|
||||
|
||||
const ThemeProviderContext = createContext<ThemeProviderState | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
defaultTheme = 'system',
|
||||
storageKey = 'units-ui-theme',
|
||||
}: ThemeProviderProps) {
|
||||
const [theme, setTheme] = useState<Theme>(defaultTheme);
|
||||
|
||||
useEffect(() => {
|
||||
// Load theme from localStorage
|
||||
const stored = localStorage.getItem(storageKey) as Theme | null;
|
||||
if (stored) {
|
||||
setTheme(stored);
|
||||
}
|
||||
}, [storageKey]);
|
||||
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement;
|
||||
|
||||
root.classList.remove('light', 'dark');
|
||||
|
||||
if (theme === 'system') {
|
||||
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
.matches
|
||||
? 'dark'
|
||||
: 'light';
|
||||
|
||||
root.classList.add(systemTheme);
|
||||
return;
|
||||
}
|
||||
|
||||
root.classList.add(theme);
|
||||
}, [theme]);
|
||||
|
||||
const value = {
|
||||
theme,
|
||||
setTheme: (theme: Theme) => {
|
||||
localStorage.setItem(storageKey, theme);
|
||||
setTheme(theme);
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProviderContext.Provider value={value}>
|
||||
{children}
|
||||
</ThemeProviderContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export const useTheme = () => {
|
||||
const context = useContext(ThemeProviderContext);
|
||||
|
||||
if (context === undefined)
|
||||
throw new Error('useTheme must be used within a ThemeProvider');
|
||||
|
||||
return context;
|
||||
};
|
||||
@@ -1,174 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useMemo, useRef } from 'react';
|
||||
import { Command, Hash, Star, Moon, Sun } from 'lucide-react';
|
||||
import { useTheme } from '@/components/providers/ThemeProvider';
|
||||
import {
|
||||
getAllMeasures,
|
||||
formatMeasureName,
|
||||
getCategoryColor,
|
||||
getCategoryColorHex,
|
||||
type Measure,
|
||||
} from '@/lib/units/units';
|
||||
import { getFavorites } from '@/lib/units/storage';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface CommandPaletteProps {
|
||||
onSelectMeasure: (measure: Measure) => void;
|
||||
onSelectUnit: (unit: string, measure: Measure) => void;
|
||||
}
|
||||
|
||||
export default function CommandPalette({
|
||||
onSelectMeasure,
|
||||
onSelectUnit,
|
||||
}: CommandPaletteProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [query, setQuery] = useState('');
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const { theme, setTheme } = useTheme();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Commands
|
||||
const commands: Array<{
|
||||
id: string;
|
||||
label: string;
|
||||
icon: any;
|
||||
action: () => void;
|
||||
keywords: string[];
|
||||
color?: string;
|
||||
}> = [
|
||||
{
|
||||
id: 'theme-light',
|
||||
label: 'Switch to Light Mode',
|
||||
icon: Sun,
|
||||
action: () => setTheme('light'),
|
||||
keywords: ['theme', 'light', 'mode'],
|
||||
},
|
||||
{
|
||||
id: 'theme-dark',
|
||||
label: 'Switch to Dark Mode',
|
||||
icon: Moon,
|
||||
action: () => setTheme('dark'),
|
||||
keywords: ['theme', 'dark', 'mode'],
|
||||
},
|
||||
{
|
||||
id: 'theme-system',
|
||||
label: 'Use System Theme',
|
||||
icon: Command,
|
||||
action: () => setTheme('system'),
|
||||
keywords: ['theme', 'system', 'auto'],
|
||||
},
|
||||
];
|
||||
|
||||
// Add measure commands
|
||||
const measures = getAllMeasures();
|
||||
const measureCommands = measures.map(measure => ({
|
||||
id: `measure-${measure}`,
|
||||
label: `Convert ${formatMeasureName(measure)}`,
|
||||
icon: Hash,
|
||||
action: () => onSelectMeasure(measure),
|
||||
keywords: ['convert', measure, formatMeasureName(measure).toLowerCase()],
|
||||
color: getCategoryColorHex(measure),
|
||||
}));
|
||||
|
||||
const allCommands = [...commands, ...measureCommands];
|
||||
|
||||
// Filter commands
|
||||
const filteredCommands = query
|
||||
? allCommands.filter(cmd =>
|
||||
cmd.keywords.some(kw => kw.toLowerCase().includes(query.toLowerCase())) ||
|
||||
cmd.label.toLowerCase().includes(query.toLowerCase())
|
||||
)
|
||||
: allCommands;
|
||||
|
||||
// Focus input when opened
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
inputRef.current?.focus();
|
||||
setQuery('');
|
||||
setSelectedIndex(0);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// Reset selected index when query changes
|
||||
useEffect(() => {
|
||||
setSelectedIndex(0);
|
||||
}, [query]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Command Palette */}
|
||||
<div className="fixed left-1/2 top-1/4 -translate-x-1/2 w-full max-w-2xl z-50 animate-scale-in">
|
||||
<div className="bg-popover border rounded-lg shadow-2xl overflow-hidden">
|
||||
{/* Search Input */}
|
||||
<div className="flex items-center border-b px-4">
|
||||
<Command className="h-5 w-5 text-muted-foreground" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
placeholder="Type a command or search..."
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
className="flex-1 bg-transparent py-4 px-4 outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Commands List */}
|
||||
<div className="max-h-96 overflow-y-auto p-2">
|
||||
{filteredCommands.length === 0 ? (
|
||||
<div className="py-8 text-center text-muted-foreground">
|
||||
No commands found
|
||||
</div>
|
||||
) : (
|
||||
filteredCommands.map((command, index) => {
|
||||
const Icon = command.icon;
|
||||
return (
|
||||
<button
|
||||
key={command.id}
|
||||
onClick={() => {
|
||||
command.action();
|
||||
setIsOpen(false);
|
||||
}}
|
||||
className={cn(
|
||||
'w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors text-left',
|
||||
index === selectedIndex
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'hover:bg-accent/50'
|
||||
)}
|
||||
>
|
||||
{command.color ? (
|
||||
<div
|
||||
className="w-5 h-5 rounded flex-shrink-0"
|
||||
style={{
|
||||
backgroundColor: command.color,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Icon className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
<span className="flex-1">{command.label}</span>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t px-4 py-2 text-xs text-muted-foreground flex items-center gap-4">
|
||||
<span>Navigate with arrows</span>
|
||||
<span>Select with Enter</span>
|
||||
<span>Close with click outside</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
224
lib/media/converters/ffmpegService.ts
Normal file
224
lib/media/converters/ffmpegService.ts
Normal file
@@ -0,0 +1,224 @@
|
||||
import type { FFmpeg } from '@ffmpeg/ffmpeg';
|
||||
import { fetchFile } from '@ffmpeg/util';
|
||||
import { loadFFmpeg } from '@/lib/media/wasm/wasmLoader';
|
||||
import type { ConversionOptions, ProgressCallback, ConversionResult } from '@/types/media';
|
||||
|
||||
/**
|
||||
* Convert video/audio using FFmpeg
|
||||
*/
|
||||
export async function convertWithFFmpeg(
|
||||
file: File,
|
||||
outputFormat: string,
|
||||
options: ConversionOptions = {},
|
||||
onProgress?: ProgressCallback
|
||||
): Promise<ConversionResult> {
|
||||
const startTime = Date.now();
|
||||
|
||||
try {
|
||||
// Load FFmpeg instance
|
||||
const ffmpeg: FFmpeg = await loadFFmpeg();
|
||||
|
||||
// Set up progress tracking
|
||||
if (onProgress) {
|
||||
ffmpeg.on('progress', ({ progress }) => {
|
||||
onProgress(Math.round(progress * 100));
|
||||
});
|
||||
}
|
||||
|
||||
// Input filename
|
||||
const inputName = file.name;
|
||||
const outputName = `output.${outputFormat}`;
|
||||
|
||||
// Write input file to FFmpeg virtual file system
|
||||
await ffmpeg.writeFile(inputName, await fetchFile(file));
|
||||
|
||||
// Build FFmpeg command based on format and options
|
||||
const args = buildFFmpegArgs(inputName, outputName, outputFormat, options);
|
||||
|
||||
console.log('[FFmpeg] Running command:', args.join(' '));
|
||||
|
||||
// Execute FFmpeg command
|
||||
await ffmpeg.exec(args);
|
||||
|
||||
// Read output file
|
||||
const data = await ffmpeg.readFile(outputName);
|
||||
const blob = new Blob([data as BlobPart], { type: getMimeType(outputFormat) });
|
||||
|
||||
// Clean up virtual file system
|
||||
await ffmpeg.deleteFile(inputName);
|
||||
await ffmpeg.deleteFile(outputName);
|
||||
|
||||
const duration = Date.now() - startTime;
|
||||
|
||||
return {
|
||||
success: true,
|
||||
blob,
|
||||
duration,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('[FFmpeg] Conversion error:', error);
|
||||
|
||||
return {
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Unknown conversion error',
|
||||
duration: Date.now() - startTime,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Build FFmpeg command arguments
|
||||
*/
|
||||
function buildFFmpegArgs(
|
||||
inputName: string,
|
||||
outputName: string,
|
||||
outputFormat: string,
|
||||
options: ConversionOptions
|
||||
): string[] {
|
||||
const args = ['-i', inputName];
|
||||
|
||||
// Video codec
|
||||
if (options.videoCodec) {
|
||||
args.push('-c:v', options.videoCodec);
|
||||
}
|
||||
|
||||
// Video bitrate
|
||||
if (options.videoBitrate) {
|
||||
args.push('-b:v', options.videoBitrate);
|
||||
}
|
||||
|
||||
// Video resolution
|
||||
if (options.videoResolution) {
|
||||
args.push('-s', options.videoResolution);
|
||||
}
|
||||
|
||||
// Video FPS
|
||||
if (options.videoFps) {
|
||||
args.push('-r', options.videoFps.toString());
|
||||
}
|
||||
|
||||
// Audio codec
|
||||
if (options.audioCodec) {
|
||||
args.push('-c:a', options.audioCodec);
|
||||
}
|
||||
|
||||
// Audio bitrate
|
||||
if (options.audioBitrate) {
|
||||
args.push('-b:a', options.audioBitrate);
|
||||
}
|
||||
|
||||
// Audio sample rate
|
||||
if (options.audioSampleRate) {
|
||||
args.push('-ar', options.audioSampleRate.toString());
|
||||
}
|
||||
|
||||
// Audio channels
|
||||
if (options.audioChannels) {
|
||||
args.push('-ac', options.audioChannels.toString());
|
||||
}
|
||||
|
||||
// Format-specific settings
|
||||
switch (outputFormat) {
|
||||
case 'webm':
|
||||
// Use VP8 by default (less memory-intensive than VP9)
|
||||
if (!options.videoCodec) args.push('-c:v', 'libvpx');
|
||||
if (!options.audioCodec) args.push('-c:a', 'libvorbis');
|
||||
// Optimize for faster encoding and lower memory usage
|
||||
args.push('-deadline', 'realtime');
|
||||
args.push('-cpu-used', '8');
|
||||
// Set quality/bitrate if not specified
|
||||
if (!options.videoBitrate) args.push('-b:v', '1M');
|
||||
if (!options.audioBitrate) args.push('-b:a', '128k');
|
||||
break;
|
||||
case 'mp4':
|
||||
if (!options.videoCodec) args.push('-c:v', 'libx264');
|
||||
if (!options.audioCodec) args.push('-c:a', 'aac');
|
||||
// Use faster preset for browser encoding
|
||||
args.push('-preset', 'ultrafast');
|
||||
args.push('-tune', 'zerolatency');
|
||||
if (!options.videoBitrate) args.push('-b:v', '1M');
|
||||
if (!options.audioBitrate) args.push('-b:a', '128k');
|
||||
break;
|
||||
case 'mp3':
|
||||
if (!options.audioCodec) args.push('-c:a', 'libmp3lame');
|
||||
args.push('-vn'); // No video
|
||||
break;
|
||||
case 'wav':
|
||||
if (!options.audioCodec) args.push('-c:a', 'pcm_s16le');
|
||||
args.push('-vn'); // No video
|
||||
break;
|
||||
case 'ogg':
|
||||
if (!options.audioCodec) args.push('-c:a', 'libvorbis');
|
||||
args.push('-vn'); // No video
|
||||
break;
|
||||
case 'gif':
|
||||
// For GIF, use filter to optimize
|
||||
args.push('-vf', 'fps=15,scale=480:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse');
|
||||
break;
|
||||
}
|
||||
|
||||
// Output file
|
||||
args.push(outputName);
|
||||
|
||||
return args;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get MIME type for output format
|
||||
*/
|
||||
function getMimeType(format: string): string {
|
||||
const mimeTypes: Record<string, string> = {
|
||||
mp4: 'video/mp4',
|
||||
webm: 'video/webm',
|
||||
avi: 'video/x-msvideo',
|
||||
mov: 'video/quicktime',
|
||||
mkv: 'video/x-matroska',
|
||||
mp3: 'audio/mpeg',
|
||||
wav: 'audio/wav',
|
||||
ogg: 'audio/ogg',
|
||||
aac: 'audio/aac',
|
||||
flac: 'audio/flac',
|
||||
gif: 'image/gif',
|
||||
};
|
||||
|
||||
return mimeTypes[format] || 'application/octet-stream';
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract audio from video
|
||||
*/
|
||||
export async function extractAudio(
|
||||
file: File,
|
||||
outputFormat: string = 'mp3',
|
||||
onProgress?: ProgressCallback
|
||||
): Promise<ConversionResult> {
|
||||
return convertWithFFmpeg(
|
||||
file,
|
||||
outputFormat,
|
||||
{
|
||||
audioCodec: outputFormat === 'mp3' ? 'libmp3lame' : undefined,
|
||||
audioBitrate: '192k',
|
||||
},
|
||||
onProgress
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert video to GIF
|
||||
*/
|
||||
export async function videoToGif(
|
||||
file: File,
|
||||
fps: number = 15,
|
||||
width: number = 480,
|
||||
onProgress?: ProgressCallback
|
||||
): Promise<ConversionResult> {
|
||||
return convertWithFFmpeg(
|
||||
file,
|
||||
'gif',
|
||||
{
|
||||
videoFps: fps,
|
||||
videoResolution: `${width}:-1`,
|
||||
},
|
||||
onProgress
|
||||
);
|
||||
}
|
||||
248
lib/media/converters/imagemagickService.ts
Normal file
248
lib/media/converters/imagemagickService.ts
Normal file
@@ -0,0 +1,248 @@
|
||||
import { loadImageMagick } from '@/lib/media/wasm/wasmLoader';
|
||||
import type { ConversionOptions, ProgressCallback, ConversionResult } from '@/types/media';
|
||||
|
||||
/**
|
||||
* Convert image using ImageMagick
|
||||
*/
|
||||
export async function convertWithImageMagick(
|
||||
file: File,
|
||||
outputFormat: string,
|
||||
options: ConversionOptions = {},
|
||||
onProgress?: ProgressCallback
|
||||
): Promise<ConversionResult> {
|
||||
const startTime = Date.now();
|
||||
|
||||
try {
|
||||
// Load ImageMagick instance
|
||||
await loadImageMagick();
|
||||
|
||||
// Report initial progress
|
||||
if (onProgress) onProgress(10);
|
||||
|
||||
// Read input file as ArrayBuffer
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
const inputData = new Uint8Array(arrayBuffer);
|
||||
|
||||
if (onProgress) onProgress(30);
|
||||
|
||||
// Import ImageMagick functions (already initialized by loadImageMagick)
|
||||
const { ImageMagick } = await import('@imagemagick/magick-wasm');
|
||||
|
||||
if (onProgress) onProgress(40);
|
||||
|
||||
// Get output format enum
|
||||
const outputFormatEnum = await getMagickFormatEnum(outputFormat);
|
||||
|
||||
if (onProgress) onProgress(50);
|
||||
|
||||
// Convert image using ImageMagick
|
||||
let result: Uint8Array | undefined;
|
||||
|
||||
await ImageMagick.read(inputData, (image) => {
|
||||
// Apply quality setting if specified
|
||||
if (options.imageQuality !== undefined) {
|
||||
image.quality = options.imageQuality;
|
||||
}
|
||||
|
||||
// Apply resize if specified
|
||||
if (options.imageWidth || options.imageHeight) {
|
||||
const width = options.imageWidth || 0;
|
||||
const height = options.imageHeight || 0;
|
||||
|
||||
if (width > 0 && height > 0) {
|
||||
// Both dimensions specified
|
||||
image.resize(width, height);
|
||||
} else if (width > 0) {
|
||||
// Only width specified, maintain aspect ratio
|
||||
const aspectRatio = image.height / image.width;
|
||||
image.resize(width, Math.round(width * aspectRatio));
|
||||
} else if (height > 0) {
|
||||
// Only height specified, maintain aspect ratio
|
||||
const aspectRatio = image.width / image.height;
|
||||
image.resize(Math.round(height * aspectRatio), height);
|
||||
}
|
||||
}
|
||||
|
||||
if (onProgress) onProgress(70);
|
||||
|
||||
// Write the image data with format
|
||||
image.write(outputFormatEnum, (data) => {
|
||||
result = data;
|
||||
});
|
||||
|
||||
if (onProgress) onProgress(90);
|
||||
});
|
||||
|
||||
// Verify we have a result
|
||||
if (!result || result.length === 0) {
|
||||
throw new Error('ImageMagick conversion produced empty result');
|
||||
}
|
||||
|
||||
console.log('[ImageMagick] Conversion complete:', {
|
||||
inputSize: inputData.length,
|
||||
outputSize: result.length,
|
||||
format: outputFormat,
|
||||
quality: options.imageQuality,
|
||||
});
|
||||
|
||||
// Verify the data looks like valid image data by checking magic bytes
|
||||
const first4Bytes = Array.from(result.slice(0, 4)).map(b => b.toString(16).padStart(2, '0')).join(' ');
|
||||
console.log('[ImageMagick] First 4 bytes:', first4Bytes);
|
||||
|
||||
// Create blob from result
|
||||
const mimeType = getMimeType(outputFormat);
|
||||
const blob = new Blob([result as BlobPart], { type: mimeType });
|
||||
|
||||
console.log('[ImageMagick] Created blob:', {
|
||||
size: blob.size,
|
||||
type: blob.type,
|
||||
});
|
||||
|
||||
// Verify blob can be read
|
||||
try {
|
||||
const testReader = new FileReader();
|
||||
const testPromise = new Promise((resolve) => {
|
||||
testReader.onloadend = () => {
|
||||
if (testReader.result instanceof ArrayBuffer) {
|
||||
const testArr = new Uint8Array(testReader.result);
|
||||
console.log('[ImageMagick] Blob verification - first 4 bytes:',
|
||||
Array.from(testArr.slice(0, 4)).map(b => b.toString(16).padStart(2, '0')).join(' '));
|
||||
}
|
||||
resolve(true);
|
||||
};
|
||||
});
|
||||
testReader.readAsArrayBuffer(blob.slice(0, 4));
|
||||
await testPromise;
|
||||
} catch (err) {
|
||||
console.error('[ImageMagick] Blob verification failed:', err);
|
||||
}
|
||||
|
||||
if (onProgress) onProgress(100);
|
||||
|
||||
const duration = Date.now() - startTime;
|
||||
|
||||
return {
|
||||
success: true,
|
||||
blob,
|
||||
duration,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('[ImageMagick] Conversion error:', error);
|
||||
|
||||
return {
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Unknown conversion error',
|
||||
duration: Date.now() - startTime,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get ImageMagick format enum
|
||||
*/
|
||||
async function getMagickFormatEnum(format: string): Promise<any> {
|
||||
const { MagickFormat } = await import('@imagemagick/magick-wasm');
|
||||
|
||||
const formatMap: Record<string, any> = {
|
||||
png: MagickFormat.Png,
|
||||
jpg: MagickFormat.Jpg,
|
||||
jpeg: MagickFormat.Jpg,
|
||||
webp: MagickFormat.WebP,
|
||||
gif: MagickFormat.Gif,
|
||||
bmp: MagickFormat.Bmp,
|
||||
tiff: MagickFormat.Tiff,
|
||||
svg: MagickFormat.Svg,
|
||||
};
|
||||
|
||||
return formatMap[format.toLowerCase()] || MagickFormat.Png;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get MIME type for output format
|
||||
*/
|
||||
function getMimeType(format: string): string {
|
||||
const mimeTypes: Record<string, string> = {
|
||||
png: 'image/png',
|
||||
jpg: 'image/jpeg',
|
||||
jpeg: 'image/jpeg',
|
||||
webp: 'image/webp',
|
||||
gif: 'image/gif',
|
||||
bmp: 'image/bmp',
|
||||
tiff: 'image/tiff',
|
||||
svg: 'image/svg+xml',
|
||||
};
|
||||
|
||||
return mimeTypes[format.toLowerCase()] || 'application/octet-stream';
|
||||
}
|
||||
|
||||
/**
|
||||
* Resize image
|
||||
*/
|
||||
export async function resizeImage(
|
||||
file: File,
|
||||
width: number,
|
||||
height: number,
|
||||
outputFormat?: string,
|
||||
onProgress?: ProgressCallback
|
||||
): Promise<ConversionResult> {
|
||||
const format = outputFormat || file.name.split('.').pop() || 'png';
|
||||
|
||||
return convertWithImageMagick(
|
||||
file,
|
||||
format,
|
||||
{
|
||||
imageWidth: width,
|
||||
imageHeight: height,
|
||||
},
|
||||
onProgress
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert image to WebP
|
||||
*/
|
||||
export async function convertToWebP(
|
||||
file: File,
|
||||
quality: number = 85,
|
||||
onProgress?: ProgressCallback
|
||||
): Promise<ConversionResult> {
|
||||
return convertWithImageMagick(
|
||||
file,
|
||||
'webp',
|
||||
{
|
||||
imageQuality: quality,
|
||||
},
|
||||
onProgress
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Batch convert images
|
||||
*/
|
||||
export async function batchConvertImages(
|
||||
files: File[],
|
||||
outputFormat: string,
|
||||
options: ConversionOptions = {},
|
||||
onProgress?: (fileIndex: number, progress: number) => void
|
||||
): Promise<ConversionResult[]> {
|
||||
const results: ConversionResult[] = [];
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
|
||||
const result = await convertWithImageMagick(
|
||||
file,
|
||||
outputFormat,
|
||||
options,
|
||||
(progress) => {
|
||||
if (onProgress) {
|
||||
onProgress(i, progress);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
results.push(result);
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
65
lib/media/hooks/useKeyboardShortcuts.ts
Normal file
65
lib/media/hooks/useKeyboardShortcuts.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export interface KeyboardShortcut {
|
||||
key: string;
|
||||
ctrl?: boolean;
|
||||
alt?: boolean;
|
||||
shift?: boolean;
|
||||
description: string;
|
||||
action: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook for managing keyboard shortcuts
|
||||
*/
|
||||
export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[], enabled: boolean = true) {
|
||||
useEffect(() => {
|
||||
if (!enabled) return;
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
// Find matching shortcut
|
||||
const shortcut = shortcuts.find((s) => {
|
||||
const keyMatch = s.key.toLowerCase() === event.key.toLowerCase();
|
||||
const ctrlMatch = s.ctrl ? (event.ctrlKey || event.metaKey) : !event.ctrlKey && !event.metaKey;
|
||||
const altMatch = s.alt ? event.altKey : !event.altKey;
|
||||
const shiftMatch = s.shift ? event.shiftKey : !event.shiftKey;
|
||||
|
||||
return keyMatch && ctrlMatch && altMatch && shiftMatch;
|
||||
});
|
||||
|
||||
if (shortcut) {
|
||||
event.preventDefault();
|
||||
shortcut.action();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [shortcuts, enabled]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Format shortcut key combination for display
|
||||
*/
|
||||
export function formatShortcut(shortcut: KeyboardShortcut): string {
|
||||
const parts: string[] = [];
|
||||
|
||||
// Use Cmd on Mac, Ctrl on others
|
||||
const isMac = typeof window !== 'undefined' && /Mac|iPhone|iPod|iPad/.test(navigator.platform);
|
||||
|
||||
if (shortcut.ctrl) {
|
||||
parts.push(isMac ? '⌘' : 'Ctrl');
|
||||
}
|
||||
|
||||
if (shortcut.alt) {
|
||||
parts.push(isMac ? '⌥' : 'Alt');
|
||||
}
|
||||
|
||||
if (shortcut.shift) {
|
||||
parts.push(isMac ? '⇧' : 'Shift');
|
||||
}
|
||||
|
||||
parts.push(shortcut.key.toUpperCase());
|
||||
|
||||
return parts.join(' + ');
|
||||
}
|
||||
88
lib/media/storage/history.ts
Normal file
88
lib/media/storage/history.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
import type { ConversionHistoryItem } from '@/types/media';
|
||||
|
||||
const HISTORY_KEY = 'convert-ui-history';
|
||||
const MAX_HISTORY_ITEMS = 10;
|
||||
|
||||
/**
|
||||
* Get conversion history from localStorage
|
||||
*/
|
||||
export function getHistory(): ConversionHistoryItem[] {
|
||||
if (typeof window === 'undefined') return [];
|
||||
|
||||
try {
|
||||
const stored = localStorage.getItem(HISTORY_KEY);
|
||||
if (!stored) return [];
|
||||
|
||||
const history = JSON.parse(stored);
|
||||
return Array.isArray(history) ? history : [];
|
||||
} catch (error) {
|
||||
console.error('Failed to load history:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add item to conversion history
|
||||
*/
|
||||
export function addToHistory(item: Omit<ConversionHistoryItem, 'id' | 'timestamp'>): void {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
try {
|
||||
const history = getHistory();
|
||||
|
||||
const newItem: ConversionHistoryItem = {
|
||||
...item,
|
||||
id: Math.random().toString(36).substring(7),
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
// Add to beginning of array
|
||||
history.unshift(newItem);
|
||||
|
||||
// Keep only the latest MAX_HISTORY_ITEMS
|
||||
const trimmed = history.slice(0, MAX_HISTORY_ITEMS);
|
||||
|
||||
localStorage.setItem(HISTORY_KEY, JSON.stringify(trimmed));
|
||||
|
||||
// Dispatch custom event for same-page updates
|
||||
window.dispatchEvent(new CustomEvent('conversionHistoryUpdated'));
|
||||
} catch (error) {
|
||||
console.error('Failed to save history:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all conversion history
|
||||
*/
|
||||
export function clearHistory(): void {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
try {
|
||||
localStorage.removeItem(HISTORY_KEY);
|
||||
} catch (error) {
|
||||
console.error('Failed to clear history:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove single item from history
|
||||
*/
|
||||
export function removeHistoryItem(id: string): void {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
try {
|
||||
const history = getHistory();
|
||||
const filtered = history.filter((item) => item.id !== id);
|
||||
localStorage.setItem(HISTORY_KEY, JSON.stringify(filtered));
|
||||
} catch (error) {
|
||||
console.error('Failed to remove history item:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get history item by ID
|
||||
*/
|
||||
export function getHistoryItem(id: string): ConversionHistoryItem | undefined {
|
||||
const history = getHistory();
|
||||
return history.find((item) => item.id === id);
|
||||
}
|
||||
73
lib/media/storage/settings.ts
Normal file
73
lib/media/storage/settings.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
export interface UserSettings {
|
||||
// Quality preferences
|
||||
defaultQualityPreset: 'high-quality' | 'balanced' | 'small-file' | 'web-optimized';
|
||||
|
||||
// Behavior preferences
|
||||
autoStartConversion: boolean;
|
||||
showConversionHistory: boolean;
|
||||
clearHistoryOnReset: boolean;
|
||||
|
||||
// Default formats (optional)
|
||||
defaultVideoFormat?: string;
|
||||
defaultAudioFormat?: string;
|
||||
defaultImageFormat?: string;
|
||||
}
|
||||
|
||||
const SETTINGS_KEY = 'convert-ui-settings';
|
||||
|
||||
const DEFAULT_SETTINGS: UserSettings = {
|
||||
defaultQualityPreset: 'balanced',
|
||||
autoStartConversion: false,
|
||||
showConversionHistory: true,
|
||||
clearHistoryOnReset: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* Get user settings from localStorage
|
||||
*/
|
||||
export function getSettings(): UserSettings {
|
||||
if (typeof window === 'undefined') return DEFAULT_SETTINGS;
|
||||
|
||||
try {
|
||||
const stored = localStorage.getItem(SETTINGS_KEY);
|
||||
if (!stored) return DEFAULT_SETTINGS;
|
||||
|
||||
const settings = JSON.parse(stored);
|
||||
return { ...DEFAULT_SETTINGS, ...settings };
|
||||
} catch (error) {
|
||||
console.error('Failed to load settings:', error);
|
||||
return DEFAULT_SETTINGS;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save user settings to localStorage
|
||||
*/
|
||||
export function saveSettings(settings: Partial<UserSettings>): void {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
try {
|
||||
const current = getSettings();
|
||||
const updated = { ...current, ...settings };
|
||||
localStorage.setItem(SETTINGS_KEY, JSON.stringify(updated));
|
||||
|
||||
// Dispatch custom event for settings updates
|
||||
window.dispatchEvent(new CustomEvent('settingsUpdated', { detail: updated }));
|
||||
} catch (error) {
|
||||
console.error('Failed to save settings:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset settings to defaults
|
||||
*/
|
||||
export function resetSettings(): void {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
try {
|
||||
localStorage.setItem(SETTINGS_KEY, JSON.stringify(DEFAULT_SETTINGS));
|
||||
window.dispatchEvent(new CustomEvent('settingsUpdated', { detail: DEFAULT_SETTINGS }));
|
||||
} catch (error) {
|
||||
console.error('Failed to reset settings:', error);
|
||||
}
|
||||
}
|
||||
114
lib/media/utils/fileUtils.ts
Normal file
114
lib/media/utils/fileUtils.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* Format file size in human-readable format
|
||||
*/
|
||||
export function formatFileSize(bytes: number): string {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return `${Math.round(bytes / Math.pow(k, i) * 100) / 100} ${sizes[i]}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate file size (max 500MB for browser processing)
|
||||
*/
|
||||
export function validateFileSize(file: File, maxSizeMB: number = 500): boolean {
|
||||
const maxBytes = maxSizeMB * 1024 * 1024;
|
||||
return file.size <= maxBytes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get file extension from filename
|
||||
*/
|
||||
export function getFileExtension(filename: string): string {
|
||||
const lastDot = filename.lastIndexOf('.');
|
||||
return lastDot === -1 ? '' : filename.substring(lastDot + 1).toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get filename without extension
|
||||
*/
|
||||
export function getFilenameWithoutExtension(filename: string): string {
|
||||
const lastDot = filename.lastIndexOf('.');
|
||||
return lastDot === -1 ? filename : filename.substring(0, lastDot);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate output filename
|
||||
*/
|
||||
export function generateOutputFilename(inputFilename: string, outputExtension: string): string {
|
||||
const basename = getFilenameWithoutExtension(inputFilename);
|
||||
return `${basename}.${outputExtension}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Download blob as file
|
||||
*/
|
||||
export function downloadBlob(blob: Blob, filename: string): void {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Read file as ArrayBuffer
|
||||
*/
|
||||
export async function readFileAsArrayBuffer(file: File): Promise<ArrayBuffer> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(reader.result as ArrayBuffer);
|
||||
reader.onerror = () => reject(reader.error);
|
||||
reader.readAsArrayBuffer(file);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Read file as Data URL
|
||||
*/
|
||||
export async function readFileAsDataURL(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(reader.result as string);
|
||||
reader.onerror = () => reject(reader.error);
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate file type against allowed MIME types
|
||||
*/
|
||||
export function validateFileType(file: File, allowedTypes: string[]): boolean {
|
||||
return allowedTypes.some((type) => {
|
||||
if (type.endsWith('/*')) {
|
||||
const category = type.split('/')[0];
|
||||
return file.type.startsWith(`${category}/`);
|
||||
}
|
||||
return file.type === type;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Download multiple blobs as a ZIP file
|
||||
*/
|
||||
export async function downloadBlobsAsZip(files: Array<{ blob: Blob; filename: string }>, zipFilename: string): Promise<void> {
|
||||
const JSZip = (await import('jszip')).default;
|
||||
const zip = new JSZip();
|
||||
|
||||
// Add all files to ZIP
|
||||
files.forEach(({ blob, filename }) => {
|
||||
zip.file(filename, blob);
|
||||
});
|
||||
|
||||
// Generate ZIP blob
|
||||
const zipBlob = await zip.generateAsync({ type: 'blob' });
|
||||
|
||||
// Download ZIP
|
||||
downloadBlob(zipBlob, zipFilename);
|
||||
}
|
||||
272
lib/media/utils/formatMappings.ts
Normal file
272
lib/media/utils/formatMappings.ts
Normal file
@@ -0,0 +1,272 @@
|
||||
import type { ConversionFormat, FormatPreset } from '@/types/media';
|
||||
|
||||
/**
|
||||
* All supported conversion formats
|
||||
*/
|
||||
export const SUPPORTED_FORMATS: ConversionFormat[] = [
|
||||
// Video formats (FFmpeg)
|
||||
{
|
||||
id: 'mp4',
|
||||
name: 'MP4',
|
||||
extension: 'mp4',
|
||||
mimeType: 'video/mp4',
|
||||
category: 'video',
|
||||
converter: 'ffmpeg',
|
||||
description: 'MPEG-4 video format',
|
||||
},
|
||||
{
|
||||
id: 'webm',
|
||||
name: 'WebM',
|
||||
extension: 'webm',
|
||||
mimeType: 'video/webm',
|
||||
category: 'video',
|
||||
converter: 'ffmpeg',
|
||||
description: 'WebM video format',
|
||||
},
|
||||
{
|
||||
id: 'avi',
|
||||
name: 'AVI',
|
||||
extension: 'avi',
|
||||
mimeType: 'video/x-msvideo',
|
||||
category: 'video',
|
||||
converter: 'ffmpeg',
|
||||
description: 'Audio Video Interleave',
|
||||
},
|
||||
{
|
||||
id: 'mov',
|
||||
name: 'MOV',
|
||||
extension: 'mov',
|
||||
mimeType: 'video/quicktime',
|
||||
category: 'video',
|
||||
converter: 'ffmpeg',
|
||||
description: 'QuickTime movie',
|
||||
},
|
||||
{
|
||||
id: 'mkv',
|
||||
name: 'MKV',
|
||||
extension: 'mkv',
|
||||
mimeType: 'video/x-matroska',
|
||||
category: 'video',
|
||||
converter: 'ffmpeg',
|
||||
description: 'Matroska video',
|
||||
},
|
||||
|
||||
// Audio formats (FFmpeg)
|
||||
{
|
||||
id: 'mp3',
|
||||
name: 'MP3',
|
||||
extension: 'mp3',
|
||||
mimeType: 'audio/mpeg',
|
||||
category: 'audio',
|
||||
converter: 'ffmpeg',
|
||||
description: 'MPEG audio layer 3',
|
||||
},
|
||||
{
|
||||
id: 'wav',
|
||||
name: 'WAV',
|
||||
extension: 'wav',
|
||||
mimeType: 'audio/wav',
|
||||
category: 'audio',
|
||||
converter: 'ffmpeg',
|
||||
description: 'Waveform audio',
|
||||
},
|
||||
{
|
||||
id: 'ogg',
|
||||
name: 'OGG',
|
||||
extension: 'ogg',
|
||||
mimeType: 'audio/ogg',
|
||||
category: 'audio',
|
||||
converter: 'ffmpeg',
|
||||
description: 'Ogg Vorbis audio',
|
||||
},
|
||||
{
|
||||
id: 'aac',
|
||||
name: 'AAC',
|
||||
extension: 'aac',
|
||||
mimeType: 'audio/aac',
|
||||
category: 'audio',
|
||||
converter: 'ffmpeg',
|
||||
description: 'Advanced Audio Coding',
|
||||
},
|
||||
{
|
||||
id: 'flac',
|
||||
name: 'FLAC',
|
||||
extension: 'flac',
|
||||
mimeType: 'audio/flac',
|
||||
category: 'audio',
|
||||
converter: 'ffmpeg',
|
||||
description: 'Free Lossless Audio Codec',
|
||||
},
|
||||
|
||||
// Image formats (ImageMagick)
|
||||
{
|
||||
id: 'png',
|
||||
name: 'PNG',
|
||||
extension: 'png',
|
||||
mimeType: 'image/png',
|
||||
category: 'image',
|
||||
converter: 'imagemagick',
|
||||
description: 'Portable Network Graphics',
|
||||
},
|
||||
{
|
||||
id: 'jpg',
|
||||
name: 'JPG',
|
||||
extension: 'jpg',
|
||||
mimeType: 'image/jpeg',
|
||||
category: 'image',
|
||||
converter: 'imagemagick',
|
||||
description: 'JPEG image',
|
||||
},
|
||||
{
|
||||
id: 'webp',
|
||||
name: 'WebP',
|
||||
extension: 'webp',
|
||||
mimeType: 'image/webp',
|
||||
category: 'image',
|
||||
converter: 'imagemagick',
|
||||
description: 'WebP image format',
|
||||
},
|
||||
{
|
||||
id: 'gif',
|
||||
name: 'GIF',
|
||||
extension: 'gif',
|
||||
mimeType: 'image/gif',
|
||||
category: 'image',
|
||||
converter: 'imagemagick',
|
||||
description: 'Graphics Interchange Format',
|
||||
},
|
||||
{
|
||||
id: 'bmp',
|
||||
name: 'BMP',
|
||||
extension: 'bmp',
|
||||
mimeType: 'image/bmp',
|
||||
category: 'image',
|
||||
converter: 'imagemagick',
|
||||
description: 'Bitmap image',
|
||||
},
|
||||
{
|
||||
id: 'tiff',
|
||||
name: 'TIFF',
|
||||
extension: 'tiff',
|
||||
mimeType: 'image/tiff',
|
||||
category: 'image',
|
||||
converter: 'imagemagick',
|
||||
description: 'Tagged Image File Format',
|
||||
},
|
||||
{
|
||||
id: 'svg',
|
||||
name: 'SVG',
|
||||
extension: 'svg',
|
||||
mimeType: 'image/svg+xml',
|
||||
category: 'image',
|
||||
converter: 'imagemagick',
|
||||
description: 'Scalable Vector Graphics',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Format presets for common conversions
|
||||
*/
|
||||
export const FORMAT_PRESETS: FormatPreset[] = [
|
||||
{
|
||||
id: 'web-video',
|
||||
name: 'Web Video',
|
||||
description: 'Optimize video for web playback (VP8 for better compatibility)',
|
||||
category: 'video',
|
||||
sourceFormats: ['mp4', 'avi', 'mov', 'mkv'],
|
||||
targetFormat: 'webm',
|
||||
options: {
|
||||
videoCodec: 'libvpx',
|
||||
videoBitrate: '1M',
|
||||
audioCodec: 'libvorbis',
|
||||
audioBitrate: '128k',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'web-image',
|
||||
name: 'Web Image',
|
||||
description: 'Optimize image for web',
|
||||
category: 'image',
|
||||
sourceFormats: ['png', 'jpg', 'bmp', 'tiff'],
|
||||
targetFormat: 'webp',
|
||||
options: {
|
||||
imageQuality: 85,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'audio-compress',
|
||||
name: 'Compress Audio',
|
||||
description: 'Reduce audio file size',
|
||||
category: 'audio',
|
||||
sourceFormats: ['wav', 'flac'],
|
||||
targetFormat: 'mp3',
|
||||
options: {
|
||||
audioBitrate: '192k',
|
||||
audioCodec: 'libmp3lame',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'video-gif',
|
||||
name: 'Video to GIF',
|
||||
description: 'Convert video to animated GIF',
|
||||
category: 'video',
|
||||
sourceFormats: ['mp4', 'webm', 'avi', 'mov'],
|
||||
targetFormat: 'gif',
|
||||
options: {
|
||||
videoFps: 15,
|
||||
videoResolution: '480x-1',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Get format by ID
|
||||
*/
|
||||
export function getFormatById(id: string): ConversionFormat | undefined {
|
||||
return SUPPORTED_FORMATS.find((f) => f.id === id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get format by extension
|
||||
*/
|
||||
export function getFormatByExtension(extension: string): ConversionFormat | undefined {
|
||||
return SUPPORTED_FORMATS.find((f) => f.extension === extension.toLowerCase());
|
||||
}
|
||||
|
||||
/**
|
||||
* Get format by MIME type
|
||||
*/
|
||||
export function getFormatByMimeType(mimeType: string): ConversionFormat | undefined {
|
||||
return SUPPORTED_FORMATS.find((f) => f.mimeType === mimeType);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all formats by category
|
||||
*/
|
||||
export function getFormatsByCategory(category: string): ConversionFormat[] {
|
||||
return SUPPORTED_FORMATS.filter((f) => f.category === category);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get compatible output formats for input format
|
||||
*/
|
||||
export function getCompatibleFormats(inputFormat: ConversionFormat): ConversionFormat[] {
|
||||
// Same category and same converter
|
||||
return SUPPORTED_FORMATS.filter(
|
||||
(f) => f.category === inputFormat.category && f.converter === inputFormat.converter && f.id !== inputFormat.id
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if conversion is supported
|
||||
*/
|
||||
export function isConversionSupported(
|
||||
inputFormat: ConversionFormat,
|
||||
outputFormat: ConversionFormat
|
||||
): boolean {
|
||||
return (
|
||||
inputFormat.category === outputFormat.category &&
|
||||
inputFormat.converter === outputFormat.converter &&
|
||||
inputFormat.id !== outputFormat.id
|
||||
);
|
||||
}
|
||||
188
lib/media/utils/formatPresets.ts
Normal file
188
lib/media/utils/formatPresets.ts
Normal file
@@ -0,0 +1,188 @@
|
||||
import type { ConversionOptions } from '@/types/media';
|
||||
|
||||
export interface FormatPreset {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
category: 'video' | 'audio' | 'image';
|
||||
outputFormat: string;
|
||||
options: ConversionOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
* Predefined format presets for common use cases
|
||||
*/
|
||||
export const FORMAT_PRESETS: FormatPreset[] = [
|
||||
// Video Presets
|
||||
{
|
||||
id: 'youtube-video',
|
||||
name: 'YouTube Video',
|
||||
description: '1080p MP4, optimized for YouTube',
|
||||
icon: '🎬',
|
||||
category: 'video',
|
||||
outputFormat: 'mp4',
|
||||
options: {
|
||||
videoCodec: 'libx264',
|
||||
videoBitrate: '5M',
|
||||
videoResolution: '1920x-1',
|
||||
videoFps: 30,
|
||||
audioCodec: 'aac',
|
||||
audioBitrate: '192k',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'instagram-video',
|
||||
name: 'Instagram Video',
|
||||
description: 'Square 1:1 format for Instagram',
|
||||
icon: '📸',
|
||||
category: 'video',
|
||||
outputFormat: 'mp4',
|
||||
options: {
|
||||
videoCodec: 'libx264',
|
||||
videoBitrate: '3M',
|
||||
videoResolution: '1080x-1', // Will be cropped to square
|
||||
videoFps: 30,
|
||||
audioCodec: 'aac',
|
||||
audioBitrate: '128k',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'twitter-video',
|
||||
name: 'Twitter Video',
|
||||
description: '720p, optimized for Twitter',
|
||||
icon: '🐦',
|
||||
category: 'video',
|
||||
outputFormat: 'mp4',
|
||||
options: {
|
||||
videoCodec: 'libx264',
|
||||
videoBitrate: '2M',
|
||||
videoResolution: '1280x-1',
|
||||
videoFps: 30,
|
||||
audioCodec: 'aac',
|
||||
audioBitrate: '128k',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'web-video',
|
||||
name: 'Web Optimized',
|
||||
description: 'Small file size for web streaming',
|
||||
icon: '🌐',
|
||||
category: 'video',
|
||||
outputFormat: 'mp4',
|
||||
options: {
|
||||
videoCodec: 'libx264',
|
||||
videoBitrate: '1.5M',
|
||||
videoResolution: '854x-1',
|
||||
videoFps: 24,
|
||||
audioCodec: 'aac',
|
||||
audioBitrate: '96k',
|
||||
},
|
||||
},
|
||||
|
||||
// Audio Presets
|
||||
{
|
||||
id: 'podcast-audio',
|
||||
name: 'Podcast',
|
||||
description: 'MP3, optimized for voice',
|
||||
icon: '🎙️',
|
||||
category: 'audio',
|
||||
outputFormat: 'mp3',
|
||||
options: {
|
||||
audioCodec: 'libmp3lame',
|
||||
audioBitrate: '128k',
|
||||
audioSampleRate: 44100,
|
||||
audioChannels: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'music-high-quality',
|
||||
name: 'High Quality Music',
|
||||
description: 'MP3, 320kbps for music',
|
||||
icon: '🎵',
|
||||
category: 'audio',
|
||||
outputFormat: 'mp3',
|
||||
options: {
|
||||
audioCodec: 'libmp3lame',
|
||||
audioBitrate: '320k',
|
||||
audioSampleRate: 48000,
|
||||
audioChannels: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'audiobook',
|
||||
name: 'Audiobook',
|
||||
description: 'Mono, small file size',
|
||||
icon: '📚',
|
||||
category: 'audio',
|
||||
outputFormat: 'mp3',
|
||||
options: {
|
||||
audioCodec: 'libmp3lame',
|
||||
audioBitrate: '64k',
|
||||
audioSampleRate: 22050,
|
||||
audioChannels: 1,
|
||||
},
|
||||
},
|
||||
|
||||
// Image Presets
|
||||
{
|
||||
id: 'web-thumbnail',
|
||||
name: 'Web Thumbnail',
|
||||
description: 'JPG, 800px width, optimized',
|
||||
icon: '🖼️',
|
||||
category: 'image',
|
||||
outputFormat: 'jpg',
|
||||
options: {
|
||||
imageQuality: 85,
|
||||
imageWidth: 800,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'hd-image',
|
||||
name: 'HD Image',
|
||||
description: 'PNG, high quality, lossless',
|
||||
icon: '🎨',
|
||||
category: 'image',
|
||||
outputFormat: 'png',
|
||||
options: {
|
||||
imageQuality: 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'social-media-image',
|
||||
name: 'Social Media',
|
||||
description: 'JPG, 1200px, optimized',
|
||||
icon: '📱',
|
||||
category: 'image',
|
||||
outputFormat: 'jpg',
|
||||
options: {
|
||||
imageQuality: 90,
|
||||
imageWidth: 1200,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'web-optimized-image',
|
||||
name: 'Web Optimized',
|
||||
description: 'WebP, small file size',
|
||||
icon: '⚡',
|
||||
category: 'image',
|
||||
outputFormat: 'webp',
|
||||
options: {
|
||||
imageQuality: 80,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Get presets by category
|
||||
*/
|
||||
export function getPresetsByCategory(category: 'video' | 'audio' | 'image'): FormatPreset[] {
|
||||
return FORMAT_PRESETS.filter(preset => preset.category === category);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get preset by ID
|
||||
*/
|
||||
export function getPresetById(id: string): FormatPreset | undefined {
|
||||
return FORMAT_PRESETS.find(preset => preset.id === id);
|
||||
}
|
||||
157
lib/media/wasm/wasmLoader.ts
Normal file
157
lib/media/wasm/wasmLoader.ts
Normal file
@@ -0,0 +1,157 @@
|
||||
import type { FFmpeg } from '@ffmpeg/ffmpeg';
|
||||
import type { ConverterEngine, WASMModuleState } from '@/types/media';
|
||||
|
||||
/**
|
||||
* WASM module loading state
|
||||
*/
|
||||
const moduleState: WASMModuleState = {
|
||||
ffmpeg: false,
|
||||
imagemagick: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* Cached WASM instances
|
||||
*/
|
||||
let ffmpegInstance: FFmpeg | null = null;
|
||||
let imagemagickInstance: any = null;
|
||||
|
||||
/**
|
||||
* Load FFmpeg WASM module
|
||||
*/
|
||||
export async function loadFFmpeg(): Promise<FFmpeg> {
|
||||
if (ffmpegInstance && moduleState.ffmpeg) {
|
||||
return ffmpegInstance;
|
||||
}
|
||||
|
||||
try {
|
||||
const { FFmpeg } = await import('@ffmpeg/ffmpeg');
|
||||
const { toBlobURL } = await import('@ffmpeg/util');
|
||||
|
||||
ffmpegInstance = new FFmpeg();
|
||||
|
||||
// Load core and dependencies
|
||||
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd';
|
||||
|
||||
ffmpegInstance.on('log', ({ message }) => {
|
||||
console.log('[FFmpeg]', message);
|
||||
});
|
||||
|
||||
await ffmpegInstance.load({
|
||||
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
|
||||
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
|
||||
});
|
||||
|
||||
moduleState.ffmpeg = true;
|
||||
console.log('FFmpeg loaded successfully');
|
||||
|
||||
return ffmpegInstance;
|
||||
} catch (error) {
|
||||
console.error('Failed to load FFmpeg:', error);
|
||||
throw new Error('Failed to load FFmpeg WASM module');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load ImageMagick WASM module
|
||||
*/
|
||||
export async function loadImageMagick(): Promise<any> {
|
||||
if (imagemagickInstance && moduleState.imagemagick) {
|
||||
return imagemagickInstance;
|
||||
}
|
||||
|
||||
try {
|
||||
const { initializeImageMagick } = await import('@imagemagick/magick-wasm');
|
||||
|
||||
// Initialize ImageMagick with WASM file from public directory
|
||||
// In production (static export), this will be served from /wasm/magick.wasm
|
||||
const wasmUrl = '/wasm/magick.wasm';
|
||||
|
||||
console.log('[ImageMagick] Attempting to load WASM from:', wasmUrl);
|
||||
|
||||
// Test fetch the WASM file first to debug
|
||||
try {
|
||||
const response = await fetch(wasmUrl);
|
||||
console.log('[ImageMagick] WASM fetch response:', {
|
||||
ok: response.ok,
|
||||
status: response.status,
|
||||
contentType: response.headers.get('content-type'),
|
||||
contentLength: response.headers.get('content-length'),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch WASM file: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
console.log('[ImageMagick] WASM file size:', arrayBuffer.byteLength, 'bytes');
|
||||
|
||||
if (arrayBuffer.byteLength === 0) {
|
||||
throw new Error('WASM file is empty');
|
||||
}
|
||||
|
||||
// Now initialize with the buffer directly
|
||||
await initializeImageMagick(arrayBuffer);
|
||||
} catch (fetchError) {
|
||||
console.error('[ImageMagick] Failed to fetch WASM:', fetchError);
|
||||
throw fetchError;
|
||||
}
|
||||
|
||||
const ImageMagick = await import('@imagemagick/magick-wasm');
|
||||
|
||||
imagemagickInstance = ImageMagick;
|
||||
moduleState.imagemagick = true;
|
||||
console.log('[ImageMagick] Loaded and initialized successfully');
|
||||
|
||||
return imagemagickInstance;
|
||||
} catch (error) {
|
||||
console.error('[ImageMagick] Failed to load:', error);
|
||||
throw new Error(`Failed to load ImageMagick WASM module: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get loaded module state
|
||||
*/
|
||||
export function getModuleState(): WASMModuleState {
|
||||
return { ...moduleState };
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a specific module is loaded
|
||||
*/
|
||||
export function isModuleLoaded(engine: ConverterEngine): boolean {
|
||||
return moduleState[engine];
|
||||
}
|
||||
|
||||
/**
|
||||
* Load appropriate WASM module for converter engine
|
||||
*/
|
||||
export async function loadModule(engine: ConverterEngine): Promise<any> {
|
||||
switch (engine) {
|
||||
case 'ffmpeg':
|
||||
return loadFFmpeg();
|
||||
case 'imagemagick':
|
||||
return loadImageMagick();
|
||||
default:
|
||||
throw new Error(`Unknown converter engine: ${engine}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Unload all WASM modules and free memory
|
||||
*/
|
||||
export function unloadAll(): void {
|
||||
if (ffmpegInstance) {
|
||||
// FFmpeg doesn't have an explicit unload method
|
||||
// Just null the instance
|
||||
ffmpegInstance = null;
|
||||
moduleState.ffmpeg = false;
|
||||
}
|
||||
|
||||
if (imagemagickInstance) {
|
||||
imagemagickInstance = null;
|
||||
moduleState.imagemagick = false;
|
||||
}
|
||||
|
||||
console.log('All WASM modules unloaded');
|
||||
}
|
||||
@@ -9,6 +9,9 @@
|
||||
"lint": "eslint ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@ffmpeg/ffmpeg": "^0.12.15",
|
||||
"@ffmpeg/util": "^0.12.2",
|
||||
"@imagemagick/magick-wasm": "^0.0.38",
|
||||
"@tanstack/react-query": "^5.90.21",
|
||||
"@valknarthing/pastel-wasm": "^0.1.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
@@ -19,6 +22,7 @@
|
||||
"framer-motion": "^12.34.3",
|
||||
"fuse.js": "^7.1.0",
|
||||
"html-to-image": "^1.11.13",
|
||||
"jszip": "^3.10.1",
|
||||
"lucide-react": "^0.575.0",
|
||||
"next": "^16.1.6",
|
||||
"radix-ui": "^1.4.3",
|
||||
|
||||
109
pnpm-lock.yaml
generated
109
pnpm-lock.yaml
generated
@@ -8,6 +8,15 @@ importers:
|
||||
|
||||
.:
|
||||
dependencies:
|
||||
'@ffmpeg/ffmpeg':
|
||||
specifier: ^0.12.15
|
||||
version: 0.12.15
|
||||
'@ffmpeg/util':
|
||||
specifier: ^0.12.2
|
||||
version: 0.12.2
|
||||
'@imagemagick/magick-wasm':
|
||||
specifier: ^0.0.38
|
||||
version: 0.0.38
|
||||
'@tanstack/react-query':
|
||||
specifier: ^5.90.21
|
||||
version: 5.90.21(react@19.2.4)
|
||||
@@ -38,6 +47,9 @@ importers:
|
||||
html-to-image:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
jszip:
|
||||
specifier: ^3.10.1
|
||||
version: 3.10.1
|
||||
lucide-react:
|
||||
specifier: ^0.575.0
|
||||
version: 0.575.0(react@19.2.4)
|
||||
@@ -302,6 +314,18 @@ packages:
|
||||
resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
|
||||
'@ffmpeg/ffmpeg@0.12.15':
|
||||
resolution: {integrity: sha512-1C8Obr4GsN3xw+/1Ww6PFM84wSQAGsdoTuTWPOj2OizsRDLT4CXTaVjPhkw6ARyDus1B9X/L2LiXHqYYsGnRFw==}
|
||||
engines: {node: '>=18.x'}
|
||||
|
||||
'@ffmpeg/types@0.12.4':
|
||||
resolution: {integrity: sha512-k9vJQNBGTxE5AhYDtOYR5rO5fKsspbg51gbcwtbkw2lCdoIILzklulcjJfIDwrtn7XhDeF2M+THwJ2FGrLeV6A==}
|
||||
engines: {node: '>=16.x'}
|
||||
|
||||
'@ffmpeg/util@0.12.2':
|
||||
resolution: {integrity: sha512-ouyoW+4JB7WxjeZ2y6KpRvB+dLp7Cp4ro8z0HIVpZVCM7AwFlHa0c4R8Y/a4M3wMqATpYKhC7lSFHQ0T11MEDw==}
|
||||
engines: {node: '>=18.x'}
|
||||
|
||||
'@floating-ui/core@1.7.4':
|
||||
resolution: {integrity: sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==}
|
||||
|
||||
@@ -339,6 +363,9 @@ packages:
|
||||
resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
|
||||
engines: {node: '>=18.18'}
|
||||
|
||||
'@imagemagick/magick-wasm@0.0.38':
|
||||
resolution: {integrity: sha512-xg3q6ZMqUADyyy0h/1IndT9DUWUXY5lRhevF2WB+AYvphJ5yraH+R0IGO7H7DFnLSMrJ6zsxEbXfOnhNfark9w==}
|
||||
|
||||
'@img/colour@1.0.0':
|
||||
resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
|
||||
engines: {node: '>=18'}
|
||||
@@ -1911,6 +1938,9 @@ packages:
|
||||
resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
core-util-is@1.0.3:
|
||||
resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
|
||||
|
||||
cors@2.8.6:
|
||||
resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
|
||||
engines: {node: '>= 0.10'}
|
||||
@@ -2527,6 +2557,9 @@ packages:
|
||||
resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
|
||||
engines: {node: '>= 4'}
|
||||
|
||||
immediate@3.0.6:
|
||||
resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
|
||||
|
||||
import-fresh@3.3.1:
|
||||
resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
|
||||
engines: {node: '>=6'}
|
||||
@@ -2716,6 +2749,9 @@ packages:
|
||||
resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
|
||||
engines: {node: '>=16'}
|
||||
|
||||
isarray@1.0.0:
|
||||
resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
|
||||
|
||||
isarray@2.0.5:
|
||||
resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
|
||||
|
||||
@@ -2783,6 +2819,9 @@ packages:
|
||||
resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
|
||||
engines: {node: '>=4.0'}
|
||||
|
||||
jszip@3.10.1:
|
||||
resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
|
||||
|
||||
keyv@4.5.4:
|
||||
resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
|
||||
|
||||
@@ -2805,6 +2844,9 @@ packages:
|
||||
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
lie@3.3.0:
|
||||
resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
|
||||
|
||||
lightningcss-android-arm64@1.31.1:
|
||||
resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
|
||||
engines: {node: '>= 12.0.0'}
|
||||
@@ -3180,6 +3222,9 @@ packages:
|
||||
package-manager-detector@1.6.0:
|
||||
resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
|
||||
|
||||
pako@1.0.11:
|
||||
resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
|
||||
|
||||
parent-module@1.0.1:
|
||||
resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
|
||||
engines: {node: '>=6'}
|
||||
@@ -3263,6 +3308,9 @@ packages:
|
||||
resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
process-nextick-args@2.0.1:
|
||||
resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
|
||||
|
||||
prompts@2.4.2:
|
||||
resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
|
||||
engines: {node: '>= 6'}
|
||||
@@ -3354,6 +3402,9 @@ packages:
|
||||
resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
readable-stream@2.3.8:
|
||||
resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
|
||||
|
||||
recast@0.23.11:
|
||||
resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
|
||||
engines: {node: '>= 4'}
|
||||
@@ -3417,6 +3468,9 @@ packages:
|
||||
resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
|
||||
engines: {node: '>=0.4'}
|
||||
|
||||
safe-buffer@5.1.2:
|
||||
resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
|
||||
|
||||
safe-push-apply@1.0.0:
|
||||
resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@@ -3460,6 +3514,9 @@ packages:
|
||||
resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
setimmediate@1.0.5:
|
||||
resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
|
||||
|
||||
setprototypeof@1.2.0:
|
||||
resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
|
||||
|
||||
@@ -3568,6 +3625,9 @@ packages:
|
||||
resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
string_decoder@1.1.1:
|
||||
resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
|
||||
|
||||
stringify-object@5.0.0:
|
||||
resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
|
||||
engines: {node: '>=14.16'}
|
||||
@@ -4163,6 +4223,14 @@ snapshots:
|
||||
'@eslint/core': 0.17.0
|
||||
levn: 0.4.1
|
||||
|
||||
'@ffmpeg/ffmpeg@0.12.15':
|
||||
dependencies:
|
||||
'@ffmpeg/types': 0.12.4
|
||||
|
||||
'@ffmpeg/types@0.12.4': {}
|
||||
|
||||
'@ffmpeg/util@0.12.2': {}
|
||||
|
||||
'@floating-ui/core@1.7.4':
|
||||
dependencies:
|
||||
'@floating-ui/utils': 0.2.10
|
||||
@@ -4195,6 +4263,8 @@ snapshots:
|
||||
|
||||
'@humanwhocodes/retry@0.4.3': {}
|
||||
|
||||
'@imagemagick/magick-wasm@0.0.38': {}
|
||||
|
||||
'@img/colour@1.0.0':
|
||||
optional: true
|
||||
|
||||
@@ -5748,6 +5818,8 @@ snapshots:
|
||||
|
||||
cookie@1.1.1: {}
|
||||
|
||||
core-util-is@1.0.3: {}
|
||||
|
||||
cors@2.8.6:
|
||||
dependencies:
|
||||
object-assign: 4.1.1
|
||||
@@ -6504,6 +6576,8 @@ snapshots:
|
||||
|
||||
ignore@7.0.5: {}
|
||||
|
||||
immediate@3.0.6: {}
|
||||
|
||||
import-fresh@3.3.1:
|
||||
dependencies:
|
||||
parent-module: 1.0.1
|
||||
@@ -6671,6 +6745,8 @@ snapshots:
|
||||
dependencies:
|
||||
is-inside-container: 1.0.0
|
||||
|
||||
isarray@1.0.0: {}
|
||||
|
||||
isarray@2.0.5: {}
|
||||
|
||||
isexe@2.0.0: {}
|
||||
@@ -6729,6 +6805,13 @@ snapshots:
|
||||
object.assign: 4.1.7
|
||||
object.values: 1.2.1
|
||||
|
||||
jszip@3.10.1:
|
||||
dependencies:
|
||||
lie: 3.3.0
|
||||
pako: 1.0.11
|
||||
readable-stream: 2.3.8
|
||||
setimmediate: 1.0.5
|
||||
|
||||
keyv@4.5.4:
|
||||
dependencies:
|
||||
json-buffer: 3.0.1
|
||||
@@ -6748,6 +6831,10 @@ snapshots:
|
||||
prelude-ls: 1.2.1
|
||||
type-check: 0.4.0
|
||||
|
||||
lie@3.3.0:
|
||||
dependencies:
|
||||
immediate: 3.0.6
|
||||
|
||||
lightningcss-android-arm64@1.31.1:
|
||||
optional: true
|
||||
|
||||
@@ -7150,6 +7237,8 @@ snapshots:
|
||||
|
||||
package-manager-detector@1.6.0: {}
|
||||
|
||||
pako@1.0.11: {}
|
||||
|
||||
parent-module@1.0.1:
|
||||
dependencies:
|
||||
callsites: 3.1.0
|
||||
@@ -7214,6 +7303,8 @@ snapshots:
|
||||
dependencies:
|
||||
parse-ms: 4.0.0
|
||||
|
||||
process-nextick-args@2.0.1: {}
|
||||
|
||||
prompts@2.4.2:
|
||||
dependencies:
|
||||
kleur: 3.0.3
|
||||
@@ -7351,6 +7442,16 @@ snapshots:
|
||||
|
||||
react@19.2.4: {}
|
||||
|
||||
readable-stream@2.3.8:
|
||||
dependencies:
|
||||
core-util-is: 1.0.3
|
||||
inherits: 2.0.4
|
||||
isarray: 1.0.0
|
||||
process-nextick-args: 2.0.1
|
||||
safe-buffer: 5.1.2
|
||||
string_decoder: 1.1.1
|
||||
util-deprecate: 1.0.2
|
||||
|
||||
recast@0.23.11:
|
||||
dependencies:
|
||||
ast-types: 0.16.1
|
||||
@@ -7435,6 +7536,8 @@ snapshots:
|
||||
has-symbols: 1.1.0
|
||||
isarray: 2.0.5
|
||||
|
||||
safe-buffer@5.1.2: {}
|
||||
|
||||
safe-push-apply@1.0.0:
|
||||
dependencies:
|
||||
es-errors: 1.3.0
|
||||
@@ -7501,6 +7604,8 @@ snapshots:
|
||||
es-errors: 1.3.0
|
||||
es-object-atoms: 1.1.1
|
||||
|
||||
setimmediate@1.0.5: {}
|
||||
|
||||
setprototypeof@1.2.0: {}
|
||||
|
||||
shadcn@3.8.5(@types/node@25.3.0)(typescript@5.9.3):
|
||||
@@ -7703,6 +7808,10 @@ snapshots:
|
||||
define-properties: 1.2.1
|
||||
es-object-atoms: 1.1.1
|
||||
|
||||
string_decoder@1.1.1:
|
||||
dependencies:
|
||||
safe-buffer: 5.1.2
|
||||
|
||||
stringify-object@5.0.0:
|
||||
dependencies:
|
||||
get-own-enumerable-keys: 1.0.0
|
||||
|
||||
121
types/media.ts
Normal file
121
types/media.ts
Normal file
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* Supported converter engines
|
||||
*/
|
||||
export type ConverterEngine = 'ffmpeg' | 'imagemagick';
|
||||
|
||||
/**
|
||||
* File category based on type
|
||||
*/
|
||||
export type FileCategory = 'video' | 'audio' | 'image';
|
||||
|
||||
/**
|
||||
* Conversion status
|
||||
*/
|
||||
export type ConversionStatus = 'pending' | 'loading' | 'processing' | 'completed' | 'error';
|
||||
|
||||
/**
|
||||
* Supported conversion format
|
||||
*/
|
||||
export interface ConversionFormat {
|
||||
id: string;
|
||||
name: string;
|
||||
extension: string;
|
||||
mimeType: string;
|
||||
category: FileCategory;
|
||||
converter: ConverterEngine;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Conversion job configuration
|
||||
*/
|
||||
export interface ConversionJob {
|
||||
id: string;
|
||||
inputFile: File;
|
||||
inputFormat: ConversionFormat;
|
||||
outputFormat: ConversionFormat;
|
||||
options: ConversionOptions;
|
||||
status: ConversionStatus;
|
||||
progress: number;
|
||||
result?: Blob;
|
||||
error?: string;
|
||||
startTime?: number;
|
||||
endTime?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generic conversion options
|
||||
*/
|
||||
export interface ConversionOptions {
|
||||
// Video options
|
||||
videoBitrate?: string;
|
||||
videoCodec?: string;
|
||||
videoResolution?: string;
|
||||
videoFps?: number;
|
||||
|
||||
// Audio options
|
||||
audioBitrate?: string;
|
||||
audioCodec?: string;
|
||||
audioSampleRate?: number;
|
||||
audioChannels?: number;
|
||||
|
||||
// Image options
|
||||
imageQuality?: number;
|
||||
imageWidth?: number;
|
||||
imageHeight?: number;
|
||||
imageFormat?: string;
|
||||
|
||||
// Generic options
|
||||
[key: string]: string | number | boolean | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* History item for conversion history
|
||||
*/
|
||||
export interface ConversionHistoryItem {
|
||||
id: string;
|
||||
inputFileName: string;
|
||||
inputFormat: string;
|
||||
outputFormat: string;
|
||||
outputFileName: string;
|
||||
timestamp: number;
|
||||
fileSize: number;
|
||||
result?: Blob;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format preset for common conversions
|
||||
*/
|
||||
export interface FormatPreset {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
category: FileCategory;
|
||||
sourceFormats: string[];
|
||||
targetFormat: string;
|
||||
options: ConversionOptions;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* WASM module loading state
|
||||
*/
|
||||
export interface WASMModuleState {
|
||||
ffmpeg: boolean;
|
||||
imagemagick: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Progress callback for conversion
|
||||
*/
|
||||
export type ProgressCallback = (progress: number) => void;
|
||||
|
||||
/**
|
||||
* Conversion result
|
||||
*/
|
||||
export interface ConversionResult {
|
||||
success: boolean;
|
||||
blob?: Blob;
|
||||
error?: string;
|
||||
duration?: number;
|
||||
}
|
||||
Reference in New Issue
Block a user