Add setting to hide avatars of rooms you have been invited to. (#29497)

* Add ability to block images of rooms you have been invited to.

* strings

* Add tests

* fix snapshot

* tweaks

* lint

Author: Half-Shot

playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png

@@ -1,13 +1,20 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2015, 2016 OpenMarket 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 ComponentProps } from "react";
-import { type Room, RoomStateEvent, type MatrixEvent, EventType, RoomType } from "matrix-js-sdk/src/matrix";
+import {
+    type Room,
+    RoomStateEvent,
+    type MatrixEvent,
+    EventType,
+    RoomType,
+    KnownMembership,
+} from "matrix-js-sdk/src/matrix";
 
 import BaseAvatar from "./BaseAvatar";
 import ImageView from "../elements/ImageView";
@@ -19,6 +26,7 @@ import { mediaFromMxc } from "../../../customisations/Media";
 import { type IOOBData } from "../../../stores/ThreepidInviteStore";
 import { LocalRoom } from "../../../models/LocalRoom";
 import { filterBoolean } from "../../../utils/arrays";
+import SettingsStore from "../../../settings/SettingsStore";
 
 interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick"> {
     // Room may be left unset here, but if it is,
@@ -86,6 +94,13 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     };
 
     private static getImageUrls(props: IProps): string[] {
+        const myMembership = props.room?.getMyMembership();
+        if (myMembership === KnownMembership.Invite || !myMembership) {
+            if (SettingsStore.getValue("showAvatarsOnInvites") === false) {
+                // The user has opted out of showing avatars, so return no urls here.
+                return [];
+            }
+        }
         let oobAvatar: string | null = null;
         if (props.oobData.avatarUrl) {
             oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp(

src/components/views/avatars/RoomAvatar.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2019-2023 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
@@ -116,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"];
 

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

@@ -2643,6 +2643,7 @@
         "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).",

src/i18n/strings/en_EN.json

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2018-2024 The Matrix.org Foundation C.I.C.
 Copyright 2017 Travis Ralston
 
@@ -312,6 +312,7 @@ export interface Settings {
     "lowBandwidth": IBaseSetting<boolean>;
     "fallbackICEServerAllowed": IBaseSetting<boolean | null>;
     "showImages": IBaseSetting<boolean>;
+    "showAvatarsOnInvites": IBaseSetting<boolean>;
     "RoomList.preferredSorting": IBaseSetting<SortingAlgorithm>;
     "RightPanel.phasesGlobal": IBaseSetting<IRightPanelForRoomStored | null>;
     "RightPanel.phases": IBaseSetting<IRightPanelForRoomStored | null>;
@@ -1116,6 +1117,11 @@ export const SETTINGS: 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,

src/settings/Settings.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -17,6 +17,8 @@ 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 SettingsStore from "../../../../../src/settings/SettingsStore";
+import { SettingLevel } from "../../../../../src/settings/SettingLevel";
 
 describe("RoomAvatar", () => {
     let client: MatrixClient;
@@ -41,6 +43,12 @@ describe("RoomAvatar", () => {
     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", () => {
@@ -64,4 +72,19 @@ describe("RoomAvatar", () => {
         localRoom.targets.push(new DirectoryMember({ user_id: userId }));
         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";
+        room.updateMyMembership("invite");
+        expect(render(<RoomAvatar room={room} />).container).toMatchSnapshot();
+    });
+    it("should not render an invite avatar if the user has disabled it", () => {
+        SettingsStore.setValue("showAvatarsOnInvites", null, SettingLevel.ACCOUNT, false);
+        const room = new Room("!room:example.com", client, client.getSafeUserId());
+        room.name = "test room";
+        room.updateMyMembership("invite");
+        expect(render(<RoomAvatar room={room} />).container).toMatchSnapshot();
+    });
 });

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

@@ -1,5 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`RoomAvatar should not render an invite avatar if the user has disabled it 1`] = `
+<div>
+  <span
+    class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+    data-color="6"
+    data-testid="avatar-img"
+    data-type="round"
+    role="presentation"
+    style="--cpd-avatar-size: 36px;"
+  >
+    t
+  </span>
+</div>
+`;
+
+exports[`RoomAvatar should render an avatar for a room the user is invited to 1`] = `
+<div>
+  <span
+    aria-label="Avatar"
+    class="_avatar_1qbcf_8 mx_BaseAvatar"
+    data-color="6"
+    data-testid="avatar-img"
+    data-type="round"
+    style="--cpd-avatar-size: 36px;"
+  >
+    <img
+      alt=""
+      class="_image_1qbcf_41"
+      data-type="round"
+      height="36px"
+      loading="lazy"
+      referrerpolicy="no-referrer"
+      src="http://this.is.a.url/example.com/foobar"
+      width="36px"
+    />
+  </span>
+</div>
+`;
+
 exports[`RoomAvatar should render as expected for a DM room 1`] = `
 <div>
   <span