From efe9e6c2b306153944dacec08d940d91552699f3 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Mon, 24 Oct 2022 13:17:29 -0400
Subject: [PATCH] Fix avatars of remote participants in matryoshka mode

RoomWidgetClient doesn't do lazy loading, so it only has the state event data to work with and not the lazy loaded user object.

Previously avatars of remote participants were all replaced by fallback avatars.
---
 src/Facepile.tsx        | 4 ++--
 src/room/InCallView.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Facepile.tsx b/src/Facepile.tsx
index c3f5b290..86c5c6f5 100644
--- a/src/Facepile.tsx
+++ b/src/Facepile.tsx
@@ -72,12 +72,12 @@ export function Facepile({
       {...rest}
     >
       {participants.slice(0, max).map((member, i) => {
-        const avatarUrl = member.user?.avatarUrl;
+        const avatarUrl = member.getMxcAvatarUrl();
         return (
           <Avatar
             key={member.userId}
             size={size}
-            src={avatarUrl}
+            src={avatarUrl ?? undefined}
             fallback={member.name.slice(0, 1).toUpperCase()}
             className={styles.avatar}
             style={{ left: i * (_size - _overlap) }}
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index da6a6dc9..82eb7570 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -237,14 +237,14 @@ export function InCallView({
 
   const renderAvatar = useCallback(
     (roomMember: RoomMember, width: number, height: number) => {
-      const avatarUrl = roomMember.user?.avatarUrl;
+      const avatarUrl = roomMember.getMxcAvatarUrl();
       const size = Math.round(Math.min(width, height) / 2);
 
       return (
         <Avatar
           key={roomMember.userId}
           size={size}
-          src={avatarUrl}
+          src={avatarUrl ?? undefined}
           fallback={roomMember.name.slice(0, 1).toUpperCase()}
           className={styles.avatar}
         />