File size: 4,202 Bytes
1322628 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
import React, { useState, useCallback } from 'react';
import { Image, Trash2 } from 'lucide-react';
import { CompressionOptions } from './components/CompressionOptions';
import { DropZone } from './components/DropZone';
import { ImageList } from './components/ImageList';
import { DownloadAll } from './components/DownloadAll';
import { useImageQueue } from './hooks/useImageQueue';
import { DEFAULT_QUALITY_SETTINGS } from './utils/formatDefaults';
import type { ImageFile, OutputType, CompressionOptions as CompressionOptionsType } from './types';
export function App() {
const [images, setImages] = useState<ImageFile[]>([]);
const [outputType, setOutputType] = useState<OutputType>('webp');
const [options, setOptions] = useState<CompressionOptionsType>({
quality: DEFAULT_QUALITY_SETTINGS.webp,
});
const { addToQueue } = useImageQueue(options, outputType, setImages);
const handleOutputTypeChange = useCallback((type: OutputType) => {
setOutputType(type);
if (type !== 'png') {
setOptions({ quality: DEFAULT_QUALITY_SETTINGS[type] });
}
}, []);
const handleFilesDrop = useCallback((newImages: ImageFile[]) => {
// First add all images to state
setImages((prev) => [...prev, ...newImages]);
// Use requestAnimationFrame to wait for render to complete
requestAnimationFrame(() => {
// Then add to queue after UI has updated
newImages.forEach(image => addToQueue(image.id));
});
}, [addToQueue]);
const handleRemoveImage = useCallback((id: string) => {
setImages((prev) => {
const image = prev.find(img => img.id === id);
if (image?.preview) {
URL.revokeObjectURL(image.preview);
}
return prev.filter(img => img.id !== id);
});
}, []);
const handleClearAll = useCallback(() => {
images.forEach(image => {
if (image.preview) {
URL.revokeObjectURL(image.preview);
}
});
setImages([]);
}, [images]);
const handleDownloadAll = useCallback(async () => {
const completedImages = images.filter((img) => img.status === "complete");
for (const image of completedImages) {
if (image.blob && image.outputType) {
const link = document.createElement("a");
link.href = URL.createObjectURL(image.blob);
link.download = `${image.file.name.split(".")[0]}.${image.outputType}`;
link.click();
URL.revokeObjectURL(link.href);
}
await new Promise((resolve) => setTimeout(resolve, 100));
}
}, [images]);
const completedImages = images.filter(img => img.status === 'complete').length;
return (
<div className="min-h-screen bg-gray-50">
<div className="max-w-4xl mx-auto px-4 py-12">
<div className="text-center mb-8">
<div className="flex items-center justify-center gap-2 mb-4">
<Image className="w-8 h-8 text-blue-500" />
<h1 className="text-3xl font-bold text-gray-900">Squish</h1>
</div>
<p className="text-gray-600">
Compress and convert your images to AVIF, JPEG, JPEG XL, PNG, or WebP
</p>
</div>
<div className="space-y-6">
<CompressionOptions
options={options}
outputType={outputType}
onOptionsChange={setOptions}
onOutputTypeChange={handleOutputTypeChange}
/>
<DropZone onFilesDrop={handleFilesDrop} />
{completedImages > 0 && (
<DownloadAll onDownloadAll={handleDownloadAll} count={completedImages} />
)}
<ImageList
images={images}
onRemove={handleRemoveImage}
/>
{images.length > 0 && (
<button
onClick={handleClearAll}
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
>
<Trash2 className="w-5 h-5" />
Clear All
</button>
)}
</div>
</div>
</div>
);
}
|