feat(ui): add upload speed indicator in Mbps
All checks were successful
Automated Container Build / build-and-push (push) Successful in 38s
All checks were successful
Automated Container Build / build-and-push (push) Successful in 38s
This commit is contained in:
parent
96ca68b35c
commit
36d97ac330
1 changed files with 23 additions and 1 deletions
|
|
@ -247,6 +247,28 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
|
||||||
const [sortAsc, setSortAsc] = useState(true);
|
const [sortAsc, setSortAsc] = useState(true);
|
||||||
const [draggedFile, setDraggedFile] = useState<string | null>(null);
|
const [draggedFile, setDraggedFile] = useState<string | null>(null);
|
||||||
const [uploads, setUploads] = useState<UploadBatch[]>([]);
|
const [uploads, setUploads] = useState<UploadBatch[]>([]);
|
||||||
|
const uploadsRef = useRef<UploadBatch[]>([]);
|
||||||
|
useEffect(() => {
|
||||||
|
uploadsRef.current = uploads;
|
||||||
|
}, [uploads]);
|
||||||
|
|
||||||
|
const [uploadSpeed, setUploadSpeed] = useState<number>(0);
|
||||||
|
const prevUploadBytesRef = useRef<number>(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
const currentBytes = uploadsRef.current.reduce((acc, u) => acc + u.uploadedBytes, 0);
|
||||||
|
const diff = currentBytes - prevUploadBytesRef.current;
|
||||||
|
setUploadSpeed(diff > 0 ? diff : 0);
|
||||||
|
prevUploadBytesRef.current = currentBytes;
|
||||||
|
}, 1000);
|
||||||
|
return () => clearInterval(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const formatSpeed = (bytesPerSec: number) => {
|
||||||
|
const mbps = (bytesPerSec * 8) / 1000000;
|
||||||
|
return ` (${mbps.toFixed(1)} Mbps)`;
|
||||||
|
};
|
||||||
const [toasts, setToasts] = useState<Toast[]>([]);
|
const [toasts, setToasts] = useState<Toast[]>([]);
|
||||||
const [deleteConfirm, setDeleteConfirm] = useState<{ type: 'single' | 'multiple'; file?: FileItem; count?: number } | null>(null);
|
const [deleteConfirm, setDeleteConfirm] = useState<{ type: 'single' | 'multiple'; file?: FileItem; count?: number } | null>(null);
|
||||||
const [conflictState, setConflictState] = useState<{
|
const [conflictState, setConflictState] = useState<{
|
||||||
|
|
@ -2066,7 +2088,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
|
||||||
<Upload className="w-4 h-4" style={{ color: 'var(--color-accent)' }} />
|
<Upload className="w-4 h-4" style={{ color: 'var(--color-accent)' }} />
|
||||||
<span className="text-sm font-medium" style={{ color: 'var(--color-text-primary)' }}>
|
<span className="text-sm font-medium" style={{ color: 'var(--color-text-primary)' }}>
|
||||||
{uploads.filter(u => u.status === 'uploading').length > 0
|
{uploads.filter(u => u.status === 'uploading').length > 0
|
||||||
? `Uploading ${uploads.filter(u => u.status === 'uploading').length} file${uploads.filter(u => u.status === 'uploading').length > 1 ? 's' : ''}`
|
? `Uploading ${uploads.filter(u => u.status === 'uploading').length} file${uploads.filter(u => u.status === 'uploading').length > 1 ? 's' : ''}${formatSpeed(uploadSpeed)}`
|
||||||
: 'Uploads complete'}
|
: 'Uploads complete'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Reference in a new issue