pastilhas
0b85d42197
The three job detail panes and the jobs page. Status labels share one jobs.status.* group across all three panes rather than three copies of "Running". statusBadge in two of the panes is a module-level helper, not a component, so it takes `t` as a parameter -- the alternative is calling a hook outside a component body. ScriptJobDetail's version built "Failed (exit N)" by string concatenation; that is a key with a parameter now.
252 lines
8.3 KiB
TypeScript
252 lines
8.3 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useParams, Link } from 'react-router';
|
|
import { Loader2, CheckCircle2, XCircle, Ban, Clock, ArrowLeft, Square, Film, Music } from 'lucide-react';
|
|
import { useClient } from 'hooks/useClient';
|
|
import { toast } from 'sonner';
|
|
import { useTranslation } from '@/lib/i18n';
|
|
|
|
type TFn = ReturnType<typeof useTranslation>['t'];
|
|
|
|
// Detail view for a `download` job — a compact two-phase progress readout (metadata → download), polled
|
|
// from the job's persisted progress (the executor emits counter snapshots, not per-item events).
|
|
|
|
export type Counts = { done: number; failed: number; total: number };
|
|
export type DownloadProgress = {
|
|
phase: 'expanding' | 'metadata' | 'download' | 'done';
|
|
meta: Counts;
|
|
dl: Counts;
|
|
current?: string;
|
|
};
|
|
type DownloadJob = {
|
|
id: string;
|
|
mode: string;
|
|
taskName: string;
|
|
status: 'pending' | 'running' | 'completed' | 'failed' | 'stopped' | 'interrupted';
|
|
error: string | null;
|
|
cwd: string | null;
|
|
inputs?: Record<string, unknown> | null;
|
|
progress: DownloadProgress | null;
|
|
createdAt: string;
|
|
};
|
|
|
|
const POLL_MS = 1500;
|
|
const isTerminal = (s: string) => s === 'completed' || s === 'failed' || s === 'stopped' || s === 'interrupted';
|
|
|
|
// Takes `t` because it is a module-level helper, not a component — the alternative is a hook
|
|
// call outside a component body.
|
|
const statusBadge = (status: string, t: TFn) => {
|
|
switch (status) {
|
|
case 'running':
|
|
return {
|
|
icon: <Loader2 className="h-4 w-4 animate-spin" />,
|
|
label: t('jobs.status.running'),
|
|
cls: 'text-amber-600 dark:text-amber-500',
|
|
};
|
|
case 'pending':
|
|
return {
|
|
icon: <Clock className="h-4 w-4" />,
|
|
label: t('jobs.status.queued'),
|
|
cls: 'text-blue-600 dark:text-blue-400',
|
|
};
|
|
case 'completed':
|
|
return { icon: <CheckCircle2 className="h-4 w-4" />, label: t('jobs.status.completed'), cls: 'text-duck-teal' };
|
|
case 'failed':
|
|
return {
|
|
icon: <XCircle className="h-4 w-4" />,
|
|
label: t('jobs.status.failed'),
|
|
cls: 'text-red-600 dark:text-red-400',
|
|
};
|
|
case 'stopped':
|
|
return {
|
|
icon: <Ban className="h-4 w-4" />,
|
|
label: t('jobs.status.stopped'),
|
|
cls: 'text-duck-dark/50 dark:text-foreground/50',
|
|
};
|
|
default:
|
|
return {
|
|
icon: <XCircle className="h-4 w-4" />,
|
|
label: t('jobs.status.interrupted'),
|
|
cls: 'text-orange-600 dark:text-orange-400',
|
|
};
|
|
}
|
|
};
|
|
|
|
// A labelled progress bar: fill = processed/total; caption states kept/saved vs skipped/failed.
|
|
export const PhaseBar = ({
|
|
label,
|
|
c,
|
|
active,
|
|
savedLabel,
|
|
failedLabel,
|
|
}: {
|
|
label: string;
|
|
c: Counts;
|
|
active: boolean;
|
|
savedLabel: string;
|
|
failedLabel: string;
|
|
}) => {
|
|
const processed = c.done + c.failed;
|
|
const pct = c.total ? (processed / c.total) * 100 : 0;
|
|
return (
|
|
<div className="flex flex-col gap-1.5">
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span
|
|
className={`font-medium ${active ? 'text-duck-dark dark:text-foreground' : 'text-duck-dark/50 dark:text-foreground/50'}`}
|
|
>
|
|
{label}
|
|
</span>
|
|
<span className="tabular-nums text-duck-dark/50 dark:text-foreground/50">
|
|
{processed}/{c.total || '—'}
|
|
</span>
|
|
</div>
|
|
<div className="h-2.5 overflow-hidden rounded-full bg-duck-dark/10 dark:bg-foreground/10">
|
|
<div className="h-full rounded-full bg-duck-teal transition-all duration-300" style={{ width: `${pct}%` }} />
|
|
</div>
|
|
<div className="flex gap-3 text-[11px] text-duck-dark/50 dark:text-foreground/50">
|
|
<span className="text-duck-teal">
|
|
{c.done} {savedLabel}
|
|
</span>
|
|
{c.failed > 0 && (
|
|
<span className="text-red-500/80">
|
|
{c.failed} {failedLabel}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const DownloadJobDetail = () => {
|
|
const { t } = useTranslation();
|
|
const { id } = useParams<{ id: string }>();
|
|
const client = useClient();
|
|
const [job, setJob] = useState<DownloadJob | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!id) return;
|
|
let cancelled = false;
|
|
const load = async () => {
|
|
try {
|
|
const j = await client.get<DownloadJob>(`/jobs/${id}`);
|
|
if (!cancelled) setJob(j);
|
|
return j;
|
|
} catch {
|
|
return null;
|
|
} finally {
|
|
if (!cancelled) setLoading(false);
|
|
}
|
|
};
|
|
void load();
|
|
const timer = setInterval(async () => {
|
|
const j = await load();
|
|
if (j && isTerminal(j.status)) clearInterval(timer);
|
|
}, POLL_MS);
|
|
return () => {
|
|
cancelled = true;
|
|
clearInterval(timer);
|
|
};
|
|
}, [id]);
|
|
|
|
const stop = async () => {
|
|
if (!id) return;
|
|
try {
|
|
await client.post(`/jobs/${id}/stop`, {});
|
|
toast.success(t('jobs.stopRequested'));
|
|
} catch {
|
|
toast.error(t('jobs.stopFailed'));
|
|
}
|
|
};
|
|
|
|
if (loading)
|
|
return (
|
|
<div className="flex-1 flex items-center justify-center text-duck-dark/50 dark:text-foreground/50">
|
|
<Loader2 className="h-5 w-5 animate-spin" />
|
|
</div>
|
|
);
|
|
if (!job)
|
|
return (
|
|
<div className="flex-1 flex flex-col items-center justify-center gap-3 text-duck-dark/60 dark:text-foreground/60">
|
|
<span>{t('jobs.notFound')}</span>
|
|
<Link to="/jobs" className="text-duck-teal hover:underline">
|
|
{t('jobs.backToJobs')}
|
|
</Link>
|
|
</div>
|
|
);
|
|
|
|
const badge = statusBadge(job.status, t);
|
|
const running = !isTerminal(job.status);
|
|
const p = job.progress;
|
|
const isAudio = job.inputs?.format !== 'video';
|
|
const phaseLabel =
|
|
!p || p.phase === 'expanding'
|
|
? 'Preparing…'
|
|
: p.phase === 'metadata'
|
|
? 'Fetching titles'
|
|
: p.phase === 'download'
|
|
? 'Downloading'
|
|
: 'Done';
|
|
|
|
return (
|
|
<div className="flex-1 flex flex-col min-h-0">
|
|
<div className="px-5 py-3 border-b border-duck-dark/10 flex items-center gap-3">
|
|
<Link
|
|
to="/jobs"
|
|
className="text-duck-dark/50 dark:text-foreground/50 hover:text-duck-dark dark:hover:text-foreground"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Link>
|
|
<div className="flex items-center gap-1.5 min-w-0">
|
|
{isAudio ? (
|
|
<Music className="h-4 w-4 shrink-0 text-duck-teal" />
|
|
) : (
|
|
<Film className="h-4 w-4 shrink-0 text-duck-teal" />
|
|
)}
|
|
<div className="flex flex-col min-w-0">
|
|
<span className="text-sm font-medium text-duck-dark dark:text-foreground truncate">{job.taskName}</span>
|
|
{job.cwd && <span className="text-xs text-duck-dark/40 dark:text-foreground/40 truncate">→ {job.cwd}</span>}
|
|
</div>
|
|
</div>
|
|
<span className={`ml-auto flex items-center gap-1.5 text-sm ${badge.cls}`}>
|
|
{badge.icon} {badge.label}
|
|
</span>
|
|
{running && (
|
|
<button
|
|
onClick={stop}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 cursor-pointer transition-colors"
|
|
>
|
|
<Square className="h-3 w-3" /> {t('jobs.stop')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 min-h-0 overflow-y-auto p-5">
|
|
<div className="mx-auto flex max-w-md flex-col gap-5">
|
|
<div className="text-sm text-duck-dark/60 dark:text-foreground/60">{phaseLabel}</div>
|
|
<PhaseBar
|
|
label={t('jobs.titles')}
|
|
c={p?.meta ?? { done: 0, failed: 0, total: 0 }}
|
|
active={p?.phase === 'metadata'}
|
|
savedLabel="found"
|
|
failedLabel="skipped"
|
|
/>
|
|
<PhaseBar
|
|
label={t('jobs.download')}
|
|
c={p?.dl ?? { done: 0, failed: 0, total: 0 }}
|
|
active={p?.phase === 'download'}
|
|
savedLabel="saved"
|
|
failedLabel="failed"
|
|
/>
|
|
{running && p?.phase === 'download' && p.current && (
|
|
<div className="truncate text-xs text-duck-dark/50 dark:text-foreground/50" title={p.current}>
|
|
<Loader2 className="mr-1.5 inline h-3 w-3 animate-spin" />
|
|
{p.current}
|
|
</div>
|
|
)}
|
|
{job.error && !running && <div className="text-xs text-red-600 dark:text-red-400">{job.error}</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|