Merge pull request #1140 from robintown/room-avatar

Show the room avatar rather than the user avatar in the header

src/Header.tsx

@@ -116,7 +116,7 @@ export function HeaderLogo({ className }: HeaderLogoProps) {
 
 interface RoomHeaderInfo {
   roomName: string;
-  avatarUrl: string;
+  avatarUrl: string | null;
 }
 
 export function RoomHeaderInfo({ roomName, avatarUrl }: RoomHeaderInfo) {
@@ -125,7 +125,7 @@ export function RoomHeaderInfo({ roomName, avatarUrl }: RoomHeaderInfo) {
       <div className={styles.roomAvatar}>
         <Avatar
           size={Size.MD}
-          src={avatarUrl}
+          src={avatarUrl ?? undefined}
           bgKey={roomName}
           fallback={roomName.slice(0, 1).toUpperCase()}
         />

src/room/GroupCallView.tsx

@@ -35,6 +35,7 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { UserChoices } from "../livekit/useLiveKit";
 import { findDeviceByName } from "../media-utils";
+import { useRoomAvatar } from "./useRoomAvatar";
 
 declare global {
   interface Window {
@@ -81,12 +82,14 @@ export function GroupCallView({
   }, [groupCall]);
 
   const { displayName, avatarUrl } = useProfile(client);
+  const roomAvatarUrl = useRoomAvatar(groupCall.room);
 
   const matrixInfo: MatrixInfo = {
     userName: displayName,
     avatarUrl,
     roomName: groupCall.room.name,
     roomIdOrAlias,
+    roomAvatarUrl,
   };
 
   useEffect(() => {

src/room/InCallView.tsx

@@ -372,7 +372,7 @@ export function InCallView({
           <LeftNav>
             <RoomHeaderInfo
               roomName={matrixInfo.roomName}
-              avatarUrl={matrixInfo.avatarUrl}
+              avatarUrl={matrixInfo.roomAvatarUrl}
             />
             <VersionMismatchWarning
               users={unencryptedEventsFromUsers}

src/room/LobbyView.tsx

@@ -57,7 +57,7 @@ export function LobbyView(props: Props) {
           <LeftNav>
             <RoomHeaderInfo
               roomName={props.matrixInfo.roomName}
-              avatarUrl={props.matrixInfo.avatarUrl}
+              avatarUrl={props.matrixInfo.roomAvatarUrl}
             />
           </LeftNav>
           <RightNav>

src/room/VideoPreview.tsx

@@ -35,6 +35,7 @@ export type MatrixInfo = {
   avatarUrl: string;
   roomName: string;
   roomIdOrAlias: string;
+  roomAvatarUrl: string | null;
 };
 
 interface Props {

src/room/useRoomAvatar.ts

@@ -0,0 +1,26 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useCallback } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { useRoomState } from "./useRoomState";
+
+export const useRoomAvatar = (room: Room) =>
+  useRoomState(
+    room,
+    useCallback(() => room.getMxcAvatarUrl(), [room])
+  );