Merge pull request #339 from robintown/room-avatars

Display room avatars

src/room/GroupCallView.jsx

@@ -23,6 +23,7 @@ import { LobbyView } from "./LobbyView";
 import { InCallView } from "./InCallView";
 import { PTTCallView } from "./PTTCallView";
 import { CallEndedView } from "./CallEndedView";
+import { useRoomAvatar } from "./useRoomAvatar";
 import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { useLocationNavigation } from "../useLocationNavigation";
 
@@ -67,6 +68,8 @@ export function GroupCallView({
     participants,
   } = useGroupCall(groupCall);
 
+  const avatarUrl = useRoomAvatar(groupCall.room);
+
   useEffect(() => {
     window.groupCall = groupCall;
   }, [groupCall]);
@@ -96,6 +99,7 @@ export function GroupCallView({
           client={client}
           roomId={roomId}
           roomName={groupCall.room.name}
+          avatarUrl={avatarUrl}
           groupCall={groupCall}
           participants={participants}
           userMediaFeeds={userMediaFeeds}
@@ -110,6 +114,7 @@ export function GroupCallView({
           groupCall={groupCall}
           client={client}
           roomName={groupCall.room.name}
+          avatarUrl={avatarUrl}
           microphoneMuted={microphoneMuted}
           localVideoMuted={localVideoMuted}
           toggleLocalVideoMuted={toggleLocalVideoMuted}
@@ -142,6 +147,7 @@ export function GroupCallView({
         groupCall={groupCall}
         hasLocalParticipant={hasLocalParticipant}
         roomName={groupCall.room.name}
+        avatarUrl={avatarUrl}
         state={state}
         onInitLocalCallFeed={initLocalCallFeed}
         localCallFeed={localCallFeed}

src/room/InCallView.jsx

@@ -25,7 +25,6 @@ import {
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { VideoGrid, useVideoGridLayout } from "../video-grid/VideoGrid";
 import { VideoTileContainer } from "../video-grid/VideoTileContainer";
-import { getAvatarUrl } from "../matrix-utils";
 import { GroupCallInspector } from "./GroupCallInspector";
 import { OverflowMenu } from "./OverflowMenu";
 import { GridLayoutMenu } from "./GridLayoutMenu";
@@ -47,6 +46,7 @@ export function InCallView({
   client,
   groupCall,
   roomName,
+  avatarUrl,
   microphoneMuted,
   localVideoMuted,
   toggleLocalVideoMuted,
@@ -129,13 +129,8 @@ export function InCallView({
       return (
         <Avatar
           key={roomMember.userId}
-          style={{
-            width: size,
-            height: size,
-            borderRadius: size,
-            fontSize: Math.round(size / 2),
-          }}
-          src={avatarUrl && getAvatarUrl(client, avatarUrl, 96)}
+          size={size}
+          src={avatarUrl}
           fallback={roomMember.name.slice(0, 1).toUpperCase()}
           className={styles.avatar}
         />
@@ -153,7 +148,7 @@ export function InCallView({
     <div className={styles.inRoom}>
       <Header>
         <LeftNav>
-          <RoomHeaderInfo roomName={roomName} />
+          <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
         </LeftNav>
         <RightNav>
           <GridLayoutMenu layout={layout} setLayout={setLayout} />

src/room/LobbyView.jsx

@@ -32,6 +32,7 @@ export function LobbyView({
   client,
   groupCall,
   roomName,
+  avatarUrl,
   state,
   onInitLocalCallFeed,
   onEnter,
@@ -72,7 +73,7 @@ export function LobbyView({
     <div className={styles.room}>
       <Header>
         <LeftNav>
-          <RoomHeaderInfo roomName={roomName} />
+          <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
         </LeftNav>
         <RightNav>
           <UserMenuContainer />

src/room/PTTButton.tsx

@@ -148,12 +148,7 @@ export const PTTButton: React.FC<Props> = ({
       ) : (
         <Avatar
           key={activeSpeakerUserId}
-          style={{
-            width: size - 12,
-            height: size - 12,
-            borderRadius: size - 12,
-            fontSize: Math.round((size - 12) / 2),
-          }}
+          size={size - 12}
           src={activeSpeakerAvatarUrl}
           fallback={activeSpeakerDisplayName.slice(0, 1).toUpperCase()}
           className={styles.avatar}

src/room/PTTCallView.tsx

@@ -32,7 +32,6 @@ import { useMediaHandler } from "../settings/useMediaHandler";
 import { usePTT } from "./usePTT";
 import { Timer } from "./Timer";
 import { Toggle } from "../input/Toggle";
-import { getAvatarUrl } from "../matrix-utils";
 import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
 import { usePTTSounds } from "../sound/usePttSounds";
 import { PTTClips } from "../sound/PTTClips";
@@ -80,6 +79,7 @@ interface Props {
   client: MatrixClient;
   roomId: string;
   roomName: string;
+  avatarUrl: string;
   groupCall: GroupCall;
   participants: RoomMember[];
   userMediaFeeds: CallFeed[];
@@ -92,6 +92,7 @@ export const PTTCallView: React.FC<Props> = ({
   client,
   roomId,
   roomName,
+  avatarUrl,
   groupCall,
   participants,
   userMediaFeeds,
@@ -106,7 +107,6 @@ export const PTTCallView: React.FC<Props> = ({
   const [containerRef, bounds] = useMeasure({ polyfill: ResizeObserver });
   const facepileSize = bounds.width < 800 ? "sm" : "md";
   const pttButtonSize = 232;
-  const pttBorderWidth = 6;
 
   const { audioOutput } = useMediaHandler();
 
@@ -142,13 +142,7 @@ export const PTTCallView: React.FC<Props> = ({
   const activeSpeakerUser = activeSpeakerUserId
     ? client.getUser(activeSpeakerUserId)
     : null;
-  const activeSpeakerAvatarUrl = activeSpeakerUser
-    ? getAvatarUrl(
-        client,
-        activeSpeakerUser.avatarUrl,
-        pttButtonSize - pttBorderWidth * 2
-      )
-    : null;
+  const activeSpeakerAvatarUrl = activeSpeakerUser?.avatarUrl;
   const activeSpeakerDisplayName = activeSpeakerUser
     ? activeSpeakerUser.displayName
     : "";
@@ -170,7 +164,11 @@ export const PTTCallView: React.FC<Props> = ({
       />
       <Header className={styles.header}>
         <LeftNav>
-          <RoomSetupHeaderInfo roomName={roomName} onPress={onLeave} />
+          <RoomSetupHeaderInfo
+            roomName={roomName}
+            avatarUrl={avatarUrl}
+            onPress={onLeave}
+          />
         </LeftNav>
         <RightNav />
       </Header>

src/room/VideoPreview.jsx

@@ -66,12 +66,7 @@ export function VideoPreview({
           {localVideoMuted && (
             <div className={styles.avatarContainer}>
               <Avatar
-                style={{
-                  width: avatarSize,
-                  height: avatarSize,
-                  borderRadius: avatarSize,
-                  fontSize: Math.round(avatarSize / 2),
-                }}
+                size={avatarSize}
                 src={avatarUrl}
                 fallback={displayName.slice(0, 1).toUpperCase()}
               />

src/room/useRoomAvatar.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+
+export const useRoomAvatar = (room: Room) => {
+  const [avatarUrl, setAvatarUrl] = useState(room.getMxcAvatarUrl());
+
+  useEffect(() => {
+    const update = (ev: MatrixEvent) => {
+      if (ev.getType() === EventType.RoomAvatar) {
+        setAvatarUrl(room.getMxcAvatarUrl());
+      }
+    };
+
+    room.currentState.on(RoomStateEvent.Events, update);
+    return () => {
+      room.currentState.off(RoomStateEvent.Events, update);
+    };
+  }, [room]);
+
+  return avatarUrl;
+};