officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

download job: restore the metadata phase — ReClip needs the title for filenames

Browse Source 
Verified against live ReClip: POST /api/download with title:"" → a hash filename
(b5d04adc86.mp3); with title:"Me at the zoo" → "Me at the zoo.mp3". So ReClip
names the file from the title WE send (falling back to a hash) — it does not
self-name. The title is mandatory, which means a metadata pass is required.

Back to two phases:
1. metadata — fetch each item's /api/info (title + validity), keep survivors, skip
   errors.
2. download — download each survivor passing its title, so files land with real
   names; skip download errors.

Keeps the exact-urls[] input (Mix playlists can't drift) and the one-request-per-
item download. Progress is two counters again (Titles + Download); UI shows two
bars. ~2 requests/item is inherent to needing the title (per the user's call:
correctness over speed).

Verified two-phase filtering + title passthrough + skip-on-error with a mock.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-07-28 19:17:27 +00:00
co-authored by Claude Opus 4.8
parent 7d149bd4d1
commit 459b8ab730
3 changed files with 154 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/officer-web/Screens/Dashboard/Jobs/DownloadJobDetail.tsx
+55 -14
View File
@@ -7,11 +7,11 @@ import { toast } from 'sonner';
// 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).
type Counts = { done: number; failed: number; total: number };
type DownloadProgress = {
phase: 'expanding' | 'download' | 'done';
done: number;
failed: number;
total: number;
phase: 'expanding' | 'metadata' | 'download' | 'done';
meta: Counts;
dl: Counts;
current?: string;
};
type DownloadJob = {
@@ -54,24 +54,46 @@ const statusBadge = (status: string) => {
}
};
// The download progress bar: fill = processed/total; caption states saved vs skipped.
const DownloadBar = ({ p }: { p: DownloadProgress }) => {
const processed = p.done + p.failed;
const pct = p.total ? (processed / p.total) * 100 : 0;
// A labelled progress bar: fill = processed/total; caption states kept/saved vs skipped/failed.
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 text-duck-dark dark:text-foreground">Downloaded</span>
<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}/{p.total || '—'}
{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">{p.done} saved</span>
{p.failed > 0 && <span className="text-red-500/80">{p.failed} skipped</span>}
<span className="text-duck-teal">
{c.done} {savedLabel}
</span>
{c.failed > 0 && (
<span className="text-red-500/80">
{c.failed} {failedLabel}
</span>
)}
</div>
</div>
);
@@ -139,7 +161,13 @@ export const DownloadJobDetail = () => {
const p = job.progress;
const isAudio = job.inputs?.format !== 'video';
const phaseLabel =
!p || p.phase === 'expanding' ? 'Expanding playlist…' : p.phase === 'download' ? 'Downloading' : 'Done';
!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">
@@ -177,7 +205,20 @@ export const DownloadJobDetail = () => {
<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>
<DownloadBar p={p ?? { phase: 'expanding', done: 0, failed: 0, total: 0 }} />
<PhaseBar
label="Titles"
c={p?.meta ?? { done: 0, failed: 0, total: 0 }}
active={p?.phase === 'metadata'}
savedLabel="found"
failedLabel="skipped"
/>
<PhaseBar
label="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" />
src/servers/api/tasks/execute-download.ts
+57 -23
View File
@@ -1,19 +1,22 @@
import { reclipPlaylist, reclipDownloadOne } from '../../reclip-client';
import { reclipInfo, reclipPlaylist, reclipDownloadOne, type ReclipInfo } from '../../reclip-client';
// The download-job executor — pure scripting, no agent. One download request per item in the chosen
// format (audio/video), skipping anything that fails (private / deleted / download error). No metadata
// prefetch — ReClip names the file from the video title itself. The item list comes from the caller
// (inputs.urls — the exact list the panel already expanded, so a Mix/radio playlist that returns a
// different set each call can't drift); it falls back to expanding inputs.url server-side. Emits a compact
// `download:progress` snapshot (counters, not per-item events — a playlist can be thousands of items).
// Throws on abort or a fatal error; per-item errors are counted + skipped.
// The download-job executor — pure scripting, no agent. Two phases:
// 1. metadata — fetch each item's info (title + validity); keep the ones that resolve, skip the errors
// (private / deleted / unavailable). The title is required: ReClip names the output file
// from it (no title → a hash filename), so we cannot skip this pass.
// 2. download — download every survivor in the chosen format (audio/video), passing its title; skip
// anything that fails.
// The item list comes from the caller (inputs.urls — the exact list the panel expanded, so a Mix/radio
// playlist that returns a different set each call can't drift); falls back to expanding inputs.url. Emits
// a compact `download:progress` snapshot (counters, not per-item events — a playlist can be thousands of
// items). Throws on abort or a fatal error; per-item errors are counted + skipped.
type Counts = { done: number; failed: number; total: number };
export type DownloadProgress = {
phase: 'expanding' | 'download' | 'done';
done: number; // downloaded successfully
failed: number; // skipped (unavailable / download error)
total: number;
current?: string; // url of the item currently downloading
phase: 'expanding' | 'metadata' | 'download' | 'done';
meta: Counts; // done = kept (title fetched), failed = skipped
dl: Counts; // done = saved, failed = failed
current?: string; // title of the item currently downloading
};
export type DownloadEvent = { type: 'download:progress'; progress: DownloadProgress };
@@ -23,7 +26,7 @@ export type ExecuteDownloadParams = {
userId: number;
email: string;
username?: string | null;
inputs: Record<string, string>; // { url, format: 'audio'|'video', absDir }
inputs: Record<string, string>; // { urls (JSON) | url, format: 'audio'|'video', absDir }
cwd?: string;
abortSignal: { aborted: boolean };
emit: (event: DownloadEvent) => void;
@@ -36,13 +39,20 @@ export async function executeDownload(params: ExecuteDownloadParams): Promise<vo
if (!absDir) throw new Error('download job missing target directory');
const audioOnly = format !== 'video'; // default to audio
const progress: DownloadProgress = { phase: 'expanding', done: 0, failed: 0, total: 0 };
const progress: DownloadProgress = {
phase: 'expanding',
meta: { done: 0, failed: 0, total: 0 },
dl: { done: 0, failed: 0, total: 0 },
};
let lastEmit = 0;
const emit = (force = false) => {
const now = Date.now();
if (!force && now - lastEmit < EMIT_THROTTLE_MS) return;
lastEmit = now;
params.emit({ type: 'download:progress', progress: { ...progress } });
params.emit({
type: 'download:progress',
progress: { ...progress, meta: { ...progress.meta }, dl: { ...progress.dl } },
});
};
const checkAbort = () => {
if (params.abortSignal.aborted) throw new Error('aborted');
@@ -66,20 +76,44 @@ export async function executeDownload(params: ExecuteDownloadParams): Promise<vo
throw new Error('download job missing url(s)');
}
// ── Download: one request per item, skip failures ──
progress.phase = 'download';
progress.total = urls.length;
// ── Phase 1: metadata (title + validity) ──
progress.phase = 'metadata';
progress.meta.total = urls.length;
emit(true);
const valid: Array<{ url: string; title: string }> = [];
for (const u of urls) {
checkAbort();
progress.current = u;
const info = await reclipInfo(u).catch((): ReclipInfo => ({ error: 'fetch failed' }));
if (info && !info.error) {
valid.push({ url: u, title: info.title ?? '' });
progress.meta.done++;
} else {
progress.meta.failed++;
}
emit();
}
emit(true);
// ── Phase 2: download survivors (title → real filename) ──
progress.phase = 'download';
progress.dl.total = valid.length;
emit(true);
for (const item of valid) {
checkAbort();
progress.current = item.title || item.url;
emit(true);
try {
await reclipDownloadOne({ url: u, destDir: absDir, audioOnly, signal: params.abortSignal });
progress.done++;
await reclipDownloadOne({
url: item.url,
destDir: absDir,
audioOnly,
title: item.title,
signal: params.abortSignal,
});
progress.dl.done++;
} catch {
checkAbort(); // an abort surfaces as a throw here — re-check so it stops instead of counting as a skip
progress.failed++;
progress.dl.failed++;
}
emit();
}
src/workspaces/officerdev/src/apps/FileBrowser/VideoDownloadPanel.tsx
+42 -27
View File
@@ -17,12 +17,12 @@ import {
} from 'lucide-react';
import { useFilesAPI, type VideoInfo } from '../../hooks/useFilesAPI';
// Compact progress shape mirrored from the download-job executor (done = saved, failed = skipped).
// Compact progress shape mirrored from the download-job executor (done = kept/saved, failed = skipped).
type JobCounts = { done: number; failed: number; total: number };
type JobProgress = {
phase: 'expanding' | 'download' | 'done';
done: number;
failed: number;
total: number;
phase: 'expanding' | 'metadata' | 'download' | 'done';
meta: JobCounts;
dl: JobCounts;
current?: string;
};
@@ -275,8 +275,8 @@ export const VideoDownloadPanel = () => {
if (cancelled || !j) return;
setJobStatus(j.status);
setJobProg(j.progress);
if (j.progress && j.progress.done > lastDlDone.current) {
lastDlDone.current = j.progress.done;
if (j.progress && j.progress.dl.done > lastDlDone.current) {
lastDlDone.current = j.progress.dl.done;
setRefreshSignal((n) => n + 1);
}
if (['completed', 'failed', 'stopped', 'interrupted'].includes(j.status)) clearInterval(timer);
@@ -570,11 +570,39 @@ const JobView = ({
}) => {
const terminal = ['completed', 'failed', 'stopped', 'interrupted'].includes(status);
const phaseLabel =
!prog || prog.phase === 'expanding' ? 'Expanding playlist…' : prog.phase === 'download' ? 'Downloading' : 'Done';
const done = prog?.done ?? 0;
const failed = prog?.failed ?? 0;
const total = prog?.total ?? 0;
const pct = total ? ((done + failed) / total) * 100 : 0;
!prog || prog.phase === 'expanding'
? 'Preparing…'
: prog.phase === 'metadata'
? 'Fetching titles'
: prog.phase === 'download'
? 'Downloading'
: 'Done';
const Bar = ({ label, c, saved, failed }: { label: string; c: JobCounts; saved: string; failed: string }) => {
const pct = c.total ? ((c.done + c.failed) / c.total) * 100 : 0;
return (
<div className="flex flex-col gap-1">
<div className="flex justify-between text-xs">
<span className="font-medium text-duck-dark">{label}</span>
<span className="tabular-nums text-duck-dark/50">
{c.done + c.failed}/{c.total || '—'}
</span>
</div>
<div className="h-2 overflow-hidden rounded-full bg-duck-dark/10">
<div className="h-full rounded-full bg-duck-teal transition-all duration-300" style={{ width: `${pct}%` }} />
</div>
<div className="flex gap-3 text-[10px] text-duck-dark/50">
<span className="text-duck-teal">
{c.done} {saved}
</span>
{c.failed > 0 && (
<span className="text-red-500/80">
{c.failed} {failed}
</span>
)}
</div>
</div>
);
};
return (
<div className="flex flex-col gap-4">
<div className="flex items-center gap-2 text-sm">
@@ -592,21 +620,8 @@ const JobView = ({
</span>
<span className="ml-auto text-xs text-duck-dark/40">{audio ? 'Audio' : 'Video'}</span>
</div>
<div className="flex flex-col gap-1">
<div className="flex justify-between text-xs">
<span className="font-medium text-duck-dark">Downloaded</span>
<span className="tabular-nums text-duck-dark/50">
{done + failed}/{total || '—'}
</span>
</div>
<div className="h-2.5 overflow-hidden rounded-full bg-duck-dark/10">
<div className="h-full rounded-full bg-duck-teal transition-all duration-300" style={{ width: `${pct}%` }} />
</div>
<div className="flex gap-3 text-[10px] text-duck-dark/50">
<span className="text-duck-teal">{done} saved</span>
{failed > 0 && <span className="text-red-500/80">{failed} skipped</span>}
</div>
</div>
<Bar label="Titles" c={prog?.meta ?? { done: 0, failed: 0, total: 0 }} saved="found" failed="skipped" />
<Bar label="Download" c={prog?.dl ?? { done: 0, failed: 0, total: 0 }} saved="saved" failed="failed" />
{!terminal && prog?.phase === 'download' && prog.current && (
<p className="truncate text-xs text-duck-dark/50" title={prog.current}>
{prog.current}