refactor(downloads): split DownloadCenter god-file into row + modals + admin (E4 S5)
Pure code-motion, DownloadCenter 1088->359 L. Group by kind, mirroring the S4 plexCards/plexViews split: - components/downloadRow.tsx (309 L): the user-list presentation + shared row primitives — StatusPill, Thumb, IconBtn, SourceRef, ChannelLine, DownloadRow, UsageBar (+ jobTitle/jobChannel/displayUrl helpers, status/phase constants). - components/downloadModals.tsx (178 L): the per-item user modals — MetaEditModal (rename/metadata) and ErrorModal (failure detail + retry). - components/downloadAdmin.tsx (267 L): the admin "System" tab — AdminSystem plus QuotaModal and QuotaUserPicker. Every extracted piece is prop-driven with no shell-state reach-back, so the shell just imports them back; the tab logic, mutations and modal state stay in DownloadCenter. Behaviour-preserving. Gate green (tsc first try, knip, lint 0-err, 247 vitest). Self-E2E (localdev): Queue/Library/Shared/System tabs render, UsageBar, admin storage/footprint/job list, MetaEditModal open/close, 0 console errors.
This commit is contained in:
@@ -1,14 +1,11 @@
|
|||||||
import { lazy, Suspense, useEffect, useMemo, useState } from "react";
|
import { lazy, Suspense, useEffect, useState } from "react";
|
||||||
import { qk } from "../lib/queryKeys";
|
import { qk } from "../lib/queryKeys";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||||
import {
|
import {
|
||||||
Ban,
|
Ban,
|
||||||
CalendarClock,
|
|
||||||
ClipboardPaste,
|
ClipboardPaste,
|
||||||
Copy,
|
|
||||||
Download,
|
Download,
|
||||||
Link2,
|
|
||||||
Pause,
|
Pause,
|
||||||
Play,
|
Play,
|
||||||
Plus,
|
Plus,
|
||||||
@@ -19,11 +16,9 @@ import {
|
|||||||
Pencil,
|
Pencil,
|
||||||
Trash2,
|
Trash2,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import clsx from "clsx";
|
|
||||||
import Tabs from "./Tabs";
|
import Tabs from "./Tabs";
|
||||||
import { PageToolbar } from "./PageShell";
|
import { PageToolbar } from "./PageShell";
|
||||||
import { LoadingState, StateMessage } from "./QueryState";
|
import { LoadingState, StateMessage } from "./QueryState";
|
||||||
import Modal from "./Modal";
|
|
||||||
// Lazy: these dialogs/editors open on demand, so they stay out of the Downloads page chunk until
|
// 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).
|
// used (the video editor in particular is heavy — filmstrip + scrubber).
|
||||||
const DownloadDialog = lazy(() => import("./DownloadDialog"));
|
const DownloadDialog = lazy(() => import("./DownloadDialog"));
|
||||||
@@ -35,734 +30,10 @@ import { useLiveQuery } from "../lib/useLiveQuery";
|
|||||||
import { useMe } from "../lib/useMe";
|
import { useMe } from "../lib/useMe";
|
||||||
import { api, type DownloadJob } from "../lib/api";
|
import { api, type DownloadJob } from "../lib/api";
|
||||||
import { invalidateDownloads } from "../lib/downloads";
|
import { invalidateDownloads } from "../lib/downloads";
|
||||||
import { notify } from "../lib/notifications";
|
|
||||||
import { copyText } from "../lib/clipboard";
|
|
||||||
import { formatBytes, formatDuration, formatEta, formatSpeed, relativeTime } from "../lib/format";
|
|
||||||
import { inputCls } from "./ui/form";
|
import { inputCls } from "./ui/form";
|
||||||
|
import { DownloadRow, IconBtn, UsageBar } from "./downloadRow";
|
||||||
const GiB = 1024 ** 3;
|
import { MetaEditModal, ErrorModal } from "./downloadModals";
|
||||||
|
import { AdminSystem } from "./downloadAdmin";
|
||||||
const STATUS_CLS: Record<string, string> = {
|
|
||||||
queued: "text-muted",
|
|
||||||
running: "text-accent",
|
|
||||||
paused: "text-warn",
|
|
||||||
done: "text-success",
|
|
||||||
error: "text-danger",
|
|
||||||
canceled: "text-muted",
|
|
||||||
};
|
|
||||||
|
|
||||||
// Byte-progress phases (show a % bar) vs ffmpeg post-steps (no %, indeterminate pulse).
|
|
||||||
// "editing" (the phase-2 editor) reports a real % from ffmpeg's out_time, so it gets a bar.
|
|
||||||
const DOWNLOAD_PHASES = ["video", "audio", "editing"];
|
|
||||||
const PHASE_KEYS = [
|
|
||||||
"video",
|
|
||||||
"audio",
|
|
||||||
"editing",
|
|
||||||
"merging",
|
|
||||||
"audio_extract",
|
|
||||||
"thumbnail",
|
|
||||||
"sponsorblock",
|
|
||||||
"metadata",
|
|
||||||
"processing",
|
|
||||||
];
|
|
||||||
|
|
||||||
function StatusPill({ job }: { job: DownloadJob }) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
// While downloading, show the concrete phase (video / audio / merging) so the user isn't
|
|
||||||
// confused by the bar resetting between the separate video and audio streams.
|
|
||||||
if (job.status === "running" && job.phase && PHASE_KEYS.includes(job.phase)) {
|
|
||||||
return (
|
|
||||||
<span className="text-xs font-medium text-accent">{t(`downloads.phase.${job.phase}`)}</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const key = job.expired ? "expired" : job.status;
|
|
||||||
return (
|
|
||||||
<span className={clsx("text-xs font-medium", STATUS_CLS[job.status] ?? "text-muted")}>
|
|
||||||
{t(`downloads.status.${key}`)}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Thumb({ job }: { job: DownloadJob }) {
|
|
||||||
// Prefer OUR self-hosted poster: it's always present on disk, never expires, and is same-origin, so
|
|
||||||
// a source-CDN signature expiry (Facebook's fbcdn URLs expire within days) or an ad-blocker/Shields
|
|
||||||
// rule on the source domain can't break it. The source's remote thumbnail_url is only a fallback for
|
|
||||||
// the rare poster-less asset (a thumbnail-less source whose ffmpeg frame-cut also failed).
|
|
||||||
const remote = job.asset?.thumbnail_url ?? null;
|
|
||||||
// `job.poster_url` only SIGNALS a poster exists; the actual <img> src must carry ?account= (see
|
|
||||||
// api.posterImageUrl). A plain <img> can't send the X-Siftlode-Account header, so without it the
|
|
||||||
// poster resolves to the session-default account and 404s for a per-tab account's download — which,
|
|
||||||
// now that the poster is the primary image, reads as a blank Library thumbnail.
|
|
||||||
const poster = job.poster_url ? api.posterImageUrl(job.id) : null;
|
|
||||||
const primary = poster || remote;
|
|
||||||
// On load failure (a genuinely missing poster file) fall back to the remote source thumbnail.
|
|
||||||
const [src, setSrc] = useState(primary);
|
|
||||||
useEffect(() => setSrc(primary), [primary]);
|
|
||||||
return (
|
|
||||||
<div className="w-28 aspect-video shrink-0 rounded-lg overflow-hidden bg-surface border border-border">
|
|
||||||
{src ? (
|
|
||||||
<img
|
|
||||||
src={src}
|
|
||||||
alt=""
|
|
||||||
loading="lazy"
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
onError={() => {
|
|
||||||
if (remote && src !== remote) setSrc(remote);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function jobTitle(job: DownloadJob): string {
|
|
||||||
return job.display_name || job.asset?.title || job.source_ref;
|
|
||||||
}
|
|
||||||
|
|
||||||
// The channel to show under the title: a user override wins over the auto-extracted asset value.
|
|
||||||
// `url` is null for sources without a channel link (e.g. reddit) — then it renders as plain text.
|
|
||||||
function jobChannel(job: DownloadJob): { name: string; url: string | null } {
|
|
||||||
return {
|
|
||||||
name: job.display_uploader || job.asset?.uploader || job.source_ref,
|
|
||||||
url: job.display_uploader_url || job.asset?.uploader_url || null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function IconBtn({
|
|
||||||
onClick,
|
|
||||||
title,
|
|
||||||
danger,
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
onClick: () => void;
|
|
||||||
title: string;
|
|
||||||
danger?: boolean;
|
|
||||||
children: React.ReactNode;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
onClick={onClick}
|
|
||||||
title={title}
|
|
||||||
className={clsx(
|
|
||||||
"p-1.5 rounded-md hover:bg-surface text-muted transition",
|
|
||||||
danger ? "hover:text-danger" : "hover:text-fg",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Compact display of a URL: drop the protocol + trailing slash so "youtube.com/watch?v=…" fits.
|
|
||||||
function displayUrl(url: string): string {
|
|
||||||
try {
|
|
||||||
const u = new URL(url);
|
|
||||||
return (u.host + u.pathname + u.search).replace(/\/$/, "");
|
|
||||||
} catch {
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// "Downloaded from" reference: opens the original page in a new tab, or copies the link.
|
|
||||||
function SourceRef({ url }: { url: string }) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const copy = async () => {
|
|
||||||
if (await copyText(url)) {
|
|
||||||
notify({ level: "success", message: t("downloads.source.copied") });
|
|
||||||
} else {
|
|
||||||
notify({ level: "error", message: t("downloads.source.copyFailed") });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-1 mt-1 text-xs text-muted min-w-0">
|
|
||||||
<Link2 className="w-3 h-3 shrink-0" />
|
|
||||||
<a
|
|
||||||
href={url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
title={`${t("downloads.source.open")} — ${url}`}
|
|
||||||
className="truncate hover:text-accent hover:underline"
|
|
||||||
>
|
|
||||||
{displayUrl(url)}
|
|
||||||
</a>
|
|
||||||
<button
|
|
||||||
onClick={copy}
|
|
||||||
aria-label={t("downloads.source.copy")}
|
|
||||||
title={t("downloads.source.copy")}
|
|
||||||
className="shrink-0 p-0.5 rounded-sm hover:bg-surface hover:text-fg transition"
|
|
||||||
>
|
|
||||||
<Copy className="w-3 h-3" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Channel under the title — a clickable link when a channel URL is known, plain text otherwise.
|
|
||||||
function ChannelLine({ job }: { job: DownloadJob }) {
|
|
||||||
const { name, url } = jobChannel(job);
|
|
||||||
if (url) {
|
|
||||||
return (
|
|
||||||
<div className="text-xs mt-0.5 truncate">
|
|
||||||
<a
|
|
||||||
href={url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
title={url}
|
|
||||||
className="text-muted hover:text-accent hover:underline"
|
|
||||||
>
|
|
||||||
{name}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return <div className="text-xs text-muted truncate mt-0.5">{name}</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
function DownloadRow({
|
|
||||||
job,
|
|
||||||
onShowError,
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
job: DownloadJob;
|
|
||||||
onShowError?: (job: DownloadJob) => void;
|
|
||||||
children?: React.ReactNode;
|
|
||||||
}) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const running = job.status === "running";
|
|
||||||
return (
|
|
||||||
<div className="flex gap-3 p-2.5 rounded-xl glass-card glass-hover transition">
|
|
||||||
<Thumb job={job} />
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<div className="font-medium leading-snug line-clamp-1 flex items-center gap-1.5">
|
|
||||||
{job.job_kind === "edit" && (
|
|
||||||
<span className="inline-flex items-center gap-1 shrink-0 px-1.5 py-0.5 rounded-sm text-3xs font-semibold uppercase tracking-wide bg-accent/15 text-accent">
|
|
||||||
<Scissors className="w-3 h-3" /> {t("downloads.clipBadge")}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<span className="truncate">{jobTitle(job)}</span>
|
|
||||||
</div>
|
|
||||||
<ChannelLine job={job} />
|
|
||||||
<div className="flex items-center gap-2 mt-1 text-xs">
|
|
||||||
<StatusPill job={job} />
|
|
||||||
{job.asset?.size_bytes ? (
|
|
||||||
<span className="text-muted">· {formatBytes(job.asset.size_bytes)}</span>
|
|
||||||
) : null}
|
|
||||||
{job.asset?.duration_s ? (
|
|
||||||
<span className="text-muted">· {formatDuration(job.asset.duration_s)}</span>
|
|
||||||
) : null}
|
|
||||||
{job.status === "done" && job.created_at ? (
|
|
||||||
<span
|
|
||||||
className="text-muted inline-flex items-center gap-1"
|
|
||||||
title={new Date(job.created_at).toLocaleString()}
|
|
||||||
>
|
|
||||||
· <CalendarClock className="w-3 h-3" /> {relativeTime(job.created_at)}
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
{job.status === "error" ? (
|
|
||||||
<button
|
|
||||||
onClick={() => onShowError?.(job)}
|
|
||||||
className="text-danger hover:opacity-80 inline-flex items-center gap-1 truncate"
|
|
||||||
title={t("downloads.errors.fail.title")}
|
|
||||||
>
|
|
||||||
· {t(`downloads.errors.fail.cat.${job.error_code || "unknown"}.short`)}
|
|
||||||
<span className="text-muted underline">{t("downloads.errors.fail.detailsLink")}</span>
|
|
||||||
</button>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
{job.source_url && <SourceRef url={job.source_url} />}
|
|
||||||
{job.extra_links?.map((url) => (
|
|
||||||
<SourceRef key={url} url={url} />
|
|
||||||
))}
|
|
||||||
{running && (
|
|
||||||
<div className="mt-1.5">
|
|
||||||
{job.phase && !DOWNLOAD_PHASES.includes(job.phase) ? (
|
|
||||||
// ffmpeg post-steps aren't byte-progress — show an indeterminate pulse, no %.
|
|
||||||
<div className="h-1.5 rounded-full bg-surface overflow-hidden">
|
|
||||||
<div className="h-full w-full bg-accent/60 animate-pulse" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className="h-1.5 rounded-full bg-surface overflow-hidden">
|
|
||||||
<div
|
|
||||||
className="h-full bg-accent transition-all"
|
|
||||||
style={{ width: `${job.progress}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="text-2xs text-muted mt-0.5 flex gap-2">
|
|
||||||
<span>{job.progress}%</span>
|
|
||||||
{job.speed_bps ? <span>{formatSpeed(job.speed_bps)}</span> : null}
|
|
||||||
{job.eta_s ? <span>{formatEta(job.eta_s)}</span> : null}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-start gap-0.5 shrink-0">{children}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Rename + Share small modals ------------------------------------------------------------
|
|
||||||
|
|
||||||
// Edit a download's display metadata: title, channel (name + link), and extra reference links.
|
|
||||||
// All are display-only overrides — the on-disk file is never renamed.
|
|
||||||
function MetaEditModal({ job, onClose }: { job: DownloadJob; onClose: () => void }) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const qc = useQueryClient();
|
|
||||||
const [name, setName] = useState(job.display_name || job.asset?.title || "");
|
|
||||||
const [channel, setChannel] = useState(job.display_uploader || job.asset?.uploader || "");
|
|
||||||
const [channelUrl, setChannelUrl] = useState(
|
|
||||||
job.display_uploader_url || job.asset?.uploader_url || "",
|
|
||||||
);
|
|
||||||
// Editable extra-link rows; keep one blank row so there's always somewhere to type.
|
|
||||||
const [links, setLinks] = useState<string[]>(() => [...(job.extra_links ?? []), ""]);
|
|
||||||
|
|
||||||
const setLink = (i: number, v: string) => setLinks((ls) => ls.map((l, j) => (j === i ? v : l)));
|
|
||||||
const addLink = () => setLinks((ls) => [...ls, ""]);
|
|
||||||
const removeLink = (i: number) => setLinks((ls) => ls.filter((_, j) => j !== i));
|
|
||||||
|
|
||||||
const save = useMutation({
|
|
||||||
mutationFn: () =>
|
|
||||||
api.updateDownloadMeta(job.id, {
|
|
||||||
display_name: name.trim(),
|
|
||||||
display_uploader: channel.trim(),
|
|
||||||
display_uploader_url: channelUrl.trim(),
|
|
||||||
extra_links: links.map((l) => l.trim()).filter(Boolean),
|
|
||||||
}),
|
|
||||||
onSuccess: () => {
|
|
||||||
qc.invalidateQueries({ queryKey: qk.downloads() });
|
|
||||||
onClose();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal title={t("downloads.edit.title")} onClose={onClose}>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<label className="block">
|
|
||||||
<span className="block text-sm font-medium mb-1">{t("downloads.edit.name")}</span>
|
|
||||||
<input
|
|
||||||
value={name}
|
|
||||||
onChange={(e) => setName(e.target.value)}
|
|
||||||
className={inputCls}
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="block">
|
|
||||||
<span className="block text-sm font-medium mb-1">{t("downloads.edit.channel")}</span>
|
|
||||||
<input
|
|
||||||
value={channel}
|
|
||||||
onChange={(e) => setChannel(e.target.value)}
|
|
||||||
className={inputCls}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="block">
|
|
||||||
<span className="block text-sm font-medium mb-1">{t("downloads.edit.channelUrl")}</span>
|
|
||||||
<input
|
|
||||||
value={channelUrl}
|
|
||||||
onChange={(e) => setChannelUrl(e.target.value)}
|
|
||||||
placeholder="https://…"
|
|
||||||
className={inputCls}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<div>
|
|
||||||
<span className="block text-sm font-medium mb-1">{t("downloads.edit.extraLinks")}</span>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{links.map((l, i) => (
|
|
||||||
<div key={i} className="flex gap-2">
|
|
||||||
<input
|
|
||||||
value={l}
|
|
||||||
onChange={(e) => setLink(i, e.target.value)}
|
|
||||||
placeholder="https://…"
|
|
||||||
className={inputCls}
|
|
||||||
/>
|
|
||||||
<IconBtn
|
|
||||||
onClick={() => removeLink(i)}
|
|
||||||
title={t("downloads.edit.removeLink")}
|
|
||||||
danger
|
|
||||||
>
|
|
||||||
<Trash2 className="w-4 h-4" />
|
|
||||||
</IconBtn>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={addLink}
|
|
||||||
className="mt-2 inline-flex items-center gap-1.5 text-sm text-muted hover:text-fg transition"
|
|
||||||
>
|
|
||||||
<Plus className="w-4 h-4" /> {t("downloads.edit.addLink")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-muted">{t("downloads.edit.hint")}</p>
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<button
|
|
||||||
onClick={() => save.mutate()}
|
|
||||||
disabled={!name.trim() || save.isPending}
|
|
||||||
className="px-3 py-1.5 rounded-lg text-sm font-medium btn-primary disabled:opacity-50 transition"
|
|
||||||
>
|
|
||||||
{t("downloads.edit.save")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Error detail modal ---------------------------------------------------------------------
|
|
||||||
|
|
||||||
// Transient failures worth an in-modal Retry button; the rest are permanent (private/geo/DRM/…),
|
|
||||||
// where a retry can't help — the queue row still keeps its own retry control regardless.
|
|
||||||
const RETRYABLE_ERRORS = ["postprocess", "network", "unknown"];
|
|
||||||
|
|
||||||
// A readable "why did this fail" window for a failed job: a category headline + plain explanation,
|
|
||||||
// the raw yt-dlp/ffmpeg text behind a disclosure, and a Retry when the failure may be transient.
|
|
||||||
function ErrorModal({
|
|
||||||
job,
|
|
||||||
onRetry,
|
|
||||||
onClose,
|
|
||||||
}: {
|
|
||||||
job: DownloadJob;
|
|
||||||
onRetry: () => void;
|
|
||||||
onClose: () => void;
|
|
||||||
}) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const code = job.error_code || "unknown";
|
|
||||||
const [showRaw, setShowRaw] = useState(false);
|
|
||||||
const retryable = RETRYABLE_ERRORS.includes(code);
|
|
||||||
return (
|
|
||||||
<Modal title={t("downloads.errors.fail.title")} onClose={onClose}>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="font-medium">{t(`downloads.errors.fail.cat.${code}.short`)}</div>
|
|
||||||
<p className="text-sm text-muted">{t(`downloads.errors.fail.cat.${code}.body`)}</p>
|
|
||||||
{job.error && (
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowRaw((v) => !v)}
|
|
||||||
className="text-xs text-muted hover:text-fg transition"
|
|
||||||
>
|
|
||||||
{t("downloads.errors.fail.detailsToggle")}
|
|
||||||
</button>
|
|
||||||
{showRaw && (
|
|
||||||
<pre className="mt-1.5 text-xs bg-surface rounded-lg p-2.5 overflow-x-auto whitespace-pre-wrap wrap-break-word max-h-40 text-muted">
|
|
||||||
{job.error}
|
|
||||||
</pre>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex justify-end gap-2 pt-1">
|
|
||||||
{retryable && (
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
onRetry();
|
|
||||||
onClose();
|
|
||||||
}}
|
|
||||||
className="px-3 py-1.5 rounded-lg text-sm font-medium btn-primary transition"
|
|
||||||
>
|
|
||||||
{t("downloads.actions.retry")}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="px-3 py-1.5 rounded-lg text-sm text-muted hover:text-fg hover:bg-surface transition"
|
|
||||||
>
|
|
||||||
{t("common.close")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Usage bar ------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
function UsageBar() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
// Poll live (like the library list) so the footprint updates the moment the worker finishes an
|
|
||||||
// edit/download — enqueue only creates a queued job (0 bytes), the size lands asynchronously, so
|
|
||||||
// a one-shot fetch at enqueue time would show a stale 0 B until a manual reload.
|
|
||||||
const usage = useLiveQuery(qk.downloadUsage(), api.downloadUsage, { intervalMs: 2000 });
|
|
||||||
const u = usage.data;
|
|
||||||
if (!u) return null;
|
|
||||||
const pct =
|
|
||||||
u.unlimited || !u.max_bytes ? 0 : Math.min(100, (u.footprint_bytes / u.max_bytes) * 100);
|
|
||||||
return (
|
|
||||||
<div className="rounded-xl glass-card p-3 mb-4">
|
|
||||||
<div className="flex justify-between text-sm mb-1.5">
|
|
||||||
<span className="font-medium">{t("downloads.usage.title")}</span>
|
|
||||||
<span className="text-muted">
|
|
||||||
{formatBytes(u.footprint_bytes)}
|
|
||||||
{u.unlimited ? "" : ` / ${formatBytes(u.max_bytes)}`} ·{" "}
|
|
||||||
{u.unlimited
|
|
||||||
? t("downloads.usage.unlimited")
|
|
||||||
: t("downloads.usage.items", { used: u.active_jobs, max: u.max_jobs })}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{!u.unlimited && (
|
|
||||||
<div className="h-2 rounded-full bg-surface overflow-hidden">
|
|
||||||
<div
|
|
||||||
className={clsx("h-full transition-all", pct > 90 ? "bg-danger" : "bg-accent")}
|
|
||||||
style={{ width: `${pct}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Admin system tab -----------------------------------------------------------------------
|
|
||||||
|
|
||||||
function QuotaModal({
|
|
||||||
userId,
|
|
||||||
email,
|
|
||||||
onClose,
|
|
||||||
}: {
|
|
||||||
userId: number;
|
|
||||||
email: string;
|
|
||||||
onClose: () => void;
|
|
||||||
}) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const qc = useQueryClient();
|
|
||||||
const q = useQuery({
|
|
||||||
queryKey: qk.dlQuota(userId),
|
|
||||||
queryFn: () => api.adminGetDownloadQuota(userId),
|
|
||||||
});
|
|
||||||
const [form, setForm] = useState<{
|
|
||||||
gb: number;
|
|
||||||
jobs: number;
|
|
||||||
conc: number;
|
|
||||||
unlimited: boolean;
|
|
||||||
} | null>(null);
|
|
||||||
const cur = q.data;
|
|
||||||
const state =
|
|
||||||
form ??
|
|
||||||
(cur
|
|
||||||
? {
|
|
||||||
gb: Math.round((cur.max_bytes / GiB) * 10) / 10,
|
|
||||||
jobs: cur.max_jobs,
|
|
||||||
conc: cur.max_concurrent,
|
|
||||||
unlimited: cur.unlimited,
|
|
||||||
}
|
|
||||||
: null);
|
|
||||||
const done = () => {
|
|
||||||
qc.invalidateQueries({ queryKey: qk.dlQuota(userId) });
|
|
||||||
qc.invalidateQueries({ queryKey: qk.adminStorage() });
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
const save = useMutation({
|
|
||||||
mutationFn: () =>
|
|
||||||
api.adminSetDownloadQuota(userId, {
|
|
||||||
max_bytes: Math.round(state!.gb * GiB),
|
|
||||||
max_jobs: state!.jobs,
|
|
||||||
max_concurrent: state!.conc,
|
|
||||||
unlimited: state!.unlimited,
|
|
||||||
}),
|
|
||||||
onSuccess: done,
|
|
||||||
});
|
|
||||||
const reset = useMutation({
|
|
||||||
mutationFn: () => api.adminResetDownloadQuota(userId),
|
|
||||||
onSuccess: done,
|
|
||||||
});
|
|
||||||
if (!state) return null;
|
|
||||||
const upd = (p: Partial<typeof state>) => setForm({ ...state, ...p });
|
|
||||||
return (
|
|
||||||
<Modal title={t("downloads.admin.quotaTitle", { email })} onClose={onClose}>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="grid grid-cols-3 gap-3">
|
|
||||||
<label className="text-sm">
|
|
||||||
{t("downloads.admin.maxBytes")}
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={state.gb}
|
|
||||||
onChange={(e) => upd({ gb: Number(e.target.value) })}
|
|
||||||
className={inputCls}
|
|
||||||
disabled={state.unlimited}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="text-sm">
|
|
||||||
{t("downloads.admin.maxJobs")}
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={state.jobs}
|
|
||||||
onChange={(e) => upd({ jobs: Number(e.target.value) })}
|
|
||||||
className={inputCls}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="text-sm">
|
|
||||||
{t("downloads.admin.maxConcurrent")}
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={state.conc}
|
|
||||||
onChange={(e) => upd({ conc: Number(e.target.value) })}
|
|
||||||
className={inputCls}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<label className="flex items-center gap-2 text-sm cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={state.unlimited}
|
|
||||||
onChange={(e) => upd({ unlimited: e.target.checked })}
|
|
||||||
/>
|
|
||||||
{t("downloads.admin.unlimited")}
|
|
||||||
</label>
|
|
||||||
<div className="flex justify-between pt-1">
|
|
||||||
<button
|
|
||||||
onClick={() => reset.mutate()}
|
|
||||||
className="px-3 py-1.5 rounded-lg text-sm text-muted hover:text-fg hover:bg-surface transition"
|
|
||||||
>
|
|
||||||
{t("downloads.admin.reset")}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => save.mutate()}
|
|
||||||
disabled={save.isPending}
|
|
||||||
className="px-3 py-1.5 rounded-lg text-sm font-medium btn-primary disabled:opacity-50 transition"
|
|
||||||
>
|
|
||||||
{t("downloads.admin.save")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pick ANY user to set a download quota for — even one who hasn't downloaded anything yet (the
|
|
||||||
// footprint list below only shows users who already have files).
|
|
||||||
function QuotaUserPicker({ onPick }: { onPick: (u: { id: number; email: string }) => void }) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [q, setQ] = useState("");
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const users = useQuery({ queryKey: qk.adminUsers(), queryFn: api.adminUsers });
|
|
||||||
const list = (users.data ?? []).filter((u) => !u.is_demo);
|
|
||||||
const filtered = useMemo(() => {
|
|
||||||
const s = q.trim().toLowerCase();
|
|
||||||
const base = s
|
|
||||||
? list.filter(
|
|
||||||
(u) =>
|
|
||||||
u.email.toLowerCase().includes(s) || (u.display_name ?? "").toLowerCase().includes(s),
|
|
||||||
)
|
|
||||||
: list;
|
|
||||||
return base.slice(0, 8);
|
|
||||||
}, [q, list]);
|
|
||||||
return (
|
|
||||||
<div className="relative w-full sm:w-72">
|
|
||||||
<input
|
|
||||||
value={q}
|
|
||||||
onChange={(e) => {
|
|
||||||
setQ(e.target.value);
|
|
||||||
setOpen(true);
|
|
||||||
}}
|
|
||||||
onFocus={() => setOpen(true)}
|
|
||||||
onBlur={() => setTimeout(() => setOpen(false), 150)}
|
|
||||||
placeholder={t("downloads.admin.quotaPickPlaceholder")}
|
|
||||||
className={inputCls}
|
|
||||||
/>
|
|
||||||
{open && filtered.length > 0 && (
|
|
||||||
<div className="absolute z-base mt-1 w-full rounded-lg glass-menu overflow-hidden">
|
|
||||||
{filtered.map((u) => (
|
|
||||||
<button
|
|
||||||
key={u.id}
|
|
||||||
onClick={() => {
|
|
||||||
onPick({ id: u.id, email: u.email });
|
|
||||||
setQ("");
|
|
||||||
setOpen(false);
|
|
||||||
}}
|
|
||||||
className="w-full text-left px-3 py-2 text-sm hover:bg-surface transition flex flex-col"
|
|
||||||
>
|
|
||||||
<span className="truncate">{u.display_name || u.email}</span>
|
|
||||||
{u.display_name && <span className="text-xs text-muted truncate">{u.email}</span>}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function AdminSystem() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const storage = useLiveQuery(qk.adminStorage(), api.adminDownloadStorage, { intervalMs: 5000 });
|
|
||||||
const jobs = useLiveQuery(qk.adminDownloads(), api.adminDownloads, { intervalMs: 5000 });
|
|
||||||
const [quotaFor, setQuotaFor] = useState<{ id: number; email: string } | null>(null);
|
|
||||||
const s = storage.data;
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{s && (
|
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-5">
|
|
||||||
{[
|
|
||||||
[t("downloads.admin.readyFiles"), String(s.ready_files)],
|
|
||||||
[t("downloads.admin.totalSize"), formatBytes(s.total_bytes)],
|
|
||||||
[
|
|
||||||
t("downloads.admin.cap"),
|
|
||||||
s.total_cap_bytes ? formatBytes(s.total_cap_bytes) : t("downloads.admin.noCap"),
|
|
||||||
],
|
|
||||||
].map(([label, val]) => (
|
|
||||||
<div key={label} className="rounded-xl glass-card p-3">
|
|
||||||
<div className="text-xs text-muted">{label}</div>
|
|
||||||
<div className="text-lg font-semibold mt-0.5">{val}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{s && (
|
|
||||||
<div className="mb-6">
|
|
||||||
<div className="flex items-center justify-between gap-3 mb-2 flex-wrap">
|
|
||||||
<div className="text-sm font-medium">{t("downloads.admin.perUser")}</div>
|
|
||||||
{/* Set a quota for any user, regardless of whether they've downloaded anything. */}
|
|
||||||
<QuotaUserPicker onPick={setQuotaFor} />
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
{s.per_user.map((u) => (
|
|
||||||
<div
|
|
||||||
key={u.user_id}
|
|
||||||
className="flex items-center gap-2 text-sm px-3 py-1.5 rounded-lg bg-card/40"
|
|
||||||
>
|
|
||||||
<span className="flex-1 truncate">{u.email}</span>
|
|
||||||
<span className="text-muted">{formatBytes(u.footprint_bytes)}</span>
|
|
||||||
<button
|
|
||||||
onClick={() => setQuotaFor({ id: u.user_id, email: u.email ?? "" })}
|
|
||||||
className="p-1 rounded-sm hover:bg-surface text-muted hover:text-fg"
|
|
||||||
title={t("downloads.admin.editQuota")}
|
|
||||||
>
|
|
||||||
<Settings2 className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{s.per_user.length === 0 && (
|
|
||||||
<div className="text-xs text-muted px-3 py-2">{t("downloads.admin.noFootprint")}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="text-sm font-medium mb-2">{t("downloads.tabs.system")}</div>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
{(jobs.data ?? []).map((j) => (
|
|
||||||
<div
|
|
||||||
key={j.id}
|
|
||||||
className="flex items-center gap-3 text-sm px-3 py-1.5 rounded-lg bg-card/40"
|
|
||||||
>
|
|
||||||
<span className="flex-1 truncate">{jobTitle(j)}</span>
|
|
||||||
<span className="text-muted truncate w-40">{j.user_email}</span>
|
|
||||||
<StatusPill job={j} />
|
|
||||||
<span className="text-muted w-16 text-right">
|
|
||||||
{j.asset?.size_bytes ? formatBytes(j.asset.size_bytes) : ""}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{jobs.data && jobs.data.length === 0 && (
|
|
||||||
<div className="text-sm text-muted py-6 text-center">{t("downloads.empty.admin")}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{quotaFor && (
|
|
||||||
<QuotaModal userId={quotaFor.id} email={quotaFor.email} onClose={() => setQuotaFor(null)} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Main -----------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
export default function DownloadCenter() {
|
export default function DownloadCenter() {
|
||||||
const me = useMe();
|
const me = useMe();
|
||||||
|
|||||||
@@ -0,0 +1,267 @@
|
|||||||
|
import { useMemo, useState } from "react";
|
||||||
|
import { qk } from "../lib/queryKeys";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { Settings2 } from "lucide-react";
|
||||||
|
import Modal from "./Modal";
|
||||||
|
import { useLiveQuery } from "../lib/useLiveQuery";
|
||||||
|
import { api } from "../lib/api";
|
||||||
|
import { formatBytes } from "../lib/format";
|
||||||
|
import { inputCls } from "./ui/form";
|
||||||
|
import { StatusPill, jobTitle } from "./downloadRow";
|
||||||
|
|
||||||
|
// The admin "System" tab — storage overview, per-user footprint, quota editor, and the global job
|
||||||
|
// list. Split out of DownloadCenter (self-contained, admin-only surface).
|
||||||
|
|
||||||
|
const GiB = 1024 ** 3;
|
||||||
|
|
||||||
|
function QuotaModal({
|
||||||
|
userId,
|
||||||
|
email,
|
||||||
|
onClose,
|
||||||
|
}: {
|
||||||
|
userId: number;
|
||||||
|
email: string;
|
||||||
|
onClose: () => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const qc = useQueryClient();
|
||||||
|
const q = useQuery({
|
||||||
|
queryKey: qk.dlQuota(userId),
|
||||||
|
queryFn: () => api.adminGetDownloadQuota(userId),
|
||||||
|
});
|
||||||
|
const [form, setForm] = useState<{
|
||||||
|
gb: number;
|
||||||
|
jobs: number;
|
||||||
|
conc: number;
|
||||||
|
unlimited: boolean;
|
||||||
|
} | null>(null);
|
||||||
|
const cur = q.data;
|
||||||
|
const state =
|
||||||
|
form ??
|
||||||
|
(cur
|
||||||
|
? {
|
||||||
|
gb: Math.round((cur.max_bytes / GiB) * 10) / 10,
|
||||||
|
jobs: cur.max_jobs,
|
||||||
|
conc: cur.max_concurrent,
|
||||||
|
unlimited: cur.unlimited,
|
||||||
|
}
|
||||||
|
: null);
|
||||||
|
const done = () => {
|
||||||
|
qc.invalidateQueries({ queryKey: qk.dlQuota(userId) });
|
||||||
|
qc.invalidateQueries({ queryKey: qk.adminStorage() });
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
const save = useMutation({
|
||||||
|
mutationFn: () =>
|
||||||
|
api.adminSetDownloadQuota(userId, {
|
||||||
|
max_bytes: Math.round(state!.gb * GiB),
|
||||||
|
max_jobs: state!.jobs,
|
||||||
|
max_concurrent: state!.conc,
|
||||||
|
unlimited: state!.unlimited,
|
||||||
|
}),
|
||||||
|
onSuccess: done,
|
||||||
|
});
|
||||||
|
const reset = useMutation({
|
||||||
|
mutationFn: () => api.adminResetDownloadQuota(userId),
|
||||||
|
onSuccess: done,
|
||||||
|
});
|
||||||
|
if (!state) return null;
|
||||||
|
const upd = (p: Partial<typeof state>) => setForm({ ...state, ...p });
|
||||||
|
return (
|
||||||
|
<Modal title={t("downloads.admin.quotaTitle", { email })} onClose={onClose}>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
<label className="text-sm">
|
||||||
|
{t("downloads.admin.maxBytes")}
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={state.gb}
|
||||||
|
onChange={(e) => upd({ gb: Number(e.target.value) })}
|
||||||
|
className={inputCls}
|
||||||
|
disabled={state.unlimited}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="text-sm">
|
||||||
|
{t("downloads.admin.maxJobs")}
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={state.jobs}
|
||||||
|
onChange={(e) => upd({ jobs: Number(e.target.value) })}
|
||||||
|
className={inputCls}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="text-sm">
|
||||||
|
{t("downloads.admin.maxConcurrent")}
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={state.conc}
|
||||||
|
onChange={(e) => upd({ conc: Number(e.target.value) })}
|
||||||
|
className={inputCls}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label className="flex items-center gap-2 text-sm cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={state.unlimited}
|
||||||
|
onChange={(e) => upd({ unlimited: e.target.checked })}
|
||||||
|
/>
|
||||||
|
{t("downloads.admin.unlimited")}
|
||||||
|
</label>
|
||||||
|
<div className="flex justify-between pt-1">
|
||||||
|
<button
|
||||||
|
onClick={() => reset.mutate()}
|
||||||
|
className="px-3 py-1.5 rounded-lg text-sm text-muted hover:text-fg hover:bg-surface transition"
|
||||||
|
>
|
||||||
|
{t("downloads.admin.reset")}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => save.mutate()}
|
||||||
|
disabled={save.isPending}
|
||||||
|
className="px-3 py-1.5 rounded-lg text-sm font-medium btn-primary disabled:opacity-50 transition"
|
||||||
|
>
|
||||||
|
{t("downloads.admin.save")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pick ANY user to set a download quota for — even one who hasn't downloaded anything yet (the
|
||||||
|
// footprint list below only shows users who already have files).
|
||||||
|
function QuotaUserPicker({ onPick }: { onPick: (u: { id: number; email: string }) => void }) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [q, setQ] = useState("");
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const users = useQuery({ queryKey: qk.adminUsers(), queryFn: api.adminUsers });
|
||||||
|
const list = (users.data ?? []).filter((u) => !u.is_demo);
|
||||||
|
const filtered = useMemo(() => {
|
||||||
|
const s = q.trim().toLowerCase();
|
||||||
|
const base = s
|
||||||
|
? list.filter(
|
||||||
|
(u) =>
|
||||||
|
u.email.toLowerCase().includes(s) || (u.display_name ?? "").toLowerCase().includes(s),
|
||||||
|
)
|
||||||
|
: list;
|
||||||
|
return base.slice(0, 8);
|
||||||
|
}, [q, list]);
|
||||||
|
return (
|
||||||
|
<div className="relative w-full sm:w-72">
|
||||||
|
<input
|
||||||
|
value={q}
|
||||||
|
onChange={(e) => {
|
||||||
|
setQ(e.target.value);
|
||||||
|
setOpen(true);
|
||||||
|
}}
|
||||||
|
onFocus={() => setOpen(true)}
|
||||||
|
onBlur={() => setTimeout(() => setOpen(false), 150)}
|
||||||
|
placeholder={t("downloads.admin.quotaPickPlaceholder")}
|
||||||
|
className={inputCls}
|
||||||
|
/>
|
||||||
|
{open && filtered.length > 0 && (
|
||||||
|
<div className="absolute z-base mt-1 w-full rounded-lg glass-menu overflow-hidden">
|
||||||
|
{filtered.map((u) => (
|
||||||
|
<button
|
||||||
|
key={u.id}
|
||||||
|
onClick={() => {
|
||||||
|
onPick({ id: u.id, email: u.email });
|
||||||
|
setQ("");
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
className="w-full text-left px-3 py-2 text-sm hover:bg-surface transition flex flex-col"
|
||||||
|
>
|
||||||
|
<span className="truncate">{u.display_name || u.email}</span>
|
||||||
|
{u.display_name && <span className="text-xs text-muted truncate">{u.email}</span>}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AdminSystem() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const storage = useLiveQuery(qk.adminStorage(), api.adminDownloadStorage, { intervalMs: 5000 });
|
||||||
|
const jobs = useLiveQuery(qk.adminDownloads(), api.adminDownloads, { intervalMs: 5000 });
|
||||||
|
const [quotaFor, setQuotaFor] = useState<{ id: number; email: string } | null>(null);
|
||||||
|
const s = storage.data;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{s && (
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-5">
|
||||||
|
{[
|
||||||
|
[t("downloads.admin.readyFiles"), String(s.ready_files)],
|
||||||
|
[t("downloads.admin.totalSize"), formatBytes(s.total_bytes)],
|
||||||
|
[
|
||||||
|
t("downloads.admin.cap"),
|
||||||
|
s.total_cap_bytes ? formatBytes(s.total_cap_bytes) : t("downloads.admin.noCap"),
|
||||||
|
],
|
||||||
|
].map(([label, val]) => (
|
||||||
|
<div key={label} className="rounded-xl glass-card p-3">
|
||||||
|
<div className="text-xs text-muted">{label}</div>
|
||||||
|
<div className="text-lg font-semibold mt-0.5">{val}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{s && (
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex items-center justify-between gap-3 mb-2 flex-wrap">
|
||||||
|
<div className="text-sm font-medium">{t("downloads.admin.perUser")}</div>
|
||||||
|
{/* Set a quota for any user, regardless of whether they've downloaded anything. */}
|
||||||
|
<QuotaUserPicker onPick={setQuotaFor} />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
{s.per_user.map((u) => (
|
||||||
|
<div
|
||||||
|
key={u.user_id}
|
||||||
|
className="flex items-center gap-2 text-sm px-3 py-1.5 rounded-lg bg-card/40"
|
||||||
|
>
|
||||||
|
<span className="flex-1 truncate">{u.email}</span>
|
||||||
|
<span className="text-muted">{formatBytes(u.footprint_bytes)}</span>
|
||||||
|
<button
|
||||||
|
onClick={() => setQuotaFor({ id: u.user_id, email: u.email ?? "" })}
|
||||||
|
className="p-1 rounded-sm hover:bg-surface text-muted hover:text-fg"
|
||||||
|
title={t("downloads.admin.editQuota")}
|
||||||
|
>
|
||||||
|
<Settings2 className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{s.per_user.length === 0 && (
|
||||||
|
<div className="text-xs text-muted px-3 py-2">{t("downloads.admin.noFootprint")}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="text-sm font-medium mb-2">{t("downloads.tabs.system")}</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
{(jobs.data ?? []).map((j) => (
|
||||||
|
<div
|
||||||
|
key={j.id}
|
||||||
|
className="flex items-center gap-3 text-sm px-3 py-1.5 rounded-lg bg-card/40"
|
||||||
|
>
|
||||||
|
<span className="flex-1 truncate">{jobTitle(j)}</span>
|
||||||
|
<span className="text-muted truncate w-40">{j.user_email}</span>
|
||||||
|
<StatusPill job={j} />
|
||||||
|
<span className="text-muted w-16 text-right">
|
||||||
|
{j.asset?.size_bytes ? formatBytes(j.asset.size_bytes) : ""}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{jobs.data && jobs.data.length === 0 && (
|
||||||
|
<div className="text-sm text-muted py-6 text-center">{t("downloads.empty.admin")}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{quotaFor && (
|
||||||
|
<QuotaModal userId={quotaFor.id} email={quotaFor.email} onClose={() => setQuotaFor(null)} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,178 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { qk } from "../lib/queryKeys";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { Plus, Trash2 } from "lucide-react";
|
||||||
|
import Modal from "./Modal";
|
||||||
|
import { api, type DownloadJob } from "../lib/api";
|
||||||
|
import { inputCls } from "./ui/form";
|
||||||
|
import { IconBtn } from "./downloadRow";
|
||||||
|
|
||||||
|
// Per-item user modals split out of DownloadCenter (self-contained, prop-driven): rename/metadata
|
||||||
|
// editing and the failure-detail window.
|
||||||
|
|
||||||
|
// Edit a download's display metadata: title, channel (name + link), and extra reference links.
|
||||||
|
// All are display-only overrides — the on-disk file is never renamed.
|
||||||
|
export function MetaEditModal({ job, onClose }: { job: DownloadJob; onClose: () => void }) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const qc = useQueryClient();
|
||||||
|
const [name, setName] = useState(job.display_name || job.asset?.title || "");
|
||||||
|
const [channel, setChannel] = useState(job.display_uploader || job.asset?.uploader || "");
|
||||||
|
const [channelUrl, setChannelUrl] = useState(
|
||||||
|
job.display_uploader_url || job.asset?.uploader_url || "",
|
||||||
|
);
|
||||||
|
// Editable extra-link rows; keep one blank row so there's always somewhere to type.
|
||||||
|
const [links, setLinks] = useState<string[]>(() => [...(job.extra_links ?? []), ""]);
|
||||||
|
|
||||||
|
const setLink = (i: number, v: string) => setLinks((ls) => ls.map((l, j) => (j === i ? v : l)));
|
||||||
|
const addLink = () => setLinks((ls) => [...ls, ""]);
|
||||||
|
const removeLink = (i: number) => setLinks((ls) => ls.filter((_, j) => j !== i));
|
||||||
|
|
||||||
|
const save = useMutation({
|
||||||
|
mutationFn: () =>
|
||||||
|
api.updateDownloadMeta(job.id, {
|
||||||
|
display_name: name.trim(),
|
||||||
|
display_uploader: channel.trim(),
|
||||||
|
display_uploader_url: channelUrl.trim(),
|
||||||
|
extra_links: links.map((l) => l.trim()).filter(Boolean),
|
||||||
|
}),
|
||||||
|
onSuccess: () => {
|
||||||
|
qc.invalidateQueries({ queryKey: qk.downloads() });
|
||||||
|
onClose();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal title={t("downloads.edit.title")} onClose={onClose}>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="block">
|
||||||
|
<span className="block text-sm font-medium mb-1">{t("downloads.edit.name")}</span>
|
||||||
|
<input
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
className={inputCls}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="block">
|
||||||
|
<span className="block text-sm font-medium mb-1">{t("downloads.edit.channel")}</span>
|
||||||
|
<input
|
||||||
|
value={channel}
|
||||||
|
onChange={(e) => setChannel(e.target.value)}
|
||||||
|
className={inputCls}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="block">
|
||||||
|
<span className="block text-sm font-medium mb-1">{t("downloads.edit.channelUrl")}</span>
|
||||||
|
<input
|
||||||
|
value={channelUrl}
|
||||||
|
onChange={(e) => setChannelUrl(e.target.value)}
|
||||||
|
placeholder="https://…"
|
||||||
|
className={inputCls}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div>
|
||||||
|
<span className="block text-sm font-medium mb-1">{t("downloads.edit.extraLinks")}</span>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{links.map((l, i) => (
|
||||||
|
<div key={i} className="flex gap-2">
|
||||||
|
<input
|
||||||
|
value={l}
|
||||||
|
onChange={(e) => setLink(i, e.target.value)}
|
||||||
|
placeholder="https://…"
|
||||||
|
className={inputCls}
|
||||||
|
/>
|
||||||
|
<IconBtn
|
||||||
|
onClick={() => removeLink(i)}
|
||||||
|
title={t("downloads.edit.removeLink")}
|
||||||
|
danger
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</IconBtn>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={addLink}
|
||||||
|
className="mt-2 inline-flex items-center gap-1.5 text-sm text-muted hover:text-fg transition"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4" /> {t("downloads.edit.addLink")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted">{t("downloads.edit.hint")}</p>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<button
|
||||||
|
onClick={() => save.mutate()}
|
||||||
|
disabled={!name.trim() || save.isPending}
|
||||||
|
className="px-3 py-1.5 rounded-lg text-sm font-medium btn-primary disabled:opacity-50 transition"
|
||||||
|
>
|
||||||
|
{t("downloads.edit.save")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Transient failures worth an in-modal Retry button; the rest are permanent (private/geo/DRM/…),
|
||||||
|
// where a retry can't help — the queue row still keeps its own retry control regardless.
|
||||||
|
const RETRYABLE_ERRORS = ["postprocess", "network", "unknown"];
|
||||||
|
|
||||||
|
// A readable "why did this fail" window for a failed job: a category headline + plain explanation,
|
||||||
|
// the raw yt-dlp/ffmpeg text behind a disclosure, and a Retry when the failure may be transient.
|
||||||
|
export function ErrorModal({
|
||||||
|
job,
|
||||||
|
onRetry,
|
||||||
|
onClose,
|
||||||
|
}: {
|
||||||
|
job: DownloadJob;
|
||||||
|
onRetry: () => void;
|
||||||
|
onClose: () => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const code = job.error_code || "unknown";
|
||||||
|
const [showRaw, setShowRaw] = useState(false);
|
||||||
|
const retryable = RETRYABLE_ERRORS.includes(code);
|
||||||
|
return (
|
||||||
|
<Modal title={t("downloads.errors.fail.title")} onClose={onClose}>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="font-medium">{t(`downloads.errors.fail.cat.${code}.short`)}</div>
|
||||||
|
<p className="text-sm text-muted">{t(`downloads.errors.fail.cat.${code}.body`)}</p>
|
||||||
|
{job.error && (
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowRaw((v) => !v)}
|
||||||
|
className="text-xs text-muted hover:text-fg transition"
|
||||||
|
>
|
||||||
|
{t("downloads.errors.fail.detailsToggle")}
|
||||||
|
</button>
|
||||||
|
{showRaw && (
|
||||||
|
<pre className="mt-1.5 text-xs bg-surface rounded-lg p-2.5 overflow-x-auto whitespace-pre-wrap wrap-break-word max-h-40 text-muted">
|
||||||
|
{job.error}
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex justify-end gap-2 pt-1">
|
||||||
|
{retryable && (
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
onRetry();
|
||||||
|
onClose();
|
||||||
|
}}
|
||||||
|
className="px-3 py-1.5 rounded-lg text-sm font-medium btn-primary transition"
|
||||||
|
>
|
||||||
|
{t("downloads.actions.retry")}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-3 py-1.5 rounded-lg text-sm text-muted hover:text-fg hover:bg-surface transition"
|
||||||
|
>
|
||||||
|
{t("common.close")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,309 @@
|
|||||||
|
import { useEffect, useState, type ReactNode } from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { CalendarClock, Copy, Link2, Scissors } from "lucide-react";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import { qk } from "../lib/queryKeys";
|
||||||
|
import { useLiveQuery } from "../lib/useLiveQuery";
|
||||||
|
import { api, type DownloadJob } from "../lib/api";
|
||||||
|
import { notify } from "../lib/notifications";
|
||||||
|
import { copyText } from "../lib/clipboard";
|
||||||
|
import { formatBytes, formatDuration, formatEta, formatSpeed, relativeTime } from "../lib/format";
|
||||||
|
|
||||||
|
// Download-row presentation + the small shared primitives (status pill, icon button, usage bar),
|
||||||
|
// split out of DownloadCenter (all purely prop-driven, no shared state). Rendered by the queue,
|
||||||
|
// library, shared, and admin tabs.
|
||||||
|
|
||||||
|
const STATUS_CLS: Record<string, string> = {
|
||||||
|
queued: "text-muted",
|
||||||
|
running: "text-accent",
|
||||||
|
paused: "text-warn",
|
||||||
|
done: "text-success",
|
||||||
|
error: "text-danger",
|
||||||
|
canceled: "text-muted",
|
||||||
|
};
|
||||||
|
|
||||||
|
// Byte-progress phases (show a % bar) vs ffmpeg post-steps (no %, indeterminate pulse).
|
||||||
|
// "editing" (the phase-2 editor) reports a real % from ffmpeg's out_time, so it gets a bar.
|
||||||
|
const DOWNLOAD_PHASES = ["video", "audio", "editing"];
|
||||||
|
const PHASE_KEYS = [
|
||||||
|
"video",
|
||||||
|
"audio",
|
||||||
|
"editing",
|
||||||
|
"merging",
|
||||||
|
"audio_extract",
|
||||||
|
"thumbnail",
|
||||||
|
"sponsorblock",
|
||||||
|
"metadata",
|
||||||
|
"processing",
|
||||||
|
];
|
||||||
|
|
||||||
|
export function StatusPill({ job }: { job: DownloadJob }) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
// While downloading, show the concrete phase (video / audio / merging) so the user isn't
|
||||||
|
// confused by the bar resetting between the separate video and audio streams.
|
||||||
|
if (job.status === "running" && job.phase && PHASE_KEYS.includes(job.phase)) {
|
||||||
|
return (
|
||||||
|
<span className="text-xs font-medium text-accent">{t(`downloads.phase.${job.phase}`)}</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const key = job.expired ? "expired" : job.status;
|
||||||
|
return (
|
||||||
|
<span className={clsx("text-xs font-medium", STATUS_CLS[job.status] ?? "text-muted")}>
|
||||||
|
{t(`downloads.status.${key}`)}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Thumb({ job }: { job: DownloadJob }) {
|
||||||
|
// Prefer OUR self-hosted poster: it's always present on disk, never expires, and is same-origin, so
|
||||||
|
// a source-CDN signature expiry (Facebook's fbcdn URLs expire within days) or an ad-blocker/Shields
|
||||||
|
// rule on the source domain can't break it. The source's remote thumbnail_url is only a fallback for
|
||||||
|
// the rare poster-less asset (a thumbnail-less source whose ffmpeg frame-cut also failed).
|
||||||
|
const remote = job.asset?.thumbnail_url ?? null;
|
||||||
|
// `job.poster_url` only SIGNALS a poster exists; the actual <img> src must carry ?account= (see
|
||||||
|
// api.posterImageUrl). A plain <img> can't send the X-Siftlode-Account header, so without it the
|
||||||
|
// poster resolves to the session-default account and 404s for a per-tab account's download — which,
|
||||||
|
// now that the poster is the primary image, reads as a blank Library thumbnail.
|
||||||
|
const poster = job.poster_url ? api.posterImageUrl(job.id) : null;
|
||||||
|
const primary = poster || remote;
|
||||||
|
// On load failure (a genuinely missing poster file) fall back to the remote source thumbnail.
|
||||||
|
const [src, setSrc] = useState(primary);
|
||||||
|
useEffect(() => setSrc(primary), [primary]);
|
||||||
|
return (
|
||||||
|
<div className="w-28 aspect-video shrink-0 rounded-lg overflow-hidden bg-surface border border-border">
|
||||||
|
{src ? (
|
||||||
|
<img
|
||||||
|
src={src}
|
||||||
|
alt=""
|
||||||
|
loading="lazy"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
onError={() => {
|
||||||
|
if (remote && src !== remote) setSrc(remote);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function jobTitle(job: DownloadJob): string {
|
||||||
|
return job.display_name || job.asset?.title || job.source_ref;
|
||||||
|
}
|
||||||
|
|
||||||
|
// The channel to show under the title: a user override wins over the auto-extracted asset value.
|
||||||
|
// `url` is null for sources without a channel link (e.g. reddit) — then it renders as plain text.
|
||||||
|
function jobChannel(job: DownloadJob): { name: string; url: string | null } {
|
||||||
|
return {
|
||||||
|
name: job.display_uploader || job.asset?.uploader || job.source_ref,
|
||||||
|
url: job.display_uploader_url || job.asset?.uploader_url || null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function IconBtn({
|
||||||
|
onClick,
|
||||||
|
title,
|
||||||
|
danger,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
onClick: () => void;
|
||||||
|
title: string;
|
||||||
|
danger?: boolean;
|
||||||
|
children: ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
title={title}
|
||||||
|
className={clsx(
|
||||||
|
"p-1.5 rounded-md hover:bg-surface text-muted transition",
|
||||||
|
danger ? "hover:text-danger" : "hover:text-fg",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Compact display of a URL: drop the protocol + trailing slash so "youtube.com/watch?v=…" fits.
|
||||||
|
function displayUrl(url: string): string {
|
||||||
|
try {
|
||||||
|
const u = new URL(url);
|
||||||
|
return (u.host + u.pathname + u.search).replace(/\/$/, "");
|
||||||
|
} catch {
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// "Downloaded from" reference: opens the original page in a new tab, or copies the link.
|
||||||
|
function SourceRef({ url }: { url: string }) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const copy = async () => {
|
||||||
|
if (await copyText(url)) {
|
||||||
|
notify({ level: "success", message: t("downloads.source.copied") });
|
||||||
|
} else {
|
||||||
|
notify({ level: "error", message: t("downloads.source.copyFailed") });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-1 mt-1 text-xs text-muted min-w-0">
|
||||||
|
<Link2 className="w-3 h-3 shrink-0" />
|
||||||
|
<a
|
||||||
|
href={url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
title={`${t("downloads.source.open")} — ${url}`}
|
||||||
|
className="truncate hover:text-accent hover:underline"
|
||||||
|
>
|
||||||
|
{displayUrl(url)}
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
onClick={copy}
|
||||||
|
aria-label={t("downloads.source.copy")}
|
||||||
|
title={t("downloads.source.copy")}
|
||||||
|
className="shrink-0 p-0.5 rounded-sm hover:bg-surface hover:text-fg transition"
|
||||||
|
>
|
||||||
|
<Copy className="w-3 h-3" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Channel under the title — a clickable link when a channel URL is known, plain text otherwise.
|
||||||
|
function ChannelLine({ job }: { job: DownloadJob }) {
|
||||||
|
const { name, url } = jobChannel(job);
|
||||||
|
if (url) {
|
||||||
|
return (
|
||||||
|
<div className="text-xs mt-0.5 truncate">
|
||||||
|
<a
|
||||||
|
href={url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
title={url}
|
||||||
|
className="text-muted hover:text-accent hover:underline"
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <div className="text-xs text-muted truncate mt-0.5">{name}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DownloadRow({
|
||||||
|
job,
|
||||||
|
onShowError,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
job: DownloadJob;
|
||||||
|
onShowError?: (job: DownloadJob) => void;
|
||||||
|
children?: ReactNode;
|
||||||
|
}) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const running = job.status === "running";
|
||||||
|
return (
|
||||||
|
<div className="flex gap-3 p-2.5 rounded-xl glass-card glass-hover transition">
|
||||||
|
<Thumb job={job} />
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="font-medium leading-snug line-clamp-1 flex items-center gap-1.5">
|
||||||
|
{job.job_kind === "edit" && (
|
||||||
|
<span className="inline-flex items-center gap-1 shrink-0 px-1.5 py-0.5 rounded-sm text-3xs font-semibold uppercase tracking-wide bg-accent/15 text-accent">
|
||||||
|
<Scissors className="w-3 h-3" /> {t("downloads.clipBadge")}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="truncate">{jobTitle(job)}</span>
|
||||||
|
</div>
|
||||||
|
<ChannelLine job={job} />
|
||||||
|
<div className="flex items-center gap-2 mt-1 text-xs">
|
||||||
|
<StatusPill job={job} />
|
||||||
|
{job.asset?.size_bytes ? (
|
||||||
|
<span className="text-muted">· {formatBytes(job.asset.size_bytes)}</span>
|
||||||
|
) : null}
|
||||||
|
{job.asset?.duration_s ? (
|
||||||
|
<span className="text-muted">· {formatDuration(job.asset.duration_s)}</span>
|
||||||
|
) : null}
|
||||||
|
{job.status === "done" && job.created_at ? (
|
||||||
|
<span
|
||||||
|
className="text-muted inline-flex items-center gap-1"
|
||||||
|
title={new Date(job.created_at).toLocaleString()}
|
||||||
|
>
|
||||||
|
· <CalendarClock className="w-3 h-3" /> {relativeTime(job.created_at)}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
{job.status === "error" ? (
|
||||||
|
<button
|
||||||
|
onClick={() => onShowError?.(job)}
|
||||||
|
className="text-danger hover:opacity-80 inline-flex items-center gap-1 truncate"
|
||||||
|
title={t("downloads.errors.fail.title")}
|
||||||
|
>
|
||||||
|
· {t(`downloads.errors.fail.cat.${job.error_code || "unknown"}.short`)}
|
||||||
|
<span className="text-muted underline">{t("downloads.errors.fail.detailsLink")}</span>
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
{job.source_url && <SourceRef url={job.source_url} />}
|
||||||
|
{job.extra_links?.map((url) => (
|
||||||
|
<SourceRef key={url} url={url} />
|
||||||
|
))}
|
||||||
|
{running && (
|
||||||
|
<div className="mt-1.5">
|
||||||
|
{job.phase && !DOWNLOAD_PHASES.includes(job.phase) ? (
|
||||||
|
// ffmpeg post-steps aren't byte-progress — show an indeterminate pulse, no %.
|
||||||
|
<div className="h-1.5 rounded-full bg-surface overflow-hidden">
|
||||||
|
<div className="h-full w-full bg-accent/60 animate-pulse" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="h-1.5 rounded-full bg-surface overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-accent transition-all"
|
||||||
|
style={{ width: `${job.progress}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="text-2xs text-muted mt-0.5 flex gap-2">
|
||||||
|
<span>{job.progress}%</span>
|
||||||
|
{job.speed_bps ? <span>{formatSpeed(job.speed_bps)}</span> : null}
|
||||||
|
{job.eta_s ? <span>{formatEta(job.eta_s)}</span> : null}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-0.5 shrink-0">{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UsageBar() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
// Poll live (like the library list) so the footprint updates the moment the worker finishes an
|
||||||
|
// edit/download — enqueue only creates a queued job (0 bytes), the size lands asynchronously, so
|
||||||
|
// a one-shot fetch at enqueue time would show a stale 0 B until a manual reload.
|
||||||
|
const usage = useLiveQuery(qk.downloadUsage(), api.downloadUsage, { intervalMs: 2000 });
|
||||||
|
const u = usage.data;
|
||||||
|
if (!u) return null;
|
||||||
|
const pct =
|
||||||
|
u.unlimited || !u.max_bytes ? 0 : Math.min(100, (u.footprint_bytes / u.max_bytes) * 100);
|
||||||
|
return (
|
||||||
|
<div className="rounded-xl glass-card p-3 mb-4">
|
||||||
|
<div className="flex justify-between text-sm mb-1.5">
|
||||||
|
<span className="font-medium">{t("downloads.usage.title")}</span>
|
||||||
|
<span className="text-muted">
|
||||||
|
{formatBytes(u.footprint_bytes)}
|
||||||
|
{u.unlimited ? "" : ` / ${formatBytes(u.max_bytes)}`} ·{" "}
|
||||||
|
{u.unlimited
|
||||||
|
? t("downloads.usage.unlimited")
|
||||||
|
: t("downloads.usage.items", { used: u.active_jobs, max: u.max_jobs })}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{!u.unlimited && (
|
||||||
|
<div className="h-2 rounded-full bg-surface overflow-hidden">
|
||||||
|
<div
|
||||||
|
className={clsx("h-full transition-all", pct > 90 ? "bg-danger" : "bg-accent")}
|
||||||
|
style={{ width: `${pct}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user