From 2cc44ba616606b4b6981773598ee2df0d43fa096 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Wed, 21 Aug 2024 14:52:20 +0700
Subject: [PATCH] fix liveportrait thumbnails

---
 .../live_portrait/OutputThumbnailImage.tsx    | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/OutputThumbnailImage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/OutputThumbnailImage.tsx
index 8a14c62dbc..cb83edc26d 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/OutputThumbnailImage.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/OutputThumbnailImage.tsx
@@ -13,13 +13,13 @@ const OutputThumbnailImage: React.FC<OutputThumbnailImageProps> = ({
   style,
   draggable,
 }) => {
-  const [isThumbReady, setIsThumbReady] = useState(false);
-  const [attempts, setAttempts] = useState(0);
-  const [thumbnailSrc, setThumbnailSrc] = useState(src);
+  const [thumbnailSrc, setThumbnailSrc] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     let isMounted = true;
     const maxAttempts = 5;
+    let attempts = 0;
 
     const checkImage = () => {
       const img = new Image();
@@ -28,42 +28,46 @@ const OutputThumbnailImage: React.FC<OutputThumbnailImageProps> = ({
       img.onload = () => {
         if (isMounted) {
           console.log("Thumbnail loaded successfully");
-          setIsThumbReady(true);
           setThumbnailSrc(thumbSrc);
+          setIsLoading(false);
         }
       };
       img.onerror = () => {
-        if (isMounted && !isThumbReady && attempts < maxAttempts) {
+        if (isMounted && attempts < maxAttempts) {
           console.log(`Attempt ${attempts + 1} failed, retrying...`);
-          setTimeout(checkImage, 1000); // Retry after 1 second if the image is not available
-          setAttempts(prev => prev + 1);
+          setTimeout(checkImage, 1000);
+          attempts += 1;
         } else {
           console.log("Max attempts reached or component unmounted");
+          setIsLoading(false);
         }
       };
     };
 
     if (src && src.toLowerCase().endsWith(".mp4")) {
       checkImage();
+    } else {
+      setThumbnailSrc(src);
+      setIsLoading(false);
     }
 
     return () => {
       isMounted = false;
     };
-  }, [src, isThumbReady, attempts]);
+  }, [src]);
+
+  if (isLoading || !thumbnailSrc) {
+    return null;
+  }
 
   return (
-    <>
-      {isThumbReady ? (
-        <img
-          key={src}
-          src={thumbnailSrc}
-          alt={alt}
-          style={style}
-          draggable={draggable}
-        />
-      ) : null}
-    </>
+    <img
+      key={thumbnailSrc}
+      src={thumbnailSrc}
+      alt={alt}
+      style={style}
+      draggable={draggable}
+    />
   );
 };