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

It's supposed to be the room avatar; this was a regression introduced during the LiveKit hack week.
This commit is contained in:
Robin Townsend 2023-06-23 16:18:51 -04:00
parent f08facbff3
commit 25eb56418d
6 changed files with 34 additions and 4 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

26
src/room/useRoomAvatar.ts Normal file
View file

@ -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])
);