Global configuration flag for media previews (#29582)

* Modify useMediaVisible to take a room. * Add initial support for a account data level key. * Update controls. * Update settings * Lint and fixes * make some tests go happy * lint * i18n * update preferences * prettier * Update settings tab. * update screenshot * Update docs * Rewrite controller * Rewrite tons of tests * Rewrite RoomAvatar to be a functional component This is so we can use hooks to determine the setting state. * lint * lint * Tidy up comments * Apply media visible hook to inline images. * Move conditionals. * copyright all the things * Review changes * Update html utils to properly discard media. * Types fix * Fixing tests that break settings getValue expectations * Fix logic around media preview calculation * Fix room header tests * Fixup tests for timelinePanel * Clear settings in matrixchat * Update tests to use SettingsStore where possible. * fix bug * revert changes to client.ts * copyright years * Add header * Add a test for MediaPreviewAccountSettingsTab * Mark initMatrixClient as optional * Improve on types * Ensure we do not set the account data twice. * lint * Review changes * Ensure we include the client on rendered messages. * Fix test * update labels * clean designs * update settings tab * update snapshot * copyright * prevent mutation
2025-08-08 03:42:14 +03:00 · 2025-04-22 10:37:47 +01:00
parent da6ac36f11
commit 75d9898dff
44 changed files with 1427 additions and 422 deletions
--- a/playwright/e2e/timeline/media-preview-settings.spec.ts
+++ b/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();
+    });
+});
--- a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
+++ b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
--- a/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-no-avatar-linux.png
+++ b/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-no-avatar-linux.png
--- a/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-no-avatar-linux.png
+++ b/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-no-avatar-linux.png
--- a/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-with-avatar-linux.png
+++ b/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-with-avatar-linux.png
--- a/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-with-avatar-linux.png
+++ b/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-with-avatar-linux.png
--- a/res/css/_components.pcss
+++ b/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";
--- a/res/css/views/settings/tabs/user/_MediaPreviewAccountSettings.pcss
+++ b/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);
+}
--- a/src/@types/matrix-js-sdk.d.ts
+++ b/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 {
--- a/src/@types/media_preview.ts
+++ b/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;
+}
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 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";
--- a/src/Linkify.tsx
+++ b/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 };
    },
--- a/src/components/views/avatars/RoomAvatar.tsx
+++ b/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");
        }
--- a/src/components/views/messages/EventContentBody.tsx
+++ b/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
--- a/src/components/views/messages/HideActionButton.tsx
+++ b/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;
--- a/src/components/views/messages/MImageBody.tsx
+++ b/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} />;
 };

--- a/src/components/views/messages/MImageReplyBody.tsx
+++ b/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} />;
 };

--- a/src/components/views/messages/MStickerBody.tsx
+++ b/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} />;
 };

--- a/src/components/views/messages/MVideoBody.tsx
+++ b/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} />;
 };

--- a/src/components/views/rooms/LinkPreviewGroup.tsx
+++ b/src/components/views/rooms/LinkPreviewGroup.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
@@ -17,6 +17,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { _t } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
+import { useMediaVisible } from "../../../hooks/useMediaVisible";

 const INITIAL_NUM_PREVIEWS = 2;

