From ae7b9c931c509d9608411661655de02ef39ab597 Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Mon, 16 Oct 2023 20:48:59 -0400
Subject: [PATCH] Fallback to thumbnails if the base image fails to load

---
 src/features/shared/Media.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/features/shared/Media.tsx b/src/features/shared/Media.tsx
index 6d3cfdfb81..001c6f78f1 100644
--- a/src/features/shared/Media.tsx
+++ b/src/features/shared/Media.tsx
@@ -36,8 +36,10 @@ interface MediaProps {
 const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
   const postUrl = transformUrl(post.post.url || "");
   const embedVideoUrl = transformUrl(post.post.embed_video_url || "");
+  const thumbnailUrl = transformUrl(post.post.thumbnail_url || "");
   const [url, setUrl] = useState(embedVideoUrl || postUrl);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const isImage = isUrlImage(url as string);
   const isVideo = isUrlVideo(url as string);
   const isVideoEmbed = isUrlVideoEmbed(url as string);
 
@@ -51,6 +53,12 @@ const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
     if (isVideo && url === embedVideoUrl) {
       return setUrl(postUrl);
     }
+
+    // Cycle the image url before throwing an error
+    if (isImage && url === postUrl) {
+      return setUrl(thumbnailUrl);
+    }
+
     onError();
   };
 
@@ -58,8 +66,11 @@ const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
     return;
   }
 
+  // Change the url as we need
+  const postWithUrl = { ...post, post: { ...post.post, url: url } };
+
   if (postUrl && isUrlImage(postUrl)) {
-    return <Image blur={blur} post={post} animationType="zoom" />;
+    return <Image blur={blur} post={postWithUrl} animationType="zoom" />;
   }
 
   if (isVideo) {
@@ -89,7 +100,7 @@ const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
   }
 
   if (markdownLoneImage)
-    return <Image blur={blur} post={post} animationType="zoom" />;
+    return <Image blur={blur} post={postWithUrl} animationType="zoom" />;
 };
 
 export default Media;