feat(desktop): upload progress on the taskbar button (cinny-desktop #10)
Upload atoms now also report into an app-wide `uploadProgressAtom`, and `aggregateUploadProgress` turns every in-flight upload into one taskbar state: byte-weighted percentage while uploading, indeterminate until a size is known, red after a failure (held 4 s, then cleared), none when done. Cancelled uploads just disappear. `useTauriTaskbarProgress` sends it to the native `set_taskbar_progress`, at most ~4 times a second, always ending on the latest state. Verified with a throttled 6 MB upload: 0% → 99% at 250 ms steps, then cleared; with the upload request aborted: 0% → error → cleared after 4 s. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
25fa0f6ef9
commit
146ba4d2ff
@@ -4,6 +4,7 @@ import { MatrixClient, UploadResponse, UploadProgress, MatrixError } from 'matri
|
||||
import { useCallback, useRef } from 'react';
|
||||
import { useThrottle } from '../hooks/useThrottle';
|
||||
import { uploadContent, TUploadContent } from '../utils/matrix';
|
||||
import { uploadProgressAtom } from './uploadProgress';
|
||||
|
||||
export enum UploadStatus {
|
||||
Idle = 'idle',
|
||||
@@ -61,7 +62,17 @@ export const createUploadAtom = (file: TUploadContent) => {
|
||||
(get) => get(baseUploadAtom),
|
||||
(get, set, update) => {
|
||||
const uploadState = get(baseUploadAtom);
|
||||
// [cinny-desktop #10] Mirror into the app-wide progress map for the
|
||||
// desktop taskbar bar. Cancelled uploads just disappear (no red bar).
|
||||
const track = (entry: { loaded: number; total: number; failed: boolean } | undefined) =>
|
||||
set(uploadProgressAtom, (prev) => {
|
||||
const next = new Map(prev);
|
||||
if (entry) next.set(file, { ...entry, updatedAt: Date.now() });
|
||||
else next.delete(file);
|
||||
return next;
|
||||
});
|
||||
if ('promise' in update) {
|
||||
track({ loaded: 0, total: file.size, failed: false });
|
||||
set(baseUploadAtom, {
|
||||
status: UploadStatus.Loading,
|
||||
file,
|
||||
@@ -71,6 +82,11 @@ export const createUploadAtom = (file: TUploadContent) => {
|
||||
return;
|
||||
}
|
||||
if ('progress' in update && uploadState.status === UploadStatus.Loading) {
|
||||
track({
|
||||
loaded: update.progress.loaded,
|
||||
total: update.progress.total || file.size,
|
||||
failed: false,
|
||||
});
|
||||
set(baseUploadAtom, {
|
||||
...uploadState,
|
||||
progress: update.progress,
|
||||
@@ -78,6 +94,7 @@ export const createUploadAtom = (file: TUploadContent) => {
|
||||
return;
|
||||
}
|
||||
if ('mxc' in update) {
|
||||
track(undefined);
|
||||
set(baseUploadAtom, {
|
||||
status: UploadStatus.Success,
|
||||
file,
|
||||
@@ -86,6 +103,11 @@ export const createUploadAtom = (file: TUploadContent) => {
|
||||
return;
|
||||
}
|
||||
if ('error' in update) {
|
||||
const cancelled =
|
||||
update.error?.name === 'AbortError' || /abort/i.test(update.error?.message ?? '');
|
||||
const loaded =
|
||||
uploadState.status === UploadStatus.Loading ? uploadState.progress.loaded : 0;
|
||||
track(cancelled ? undefined : { loaded, total: file.size, failed: true });
|
||||
set(baseUploadAtom, {
|
||||
status: UploadStatus.Error,
|
||||
file,
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { aggregateUploadProgress, UPLOAD_STALE_MS, UploadProgressEntry } from './uploadProgress';
|
||||
|
||||
const NOW = 1_000_000;
|
||||
const e = (loaded: number, total: number, failed = false, age = 0): UploadProgressEntry => ({
|
||||
loaded,
|
||||
total,
|
||||
failed,
|
||||
updatedAt: NOW - age,
|
||||
});
|
||||
|
||||
test('nothing uploading → no bar', () => {
|
||||
assert.deepEqual(aggregateUploadProgress([], NOW), { status: 'none' });
|
||||
});
|
||||
|
||||
test('byte-weighted percentage across uploads', () => {
|
||||
// 10 of 100 + 90 of 100 = 100 of 200 → 50%
|
||||
assert.deepEqual(aggregateUploadProgress([e(10, 100), e(90, 100)], NOW), {
|
||||
status: 'normal',
|
||||
progress: 50,
|
||||
});
|
||||
// A big file dominates: 0 of 900 + 100 of 100 → 10%
|
||||
assert.deepEqual(aggregateUploadProgress([e(0, 900), e(100, 100)], NOW), {
|
||||
status: 'normal',
|
||||
progress: 10,
|
||||
});
|
||||
});
|
||||
|
||||
test('unknown size → indeterminate', () => {
|
||||
assert.deepEqual(aggregateUploadProgress([e(0, 0)], NOW), { status: 'indeterminate' });
|
||||
});
|
||||
|
||||
test('a failure shows red only once nothing else is uploading', () => {
|
||||
assert.deepEqual(aggregateUploadProgress([e(40, 100, true)], NOW), {
|
||||
status: 'error',
|
||||
progress: 40,
|
||||
});
|
||||
assert.deepEqual(aggregateUploadProgress([e(40, 100, true), e(30, 100)], NOW), {
|
||||
status: 'normal',
|
||||
progress: 30,
|
||||
});
|
||||
});
|
||||
|
||||
test('stale entries are ignored', () => {
|
||||
assert.deepEqual(aggregateUploadProgress([e(10, 100, false, UPLOAD_STALE_MS + 1)], NOW), {
|
||||
status: 'none',
|
||||
});
|
||||
});
|
||||
|
||||
test('loaded never exceeds 100%', () => {
|
||||
assert.deepEqual(aggregateUploadProgress([e(150, 100)], NOW), {
|
||||
status: 'normal',
|
||||
progress: 100,
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
import { atom } from 'jotai';
|
||||
import type { TUploadContent } from '../utils/matrix';
|
||||
|
||||
/**
|
||||
* [cinny-desktop #10] Every in-flight upload across all rooms, so the desktop
|
||||
* taskbar can show one combined progress bar. Written by `createUploadAtom`
|
||||
* (state/upload.ts) as its uploads start, progress, finish or fail.
|
||||
*/
|
||||
export type UploadProgressEntry = {
|
||||
loaded: number;
|
||||
total: number;
|
||||
failed: boolean;
|
||||
/** ms timestamp of the last change; stale entries are ignored. */
|
||||
updatedAt: number;
|
||||
};
|
||||
|
||||
export const uploadProgressAtom = atom(new Map<TUploadContent, UploadProgressEntry>());
|
||||
|
||||
export type TaskbarProgress =
|
||||
| { status: 'none' }
|
||||
| { status: 'indeterminate' }
|
||||
| { status: 'normal'; progress: number }
|
||||
| { status: 'error'; progress: number };
|
||||
|
||||
/** An upload with no update for this long is treated as abandoned. */
|
||||
export const UPLOAD_STALE_MS = 2 * 60_000;
|
||||
|
||||
/**
|
||||
* Combine every upload into one taskbar state: the byte-weighted percentage
|
||||
* while anything is uploading (indeterminate while no size is known yet), red
|
||||
* when an upload failed and nothing else is running, nothing otherwise.
|
||||
*/
|
||||
export const aggregateUploadProgress = (
|
||||
entries: Iterable<UploadProgressEntry>,
|
||||
now: number,
|
||||
): TaskbarProgress => {
|
||||
let loaded = 0;
|
||||
let total = 0;
|
||||
let active = 0;
|
||||
let failed = 0;
|
||||
let failedLoaded = 0;
|
||||
let failedTotal = 0;
|
||||
Array.from(entries).forEach((e) => {
|
||||
if (now - e.updatedAt > UPLOAD_STALE_MS) return;
|
||||
if (e.failed) {
|
||||
failed += 1;
|
||||
failedLoaded += e.loaded;
|
||||
failedTotal += e.total;
|
||||
return;
|
||||
}
|
||||
active += 1;
|
||||
loaded += Math.min(e.loaded, e.total);
|
||||
total += e.total;
|
||||
});
|
||||
if (active > 0) {
|
||||
if (total <= 0) return { status: 'indeterminate' };
|
||||
return { status: 'normal', progress: Math.min(100, Math.floor((loaded / total) * 100)) };
|
||||
}
|
||||
if (failed > 0) {
|
||||
return {
|
||||
status: 'error',
|
||||
progress:
|
||||
failedTotal > 0 ? Math.min(100, Math.floor((failedLoaded / failedTotal) * 100)) : 100,
|
||||
};
|
||||
}
|
||||
return { status: 'none' };
|
||||
};
|
||||
Reference in New Issue
Block a user