diff --git a/.changeset/urlpreview-middleclick.md b/.changeset/urlpreview-middleclick.md
new file mode 100644
index 000000000..f692e8317
--- /dev/null
+++ b/.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
diff --git a/src/app/components/url-preview/UrlPreviewCard.tsx b/src/app/components/url-preview/UrlPreviewCard.tsx
index 129614ce5..5fc3ee610 100644
--- a/src/app/components/url-preview/UrlPreviewCard.tsx
+++ b/src/app/components/url-preview/UrlPreviewCard.tsx
@@ -7,7 +7,7 @@ import {
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 @@ import { ImageViewer } from '../image-viewer';
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 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number; mediaType?: s
'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 (
}
@@ -187,7 +213,6 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number; mediaType?: s
);
}
-
return (