feat: initialize Convert UI - browser-based file conversion app
- Add Next.js 16 with Turbopack and React 19 - Add Tailwind CSS 4 with OKLCH color system - Implement FFmpeg.wasm for video/audio conversion - Implement ImageMagick WASM for image conversion - Add file upload with drag-and-drop - Add format selector with fuzzy search - Add conversion preview and download - Add conversion history with localStorage - Add dark/light theme support - Support 22+ file formats across video, audio, and images 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
10
lib/utils/cn.ts
Normal file
10
lib/utils/cn.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { type ClassValue, clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
/**
|
||||
* Merge Tailwind CSS classes with proper precedence
|
||||
* Combines clsx for conditional classes and twMerge for Tailwind class deduplication
|
||||
*/
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
21
lib/utils/debounce.ts
Normal file
21
lib/utils/debounce.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Debounce function - delays execution until after wait time has elapsed
|
||||
*/
|
||||
export function debounce<T extends (...args: any[]) => any>(
|
||||
func: T,
|
||||
wait: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let timeout: NodeJS.Timeout | null = null;
|
||||
|
||||
return function executedFunction(...args: Parameters<T>) {
|
||||
const later = () => {
|
||||
timeout = null;
|
||||
func(...args);
|
||||
};
|
||||
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
95
lib/utils/fileUtils.ts
Normal file
95
lib/utils/fileUtils.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
/**
|
||||
* 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;
|
||||
});
|
||||
}
|
||||
319
lib/utils/formatMappings.ts
Normal file
319
lib/utils/formatMappings.ts
Normal file
@@ -0,0 +1,319 @@
|
||||
import type { ConversionFormat, FormatPreset } from '@/types/conversion';
|
||||
|
||||
/**
|
||||
* 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',
|
||||
},
|
||||
|
||||
// Document formats (Pandoc - future implementation)
|
||||
{
|
||||
id: 'pdf',
|
||||
name: 'PDF',
|
||||
extension: 'pdf',
|
||||
mimeType: 'application/pdf',
|
||||
category: 'document',
|
||||
converter: 'pandoc',
|
||||
description: 'Portable Document Format',
|
||||
},
|
||||
{
|
||||
id: 'docx',
|
||||
name: 'DOCX',
|
||||
extension: 'docx',
|
||||
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
category: 'document',
|
||||
converter: 'pandoc',
|
||||
description: 'Microsoft Word document',
|
||||
},
|
||||
{
|
||||
id: 'markdown',
|
||||
name: 'Markdown',
|
||||
extension: 'md',
|
||||
mimeType: 'text/markdown',
|
||||
category: 'document',
|
||||
converter: 'pandoc',
|
||||
description: 'Markdown text',
|
||||
},
|
||||
{
|
||||
id: 'html',
|
||||
name: 'HTML',
|
||||
extension: 'html',
|
||||
mimeType: 'text/html',
|
||||
category: 'document',
|
||||
converter: 'pandoc',
|
||||
description: 'HyperText Markup Language',
|
||||
},
|
||||
{
|
||||
id: 'txt',
|
||||
name: 'Plain Text',
|
||||
extension: 'txt',
|
||||
mimeType: 'text/plain',
|
||||
category: 'document',
|
||||
converter: 'pandoc',
|
||||
description: 'Plain text file',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Format presets for common conversions
|
||||
*/
|
||||
export const FORMAT_PRESETS: FormatPreset[] = [
|
||||
{
|
||||
id: 'web-video',
|
||||
name: 'Web Video',
|
||||
description: 'Optimize video for web playback',
|
||||
category: 'video',
|
||||
sourceFormats: ['mp4', 'avi', 'mov', 'mkv'],
|
||||
targetFormat: 'webm',
|
||||
options: {
|
||||
videoCodec: 'libvpx-vp9',
|
||||
videoBitrate: '1M',
|
||||
audioCodec: 'libopus',
|
||||
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
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user