From 5bb8e998de673fb0bb060488d2eb397666486487 Mon Sep 17 00:00:00 2001
From: wil <wilwong@users.noreply.github.com>
Date: Mon, 6 May 2024 23:33:49 -0400
Subject: [PATCH] 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>
---
 .../LoadScene/LoadScene.tsx                   |  3 +--
 .../ScenePicker/SceneCard.tsx                 | 23 ++++++++++++-------
 .../ScenePicker/ScenePicker.tsx               |  2 +-
 .../comps/GenerateModals/CompletedCard.tsx    |  3 ++-
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/LoadScene/LoadScene.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/LoadScene/LoadScene.tsx
index 35d0eb6a5e..62dbf60366 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/LoadScene/LoadScene.tsx
+++ b/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);
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/SceneCard.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/SceneCard.tsx
index e5e4e13479..6054618201 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/SceneCard.tsx
+++ b/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">
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/ScenePicker.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/ScenePicker.tsx
index cc454a0462..c734467ffe 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/ScenePicker.tsx
+++ b/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 {
diff --git a/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx b/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx
index 22c901129c..ff5e2d6b13 100644
--- a/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx
+++ b/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">