web/timeline: disable url preview images if image previews are disabled

This commit is contained in:
Tulir Asokan 2025-03-09 17:21:21 +02:00
parent ef05bc71f9
commit 218481f3a4
2 changed files with 4 additions and 2 deletions

View file

@ -55,7 +55,7 @@ export const preferences = {
}), }),
show_media_previews: new Preference<boolean>({ show_media_previews: new Preference<boolean>({
displayName: "Show image and video previews", displayName: "Show image and video previews",
description: "If disabled, images and videos will only be visible after clicking and will not be downloaded automatically.", description: "If disabled, images and videos will only be visible after clicking and will not be downloaded automatically. This will also disable images in URL previews.",
allowedContexts: anyContext, allowedContexts: anyContext,
defaultValue: true, defaultValue: true,
}), }),

View file

@ -28,6 +28,8 @@ const URLPreviews = ({ event, room }: {
}) => { }) => {
const client = use(ClientContext)! const client = use(ClientContext)!
const renderPreviews = usePreference(client.store, room, "render_url_previews") const renderPreviews = usePreference(client.store, room, "render_url_previews")
// TODO support blurhashes and clicking to view image previews here?
const showPreviewImages = usePreference(client.store, room, "show_media_previews")
if (event.redacted_by || !renderPreviews) { if (event.redacted_by || !renderPreviews) {
return null return null
} }
@ -72,7 +74,7 @@ const URLPreviews = ({ event, room }: {
<a href={url} title={title} target="_blank" rel="noreferrer noopener">{title}</a> <a href={url} title={title} target="_blank" rel="noreferrer noopener">{title}</a>
</div> </div>
<div className="description" title={p["og:description"]}>{p["og:description"]}</div> <div className="description" title={p["og:description"]}>{p["og:description"]}</div>
{mediaURL && (inline {mediaURL && showPreviewImages && (inline
? <div className="inline-media-wrapper">{mediaContainer}</div> ? <div className="inline-media-wrapper">{mediaContainer}</div>
: mediaContainer)} : mediaContainer)}
</div> </div>