Update user avatars

src/Avatar.module.css

@@ -7,6 +7,7 @@
   pointer-events: none;
   font-weight: 600;
   overflow: hidden;
+  flex-shrink: 0;
 }
 
 .avatar img {

src/CallList.jsx

@@ -7,7 +7,7 @@ import { ReactComponent as VideoIcon } from "./icons/Video.svg";
 import styles from "./CallList.module.css";
 import { getRoomUrl } from "./ConferenceCallManagerHooks";
 
-export function CallList({ title, rooms }) {
+export function CallList({ title, rooms, client }) {
   return (
     <>
       <h3>{title}</h3>
@@ -15,6 +15,7 @@ export function CallList({ title, rooms }) {
         {rooms.map(({ roomId, roomName, avatarUrl, participants }) => (
           <CallTile
             key={roomId}
+            client={client}
             name={roomName}
             avatarUrl={avatarUrl}
             roomId={roomId}
@@ -26,7 +27,7 @@ export function CallList({ title, rooms }) {
   );
 }
 
-function CallTile({ name, avatarUrl, roomId, participants }) {
+function CallTile({ name, avatarUrl, roomId, participants, client }) {
   return (
     <div className={styles.callTile}>
       <Link to={`/room/${roomId}`} className={styles.callTileLink}>
@@ -40,7 +41,9 @@ function CallTile({ name, avatarUrl, roomId, participants }) {
         <div className={styles.callInfo}>
           <h5>{name}</h5>
           <p>{getRoomUrl(roomId)}</p>
-          {participants && <Facepile participants={participants} />}
+          {participants && (
+            <Facepile client={client} participants={participants} />
+          )}
         </div>
         <div className={styles.copyButtonSpacer} />
       </Link>

src/ConferenceCallManagerHooks.jsx

@@ -624,7 +624,7 @@ export function getRoomUrl(roomId) {
   }
 }
 
-function getAvatarUrl(client, mxcUrl, avatarSize = 96) {
+export function getAvatarUrl(client, mxcUrl, avatarSize = 96) {
   const width = Math.floor(avatarSize * window.devicePixelRatio);
   const height = Math.floor(avatarSize * window.devicePixelRatio);
   return mxcUrl && client.mxcUrlToHttp(mxcUrl, width, height, "crop");

src/Facepile.jsx

@@ -2,23 +2,28 @@ import React from "react";
 import styles from "./Facepile.module.css";
 import classNames from "classnames";
 import { Avatar } from "./Avatar";
+import { getAvatarUrl } from "./ConferenceCallManagerHooks";
 
-export function Facepile({ className, participants, ...rest }) {
+export function Facepile({ className, client, participants, ...rest }) {
   return (
     <div
       className={classNames(styles.facepile, className)}
       title={participants.map((member) => member.name).join(", ")}
       {...rest}
     >
-      {participants.slice(0, 3).map((member, i) => (
-        <Avatar
-          key={member.userId}
-          size="xs"
-          fallback={member.name.slice(0, 1).toUpperCase()}
-          className={styles.avatar}
-          style={{ left: i * 22 }}
-        />
-      ))}
+      {participants.slice(0, 3).map((member, i) => {
+        const avatarUrl = member.user?.avatarUrl;
+        return (
+          <Avatar
+            key={member.userId}
+            size="xs"
+            src={avatarUrl && getAvatarUrl(client, avatarUrl, 22)}
+            fallback={member.name.slice(0, 1).toUpperCase()}
+            className={styles.avatar}
+            style={{ left: i * 22 }}
+          />
+        );
+      })}
       {participants.length > 3 && (
         <Avatar
           key="additional"

src/Home.jsx

@@ -330,10 +330,18 @@ function RegisteredView({
           <div className={styles.right}>
             <div className={styles.content}>
               {publicRooms.length > 0 && (
-                <CallList title="Public Calls" rooms={publicRooms} />
+                <CallList
+                  title="Public Calls"
+                  rooms={publicRooms}
+                  client={client}
+                />
               )}
               {recentRooms.length > 0 && (
-                <CallList title="Recent Calls" rooms={recentRooms} />
+                <CallList
+                  title="Recent Calls"
+                  rooms={recentRooms}
+                  client={client}
+                />
               )}
             </div>
           </div>

src/Room.jsx

@@ -37,6 +37,7 @@ import { useGroupCall } from "matrix-react-sdk/src/hooks/useGroupCall";
 import { useCallFeed } from "matrix-react-sdk/src/hooks/useCallFeed";
 import { useMediaStream } from "matrix-react-sdk/src/hooks/useMediaStream";
 import {
+  getAvatarUrl,
   getRoomUrl,
   useClient,
   useLoadGroupCall,
@@ -49,6 +50,7 @@ import { OverflowMenu } from "./OverflowMenu";
 import { GridLayoutMenu } from "./GridLayoutMenu";
 import { UserMenu } from "./UserMenu";
 import classNames from "classnames";
+import { Avatar } from "./Avatar";
 
 const canScreenshare = "getDisplayMedia" in navigator.mediaDevices;
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -445,6 +447,29 @@ function InRoomView({
     [layout, setLayout]
   );
 
+  const renderAvatar = useCallback(
+    (roomMember, width, height) => {
+      const avatarUrl = roomMember.user?.avatarUrl;
+      const size = Math.round(Math.min(width, height) / 2);
+
+      return (
+        <Avatar
+          key={roomMember.userId}
+          style={{
+            width: size,
+            height: size,
+            borderRadius: size,
+            fontSize: Math.round(size / 2),
+          }}
+          src={avatarUrl && getAvatarUrl(client, avatarUrl, 96)}
+          fallback={roomMember.name.slice(0, 1).toUpperCase()}
+          className={styles.avatar}
+        />
+      );
+    },
+    [client]
+  );
+
   return (
     <div className={classNames(styles.room, styles.inRoom)}>
       <Header>
@@ -466,6 +491,7 @@ function InRoomView({
         <VideoGrid
           items={items}
           layout={layout}
+          getAvatar={renderAvatar}
           onFocusTile={onFocusTile}
           disableAnimations={isSafari}
         />

src/Room.module.css

@@ -195,6 +195,13 @@ limitations under the License.
   max-width: 360px;
 }
 
+.avatar {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 @media (min-width: 800px) {
   .roomContainer {
     flex-direction: row;

src/UserMenu.jsx

@@ -93,7 +93,6 @@ export function UserMenu({ disableLogout }) {
                 size="sm"
                 src={avatarUrl}
                 fallback={(displayName || userName).slice(0, 1).toUpperCase()}
-                className={styles.avatar}
               />
             ) : (
               <UserIcon />