diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 4fec588..1124f3b 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -3,10 +3,25 @@ import { fetchFormats, uploadFiles } from './api.js'; import { FileCard } from './FileCard.jsx'; import './App.css'; +const DEFAULT_QUALITY = { + jpg: 80, + jpeg: 80, + webp: 80, + avif: 50, + tiff: 80, + png: 6, +}; + +const QUALITY_FORMATS = ['jpg', 'jpeg', 'webp', 'avif', 'tiff']; + function extensionOf(fileName) { return fileName.split('.').pop().toLowerCase(); } +function defaultQualityFor(targetFormat) { + return DEFAULT_QUALITY[targetFormat] ?? null; +} + export default function App() { const [pendingFiles, setPendingFiles] = useState([]); const [submittedJobs, setSubmittedJobs] = useState([]); @@ -16,14 +31,23 @@ export default function App() { const withTargets = await Promise.all( files.map(async (file) => { const targets = await fetchFormats(extensionOf(file.name)); - return { file, targets, targetFormat: targets[0] ?? null }; + const targetFormat = targets[0] ?? null; + return { file, targets, targetFormat, quality: defaultQualityFor(targetFormat) }; }) ); setPendingFiles(withTargets); } function updateTargetFormat(index, targetFormat) { - setPendingFiles((current) => current.map((item, i) => (i === index ? { ...item, targetFormat } : item))); + setPendingFiles((current) => + current.map((item, i) => + i === index ? { ...item, targetFormat, quality: defaultQualityFor(targetFormat) } : item + ) + ); + } + + function updateQuality(index, quality) { + setPendingFiles((current) => current.map((item, i) => (i === index ? { ...item, quality } : item))); } async function handleConvert() { @@ -46,16 +70,64 @@ export default function App() {