Update user avatars

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"