[create-pull-request] automated change

* Mask mxid from screenshot

* s/hot/not/

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Hide the mxid entirely

* Add new snapshot

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

.github/workflows/docker.yaml

@@ -132,7 +132,7 @@ jobs:
                   cosign sign --yes ${images}
 
             - name: Update repo description
-              uses: peter-evans/dockerhub-description@0505d8b04853a30189aee66f5bb7fd1511bbac71 # v4
+              uses: peter-evans/dockerhub-description@432a30c9e07499fd01da9f8a49f0faf9e0ca5b77 # v4
               if: github.event_name != 'pull_request'
               continue-on-error: true
               with:

.github/workflows/release_prepare.yml

@@ -100,7 +100,7 @@ jobs:
                   repo: matrix-org/matrix-js-sdk
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
-                  check-name: draft
+                  check-name: "draft / draft"
                   allowed-conclusions: success
 
             - name: Wait for element-web draft
@@ -111,7 +111,7 @@ jobs:
                   repo: element-hq/element-web
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
-                  check-name: draft
+                  check-name: "draft / draft"
                   allowed-conclusions: success
 
             - name: Wait for element-desktop draft
@@ -122,5 +122,5 @@ jobs:
                   repo: element-hq/element-desktop
                   repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   wait-interval: 10
-                  check-name: draft
+                  check-name: "draft / draft"
                   allowed-conclusions: success

.github/workflows/tests.yml

@@ -104,7 +104,7 @@ jobs:
 
             - name: Skip SonarCloud in merge queue
               if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: guibranco/github-status-action-v2@9b1d102b3c32583174557f58c53e3b09d43d1b1d
+              uses: guibranco/github-status-action-v2@5f2b01ce1394109f70954ae6b69ef41cf7928e63
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: success

Dockerfile

@@ -1,4 +1,4 @@
-# syntax=docker.io/docker/dockerfile:1.14-labs
+# syntax=docker.io/docker/dockerfile:1.15-labs
 
 # Builder
 FROM --platform=$BUILDPLATFORM node:22-bullseye AS builder

package.json

@@ -75,7 +75,7 @@
         "oidc-client-ts": "3.2.0",
         "jwt-decode": "4.0.0",
         "caniuse-lite": "1.0.30001707",
-        "testcontainers": "10.23.0",
+        "testcontainers": "10.24.2",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
@@ -186,7 +186,7 @@
         "@playwright/test": "^1.50.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
         "@sentry/webpack-plugin": "^3.0.0",
-        "@stylistic/eslint-plugin": "^3.0.0",
+        "@stylistic/eslint-plugin": "^4.0.0",
         "@svgr/webpack": "^8.0.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.8",
@@ -246,7 +246,7 @@
         "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-unicorn": "^56.0.0",
-        "express": "^4.18.2",
+        "express": "^5.0.0",
         "fake-indexeddb": "^6.0.0",
         "fetch-mock": "9.11.0",
         "fetch-mock-jest": "^1.5.1",
@@ -292,7 +292,7 @@
         "terser-webpack-plugin": "^5.3.9",
         "testcontainers": "^10.20.0",
         "ts-node": "^10.9.1",
-        "typescript": "5.8.2",
+        "typescript": "5.8.3",
         "util": "^0.12.5",
         "web-streams-polyfill": "^4.0.0",
         "webpack": "^5.89.0",

playwright/e2e/room/invites.spec.ts

