From 471e77e15fc8aff9f6eb25e436b4140d4d4392e7 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Sun, 12 Apr 2026 10:18:52 +0300 Subject: [PATCH 1/6] fix showing multiple previews --- src/app/components/RenderMessageContent.tsx | 3 +- .../message/content/ImageContent.tsx | 1 + .../components/url-preview/UrlPreviewCard.tsx | 126 ++++++++++-------- 3 files changed, 75 insertions(+), 55 deletions(-) diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx index cfc95b2cd..bcbf0201d 100644 --- a/src/app/components/RenderMessageContent.tsx +++ b/src/app/components/RenderMessageContent.tsx @@ -116,9 +116,10 @@ function RenderMessageContentInternal({ url, type: getMediaType(url), })); + if (filteredUrls.length > 0) console.log(filteredUrls); const mediaLinks = analyzed.filter((item) => item.type !== null); - const toRender = mediaLinks.length > 0 ? mediaLinks : [analyzed[0]]; + const toRender = mediaLinks.length > 0 ? mediaLinks : analyzed; return ( {toRender.map(({ url, type }) => { diff --git a/src/app/components/message/content/ImageContent.tsx b/src/app/components/message/content/ImageContent.tsx index ad51d2a4f..60cb9cb09 100644 --- a/src/app/components/message/content/ImageContent.tsx +++ b/src/app/components/message/content/ImageContent.tsx @@ -197,6 +197,7 @@ export const ImageContent = as<'div', ImageContentProps>( hasDimensions ? css.AbsoluteContainer : undefined, blurred && css.Blur )} + style={{ width: '100%' }} > {renderImage({ alt: body, diff --git a/src/app/components/url-preview/UrlPreviewCard.tsx b/src/app/components/url-preview/UrlPreviewCard.tsx index 63586b436..9e3dbdd1d 100644 --- a/src/app/components/url-preview/UrlPreviewCard.tsx +++ b/src/app/components/url-preview/UrlPreviewCard.tsx @@ -108,6 +108,15 @@ export const UrlPreviewCard = as< } }; + const ogW = ((prev['og:video'] && prev['og:video:width']) || + (prev['og:image'] && prev['og:image:width']) || + 1) as number; + const ogH = ((prev['og:video'] && prev['og:video:height']) || + (prev['og:image'] && prev['og:image:height']) || + 1) as number; + + const aspectRatio = ogW && ogH ? `${ogW} / ${ogH}` : undefined; + return ( { - const ogW = prev['og:image:width']; - const ogH = prev['og:image:height']; - const aspectRatio = ogW && ogH ? `${ogW} / ${ogH}` : undefined; - return ( - ( + + - } - renderImage={(p) => ( - - )} - /> - - ); - })()} + autoPlay + onAuxClick={handleAuxClick} + body={prev['og:title']} + url={prev['og:image']} + renderViewer={(p) => } + renderImage={(p) => ( + + )} + /> + + ))()} {!prev['og:video'] && !prev['og:image'] && prev['og:audio'] && ( {previewContent} @@ -345,24 +356,31 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => { )} - + {children} - {canScrollRight && ( - <> -
- - - - - )} + {canScrollRight && ( + <> +
+ + + + + )} From 9310e5c07c24c173f4d8640bd135af80a94d550b Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Sun, 12 Apr 2026 10:31:21 +0300 Subject: [PATCH 2/6] moved embed settings to their own section --- src/app/features/settings/general/General.tsx | 139 ++++++++++-------- 1 file changed, 74 insertions(+), 65 deletions(-) diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx index 291e76f2f..aaf91331b 100644 --- a/src/app/features/settings/general/General.tsx +++ b/src/app/features/settings/general/General.tsx @@ -883,18 +883,6 @@ function Messages() { 'hideNickAvatarEvents' ); const [mediaAutoLoad, setMediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad'); - const [bundledPreview, setBundledPreview] = useSetting(settingsAtom, 'bundledPreview'); - const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview'); - const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview'); - const [clientUrlPreview, setClientUrlPreview] = useSetting(settingsAtom, 'clientUrlPreview'); - const [encClientUrlPreview, setEncClientUrlPreview] = useSetting( - settingsAtom, - 'encClientUrlPreview' - ); - const [clientPreviewYoutube, setClientPreviewYoutube] = useSetting( - settingsAtom, - 'clientPreviewYoutube' - ); const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents'); const [showTombstoneEvents, setShowTombstoneEvents] = useSetting( settingsAtom, @@ -948,6 +936,22 @@ function Messages() { /> )} + + + + + setMediaAutoLoad(!v)} + /> + } + /> + setMediaAutoLoad(!v)} + value={hideMembershipInReadOnly} + onChange={setHideMembershipInReadOnly} + /> + } + /> + + + + + } /> + + ); +} + +function Embeds() { + const [bundledPreview, setBundledPreview] = useSetting(settingsAtom, 'bundledPreview'); + const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview'); + const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview'); + const [clientUrlPreview, setClientUrlPreview] = useSetting(settingsAtom, 'clientUrlPreview'); + const [encClientUrlPreview, setEncClientUrlPreview] = useSetting( + settingsAtom, + 'encClientUrlPreview' + ); + const [clientPreviewYoutube, setClientPreviewYoutube] = useSetting( + settingsAtom, + 'clientPreviewYoutube' + ); + return ( + + Embeds - - - - - - } - /> - - - - - - } - /> - ); } @@ -1412,6 +1420,7 @@ export function General({ requestBack, requestClose }: Readonly) { + From 32a165a43ef82c58f91b9289ae7e4ee6af9089f2 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Sun, 12 Apr 2026 10:47:09 +0300 Subject: [PATCH 3/6] added setting for only showing one preview per legacy view --- src/app/components/RenderMessageContent.tsx | 6 +++--- src/app/features/settings/general/General.tsx | 11 +++++++++++ src/app/state/settings.ts | 2 ++ 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx index bcbf0201d..b6c940223 100644 --- a/src/app/components/RenderMessageContent.tsx +++ b/src/app/components/RenderMessageContent.tsx @@ -84,6 +84,7 @@ function RenderMessageContentInternal({ const [autoplayGifs] = useSetting(settingsAtom, 'autoplayGifs'); const [captionPosition] = useSetting(settingsAtom, 'captionPosition'); + const [multiplePreviews] = useSetting(settingsAtom, 'multiplePreviews'); const settingsLinkBaseUrl = useSettingsLinkBaseUrl(); const captionPositionMap = { [CaptionPosition.Above]: 'column-reverse', @@ -118,8 +119,7 @@ function RenderMessageContentInternal({ })); if (filteredUrls.length > 0) console.log(filteredUrls); - const mediaLinks = analyzed.filter((item) => item.type !== null); - const toRender = mediaLinks.length > 0 ? mediaLinks : analyzed; + const toRender = multiplePreviews ? analyzed : [analyzed[0]]; return ( {toRender.map(({ url, type }) => { @@ -137,7 +137,7 @@ function RenderMessageContentInternal({ ); }, - [ts, clientUrlPreview, settingsLinkBaseUrl, urlPreview] + [multiplePreviews, settingsLinkBaseUrl, clientUrlPreview, urlPreview, ts] ); const renderBundledPreviews = useCallback( (bundles: IPreviewUrlResponse[]) => ( diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx index aaf91331b..7dbc245fa 100644 --- a/src/app/features/settings/general/General.tsx +++ b/src/app/features/settings/general/General.tsx @@ -1029,6 +1029,7 @@ function Messages() { } function Embeds() { + const [multiplePreviews, setMultiplePreviews] = useSetting(settingsAtom, 'multiplePreviews'); const [bundledPreview, setBundledPreview] = useSetting(settingsAtom, 'bundledPreview'); const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview'); const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview'); @@ -1044,6 +1045,16 @@ function Embeds() { return ( Embeds + + + } + /> + Date: Sun, 12 Apr 2026 10:50:50 +0300 Subject: [PATCH 4/6] added md --- .changeset/add_multiple_previews.md | 5 +++++ .gitignore | 3 +++ 2 files changed, 8 insertions(+) create mode 100644 .changeset/add_multiple_previews.md diff --git a/.changeset/add_multiple_previews.md b/.changeset/add_multiple_previews.md new file mode 100644 index 000000000..7e1d70782 --- /dev/null +++ b/.changeset/add_multiple_previews.md @@ -0,0 +1,5 @@ +--- +default: minor +--- + +Reorganize Embed settings and reintroduce multiple embeds diff --git a/.gitignore b/.gitignore index d6c83cfb1..7ec719709 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,6 @@ build.sh # the following line was added with the "git ignore" tool by itsrye.dev, version 0.1.0 .lh + +# the following line was added with nvim by Shea because its annoying to clear every so often +.vscode/bookmarks.json From aafa651966140d96fa2a8b675b77a78c9ade1904 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Sun, 12 Apr 2026 11:02:48 +0300 Subject: [PATCH 5/6] forgot the console log --- src/app/components/RenderMessageContent.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx index b6c940223..f7908c7bf 100644 --- a/src/app/components/RenderMessageContent.tsx +++ b/src/app/components/RenderMessageContent.tsx @@ -117,7 +117,6 @@ function RenderMessageContentInternal({ url, type: getMediaType(url), })); - if (filteredUrls.length > 0) console.log(filteredUrls); const toRender = multiplePreviews ? analyzed : [analyzed[0]]; return ( From 2361dd5504e47fb91ad65c77aaaec99ddccc013f Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Mon, 20 Apr 2026 20:54:45 +0300 Subject: [PATCH 6/6] fix weird merge issue --- src/app/features/settings/general/General.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx index 4ce593aa4..a0844ce2b 100644 --- a/src/app/features/settings/general/General.tsx +++ b/src/app/features/settings/general/General.tsx @@ -935,9 +935,6 @@ function Messages() { /> )} - - -