From c466e0c279552995b0f0847038badf9d50be01c6 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 27 Feb 2024 18:01:47 +0800
Subject: [PATCH] Broken image fallbacks

---
 src/pages/catchup.jsx | 108 +++++++++++++++++++++++++-----------------
 1 file changed, 65 insertions(+), 43 deletions(-)

diff --git a/src/pages/catchup.jsx b/src/pages/catchup.jsx
index d05e9f31..7aa86c87 100644
--- a/src/pages/catchup.jsx
+++ b/src/pages/catchup.jsx
@@ -1261,49 +1261,71 @@ function PostPeek({ post, filterInfo }) {
             </span>
           )}
           {!!mediaAttachments?.length
-            ? mediaAttachments.map((m) => (
-                <span key={m.id} class="post-peek-media">
-                  {{
-                    image:
-                      (m.previewUrl || m.url) && showMedia ? (
-                        <img
-                          src={m.previewUrl || m.url}
-                          width={MEDIA_SIZE}
-                          height={MEDIA_SIZE}
-                          alt={m.description}
-                          loading="lazy"
-                        />
-                      ) : (
-                        <span class="post-peek-faux-media">🖼</span>
-                      ),
-                    gifv:
-                      m.previewUrl && showMedia ? (
-                        <img
-                          src={m.previewUrl}
-                          width={MEDIA_SIZE}
-                          height={MEDIA_SIZE}
-                          alt={m.description}
-                          loading="lazy"
-                        />
-                      ) : (
-                        <span class="post-peek-faux-media">🎞️</span>
-                      ),
-                    video:
-                      m.previewUrl && showMedia ? (
-                        <img
-                          src={m.previewUrl}
-                          width={MEDIA_SIZE}
-                          height={MEDIA_SIZE}
-                          alt={m.description}
-                          loading="lazy"
-                        />
-                      ) : (
-                        <span class="post-peek-faux-media">📹</span>
-                      ),
-                    audio: <span class="post-peek-faux-media">🎵</span>,
-                  }[m.type] || null}
-                </span>
-              ))
+            ? mediaAttachments.map((m) => {
+                const mediaURL = m.previewUrl || m.url;
+                const remoteMediaURL = m.previewRemoteUrl || m.remoteUrl;
+                return (
+                  <span key={m.id} class="post-peek-media">
+                    {{
+                      image:
+                        (mediaURL || remoteMediaURL) && showMedia ? (
+                          <img
+                            src={mediaURL}
+                            width={MEDIA_SIZE}
+                            height={MEDIA_SIZE}
+                            alt={m.description}
+                            loading="lazy"
+                            onError={(e) => {
+                              const { src } = e.target;
+                              if (src === mediaURL) {
+                                e.target.src = remoteMediaURL;
+                              }
+                            }}
+                          />
+                        ) : (
+                          <span class="post-peek-faux-media">🖼</span>
+                        ),
+                      gifv:
+                        (mediaURL || remoteMediaURL) && showMedia ? (
+                          <img
+                            src={mediaURL}
+                            width={MEDIA_SIZE}
+                            height={MEDIA_SIZE}
+                            alt={m.description}
+                            loading="lazy"
+                            onError={(e) => {
+                              const { src } = e.target;
+                              if (src === mediaURL) {
+                                e.target.src = remoteMediaURL;
+                              }
+                            }}
+                          />
+                        ) : (
+                          <span class="post-peek-faux-media">🎞️</span>
+                        ),
+                      video:
+                        (mediaURL || remoteMediaURL) && showMedia ? (
+                          <img
+                            src={mediaURL}
+                            width={MEDIA_SIZE}
+                            height={MEDIA_SIZE}
+                            alt={m.description}
+                            loading="lazy"
+                            onError={(e) => {
+                              const { src } = e.target;
+                              if (src === mediaURL) {
+                                e.target.src = remoteMediaURL;
+                              }
+                            }}
+                          />
+                        ) : (
+                          <span class="post-peek-faux-media">📹</span>
+                        ),
+                      audio: <span class="post-peek-faux-media">🎵</span>,
+                    }[m.type] || null}
+                  </span>
+                );
+              })
             : !!card &&
               card.image &&
               showMedia && (