@@ -19,7 +19,14 @@ test.describe("Invites", () => {
         const roomId = await bot.createRoom({ is_direct: true });
         await bot.inviteUser(roomId, user.userId);
         await app.viewRoomByName("Bob");
-        await expect(page.locator(".mx_RoomView")).toMatchScreenshot("Invites_room_view.png");
+        await expect(page.locator(".mx_RoomView")).toMatchScreenshot("Invites_room_view.png", {
+            // Hide the mxid, which is not stable.
+            css: `
+                .mx_RoomPreviewBar_inviter_mxid {
+                    display: none !important;
+                }
+            `,
+        });
     });
 
     test("should be able to decline an invite", async ({ page, homeserver, user, bot, app }) => {

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

@@ -1,122 +0,0 @@
-/*
-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();
-    });
-});

playwright/testcontainers/synapse.ts

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";
 
-const TAG = "develop@sha256:66955f34a593cfc3b6e77b8d5510c60c6094f5bade8a17d2feaefbb8662ccf09";
+const TAG = "develop@sha256:be7883f4021e24d71bdb8fe744ae6758a5fd15b5491dad97236b29283e3e6705";
 
 /**
  * SynapseContainer which freezes the docker digest to stabilise tests,

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

@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 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,7 +14,6 @@ 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" {
@@ -88,8 +87,6 @@ declare module "matrix-js-sdk/src/types" {
         "m.accepted_terms": {
             accepted: string[];
         };
-
-        "io.element.msc4278.media_preview_config": MediaPreviewConfig;
     }
 
     export interface AudioContent {

src/@types/media_preview.ts

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

src/HtmlUtils.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 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,10 +294,6 @@ 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 {
@@ -306,16 +302,6 @@ 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.transformTags = {
-            ...sanitizeParams.transformTags,
-            img: (tagName) => {
-                return { tagName, attribs: {} };
-            },
-        };
-    }
-
     try {
         const isFormattedBody =
             content.format === "org.matrix.custom.html" && typeof content.formatted_body === "string";

src/Linkify.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 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,6 +12,7 @@ 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";
@@ -46,7 +47,10 @@ 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.
-        if (!src) {
+        // 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")) {
             return { tagName, attribs: {} };
         }
 
@@ -74,6 +78,7 @@ export const transformTags: NonNullable<IOptions["transformTags"]> = {
         if (requestedHeight) {
             attribs.style += "height: 100%;";
         }
+
         attribs.src = mediaFromMxc(src).getThumbnailOfSourceHttp(width, height)!;
         return { tagName, attribs };
     },

src/components/viewmodels/avatars/RoomAvatarViewModel.tsx

@@ -5,32 +5,11 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import {
-    EventType,
-    JoinRule,
-    type MatrixEvent,
-    type Room,
-    RoomEvent,
-    type User,
-    UserEvent,
-} from "matrix-js-sdk/src/matrix";
+import { EventType, JoinRule, type MatrixEvent, type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
 import { useEffect, useState } from "react";
 
 import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
-import DMRoomMap from "../../../utils/DMRoomMap";
-import { getJoinedNonFunctionalMembers } from "../../../utils/room/getJoinedNonFunctionalMembers";
-import { BUSY_PRESENCE_NAME } from "../../views/rooms/PresenceLabel";
-import { isPresenceEnabled } from "../../../utils/presence";
-
-/**
- * The presence of a user in a DM room.
- * - "online": The user is online.
- * - "offline": The user is offline.
- * - "busy": The user is busy.
- * - "unavailable": the presence is unavailable.
- * - null: the user is not in a DM room or presence is not enabled.
- */
-export type Presence = "online" | "offline" | "busy" | "unavailable" | null;
+import { useDmMember, usePresence, type Presence } from "../../views/avatars/WithPresenceIndicator";
 
 export interface RoomAvatarViewState {
     /**
@@ -50,7 +29,7 @@ export interface RoomAvatarViewState {
      * The presence of the user in the DM room.
      * If null, the user is not in a DM room or presence is not enabled.
      */
-    presence: Presence;
+    presence: Presence | null;
 }
 
 /**
@@ -59,7 +38,8 @@ export interface RoomAvatarViewState {
  */
 export function useRoomAvatarViewModel(room: Room): RoomAvatarViewState {
     const isVideoRoom = room.isElementVideoRoom() || room.isCallRoom();
-    const presence = useDMPresence(room);
+    const roomMember = useDmMember(room);
+    const presence = usePresence(room, roomMember);
     const isPublic = useIsPublic(room);
 
     const hasDecoration = isPublic || isVideoRoom || presence !== null;
@@ -97,48 +77,3 @@ function useIsPublic(room: Room): boolean {
 function isRoomPublic(room: Room): boolean {
     return room.getJoinRule() === JoinRule.Public;
 }
-
-/**
- * Hook listening to the presence of the DM user.
- * @param room
- */
-function useDMPresence(room: Room): Presence {
-    const dmUser = getDMUser(room);
-    const [presence, setPresence] = useState<Presence>(getPresence(dmUser));
-    useTypedEventEmitter(dmUser, UserEvent.Presence, () => setPresence(getPresence(dmUser)));
-    useTypedEventEmitter(dmUser, UserEvent.CurrentlyActive, () => setPresence(getPresence(dmUser)));
-
-    return presence;
-}
-
-/**
- * Get the DM user of the room.
- * Return undefined if the room is not a DM room, if we can't find the user or if the presence is not enabled.
- * @param room
- * @returns found user
- */
-function getDMUser(room: Room): User | undefined {
-    const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
-    if (!otherUserId) return;
-    if (getJoinedNonFunctionalMembers(room).length !== 2) return;
-    if (!isPresenceEnabled(room.client)) return;
-
-    return room.client.getUser(otherUserId) || undefined;
-}
-
-/**
- * Get the presence of the DM user.
- * @param dmUser
- */
-function getPresence(dmUser: User | undefined): Presence {
-    if (!dmUser) return null;
-    if (BUSY_PRESENCE_NAME.matches(dmUser.presence)) return "busy";
-
-    const isOnline = dmUser.currentlyActive || dmUser.presence === "online";
-    if (isOnline) return "online";
-
-    if (dmUser.presence === "offline") return "offline";
-    if (dmUser.presence === "unavailable") return "unavailable";
-
-    return null;
-}

src/components/views/avatars/RoomAvatar.tsx

@@ -20,7 +20,6 @@ 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,
@@ -41,8 +40,7 @@ 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("mediaPreviewConfig", room?.roomId).invite_avatars === MediaPreviewValue.On;
+    const showAvatarsOnInvites = useSettingValue("showAvatarsOnInvites", room?.roomId);
 
     const onRoomAvatarClick = useCallback(() => {
         const avatarUrl = Avatar.avatarUrlForRoom(room ?? null);
@@ -65,6 +63,7 @@ const RoomAvatar: React.FC<IProps> = ({ room, viewAvatarOnClick, onClick, oobDat
         // parseInt ignores suffixes.
         const sizeInt = parseInt(size, 10);
         let oobAvatar: string | null = null;
+
         if (oobData?.avatarUrl) {
             oobAvatar = mediaFromMxc(oobData?.avatarUrl).getThumbnailOfSourceHttp(sizeInt, sizeInt, "crop");
         }

src/components/views/avatars/RoomAvatarView.tsx

@@ -15,8 +15,9 @@ import BusyIcon from "@vector-im/compound-design-tokens/assets/web/icons/presenc
 import classNames from "classnames";
 
 import RoomAvatar from "./RoomAvatar";
-import { useRoomAvatarViewModel, type Presence } from "../../viewmodels/avatars/RoomAvatarViewModel";
+import { useRoomAvatarViewModel } from "../../viewmodels/avatars/RoomAvatarViewModel";
 import { _t } from "../../../languageHandler";
+import { Presence } from "./WithPresenceIndicator";
 
 interface RoomAvatarViewProps {
     /**
@@ -83,7 +84,7 @@ type PresenceDecorationProps = {
  */
 function PresenceDecoration({ presence }: PresenceDecorationProps): JSX.Element {
     switch (presence) {
-        case "online":
+        case Presence.Online:
             return (
                 <OnlineOrUnavailableIcon
                     width="8px"
@@ -93,7 +94,7 @@ function PresenceDecoration({ presence }: PresenceDecorationProps): JSX.Element
                     aria-label={_t("presence|online")}
                 />
             );
-        case "unavailable":
+        case Presence.Away:
             return (
                 <OnlineOrUnavailableIcon
                     width="8px"
@@ -103,7 +104,7 @@ function PresenceDecoration({ presence }: PresenceDecorationProps): JSX.Element
                     aria-label={_t("presence|away")}
                 />
             );
-        case "offline":
+        case Presence.Offline:
             return (
                 <OfflineIcon
                     width="8px"
@@ -113,7 +114,7 @@ function PresenceDecoration({ presence }: PresenceDecorationProps): JSX.Element
                     aria-label={_t("presence|offline")}
                 />
             );
-        case "busy":
+        case Presence.Busy:
             return (
                 <BusyIcon
                     width="8px"

src/components/views/avatars/WithPresenceIndicator.tsx

@@ -26,7 +26,7 @@ interface Props {
     children: ReactNode;
 }
 
-enum Presence {
+export enum Presence {
     // Note: the names here are used in CSS class names
     Online = "ONLINE",
     Away = "AWAY",
@@ -86,7 +86,7 @@ function getPresence(member: RoomMember | null): Presence | null {
     return null;
 }
 
-const usePresence = (room: Room, member: RoomMember | null): Presence | null => {
+export const usePresence = (room: Room, member: RoomMember | null): Presence | null => {
     const [presence, setPresence] = useState<Presence | null>(getPresence(member));
     const updatePresence = (): void => {
         setPresence(getPresence(member));

src/components/views/messages/EventContentBody.tsx

@@ -28,7 +28,6 @@ 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
@@ -151,7 +150,6 @@ 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(
@@ -169,9 +167,8 @@ const EventContentBody = memo(
                         disableBigEmoji: isEmote || !enableBigEmoji,
                         // Part of Replies fallback support
                         stripReplyFallback: stripReply,
-                        mediaIsVisible,
                     }),
-                [content, mediaIsVisible, enableBigEmoji, highlights, isEmote, stripReply],
+                [content, enableBigEmoji, highlights, isEmote, stripReply],
             );
 
             if (as === "div") includeDir = true; // force dir="auto" on divs

src/components/views/messages/HideActionButton.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 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(), mxEvent.getRoomId());
+    const [mediaIsVisible, setVisible] = useMediaVisible(mxEvent.getId()!);
 
     if (!mediaIsVisible) {
         return;

src/components/views/messages/MImageBody.tsx

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

src/components/views/messages/MImageReplyBody.tsx

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

src/components/views/messages/MStickerBody.tsx

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

src/components/views/messages/MVideoBody.tsx

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

src/components/views/rooms/LinkPreviewGroup.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 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,7 +17,6 @@ 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;
 
@@ -30,7 +29,6 @@ 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][]>(
@@ -57,13 +55,7 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick }) =
     return (
         <div className="mx_LinkPreviewGroup">
             {showPreviews.map(([link, preview], i) => (
-                <LinkPreviewWidget
-                    mediaVisible={mediaVisible}
-                    key={link}
-                    link={link}
-                    preview={preview}
-                    mxEvent={mxEvent}
-                >
+                <LinkPreviewWidget key={link} link={link} preview={preview} mxEvent={mxEvent}>
                     {i === 0 ? (
                         <AccessibleButton
                             className="mx_LinkPreviewGroup_hide"

src/components/views/rooms/LinkPreviewWidget.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 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,6 +11,7 @@ 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";
@@ -23,7 +24,6 @@ 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 (!this.props.mediaVisible) {
+        if (!SettingsStore.getValue("showImages")) {
             image = null; // Don't render a button to show the image, just hide it outright
         }
         const imageMaxWidth = 100;

src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2025 New Vector Ltd.
+Copyright 2019-2024 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,7 +22,6 @@ 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;
@@ -93,9 +92,6 @@ 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")}>
-                        <MediaPreviewAccountSettings roomId={room.roomId} />
-                    </SettingsSubsection>
                     {leaveSection}
                 </SettingsSection>
             </SettingsTab>

src/components/views/settings/tabs/user/MediaPreviewAccountSettings.tsx

@@ -1,144 +0,0 @@
-/*
-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>
-            {!roomId && (
-                <LabelledToggleSwitch
-                    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>{_t("settings|media_preview|media_preview_description")}</HelpMessage>
-                <InlineField
-                    name="media_preview_off"
-                    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"
-                        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"
-                    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>
-    );
-};

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -32,7 +32,6 @@ 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;
@@ -117,7 +116,7 @@ const SpellCheckSection: React.FC = () => {
 };
 
 export default class PreferencesUserSettingsTab extends React.Component<IProps, IState> {
-    private static ROOM_LIST_SETTINGS: BooleanSettingKey[] = ["breadcrumbs"];
+    private static ROOM_LIST_SETTINGS: BooleanSettingKey[] = ["breadcrumbs", "showAvatarsOnInvites"];
 
     private static SPACES_SETTINGS: BooleanSettingKey[] = ["Spaces.allRoomsInHome"];
 
@@ -147,6 +146,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         "urlPreviewsEnabled",
         "autoplayGifs",
         "autoplayVideo",
+        "showImages",
     ];
 
     private static TIMELINE_SETTINGS: BooleanSettingKey[] = [
@@ -335,10 +335,6 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                         {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("common|moderation_and_safety")}>
-                        <MediaPreviewAccountSettings />
-                    </SettingsSubsection>
-
                     <SettingsSubsection heading={_t("settings|preferences|room_directory_heading")}>
                         {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
                     </SettingsSubsection>

src/hooks/useCall.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo, useEffect } from "react";
 
 import type { RoomMember } from "matrix-js-sdk/src/matrix";
 import { type Call, ConnectionState, CallEvent } from "../models/Call";
@@ -20,6 +20,12 @@ export const useCall = (roomId: string): Call | null => {
     useEventEmitter(CallStore.instance, CallStoreEvent.Call, (call: Call | null, forRoomId: string) => {
         if (forRoomId === roomId) setCall(call);
     });
+
+    // Reset the value when the roomId changes
+    useEffect(() => {
+        setCall(CallStore.instance.getCall(roomId));
+    }, [roomId]);
+
     return call;
 };
 

src/hooks/useMediaVisible.ts

@@ -6,52 +6,30 @@ 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, 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());
+export function useMediaVisible(eventId: string): [boolean, (visible: boolean) => void] {
+    const defaultShowImages = useSettingValue("showImages", SettingLevel.DEVICE);
+    const eventVisibility = useSettingValue("showMediaEventIds", SettingLevel.DEVICE);
     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.
-    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];
-    }
+    const imgIsVisible = eventVisibility[eventId] ?? defaultShowImages;
+    return [imgIsVisible, setMediaVisible];
 }

src/i18n/strings/en_EN.json

@@ -525,7 +525,6 @@
         "message_timestamp_invalid": "Invalid timestamp",
         "microphone": "Microphone",
         "model": "Model",
-        "moderation_and_safety": "Moderation and safety",
         "modern": "Modern",
         "mute": "Mute",
         "n_members": {
@@ -2669,10 +2668,12 @@
             "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).",
@@ -2731,14 +2732,6 @@
         "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)",

src/settings/Settings.tsx

@@ -10,7 +10,6 @@ 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 {
@@ -46,7 +45,6 @@ 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();
 
@@ -314,6 +312,8 @@ 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,7 +349,6 @@ export interface Settings {
     "Electron.alwaysShowMenuBar": IBaseSetting<boolean>;
     "Electron.showTrayIcon": IBaseSetting<boolean>;
     "Electron.enableHardwareAcceleration": IBaseSetting<boolean>;
-    "mediaPreviewConfig": IBaseSetting<MediaPreviewConfig>;
     "Developer.elementCallUrl": IBaseSetting<string>;
 }
 
@@ -428,11 +427,6 @@ 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,
@@ -1129,6 +1123,16 @@ 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,
@@ -1382,6 +1386,7 @@ export const SETTINGS: Settings = {
         displayName: _td("settings|preferences|enable_hardware_acceleration"),
         default: true,
     },
+
     "Developer.elementCallUrl": {
         supportedLevels: [SettingLevel.DEVICE],
         displayName: _td("devtools|settings|elementCallUrl"),

src/settings/SettingsStore.ts

@@ -38,7 +38,6 @@ 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> = {};
@@ -716,29 +715,6 @@ 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.
      */
@@ -756,12 +732,6 @@ 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;

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 initMatrixClient?(newClient: MatrixClient, oldClient?: MatrixClient): void;
+    protected abstract initMatrixClient(newClient: MatrixClient, oldClient?: MatrixClient): void;
 }

src/settings/controllers/MediaPreviewConfigController.ts

@@ -1,100 +0,0 @@
-/*
-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;
-    }
-}

src/settings/handlers/AccountSettingsHandler.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 Copyright 2017 Travis Ralston
 
@@ -15,7 +15,6 @@ 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";
@@ -69,8 +68,6 @@ 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());
         }
     };
 
@@ -176,7 +173,7 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
         await deferred.promise;
     }
 
-    public async setValue(settingName: string, roomId: string, newValue: any): Promise<void> {
+    public setValue(settingName: string, roomId: string, newValue: any): Promise<void> {
         switch (settingName) {
             // Special case URL previews
             case "urlPreviewsEnabled":
@@ -202,9 +199,7 @@ 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);
         }

src/settings/handlers/RoomAccountSettingsHandler.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 Copyright 2017 Travis Ralston
 
@@ -14,7 +14,6 @@ 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";
@@ -57,8 +56,6 @@ 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());
         }
     };
 
@@ -111,7 +108,7 @@ export default class RoomAccountSettingsHandler extends MatrixClientBackedSettin
         await deferred.promise;
     }
 
-    public async setValue(settingName: string, roomId: string, newValue: any): Promise<void> {
+    public setValue(settingName: string, roomId: string, newValue: any): Promise<void> {
         switch (settingName) {
             // Special case URL previews
             case "urlPreviewsEnabled":
@@ -120,9 +117,7 @@ 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);
         }

test/unit-tests/HtmlUtils-test.tsx

@@ -12,7 +12,6 @@ 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";
 
@@ -232,37 +231,6 @@ 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();
     });

test/unit-tests/__snapshots__/HtmlUtils-test.tsx.snap

@@ -64,30 +64,3 @@ 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>
-`;

test/unit-tests/components/viewmodels/avatars/RoomAvatarViewModel-test.tsx

@@ -5,32 +5,18 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { renderHook, waitFor, act } from "jest-matrix-react";
-import {
-    JoinRule,
-    type MatrixClient,
-    MatrixEvent,
-    type Room,
-    type RoomMember,
-    User,
-    UserEvent,
-} from "matrix-js-sdk/src/matrix";
-import { mocked } from "jest-mock";
+import { renderHook, waitFor } from "jest-matrix-react";
+import { JoinRule, type MatrixClient, type Room, RoomMember, User } from "matrix-js-sdk/src/matrix";
 
 import { useRoomAvatarViewModel } from "../../../../../src/components/viewmodels/avatars/RoomAvatarViewModel";
 import { createTestClient, mkStubRoom } from "../../../../test-utils";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
-import { getJoinedNonFunctionalMembers } from "../../../../../src/utils/room/getJoinedNonFunctionalMembers";
-import { isPresenceEnabled } from "../../../../../src/utils/presence";
+import * as PresenceIndicatorModule from "../../../../../src/components/views/avatars/WithPresenceIndicator";
 
 jest.mock("../../../../../src/utils/room/getJoinedNonFunctionalMembers", () => ({
     getJoinedNonFunctionalMembers: jest.fn().mockReturnValue([]),
 }));
 
-jest.mock("../../../../../src/utils/presence", () => ({
-    isPresenceEnabled: jest.fn().mockReturnValue(false),
-}));
-
 describe("RoomAvatarViewModel", () => {
     let matrixClient: MatrixClient;
     let room: Room;
@@ -41,6 +27,9 @@ describe("RoomAvatarViewModel", () => {
 
         DMRoomMap.makeShared(matrixClient);
         jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(null);
+
+        jest.spyOn(PresenceIndicatorModule, "useDmMember").mockReturnValue(null);
+        jest.spyOn(PresenceIndicatorModule, "usePresence").mockReturnValue(null);
     });
 
     it("should has hasDecoration to false", async () => {
@@ -74,62 +63,14 @@ describe("RoomAvatarViewModel", () => {
         await waitFor(() => expect(vm.current.isPublic).toBe(true));
     });
 
-    describe("presence", () => {
-        let user: User;
+    it("should return presence", async () => {
+        const user = User.createUser("userId", matrixClient);
+        const roomMember = new RoomMember(room.roomId, "userId");
+        roomMember.user = user;
+        jest.spyOn(PresenceIndicatorModule, "useDmMember").mockReturnValue(roomMember);
+        jest.spyOn(PresenceIndicatorModule, "usePresence").mockReturnValue(PresenceIndicatorModule.Presence.Online);
 
-        beforeEach(() => {
-            jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue("userId");
-            mocked(getJoinedNonFunctionalMembers).mockReturnValue([{}, {}] as RoomMember[]);
-            mocked(isPresenceEnabled).mockReturnValue(true);
-
-            user = User.createUser("userId", matrixClient);
-            jest.spyOn(matrixClient, "getUser").mockReturnValue(user);
-        });
-
-        it("should has presence set to null", () => {
-            jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(null);
-
-            const { result: vm } = renderHook(() => useRoomAvatarViewModel(room));
-            expect(vm.current.presence).toBe(null);
-        });
-
-        it("should has online presence", async () => {
-            const { result: vm } = renderHook(() => useRoomAvatarViewModel(room));
-            expect(vm.current.presence).toBe("offline");
-
-            user.presence = "online";
-
-            await act(() => user.emit(UserEvent.Presence, new MatrixEvent(), user));
-            await waitFor(() => expect(vm.current.presence).toBe("online"));
-
-            user.currentlyActive = true;
-            user.presence = "offline";
-
-            await act(() => user.emit(UserEvent.CurrentlyActive, new MatrixEvent(), user));
-            await waitFor(() => expect(vm.current.presence).toBe("online"));
-        });
-
-        it("should has busy presence", async () => {
-            user.presence = "busy";
-            const { result: vm } = renderHook(() => useRoomAvatarViewModel(room));
-            expect(vm.current.presence).toBe("busy");
-        });
-
-        it("should has offline presence", async () => {
-            user.presence = "offline";
-            const { result: vm } = renderHook(() => useRoomAvatarViewModel(room));
-            expect(vm.current.presence).toBe("offline");
-        });
-
-        it("should has unavailable presence", async () => {
-            user.presence = "unavailable";
-            const { result: vm } = renderHook(() => useRoomAvatarViewModel(room));
-            expect(vm.current.presence).toBe("unavailable");
-        });
-
-        it("should has hasDecoration to true", async () => {
-            const { result: vm } = renderHook(() => useRoomAvatarViewModel(room));
-            expect(vm.current.hasDecoration).toBe(true);
-        });
+        const { result: vm } = renderHook(() => useRoomAvatarViewModel(room));
+        expect(vm.current.presence).toBe(PresenceIndicatorModule.Presence.Online);
     });
 });

test/unit-tests/components/views/avatars/RoomAvatar-test.tsx

@@ -17,7 +17,6 @@ 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";
 
@@ -38,18 +37,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", () => {
@@ -75,6 +74,7 @@ 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,9 +93,7 @@ describe("RoomAvatar", () => {
         expect(render(<RoomAvatar room={room} />).container).toMatchSnapshot();
     });
     it("should not render an invite avatar if the user has disabled it", () => {
-        SettingsStore.setValue("mediaPreviewConfig", null, SettingLevel.ACCOUNT, {
-            invite_avatars: MediaPreviewValue.Off,
-        });
+        SettingsStore.setValue("showAvatarsOnInvites", null, SettingLevel.ACCOUNT, false);
         const room = new Room("!room:example.com", client, client.getSafeUserId());
         room.name = "test room";
         room.updateMyMembership("invite");

test/unit-tests/components/views/avatars/RoomAvatarView-test.tsx

@@ -12,11 +12,11 @@ import { mocked } from "jest-mock";
 import { RoomAvatarView } from "../../../../../src/components/views/avatars/RoomAvatarView";
 import { mkStubRoom, stubClient } from "../../../../test-utils";
 import {
-    type Presence,
     type RoomAvatarViewState,
     useRoomAvatarViewModel,
 } from "../../../../../src/components/viewmodels/avatars/RoomAvatarViewModel";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
+import { Presence } from "../../../../../src/components/views/avatars/WithPresenceIndicator";
 
 jest.mock("../../../../../src/components/viewmodels/avatars/RoomAvatarViewModel", () => ({
     useRoomAvatarViewModel: jest.fn(),
@@ -83,10 +83,10 @@ describe("<RoomAvatarView />", () => {
     });
 
     it.each([
-        { presence: "online" as Presence, label: "Online" },
-        { presence: "offline" as Presence, label: "Offline" },
-        { presence: "busy" as Presence, label: "Busy" },
-        { presence: "unavailable" as Presence, label: "Away" },
+        { presence: Presence.Online, label: "Online" },
+        { presence: Presence.Offline, label: "Offline" },
+        { presence: Presence.Busy, label: "Busy" },
+        { presence: Presence.Away, label: "Away" },
     ])("should render the $presence presence", ({ presence, label }) => {
         mocked(useRoomAvatarViewModel).mockReturnValue({
             ...defaultValue,

test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap

@@ -108,7 +108,76 @@ exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<RoomAvatarView /> should render the busy presence 1`] = `
+exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_RoomAvatarView"
+  >
+    <span
+      aria-label="Avatar"
+      class="_avatar_1qbcf_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon mx_RoomAvatarView_RoomAvatar_presence"
+      data-color="1"
+      data-testid="avatar-img"
+      data-type="round"
+      style="--cpd-avatar-size: 32px;"
+    >
+      <img
+        alt=""
+        class="_image_1qbcf_41"
+        data-type="round"
+        height="32px"
+        loading="lazy"
+        referrerpolicy="no-referrer"
+        src="http://this.is.a.url/avatar.url/room.png"
+        width="32px"
+      />
+    </span>
+    <svg
+      aria-label="This room is a video room"
+      class="mx_RoomAvatarView_icon"
+      color="var(--cpd-color-icon-tertiary)"
+      fill="currentColor"
+      height="16px"
+      viewBox="0 0 24 24"
+      width="16px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+      />
+    </svg>
+    <svg
+      aria-label="Away"
+      class="mx_RoomAvatarView_PresenceDecoration"
+      color="var(--cpd-color-icon-quaternary)"
+      fill="currentColor"
+      height="8px"
+      viewBox="0 0 8 8"
+      width="8px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        clip-path="url(#a)"
+      >
+        <path
+          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="a"
+        >
+          <path
+            d="M0 0h8v8H0z"
+          />
+        </clippath>
+      </defs>
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
 <DocumentFragment>
   <div
     class="mx_RoomAvatarView"
@@ -179,7 +248,7 @@ exports[`<RoomAvatarView /> should render the busy presence 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<RoomAvatarView /> should render the offline presence 1`] = `
+exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
 <DocumentFragment>
   <div
     class="mx_RoomAvatarView"
@@ -250,7 +319,7 @@ exports[`<RoomAvatarView /> should render the offline presence 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<RoomAvatarView /> should render the online presence 1`] = `
+exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
 <DocumentFragment>
   <div
     class="mx_RoomAvatarView"
@@ -318,72 +387,3 @@ exports[`<RoomAvatarView /> should render the online presence 1`] = `
   </div>
 </DocumentFragment>
 `;
-
-exports[`<RoomAvatarView /> should render the unavailable presence 1`] = `
-<DocumentFragment>
-  <div
-    class="mx_RoomAvatarView"
-  >
-    <span
-      aria-label="Avatar"
-      class="_avatar_1qbcf_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon mx_RoomAvatarView_RoomAvatar_presence"
-      data-color="1"
-      data-testid="avatar-img"
-      data-type="round"
-      style="--cpd-avatar-size: 32px;"
-    >
-      <img
-        alt=""
-        class="_image_1qbcf_41"
-        data-type="round"
-        height="32px"
-        loading="lazy"
-        referrerpolicy="no-referrer"
-        src="http://this.is.a.url/avatar.url/room.png"
-        width="32px"
-      />
-    </span>
-    <svg
-      aria-label="This room is a video room"
-      class="mx_RoomAvatarView_icon"
-      color="var(--cpd-color-icon-tertiary)"
-      fill="currentColor"
-      height="16px"
-      viewBox="0 0 24 24"
-      width="16px"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
-      />
-    </svg>
-    <svg
-      aria-label="Away"
-      class="mx_RoomAvatarView_PresenceDecoration"
-      color="var(--cpd-color-icon-quaternary)"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        clip-path="url(#a)"
-      >
-        <path
-          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="a"
-        >
-          <path
-            d="M0 0h8v8H0z"
-          />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
-</DocumentFragment>
-`;

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, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { MatrixEvent } 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(mediaPreviews: MediaPreviewValue, showMediaEventIds: Settings["showMediaEventIds"]["default"]) {
+function mockSetting(
+    showImages: Settings["showImages"]["default"],
+    showMediaEventIds: Settings["showMediaEventIds"]["default"],
+) {
     jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName) => {
-        if (settingName === "mediaPreviewConfig") {
-            return { media_previews: mediaPreviews, invite_avatars: MediaPreviewValue.Off };
+        if (settingName === "showImages") {
+            return showImages;
         } else if (settingName === "showMediaEventIds") {
             return showMediaEventIds;
         }
@@ -29,10 +29,8 @@ function mockSetting(mediaPreviews: MediaPreviewValue, showMediaEventIds: Settin
     });
 }
 
-const EVENT_ID = "$foo:bar";
-
 const event = new MatrixEvent({
-    event_id: EVENT_ID,
+    event_id: "$foo:bar",
     room_id: "!room:id",
     sender: "@user:id",
     type: "m.room.message",
@@ -44,38 +42,32 @@ 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(MediaPreviewValue.Off, { [EVENT_ID]: true });
-        render(<HideActionButton mxEvent={event} />, withClientContextRenderOptions(cli));
+        mockSetting(false, { "$foo:bar": true });
+        render(<HideActionButton mxEvent={event} />);
         expect(screen.getByRole("button")).toBeVisible();
     });
-    it("should show button when event is visible by mediaPreviewConfig setting", async () => {
-        mockSetting(MediaPreviewValue.On, {});
-        render(<HideActionButton mxEvent={event} />, withClientContextRenderOptions(cli));
+    it("should show button when event is visible by showImages setting", async () => {
+        mockSetting(true, {});
+        render(<HideActionButton mxEvent={event} />);
         expect(screen.getByRole("button")).toBeVisible();
     });
     it("should hide button when event is hidden by showMediaEventIds setting", async () => {
-        mockSetting(MediaPreviewValue.Off, { [EVENT_ID]: false });
-        render(<HideActionButton mxEvent={event} />, withClientContextRenderOptions(cli));
+        jest.spyOn(SettingsStore, "getValue").mockReturnValue({ "$foo:bar": false });
+        render(<HideActionButton mxEvent={event} />);
         expect(screen.queryByRole("button")).toBeNull();
     });
     it("should hide button when event is hidden by showImages setting", async () => {
-        mockSetting(MediaPreviewValue.Off, {});
-        render(<HideActionButton mxEvent={event} />, withClientContextRenderOptions(cli));
+        mockSetting(false, {});
+        render(<HideActionButton mxEvent={event} />);
         expect(screen.queryByRole("button")).toBeNull();
     });
     it("should store event as hidden when clicked", async () => {
         const spy = jest.spyOn(SettingsStore, "setValue");
-        render(<HideActionButton mxEvent={event} />, withClientContextRenderOptions(cli));
+        render(<HideActionButton mxEvent={event} />);
         fireEvent.click(screen.getByRole("button"));
         expect(spy).toHaveBeenCalledWith("showMediaEventIds", null, SettingLevel.DEVICE, { "$foo:bar": false });
         // Button should be hidden after the setting is set.

test/unit-tests/components/views/messages/MImageBody-test.tsx

@@ -1,12 +1,12 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 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 from "react";
+import React, { act } 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,11 +24,10 @@ import {
     mockClientMethodsDevice,
     mockClientMethodsServer,
     mockClientMethodsUser,
-    withClientContextRenderOptions,
 } from "../../../../test-utils";
 import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
-import { MediaPreviewValue } from "../../../../../src/@types/media_preview";
+import { SettingLevel } from "../../../../../src/settings/SettingLevel";
 
 jest.mock("matrix-encrypt-attachment", () => ({
     decryptAttachment: jest.fn(),
@@ -43,7 +42,6 @@ describe("<MImageBody/>", () => {
         ...mockClientMethodsDevice(deviceId),
         ...mockClientMethodsCrypto(),
         getRooms: jest.fn().mockReturnValue([]),
-        getRoom: jest.fn(),
         getIgnoredUsers: jest.fn(),
         getVersions: jest.fn().mockResolvedValue({
             unstable_features: {
@@ -87,7 +85,6 @@ describe("<MImageBody/>", () => {
     });
 
     afterEach(() => {
-        SettingsStore.reset();
         mocked(encrypt.decryptAttachment).mockReset();
     });
 
@@ -100,7 +97,6 @@ describe("<MImageBody/>", () => {
                 mxEvent={encryptedMediaEvent}
                 mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
             />,
-            withClientContextRenderOptions(cli),
         );
 
         // thumbnail with dimensions present
@@ -116,7 +112,6 @@ describe("<MImageBody/>", () => {
                 mxEvent={encryptedMediaEvent}
                 mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
             />,
-            withClientContextRenderOptions(cli),
         );
 
         expect(fetchMock).toHaveBeenCalledWith(url);
@@ -134,7 +129,6 @@ describe("<MImageBody/>", () => {
                 mxEvent={encryptedMediaEvent}
                 mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
             />,
-            withClientContextRenderOptions(cli),
         );
 
         await screen.findByText("Error decrypting image");
@@ -142,12 +136,25 @@ describe("<MImageBody/>", () => {
 
     describe("with image previews/thumbnails disabled", () => {
         beforeEach(() => {
-            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);
+            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"),
+                );
             });
         });
 
@@ -160,7 +167,6 @@ describe("<MImageBody/>", () => {
                     mxEvent={encryptedMediaEvent}
                     mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
                 />,
-                withClientContextRenderOptions(cli),
             );
 
             expect(screen.getByText("Show image")).toBeInTheDocument();
@@ -177,7 +183,6 @@ describe("<MImageBody/>", () => {
                     mxEvent={encryptedMediaEvent}
                     mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
                 />,
-                withClientContextRenderOptions(cli),
             );
 
             expect(screen.getByText("Show image")).toBeInTheDocument();
@@ -215,7 +220,6 @@ describe("<MImageBody/>", () => {
 
         const { container } = render(
             <MImageBody {...props} mxEvent={event} mediaEventHelper={new MediaEventHelper(event)} />,
-            withClientContextRenderOptions(cli),
         );
 
         const img = container.querySelector(".mx_MImageBody_thumbnail")!;
@@ -269,7 +273,6 @@ describe("<MImageBody/>", () => {
 
         const { container } = render(
             <MImageBody {...props} mxEvent={event} mediaEventHelper={new MediaEventHelper(event)} />,
-            withClientContextRenderOptions(cli),
         );
 
         // Wait for spinners to go away
@@ -295,7 +298,6 @@ describe("<MImageBody/>", () => {
 
         const { container } = render(
             <MImageBody {...props} mxEvent={event} mediaEventHelper={new MediaEventHelper(event)} />,
-            withClientContextRenderOptions(cli),
         );
 
         const img = container.querySelector(".mx_MImageBody_thumbnail")!;

test/unit-tests/components/views/messages/MStickerBody-test.tsx

@@ -19,7 +19,6 @@ import {
     mockClientMethodsDevice,
     mockClientMethodsServer,
     mockClientMethodsUser,
-    withClientContextRenderOptions,
 } from "../../../../test-utils";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import MStickerBody from "../../../../../src/components/views/messages/MStickerBody";
@@ -32,7 +31,6 @@ describe("<MStickerBody/>", () => {
         ...mockClientMethodsServer(),
         ...mockClientMethodsDevice(deviceId),
         ...mockClientMethodsCrypto(),
-        getRoom: jest.fn(),
         getRooms: jest.fn().mockReturnValue([]),
         getIgnoredUsers: jest.fn(),
         getVersions: jest.fn().mockResolvedValue({
@@ -78,7 +76,7 @@ describe("<MStickerBody/>", () => {
     it("should show a tooltip on hover", async () => {
         fetchMock.getOnce(url, { status: 200 });
 
-        render(<MStickerBody {...props} mxEvent={mediaEvent} />, withClientContextRenderOptions(cli));
+        render(<MStickerBody {...props} mxEvent={mediaEvent} />);
 
         expect(screen.queryByRole("tooltip")).toBeNull();
         await userEvent.hover(screen.getByRole("img"));

test/unit-tests/components/views/messages/MVideoBody-test.tsx

@@ -1,16 +1,15 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 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 from "react";
-import { EventType, getHttpUriForMxc, type IContent, type MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import React, { act } from "react";
+import { EventType, getHttpUriForMxc, type IContent, 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";
@@ -21,12 +20,11 @@ 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", () => ({
@@ -38,15 +36,13 @@ describe("MVideoBody", () => {
     const deviceId = "DEADB33F";
 
     const thumbUrl = "https://server/_matrix/media/v3/download/server/encrypted-poster";
-    let cli: MockedObject<MatrixClient>;
 
     beforeEach(() => {
-        cli = getMockClientWithEventEmitter({
+        const cli = getMockClientWithEventEmitter({
             ...mockClientMethodsUser(userId),
             ...mockClientMethodsServer(),
             ...mockClientMethodsDevice(deviceId),
             ...mockClientMethodsCrypto(),
-            getRoom: jest.fn(),
             getRooms: jest.fn().mockReturnValue([]),
             getIgnoredUsers: jest.fn(),
             getVersions: jest.fn().mockResolvedValue({
@@ -69,7 +65,6 @@ describe("MVideoBody", () => {
         room_id: "!room:server",
         sender: userId,
         type: EventType.RoomMessage,
-        event_id: "$foo:bar",
         content: {
             body: "alt for a test video",
             info: {
@@ -98,25 +93,32 @@ 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(() => {
-            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);
+            act(() => {
+                SettingsStore.setValue("showImages", null, SettingLevel.DEVICE, false);
             });
         });
 
         afterEach(() => {
-            SettingsStore.reset();
-            jest.restoreAllMocks();
+            act(() => {
+                SettingsStore.setValue(
+                    "showImages",
+                    null,
+                    SettingLevel.DEVICE,
+                    SettingsStore.getDefaultValue("showImages"),
+                );
+                SettingsStore.setValue(
+                    "showMediaEventIds",
+                    null,
+                    SettingLevel.DEVICE,
+                    SettingsStore.getDefaultValue("showMediaEventIds"),
+                );
+            });
         });
 
         it("should not download video", async () => {
@@ -127,7 +129,6 @@ describe("MVideoBody", () => {
                     mxEvent={encryptedMediaEvent}
                     mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
                 />,
-                withClientContextRenderOptions(cli),
             );
 
             expect(screen.getByText("Show video")).toBeInTheDocument();
@@ -143,7 +144,6 @@ describe("MVideoBody", () => {
                     mxEvent={encryptedMediaEvent}
                     mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
                 />,
-                withClientContextRenderOptions(cli),
             );
 
             const placeholderButton = screen.getByRole("button", { name: "Show video" });
@@ -191,7 +191,6 @@ function makeMVideoBody(w: number, h: number): RenderResult {
 
     const mockClient = getMockClientWithEventEmitter({
         mxcUrlToHttp: jest.fn(),
-        getRoom: jest.fn(),
     });
 
     return render(

test/unit-tests/components/views/rooms/RoomPreviewCard-test.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024, 2025 New Vector Ltd.
+Copyright 2024 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,13 +44,9 @@ describe("RoomPreviewCard", () => {
         client.reEmitter.reEmit(room, [RoomStateEvent.Events]);
 
         enabledFeatures = [];
-        const origFn = SettingsStore.getValue;
-        jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName): any => {
-            if (enabledFeatures.includes(settingName)) {
-                return true;
-            }
-            return origFn(settingName);
-        });
+        jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName): any =>
+            enabledFeatures.includes(settingName) ? true : undefined,
+        );
     });
 
     afterEach(() => {

test/unit-tests/components/views/settings/tabs/user/MediaPreviewAccountSettingsTab-test.tsx

@@ -1,99 +0,0 @@
-/*
-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);
-    });
-});

test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap

@@ -95,6 +95,33 @@ 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
@@ -117,7 +144,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_QgU2PomxwKpa"
+                  for="mx_SettingsFlag_6hpi3YEetmBG"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -135,7 +162,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show all rooms in Home"
                   class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_QgU2PomxwKpa"
+                  id="mx_SettingsFlag_6hpi3YEetmBG"
                   role="switch"
                   tabindex="0"
                 >
@@ -185,7 +212,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_6hpi3YEetmBG"
+                  for="mx_SettingsFlag_4yVCeEefiPqp"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -198,7 +225,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_6hpi3YEetmBG"
+                  id="mx_SettingsFlag_4yVCeEefiPqp"
                   role="switch"
                   tabindex="0"
                 >
@@ -258,7 +285,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_4yVCeEefiPqp"
+                  for="mx_SettingsFlag_MRMwbPDmfGtm"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -271,33 +298,6 @@ 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,6 +313,33 @@ 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"
@@ -325,7 +352,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Publish timezone on public profile"
                   class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_GQvdMWe954DV"
+                  id="mx_SettingsFlag_IAu5CsiHRD7n"
                   role="switch"
                   tabindex="0"
                 >
@@ -365,7 +392,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_IAu5CsiHRD7n"
+                  for="mx_SettingsFlag_yrA2ohjWVJIP"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -378,7 +405,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_IAu5CsiHRD7n"
+                  id="mx_SettingsFlag_yrA2ohjWVJIP"
                   role="switch"
                   tabindex="0"
                 >
@@ -392,7 +419,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_yrA2ohjWVJIP"
+                  for="mx_SettingsFlag_auy1OmnTidX4"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -405,7 +432,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_yrA2ohjWVJIP"
+                  id="mx_SettingsFlag_auy1OmnTidX4"
                   role="switch"
                   tabindex="0"
                 >
@@ -436,7 +463,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_auy1OmnTidX4"
+                  for="mx_SettingsFlag_ePDS0OpWwAHG"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -449,7 +476,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Automatically replace plain text Emoji"
                   class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_auy1OmnTidX4"
+                  id="mx_SettingsFlag_ePDS0OpWwAHG"
                   role="switch"
                   tabindex="0"
                 >
@@ -463,7 +490,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_ePDS0OpWwAHG"
+                  for="mx_SettingsFlag_75JNTNkNU64r"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -487,33 +514,6 @@ 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"
                   >
-                    Use Ctrl + Enter to send a message
+                    Enable Emoji suggestions while typing
                   </span>
                 </label>
                 <div
-                  aria-checked="false"
+                  aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Use Ctrl + Enter to send a message"
-                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  aria-label="Enable Emoji suggestions while typing"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                   id="mx_SettingsFlag_aTLcRsQRlYy7"
                   role="switch"
                   tabindex="0"
@@ -560,13 +560,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   <span
                     class="mx_SettingsFlag_labelText"
                   >
-                    Surround selected text when typing special characters
+                    Use Ctrl + Enter to send a message
                   </span>
                 </label>
                 <div
                   aria-checked="false"
                   aria-disabled="true"
-                  aria-label="Surround selected text when typing special characters"
+                  aria-label="Use Ctrl + Enter to send a message"
                   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"
                   >
-                    Show stickers button
+                    Surround selected text when typing special characters
                   </span>
                 </label>
                 <div
-                  aria-checked="true"
+                  aria-checked="false"
                   aria-disabled="true"
-                  aria-label="Show stickers button"
-                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  aria-label="Surround selected text when typing special characters"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
                   id="mx_SettingsFlag_u1JYVtOyR5kb"
                   role="switch"
                   tabindex="0"
@@ -610,6 +610,33 @@ 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"
@@ -622,7 +649,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_u3pEwuLn9Enn"
+                  id="mx_SettingsFlag_YuxfFEpOsztW"
                   role="switch"
                   tabindex="0"
                 >
@@ -653,7 +680,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_YuxfFEpOsztW"
+                  for="mx_SettingsFlag_hQkBerF1ejc4"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -666,33 +693,6 @@ 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,6 +708,33 @@ 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"
@@ -720,7 +747,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_GFes1UFzOK2n"
+                  id="mx_SettingsFlag_vfGFMldL2r2v"
                   role="switch"
                   tabindex="0"
                 >
@@ -751,7 +778,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_vfGFMldL2r2v"
+                  for="mx_SettingsFlag_bsSwicmKUiOB"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -764,33 +791,6 @@ 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,6 +806,33 @@ 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"
@@ -818,7 +845,34 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Autoplay videos"
                   class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_dvqsxEaZtl3A"
+                  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"
                   role="switch"
                   tabindex="0"
                 >
@@ -849,7 +903,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_NIiWzqsApP1c"
+                  for="mx_SettingsFlag_dXFDGgBsKXay"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -862,60 +916,6 @@ 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 join/leave messages (invites/removes/bans unaffected)
+                    Show a placeholder for removed messages
                   </span>
                 </label>
                 <div
                   aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Show join/leave messages (invites/removes/bans unaffected)"
+                  aria-label="Show a placeholder for removed messages"
                   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 display name changes
+                    Show read receipts sent by other users
                   </span>
                 </label>
                 <div
                   aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Show display name changes"
+                  aria-label="Show read receipts sent by other users"
                   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 chat effects (animations when receiving e.g. confetti)
+                    Show join/leave messages (invites/removes/bans unaffected)
                   </span>
                 </label>
                 <div
                   aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Show chat effects (animations when receiving e.g. confetti)"
+                  aria-label="Show join/leave messages (invites/removes/bans unaffected)"
                   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 profile picture changes
+                    Show display name changes
                   </span>
                 </label>
                 <div
                   aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Show profile picture changes"
+                  aria-label="Show display name 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 avatars in user, room and event mentions
+                    Show chat effects (animations when receiving e.g. confetti)
                   </span>
                 </label>
                 <div
                   aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Show avatars in user, room and event mentions"
+                  aria-label="Show chat effects (animations when receiving e.g. confetti)"
                   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"
                   >
-                    Enable big emoji in chat
+                    Show profile picture changes
                   </span>
                 </label>
                 <div
                   aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Enable big emoji in chat"
+                  aria-label="Show profile picture changes"
                   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"
                   >
-                    Jump to the bottom of the timeline when you send a message
+                    Show avatars in user, room and event mentions
                   </span>
                 </label>
                 <div
                   aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Jump to the bottom of the timeline when you send a message"
+                  aria-label="Show avatars in user, room and event mentions"
                   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"
                   >
-                    Show current profile picture and name for users in message history
+                    Enable big emoji in chat
                   </span>
                 </label>
                 <div
-                  aria-checked="false"
+                  aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Show current profile picture and name for users in message history"
-                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  aria-label="Enable big emoji in chat"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                   id="mx_SettingsFlag_cmt3PZSyNp3v"
                   role="switch"
                   tabindex="0"
@@ -1141,162 +1141,60 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   />
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="mx_SettingsSubsection"
-          >
-            <div
-              class="mx_SettingsSubsectionHeading"
-            >
-              <h3
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+              <div
+                class="mx_SettingsFlag"
               >
-                Moderation and safety
-              </h3>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content"
-            >
-              <form
-                class="_root_19upo_16"
-              >
-                <div
-                  class="mx_SettingsFlag"
+                <label
+                  class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_dJJz3lHUv9XX"
                 >
                   <span
-                    class="mx_SettingsFlag_label"
+                    class="mx_SettingsFlag_labelText"
                   >
-                    <div
-                      id="mx_LabelledToggleSwitch_:r8:"
-                    >
-                      Hide avatars of room and inviter
-                    </div>
+                    Jump to the bottom of the timeline when you send a message
                   </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>
+                </label>
                 <div
-                  aria-label="Show media in timeline"
-                  class="_field_19upo_26"
-                  id="mx_media_previews"
-                  role="radiogroup"
+                  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"
                 >
-                  <label
-                    class="_label_19upo_59"
-                    for="radix-:r9:"
-                  >
-                    Show media in timeline
-                  </label>
-                  <span
-                    class="_message_19upo_85 _help-message_19upo_91"
-                    id="radix-:ra:"
-                  >
-                    A hidden media can always be shown by tapping on it
-                  </span>
                   <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <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"
-                  >
-                    <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"
-                  >
-                    <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>
+                    class="mx_ToggleSwitch_ball"
+                  />
                 </div>
-              </form>
+              </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
@@ -1319,7 +1217,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_dJJz3lHUv9XX"
+                  for="mx_SettingsFlag_FLEpLCb0jpp6"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -1332,7 +1230,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show NSFW content"
                   class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_dJJz3lHUv9XX"
+                  id="mx_SettingsFlag_FLEpLCb0jpp6"
                   role="switch"
                   tabindex="0"
                 >
@@ -1363,7 +1261,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_SBSSOZDRlzlA"
+                  for="mx_SettingsFlag_NQFWldEwbV3q"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -1376,7 +1274,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_SBSSOZDRlzlA"
+                  id="mx_SettingsFlag_NQFWldEwbV3q"
                   role="switch"
                   tabindex="0"
                 >

test/unit-tests/hooks/useMediaVisible-test.tsx

@@ -6,74 +6,48 @@ 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";
-const ROOM_ID = "!foobar:example.org";
+
+function render() {
+    return renderHook(() => useMediaVisible(EVENT_ID));
+}
 
 describe("useMediaVisible", () => {
-    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);
+    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"),
+            );
         });
     });
 
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    it("should display media by default", async () => {
+    it("should display images by default", async () => {
         const { result } = render();
         expect(result.current[0]).toEqual(true);
     });
 
-    it("should hide media when media previews are Off", async () => {
-        mediaPreviewConfig.media_previews = MediaPreviewValue.Off;
+    it("should hide images when the default is changed", async () => {
+        SettingsStore.setValue("showImages", null, SettingLevel.DEVICE, false);
         const { result } = render();
         expect(result.current[0]).toEqual(false);
     });
 
-    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 () => {
+    it("should hide images after function is called", async () => {
         const { result } = render();
         expect(result.current[0]).toEqual(true);
         act(() => {
@@ -83,8 +57,8 @@ describe("useMediaVisible", () => {
             expect(result.current[0]).toEqual(false);
         });
     });
-    it("should show media after function is called", async () => {
-        mediaPreviewConfig.media_previews = MediaPreviewValue.Off;
+    it("should show images after function is called", async () => {
+        SettingsStore.setValue("showImages", null, SettingLevel.DEVICE, false);
         const { result } = render();
         expect(result.current[0]).toEqual(false);
         act(() => {

test/unit-tests/settings/controllers/MediaPreviewConfigController-test.ts

@@ -1,164 +0,0 @@
-/*
-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);
-        },
-    );
-});