Merge remote-tracking branch 'origin/livekit' into dbkr/matrixrtcsession

src/room/GroupCallView.tsx

@@ -84,13 +84,14 @@ export function GroupCallView({
   const { displayName, avatarUrl } = useProfile(client);
   const matrixInfo = useMemo((): MatrixInfo => {
     return {
+      userId: client.getUserId()!,
       displayName: displayName!,
       avatarUrl: avatarUrl!,
       roomId: rtcSession.room.roomId,
       roomName: rtcSession.room.name,
       roomAlias: rtcSession.room.getCanonicalAlias(),
     };
-  }, [displayName, avatarUrl, rtcSession]);
+  }, [client, displayName, avatarUrl, rtcSession]);
 
   const deviceContext = useMediaDevices();
   const latestDevices = useRef<MediaDevices>();

src/room/VideoPreview.tsx

@@ -35,6 +35,7 @@ import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { MuteStates } from "./MuteStates";
 
 export type MatrixInfo = {
+  userId: string;
   displayName: string;
   avatarUrl: string;
   roomId: string;
@@ -129,9 +130,10 @@ export const VideoPreview: FC<Props> = ({ matrixInfo, muteStates }) => {
         {!muteStates.video.enabled && (
           <div className={styles.avatarContainer}>
             <Avatar
+              id={matrixInfo.userId}
+              name={matrixInfo.displayName}
               size={(previewBounds.height - 66) / 2}
               src={matrixInfo.avatarUrl}
-              fallback={matrixInfo.displayName.slice(0, 1).toUpperCase()}
             />
           </div>
         )}