improve thumbnails in activity / job dropdown

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;

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(),
           }));
 

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) {
           <div className="flex aspect-square h-14 w-14 justify-center overflow-hidden rounded-lg border border-[#A9A9A9]/50 bg-black/60">
             <img
               src={
-                loadError ? "/resources/images/movie-placeholder.png" : imageUrl
+                loadError ? "/resources/images/movie-placeholder.png" : thumbnailUrl
               }
               className="h-full w-full object-cover"
               alt={job.maybe_title ?? "unknown"}
-              crossOrigin="anonymous"
+              //crossOrigin="anonymous"
               onError={() => setLoadError(true)}
               loading="lazy"
             />