Can convert a file multiple times now
This commit is contained in:
+17
-10
@@ -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"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -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(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user