Make avatars look crisp!

src/components/viewmodels/MemberListViewModel.tsx

@@ -84,7 +84,7 @@ export function sdkRoomMemberToRoomMember(member: SDKRoomMember): Member {
 
     const mxcAvatarURL = member.getMxcAvatarUrl();
     const avatarThumbnailUrl =
-        (mxcAvatarURL && mediaFromMxc(mxcAvatarURL).getThumbnailOfSourceHttp(10, 10)) ?? undefined;
+        (mxcAvatarURL && mediaFromMxc(mxcAvatarURL).getThumbnailOfSourceHttp(96, 96, "crop")) ?? undefined;
 
     const user = member.user;
     let presenceState: PresenceState | undefined = undefined;

src/components/views/avatars/MemberAvatarView.tsx

@@ -1,57 +0,0 @@
-/*
-Copyright 2024 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, { forwardRef, Ref } from "react";
-
-import BaseAvatar from "./BaseAvatar";
-import { _t } from "../../../languageHandler";
-import { RoomMember } from "../../../models/rooms/RoomMember";
-import { AvatarThumbnailData, avatarUrl } from "../../../models/rooms/AvatarThumbnailData";
-
-interface Props {
-    member: RoomMember;
-    size: string;
-    resizeMethod?: "crop" | "scale";
-}
-
-function MemberAvatarView({ size, resizeMethod = "crop", member }: Props, ref: Ref<HTMLElement>): JSX.Element {
-    let imageUrl = undefined;
-    const avatarThumbnailUrl = member.avatarThumbnailUrl;
-
-    if (!!avatarThumbnailUrl) {
-        const data: AvatarThumbnailData = {
-            src: avatarThumbnailUrl,
-            width: parseInt(size, 10),
-            height: parseInt(size, 10),
-            resizeMethod: resizeMethod,
-        };
-        imageUrl = avatarUrl(data);
-    }
-
-    return (
-        <BaseAvatar
-            size={size}
-            name={member.name}
-            idName={member.userId}
-            title={member.displayUserId}
-            url={imageUrl}
-            altText={_t("common|user_avatar")}
-            ref={ref}
-        />
-    );
-}
-
-export default forwardRef(MemberAvatarView);

src/components/views/rooms/MemberTileView.tsx

@@ -19,13 +19,13 @@ import React from "react";
 
 import DisambiguatedProfile from "../messages/DisambiguatedProfile";
 import { RoomMember } from "../../../models/rooms/RoomMember";
-import MemberAvatarNext from "../avatars/MemberAvatarView";
 import { useThreePidTileViewModel, useMemberTileViewModel } from "../../viewmodels/MemberTileViewModel";
 import E2EIcon from "./E2EIconView";
 import AvatarPresenceIconView from "./PresenceIconView";
 import AccessibleButton from "../elements/AccessibleButton";
 import { ThreePIDInvite } from "../../../models/rooms/ThreePIDInvite";
 import BaseAvatar from "../avatars/BaseAvatar";
+import { _t } from "../../../languageHandler";
 
 interface IProps {
     member: RoomMember;
@@ -68,15 +68,23 @@ function MemberTile(props: TileProps): JSX.Element {
 
 export function ThreePidInviteTileView(props: ThreePidProps): JSX.Element {
     const vm = useThreePidTileViewModel(props);
-    const av = <BaseAvatar name={vm.name} size="36px" aria-hidden="true" />;
+    const av = <BaseAvatar name={vm.name} size="32px" aria-hidden="true" />;
     return <MemberTile nameJsx={vm.name} avatarJsx={av} onClick={vm.onClick} />;
 }
 
 export function RoomMemberTileView(props: IProps): JSX.Element {
     const vm = useMemberTileViewModel(props);
     const member = vm.member;
-    const av = <MemberAvatarNext member={member} size="32px" aria-hidden="true" />;
+    const av = (
-
+        <BaseAvatar
+            size="32px"
+            name={member.name}
+            idName={member.userId}
+            title={member.displayUserId}
+            url={member.avatarThumbnailUrl}
+            altText={_t("common|user_avatar")}
+        />
+    );
     const name = vm.name;
     const nameJSX = <DisambiguatedProfile member={member} fallbackName={name || ""} />;
 

src/models/rooms/AvatarThumbnailData.ts

@@ -1,30 +0,0 @@
-/*
-Copyright 2024 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-export type AvatarThumbnailData = {
-    src: string;
-    width: number;
-    height: number;
-    resizeMethod: "crop" | "scale";
-};
-
-export function avatarUrl(data: AvatarThumbnailData): string {
-    const url = new URL(data.src);
-    url.searchParams.set("method", data.resizeMethod);
-    url.searchParams.set("width", Math.round(data.width).toString());
-    url.searchParams.set("height", Math.round(data.height).toString());
-    return url.toString();
-}