Merge pull request #3748 from matrix-org/t3chguy/avatar_userinfo

Replace UserInfo avatar with <MemberAvatar/> for fallback logic

res/css/views/avatars/_BaseAvatar.scss

@@ -40,6 +40,7 @@ limitations under the License.
 }
 
 .mx_BaseAvatar_image {
+    object-fit: cover;
     border-radius: 40px;
     vertical-align: top;
     background-color: $avatar-bg-color;

res/css/views/right_panel/_UserInfo.scss

@@ -63,7 +63,6 @@ limitations under the License.
 
     .mx_UserInfo_avatar {
         margin: 24px 32px 0 32px;
-        cursor: pointer;
     }
 
     .mx_UserInfo_avatar > div {
@@ -77,12 +76,27 @@ limitations under the License.
         that's why we had to put the margin to center on a parent div),
         and not a % of the parent height. */
         padding-top: 100%;
-        height: 0;
+        position: relative;
+    }
+
+    .mx_UserInfo_avatar > div > div * {
         border-radius: 100%;
-        box-sizing: content-box;
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .mx_UserInfo_avatar .mx_BaseAvatar_initial {
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        // override the calculated sizes so that the letter isn't HUGE
+        font-size: 26px !important;
+        width: 100% !important;
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {

src/components/views/right_panel/UserInfo.js

@@ -1051,16 +1051,9 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
         }
     }, [cli, user.userId]);
 
-
-    const onMemberAvatarKey = e => {
-        if (e.key === "Enter") {
-            onMemberAvatarClick();
-        }
-    };
-
     const onMemberAvatarClick = useCallback(() => {
         const member = user;
-        const avatarUrl = member.getMxcAvatarUrl();
+        const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
         if (!avatarUrl) return;
 
         const httpUrl = cli.mxcUrlToHttp(avatarUrl);
@@ -1158,21 +1151,24 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
         statusLabel = <span className="mx_UserInfo_statusMessage">{ statusMessage }</span>;
     }
 
-    const avatarUrl = user.getMxcAvatarUrl ? user.getMxcAvatarUrl() : user.avatarUrl;
-    let avatarElement;
-    if (avatarUrl) {
-        const httpUrl = cli.mxcUrlToHttp(avatarUrl, 800, 800);
-        avatarElement = <div
-            className="mx_UserInfo_avatar"
+    // const avatarUrl = user.getMxcAvatarUrl ? user.getMxcAvatarUrl() : user.avatarUrl;
+    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+    const avatarElement = (
+        <div className="mx_UserInfo_avatar">
+            <div>
+                <div>
+                    <MemberAvatar
+                        member={user}
+                        width={2 * 0.3 * window.innerHeight} // 2x@30vh
+                        height={2 * 0.3 * window.innerHeight} // 2x@30vh
+                        resizeMethod="scale"
+                        fallbackUserId={user.userId}
                         onClick={onMemberAvatarClick}
-            onKeyDown={onMemberAvatarKey}
-            tabIndex="0"
-            role="img"
-            aria-label={_t("Profile picture")}
-        >
-            <div><div style={{backgroundImage: `url(${httpUrl})`}} /></div>
-        </div>;
-    }
+                        urls={user.avatarUrl ? [user.avatarUrl] : undefined} />
+                </div>
+            </div>
+        </div>
+    );
 
     let closeButton;
     if (onClose) {