Merge pull request #54 from GigiaJ/pr-41

Pr 41

src/app/features/room-nav/RoomNavItem.tsx

@@ -53,7 +53,7 @@ import {
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import { useCallState } from '../../pages/client/call/CallProvider';
-import { useCallMembers } from '../../hooks/useCallMembers';
+import { useCallMembers } from '../../hooks/useCallMemberships';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { RoomNavUser } from './RoomNavUser';
@@ -239,7 +239,7 @@ export function RoomNavItem({
     (receipt) => receipt.userId !== mx.getUserId()
   );
   const isActiveCall = isCallActive && activeCallRoomId === room.roomId;
-  const callMembers = useCallMembers(mx, room.roomId);
+  const callMemberships = useCallMembers(mx, room.roomId);
   const { navigateRoom } = useRoomNavigate();
   const { roomIdOrAlias: viewedRoomId } = useParams();
   const screenSize = useScreenSizeContext();
@@ -302,7 +302,7 @@ export function RoomNavItem({
       ? [
           'Call Room',
           isActiveCall && 'Currently in Call',
-          callMembers.length && `${callMembers.length} in Call`,
+          callMemberships.length && `${callMemberships.length} in Call`,
         ]
       : 'Text Room',
     unread?.total && `${unread.total} Messages`,
@@ -461,8 +461,8 @@ export function RoomNavItem({
       </NavItem>
       {room.isCallRoom() && (
         <Box direction="Column" style={{ paddingLeft: config.space.S200 }}>
-          {callMembers.map((userId) => (
+          {callMemberships.map((callMembership) => (
-            <RoomNavUser room={room} userId={userId} />
+            <RoomNavUser room={room} callMembership={callMembership} />
           ))}
         </Box>
       )}

src/app/features/room-nav/RoomNavUser.tsx

@@ -12,6 +12,7 @@ import {
 import React, { useState } from 'react';
 import { Room } from 'matrix-js-sdk';
 import { useFocusWithin, useHover } from 'react-aria';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import { NavItem, NavItemContent, NavItemOptions } from '../../components/nav';
 import { UserAvatar } from '../../components/user-avatar';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -23,9 +24,9 @@ import { openProfileViewer } from '../../../client/action/navigation';
 
 type RoomNavUserProps = {
   room: Room;
-  userId: string;
+  callMembership: CallMembership;
 };
-export function RoomNavUser({ room, userId }: RoomNavUserProps) {
+export function RoomNavUser({ room, callMembership }: RoomNavUserProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const [navUserExpanded, setNavUserExpanded] = useState(false);
@@ -39,11 +40,12 @@ export function RoomNavUser({ room, userId }: RoomNavUserProps) {
   });
   const { isCallActive, activeCallRoomId } = useCallState();
   const isActiveCall = isCallActive && activeCallRoomId === room.roomId;
+  const userId = callMembership.sender ?? '';
   const avatarMxcUrl = getMemberAvatarMxc(room, userId);
   const avatarUrl = avatarMxcUrl
     ? mx.mxcUrlToHttp(avatarMxcUrl, 32, 32, 'crop', undefined, false, useAuthentication)
     : undefined;
-  const getName = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+  const getName = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId);
   const isCallParticipant = isActiveCall && userId !== mx.getUserId();
 
   const handleNavUserClick = () => {

src/app/hooks/useCallMembers.ts

@@ -1,81 +0,0 @@
-/*import { MatrixClient } from 'matrix-js-sdk';
-import {
-  MatrixRTCSession,
-  MatrixRTCSessionEvent,
-} from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
-import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
-import { useEffect, useState } from 'react';
-
-export const useCallMembers = (
-  mx: MatrixClient,
-  mxr: MatrixRTCSession,
-  roomId: string
-): CallMembership[] => {
-  const [memberships, setMemberships] = useState<CallMembership[]>([]);
-
-  useEffect(() => {
-    const room = mx.getRoom(roomId);
-
-    const updateMemberships = () => {
-      if (!room?.isCallRoom()) return;
-      setMemberships(MatrixRTCSession.callMembershipsForRoom(room));
-      //setMemberships(mxr.memberships);
-      //console.log('MEMBERSHIPS:');
-      //console.log(memberships);
-    };
-
-    updateMemberships();
-
-    mxr.on(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
-    return () => {
-      mxr.removeListener(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
-    };
-  }, [mx, mxr, roomId]);
-
-  return memberships;
-};*/
-
-// TEMPORARY
-import { MatrixClient, MatrixEvent, RoomStateEvent } from 'matrix-js-sdk';
-import { useEffect, useMemo, useState } from 'react';
-import { getStateEvents } from '../utils/room';
-import { StateEvent } from '../../types/matrix/room';
-
-export const useCallMembers = (mx: MatrixClient, roomId: string): string[] => {
-  const [events, setEvents] = useState<MatrixEvent[]>([]);
-
-  useEffect(() => {
-    const room = mx.getRoom(roomId);
-
-    const updateEvents = (event?: MatrixEvent) => {
-      if (!room?.isCallRoom() || (event && event.getRoomId() !== roomId)) return;
-      setEvents(getStateEvents(room, StateEvent.GroupCallMemberPrefix));
-    };
-
-    updateEvents();
-
-    mx.on(RoomStateEvent.Events, updateEvents);
-    return () => {
-      mx.removeListener(RoomStateEvent.Events, updateEvents);
-    };
-  }, [mx, roomId]);
-
-  const participants = useMemo(
-    () =>
-      events
-        .filter((ev) => {
-          const content = ev.getContent();
-          return (
-            content &&
-            ev.getSender() &&
-            content.expires &&
-            ev.getTs() + content.expires > Date.now()
-          );
-        })
-        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        .map((ev) => ev.getSender()!),
-    [events]
-  );
-
-  return participants;
-};

src/app/hooks/useCallMemberships.ts

@@ -0,0 +1,28 @@
+import { MatrixClient } from 'matrix-js-sdk';
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import { useEffect, useState } from 'react';
+
+export const useCallMembers = (mx: MatrixClient, roomId: string): CallMembership[] => {
+  const [memberships, setMemberships] = useState<CallMembership[]>([]);
+  const room = mx.getRoom(roomId);
+  const mxr = mx.matrixRTC.getRoomSession(room);
+  useEffect(() => {
+    const updateMemberships = () => {
+      if (!room?.isCallRoom()) return;
+      setMemberships(MatrixRTCSession.callMembershipsForRoom(room));
+    };
+
+    updateMemberships();
+
+    mxr.on(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    return () => {
+      mxr.removeListener(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    };
+  }, [mx, mxr, room, roomId]);
+
+  return memberships;
+};