From 8f7c6a159b0fbc35eb302ec23a70da7bf973c4d4 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 28 Apr 2023 19:28:36 +0800
Subject: [PATCH] Better image fallbacks

---
 src/components/media.jsx | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index cac624c0..35972e10 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -17,13 +17,24 @@ audio = Audio track
 */
 
 function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
-  const { blurhash, description, meta, previewUrl, remoteUrl, url, type } =
-    media;
+  const {
+    blurhash,
+    description,
+    meta,
+    previewRemoteUrl,
+    previewUrl,
+    remoteUrl,
+    url,
+    type,
+  } = media;
   const { original = {}, small, focus } = meta || {};
 
   const width = showOriginal ? original?.width : small?.width;
   const height = showOriginal ? original?.height : small?.height;
-  const mediaURL = showOriginal ? url : previewUrl;
+  const mediaURL = showOriginal ? url : previewUrl || url;
+  const remoteMediaURL = showOriginal
+    ? remoteUrl
+    : previewRemoteUrl || remoteUrl;
   const orientation = width >= height ? 'landscape' : 'portrait';
 
   const rgbAverageColor = blurhash ? getBlurHashAverageColor(blurhash) : null;
@@ -113,6 +124,12 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
                 e.target.closest('.media-zoom').style.display = '';
                 setPinchZoomEnabled(true);
               }}
+              onError={(e) => {
+                const { src } = e.target;
+                if (src === mediaURL) {
+                  e.target.src = remoteMediaURL;
+                }
+              }}
             />
           </QuickPinchZoom>
         ) : (
@@ -131,6 +148,12 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
             onLoad={(e) => {
               e.target.closest('.media-image').style.backgroundImage = '';
             }}
+            onError={(e) => {
+              const { src } = e.target;
+              if (src === mediaURL) {
+                e.target.src = remoteMediaURL;
+              }
+            }}
           />
         )}
       </Parent>