diff --git a/frontend/src/components/DownloadCenter.tsx b/frontend/src/components/DownloadCenter.tsx index 9facb718..8f3c6b14 100644 --- a/frontend/src/components/DownloadCenter.tsx +++ b/frontend/src/components/DownloadCenter.tsx @@ -89,7 +89,12 @@ function Thumb({ job }: { job: DownloadJob }) { // 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; - const primary = job.poster_url || remote; + // `job.poster_url` only SIGNALS a poster exists; the actual src must carry ?account= (see + // api.posterImageUrl). A plain 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]); diff --git a/frontend/src/lib/api/downloads.ts b/frontend/src/lib/api/downloads.ts index 296f6ca3..25dbf7c9 100644 --- a/frontend/src/lib/api/downloads.ts +++ b/frontend/src/lib/api/downloads.ts @@ -225,6 +225,15 @@ export const downloadsApi = { ? `/api/downloads/${id}/storyboard.jpg?account=${a}` : `/api/downloads/${id}/storyboard.jpg`; }, + // The locally-generated poster (an src → direct nav, so same ?account= wallet gate). Without + // it the poster resolves to the session-default account and 404s for a per-tab account's download — + // which reads as a blank Library thumbnail once the poster is the card's primary image. + posterImageUrl: (id: number): string => { + const a = getActiveAccount(); + return a != null + ? `/api/downloads/${id}/poster.jpg?account=${a}` + : `/api/downloads/${id}/poster.jpg`; + }, // admin adminDownloads: (): Promise => req("/api/admin/downloads"),