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 (