Ensure spaces in the spotlight dialog have rounded square avatars (#9480)

src/components/views/avatars/RoomAvatar.tsx

@@ -16,11 +16,10 @@ limitations under the License.
 
 import React, { ComponentProps } from 'react';
 import { Room } from 'matrix-js-sdk/src/models/room';
-import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
 import classNames from "classnames";
-import { EventType } from "matrix-js-sdk/src/@types/event";
+import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
 
 import BaseAvatar from './BaseAvatar';
 import ImageView from '../elements/ImageView';
@@ -39,11 +38,7 @@ interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idNam
     oobData?: IOOBData & {
         roomId?: string;
     };
-    width?: number;
-    height?: number;
-    resizeMethod?: ResizeMethod;
     viewAvatarOnClick?: boolean;
-    className?: string;
     onClick?(): void;
 }
 
@@ -72,10 +67,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     }
 
     public componentWillUnmount() {
-        const cli = MatrixClientPeg.get();
-        if (cli) {
-            cli.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
-        }
+        MatrixClientPeg.get()?.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
     }
 
     public static getDerivedStateFromProps(nextProps: IProps): IState {
@@ -133,7 +125,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     public render() {
         const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props;
 
-        const roomName = room ? room.name : oobData.name;
+        const roomName = room?.name ?? oobData.name;
         // If the room is a DM, we use the other user's ID for the color hash
         // in order to match the room avatar with their avatar
         const idName = room ? (DMRoomMap.shared().getUserIdForRoomId(room.roomId) ?? room.roomId) : oobData.roomId;
@@ -142,7 +134,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
             <BaseAvatar
                 {...otherProps}
                 className={classNames(className, {
-                    mx_RoomAvatar_isSpaceRoom: room?.isSpaceRoom(),
+                    mx_RoomAvatar_isSpaceRoom: (room?.getType() ?? this.props.oobData?.roomType) === RoomType.Space,
                 })}
                 name={roomName}
                 idName={idName}

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -93,6 +93,7 @@ import { TooltipOption } from "./TooltipOption";
 import { isLocalRoom } from "../../../../utils/localRoom/isLocalRoom";
 import { useSlidingSyncRoomSearch } from "../../../../hooks/useSlidingSyncRoomSearch";
 import { shouldShowFeedback } from "../../../../utils/Feedback";
+import RoomAvatar from "../../avatars/RoomAvatar";
 
 const MAX_RECENT_SEARCHES = 10;
 const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
@@ -656,6 +657,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         shouldPeek: result.publicRoom.world_readable || cli.isGuest(),
                     }, true, ev.type !== "click");
                 };
+
                 return (
                     <Option
                         id={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}`}
@@ -674,13 +676,14 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         aria-describedby={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}_alias`}
                         aria-details={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}_details`}
                     >
-                        <BaseAvatar
+                        <RoomAvatar
                             className="mx_SearchResultAvatar"
-                            url={result?.publicRoom?.avatar_url
-                                ? mediaFromMxc(result?.publicRoom?.avatar_url).getSquareThumbnailHttp(AVATAR_SIZE)
-                                : null}
-                            name={result.publicRoom.name}
-                            idName={result.publicRoom.room_id}
+                            oobData={{
+                                roomId: result.publicRoom.room_id,
+                                name: result.publicRoom.name,
+                                avatarUrl: result.publicRoom.avatar_url,
+                                roomType: result.publicRoom.room_type,
+                            }}
                             width={AVATAR_SIZE}
                             height={AVATAR_SIZE}
                         />

src/components/views/rooms/RoomPreviewBar.tsx

@@ -263,9 +263,9 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
             params: {
                 email: this.props.invitedEmail,
                 signurl: this.props.signUrl,
-                room_name: this.props.oobData ? this.props.oobData.room_name : null,
-                room_avatar_url: this.props.oobData ? this.props.oobData.avatarUrl : null,
-                inviter_name: this.props.oobData ? this.props.oobData.inviterName : null,
+                room_name: this.props.oobData?.name ?? null,
+                room_avatar_url: this.props.oobData?.avatarUrl ?? null,
+                inviter_name: this.props.oobData?.inviterName ?? null,
             },
         };
     }

src/stores/ThreepidInviteStore.ts

@@ -56,7 +56,7 @@ export interface IOOBData {
     inviterName?: string; // The display name of the person who invited us to the room
     // eslint-disable-next-line camelcase
     room_name?: string; // The name of the room, to be used until we are told better by the server
-    roomType?: RoomType; // The type of the room, to be used until we are told better by the server
+    roomType?: RoomType | string; // The type of the room, to be used until we are told better by the server
 }
 
 const STORAGE_PREFIX = "mx_threepid_invite_";