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

src/hooks/useMediaVisible.ts

@@ -6,30 +6,52 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { useCallback } from "react";
+import { JoinRule } from "matrix-js-sdk/src/matrix";
 
 import { SettingLevel } from "../settings/SettingLevel";
 import { useSettingValue } from "./useSettings";
 import SettingsStore from "../settings/SettingsStore";
+import { useMatrixClientContext } from "../contexts/MatrixClientContext";
+import { MediaPreviewValue } from "../@types/media_preview";
+import { useRoomState } from "./useRoomState";
+
+const PRIVATE_JOIN_RULES: JoinRule[] = [JoinRule.Invite, JoinRule.Knock, JoinRule.Restricted];
 
 /**
  * Should the media event be visible in the client, or hidden.
  * @param eventId The eventId of the media event.
  * @returns A boolean describing the hidden status, and a function to set the visiblity.
  */
-export function useMediaVisible(eventId: string): [boolean, (visible: boolean) => void] {
-    const defaultShowImages = useSettingValue("showImages", SettingLevel.DEVICE);
-    const eventVisibility = useSettingValue("showMediaEventIds", SettingLevel.DEVICE);
+export function useMediaVisible(eventId?: string, roomId?: string): [boolean, (visible: boolean) => void] {
+    const mediaPreviewSetting = useSettingValue("mediaPreviewConfig", roomId);
+    const client = useMatrixClientContext();
+    const eventVisibility = useSettingValue("showMediaEventIds");
+    const joinRule = useRoomState(client.getRoom(roomId) ?? undefined, (state) => state.getJoinRule());
     const setMediaVisible = useCallback(
         (visible: boolean) => {
             SettingsStore.setValue("showMediaEventIds", null, SettingLevel.DEVICE, {
                 ...eventVisibility,
-                [eventId]: visible,
+                [eventId!]: visible,
             });
         },
         [eventId, eventVisibility],
     );
 
+    const roomIsPrivate = joinRule ? PRIVATE_JOIN_RULES.includes(joinRule) : false;
+
+    const explicitEventVisiblity = eventId ? eventVisibility[eventId] : undefined;
     // Always prefer the explicit per-event user preference here.
-    const imgIsVisible = eventVisibility[eventId] ?? defaultShowImages;
-    return [imgIsVisible, setMediaVisible];
+    if (explicitEventVisiblity !== undefined) {
+        return [explicitEventVisiblity, setMediaVisible];
+    } else if (mediaPreviewSetting.media_previews === MediaPreviewValue.Off) {
+        return [false, setMediaVisible];
+    } else if (mediaPreviewSetting.media_previews === MediaPreviewValue.On) {
+        return [true, setMediaVisible];
+    } else if (mediaPreviewSetting.media_previews === MediaPreviewValue.Private) {
+        return [roomIsPrivate, setMediaVisible];
+    } else {
+        // Invalid setting.
+        console.warn("Invalid media visibility setting", mediaPreviewSetting.media_previews);
+        return [false, setMediaVisible];
+    }
 }