rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix alias vs id + participants bug

Browse Source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner
2023-07-03 19:23:26 +02:00
parent fdc41aaa50
commit e1ef18093f
3 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/home/CallList.tsx
View File

@@ -35,13 +35,13 @@ export function CallList({ rooms, client, disableFacepile }: CallListProps) {
return ( return (
<> <>
<div className={styles.callList}> <div className={styles.callList}>
{rooms.map(({ roomId, roomName, avatarUrl, participants }) => ( {rooms.map(({ roomAlias, roomName, avatarUrl, participants }) => (
<CallTile <CallTile
key={roomId} key={roomAlias}
client={client} client={client}
name={roomName} name={roomName}
avatarUrl={avatarUrl} avatarUrl={avatarUrl}
roomId={roomId} roomAlias={roomAlias}
participants={participants} participants={participants}
disableFacepile={disableFacepile} disableFacepile={disableFacepile}
/> />
@@ -59,7 +59,7 @@ export function CallList({ rooms, client, disableFacepile }: CallListProps) {
interface CallTileProps { interface CallTileProps {
name: string; name: string;
avatarUrl: string; avatarUrl: string;
roomId: string; roomAlias: string;
participants: RoomMember[]; participants: RoomMember[];
client: MatrixClient; client: MatrixClient;
disableFacepile?: boolean; disableFacepile?: boolean;
@@ -67,7 +67,7 @@ interface CallTileProps {
function CallTile({ function CallTile({
name, name,
avatarUrl, avatarUrl,
roomId, roomAlias,
participants, participants,
client, client,
disableFacepile, disableFacepile,
@@ -75,7 +75,7 @@ function CallTile({
return ( return (
<div className={styles.callTile}> <div className={styles.callTile}>
<Link <Link
to={`/${roomId.substring(1).split(":")[0]}`} to={`/${roomAlias.substring(1).split(":")[0]}`}
className={styles.callTileLink} className={styles.callTileLink}
> >
<Avatar <Avatar
@@ -89,7 +89,7 @@ function CallTile({
<Body overflowEllipsis fontWeight="semiBold"> <Body overflowEllipsis fontWeight="semiBold">
{name} {name}
</Body> </Body>
<Caption overflowEllipsis>{getRoomUrl(roomId)}</Caption> <Caption overflowEllipsis>{getRoomUrl(roomAlias)}</Caption>
{participants && !disableFacepile && ( {participants && !disableFacepile && (
<Facepile <Facepile
className={styles.facePile} className={styles.facePile}
@@ -103,7 +103,7 @@ function CallTile({
<CopyButton <CopyButton
className={styles.copyButton} className={styles.copyButton}
variant="icon" variant="icon"
value={getRoomUrl(roomId)} value={getRoomUrl(roomAlias)}
/> />
</div> </div>
); );

13
src/home/useGroupCallRooms.ts
View File

@@ -22,7 +22,7 @@ import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEv
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
export interface GroupCallRoom { export interface GroupCallRoom {
roomId: string; roomAlias: string;
roomName: string; roomName: string;
avatarUrl: string; avatarUrl: string;
room: Room; room: Room;
@@ -79,23 +79,24 @@ function sortRooms(client: MatrixClient, rooms: Room[]): Room[] {
} }
export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] { export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
const [rooms, setRooms] = useState([]); const [rooms, setRooms] = useState<GroupCallRoom[]>([]);
useEffect(() => { useEffect(() => {
function updateRooms() { function updateRooms() {
const groupCalls = client.groupCallEventHandler.groupCalls.values(); const groupCalls = client.groupCallEventHandler.groupCalls.values();
const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room); const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room);
const sortedRooms = sortRooms(client, rooms); const filteredRooms = rooms.filter((r) => r.getCanonicalAlias()); // We don't display rooms without an alias
const items = sortedRooms.map((room) => { const sortedRooms = sortRooms(client, filteredRooms);
const items: GroupCallRoom[] = sortedRooms.map((room) => {
const groupCall = client.getGroupCallForRoom(room.roomId); const groupCall = client.getGroupCallForRoom(room.roomId);
return { return {
roomId: room.getCanonicalAlias() || room.roomId, roomAlias: room.getCanonicalAlias(),
roomName: room.name, roomName: room.name,
avatarUrl: room.getMxcAvatarUrl(), avatarUrl: room.getMxcAvatarUrl(),
room, room,
groupCall, groupCall,
participants: [...groupCall.participants], participants: [...groupCall.participants.keys()],
}; };
}); });
setRooms(items); setRooms(items);

2
test/home/CallList-test.tsx
View File

@@ -34,7 +34,7 @@ describe("CallList", () => {
it("should show room", async () => { it("should show room", async () => {
const rooms = [ const rooms = [
{ roomName: "Room #1", roomId: "!roomId" }, { roomName: "Room #1", roomAlias: "!roomId" },
] as GroupCallRoom[]; ] as GroupCallRoom[];
const result = renderComponent(rooms); const result = renderComponent(rooms);