From 990f2b2e29c4b16071d3e37136785a05d9394b1d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 24 Jan 2024 13:08:54 +0800
Subject: [PATCH] Handle unknown audio attachments

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

diff --git a/src/components/media.jsx b/src/components/media.jsx
index 2ce3f784..644af408 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -151,11 +151,19 @@ function Media({
     [to],
   );
 
+  const remoteMediaURLObj = remoteMediaURL ? new URL(remoteMediaURL) : null;
   const isVideoMaybe =
     type === 'unknown' &&
-    /\.(mp4|m4a|m4p|m4b|m4r|m4v|mov|webm)$/i.test(remoteMediaURL);
+    remoteMediaURLObj &&
+    /\.(mp4|m4r|m4v|mov|webm)$/i.test(remoteMediaURLObj.pathname);
+  const isAudioMaybe =
+    type === 'unknown' &&
+    remoteMediaURLObj &&
+    /\.(mp3|ogg|wav|m4a|m4p|m4b)$/i.test(remoteMediaURLObj.pathname);
+  console.log('render media', remoteMediaURL, remoteMediaURLObj, isAudioMaybe);
   const isImage =
-    type === 'image' || (type === 'unknown' && previewUrl && !isVideoMaybe);
+    type === 'image' ||
+    (type === 'unknown' && previewUrl && !isVideoMaybe && !isAudioMaybe);
 
   const parentRef = useRef();
   const [imageSmallerThanParent, setImageSmallerThanParent] = useState(false);
@@ -476,7 +484,7 @@ function Media({
         </Parent>
       </Figure>
     );
-  } else if (type === 'audio') {
+  } else if (type === 'audio' || isAudioMaybe) {
     const formattedDuration = formatDuration(original.duration);
     return (
       <Figure>
@@ -499,6 +507,12 @@ function Media({
               height={height}
               data-orientation={orientation}
               loading="lazy"
+              onError={(e) => {
+                try {
+                  // Remove self if broken
+                  e.target?.remove?.();
+                } catch (e) {}
+              }}
             />
           ) : null}
           {!showOriginal && (