@@ -29,6 +30,7 @@ interface IProps {
 const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick }) => {
    const cli = useContext(MatrixClientContext);
    const [expanded, toggleExpanded] = useStateToggle();
+    const [mediaVisible] = useMediaVisible(mxEvent.getId(), mxEvent.getRoomId());

    const ts = mxEvent.getTs();
    const previews = useAsyncMemo<[string, IPreviewUrlResponse][]>(
@@ -55,7 +57,13 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick }) =
    return (
        <div className="mx_LinkPreviewGroup">
            {showPreviews.map(([link, preview], i) => (
-                <LinkPreviewWidget key={link} link={link} preview={preview} mxEvent={mxEvent}>
+                <LinkPreviewWidget
+                    mediaVisible={mediaVisible}
+                    key={link}
+                    link={link}
+                    preview={preview}
+                    mxEvent={mxEvent}
+                >
                    {i === 0 ? (
                        <AccessibleButton
                            className="mx_LinkPreviewGroup_hide"
--- a/src/components/views/rooms/LinkPreviewWidget.tsx
+++ b/src/components/views/rooms/LinkPreviewWidget.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2016-2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -11,7 +11,6 @@ import { decode } from "html-entities";
 import { type MatrixEvent, type IPreviewUrlResponse } from "matrix-js-sdk/src/matrix";

 import { Linkify } from "../../../HtmlUtils";
-import SettingsStore from "../../../settings/SettingsStore";
 import Modal from "../../../Modal";
 import * as ImageUtils from "../../../ImageUtils";
 import { mediaFromMxc } from "../../../customisations/Media";
@@ -24,6 +23,7 @@ interface IProps {
    preview: IPreviewUrlResponse;
    mxEvent: MatrixEvent; // the Event associated with the preview
    children?: ReactNode;
+    mediaVisible: boolean;
 }

 export default class LinkPreviewWidget extends React.Component<IProps> {
@@ -69,7 +69,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {

        // FIXME: do we want to factor out all image displaying between this and MImageBody - especially for lightboxing?
        let image: string | null = p["og:image"] ?? null;
-        if (!SettingsStore.getValue("showImages")) {
+        if (!this.props.mediaVisible) {
            image = null; // Don't render a button to show the image, just hide it outright
        }
        const imageMaxWidth = 100;
--- a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2024 New Vector Ltd.
+Copyright 2019-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.
@@ -22,6 +22,7 @@ import { SettingsSubsection } from "../../shared/SettingsSubsection";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
 import { UrlPreviewSettings } from "../../../room_settings/UrlPreviewSettings";
+import { MediaPreviewAccountSettings } from "../user/MediaPreviewAccountSettings";

 interface IProps {
    room: Room;
@@ -92,6 +93,9 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta

                <SettingsSection heading={_t("room_settings|general|other_section")}>
                    {urlPreviewSettings}
+                    <SettingsSubsection heading={_t("common|moderation_and_safety")} legacy={false}>
+                        <MediaPreviewAccountSettings roomId={room.roomId} />
+                    </SettingsSubsection>
                    {leaveSection}
                </SettingsSection>
            </SettingsTab>
--- a/src/components/views/settings/tabs/user/MediaPreviewAccountSettings.tsx
+++ b/src/components/views/settings/tabs/user/MediaPreviewAccountSettings.tsx
@@ -0,0 +1,150 @@
+/*
+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 React, { type ChangeEventHandler, useCallback } from "react";
+import { Field, HelpMessage, InlineField, Label, RadioInput, Root } from "@vector-im/compound-web";
+
+import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
+import { type MediaPreviewConfig, MediaPreviewValue } from "../../../../../@types/media_preview";
+import { _t } from "../../../../../languageHandler";
+import { useSettingValue } from "../../../../../hooks/useSettings";
+import SettingsStore from "../../../../../settings/SettingsStore";
+import { SettingLevel } from "../../../../../settings/SettingLevel";
+
+export const MediaPreviewAccountSettings: React.FC<{ roomId?: string }> = ({ roomId }) => {
+    const currentMediaPreview = useSettingValue("mediaPreviewConfig", roomId);
+
+    const changeSetting = useCallback(
+        (newValue: MediaPreviewConfig) => {
+            SettingsStore.setValue(
+                "mediaPreviewConfig",
+                roomId ?? null,
+                roomId ? SettingLevel.ROOM_ACCOUNT : SettingLevel.ACCOUNT,
+                newValue,
+            );
+        },
+        [roomId],
+    );
+
+    const avatarOnChange = useCallback(
+        (c: boolean) => {
+            changeSetting({
+                ...currentMediaPreview,
+                // Switch is inverted. "Hide avatars..."
+                invite_avatars: c ? MediaPreviewValue.Off : MediaPreviewValue.On,
+            });
+        },
+        [changeSetting, currentMediaPreview],
+    );
+
+    const mediaPreviewOnChangeOff = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (event) => {
+            if (!event.target.checked) {
+                return;
+            }
+            changeSetting({
+                ...currentMediaPreview,
+                media_previews: MediaPreviewValue.Off,
+            });
+        },
+        [changeSetting, currentMediaPreview],
+    );
+
+    const mediaPreviewOnChangePrivate = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (event) => {
+            if (!event.target.checked) {
+                return;
+            }
+            changeSetting({
+                ...currentMediaPreview,
+                media_previews: MediaPreviewValue.Private,
+            });
+        },
+        [changeSetting, currentMediaPreview],
+    );
+
+    const mediaPreviewOnChangeOn = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (event) => {
+            if (!event.target.checked) {
+                return;
+            }
+            changeSetting({
+                ...currentMediaPreview,
+                media_previews: MediaPreviewValue.On,
+            });
+        },
+        [changeSetting, currentMediaPreview],
+    );
+
+    return (
+        <Root className="mx_MediaPreviewAccountSetting_Form">
+            {!roomId && (
+                <LabelledToggleSwitch
+                    className="mx_MediaPreviewAccountSetting_ToggleSwitch"
+                    label={_t("settings|media_preview|hide_avatars")}
+                    value={currentMediaPreview.invite_avatars === MediaPreviewValue.Off}
+                    onChange={avatarOnChange}
+                />
+            )}
+            {/* Explict label here because htmlFor is not supported for linking to radiogroups */}
+            <Field
+                id="mx_media_previews"
+                role="radiogroup"
+                name="media_previews"
+                aria-label={_t("settings|media_preview|media_preview_label")}
+            >
+                <Label>{_t("settings|media_preview|media_preview_label")}</Label>
+                <HelpMessage className="mx_MediaPreviewAccountSetting_RadioHelp">
+                    {_t("settings|media_preview|media_preview_description")}
+                </HelpMessage>
+                <InlineField
+                    name="media_preview_off"
+                    className="mx_MediaPreviewAccountSetting_Radio"
+                    control={
+                        <RadioInput
+                            id="mx_media_previews_off"
+                            checked={currentMediaPreview.media_previews === MediaPreviewValue.Off}
+                            onChange={mediaPreviewOnChangeOff}
+                        />
+                    }
+                >
+                    <Label htmlFor="mx_media_previews_off">{_t("settings|media_preview|hide_media")}</Label>
+                </InlineField>
+                {!roomId && (
+                    <InlineField
+                        name="mx_media_previews_private"
+                        className="mx_MediaPreviewAccountSetting_Radio"
+                        control={
+                            <RadioInput
+                                id="mx_media_previews_private"
+                                checked={currentMediaPreview.media_previews === MediaPreviewValue.Private}
+                                onChange={mediaPreviewOnChangePrivate}
+                            />
+                        }
+                    >
+                        <Label htmlFor="mx_media_previews_private">
+                            {_t("settings|media_preview|show_in_private")}
+                        </Label>
+                    </InlineField>
+                )}
+                <InlineField
+                    name="media_preview_on"
+                    className="mx_MediaPreviewAccountSetting_Radio"
+                    control={
+                        <RadioInput
+                            id="mx_media_previews_on"
+                            checked={currentMediaPreview.media_previews === MediaPreviewValue.On}
+                            onChange={mediaPreviewOnChangeOn}
+                        />
+                    }
+                >
+                    <Label htmlFor="mx_media_previews_on">{_t("settings|media_preview|show_media")}</Label>
+                </InlineField>
+            </Field>
+        </Root>
+    );
+};
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -32,6 +32,7 @@ import SpellCheckSettings from "../../SpellCheckSettings";
 import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import * as TimezoneHandler from "../../../../../TimezoneHandler";
 import { type BooleanSettingKey } from "../../../../../settings/Settings.tsx";
+import { MediaPreviewAccountSettings } from "./MediaPreviewAccountSettings.tsx";

 interface IProps {
    closeSettingsFn(success: boolean): void;
@@ -116,7 +117,7 @@ const SpellCheckSection: React.FC = () => {
 };

 export default class PreferencesUserSettingsTab extends React.Component<IProps, IState> {
-    private static ROOM_LIST_SETTINGS: BooleanSettingKey[] = ["breadcrumbs", "showAvatarsOnInvites"];
+    private static ROOM_LIST_SETTINGS: BooleanSettingKey[] = ["breadcrumbs"];

    private static SPACES_SETTINGS: BooleanSettingKey[] = ["Spaces.allRoomsInHome"];

@@ -146,7 +147,6 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
        "urlPreviewsEnabled",
        "autoplayGifs",
        "autoplayVideo",
-        "showImages",
    ];

    private static TIMELINE_SETTINGS: BooleanSettingKey[] = [
@@ -335,6 +335,10 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                        {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
                    </SettingsSubsection>

+                    <SettingsSubsection heading={_t("common|moderation_and_safety")} legacy={false}>
+                        <MediaPreviewAccountSettings />
+                    </SettingsSubsection>
+
                    <SettingsSubsection heading={_t("settings|preferences|room_directory_heading")}>
                        {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
                    </SettingsSubsection>
--- a/src/hooks/useMediaVisible.ts
+++ b/src/hooks/useMediaVisible.ts
@@ -6,30 +6,52 @@ Please see LICENSE files in the repository root for full details.
 */

 import { useCallback } from "react";
+import { JoinRule } from "matrix-js-sdk/src/matrix";

 import { SettingLevel } from "../settings/SettingLevel";
 import { useSettingValue } from "./useSettings";
 import SettingsStore from "../settings/SettingsStore";
+import { useMatrixClientContext } from "../contexts/MatrixClientContext";
+import { MediaPreviewValue } from "../@types/media_preview";
+import { useRoomState } from "./useRoomState";
+
+const PRIVATE_JOIN_RULES: JoinRule[] = [JoinRule.Invite, JoinRule.Knock, JoinRule.Restricted];

 /**
 * Should the media event be visible in the client, or hidden.
 * @param eventId The eventId of the media event.
 * @returns A boolean describing the hidden status, and a function to set the visiblity.
 */
-export function useMediaVisible(eventId: string): [boolean, (visible: boolean) => void] {
-    const defaultShowImages = useSettingValue("showImages", SettingLevel.DEVICE);
-    const eventVisibility = useSettingValue("showMediaEventIds", SettingLevel.DEVICE);
+export function useMediaVisible(eventId?: string, roomId?: string): [boolean, (visible: boolean) => void] {
+    const mediaPreviewSetting = useSettingValue("mediaPreviewConfig", roomId);
+    const client = useMatrixClientContext();
+    const eventVisibility = useSettingValue("showMediaEventIds");
+    const joinRule = useRoomState(client.getRoom(roomId) ?? undefined, (state) => state.getJoinRule());
    const setMediaVisible = useCallback(
        (visible: boolean) => {
            SettingsStore.setValue("showMediaEventIds", null, SettingLevel.DEVICE, {
                ...eventVisibility,
-                [eventId]: visible,
+                [eventId!]: visible,
            });
        },
        [eventId, eventVisibility],
    );

+    const roomIsPrivate = joinRule ? PRIVATE_JOIN_RULES.includes(joinRule) : false;
+
+    const explicitEventVisiblity = eventId ? eventVisibility[eventId] : undefined;
    // Always prefer the explicit per-event user preference here.
-    const imgIsVisible = eventVisibility[eventId] ?? defaultShowImages;
-    return [imgIsVisible, setMediaVisible];
+    if (explicitEventVisiblity !== undefined) {
+        return [explicitEventVisiblity, setMediaVisible];
+    } else if (mediaPreviewSetting.media_previews === MediaPreviewValue.Off) {
+        return [false, setMediaVisible];
+    } else if (mediaPreviewSetting.media_previews === MediaPreviewValue.On) {
+        return [true, setMediaVisible];
+    } else if (mediaPreviewSetting.media_previews === MediaPreviewValue.Private) {
+        return [roomIsPrivate, setMediaVisible];
+    } else {
+        // Invalid setting.
+        console.warn("Invalid media visibility setting", mediaPreviewSetting.media_previews);
+        return [false, setMediaVisible];
+    }
 }
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -525,6 +525,7 @@
        "message_timestamp_invalid": "Invalid timestamp",
        "microphone": "Microphone",
        "model": "Model",
+        "moderation_and_safety": "Moderation and safety",
        "modern": "Modern",
        "mute": "Mute",
        "n_members": {
@@ -2668,12 +2669,10 @@
            "unable_to_load_msisdns": "Unable to load phone numbers",
            "username": "Username"
        },
-        "image_thumbnails": "Show previews/thumbnails for images",
        "inline_url_previews_default": "Enable inline URL previews by default",
        "inline_url_previews_room": "Enable URL previews by default for participants in this room",
        "inline_url_previews_room_account": "Enable URL previews for this room (only affects you)",
        "insert_trailing_colon_mentions": "Insert a trailing colon after user mentions at the start of a message",
-        "invite_avatars": "Show avatars of rooms you have been invited to",
        "jump_to_bottom_on_send": "Jump to the bottom of the timeline when you send a message",
        "key_backup": {
            "backup_in_progress": "Your keys are being backed up (the first backup could take a few minutes).",
@@ -2732,6 +2731,14 @@
        "labs_mjolnir": {
            "dialog_title": "<strong>Settings:</strong> Ignored Users"
        },
+        "media_preview": {
+            "hide_avatars": "Hide avatars of room and inviter",
+            "hide_media": "Always hide",
+            "media_preview_description": "A hidden media can always be shown by tapping on it",
+            "media_preview_label": "Show media in timeline",
+            "show_in_private": "In private rooms",
+            "show_media": "Always show"
+        },
        "notifications": {
            "default_setting_description": "This setting will be applied by default to all your rooms.",
            "default_setting_section": "I want to be notified for (Default Setting)",
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ReactNode } from "react";
 import { UNSTABLE_MSC4133_EXTENDED_PROFILES } from "matrix-js-sdk/src/matrix";

+import { type MediaPreviewConfig } from "../@types/media_preview.ts";
 import { _t, _td, type TranslationKey } from "../languageHandler";
 import DeviceIsolationModeController from "./controllers/DeviceIsolationModeController.ts";
 import {
@@ -45,6 +46,7 @@ import { type Json, type JsonValue } from "../@types/json.ts";
 import { type RecentEmojiData } from "../emojipicker/recent.ts";
 import { type Assignable } from "../@types/common.ts";
 import { SortingAlgorithm } from "../stores/room-list-v3/skip-list/sorters/index.ts";
+import MediaPreviewConfigController from "./controllers/MediaPreviewConfigController.ts";

 export const defaultWatchManager = new WatchManager();

@@ -312,8 +314,6 @@ export interface Settings {
    "showHiddenEventsInTimeline": IBaseSetting<boolean>;
    "lowBandwidth": IBaseSetting<boolean>;
    "fallbackICEServerAllowed": IBaseSetting<boolean | null>;
-    "showImages": IBaseSetting<boolean>;
-    "showAvatarsOnInvites": IBaseSetting<boolean>;
    "RoomList.preferredSorting": IBaseSetting<SortingAlgorithm>;
    "RoomList.showMessagePreview": IBaseSetting<boolean>;
    "RightPanel.phasesGlobal": IBaseSetting<IRightPanelForRoomStored | null>;
@@ -349,6 +349,7 @@ export interface Settings {
    "Electron.alwaysShowMenuBar": IBaseSetting<boolean>;
    "Electron.showTrayIcon": IBaseSetting<boolean>;
    "Electron.enableHardwareAcceleration": IBaseSetting<boolean>;
+    "mediaPreviewConfig": IBaseSetting<MediaPreviewConfig>;
    "Developer.elementCallUrl": IBaseSetting<string>;
 }

@@ -427,6 +428,11 @@ export const SETTINGS: Settings = {
        supportedLevelsAreOrdered: true,
        default: false,
    },
+    "mediaPreviewConfig": {
+        controller: new MediaPreviewConfigController(),
+        supportedLevels: LEVELS_ROOM_SETTINGS,
+        default: MediaPreviewConfigController.default,
+    },
    "feature_report_to_moderators": {
        isFeature: true,
        labsGroup: LabGroup.Moderation,
@@ -1123,16 +1129,6 @@ export const SETTINGS: Settings = {
        default: null,
        controller: new FallbackIceServerController(),
    },
-    "showImages": {
-        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        displayName: _td("settings|image_thumbnails"),
-        default: true,
-    },
-    "showAvatarsOnInvites": {
-        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        displayName: _td("settings|invite_avatars"),
-        default: true,
-    },
    "RoomList.preferredSorting": {
        supportedLevels: [SettingLevel.DEVICE],
        default: SortingAlgorithm.Recency,
@@ -1386,7 +1382,6 @@ export const SETTINGS: Settings = {
        displayName: _td("settings|preferences|enable_hardware_acceleration"),
        default: true,
    },
-
    "Developer.elementCallUrl": {
        supportedLevels: [SettingLevel.DEVICE],
        displayName: _td("devtools|settings|elementCallUrl"),
--- a/src/settings/SettingsStore.ts
+++ b/src/settings/SettingsStore.ts
@@ -38,6 +38,7 @@ import { Action } from "../dispatcher/actions";
 import PlatformSettingsHandler from "./handlers/PlatformSettingsHandler";
 import ReloadOnChangeController from "./controllers/ReloadOnChangeController";
 import { MatrixClientPeg } from "../MatrixClientPeg";
+import { MediaPreviewValue } from "../@types/media_preview";

 // Convert the settings to easier to manage objects for the handlers
 const defaultSettings: Record<string, any> = {};
@@ -715,6 +716,29 @@ export default class SettingsStore {
        localStorage.setItem(MIGRATION_DONE_FLAG, "true");
    }

+    /**
+     * Migrate the setting for visible images to a setting.
+     */
+    private static migrateMediaControlsToSetting(): void {
+        const MIGRATION_DONE_FLAG = "mx_migrate_media_controls";
+        if (localStorage.getItem(MIGRATION_DONE_FLAG)) return;
+
+        logger.info("Performing one-time settings migration of show images and invite avatars to account data");
+        const handler = LEVEL_HANDLERS[SettingLevel.ACCOUNT];
+        const showImages = handler.getValue("showImages", null);
+        const showAvatarsOnInvites = handler.getValue("showAvatarsOnInvites", null);
+
+        const AccountHandler = LEVEL_HANDLERS[SettingLevel.ACCOUNT];
+        if (showImages !== null || showAvatarsOnInvites !== null) {
+            AccountHandler.setValue("mediaPreviewConfig", null, {
+                invite_avatars: showAvatarsOnInvites === false ? MediaPreviewValue.Off : MediaPreviewValue.On,
+                media_previews: showImages === false ? MediaPreviewValue.Off : MediaPreviewValue.On,
+            });
+        } // else, we don't set anything and use the server value
+
+        localStorage.setItem(MIGRATION_DONE_FLAG, "true");
+    }
+
    /**
     * Runs or queues any setting migrations needed.
     */
@@ -732,6 +756,12 @@ export default class SettingsStore {
        // will now be hidden again, so this fails safely.
        SettingsStore.migrateShowImagesToSettings();

+        // This can be removed once enough users have run a version of Element with
+        // this migration.
+        // The consequences of missing the migration are that the previously set
+        // media controls for this user will be missing
+        SettingsStore.migrateMediaControlsToSetting();
+
        // Dev notes: to add your migration, just add a new `migrateMyFeature` function, call it, and
        // add a comment to note when it can be removed.
        return;
--- a/src/settings/controllers/MatrixClientBackedController.ts
+++ b/src/settings/controllers/MatrixClientBackedController.ts
@@ -26,7 +26,7 @@ export default abstract class MatrixClientBackedController extends SettingContro
        MatrixClientBackedController._matrixClient = client;

        for (const instance of MatrixClientBackedController.instances) {
-            instance.initMatrixClient(client, oldClient);
+            instance.initMatrixClient?.(client, oldClient);
        }
    }

@@ -40,5 +40,5 @@ export default abstract class MatrixClientBackedController extends SettingContro
        return MatrixClientBackedController._matrixClient;
    }

-    protected abstract initMatrixClient(newClient: MatrixClient, oldClient?: MatrixClient): void;
+    protected initMatrixClient?(newClient: MatrixClient, oldClient?: MatrixClient): void;
 }
--- a/src/settings/controllers/MediaPreviewConfigController.ts
+++ b/src/settings/controllers/MediaPreviewConfigController.ts
@@ -0,0 +1,100 @@
+/*
+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 { type IContent } from "matrix-js-sdk/src/matrix";
+import { type AccountDataEvents } from "matrix-js-sdk/src/types";
+
+import {
+    MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
+    type MediaPreviewConfig,
+    MediaPreviewValue,
+} from "../../@types/media_preview.ts";
+import { type SettingLevel } from "../SettingLevel.ts";
+import MatrixClientBackedController from "./MatrixClientBackedController.ts";
+
+/**
+ * Handles media preview settings provided by MSC4278.
+ * This uses both account-level and room-level account data.
+ */
+export default class MediaPreviewConfigController extends MatrixClientBackedController {
+    public static readonly default: AccountDataEvents[typeof MEDIA_PREVIEW_ACCOUNT_DATA_TYPE] = {
+        media_previews: MediaPreviewValue.On,
+        invite_avatars: MediaPreviewValue.On,
+    };
+
+    private static getValidSettingData(content: IContent): Partial<MediaPreviewConfig> {
+        const mediaPreviews: MediaPreviewConfig["media_previews"] = content.media_previews;
+        const inviteAvatars: MediaPreviewConfig["invite_avatars"] = content.invite_avatars;
+        const validMediaPreviews = Object.values(MediaPreviewValue);
+        const validInviteAvatars = [MediaPreviewValue.Off, MediaPreviewValue.On];
+        return {
+            invite_avatars: validInviteAvatars.includes(inviteAvatars) ? inviteAvatars : undefined,
+            media_previews: validMediaPreviews.includes(mediaPreviews) ? mediaPreviews : undefined,
+        };
+    }
+
+    public constructor() {
+        super();
+    }
+
+    private getValue = (roomId?: string): MediaPreviewConfig => {
+        const source = roomId ? this.client?.getRoom(roomId) : this.client;
+        const accountData =
+            source?.getAccountData(MEDIA_PREVIEW_ACCOUNT_DATA_TYPE)?.getContent<MediaPreviewConfig>() ?? {};
+
+        const calculatedConfig = MediaPreviewConfigController.getValidSettingData(accountData);
+
+        // Save an account data fetch if we have all the values.
+        if (calculatedConfig.invite_avatars && calculatedConfig.media_previews) {
+            return calculatedConfig as MediaPreviewConfig;
+        }
+
+        // We're missing some keys.
+        if (roomId) {
+            const globalConfig = this.getValue();
+            return {
+                invite_avatars:
+                    calculatedConfig.invite_avatars ??
+                    globalConfig.invite_avatars ??
+                    MediaPreviewConfigController.default.invite_avatars,
+                media_previews:
+                    calculatedConfig.media_previews ??
+                    globalConfig.media_previews ??
+                    MediaPreviewConfigController.default.media_previews,
+            };
+        }
+        return {
+            invite_avatars: calculatedConfig.invite_avatars ?? MediaPreviewConfigController.default.invite_avatars,
+            media_previews: calculatedConfig.media_previews ?? MediaPreviewConfigController.default.media_previews,
+        };
+    };
+
+    public getValueOverride(_level: SettingLevel, roomId: string | null): MediaPreviewConfig {
+        return this.getValue(roomId ?? undefined);
+    }
+
+    public get settingDisabled(): false {
+        // No homeserver support is required for this MSC.
+        return false;
+    }
+
+    public async beforeChange(
+        _level: SettingLevel,
+        roomId: string | null,
+        newValue: MediaPreviewConfig,
+    ): Promise<boolean> {
+        if (!this.client) {
+            return false;
+        }
+        if (roomId) {
+            await this.client.setRoomAccountData(roomId, MEDIA_PREVIEW_ACCOUNT_DATA_TYPE, newValue);
+            return true;
+        }
+        await this.client.setAccountData(MEDIA_PREVIEW_ACCOUNT_DATA_TYPE, newValue);
+        return true;
+    }
+}
--- a/src/settings/handlers/AccountSettingsHandler.ts
+++ b/src/settings/handlers/AccountSettingsHandler.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 Copyright 2017 Travis Ralston

@@ -15,6 +15,7 @@ import MatrixClientBackedSettingsHandler from "./MatrixClientBackedSettingsHandl
 import { objectClone, objectKeyChanges } from "../../utils/objects";
 import { SettingLevel } from "../SettingLevel";
 import { type WatchManager } from "../WatchManager";
+import { MEDIA_PREVIEW_ACCOUNT_DATA_TYPE } from "../../@types/media_preview";

 const BREADCRUMBS_LEGACY_EVENT_TYPE = "im.vector.riot.breadcrumb_rooms";
 const BREADCRUMBS_EVENT_TYPE = "im.vector.setting.breadcrumbs";
@@ -68,6 +69,8 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
        } else if (event.getType() === RECENT_EMOJI_EVENT_TYPE) {
            const val = event.getContent()["enabled"];
            this.watchers.notifyUpdate("recent_emoji", null, SettingLevel.ACCOUNT, val);
+        } else if (event.getType() === MEDIA_PREVIEW_ACCOUNT_DATA_TYPE) {
+            this.watchers.notifyUpdate("mediaPreviewConfig", null, SettingLevel.ROOM_ACCOUNT, event.getContent());
        }
    };

@@ -173,7 +176,7 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
        await deferred.promise;
    }

-    public setValue(settingName: string, roomId: string, newValue: any): Promise<void> {
+    public async setValue(settingName: string, roomId: string, newValue: any): Promise<void> {
        switch (settingName) {
            // Special case URL previews
            case "urlPreviewsEnabled":
@@ -199,7 +202,9 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
            // Special case analytics
            case "pseudonymousAnalyticsOptIn":
                return this.setAccountData(ANALYTICS_EVENT_TYPE, "pseudonymousAnalyticsOptIn", newValue);
-
+            case "mediaPreviewConfig":
+                // Handled in MediaPreviewConfigController.
+                return;
            default:
                return this.setAccountData(DEFAULT_SETTINGS_EVENT_TYPE, settingName, newValue);
        }
--- a/src/settings/handlers/RoomAccountSettingsHandler.ts
+++ b/src/settings/handlers/RoomAccountSettingsHandler.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 Copyright 2017 Travis Ralston

@@ -14,6 +14,7 @@ import MatrixClientBackedSettingsHandler from "./MatrixClientBackedSettingsHandl
 import { objectClone, objectKeyChanges } from "../../utils/objects";
 import { SettingLevel } from "../SettingLevel";
 import { type WatchManager } from "../WatchManager";
+import { MEDIA_PREVIEW_ACCOUNT_DATA_TYPE } from "../../@types/media_preview";

 const ALLOWED_WIDGETS_EVENT_TYPE = "im.vector.setting.allowed_widgets";
 const DEFAULT_SETTINGS_EVENT_TYPE = "im.vector.web.settings";
@@ -56,6 +57,8 @@ export default class RoomAccountSettingsHandler extends MatrixClientBackedSettin
            }
        } else if (event.getType() === ALLOWED_WIDGETS_EVENT_TYPE) {
            this.watchers.notifyUpdate("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, event.getContent());
+        } else if (event.getType() === MEDIA_PREVIEW_ACCOUNT_DATA_TYPE) {
+            this.watchers.notifyUpdate("mediaPreviewConfig", roomId, SettingLevel.ROOM_ACCOUNT, event.getContent());
        }
    };

@@ -108,7 +111,7 @@ export default class RoomAccountSettingsHandler extends MatrixClientBackedSettin
        await deferred.promise;
    }

-    public setValue(settingName: string, roomId: string, newValue: any): Promise<void> {
+    public async setValue(settingName: string, roomId: string, newValue: any): Promise<void> {
        switch (settingName) {
            // Special case URL previews
            case "urlPreviewsEnabled":
@@ -117,7 +120,9 @@ export default class RoomAccountSettingsHandler extends MatrixClientBackedSettin
            // Special case allowed widgets
            case "allowedWidgets":
                return this.setRoomAccountData(roomId, ALLOWED_WIDGETS_EVENT_TYPE, null, newValue);
-
+            case "mediaPreviewConfig":
+                // Handled in MediaPreviewConfigController.
+                return;
            default:
                return this.setRoomAccountData(roomId, DEFAULT_SETTINGS_EVENT_TYPE, settingName, newValue);
        }
--- a/test/unit-tests/HtmlUtils-test.tsx
+++ b/test/unit-tests/HtmlUtils-test.tsx
@@ -12,6 +12,7 @@ import parse from "html-react-parser";

 import { bodyToHtml, bodyToNode, formatEmojis, topicToHtml } from "../../src/HtmlUtils";
 import SettingsStore from "../../src/settings/SettingsStore";
+import { getMockClientWithEventEmitter } from "../test-utils";
 import { SettingLevel } from "../../src/settings/SettingLevel";
 import SdkConfig from "../../src/SdkConfig";

@@ -231,6 +232,37 @@ describe("bodyToNode", () => {
        expect(asFragment()).toMatchSnapshot();
    });

+    it.each([[true], [false]])("should handle inline media when mediaIsVisible is %s", (mediaIsVisible) => {
+        const cli = getMockClientWithEventEmitter({
+            mxcUrlToHttp: jest.fn().mockReturnValue("https://example.org/img"),
+        });
+        const { className, formattedBody } = bodyToNode(
+            {
+                "body": "![foo](mxc://going/knowwhere) Hello there",
+                "format": "org.matrix.custom.html",
+                "formatted_body": `<img src="mxc://going/knowwhere">foo</img> Hello there`,
+                "m.relates_to": {
+                    "m.in_reply_to": {
+                        event_id: "$eventId",
+                    },
+                },
+                "msgtype": "m.text",
+            },
+            [],
+            {
+                mediaIsVisible,
+            },
+        );
+
+        const { asFragment } = render(
+            <span className={className} dir="auto" dangerouslySetInnerHTML={{ __html: formattedBody! }} />,
+        );
+        expect(asFragment()).toMatchSnapshot();
+        // We do not want to download untrusted media.
+        // eslint-disable-next-line no-restricted-properties
+        expect(cli.mxcUrlToHttp).toHaveBeenCalledTimes(mediaIsVisible ? 1 : 0);
+    });
+
    afterEach(() => {
        jest.resetAllMocks();
    });
--- a/test/unit-tests/snapshots/HtmlUtils-test.tsx.snap
+++ b/test/unit-tests/snapshots/HtmlUtils-test.tsx.snap
@@ -64,3 +64,30 @@ exports[`bodyToNode should generate big emoji for an emoji-only reply to a messa
  </span>
 </DocumentFragment>
 `;
+
+exports[`bodyToNode should handle inline media when mediaIsVisible is false 1`] = `
+<DocumentFragment>
+  <span
+    class="mx_EventTile_body markdown-body translate"
+    dir="auto"
+  >
+    <img />
+    foo Hello there
+  </span>
+</DocumentFragment>
+`;
+
+exports[`bodyToNode should handle inline media when mediaIsVisible is true 1`] = `
+<DocumentFragment>
+  <span
+    class="mx_EventTile_body markdown-body translate"
+    dir="auto"
+  >
+    <img
+      src="https://example.org/img"
+      style="max-width:800px;max-height:600px"
+    />
+    foo Hello there
+  </span>
+</DocumentFragment>
+`;
--- a/test/unit-tests/components/views/avatars/RoomAvatar-test.tsx
+++ b/test/unit-tests/components/views/avatars/RoomAvatar-test.tsx
@@ -17,6 +17,7 @@ import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import { LocalRoom } from "../../../../../src/models/LocalRoom";
 import * as AvatarModule from "../../../../../src/Avatar";
 import { DirectoryMember } from "../../../../../src/utils/direct-messages";
+import { MediaPreviewValue } from "../../../../../src/@types/media_preview";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { SettingLevel } from "../../../../../src/settings/SettingLevel";

@@ -37,18 +38,18 @@ describe("RoomAvatar", () => {
    });

    afterAll(() => {
+        SettingsStore.setValue(
+            "mediaPreviewConfig",
+            null,
+            SettingLevel.ACCOUNT,
+            SettingsStore.getDefaultValue("mediaPreviewConfig"),
+        );
        jest.restoreAllMocks();
    });

    afterEach(() => {
        mocked(DMRoomMap.shared().getUserIdForRoomId).mockReset();
        mocked(AvatarModule.defaultAvatarUrlForString).mockClear();
-        SettingsStore.setValue(
-            "showAvatarsOnInvites",
-            null,
-            SettingLevel.ACCOUNT,
-            SettingsStore.getDefaultValue("showAvatarsOnInvites"),
-        );
    });

    it("should render as expected for a Room", () => {
@@ -74,7 +75,6 @@ describe("RoomAvatar", () => {
        expect(render(<RoomAvatar room={localRoom} />).container).toMatchSnapshot();
    });
    it("should render an avatar for a room the user is invited to", () => {
-        SettingsStore.setValue("showAvatarsOnInvites", null, SettingLevel.ACCOUNT, true);
        const room = new Room("!room:example.com", client, client.getSafeUserId());
        jest.spyOn(room, "getMxcAvatarUrl").mockImplementation(() => "mxc://example.com/foobar");
        room.name = "test room";
@@ -93,7 +93,9 @@ describe("RoomAvatar", () => {
        expect(render(<RoomAvatar room={room} />).container).toMatchSnapshot();
    });
    it("should not render an invite avatar if the user has disabled it", () => {
-        SettingsStore.setValue("showAvatarsOnInvites", null, SettingLevel.ACCOUNT, false);
+        SettingsStore.setValue("mediaPreviewConfig", null, SettingLevel.ACCOUNT, {
+            invite_avatars: MediaPreviewValue.Off,
+        });
        const room = new Room("!room:example.com", client, client.getSafeUserId());
        room.name = "test room";
        room.updateMyMembership("invite");
--- a/test/unit-tests/components/views/messages/HideActionButton-test.tsx
+++ b/test/unit-tests/components/views/messages/HideActionButton-test.tsx
@@ -8,20 +8,20 @@ Please see LICENSE files in the repository root for full details.

 import React from "react";
 import { fireEvent, render, screen } from "jest-matrix-react";
-import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { MatrixEvent, type MatrixClient } from "matrix-js-sdk/src/matrix";

 import { HideActionButton } from "../../../../../src/components/views/messages/HideActionButton";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { SettingLevel } from "../../../../../src/settings/SettingLevel";
 import type { Settings } from "../../../../../src/settings/Settings";
+import { MediaPreviewValue } from "../../../../../src/@types/media_preview";
+import { getMockClientWithEventEmitter, withClientContextRenderOptions } from "../../../../test-utils";
+import type { MockedObject } from "jest-mock";

-function mockSetting(
-    showImages: Settings["showImages"]["default"],
-    showMediaEventIds: Settings["showMediaEventIds"]["default"],
-) {
+function mockSetting(mediaPreviews: MediaPreviewValue, showMediaEventIds: Settings["showMediaEventIds"]["default"]) {
    jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName) => {
-        if (settingName === "showImages") {
-            return showImages;
+        if (settingName === "mediaPreviewConfig") {
+            return { media_previews: mediaPreviews, invite_avatars: MediaPreviewValue.Off };
        } else if (settingName === "showMediaEventIds") {
            return showMediaEventIds;
        }
@@ -29,8 +29,10 @@ function mockSetting(
    });
 }

+const EVENT_ID = "$foo:bar";
+
 const event = new MatrixEvent({
-    event_id: "$foo:bar",
+    event_id: EVENT_ID,
    room_id: "!room:id",
    sender: "@user:id",
    type: "m.room.message",
@@ -42,32 +44,38 @@ const event = new MatrixEvent({
 });

 describe("HideActionButton", () => {
+    let cli: MockedObject<MatrixClient>;
+    beforeEach(() => {
+        cli = getMockClientWithEventEmitter({
+            getRoom: jest.fn(),
+        });
+    });
    afterEach(() => {
        jest.restoreAllMocks();
    });
    it("should show button when event is visible by showMediaEventIds setting", async () => {
-        mockSetting(false, { "$foo:bar": true });
-        render(<HideActionButton mxEvent={event} />);
+        mockSetting(MediaPreviewValue.Off, { [EVENT_ID]: true });
+        render(<HideActionButton mxEvent={event} />, withClientContextRenderOptions(cli));
        expect(screen.getByRole("button")).toBeVisible();
    });
-    it("should show button when event is visible by showImages setting", async () => {
-        mockSetting(true, {});
-        render(<HideActionButton mxEvent={event} />);
+    it("should show button when event is visible by mediaPreviewConfig setting", async () => {
+        mockSetting(MediaPreviewValue.On, {});
+        render(<HideActionButton mxEvent={event} />, withClientContextRenderOptions(cli));
        expect(screen.getByRole("button")).toBeVisible();
    });
    it("should hide button when event is hidden by showMediaEventIds setting", async () => {
-        jest.spyOn(SettingsStore, "getValue").mockReturnValue({ "$foo:bar": false });
-        render(<HideActionButton mxEvent={event} />);
+        mockSetting(MediaPreviewValue.Off, { [EVENT_ID]: false });
+        render(<HideActionButton mxEvent={event} />, withClientContextRenderOptions(cli));
        expect(screen.queryByRole("button")).toBeNull();
    });
    it("should hide button when event is hidden by showImages setting", async () => {
-        mockSetting(false, {});
-        render(<HideActionButton mxEvent={event} />);
+        mockSetting(MediaPreviewValue.Off, {});
+        render(<HideActionButton mxEvent={event} />, withClientContextRenderOptions(cli));
        expect(screen.queryByRole("button")).toBeNull();
    });
    it("should store event as hidden when clicked", async () => {
        const spy = jest.spyOn(SettingsStore, "setValue");
-        render(<HideActionButton mxEvent={event} />);
+        render(<HideActionButton mxEvent={event} />, withClientContextRenderOptions(cli));
        fireEvent.click(screen.getByRole("button"));
        expect(spy).toHaveBeenCalledWith("showMediaEventIds", null, SettingLevel.DEVICE, { "$foo:bar": false });
        // Button should be hidden after the setting is set.
--- a/test/unit-tests/components/views/messages/MImageBody-test.tsx
+++ b/test/unit-tests/components/views/messages/MImageBody-test.tsx
@@ -1,12 +1,12 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 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 React, { act } from "react";
+import React from "react";
 import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "jest-matrix-react";
 import { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import fetchMock from "fetch-mock-jest";
@@ -24,10 +24,11 @@ import {
    mockClientMethodsDevice,
    mockClientMethodsServer,
    mockClientMethodsUser,
+    withClientContextRenderOptions,
 } from "../../../../test-utils";
 import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
-import { SettingLevel } from "../../../../../src/settings/SettingLevel";
+import { MediaPreviewValue } from "../../../../../src/@types/media_preview";

 jest.mock("matrix-encrypt-attachment", () => ({
    decryptAttachment: jest.fn(),
@@ -42,6 +43,7 @@ describe("<MImageBody/>", () => {
        ...mockClientMethodsDevice(deviceId),
        ...mockClientMethodsCrypto(),
        getRooms: jest.fn().mockReturnValue([]),
+        getRoom: jest.fn(),
        getIgnoredUsers: jest.fn(),
        getVersions: jest.fn().mockResolvedValue({
            unstable_features: {
@@ -85,6 +87,7 @@ describe("<MImageBody/>", () => {
    });

    afterEach(() => {
+        SettingsStore.reset();
        mocked(encrypt.decryptAttachment).mockReset();
    });

@@ -97,6 +100,7 @@ describe("<MImageBody/>", () => {
                mxEvent={encryptedMediaEvent}
                mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
            />,
+            withClientContextRenderOptions(cli),
        );

        // thumbnail with dimensions present
@@ -112,6 +116,7 @@ describe("<MImageBody/>", () => {
                mxEvent={encryptedMediaEvent}
                mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
            />,
+            withClientContextRenderOptions(cli),
        );

        expect(fetchMock).toHaveBeenCalledWith(url);
@@ -129,6 +134,7 @@ describe("<MImageBody/>", () => {
                mxEvent={encryptedMediaEvent}
                mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
            />,
+            withClientContextRenderOptions(cli),
        );

        await screen.findByText("Error decrypting image");
@@ -136,25 +142,12 @@ describe("<MImageBody/>", () => {

    describe("with image previews/thumbnails disabled", () => {
        beforeEach(() => {
-            act(() => {
-                SettingsStore.setValue("showImages", null, SettingLevel.DEVICE, false);
-            });
-        });
-
-        afterEach(() => {
-            act(() => {
-                SettingsStore.setValue(
-                    "showImages",
-                    null,
-                    SettingLevel.DEVICE,
-                    SettingsStore.getDefaultValue("showImages"),
-                );
-                SettingsStore.setValue(
-                    "showMediaEventIds",
-                    null,
-                    SettingLevel.DEVICE,
-                    SettingsStore.getDefaultValue("showMediaEventIds"),
-                );
+            const origFn = SettingsStore.getValue;
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting, ...args) => {
+                if (setting === "mediaPreviewConfig") {
+                    return { invite_avatars: MediaPreviewValue.Off, media_previews: MediaPreviewValue.Off };
+                }
+                return origFn(setting, ...args);
            });
        });

@@ -167,6 +160,7 @@ describe("<MImageBody/>", () => {
                    mxEvent={encryptedMediaEvent}
                    mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
                />,
+                withClientContextRenderOptions(cli),
            );

            expect(screen.getByText("Show image")).toBeInTheDocument();
@@ -183,6 +177,7 @@ describe("<MImageBody/>", () => {
                    mxEvent={encryptedMediaEvent}
                    mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
                />,
+                withClientContextRenderOptions(cli),
            );

            expect(screen.getByText("Show image")).toBeInTheDocument();
@@ -220,6 +215,7 @@ describe("<MImageBody/>", () => {

        const { container } = render(
            <MImageBody {...props} mxEvent={event} mediaEventHelper={new MediaEventHelper(event)} />,
+            withClientContextRenderOptions(cli),
        );

        const img = container.querySelector(".mx_MImageBody_thumbnail")!;
@@ -273,6 +269,7 @@ describe("<MImageBody/>", () => {

        const { container } = render(
            <MImageBody {...props} mxEvent={event} mediaEventHelper={new MediaEventHelper(event)} />,
+            withClientContextRenderOptions(cli),
        );

        // Wait for spinners to go away
@@ -298,6 +295,7 @@ describe("<MImageBody/>", () => {

        const { container } = render(
            <MImageBody {...props} mxEvent={event} mediaEventHelper={new MediaEventHelper(event)} />,
+            withClientContextRenderOptions(cli),
        );

        const img = container.querySelector(".mx_MImageBody_thumbnail")!;
--- a/test/unit-tests/components/views/messages/MStickerBody-test.tsx
+++ b/test/unit-tests/components/views/messages/MStickerBody-test.tsx
@@ -19,6 +19,7 @@ import {
    mockClientMethodsDevice,
    mockClientMethodsServer,
    mockClientMethodsUser,
+    withClientContextRenderOptions,
 } from "../../../../test-utils";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import MStickerBody from "../../../../../src/components/views/messages/MStickerBody";
@@ -31,6 +32,7 @@ describe("<MStickerBody/>", () => {
        ...mockClientMethodsServer(),
        ...mockClientMethodsDevice(deviceId),
        ...mockClientMethodsCrypto(),
+        getRoom: jest.fn(),
        getRooms: jest.fn().mockReturnValue([]),
        getIgnoredUsers: jest.fn(),
        getVersions: jest.fn().mockResolvedValue({
@@ -76,7 +78,7 @@ describe("<MStickerBody/>", () => {
    it("should show a tooltip on hover", async () => {
        fetchMock.getOnce(url, { status: 200 });

-        render(<MStickerBody {...props} mxEvent={mediaEvent} />);
+        render(<MStickerBody {...props} mxEvent={mediaEvent} />, withClientContextRenderOptions(cli));

        expect(screen.queryByRole("tooltip")).toBeNull();
        await userEvent.hover(screen.getByRole("img"));
--- a/test/unit-tests/components/views/messages/MVideoBody-test.tsx
+++ b/test/unit-tests/components/views/messages/MVideoBody-test.tsx
@@ -1,15 +1,16 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 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 React, { act } from "react";
-import { EventType, getHttpUriForMxc, type IContent, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import React from "react";
+import { EventType, getHttpUriForMxc, type IContent, type MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { fireEvent, render, screen, type RenderResult } from "jest-matrix-react";
 import fetchMock from "fetch-mock-jest";
+import { type MockedObject } from "jest-mock";

 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { type RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
@@ -20,11 +21,12 @@ import {
    mockClientMethodsDevice,
    mockClientMethodsServer,
    mockClientMethodsUser,
+    withClientContextRenderOptions,
 } from "../../../../test-utils";
 import MVideoBody from "../../../../../src/components/views/messages/MVideoBody";
 import type { IBodyProps } from "../../../../../src/components/views/messages/IBodyProps";
-import { SettingLevel } from "../../../../../src/settings/SettingLevel";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
+import { MediaPreviewValue } from "../../../../../src/@types/media_preview";

 // Needed so we don't throw an error about failing to decrypt.
 jest.mock("matrix-encrypt-attachment", () => ({
@@ -36,13 +38,15 @@ describe("MVideoBody", () => {
    const deviceId = "DEADB33F";

    const thumbUrl = "https://server/_matrix/media/v3/download/server/encrypted-poster";
+    let cli: MockedObject<MatrixClient>;

    beforeEach(() => {
-        const cli = getMockClientWithEventEmitter({
+        cli = getMockClientWithEventEmitter({
            ...mockClientMethodsUser(userId),
            ...mockClientMethodsServer(),
            ...mockClientMethodsDevice(deviceId),
            ...mockClientMethodsCrypto(),
+            getRoom: jest.fn(),
            getRooms: jest.fn().mockReturnValue([]),
            getIgnoredUsers: jest.fn(),
            getVersions: jest.fn().mockResolvedValue({
@@ -65,6 +69,7 @@ describe("MVideoBody", () => {
        room_id: "!room:server",
        sender: userId,
        type: EventType.RoomMessage,
+        event_id: "$foo:bar",
        content: {
            body: "alt for a test video",
            info: {
@@ -93,32 +98,25 @@ describe("MVideoBody", () => {
        fetchMock.getOnce(thumbUrl, { status: 200 });
        const { asFragment } = render(
            <MVideoBody mxEvent={encryptedMediaEvent} mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)} />,
+            withClientContextRenderOptions(cli),
        );
        expect(asFragment()).toMatchSnapshot();
    });

    describe("with video previews/thumbnails disabled", () => {
        beforeEach(() => {
-            act(() => {
-                SettingsStore.setValue("showImages", null, SettingLevel.DEVICE, false);
+            const origFn = SettingsStore.getValue;
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting, ...args) => {
+                if (setting === "mediaPreviewConfig") {
+                    return { invite_avatars: MediaPreviewValue.Off, media_previews: MediaPreviewValue.Off };
+                }
+                return origFn(setting, ...args);
            });
        });

        afterEach(() => {
-            act(() => {
-                SettingsStore.setValue(
-                    "showImages",
-                    null,
-                    SettingLevel.DEVICE,
-                    SettingsStore.getDefaultValue("showImages"),
-                );
-                SettingsStore.setValue(
-                    "showMediaEventIds",
-                    null,
-                    SettingLevel.DEVICE,
-                    SettingsStore.getDefaultValue("showMediaEventIds"),
-                );
-            });
+            SettingsStore.reset();
+            jest.restoreAllMocks();
        });

        it("should not download video", async () => {
@@ -129,6 +127,7 @@ describe("MVideoBody", () => {
                    mxEvent={encryptedMediaEvent}
                    mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
                />,
+                withClientContextRenderOptions(cli),
            );

            expect(screen.getByText("Show video")).toBeInTheDocument();
@@ -144,6 +143,7 @@ describe("MVideoBody", () => {
                    mxEvent={encryptedMediaEvent}
                    mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
                />,
+                withClientContextRenderOptions(cli),
            );

            const placeholderButton = screen.getByRole("button", { name: "Show video" });
@@ -191,6 +191,7 @@ function makeMVideoBody(w: number, h: number): RenderResult {

    const mockClient = getMockClientWithEventEmitter({
        mxcUrlToHttp: jest.fn(),
+        getRoom: jest.fn(),
    });

    return render(
--- a/test/unit-tests/components/views/rooms/RoomPreviewCard-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomPreviewCard-test.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -44,9 +44,13 @@ describe("RoomPreviewCard", () => {
        client.reEmitter.reEmit(room, [RoomStateEvent.Events]);

        enabledFeatures = [];
-        jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName): any =>
-            enabledFeatures.includes(settingName) ? true : undefined,
-        );
+        const origFn = SettingsStore.getValue;
+        jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName): any => {
+            if (enabledFeatures.includes(settingName)) {
+                return true;
+            }
+            return origFn(settingName);
+        });
    });

    afterEach(() => {
--- a/test/unit-tests/components/views/settings/tabs/user/MediaPreviewAccountSettingsTab-test.tsx
+++ b/test/unit-tests/components/views/settings/tabs/user/MediaPreviewAccountSettingsTab-test.tsx
@@ -0,0 +1,99 @@
+/*
+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 { render } from "jest-matrix-react";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { type MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { MediaPreviewAccountSettings } from "../../../../../../../src/components/views/settings/tabs/user/MediaPreviewAccountSettings";
+import {
+    getMockClientWithEventEmitter,
+    mockClientMethodsServer,
+    mockClientMethodsUser,
+} from "../../../../../../test-utils";
+import MatrixClientBackedController from "../../../../../../../src/settings/controllers/MatrixClientBackedController";
+import MatrixClientBackedSettingsHandler from "../../../../../../../src/settings/handlers/MatrixClientBackedSettingsHandler";
+import type { MockedObject } from "jest-mock";
+import {
+    MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
+    type MediaPreviewConfig,
+    MediaPreviewValue,
+} from "../../../../../../../src/@types/media_preview";
+import MediaPreviewConfigController from "../../../../../../../src/settings/controllers/MediaPreviewConfigController";
+
+describe("MediaPreviewAccountSettings", () => {
+    let client: MockedObject<MatrixClient>;
+    beforeEach(() => {
+        client = getMockClientWithEventEmitter({
+            ...mockClientMethodsServer(),
+            ...mockClientMethodsUser(),
+            getRoom: jest.fn(),
+            setAccountData: jest.fn(),
+            isVersionSupported: jest.fn().mockResolvedValue(true),
+        });
+        MatrixClientBackedController.matrixClient = client;
+        MatrixClientBackedSettingsHandler.matrixClient = client;
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("should render", () => {
+        const { getByLabelText } = render(<MediaPreviewAccountSettings />);
+        // Defaults
+        expect(getByLabelText("Hide avatars of room and inviter")).not.toBeChecked();
+        expect(getByLabelText("Always hide")).not.toBeChecked();
+        expect(getByLabelText("In private rooms")).not.toBeChecked();
+        expect(getByLabelText("Always show")).toBeChecked();
+    });
+
+    it("should be able to toggle hide avatar", async () => {
+        const { getByLabelText } = render(<MediaPreviewAccountSettings />);
+        // Defaults
+        const element = getByLabelText("Hide avatars of room and inviter");
+        await userEvent.click(element);
+        expect(client.setAccountData).toHaveBeenCalledWith(MEDIA_PREVIEW_ACCOUNT_DATA_TYPE, {
+            invite_avatars: MediaPreviewValue.Off,
+            media_previews: MediaPreviewValue.On,
+        });
+        // Ensure we don't double set the account data.
+        expect(client.setAccountData).toHaveBeenCalledTimes(1);
+    });
+
+    // Skip the default.
+    it.each([
+        ["Always hide", MediaPreviewValue.Off],
+        ["In private rooms", MediaPreviewValue.Private],
+        ["Always show", MediaPreviewValue.On],
+    ])("should be able to toggle media preview option %s", async (key, value) => {
+        if (value === MediaPreviewConfigController.default.media_previews) {
+            // This is the default, so switch away first.
+            client.getAccountData.mockImplementation((type) => {
+                if (type === MEDIA_PREVIEW_ACCOUNT_DATA_TYPE) {
+                    return new MatrixEvent({
+                        content: {
+                            media_previews: MediaPreviewValue.Off,
+                        } satisfies Partial<MediaPreviewConfig>,
+                    });
+                }
+                return undefined;
+            });
+        }
+        const { getByLabelText } = render(<MediaPreviewAccountSettings />);
+
+        const element = getByLabelText(key);
+        await userEvent.click(element);
+        expect(client.setAccountData).toHaveBeenCalledWith(MEDIA_PREVIEW_ACCOUNT_DATA_TYPE, {
+            invite_avatars: MediaPreviewValue.On,
+            media_previews: value,
+        });
+        // Ensure we don't double set the account data.
+        expect(client.setAccountData).toHaveBeenCalledTimes(1);
+    });
+});
--- a/test/unit-tests/components/views/settings/tabs/user/snapshots/PreferencesUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/snapshots/PreferencesUserSettingsTab-test.tsx.snap
@@ -95,33 +95,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  />
                </div>
              </div>
-              <div
-                class="mx_SettingsFlag"
-              >
-                <label
-                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_QgU2PomxwKpa"
-                >
-                  <span
-                    class="mx_SettingsFlag_labelText"
-                  >
-                    Show avatars of rooms you have been invited to
-                  </span>
-                </label>
-                <div
-                  aria-checked="true"
-                  aria-disabled="true"
-                  aria-label="Show avatars of rooms you have been invited to"
-                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-                  id="mx_SettingsFlag_QgU2PomxwKpa"
-                  role="switch"
-                  tabindex="0"
-                >
-                  <div
-                    class="mx_ToggleSwitch_ball"
-                  />
-                </div>
-              </div>
            </div>
          </div>
          <div
@@ -144,7 +117,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
              >
                <label
                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_6hpi3YEetmBG"
+                  for="mx_SettingsFlag_QgU2PomxwKpa"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -162,7 +135,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Show all rooms in Home"
                  class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_6hpi3YEetmBG"
+                  id="mx_SettingsFlag_QgU2PomxwKpa"
                  role="switch"
                  tabindex="0"
                >
@@ -212,7 +185,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
              >
                <label
                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_4yVCeEefiPqp"
+                  for="mx_SettingsFlag_6hpi3YEetmBG"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -225,7 +198,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Use Ctrl + F to search timeline"
                  class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_4yVCeEefiPqp"
+                  id="mx_SettingsFlag_6hpi3YEetmBG"
                  role="switch"
                  tabindex="0"
                >
@@ -285,7 +258,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
              >
                <label
                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_MRMwbPDmfGtm"
+                  for="mx_SettingsFlag_4yVCeEefiPqp"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -298,6 +271,33 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Show timestamps in 12 hour format (e.g. 2:30pm)"
                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_4yVCeEefiPqp"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_MRMwbPDmfGtm"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Always show message timestamps
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Always show message timestamps"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
                  id="mx_SettingsFlag_MRMwbPDmfGtm"
                  role="switch"
                  tabindex="0"
@@ -313,33 +313,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                <label
                  class="mx_SettingsFlag_label"
                  for="mx_SettingsFlag_GQvdMWe954DV"
-                >
-                  <span
-                    class="mx_SettingsFlag_labelText"
-                  >
-                    Always show message timestamps
-                  </span>
-                </label>
-                <div
-                  aria-checked="false"
-                  aria-disabled="true"
-                  aria-label="Always show message timestamps"
-                  class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_GQvdMWe954DV"
-                  role="switch"
-                  tabindex="0"
-                >
-                  <div
-                    class="mx_ToggleSwitch_ball"
-                  />
-                </div>
-              </div>
-              <div
-                class="mx_SettingsFlag"
-              >
-                <label
-                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_IAu5CsiHRD7n"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -352,7 +325,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Publish timezone on public profile"
                  class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_IAu5CsiHRD7n"
+                  id="mx_SettingsFlag_GQvdMWe954DV"
                  role="switch"
                  tabindex="0"
                >
@@ -392,7 +365,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
              >
                <label
                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_yrA2ohjWVJIP"
+                  for="mx_SettingsFlag_IAu5CsiHRD7n"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -405,7 +378,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Send read receipts"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-                  id="mx_SettingsFlag_yrA2ohjWVJIP"
+                  id="mx_SettingsFlag_IAu5CsiHRD7n"
                  role="switch"
                  tabindex="0"
                >
@@ -419,7 +392,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
              >
                <label
                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_auy1OmnTidX4"
+                  for="mx_SettingsFlag_yrA2ohjWVJIP"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -432,7 +405,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Send typing notifications"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-                  id="mx_SettingsFlag_auy1OmnTidX4"
+                  id="mx_SettingsFlag_yrA2ohjWVJIP"
                  role="switch"
                  tabindex="0"
                >
@@ -463,7 +436,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
              >
                <label
                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_ePDS0OpWwAHG"
+                  for="mx_SettingsFlag_auy1OmnTidX4"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -476,7 +449,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Automatically replace plain text Emoji"
                  class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_ePDS0OpWwAHG"
+                  id="mx_SettingsFlag_auy1OmnTidX4"
                  role="switch"
                  tabindex="0"
                >
@@ -490,7 +463,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
              >
                <label
                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_75JNTNkNU64r"
+                  for="mx_SettingsFlag_ePDS0OpWwAHG"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -514,6 +487,33 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Enable Markdown"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_ePDS0OpWwAHG"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_75JNTNkNU64r"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Enable Emoji suggestions while typing
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Enable Emoji suggestions while typing"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                  id="mx_SettingsFlag_75JNTNkNU64r"
                  role="switch"
                  tabindex="0"
@@ -533,14 +533,14 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  <span
                    class="mx_SettingsFlag_labelText"
                  >
-                    Enable Emoji suggestions while typing
+                    Use Ctrl + Enter to send a message
                  </span>
                </label>
                <div
-                  aria-checked="true"
+                  aria-checked="false"
                  aria-disabled="true"
-                  aria-label="Enable Emoji suggestions while typing"
-                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  aria-label="Use Ctrl + Enter to send a message"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
                  id="mx_SettingsFlag_aTLcRsQRlYy7"
                  role="switch"
                  tabindex="0"
@@ -560,13 +560,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  <span
                    class="mx_SettingsFlag_labelText"
                  >
-                    Use Ctrl + Enter to send a message
+                    Surround selected text when typing special characters
                  </span>
                </label>
                <div
                  aria-checked="false"
                  aria-disabled="true"
-                  aria-label="Use Ctrl + Enter to send a message"
+                  aria-label="Surround selected text when typing special characters"
                  class="mx_AccessibleButton mx_ToggleSwitch"
                  id="mx_SettingsFlag_5nfv5bOEPN1s"
                  role="switch"
@@ -587,14 +587,14 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  <span
                    class="mx_SettingsFlag_labelText"
                  >
-                    Surround selected text when typing special characters
+                    Show stickers button
                  </span>
                </label>
                <div
-                  aria-checked="false"
+                  aria-checked="true"
                  aria-disabled="true"
-                  aria-label="Surround selected text when typing special characters"
-                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  aria-label="Show stickers button"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                  id="mx_SettingsFlag_u1JYVtOyR5kb"
                  role="switch"
                  tabindex="0"
@@ -610,33 +610,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                <label
                  class="mx_SettingsFlag_label"
                  for="mx_SettingsFlag_u3pEwuLn9Enn"
-                >
-                  <span
-                    class="mx_SettingsFlag_labelText"
-                  >
-                    Show stickers button
-                  </span>
-                </label>
-                <div
-                  aria-checked="true"
-                  aria-disabled="true"
-                  aria-label="Show stickers button"
-                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-                  id="mx_SettingsFlag_u3pEwuLn9Enn"
-                  role="switch"
-                  tabindex="0"
-                >
-                  <div
-                    class="mx_ToggleSwitch_ball"
-                  />
-                </div>
-              </div>
-              <div
-                class="mx_SettingsFlag"
-              >
-                <label
-                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_YuxfFEpOsztW"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -649,7 +622,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Insert a trailing colon after user mentions at the start of a message"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-                  id="mx_SettingsFlag_YuxfFEpOsztW"
+                  id="mx_SettingsFlag_u3pEwuLn9Enn"
                  role="switch"
                  tabindex="0"
                >
@@ -680,7 +653,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
              >
                <label
                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_hQkBerF1ejc4"
+                  for="mx_SettingsFlag_YuxfFEpOsztW"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -693,6 +666,33 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Enable automatic language detection for syntax highlighting"
                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_YuxfFEpOsztW"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_hQkBerF1ejc4"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Expand code blocks by default
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Expand code blocks by default"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
                  id="mx_SettingsFlag_hQkBerF1ejc4"
                  role="switch"
                  tabindex="0"
@@ -708,33 +708,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                <label
                  class="mx_SettingsFlag_label"
                  for="mx_SettingsFlag_GFes1UFzOK2n"
-                >
-                  <span
-                    class="mx_SettingsFlag_labelText"
-                  >
-                    Expand code blocks by default
-                  </span>
-                </label>
-                <div
-                  aria-checked="false"
-                  aria-disabled="true"
-                  aria-label="Expand code blocks by default"
-                  class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_GFes1UFzOK2n"
-                  role="switch"
-                  tabindex="0"
-                >
-                  <div
-                    class="mx_ToggleSwitch_ball"
-                  />
-                </div>
-              </div>
-              <div
-                class="mx_SettingsFlag"
-              >
-                <label
-                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_vfGFMldL2r2v"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -747,7 +720,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Show line numbers in code blocks"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-                  id="mx_SettingsFlag_vfGFMldL2r2v"
+                  id="mx_SettingsFlag_GFes1UFzOK2n"
                  role="switch"
                  tabindex="0"
                >
@@ -778,7 +751,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
              >
                <label
                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_bsSwicmKUiOB"
+                  for="mx_SettingsFlag_vfGFMldL2r2v"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -791,6 +764,33 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Enable inline URL previews by default"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_vfGFMldL2r2v"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_bsSwicmKUiOB"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Autoplay GIFs
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Autoplay GIFs"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
                  id="mx_SettingsFlag_bsSwicmKUiOB"
                  role="switch"
                  tabindex="0"
@@ -806,33 +806,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                <label
                  class="mx_SettingsFlag_label"
                  for="mx_SettingsFlag_dvqsxEaZtl3A"
-                >
-                  <span
-                    class="mx_SettingsFlag_labelText"
-                  >
-                    Autoplay GIFs
-                  </span>
-                </label>
-                <div
-                  aria-checked="false"
-                  aria-disabled="true"
-                  aria-label="Autoplay GIFs"
-                  class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_dvqsxEaZtl3A"
-                  role="switch"
-                  tabindex="0"
-                >
-                  <div
-                    class="mx_ToggleSwitch_ball"
-                  />
-                </div>
-              </div>
-              <div
-                class="mx_SettingsFlag"
-              >
-                <label
-                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_NIiWzqsApP1c"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -845,34 +818,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Autoplay videos"
                  class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_NIiWzqsApP1c"
-                  role="switch"
-                  tabindex="0"
-                >
-                  <div
-                    class="mx_ToggleSwitch_ball"
-                  />
-                </div>
-              </div>
-              <div
-                class="mx_SettingsFlag"
-              >
-                <label
-                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_q1SIAPqLMVXh"
-                >
-                  <span
-                    class="mx_SettingsFlag_labelText"
-                  >
-                    Show previews/thumbnails for images
-                  </span>
-                </label>
-                <div
-                  aria-checked="true"
-                  aria-disabled="true"
-                  aria-label="Show previews/thumbnails for images"
-                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-                  id="mx_SettingsFlag_q1SIAPqLMVXh"
+                  id="mx_SettingsFlag_dvqsxEaZtl3A"
                  role="switch"
                  tabindex="0"
                >
@@ -903,7 +849,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
              >
                <label
                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_dXFDGgBsKXay"
+                  for="mx_SettingsFlag_NIiWzqsApP1c"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -916,6 +862,60 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Show typing notifications"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_NIiWzqsApP1c"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_q1SIAPqLMVXh"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show a placeholder for removed messages
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show a placeholder for removed messages"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_q1SIAPqLMVXh"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_dXFDGgBsKXay"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show read receipts sent by other users
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show read receipts sent by other users"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                  id="mx_SettingsFlag_dXFDGgBsKXay"
                  role="switch"
                  tabindex="0"
@@ -935,13 +935,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  <span
                    class="mx_SettingsFlag_labelText"
                  >
-                    Show a placeholder for removed messages
+                    Show join/leave messages (invites/removes/bans unaffected)
                  </span>
                </label>
                <div
                  aria-checked="true"
                  aria-disabled="true"
-                  aria-label="Show a placeholder for removed messages"
+                  aria-label="Show join/leave messages (invites/removes/bans unaffected)"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                  id="mx_SettingsFlag_7Az0xw4Bs4Tt"
                  role="switch"
@@ -962,13 +962,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  <span
                    class="mx_SettingsFlag_labelText"
                  >
-                    Show read receipts sent by other users
+                    Show display name changes
                  </span>
                </label>
                <div
                  aria-checked="true"
                  aria-disabled="true"
-                  aria-label="Show read receipts sent by other users"
+                  aria-label="Show display name changes"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                  id="mx_SettingsFlag_8jmzPIlPoBCv"
                  role="switch"
@@ -989,13 +989,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  <span
                    class="mx_SettingsFlag_labelText"
                  >
-                    Show join/leave messages (invites/removes/bans unaffected)
+                    Show chat effects (animations when receiving e.g. confetti)
                  </span>
                </label>
                <div
                  aria-checked="true"
                  aria-disabled="true"
-                  aria-label="Show join/leave messages (invites/removes/bans unaffected)"
+                  aria-label="Show chat effects (animations when receiving e.g. confetti)"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                  id="mx_SettingsFlag_enFRaTjdsFou"
                  role="switch"
@@ -1016,13 +1016,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  <span
                    class="mx_SettingsFlag_labelText"
                  >
-                    Show display name changes
+                    Show profile picture changes
                  </span>
                </label>
                <div
                  aria-checked="true"
                  aria-disabled="true"
-                  aria-label="Show display name changes"
+                  aria-label="Show profile picture changes"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                  id="mx_SettingsFlag_bfwnd5rz4XNX"
                  role="switch"
@@ -1043,13 +1043,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  <span
                    class="mx_SettingsFlag_labelText"
                  >
-                    Show chat effects (animations when receiving e.g. confetti)
+                    Show avatars in user, room and event mentions
                  </span>
                </label>
                <div
                  aria-checked="true"
                  aria-disabled="true"
-                  aria-label="Show chat effects (animations when receiving e.g. confetti)"
+                  aria-label="Show avatars in user, room and event mentions"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                  id="mx_SettingsFlag_gs5uWEzYzZrS"
                  role="switch"
@@ -1070,13 +1070,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  <span
                    class="mx_SettingsFlag_labelText"
                  >
-                    Show profile picture changes
+                    Enable big emoji in chat
                  </span>
                </label>
                <div
                  aria-checked="true"
                  aria-disabled="true"
-                  aria-label="Show profile picture changes"
+                  aria-label="Enable big emoji in chat"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                  id="mx_SettingsFlag_qWg7OgID1yRR"
                  role="switch"
@@ -1097,13 +1097,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  <span
                    class="mx_SettingsFlag_labelText"
                  >
-                    Show avatars in user, room and event mentions
+                    Jump to the bottom of the timeline when you send a message
                  </span>
                </label>
                <div
                  aria-checked="true"
                  aria-disabled="true"
-                  aria-label="Show avatars in user, room and event mentions"
+                  aria-label="Jump to the bottom of the timeline when you send a message"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                  id="mx_SettingsFlag_pOPewl7rtMbV"
                  role="switch"
@@ -1124,14 +1124,14 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  <span
                    class="mx_SettingsFlag_labelText"
                  >
-                    Enable big emoji in chat
+                    Show current profile picture and name for users in message history
                  </span>
                </label>
                <div
-                  aria-checked="true"
+                  aria-checked="false"
                  aria-disabled="true"
-                  aria-label="Enable big emoji in chat"
-                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  aria-label="Show current profile picture and name for users in message history"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
                  id="mx_SettingsFlag_cmt3PZSyNp3v"
                  role="switch"
                  tabindex="0"
@@ -1141,62 +1141,170 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  />
                </div>
              </div>
-              <div
-                class="mx_SettingsFlag"
-              >
-                <label
-                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_dJJz3lHUv9XX"
-                >
-                  <span
-                    class="mx_SettingsFlag_labelText"
-                  >
-                    Jump to the bottom of the timeline when you send a message
-                  </span>
-                </label>
-                <div
-                  aria-checked="true"
-                  aria-disabled="true"
-                  aria-label="Jump to the bottom of the timeline when you send a message"
-                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-                  id="mx_SettingsFlag_dJJz3lHUv9XX"
-                  role="switch"
-                  tabindex="0"
-                >
-                  <div
-                    class="mx_ToggleSwitch_ball"
-                  />
-                </div>
-              </div>
-              <div
-                class="mx_SettingsFlag"
-              >
-                <label
-                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_SBSSOZDRlzlA"
-                >
-                  <span
-                    class="mx_SettingsFlag_labelText"
-                  >
-                    Show current profile picture and name for users in message history
-                  </span>
-                </label>
-                <div
-                  aria-checked="false"
-                  aria-disabled="true"
-                  aria-label="Show current profile picture and name for users in message history"
-                  class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_SBSSOZDRlzlA"
-                  role="switch"
-                  tabindex="0"
-                >
-                  <div
-                    class="mx_ToggleSwitch_ball"
-                  />
-                </div>
-              </div>
            </div>
          </div>
+          <div
+            class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
+          >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+              >
+                Moderation and safety
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
+            >
+              <form
+                class="_root_19upo_16 mx_MediaPreviewAccountSetting_Form"
+              >
+                <div
+                  class="mx_SettingsFlag mx_MediaPreviewAccountSetting_ToggleSwitch"
+                >
+                  <span
+                    class="mx_SettingsFlag_label"
+                  >
+                    <div
+                      id="mx_LabelledToggleSwitch_«r8»"
+                    >
+                      Hide avatars of room and inviter
+                    </div>
+                  </span>
+                  <div
+                    aria-checked="false"
+                    aria-disabled="false"
+                    aria-labelledby="mx_LabelledToggleSwitch_«r8»"
+                    class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+                    role="switch"
+                    tabindex="0"
+                  >
+                    <div
+                      class="mx_ToggleSwitch_ball"
+                    />
+                  </div>
+                </div>
+                <div
+                  aria-label="Show media in timeline"
+                  class="_field_19upo_26"
+                  id="mx_media_previews"
+                  role="radiogroup"
+                >
+                  <label
+                    class="_label_19upo_59"
+                    for="radix-«r9»"
+                  >
+                    Show media in timeline
+                  </label>
+                  <span
+                    class="_message_19upo_85 _help-message_19upo_91 mx_MediaPreviewAccountSetting_RadioHelp"
+                    id="radix-«ra»"
+                  >
+                    A hidden media can always be shown by tapping on it
+                  </span>
+                  <div
+                    class="_inline-field_19upo_32 mx_MediaPreviewAccountSetting_Radio"
+                  >
+                    <div
+                      class="_inline-field-control_19upo_44"
+                    >
+                      <div
+                        class="_container_1e0uz_10"
+                      >
+                        <input
+                          class="_input_1e0uz_18"
+                          id="mx_media_previews_off"
+                          type="radio"
+                        />
+                        <div
+                          class="_ui_1e0uz_19"
+                        />
+                      </div>
+                    </div>
+                    <div
+                      class="_inline-field-body_19upo_38"
+                    >
+                      <label
+                        class="_label_19upo_59"
+                        for="mx_media_previews_off"
+                      >
+                        Always hide
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field_19upo_32 mx_MediaPreviewAccountSetting_Radio"
+                  >
+                    <div
+                      class="_inline-field-control_19upo_44"
+                    >
+                      <div
+                        class="_container_1e0uz_10"
+                      >
+                        <input
+                          class="_input_1e0uz_18"
+                          id="mx_media_previews_private"
+                          type="radio"
+                        />
+                        <div
+                          class="_ui_1e0uz_19"
+                        />
+                      </div>
+                    </div>
+                    <div
+                      class="_inline-field-body_19upo_38"
+                    >
+                      <label
+                        class="_label_19upo_59"
+                        for="mx_media_previews_private"
+                      >
+                        In private rooms
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field_19upo_32 mx_MediaPreviewAccountSetting_Radio"
+                  >
+                    <div
+                      class="_inline-field-control_19upo_44"
+                    >
+                      <div
+                        class="_container_1e0uz_10"
+                      >
+                        <input
+                          checked=""
+                          class="_input_1e0uz_18"
+                          id="mx_media_previews_on"
+                          type="radio"
+                        />
+                        <div
+                          class="_ui_1e0uz_19"
+                        />
+                      </div>
+                    </div>
+                    <div
+                      class="_inline-field-body_19upo_38"
+                    >
+                      <label
+                        class="_label_19upo_59"
+                        for="mx_media_previews_on"
+                      >
+                        Always show
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="_separator_7ckbw_8"
+              data-kind="primary"
+              data-orientation="horizontal"
+              role="separator"
+            />
+          </div>
          <div
            class="mx_SettingsSubsection"
          >
@@ -1217,7 +1325,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
              >
                <label
                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_FLEpLCb0jpp6"
+                  for="mx_SettingsFlag_dJJz3lHUv9XX"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -1230,7 +1338,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Show NSFW content"
                  class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_FLEpLCb0jpp6"
+                  id="mx_SettingsFlag_dJJz3lHUv9XX"
                  role="switch"
                  tabindex="0"
                >
@@ -1261,7 +1369,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
              >
                <label
                  class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_NQFWldEwbV3q"
+                  for="mx_SettingsFlag_SBSSOZDRlzlA"
                >
                  <span
                    class="mx_SettingsFlag_labelText"
@@ -1274,7 +1382,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                  aria-disabled="true"
                  aria-label="Prompt before sending invites to potentially invalid matrix IDs"
                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-                  id="mx_SettingsFlag_NQFWldEwbV3q"
+                  id="mx_SettingsFlag_SBSSOZDRlzlA"
                  role="switch"
                  tabindex="0"
                >
--- a/test/unit-tests/hooks/useMediaVisible-test.tsx
+++ b/test/unit-tests/hooks/useMediaVisible-test.tsx
@@ -6,48 +6,74 @@ Please see LICENSE files in the repository root for full details.
 */

 import { act, renderHook, waitFor } from "jest-matrix-react";
+import { JoinRule, type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";

 import { useMediaVisible } from "../../../src/hooks/useMediaVisible";
+import { createTestClient, mkStubRoom, withClientContextRenderOptions } from "../../test-utils";
+import { type MediaPreviewConfig, MediaPreviewValue } from "../../../src/@types/media_preview";
+import MediaPreviewConfigController from "../../../src/settings/controllers/MediaPreviewConfigController";
 import SettingsStore from "../../../src/settings/SettingsStore";
-import { SettingLevel } from "../../../src/settings/SettingLevel";

 const EVENT_ID = "$fibble:example.org";
-
-function render() {
-    return renderHook(() => useMediaVisible(EVENT_ID));
-}
+const ROOM_ID = "!foobar:example.org";

 describe("useMediaVisible", () => {
-    afterEach(() => {
-        // Using act here as otherwise React warns about state updates not being wrapped.
-        act(() => {
-            SettingsStore.setValue(
-                "showMediaEventIds",
-                null,
-                SettingLevel.DEVICE,
-                SettingsStore.getDefaultValue("showMediaEventIds"),
-            );
-            SettingsStore.setValue(
-                "showImages",
-                null,
-                SettingLevel.DEVICE,
-                SettingsStore.getDefaultValue("showImages"),
-            );
+    let matrixClient: MatrixClient;
+    let room: Room;
+    const mediaPreviewConfig: MediaPreviewConfig = MediaPreviewConfigController.default;
+
+    function render() {
+        return renderHook(() => useMediaVisible(EVENT_ID, ROOM_ID), withClientContextRenderOptions(matrixClient));
+    }
+    beforeEach(() => {
+        matrixClient = createTestClient();
+        room = mkStubRoom(ROOM_ID, undefined, matrixClient);
+        matrixClient.getRoom = jest.fn().mockReturnValue(room);
+        const origFn = SettingsStore.getValue;
+        jest.spyOn(SettingsStore, "getValue").mockImplementation((setting, ...args) => {
+            if (setting === "mediaPreviewConfig") {
+                return mediaPreviewConfig;
+            }
+            return origFn(setting, ...args);
        });
    });

-    it("should display images by default", async () => {
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("should display media by default", async () => {
        const { result } = render();
        expect(result.current[0]).toEqual(true);
    });

-    it("should hide images when the default is changed", async () => {
-        SettingsStore.setValue("showImages", null, SettingLevel.DEVICE, false);
+    it("should hide media when media previews are Off", async () => {
+        mediaPreviewConfig.media_previews = MediaPreviewValue.Off;
        const { result } = render();
        expect(result.current[0]).toEqual(false);
    });

-    it("should hide images after function is called", async () => {
+    it.each([[JoinRule.Invite], [JoinRule.Knock], [JoinRule.Restricted]])(
+        "should display media when media previews are Private and the join rule is %s",
+        async (rule) => {
+            mediaPreviewConfig.media_previews = MediaPreviewValue.Private;
+            room.currentState.getJoinRule = jest.fn().mockReturnValue(rule);
+            const { result } = render();
+            expect(result.current[0]).toEqual(true);
+        },
+    );
+
+    it.each([[JoinRule.Public], ["anything_else"]])(
+        "should hide media when media previews are Private and the join rule is %s",
+        async (rule) => {
+            mediaPreviewConfig.media_previews = MediaPreviewValue.Private;
+            room.currentState.getJoinRule = jest.fn().mockReturnValue(rule);
+            const { result } = render();
+            expect(result.current[0]).toEqual(false);
+        },
+    );
+
+    it("should hide media after function is called", async () => {
        const { result } = render();
        expect(result.current[0]).toEqual(true);
        act(() => {
@@ -57,8 +83,8 @@ describe("useMediaVisible", () => {
            expect(result.current[0]).toEqual(false);
        });
    });
-    it("should show images after function is called", async () => {
-        SettingsStore.setValue("showImages", null, SettingLevel.DEVICE, false);
+    it("should show media after function is called", async () => {
+        mediaPreviewConfig.media_previews = MediaPreviewValue.Off;
        const { result } = render();
        expect(result.current[0]).toEqual(false);
        act(() => {
--- a/test/unit-tests/settings/controllers/MediaPreviewConfigController-test.ts
+++ b/test/unit-tests/settings/controllers/MediaPreviewConfigController-test.ts
@@ -0,0 +1,164 @@
+/*
+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 { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController";
+import MediaPreviewConfigController from "../../../../src/settings/controllers/MediaPreviewConfigController";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+import { getMockClientWithEventEmitter, mockClientMethodsServer } from "../../../test-utils";
+import { MEDIA_PREVIEW_ACCOUNT_DATA_TYPE, MediaPreviewValue } from "../../../../src/@types/media_preview";
+
+describe("MediaPreviewConfigController", () => {
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    const ROOM_ID = "!room:example.org";
+
+    it("gets the default settings when none are specified.", () => {
+        const controller = new MediaPreviewConfigController();
+
+        MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
+            ...mockClientMethodsServer(),
+            getAccountData: jest.fn().mockReturnValue(null),
+        });
+
+        const value = controller.getValueOverride(SettingLevel.ACCOUNT, null);
+        expect(value).toEqual(MediaPreviewConfigController.default);
+    });
+
+    it("gets the default settings when the setting is empty.", () => {
+        const controller = new MediaPreviewConfigController();
+
+        MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
+            ...mockClientMethodsServer(),
+            getAccountData: jest
+                .fn()
+                .mockReturnValue(new MatrixEvent({ type: MEDIA_PREVIEW_ACCOUNT_DATA_TYPE, content: {} })),
+        });
+
+        const value = controller.getValueOverride(SettingLevel.ACCOUNT, null);
+        expect(value).toEqual(MediaPreviewConfigController.default);
+    });
+
+    it.each([["media_previews"], ["invite_avatars"]])("gets the correct value for %s at the global level", (key) => {
+        const controller = new MediaPreviewConfigController();
+
+        MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
+            ...mockClientMethodsServer(),
+            getAccountData: jest.fn().mockReturnValue(
+                new MatrixEvent({
+                    type: MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
+                    content: {
+                        [key]: MediaPreviewValue.Off,
+                    },
+                }),
+            ),
+            getRoom: jest.fn().mockReturnValue({
+                getAccountData: jest.fn().mockReturnValue(null),
+            }),
+        });
+
+        const globalValue = controller.getValueOverride(SettingLevel.ACCOUNT, null);
+        expect(globalValue[key]).toEqual(MediaPreviewValue.Off);
+
+        // Should follow the global value.
+        const roomValue = controller.getValueOverride(SettingLevel.ROOM_ACCOUNT, ROOM_ID);
+        expect(roomValue[key]).toEqual(MediaPreviewValue.Off);
+    });
+
+    it.each([["media_previews"], ["invite_avatars"]])("gets the correct value for %s at the room level", (key) => {
+        const controller = new MediaPreviewConfigController();
+
+        MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
+            ...mockClientMethodsServer(),
+            getAccountData: jest.fn().mockReturnValue(null),
+            getRoom: jest.fn().mockReturnValue({
+                getAccountData: jest.fn().mockReturnValue(
+                    new MatrixEvent({
+                        type: MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
+                        content: {
+                            [key]: MediaPreviewValue.Off,
+                        },
+                    }),
+                ),
+            }),
+        });
+
+        const globalValue = controller.getValueOverride(SettingLevel.ACCOUNT, null);
+        expect(globalValue[key]).toEqual(MediaPreviewValue.On);
+
+        // Should follow the global value.
+        const roomValue = controller.getValueOverride(SettingLevel.ROOM_ACCOUNT, ROOM_ID);
+        expect(roomValue[key]).toEqual(MediaPreviewValue.Off);
+    });
+
+    it.each([["media_previews"], ["invite_avatars"]])(
+        "uses defaults when an invalid value is set on the global level",
+        (key) => {
+            const controller = new MediaPreviewConfigController();
+
+            MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
+                ...mockClientMethodsServer(),
+                getAccountData: jest.fn().mockReturnValue(
+                    new MatrixEvent({
+                        type: MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
+                        content: {
+                            [key]: "bibble",
+                        },
+                    }),
+                ),
+                getRoom: jest.fn().mockReturnValue({
+                    getAccountData: jest.fn().mockReturnValue(null),
+                }),
+            });
+
+            const globalValue = controller.getValueOverride(SettingLevel.ACCOUNT, null);
+            expect(globalValue[key]).toEqual(MediaPreviewValue.On);
+
+            // Should follow the global value.
+            const roomValue = controller.getValueOverride(SettingLevel.ROOM_ACCOUNT, ROOM_ID);
+            expect(roomValue[key]).toEqual(MediaPreviewValue.On);
+        },
+    );
+    it.each([["media_previews"], ["invite_avatars"]])(
+        "uses global value when an invalid value is set on the room level",
+        (key) => {
+            const controller = new MediaPreviewConfigController();
+
+            MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
+                ...mockClientMethodsServer(),
+                getAccountData: jest.fn().mockReturnValue(
+                    new MatrixEvent({
+                        type: MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
+                        content: {
+                            [key]: MediaPreviewValue.Off,
+                        },
+                    }),
+                ),
+                getRoom: jest.fn().mockReturnValue({
+                    getAccountData: jest.fn().mockReturnValue(
+                        new MatrixEvent({
+                            type: MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
+                            content: {
+                                [key]: "bibble",
+                            },
+                        }),
+                    ),
+                }),
+            });
+
+            const globalValue = controller.getValueOverride(SettingLevel.ACCOUNT, null);
+            expect(globalValue[key]).toEqual(MediaPreviewValue.Off);
+
+            // Should follow the global value.
+            const roomValue = controller.getValueOverride(SettingLevel.ROOM_ACCOUNT, ROOM_ID);
+            expect(roomValue[key]).toEqual(MediaPreviewValue.Off);
+        },
+    );
+});