diff --git a/src/Avatar.ts b/src/Avatar.ts index 391495030c..88c80ef4b1 100644 --- a/src/Avatar.ts +++ b/src/Avatar.ts @@ -139,14 +139,18 @@ export function getInitialLetter(name: string): string | undefined { export function avatarUrlForRoom( room: Room | null, - width: number, - height: number, + width?: number, + height?: number, resizeMethod?: ResizeMethod, ): string | null { if (!room) return null; // null-guard if (room.getMxcAvatarUrl()) { - return mediaFromMxc(room.getMxcAvatarUrl() || undefined).getThumbnailOfSourceHttp(width, height, resizeMethod); + const media = mediaFromMxc(room.getMxcAvatarUrl() ?? undefined); + if (width !== undefined && height !== undefined) { + return media.getThumbnailOfSourceHttp(width, height, resizeMethod); + } + return media.srcHttp; } // space rooms cannot be DMs so skip the rest @@ -160,7 +164,11 @@ export function avatarUrlForRoom( // If there are only two members in the DM use the avatar of the other member const otherMember = room.getAvatarFallbackMember(); if (otherMember?.getMxcAvatarUrl()) { - return mediaFromMxc(otherMember.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod); + const media = mediaFromMxc(otherMember.getMxcAvatarUrl()); + if (width !== undefined && height !== undefined) { + return media.getThumbnailOfSourceHttp(width, height, resizeMethod); + } + return media.srcHttp; } return null; } diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx index 59553e3d7f..8728673b58 100644 --- a/src/components/views/avatars/BaseAvatar.tsx +++ b/src/components/views/avatars/BaseAvatar.tsx @@ -35,10 +35,10 @@ interface IProps { name?: string; // The name (first initial used as default) idName?: string; // ID for generating hash colours title?: string; // onHover title text - url?: string; // highest priority of them all, shortcut to set in urls[0] + url?: string | null; // highest priority of them all, shortcut to set in urls[0] urls?: string[]; // [highest_priority, ... , lowest_priority] - width?: number; - height?: number; + width: number; + height: number; // XXX: resizeMethod not actually used. resizeMethod?: ResizeMethod; defaultToInitialLetter?: boolean; // true to add default url @@ -48,7 +48,7 @@ interface IProps { tabIndex?: number; } -const calculateUrls = (url?: string, urls?: string[], lowBandwidth = false): string[] => { +const calculateUrls = (url?: string | null, urls?: string[], lowBandwidth = false): string[] => { // work out the full set of urls to try to load. This is formed like so: // imageUrls: [ props.url, ...props.urls ] @@ -66,7 +66,7 @@ const calculateUrls = (url?: string, urls?: string[], lowBandwidth = false): str return Array.from(new Set(_urls)); }; -const useImageUrl = ({ url, urls }: { url?: string; urls?: string[] }): [string, () => void] => { +const useImageUrl = ({ url, urls }: { url?: string | null; urls?: string[] }): [string, () => void] => { // Since this is a hot code path and the settings store can be slow, we // use the cached lowBandwidth value from the room context if it exists const roomContext = useContext(RoomContext); diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 6d1ec066e7..953ffc2288 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -62,7 +62,7 @@ enum Icon { PresenceBusy = "BUSY", } -function tooltipText(variant: Icon): string { +function tooltipText(variant: Icon): string | undefined { switch (variant) { case Icon.Globe: return _t("This room is public"); @@ -78,7 +78,7 @@ function tooltipText(variant: Icon): string { } export default class DecoratedRoomAvatar extends React.PureComponent { - private _dmUser: User; + private _dmUser: User | null; private isUnmounted = false; private isWatchingTimeline = false; @@ -103,11 +103,11 @@ export default class DecoratedRoomAvatar extends React.PureComponent { + private onRoomTimeline = (ev: MatrixEvent, room?: Room): void => { if (this.isUnmounted) return; if (this.props.room.roomId !== room?.roomId) return; @@ -182,7 +182,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent, "name" | "idName" | "url" | "onClick"> { // Room may be left unset here, but if it is, // oobData.avatarUrl should be set (else there // would be nowhere to get the avatar from) room?: Room; - oobData?: IOOBData & { + oobData: IOOBData & { roomId?: string; }; viewAvatarOnClick?: boolean; @@ -86,7 +87,7 @@ export default class RoomAvatar extends React.Component { }; private static getImageUrls(props: IProps): string[] { - let oobAvatar = null; + let oobAvatar: string | null = null; if (props.oobData.avatarUrl) { oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp( props.width, @@ -94,28 +95,27 @@ export default class RoomAvatar extends React.Component { props.resizeMethod, ); } - return [ + + return filterBoolean([ oobAvatar, // highest priority RoomAvatar.getRoomAvatarUrl(props), - ].filter(function (url) { - return url !== null && url !== ""; - }); + ]); } - private static getRoomAvatarUrl(props: IProps): string { + private static getRoomAvatarUrl(props: IProps): string | null { if (!props.room) return null; return Avatar.avatarUrlForRoom(props.room, props.width, props.height, props.resizeMethod); } private onRoomAvatarClick = (): void => { - const avatarUrl = Avatar.avatarUrlForRoom(this.props.room, null, null, null); + const avatarUrl = Avatar.avatarUrlForRoom(this.props.room ?? null, undefined, undefined, undefined); const params = { src: avatarUrl, - name: this.props.room.name, + name: this.props.room?.name, }; - Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true); + Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", undefined, true); }; private get roomIdName(): string | undefined { @@ -137,7 +137,7 @@ export default class RoomAvatar extends React.Component { public render(): React.ReactNode { const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props; - const roomName = room?.name ?? oobData.name; + const roomName = room?.name ?? oobData.name ?? "?"; return ( , "name" | "url" | "urls"> { +interface IProps extends Omit, "name" | "url" | "urls" | "height" | "width"> { app: IApp; + height?: number; + width?: number; } const WidgetAvatar: React.FC = ({ app, className, width = 20, height = 20, ...props }) => { @@ -44,7 +46,7 @@ const WidgetAvatar: React.FC = ({ app, className, width = 20, height = 2 name={app.id} className={classNames("mx_WidgetAvatar", className)} // MSC2765 - url={app.avatar_url ? mediaFromMxc(app.avatar_url).getSquareThumbnailHttp(20) : undefined} + url={app.avatar_url ? mediaFromMxc(app.avatar_url).getSquareThumbnailHttp(20) : null} urls={iconUrls} width={width} height={height} diff --git a/src/customisations/UserIdentifier.ts b/src/customisations/UserIdentifier.ts index 40ad641a22..12e0004783 100644 --- a/src/customisations/UserIdentifier.ts +++ b/src/customisations/UserIdentifier.ts @@ -31,7 +31,7 @@ function getDisplayUserIdentifier( // them all as optional. This allows customisers to only define and export the // customisations they need while still maintaining type safety. export interface IUserIdentifierCustomisations { - getDisplayUserIdentifier?: typeof getDisplayUserIdentifier; + getDisplayUserIdentifier: typeof getDisplayUserIdentifier; } // A real customisation module will define and export one or more of the