79 lines
3.4 KiB
TypeScript
79 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import type { TransferState } from '../../stores/transferStore';
|
|
|
|
interface Props {
|
|
loaded: number;
|
|
total: number;
|
|
state: TransferState;
|
|
filename: string;
|
|
/** Optional human-readable error surfaced as a hover tooltip when state==='failed'. */
|
|
error?: string;
|
|
onPause?: () => void;
|
|
onResume?: () => void;
|
|
onAbort?: () => void;
|
|
size?: 'tile' | 'pill';
|
|
}
|
|
|
|
function fmt(bytes: number): string {
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
|
return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
|
|
}
|
|
|
|
export function AttachmentProgress({ loaded, total, state, filename, error, onPause, onResume, onAbort, size = 'tile' }: Props) {
|
|
const pct = total > 0 ? Math.min(100, Math.round((loaded / total) * 100)) : 0;
|
|
const bg = state === 'failed' ? 'bg-accent-rose/30' : state === 'paused' ? 'bg-white/5' : 'bg-accent-mint/30';
|
|
const isFinal = state === 'completed' || state === 'aborted';
|
|
// Desaturate the conic-gradient ring when paused so it can't be mistaken for
|
|
// active progress. Active uses mint; paused uses a muted grey.
|
|
const ringColor = state === 'paused' ? 'rgba(180,180,190,.5)' : 'rgba(180,220,200,.85)';
|
|
const ringTrack = 'rgba(255,255,255,.15)';
|
|
const ringTitle = state === 'failed'
|
|
? error
|
|
: state === 'paused'
|
|
? `Paused — ${pct}%`
|
|
: undefined;
|
|
return (
|
|
<div className={`absolute inset-0 flex flex-col items-center justify-center gap-2 backdrop-blur-[2px] ${state === 'failed' ? 'bg-accent-rose/20' : 'bg-black/50'} pointer-events-auto`}>
|
|
<div
|
|
className={`w-9 h-9 rounded-full ${bg} flex items-center justify-center`}
|
|
style={state !== 'failed' ? { background: `conic-gradient(${ringColor} ${pct}%, ${ringTrack} ${pct}%)` } : undefined}
|
|
title={ringTitle}
|
|
>
|
|
<div className="w-7 h-7 rounded-full bg-surface-overlay text-[10px] text-txt-primary flex items-center justify-center font-medium">
|
|
{state === 'paused' ? (
|
|
<svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" aria-hidden="true">
|
|
<rect x="2" y="1.5" width="2" height="7" rx="0.5" />
|
|
<rect x="6" y="1.5" width="2" height="7" rx="0.5" />
|
|
</svg>
|
|
) : state === 'failed' ? (
|
|
'!'
|
|
) : (
|
|
`${pct}%`
|
|
)}
|
|
</div>
|
|
</div>
|
|
{size === 'tile' && (
|
|
<div className="text-[10px] text-txt-primary text-center leading-tight px-1">
|
|
<div className="truncate max-w-[120px]">{filename}</div>
|
|
<div className="opacity-60">{fmt(loaded)} / {fmt(total)}</div>
|
|
</div>
|
|
)}
|
|
{!isFinal && (
|
|
<div className="absolute top-1 right-1 flex gap-1">
|
|
{state === 'paused' && onResume && (
|
|
<button onClick={onResume} className="bg-black/60 hover:bg-black/80 text-white w-5 h-5 rounded text-[9px]" aria-label="Resume">▶</button>
|
|
)}
|
|
{state === 'active' && onPause && (
|
|
<button onClick={onPause} className="bg-black/60 hover:bg-black/80 text-white w-5 h-5 rounded text-[9px]" aria-label="Pause">⏸</button>
|
|
)}
|
|
{onAbort && (
|
|
<button onClick={onAbort} className="bg-black/60 hover:bg-black/80 text-white w-5 h-5 rounded text-[9px]" aria-label="Abort">✕</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|