peter
c5e022f056
Closes the burn-down. Hook suppressions 113 -> 34, `exhaustive-deps` 45 -> 2 (the target was <10), and every one of the 34 survivors is an inline directive NAMING the invariant it protects. The suppressions file is deleted, because a bulk file hides the next violation instead of answering it — and it cannot hold a warning-level rule at all. The sprint plan's three verdicts missed the answer that turned out to be the most common one: adjust the state DURING RENDER. React re-runs the component and discards that pass rather than committing it, so the stale frame an effect-based reset paints does not exist. Applied to the Plex player's up-next card, the playlist view reset, the feed's optimistic overrides, the channel banner's retry count, the download center's tab guard, the Plex search highlight, the comfort-pin latch, Welcome's per-view outcome and the card pager's page clamp. It is legal only for a component's own state — PlexBrowse's language commit resets PlexProvider's filters, so that one stays an effect and says why. Mirrors of a prop or query became derived values or `draft ?? server`: - `downloadRow` had ui/Avatar's defect exactly — a boolean "poster failed" that an effect reset, in rows recycled down a virtualized list, so one job's missing poster painted over the next one's for a frame. Keyed by URL now. - Scheduler's two number editors held a mirror an effect re-synced, on a page that POLLS — the shape a poll can overwrite mid-edit. A draft while editing, the server's value otherwise; six tests where there were none, the one behavioural change (the save button stops being dirty at commit rather than at the echo) mutation-checked. - SetupWizard's "no token" and WatchPage's "gone" are facts about the URL, so they are seeded and derived rather than pushed into state by an effect that had to commit first. Elsewhere: PlexInfo's rating chip was a component declared during render — a new component type every render, so React remounted the subtree and dropped the focus on its filter button. Hoisted. Feed's undo action and PlexPlayer's session reclaim both re-entered their own useCallback, which the checker reads as a forward reference; both go through the ref idiom this file already uses. BootGate's dep list was load-bearing for correctness — a re-run meant `location.reload()` — so the "already adopted THIS identity" comparison now enforces it in code, with a test that fails without it (the existing reload tests all install their spy too late to catch it). One correction to the batch before this: keying ChatThread's and Messages' decrypt passes on `q.data` instead of `q.dataUpdatedAt` was wrong. react-query's structural sharing makes it safe in production, but the component must not melt down when something hands back a fresh object per render — and Messages.keyboard.dom.test does exactly that, so the effect span the suite. Both are back on the fetch as the trigger with the payload behind a ref, which is honest AND loop-proof; the replaced comment had warned about precisely this. CLAUDE.md gains four canonical-patterns rows for the above, and its "React 18" line is now true.
459 lines
19 KiB
TypeScript
459 lines
19 KiB
TypeScript
import { lazy, Suspense, useState } from "react";
|
|
import { qk } from "../lib/queryKeys";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
Ban,
|
|
ClipboardPaste,
|
|
Download,
|
|
Link2,
|
|
Pause,
|
|
Play,
|
|
PlayCircle,
|
|
Plus,
|
|
RotateCcw,
|
|
Scissors,
|
|
Settings2,
|
|
Share2,
|
|
Pencil,
|
|
Trash2,
|
|
UploadCloud,
|
|
} from "lucide-react";
|
|
import Tabs from "./ui/Tabs";
|
|
import { PageToolbar } from "./ui/PageShell";
|
|
import { LoadingState, StateMessage } from "./ui/QueryState";
|
|
// Lazy: these dialogs/editors open on demand, so they stay out of the Downloads page chunk until
|
|
// used (the video editor in particular is heavy — filmstrip + scrubber).
|
|
const DownloadDialog = lazy(() => import("./DownloadDialog"));
|
|
const UploadDialog = lazy(() => import("./UploadDialog"));
|
|
const ProfileEditor = lazy(() => import("./ProfileEditor"));
|
|
const VideoEditor = lazy(() => import("./VideoEditor"));
|
|
const ShareDialog = lazy(() => import("./ShareDialog"));
|
|
const LibraryPlayer = lazy(() => import("./LibraryPlayer"));
|
|
import { useConfirm } from "./confirmContext";
|
|
import { useLiveQuery } from "../lib/useLiveQuery";
|
|
import { useMe } from "../lib/useMe";
|
|
import { api, type DownloadJob } from "../lib/api";
|
|
import { notifyActionError } from "../lib/actionErrors";
|
|
import { invalidateDownloads, quickShareLink } from "../lib/downloads";
|
|
import { libraryRowActions, sharedRowActions } from "../lib/downloadActions";
|
|
import { inputCls } from "./ui/form";
|
|
import { Button } from "./ui/Button";
|
|
import { DownloadRow, IconBtn, UsageBar } from "./downloadRow";
|
|
import { MetaEditModal, ErrorModal } from "./downloadModals";
|
|
import { AdminSystem } from "./downloadAdmin";
|
|
import NavGrid from "./ui/NavGrid";
|
|
|
|
export default function DownloadCenter() {
|
|
const me = useMe();
|
|
const { t } = useTranslation();
|
|
const qc = useQueryClient();
|
|
const confirm = useConfirm();
|
|
// Always land on the queue tab (not a persisted last-tab) — the queue is where new work and
|
|
// any failures are, so it's the useful default every visit.
|
|
const [tab, setTab] = useState("queue");
|
|
const [addUrl, setAddUrl] = useState("");
|
|
const [addSource, setAddSource] = useState<string | null>(null);
|
|
const [upload, setUpload] = useState(false);
|
|
const [manage, setManage] = useState(false);
|
|
const [metaJob, setMetaJob] = useState<DownloadJob | null>(null);
|
|
const [shareJob, setShareJob] = useState<DownloadJob | null>(null);
|
|
const [playJob, setPlayJob] = useState<DownloadJob | null>(null);
|
|
const [editJob, setEditJob] = useState<DownloadJob | null>(null);
|
|
const [errorJob, setErrorJob] = useState<DownloadJob | null>(null);
|
|
|
|
// Poll fast (2s) while work is actually in flight; back off to 15s once the queue is settled
|
|
// (only done/error/paused rows left, which don't advance on their own) so an idle Download Center
|
|
// isn't hitting the API — and adding to the shared box's load — every 2s for nothing.
|
|
const jobsQ = useLiveQuery(qk.downloads(), api.downloads, {
|
|
intervalMs: (data) =>
|
|
data?.some((j) => j.status === "queued" || j.status === "running") ? 2000 : 15000,
|
|
});
|
|
const sharedQ = useQuery({
|
|
queryKey: qk.downloadsShared(),
|
|
queryFn: api.downloadsShared,
|
|
enabled: tab === "shared",
|
|
});
|
|
const jobs = jobsQ.data ?? [];
|
|
const queue = jobs.filter((j) => ["queued", "running", "paused", "error"].includes(j.status));
|
|
const library = jobs.filter((j) => j.status === "done");
|
|
|
|
const invalidate = () => invalidateDownloads(qc);
|
|
const act = useMutation({
|
|
mutationFn: ({
|
|
id,
|
|
op,
|
|
}: {
|
|
id: number;
|
|
op: "pause" | "resume" | "cancel" | "delete" | "redownload";
|
|
}) =>
|
|
op === "pause"
|
|
? api.pauseDownload(id)
|
|
: op === "resume"
|
|
? api.resumeDownload(id)
|
|
: op === "cancel"
|
|
? api.cancelDownload(id)
|
|
: op === "redownload"
|
|
? api.redownloadDownload(id)
|
|
: api.deleteDownload(id),
|
|
onSuccess: invalidate,
|
|
// A 400/409/422/500 opens the global error dialog with the backend's own message (and is then
|
|
// skipped here); a job that is gone (404) or a lost connection is said here, naming the action.
|
|
onError: (e, v) => notifyActionError(e, t(`errors.writeFailed.job.${v.op}`)),
|
|
});
|
|
|
|
// Remove a shared-with-me item from your list (only your grant; the owner's file is untouched).
|
|
const removeShared = useMutation({
|
|
mutationFn: (id: number) => api.removeSharedDownload(id),
|
|
onSuccess: () => qc.invalidateQueries({ queryKey: qk.downloadsShared() }),
|
|
meta: { failTitle: "errors.writeFailed.removeShared" },
|
|
});
|
|
|
|
// The confirm button names the ACTION ("Remove"), never the dialog's question: labelled with the title
|
|
// it read "Re-download this file?", and the cancel dialog's own "Cancel" would sit beside "Cancel".
|
|
const confirmThen = async (title: string, body: string, action: string, fn: () => void) => {
|
|
if (await confirm({ title, message: body, confirmLabel: action, danger: true })) fn();
|
|
};
|
|
|
|
// One-click share (E7 S3 · D2-A): ensure a downloadable link, copy it, toast with "open in new tab"
|
|
// (see quickShareLink). Re-clicking reuses the existing link; a per-job in-flight guard also stops a
|
|
// double-click from racing two POSTs into two links before the cache is primed. Advanced controls
|
|
// (password, expiry, revoke, share-with-a-user) live in the Share dialog, via the manage-share button.
|
|
const [sharingId, setSharingId] = useState<number | null>(null);
|
|
const quickShare = async (job: DownloadJob) => {
|
|
if (sharingId !== null) return;
|
|
setSharingId(job.id);
|
|
try {
|
|
await quickShareLink(qc, job, t);
|
|
} finally {
|
|
setSharingId(null);
|
|
}
|
|
};
|
|
|
|
// Pull a link off the clipboard into the add-URL box. Clipboard reads need a secure context +
|
|
// a user gesture/permission (iOS Safari/Brave are strict) — so this is best-effort: the paste
|
|
// button is an explicit gesture (reliable), and the input's onFocus tries silently (ignored if
|
|
// the browser refuses without a click). Only accept an http(s) URL, don't clobber existing text.
|
|
const pasteFromClipboard = async (force = false) => {
|
|
if (!force && addUrl.trim()) return;
|
|
try {
|
|
const text = (await navigator.clipboard?.readText())?.trim();
|
|
if (text && /^https?:\/\/\S+$/i.test(text)) setAddUrl(text);
|
|
} catch {
|
|
/* permission denied or unsupported — the manual paste button still works on a click */
|
|
}
|
|
};
|
|
|
|
const tabs = [
|
|
{ id: "queue", label: t("downloads.tabs.queue"), badge: queue.length },
|
|
{ id: "done", label: t("downloads.tabs.done"), badge: library.length },
|
|
{ id: "shared", label: t("downloads.tabs.shared") },
|
|
...(me.role === "admin" ? [{ id: "system", label: t("downloads.tabs.system") }] : []),
|
|
];
|
|
// Guard against the active tab going away under us (e.g. admin on "system" gets demoted mid-session)
|
|
// — that would render a blank page with no active tab. Fall back to the default.
|
|
// Adjusted during render rather than from an effect: as an effect the blank page it exists to
|
|
// prevent was committed and painted first. `setTab` is this component's own state (persisted per
|
|
// account), so a render-phase write is allowed, and it converges — "queue" is always in the list.
|
|
if (!tabs.some((tb) => tb.id === tab)) setTab("queue");
|
|
|
|
const saveBtn = (job: DownloadJob) => (
|
|
<a
|
|
href={api.downloadFileUrl(job.id)}
|
|
title={t("downloads.actions.download")}
|
|
className="p-1.5 rounded-md hover:bg-surface text-muted hover:text-fg transition"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
</a>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{/* Page title + subtitle + tabs are fixed chrome; the tab content scrolls under them. */}
|
|
<PageToolbar>
|
|
<div className="px-4 pt-2 max-w-4xl w-full mx-auto">
|
|
<div className="flex items-center justify-between gap-3 mb-1">
|
|
<h1 className="text-xl font-semibold">{t("downloads.page.title")}</h1>
|
|
<button
|
|
onClick={() => setManage(true)}
|
|
className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-sm text-muted hover:text-fg hover:bg-surface transition"
|
|
>
|
|
<Settings2 className="w-4 h-4" /> {t("downloads.page.manage")}
|
|
</button>
|
|
</div>
|
|
<p className="text-sm text-muted mb-4">{t("downloads.page.subtitle")}</p>
|
|
|
|
<Tabs tabs={tabs} active={tab} onChange={setTab} />
|
|
</div>
|
|
</PageToolbar>
|
|
|
|
<div className="px-4 pb-4 pt-3 max-w-4xl w-full mx-auto">
|
|
{tab === "queue" && (
|
|
<>
|
|
<div className="flex gap-2 mb-4">
|
|
<input
|
|
value={addUrl}
|
|
onChange={(e) => setAddUrl(e.target.value)}
|
|
onFocus={() => pasteFromClipboard()}
|
|
onKeyDown={(e) => e.key === "Enter" && addUrl.trim() && setAddSource(addUrl.trim())}
|
|
placeholder={t("downloads.page.addUrl")}
|
|
className={inputCls}
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
iconOnly
|
|
icon={<ClipboardPaste className="w-4 h-4" />}
|
|
label={t("downloads.page.paste")}
|
|
onClick={() => pasteFromClipboard(true)}
|
|
className="shrink-0"
|
|
/>
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
icon={<Plus className="w-4 h-4" />}
|
|
onClick={() => addUrl.trim() && setAddSource(addUrl.trim())}
|
|
className="shrink-0"
|
|
>
|
|
{t("downloads.page.add")}
|
|
</Button>
|
|
{/* Local upload is a peer to "add a URL": a general file → the same library (E7 S5c). */}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
icon={<UploadCloud className="w-4 h-4" />}
|
|
onClick={() => setUpload(true)}
|
|
className="shrink-0"
|
|
>
|
|
{t("downloads.page.upload")}
|
|
</Button>
|
|
</div>
|
|
<NavGrid className="space-y-2">
|
|
{queue.map((job, i) => (
|
|
<DownloadRow key={job.id} job={job} navIndex={i} onShowError={setErrorJob}>
|
|
{(job.status === "queued" || job.status === "running") && (
|
|
<IconBtn
|
|
onClick={() => act.mutate({ id: job.id, op: "pause" })}
|
|
title={t("downloads.actions.pause")}
|
|
>
|
|
<Pause className="w-4 h-4" />
|
|
</IconBtn>
|
|
)}
|
|
{(job.status === "paused" || job.status === "error") && (
|
|
<IconBtn
|
|
onClick={() => act.mutate({ id: job.id, op: "resume" })}
|
|
title={t(
|
|
job.status === "error"
|
|
? "downloads.actions.retry"
|
|
: "downloads.actions.resume",
|
|
)}
|
|
>
|
|
<Play className="w-4 h-4" />
|
|
</IconBtn>
|
|
)}
|
|
<IconBtn
|
|
onClick={() =>
|
|
confirmThen(
|
|
t("downloads.confirm.cancelTitle"),
|
|
t("downloads.confirm.cancelBody"),
|
|
t("downloads.confirm.cancelAction"),
|
|
() => act.mutate({ id: job.id, op: "cancel" }),
|
|
)
|
|
}
|
|
title={t("downloads.actions.cancel")}
|
|
danger
|
|
>
|
|
<Ban className="w-4 h-4" />
|
|
</IconBtn>
|
|
</DownloadRow>
|
|
))}
|
|
{queue.length === 0 &&
|
|
(jobsQ.isError && !jobsQ.data ? (
|
|
<StateMessage tone="error" onRetry={() => jobsQ.refetch()}>
|
|
{t("common.loadError")}
|
|
</StateMessage>
|
|
) : jobsQ.isLoading ? (
|
|
<LoadingState />
|
|
) : (
|
|
<div className="text-sm text-muted py-10 text-center">
|
|
{t("downloads.empty.queue")}
|
|
</div>
|
|
))}
|
|
</NavGrid>
|
|
</>
|
|
)}
|
|
|
|
{tab === "done" && (
|
|
<>
|
|
<UsageBar />
|
|
<NavGrid className="space-y-2">
|
|
{library.map((job, i) => {
|
|
// Row actions gated on the stored media_kind + job_kind (see downloadActions).
|
|
const a = libraryRowActions(job);
|
|
return (
|
|
<DownloadRow key={job.id} job={job} navIndex={i}>
|
|
{a.play && (
|
|
<IconBtn
|
|
open
|
|
onClick={() => setPlayJob(job)}
|
|
title={t("downloads.actions.play")}
|
|
>
|
|
<PlayCircle className="w-4 h-4" />
|
|
</IconBtn>
|
|
)}
|
|
{saveBtn(job)}
|
|
{a.edit && (
|
|
<IconBtn onClick={() => setEditJob(job)} title={t("downloads.actions.edit")}>
|
|
<Scissors className="w-4 h-4" />
|
|
</IconBtn>
|
|
)}
|
|
{a.editDetails && (
|
|
<IconBtn
|
|
onClick={() => setMetaJob(job)}
|
|
title={t("downloads.actions.editDetails")}
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
</IconBtn>
|
|
)}
|
|
<IconBtn onClick={() => quickShare(job)} title={t("downloads.actions.share")}>
|
|
<Share2 className="w-4 h-4" />
|
|
</IconBtn>
|
|
<IconBtn
|
|
onClick={() => setShareJob(job)}
|
|
title={t("downloads.actions.shareManage")}
|
|
>
|
|
<Link2 className="w-4 h-4" />
|
|
</IconBtn>
|
|
{a.redownload && (
|
|
<IconBtn
|
|
onClick={() =>
|
|
confirmThen(
|
|
t("downloads.confirm.redownloadTitle"),
|
|
t("downloads.confirm.redownloadBody"),
|
|
t("downloads.confirm.redownloadAction"),
|
|
() => act.mutate({ id: job.id, op: "redownload" }),
|
|
)
|
|
}
|
|
title={t("downloads.actions.redownload")}
|
|
>
|
|
<RotateCcw className="w-4 h-4" />
|
|
</IconBtn>
|
|
)}
|
|
<IconBtn
|
|
onClick={() =>
|
|
confirmThen(
|
|
t("downloads.confirm.deleteTitle"),
|
|
t("downloads.confirm.deleteBody"),
|
|
t("downloads.actions.delete"),
|
|
() => act.mutate({ id: job.id, op: "delete" }),
|
|
)
|
|
}
|
|
title={t("downloads.actions.delete")}
|
|
danger
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</IconBtn>
|
|
</DownloadRow>
|
|
);
|
|
})}
|
|
{library.length === 0 &&
|
|
(jobsQ.isError && !jobsQ.data ? (
|
|
<StateMessage tone="error" onRetry={() => jobsQ.refetch()}>
|
|
{t("common.loadError")}
|
|
</StateMessage>
|
|
) : jobsQ.isLoading ? (
|
|
<LoadingState />
|
|
) : (
|
|
<div className="text-sm text-muted py-10 text-center">
|
|
{t("downloads.empty.done")}
|
|
</div>
|
|
))}
|
|
</NavGrid>
|
|
</>
|
|
)}
|
|
|
|
{tab === "shared" && (
|
|
<NavGrid className="space-y-2">
|
|
{(sharedQ.data ?? []).map((job, i) => {
|
|
// Same media_kind + can_download gate as the library, via the shared helper (S5b).
|
|
const a = sharedRowActions(job);
|
|
return (
|
|
<DownloadRow key={job.id} job={job} navIndex={i}>
|
|
{a.play && (
|
|
<IconBtn
|
|
open
|
|
onClick={() => setPlayJob(job)}
|
|
title={t("downloads.actions.play")}
|
|
>
|
|
<PlayCircle className="w-4 h-4" />
|
|
</IconBtn>
|
|
)}
|
|
{a.save && saveBtn(job)}
|
|
{a.edit && (
|
|
<IconBtn onClick={() => setEditJob(job)} title={t("downloads.actions.edit")}>
|
|
<Scissors className="w-4 h-4" />
|
|
</IconBtn>
|
|
)}
|
|
<IconBtn
|
|
onClick={() =>
|
|
confirmThen(
|
|
t("downloads.confirm.removeSharedTitle"),
|
|
t("downloads.confirm.removeSharedBody"),
|
|
t("downloads.actions.removeShared"),
|
|
() => removeShared.mutate(job.id),
|
|
)
|
|
}
|
|
title={t("downloads.actions.removeShared")}
|
|
danger
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</IconBtn>
|
|
</DownloadRow>
|
|
);
|
|
})}
|
|
{(sharedQ.data ?? []).length === 0 &&
|
|
(sharedQ.isError && !sharedQ.data ? (
|
|
<StateMessage tone="error" onRetry={() => sharedQ.refetch()}>
|
|
{t("common.loadError")}
|
|
</StateMessage>
|
|
) : sharedQ.isLoading ? (
|
|
<LoadingState />
|
|
) : (
|
|
<div className="text-sm text-muted py-10 text-center">
|
|
{t("downloads.empty.shared")}
|
|
</div>
|
|
))}
|
|
</NavGrid>
|
|
)}
|
|
|
|
{tab === "system" && me.role === "admin" && <AdminSystem />}
|
|
|
|
<Suspense fallback={null}>
|
|
{addSource && (
|
|
<DownloadDialog
|
|
source={addSource}
|
|
onClose={() => {
|
|
setAddSource(null);
|
|
setAddUrl("");
|
|
}}
|
|
/>
|
|
)}
|
|
{upload && <UploadDialog onClose={() => setUpload(false)} />}
|
|
{manage && <ProfileEditor onClose={() => setManage(false)} />}
|
|
{metaJob && <MetaEditModal job={metaJob} onClose={() => setMetaJob(null)} />}
|
|
{shareJob && <ShareDialog job={shareJob} onClose={() => setShareJob(null)} />}
|
|
{playJob && <LibraryPlayer job={playJob} onClose={() => setPlayJob(null)} />}
|
|
{editJob && <VideoEditor job={editJob} onClose={() => setEditJob(null)} />}
|
|
{errorJob && (
|
|
<ErrorModal
|
|
job={errorJob}
|
|
onRetry={() => act.mutate({ id: errorJob.id, op: "resume" })}
|
|
onClose={() => setErrorJob(null)}
|
|
/>
|
|
)}
|
|
</Suspense>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|