Global configuration flag for media previews

playwright/e2e/timeline/media-preview-settings.spec.ts

@@ -0,0 +1,122 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import * as fs from "node:fs";
+import { type EventType, type MsgType, type RoomJoinRulesEventContent } from "matrix-js-sdk/src/types";
+
+import { test, expect } from "../../element-web-test";
+
+const MEDIA_FILE = fs.readFileSync("playwright/sample-files/riot.png");
+
+test.describe("Media preview settings", () => {
+    test.use({
+        displayName: "Alan",
+        room: async ({ app, page, homeserver, bot, user }, use) => {
+            const mxc = (await bot.uploadContent(MEDIA_FILE, { name: "image.png", type: "image/png" })).content_uri;
+            const roomId = await bot.createRoom({
+                name: "Test room",
+                invite: [user.userId],
+                initial_state: [{ type: "m.room.avatar", content: { url: mxc }, state_key: "" }],
+            });
+            await bot.sendEvent(roomId, null, "m.room.message" as EventType, {
+                msgtype: "m.image" as MsgType,
+                body: "image.png",
+                url: mxc,
+            });
+
+            await use({ roomId });
+        },
+    });
+
+    test("should be able to hide avatars of inviters", { tag: "@screenshot" }, async ({ page, app, room, user }) => {
+        let settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Hide avatars of room and inviter").click();
+        await app.closeDialog();
+        await app.viewRoomById(room.roomId);
+        await expect(
+            page.getByRole("complementary").filter({ hasText: "Do you want to join Test room" }),
+        ).toMatchScreenshot("invite-no-avatar.png");
+        await expect(
+            page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Test room" }),
+        ).toMatchScreenshot("invite-room-tree-no-avatar.png");
+
+        // And then go back to being visible
+        settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Hide avatars of room and inviter").click();
+        await app.closeDialog();
+        await page.goto("#/home");
+        await app.viewRoomById(room.roomId);
+        await expect(
+            page.getByRole("complementary").filter({ hasText: "Do you want to join Test room" }),
+        ).toMatchScreenshot("invite-with-avatar.png");
+        await expect(
+            page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Test room" }),
+        ).toMatchScreenshot("invite-room-tree-with-avatar.png");
+    });
+
+    test("should be able to hide media in rooms globally", async ({ page, app, room, user }) => {
+        const settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Show media in timeline").getByRole("radio", { name: "Always hide" }).click();
+        await app.closeDialog();
+        await app.viewRoomById(room.roomId);
+        await page.getByRole("button", { name: "Accept" }).click();
+        await expect(page.getByText("Show image")).toBeVisible();
+    });
+    test("should be able to hide media in non-private rooms globally", async ({ page, app, room, user, bot }) => {
+        await bot.sendStateEvent(room.roomId, "m.room.join_rules", {
+            join_rule: "public",
+        });
+        const settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Show media in timeline").getByLabel("In private rooms").click();
+        await app.closeDialog();
+        await app.viewRoomById(room.roomId);
+        await page.getByRole("button", { name: "Accept" }).click();
+        await expect(page.getByText("Show image")).toBeVisible();
+        for (const joinRule of ["invite", "knock", "restricted"] as RoomJoinRulesEventContent["join_rule"][]) {
+            await bot.sendStateEvent(room.roomId, "m.room.join_rules", {
+                join_rule: joinRule,
+            } satisfies RoomJoinRulesEventContent);
+            await expect(page.getByText("Show image")).not.toBeVisible();
+        }
+    });
+    test("should be able to show media in rooms globally", async ({ page, app, room, user }) => {
+        const settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Show media in timeline").getByRole("radio", { name: "Always show" }).click();
+        await app.closeDialog();
+        await app.viewRoomById(room.roomId);
+        await page.getByRole("button", { name: "Accept" }).click();
+        await expect(page.getByText("Show image")).not.toBeVisible();
+    });
+    test("should be able to hide media in an individual room", async ({ page, app, room, user }) => {
+        const settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Show media in timeline").getByRole("radio", { name: "Always show" }).click();
+        await app.closeDialog();
+
+        await app.viewRoomById(room.roomId);
+        await page.getByRole("button", { name: "Accept" }).click();
+
+        const roomSettings = await app.settings.openRoomSettings("General");
+        await roomSettings.getByLabel("Show media in timeline").getByRole("radio", { name: "Always hide" }).click();
+        await app.closeDialog();
+
+        await expect(page.getByText("Show image")).toBeVisible();
+    });
+    test("should be able to show media in an individual room", async ({ page, app, room, user }) => {
+        const settings = await app.settings.openUserSettings("Preferences");
+        await settings.getByLabel("Show media in timeline").getByRole("radio", { name: "Always hide" }).click();
+        await app.closeDialog();
+
+        await app.viewRoomById(room.roomId);
+        await page.getByRole("button", { name: "Accept" }).click();
+
+        const roomSettings = await app.settings.openRoomSettings("General");
+        await roomSettings.getByLabel("Show media in timeline").getByRole("radio", { name: "Always show" }).click();
+        await app.closeDialog();
+
+        await expect(page.getByText("Show image")).not.toBeVisible();
+    });
+});

