diff --git a/src/Header.tsx b/src/Header.tsx index 9b96f25..c79953c 100644 --- a/src/Header.tsx +++ b/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) {
diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index e6acf52..5f9c90f 100644 --- a/src/room/GroupCallView.tsx +++ b/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(() => { diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 14ba370..fd94aec 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -372,7 +372,7 @@ export function InCallView({ diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx index 4f82780..f9587eb 100644 --- a/src/room/VideoPreview.tsx +++ b/src/room/VideoPreview.tsx @@ -35,6 +35,7 @@ export type MatrixInfo = { avatarUrl: string; roomName: string; roomIdOrAlias: string; + roomAvatarUrl: string | null; }; interface Props { diff --git a/src/room/useRoomAvatar.ts b/src/room/useRoomAvatar.ts new file mode 100644 index 0000000..4c4d015 --- /dev/null +++ b/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]) + );