Can convert a file multiple times now

This commit is contained in:
noah
2026-03-09 22:11:55 +01:00
parent 18912547a8
commit b9aac61ab8
2 changed files with 28 additions and 12 deletions
+17 -10
View File
@@ -72,9 +72,9 @@ export function FileRow({
{formatFileSize(file.size)} {formatFileSize(file.size)}
</div> </div>
{/* Format selector */} {/* Format selector — always available (even after conversion) */}
<div className="w-[140px] flex items-center justify-center flex-shrink-0"> <div className="w-[140px] flex items-center justify-center flex-shrink-0">
{file.availableFormats.length > 0 && file.status !== 'done' ? ( {file.availableFormats.length > 0 && file.status !== 'converting' ? (
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-text-light/40 flex-shrink-0"> <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-text-light/40 flex-shrink-0">
<path d="M5 12h14M12 5l7 7-7 7" /> <path d="M5 12h14M12 5l7 7-7 7" />
@@ -89,7 +89,7 @@ export function FileRow({
))} ))}
</select> </select>
</div> </div>
) : file.status === 'done' ? ( ) : file.status === 'converting' ? (
<span <span
className="font-mono text-[11px] font-bold px-2 py-0.5 rounded-md" className="font-mono text-[11px] font-bold px-2 py-0.5 rounded-md"
style={{ background: `${color}10`, color }} style={{ background: `${color}10`, color }}
@@ -339,13 +339,20 @@ function MobileStatus({
if (file.status === 'done') { if (file.status === 'done') {
return ( return (
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5 flex-1 min-w-0">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" className="text-mint flex-shrink-0"> {/* Format selector — pick a new format to convert again */}
<circle cx="12" cy="12" r="10" fill="rgba(52,211,153,0.12)" stroke="currentColor" strokeWidth="1.5" /> <select
<path d="M8 12l3 3 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> value={file.targetFormat || ''}
</svg> onChange={(e) => onSetFormat(file.id, e.target.value)}
className="font-mono text-[11px] font-bold text-text-dark bg-transparent px-1.5 py-0.5 rounded-md border border-border-soft/60 cursor-pointer focus:outline-none focus:border-pink/40 transition-all appearance-none select-arrow-warm"
style={{ maxWidth: '70px' }}
>
{file.availableFormats.map((fmt) => (
<option key={fmt} value={fmt}>.{fmt}</option>
))}
</select>
<button <button
className="flex items-center justify-center w-6 h-6 rounded-md bg-transparent border-none cursor-pointer text-text-light/50 active:text-purple transition-all" className="flex items-center justify-center w-6 h-6 rounded-md bg-transparent border-none cursor-pointer text-text-light/50 active:text-purple transition-all flex-shrink-0"
onClick={() => onPreview(file)} onClick={() => onPreview(file)}
title="Preview" title="Preview"
> >
@@ -355,7 +362,7 @@ function MobileStatus({
</svg> </svg>
</button> </button>
<button <button
className="inline-flex items-center gap-1 px-2 py-1 text-[10px] font-bold text-white bg-mint border-none rounded-md cursor-pointer shadow-[0_1px_4px_rgba(52,211,153,0.2)] transition-all" className="inline-flex items-center gap-1 px-2 py-1 text-[10px] font-bold text-white bg-mint border-none rounded-md cursor-pointer shadow-[0_1px_4px_rgba(52,211,153,0.2)] transition-all flex-shrink-0"
onClick={() => onDownload(file)} onClick={() => onDownload(file)}
title="Download" title="Download"
> >
+11 -2
View File
@@ -175,10 +175,19 @@ export function useFileUpload() {
const setTargetFormat = useCallback((id: string, format: string) => { const setTargetFormat = useCallback((id: string, format: string) => {
setFiles((prev) => setFiles((prev) =>
prev.map((f) => (f.id === id ? { ...f, targetFormat: format } : f)) prev.map((f) => {
if (f.id !== id) return f;
// If the file was already converted, reset to idle so it can be converted again
const needsReset = f.status === 'done' || f.status === 'error';
return {
...f,
targetFormat: format,
...(needsReset ? { status: 'idle' as const, progress: 0, convertedBlob: undefined, convertedName: undefined, error: undefined } : {}),
};
})
); );
// Sync to persistence // Sync to persistence
updatePersistedMeta(id, { targetFormat: format }); updatePersistedMeta(id, { targetFormat: format, status: 'idle' });
}, []); }, []);
const clearAll = useCallback(() => { const clearAll = useCallback(() => {