diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx index 2cc821b9..c3d5a6ae 100644 --- a/src/home/CallList.tsx +++ b/src/home/CallList.tsx @@ -35,13 +35,13 @@ export function CallList({ rooms, client, disableFacepile }: CallListProps) { return ( <>
- {rooms.map(({ roomId, roomName, avatarUrl, participants }) => ( + {rooms.map(({ roomAlias, roomName, avatarUrl, participants }) => ( @@ -59,7 +59,7 @@ export function CallList({ rooms, client, disableFacepile }: CallListProps) { interface CallTileProps { name: string; avatarUrl: string; - roomId: string; + roomAlias: string; participants: RoomMember[]; client: MatrixClient; disableFacepile?: boolean; @@ -67,7 +67,7 @@ interface CallTileProps { function CallTile({ name, avatarUrl, - roomId, + roomAlias, participants, client, disableFacepile, @@ -75,7 +75,7 @@ function CallTile({ return (
{name} - {getRoomUrl(roomId)} + {getRoomUrl(roomAlias)} {participants && !disableFacepile && (
); diff --git a/src/home/useGroupCallRooms.ts b/src/home/useGroupCallRooms.ts index fcbe67ff..b1eb2e7a 100644 --- a/src/home/useGroupCallRooms.ts +++ b/src/home/useGroupCallRooms.ts @@ -22,7 +22,7 @@ import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEv import { useState, useEffect } from "react"; export interface GroupCallRoom { - roomId: string; + roomAlias: string; roomName: string; avatarUrl: string; room: Room; @@ -79,23 +79,24 @@ function sortRooms(client: MatrixClient, rooms: Room[]): Room[] { } export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] { - const [rooms, setRooms] = useState([]); + const [rooms, setRooms] = useState([]); useEffect(() => { function updateRooms() { const groupCalls = client.groupCallEventHandler.groupCalls.values(); const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room); - const sortedRooms = sortRooms(client, rooms); - const items = sortedRooms.map((room) => { + const filteredRooms = rooms.filter((r) => r.getCanonicalAlias()); // We don't display rooms without an alias + const sortedRooms = sortRooms(client, filteredRooms); + const items: GroupCallRoom[] = sortedRooms.map((room) => { const groupCall = client.getGroupCallForRoom(room.roomId); return { - roomId: room.getCanonicalAlias() || room.roomId, + roomAlias: room.getCanonicalAlias(), roomName: room.name, avatarUrl: room.getMxcAvatarUrl(), room, groupCall, - participants: [...groupCall.participants], + participants: [...groupCall.participants.keys()], }; }); setRooms(items); diff --git a/test/home/CallList-test.tsx b/test/home/CallList-test.tsx index 7b3925d4..7dfb7b21 100644 --- a/test/home/CallList-test.tsx +++ b/test/home/CallList-test.tsx @@ -34,7 +34,7 @@ describe("CallList", () => { it("should show room", async () => { const rooms = [ - { roomName: "Room #1", roomId: "!roomId" }, + { roomName: "Room #1", roomAlias: "!roomId" }, ] as GroupCallRoom[]; const result = renderComponent(rooms);