Middle click to open the url preview card thumbnail in a new tab

.changeset/urlpreview-middleclick.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Handles a middle-click on the url preview card thumbnail image by downloading the full image from the homeserver proxy through a fetch request and opening received blob in the new tab

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -7,7 +7,7 @@
   getIntersectionObserverEntry,
   useIntersectionObserver,
 } from '$hooks/useIntersectionObserver';
-import { mxcUrlToHttp } from '$utils/matrix';
+import { mxcUrlToHttp, downloadMedia } from '$utils/matrix';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
 import * as css from './UrlPreviewCard.css';
 import { UrlPreview, UrlPreviewContent, UrlPreviewDescription } from './UrlPreview';
@@ -17,6 +17,16 @@
 
 const linkStyles = { color: color.Success.Main };
 
+const openMediaInNewTab = async (url: string | undefined) => {
+  if (!url) {
+    console.warn('Attempted to open an empty url');
+    return;
+  }
+  const blob = await downloadMedia(url);
+  const blobUrl = URL.createObjectURL(blob);
+  window.open(blobUrl, '_blank');
+};
+
 export const UrlPreviewCard = as<'div', { url: string; ts: number; mediaType?: string | null }>(
   ({ url, ts, mediaType, ...props }, ref) => {
     const mx = useMatrixClient();
@@ -50,6 +60,21 @@
         'scale',
         false
       );
+      const handleAuxClick = (ev: React.MouseEvent) => {
+        if (!prev['og:image']) {
+          console.warn('No image');
+          return;
+        }
+        if (ev.button === 1) {
+          ev.preventDefault();
+          const mxcUrl = mxcUrlToHttp(mx, prev['og:image'], /* useAuthentication */ true);
+          if (!mxcUrl) {
+            console.error('Error converting mxc:// url.');
+            return;
+          }
+          openMediaInNewTab(mxcUrl);
+        }
+      };
 
       return (
         <Box
@@ -128,6 +153,7 @@
                   <ImageContent
                     style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}
                     autoPlay
+                    onAuxClick={handleAuxClick}
                     body={prev['og:title']}
                     url={prev['og:image']}
                     renderViewer={(p) => <ImageViewer {...p} />}
@@ -187,7 +213,6 @@
         </Box>
       );
     }
-
     return (
       <UrlPreview
         {...props}