feat: run book uploads in a background tray
One request per book instead of one for everything, queued in state above the dialog so closing it no longer cancels the import. A docked tray reports each book and offers a retry; it clears itself after a clean run, stays put if anything failed, and holds while hovered. Also fixes the dialog overflowing on long filenames — Dialog.Content is a grid and its body needed min-w-0 to shrink below the content's intrinsic width.
This commit is contained in:
@@ -0,0 +1,226 @@
|
||||
import { getContext, setContext } from 'svelte';
|
||||
import { invalidate } from '$app/navigation';
|
||||
|
||||
import type { Book, PaginatedResponse } from '$lib/schema';
|
||||
|
||||
export type UploadStatus = 'queued' | 'uploading' | 'done' | 'failed';
|
||||
|
||||
export interface UploadJob {
|
||||
id: string;
|
||||
/** The book's folder, or the filename for a book that is a single file. */
|
||||
label: string;
|
||||
libraryId: number | string;
|
||||
files: File[];
|
||||
size: number;
|
||||
status: UploadStatus;
|
||||
error?: string;
|
||||
book?: Book;
|
||||
}
|
||||
|
||||
export interface UploadSummary {
|
||||
created: number;
|
||||
failed: number;
|
||||
firstBook?: Book;
|
||||
}
|
||||
|
||||
/**
|
||||
* Matches the grouping in BookService.create_books_from_files: files are grouped
|
||||
* by their parent directory, except those at the root, which each become their
|
||||
* own book. Diverging from it would split one book across two records.
|
||||
*/
|
||||
function groupByBook(files: File[]): [key: string, files: File[]][] {
|
||||
// A plain record rather than a Map: this is a throwaway local, and Svelte's
|
||||
// lint rule steers any Map towards the reactive SvelteMap.
|
||||
const groups: Record<string, File[]> = {};
|
||||
|
||||
for (const file of files) {
|
||||
const cut = file.name.lastIndexOf('/');
|
||||
const key = cut === -1 ? file.name : file.name.slice(0, cut);
|
||||
|
||||
(groups[key] ??= []).push(file);
|
||||
}
|
||||
|
||||
return Object.entries(groups);
|
||||
}
|
||||
|
||||
function label(key: string) {
|
||||
const cut = key.lastIndexOf('/');
|
||||
return cut === -1 ? key : key.slice(cut + 1);
|
||||
}
|
||||
|
||||
function warnBeforeUnload(event: BeforeUnloadEvent) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
/** How long a clean run stays on screen before clearing itself. */
|
||||
const DISMISS_AFTER_MS = 6000;
|
||||
|
||||
/**
|
||||
* Uploads books one request at a time and keeps the result on screen.
|
||||
*
|
||||
* Lives above the dialog so a run outlives it — the dialog only adds to the
|
||||
* queue, and the tray in the root layout is what reports on it. This is why
|
||||
* uploads do not go through a remote function: one request per book is what
|
||||
* makes progress real, bounds how much any single request buffers, and stops
|
||||
* one bad file taking the whole import with it.
|
||||
*/
|
||||
export class UploadQueueState {
|
||||
jobs = $state<UploadJob[]>([]);
|
||||
collapsed = $state(false);
|
||||
|
||||
readonly total = $derived(this.jobs.length);
|
||||
readonly done = $derived(this.jobs.filter((job) => job.status === 'done').length);
|
||||
readonly failed = $derived(this.jobs.filter((job) => job.status === 'failed').length);
|
||||
readonly active = $derived(
|
||||
this.jobs.some((job) => job.status === 'queued' || job.status === 'uploading')
|
||||
);
|
||||
readonly current = $derived(this.jobs.find((job) => job.status === 'uploading'));
|
||||
readonly settled = $derived(this.done + this.failed);
|
||||
|
||||
#running = false;
|
||||
#dismissTimer: ReturnType<typeof setTimeout> | undefined;
|
||||
#held = false;
|
||||
|
||||
/** Adds one job per book and starts the runner if it is not already going. */
|
||||
enqueue(
|
||||
libraryId: number | string,
|
||||
files: File[],
|
||||
onFinished?: (summary: UploadSummary) => void
|
||||
) {
|
||||
const added = groupByBook(files).map(([key, group]) => ({
|
||||
id: `${libraryId}:${key}`,
|
||||
label: label(key),
|
||||
libraryId,
|
||||
files: group,
|
||||
size: group.reduce((sum, file) => sum + file.size, 0),
|
||||
status: 'queued' as UploadStatus
|
||||
}));
|
||||
|
||||
if (added.length === 0) return;
|
||||
|
||||
clearTimeout(this.#dismissTimer);
|
||||
|
||||
// A finished run stays on screen until dismissed; adding to it starts fresh
|
||||
// rather than appending to a report the reader has already read.
|
||||
if (!this.active) this.jobs = [];
|
||||
|
||||
this.jobs = [...this.jobs, ...added];
|
||||
this.collapsed = false;
|
||||
|
||||
void this.#run(onFinished);
|
||||
}
|
||||
|
||||
dismiss() {
|
||||
if (this.active) return;
|
||||
clearTimeout(this.#dismissTimer);
|
||||
this.jobs = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds a finished run on screen while the pointer is over it.
|
||||
*
|
||||
* Without this the tray can vanish from under a reader who is part-way
|
||||
* through reading which books were added.
|
||||
*/
|
||||
hold() {
|
||||
this.#held = true;
|
||||
clearTimeout(this.#dismissTimer);
|
||||
}
|
||||
|
||||
release() {
|
||||
this.#held = false;
|
||||
if (!this.active && this.failed === 0 && this.total > 0) this.#scheduleDismiss();
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears itself only when everything worked. A run with failures stays until
|
||||
* dismissed — it is the only record of what did not make it in, and the only
|
||||
* place to retry from.
|
||||
*/
|
||||
#scheduleDismiss() {
|
||||
clearTimeout(this.#dismissTimer);
|
||||
if (this.#held) return;
|
||||
|
||||
this.#dismissTimer = setTimeout(() => {
|
||||
if (!this.active && this.failed === 0) this.jobs = [];
|
||||
}, DISMISS_AFTER_MS);
|
||||
}
|
||||
|
||||
/** Re-queues everything that failed, so one bad book is not a reason to start over. */
|
||||
retryFailed() {
|
||||
this.jobs = this.jobs.map((job) =>
|
||||
job.status === 'failed' ? { ...job, status: 'queued' as UploadStatus, error: undefined } : job
|
||||
);
|
||||
void this.#run();
|
||||
}
|
||||
|
||||
async #run(onFinished?: (summary: UploadSummary) => void) {
|
||||
if (this.#running) return;
|
||||
this.#running = true;
|
||||
|
||||
// Nothing here is resumable, so leaving mid-run loses whatever is left.
|
||||
window.addEventListener('beforeunload', warnBeforeUnload);
|
||||
|
||||
let created = 0;
|
||||
let firstBook: Book | undefined;
|
||||
|
||||
try {
|
||||
for (;;) {
|
||||
const index = this.jobs.findIndex((job) => job.status === 'queued');
|
||||
if (index === -1) break;
|
||||
|
||||
this.#patch(index, { status: 'uploading' });
|
||||
|
||||
try {
|
||||
const body = new FormData();
|
||||
for (const file of this.jobs[index].files) body.append('files', file);
|
||||
|
||||
const response = await fetch(
|
||||
`/api/books/fromFiles?library_id=${encodeURIComponent(String(this.jobs[index].libraryId))}`,
|
||||
{ method: 'POST', body }
|
||||
);
|
||||
|
||||
if (!response.ok) throw new Error(`The server returned ${response.status}`);
|
||||
|
||||
const result: PaginatedResponse<Book> = await response.json();
|
||||
const book = result.items[0];
|
||||
|
||||
created += result.total ?? result.items.length;
|
||||
firstBook ??= book;
|
||||
|
||||
this.#patch(index, { status: 'done', book });
|
||||
} catch (error) {
|
||||
// One bad book must not take the rest of the queue with it.
|
||||
console.error(`Failed to upload ${this.jobs[index].label}`, error);
|
||||
this.#patch(index, {
|
||||
status: 'failed',
|
||||
error: error instanceof Error ? error.message : 'Upload failed'
|
||||
});
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
this.#running = false;
|
||||
window.removeEventListener('beforeunload', warnBeforeUnload);
|
||||
}
|
||||
|
||||
if (created > 0) await invalidate('app:books');
|
||||
|
||||
if (this.failed === 0) this.#scheduleDismiss();
|
||||
|
||||
onFinished?.({ created, failed: this.failed, firstBook });
|
||||
}
|
||||
|
||||
#patch(index: number, changes: Partial<UploadJob>) {
|
||||
this.jobs[index] = { ...this.jobs[index], ...changes };
|
||||
}
|
||||
}
|
||||
|
||||
const UPLOAD_QUEUE_KEY = Symbol('UPLOAD_QUEUE');
|
||||
|
||||
export function setUploadQueueState() {
|
||||
return setContext(UPLOAD_QUEUE_KEY, new UploadQueueState());
|
||||
}
|
||||
|
||||
export function getUploadQueueState() {
|
||||
return getContext<ReturnType<typeof setUploadQueueState>>(UPLOAD_QUEUE_KEY);
|
||||
}
|
||||
Reference in New Issue
Block a user