res/css/_components.pcss

@@ -378,6 +378,7 @@
 @import "./views/settings/tabs/user/_AppearanceUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
+@import "./views/settings/tabs/user/_MediaPreviewAccountSettings.pcss";
 @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";

res/css/views/settings/tabs/user/_MediaPreviewAccountSettings.pcss

@@ -0,0 +1,28 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MediaPreviewAccountSetting_Radio {
+    margin: var(--cpd-space-1x) 0;
+}
+
+.mx_MediaPreviewAccountSetting {
+    margin-top: var(--cpd-space-1x);
+}
+
+.mx_MediaPreviewAccountSetting_RadioHelp {
+    margin-top: 0;
+    margin-bottom: var(--cpd-space-1x);
+}
+
+.mx_MediaPreviewAccountSetting_Form {
+    width: 100%;
+}
+
+.mx_MediaPreviewAccountSetting_ToggleSwitch {
+    font: var(--cpd-font-body-md-medium);
+    letter-spacing: var(--cpd-font-letter-spacing-body-md);
+}

src/@types/matrix-js-sdk.d.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -14,6 +14,7 @@ import type { EncryptedFile } from "matrix-js-sdk/src/types";
 import type { EmptyObject } from "matrix-js-sdk/src/matrix";
 import type { DeviceClientInformation } from "../utils/device/types.ts";
 import type { UserWidget } from "../utils/WidgetUtils-types.ts";
