Thumbnails in Load Scene Dialog (#323)

- Fixed! now the Load Scene Dialog loads the metadata correctly
- and the component Scene Card read said metadata to show the thumbnail
- Scene Card is also capable of loading a fallback image in case of
loading error
- Fixed! Faulty thumbnail metadata in Movies CompletedCard
- Both SceneCard and CompletedCard load images lazily

Co-authored-by: wil <wil@storyteller.ai>

app/pages/PageEnigma/comps/ControlsTopButtons/LoadScene/LoadScene.tsx

@@ -39,7 +39,6 @@ export const LoadScene = ({ onSceneSelect }: LoadSceneProps) => {
       },
     )
       .then((res: GetMediaListResponse) => {
-        // console.log(res);
         if (res.success && res.results) {
           setScenes(
             res.results.map((scene) => ({
@@ -48,7 +47,7 @@ export const LoadScene = ({ onSceneSelect }: LoadSceneProps) => {
               updated_at: dayjs(scene.updated_at).format(
                 "MMM D, YYYY HH:mm:ss",
               ),
-              thumbnail: scene.public_bucket_path,
+              thumbnail: scene.cover_image.maybe_cover_image_public_bucket_path ? scene.cover_image.maybe_cover_image_public_bucket_path : undefined,
             })),
           );
           setIsSceneLoading(false);

app/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/SceneCard.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useRef, useState } from "react";
+import { BucketConfig } from "~/api/BucketConfig";
 import { twMerge } from "tailwind-merge";
 
 export type SceneTypes = {
@@ -21,16 +22,19 @@ export const SceneCard: React.FC<SceneCardProps> = ({
   selectedSceneId,
   showDate,
 }) => {
+  // console.log(scene);
+  const [loadError, setLoadError] = useState(false);
+
   const handleSelected = (scene: SceneTypes) => {
     onSceneSelect(scene);
   };
 
-  // const bucketConfig = useRef(new BucketConfig());
-  // const imageUrl = bucketConfig.current.getCdnUrl(
-  //   scene.thumbnail + "-thumb.gif",
-  //   360,
-  //   20,
-  // );
+  const bucketConfig = useRef(new BucketConfig());
+  const imageThumbnailUrl = scene.thumbnail &&  bucketConfig.current.getCdnUrl(
+    scene.thumbnail,
+    360,
+    20,
+  );
   // thumbnail will be replaced with 3d scene screenshots
   const tempThumbnail = "/resources/placeholders/scene_placeholder.png";
 
@@ -45,9 +49,12 @@ export const SceneCard: React.FC<SceneCardProps> = ({
       )}
       onClick={() => handleSelected(scene)}>
       <img
+        src={imageThumbnailUrl && !loadError ? imageThumbnailUrl:  tempThumbnail}
         className="aspect-video object-cover"
-        src={tempThumbnail}
+        crossOrigin="anonymous"
         alt={scene.name}
+        onError={() => setLoadError(true)}
+        loading="lazy"
       />
       <div className="absolute left-0 top-0 h-full w-full bg-gradient-to-t from-ui-panel to-transparent" />
       <div className="absolute bottom-[8px] left-[10px] text-start text-sm drop-shadow-md">

app/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/ScenePicker.tsx

@@ -5,7 +5,7 @@ export type SceneTypes = {
   token: string;
   name: string;
   updated_at?: string;
-  thumbnail: string;
+  thumbnail: string | undefined;
 };
 
 interface ScenePickerProps {

app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx

@@ -38,12 +38,13 @@ export function CompletedCard({ movie, setMovieId }: Props) {
         <div className="rounded-lg">
           <img
             src={
-              loadError ? "resources/images/movie-placeholder.png" : imageUrl
+              loadError ? "/resources/images/movie-placeholder.png" : imageUrl
             }
             className="aspect-video w-36 rounded-lg object-cover"
             alt={movie.maybe_title ?? "unknown"}
             crossOrigin="anonymous"
             onError={() => setLoadError(true)}
+            loading="lazy"
           />
         </div>
         <div className="flex flex-col justify-center gap-1">