From c220848f1cea1cf7efd6b72607a544c97d8ee917 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Tue, 17 Dec 2024 18:18:29 +0530
Subject: [PATCH] Make avatars look crisp!

---
 .../viewmodels/MemberListViewModel.tsx        |  2 +-
 .../views/avatars/MemberAvatarView.tsx        | 57 -------------------
 src/components/views/rooms/MemberTileView.tsx | 16 ++++--
 src/models/rooms/AvatarThumbnailData.ts       | 30 ----------
 4 files changed, 13 insertions(+), 92 deletions(-)
 delete mode 100644 src/components/views/avatars/MemberAvatarView.tsx
 delete mode 100644 src/models/rooms/AvatarThumbnailData.ts

diff --git a/src/components/viewmodels/MemberListViewModel.tsx b/src/components/viewmodels/MemberListViewModel.tsx
index 2e3a84ed05..b32d270b6f 100644
--- a/src/components/viewmodels/MemberListViewModel.tsx
+++ b/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;
diff --git a/src/components/views/avatars/MemberAvatarView.tsx b/src/components/views/avatars/MemberAvatarView.tsx
deleted file mode 100644
index 6fcb4881b6..0000000000
--- a/src/components/views/avatars/MemberAvatarView.tsx
+++ /dev/null
@@ -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);
diff --git a/src/components/views/rooms/MemberTileView.tsx b/src/components/views/rooms/MemberTileView.tsx
index d534a302c4..94919c16e0 100644
--- a/src/components/views/rooms/MemberTileView.tsx
+++ b/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 || ""} />;
 
diff --git a/src/models/rooms/AvatarThumbnailData.ts b/src/models/rooms/AvatarThumbnailData.ts
deleted file mode 100644
index 2c3eeea669..0000000000
--- a/src/models/rooms/AvatarThumbnailData.ts
+++ /dev/null
@@ -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();
-}