+import { type MediaPreviewConfig } from "./media_preview.ts";
 
 // Extend Matrix JS SDK types via Typescript declaration merging to support unspecced event fields and types
 declare module "matrix-js-sdk/src/types" {
@@ -87,6 +88,8 @@ declare module "matrix-js-sdk/src/types" {
         "m.accepted_terms": {
             accepted: string[];
         };
+
+        "io.element.msc4278.media_preview_config": MediaPreviewConfig;
     }
 
     export interface AudioContent {

src/@types/media_preview.ts

@@ -0,0 +1,33 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+export enum MediaPreviewValue {
+    /**
+     * Media previews should be enabled.
+     */
+    On = "on",
+    /**
+     * Media previews should only be enabled for rooms with non-public join rules.
+     */
+    Private = "private",
+    /**
+     * Media previews should be disabled.
+     */
+    Off = "off",
+}
+
+export const MEDIA_PREVIEW_ACCOUNT_DATA_TYPE = "io.element.msc4278.media_preview_config";
+export interface MediaPreviewConfig extends Record<string, unknown> {
+    /**
+     * Media preview setting for thumbnails of media in rooms.
+     */
+    media_previews: MediaPreviewValue;
+    /**
+     * Media preview settings for avatars of rooms we have been invited to.
+     */
+    invite_avatars: MediaPreviewValue.On | MediaPreviewValue.Off;
+}

src/HtmlUtils.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2019 Michael Telatynski <[email protected]>
 Copyright 2019 The Matrix.org Foundation C.I.C.
 Copyright 2017, 2018 New Vector Ltd
@@ -294,6 +294,10 @@ export interface EventRenderOpts {
     disableBigEmoji?: boolean;
     stripReplyFallback?: boolean;
     forComposerQuote?: boolean;
+    /**
+     * Should inline media be rendered?
+     */
+    mediaIsVisible?: boolean;
 }
 
 function analyseEvent(content: IContent, highlights: Optional<string[]>, opts: EventRenderOpts = {}): EventAnalysis {
@@ -302,6 +306,20 @@ function analyseEvent(content: IContent, highlights: Optional<string[]>, opts: E
         sanitizeParams = composerSanitizeHtmlParams;
     }
 
+    if (opts.mediaIsVisible === false && sanitizeParams.transformTags?.["img"]) {
+        // Prevent mutating the source of sanitizeParams.
+        sanitizeParams = {
+            ...sanitizeParams,
+            transformTags: {
+                ...sanitizeParams.transformTags,
+                img: (tagName) => {
+                    // Remove element
+                    return { tagName, attribs: {} };
+                },
+            },
+        };
+    }
+
     try {
         const isFormattedBody =
             content.format === "org.matrix.custom.html" && typeof content.formatted_body === "string";

src/Linkify.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -12,7 +12,6 @@ import { merge } from "lodash";
 import _Linkify from "linkify-react";
 
 import { _linkifyString, ELEMENT_URL_PATTERN, options as linkifyMatrixOptions } from "./linkify-matrix";
-import SettingsStore from "./settings/SettingsStore";
 import { tryTransformPermalinkToLocalHref } from "./utils/permalinks/Permalinks";
 import { mediaFromMxc } from "./customisations/Media";
 import { PERMITTED_URL_SCHEMES } from "./utils/UrlUtils";
@@ -47,10 +46,7 @@ export const transformTags: NonNullable<IOptions["transformTags"]> = {
         // Strip out imgs that aren't `mxc` here instead of using allowedSchemesByTag
         // because transformTags is used _before_ we filter by allowedSchemesByTag and
         // we don't want to allow images with `https?` `src`s.
-        // We also drop inline images (as if they were not present at all) when the "show
-        // images" preference is disabled. Future work might expose some UI to reveal them
-        // like standalone image events have.
-        if (!src || !SettingsStore.getValue("showImages")) {
+        if (!src) {
             return { tagName, attribs: {} };
         }
 
@@ -78,7 +74,6 @@ export const transformTags: NonNullable<IOptions["transformTags"]> = {
         if (requestedHeight) {
             attribs.style += "height: 100%;";
         }
-
         attribs.src = mediaFromMxc(src).getThumbnailOfSourceHttp(width, height)!;
         return { tagName, attribs };
     },

src/components/views/avatars/RoomAvatar.tsx

@@ -20,6 +20,7 @@ import { filterBoolean } from "../../../utils/arrays";
 import { useSettingValue } from "../../../hooks/useSettings";
 import { useRoomState } from "../../../hooks/useRoomState";
 import { useRoomIdName } from "../../../hooks/room/useRoomIdName";
+import { MediaPreviewValue } from "../../../@types/media_preview";
 
 interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick" | "size"> {
     // Room may be left unset here, but if it is,
@@ -40,7 +41,8 @@ const RoomAvatar: React.FC<IProps> = ({ room, viewAvatarOnClick, onClick, oobDat
     const avatarEvent = useRoomState(room, (state) => state.getStateEvents(EventType.RoomAvatar, ""));
     const roomIdName = useRoomIdName(room, oobData);
 
-    const showAvatarsOnInvites = useSettingValue("showAvatarsOnInvites", room?.roomId);
+    const showAvatarsOnInvites =
+        useSettingValue("mediaPreviewConfig", room?.roomId).invite_avatars === MediaPreviewValue.On;
 
     const onRoomAvatarClick = useCallback(() => {
         const avatarUrl = Avatar.avatarUrlForRoom(room ?? null);
@@ -63,7 +65,6 @@ const RoomAvatar: React.FC<IProps> = ({ room, viewAvatarOnClick, onClick, oobDat
         // parseInt ignores suffixes.
         const sizeInt = parseInt(size, 10);
         let oobAvatar: string | null = null;
-
         if (oobData?.avatarUrl) {
             oobAvatar = mediaFromMxc(oobData?.avatarUrl).getThumbnailOfSourceHttp(sizeInt, sizeInt, "crop");
         }

src/components/views/messages/EventContentBody.tsx

@@ -28,6 +28,7 @@ import {
 import MatrixClientContext from "../../../contexts/MatrixClientContext.tsx";
 import { useSettingValue } from "../../../hooks/useSettings.ts";
 import { filterBoolean } from "../../../utils/arrays.ts";
+import { useMediaVisible } from "../../../hooks/useMediaVisible.ts";
 
 /**
  * Returns a RegExp pattern for the keyword in the push rule of the given Matrix event, if any
@@ -150,6 +151,7 @@ const EventContentBody = memo(
     forwardRef<HTMLElement, Props>(
         ({ as, mxEvent, stripReply, content, linkify, highlights, includeDir = true, ...options }, ref) => {
             const enableBigEmoji = useSettingValue("TextualBody.enableBigEmoji");
+            const [mediaIsVisible] = useMediaVisible(mxEvent?.getId(), mxEvent?.getRoomId());
 
             const replacer = useReplacer(content, mxEvent, options);
             const linkifyOptions = useMemo(
@@ -167,8 +169,9 @@ const EventContentBody = memo(
                         disableBigEmoji: isEmote || !enableBigEmoji,
                         // Part of Replies fallback support
                         stripReplyFallback: stripReply,
+                        mediaIsVisible,
                     }),
-                [content, enableBigEmoji, highlights, isEmote, stripReply],
+                [content, mediaIsVisible, enableBigEmoji, highlights, isEmote, stripReply],
             );
 
             if (as === "div") includeDir = true; // force dir="auto" on divs

src/components/views/messages/HideActionButton.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -25,7 +25,7 @@ interface IProps {
  * Quick action button for marking a media event as hidden.
  */
 export const HideActionButton: React.FC<IProps> = ({ mxEvent }) => {
-    const [mediaIsVisible, setVisible] = useMediaVisible(mxEvent.getId()!);
+    const [mediaIsVisible, setVisible] = useMediaVisible(mxEvent.getId(), mxEvent.getRoomId());
 
     if (!mediaIsVisible) {
         return;

src/components/views/messages/MImageBody.tsx

@@ -686,7 +686,7 @@ export class MImageBodyInner extends React.Component<IProps, IState> {
 
 // Wrap MImageBody component so we can use a hook here.
 const MImageBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!);
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
     return <MImageBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MImageReplyBody.tsx

@@ -38,7 +38,7 @@ class MImageReplyBodyInner extends MImageBodyInner {
     }
 }
 const MImageReplyBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!);
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
     return <MImageReplyBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MStickerBody.tsx

@@ -79,7 +79,7 @@ class MStickerBodyInner extends MImageBodyInner {
 }
 
 const MStickerBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!);
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
     return <MStickerBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MVideoBody.tsx

@@ -342,7 +342,7 @@ class MVideoBodyInner extends React.PureComponent<IProps, IState> {
 
 // Wrap MVideoBody component so we can use a hook here.
 const MVideoBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!);
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
     return <MVideoBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };