diff --git a/frontend/apps/editor3d/app/src/models/Job.ts b/frontend/apps/editor3d/app/src/models/Job.ts index 80deb2a03e..a3aca19a99 100644 --- a/frontend/apps/editor3d/app/src/models/Job.ts +++ b/frontend/apps/editor3d/app/src/models/Job.ts @@ -14,7 +14,20 @@ export interface JobMaybeResult { entity_type: string; maybe_public_bucket_media_path: string; maybe_successfully_completed_at: string; + media_links?: JobMediaLinks; } + +export interface JobMediaLinks { + cdn_url: string; + maybe_thumbnail_template?: string; + maybe_video_previews?: JobMediaLinksVideoPreviews; +} + +export interface JobMediaLinksVideoPreviews { + still: string; + animated: string; +} + export interface JobRequest { inference_category: string; maybe_model_title: string; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Activity.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Activity.tsx index f1f614c996..a9162666c5 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Activity.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Activity.tsx @@ -10,11 +10,13 @@ import { JobsApi } from "~/Classes/ApiManager/JobsApi"; import { toast } from "@storyteller/ui-toaster"; import { ActiveJob } from "~/pages/PageEnigma/models"; import { IsJobPollingDisabled } from "~/flags/DevConsoleFlags"; + // TODO ensure we de-dupe all this extra code. interface CompletedItem { token: string; maybe_title: string; - public_bucket_path: string; + public_bucket_path: string; // TODO: STOP USING THIS. + maybe_media_links_thumbnail?: string; updated_at: string; } @@ -140,6 +142,12 @@ export function Activity() { maybe_title: job.request?.maybe_model_title || "Image Generation", public_bucket_path: job.maybe_result?.maybe_public_bucket_media_path || "", + maybe_media_links_thumbnail: ((job) => { + // Try the video thumbnail first, then the regular thumbnail. + const maybeVideoThumb = job.maybe_result?.media_links?.maybe_video_previews?.animated; + const maybeGenericThumb = (job.maybe_result?.media_links?.maybe_thumbnail_template || "").replace("{WIDTH}", "500"); + return maybeVideoThumb || maybeGenericThumb; + })(job), updated_at: job.updated_at || new Date().toISOString(), })); diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx index 816fa1f43d..f771a04855 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx @@ -12,6 +12,7 @@ interface Props { updated_at: string; public_bucket_path: string; maybe_style_name?: string; + maybe_media_links_thumbnail?: string; }; } @@ -21,9 +22,13 @@ export function CompletedCard({ job }: Props) { const cdnOrigin = GetCdnOrigin(); const mediaPath = job?.public_bucket_path || ""; const downloadLink = `${cdnOrigin}${mediaPath}`; - const imageUrl = downloadLink; + //const imageUrl = downloadLink; const fullImageUrl = downloadLink; + // NB: Try to use the thumbnail instead of the link to the full asset. + // Passing around full asset URLs and putting them into image tags is causing CORS errors if those assets are not images. + const thumbnailUrl = job?.maybe_media_links_thumbnail; + if (!job) return null; return ( @@ -36,11 +41,11 @@ export function CompletedCard({ job }: Props) {