Global configuration flag for media previews (#29582)

* Modify useMediaVisible to take a room.

* Add initial support for a account data level key.

* Update controls.

* Update settings

* Lint and fixes

* make some tests go happy

* lint

* i18n

* update preferences

* prettier

* Update settings tab.

* update screenshot

* Update docs

* Rewrite controller

* Rewrite tons of tests

* Rewrite RoomAvatar to be a functional component

This is so we can use hooks to determine the setting state.

* lint

* lint

* Tidy up comments

* Apply media visible hook to inline images.

* Move conditionals.

* copyright all the things

* Review changes

* Update html utils to properly discard media.

* Types fix

* Fixing tests that break settings getValue expectations

* Fix logic around media preview calculation

* Fix room header tests

* Fixup tests for timelinePanel

* Clear settings in matrixchat

* Update tests to use SettingsStore where possible.

* fix bug

* revert changes to client.ts

* copyright years

* Add header

* Add a test for MediaPreviewAccountSettingsTab

* Mark initMatrixClient as optional

* Improve on types

* Ensure we do not set the account data twice.

* lint

* Review changes

* Ensure we include the client on rendered messages.

* Fix test

* update labels

* clean designs

* update settings tab

* update snapshot

* copyright

* prevent mutation

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

@@ -1,15 +1,16 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { act } from "react";
-import { EventType, getHttpUriForMxc, type IContent, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import React from "react";
+import { EventType, getHttpUriForMxc, type IContent, type MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { fireEvent, render, screen, type RenderResult } from "jest-matrix-react";
 import fetchMock from "fetch-mock-jest";
+import { type MockedObject } from "jest-mock";
 
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { type RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
@@ -20,11 +21,12 @@ import {
     mockClientMethodsDevice,
     mockClientMethodsServer,
     mockClientMethodsUser,
+    withClientContextRenderOptions,
 } from "../../../../test-utils";
 import MVideoBody from "../../../../../src/components/views/messages/MVideoBody";
 import type { IBodyProps } from "../../../../../src/components/views/messages/IBodyProps";
-import { SettingLevel } from "../../../../../src/settings/SettingLevel";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
+import { MediaPreviewValue } from "../../../../../src/@types/media_preview";
 
 // Needed so we don't throw an error about failing to decrypt.
 jest.mock("matrix-encrypt-attachment", () => ({
@@ -36,13 +38,15 @@ describe("MVideoBody", () => {
     const deviceId = "DEADB33F";
 
     const thumbUrl = "https://server/_matrix/media/v3/download/server/encrypted-poster";
+    let cli: MockedObject<MatrixClient>;
 
     beforeEach(() => {
-        const cli = getMockClientWithEventEmitter({
+        cli = getMockClientWithEventEmitter({
             ...mockClientMethodsUser(userId),
             ...mockClientMethodsServer(),
             ...mockClientMethodsDevice(deviceId),
             ...mockClientMethodsCrypto(),
+            getRoom: jest.fn(),
             getRooms: jest.fn().mockReturnValue([]),
             getIgnoredUsers: jest.fn(),
             getVersions: jest.fn().mockResolvedValue({
@@ -65,6 +69,7 @@ describe("MVideoBody", () => {
         room_id: "!room:server",
         sender: userId,
         type: EventType.RoomMessage,
+        event_id: "$foo:bar",
         content: {
             body: "alt for a test video",
             info: {
@@ -93,32 +98,25 @@ describe("MVideoBody", () => {
         fetchMock.getOnce(thumbUrl, { status: 200 });
         const { asFragment } = render(
             <MVideoBody mxEvent={encryptedMediaEvent} mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)} />,
+            withClientContextRenderOptions(cli),
         );
         expect(asFragment()).toMatchSnapshot();
     });
 
     describe("with video previews/thumbnails disabled", () => {
         beforeEach(() => {
-            act(() => {
-                SettingsStore.setValue("showImages", null, SettingLevel.DEVICE, false);
+            const origFn = SettingsStore.getValue;
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting, ...args) => {
+                if (setting === "mediaPreviewConfig") {
+                    return { invite_avatars: MediaPreviewValue.Off, media_previews: MediaPreviewValue.Off };
+                }
+                return origFn(setting, ...args);
             });
         });
 
         afterEach(() => {
-            act(() => {
-                SettingsStore.setValue(
-                    "showImages",
-                    null,
-                    SettingLevel.DEVICE,
-                    SettingsStore.getDefaultValue("showImages"),
-                );
-                SettingsStore.setValue(
-                    "showMediaEventIds",
-                    null,
-                    SettingLevel.DEVICE,
-                    SettingsStore.getDefaultValue("showMediaEventIds"),
-                );
-            });
+            SettingsStore.reset();
+            jest.restoreAllMocks();
         });
 
         it("should not download video", async () => {
@@ -129,6 +127,7 @@ describe("MVideoBody", () => {
                     mxEvent={encryptedMediaEvent}
                     mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
                 />,
+                withClientContextRenderOptions(cli),
             );
 
             expect(screen.getByText("Show video")).toBeInTheDocument();
@@ -144,6 +143,7 @@ describe("MVideoBody", () => {
                     mxEvent={encryptedMediaEvent}
                     mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
                 />,
+                withClientContextRenderOptions(cli),
             );
 
             const placeholderButton = screen.getByRole("button", { name: "Show video" });
@@ -191,6 +191,7 @@ function makeMVideoBody(w: number, h: number): RenderResult {
 
     const mockClient = getMockClientWithEventEmitter({
         mxcUrlToHttp: jest.fn(),
+        getRoom: jest.fn(),
     });
 
     return render(