changes to RoomNavItem, RoomNavUser and add useCallMembers

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

@@ -22,7 +22,7 @@ import {
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
 import { useParams } from 'react-router-dom';
-import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
+import { NavButton, NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
@@ -53,8 +53,10 @@ import {
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import { useCallState } from '../../pages/client/call/CallProvider';
+import { useCallMembers } from '../../hooks/useCallMembers';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { RoomNavUser } from './RoomNavUser';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -237,6 +239,7 @@ export function RoomNavItem({
     (receipt) => receipt.userId !== mx.getUserId()
   );
   const isActiveCall = isCallActive && activeCallRoomId === room.roomId;
+  const callMembers = useCallMembers(mx, room.roomId);
   const { navigateRoom } = useRoomNavigate();
   const { roomIdOrAlias: viewedRoomId } = useParams();
   const screenSize = useScreenSizeContext();
@@ -293,8 +296,23 @@ export function RoomNavItem({
   };
 
   const optionsVisible = hover || !!menuAnchor;
+  const ariaLabel = [
+    room.name,
+    room.isCallRoom()
+      ? [
+          'Call Room',
+          isActiveCall && 'Currently in Call',
+          callMembers.length && `${callMembers.length} in Call`,
+        ]
+      : 'Text Room',
+    unread?.total && `${unread.total} Messages`,
+  ]
+    .flat()
+    .filter(Boolean)
+    .join(', ');
 
   return (
+    <Box direction="Column" grow="Yes">
       <NavItem
         variant="Background"
         radii="400"
@@ -305,7 +323,8 @@ export function RoomNavItem({
         {...hoverProps}
         {...focusWithinProps}
       >
-      <NavItemContent onClick={handleNavItemClick}>
+        <NavButton onClick={handleNavItemClick} aria-label={ariaLabel}>
+          <NavItemContent>
             <Box as="span" grow="Yes" alignItems="Center" gap="200">
               <Avatar size="200" radii="400">
                 {showAvatar ? (
@@ -356,13 +375,19 @@ export function RoomNavItem({
                 </UnreadBadgeCenter>
               )}
               {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
-            <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
+                <Icon
+                  size="50"
+                  src={getRoomNotificationModeIcon(notificationMode)}
+                  aria-label={notificationMode}
+                />
               )}
             </Box>
           </NavItemContent>
           {optionsVisible && (
             <NavItemOptions>
               <PopOut
+                id={`menu-${room.roomId}`}
+                aria-expanded={!!menuAnchor}
                 anchor={menuAnchor}
                 offset={menuAnchor?.width === 0 ? 0 : undefined}
                 alignOffset={menuAnchor?.width === 0 ? 0 : -5}
@@ -404,6 +429,7 @@ export function RoomNavItem({
                         data-testid="chat-button"
                         onClick={handleChatButtonClick}
                         aria-pressed={isChatOpen && selected}
+                        aria-label="Open Chat"
                         variant="Background"
                         fill="None"
                         size="300"
@@ -419,6 +445,8 @@ export function RoomNavItem({
                 <IconButton
                   onClick={handleOpenMenu}
                   aria-pressed={!!menuAnchor}
+                  aria-controls={`menu-${room.roomId}`}
+                  aria-label="More Options"
                   variant="Background"
                   fill="None"
                   size="300"
@@ -429,6 +457,15 @@ export function RoomNavItem({
               </PopOut>
             </NavItemOptions>
           )}
+        </NavButton>
       </NavItem>
+      {room.isCallRoom() && (
+        <Box direction="Column" style={{ paddingLeft: config.space.S200 }}>
+          {callMembers.map((userId) => (
+            <RoomNavUser room={room} userId={userId} />
+          ))}
+        </Box>
+      )}
+    </Box>
   );
 }

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

@@ -1,51 +1,163 @@
-import { Avatar, Box, Icon, Icons, Text } from 'folds';
+import {
-import React from 'react';
+  Avatar,
+  Box,
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Text,
+  Tooltip,
+  TooltipProvider,
+} from 'folds';
+import React, { useState } from 'react';
 import { Room } from 'matrix-js-sdk';
-import { NavItem, NavItemContent } from '../../components/nav';
+import { useFocusWithin, useHover } from 'react-aria';
+import { NavItem, NavItemContent, NavItemOptions } from '../../components/nav';
 import { UserAvatar } from '../../components/user-avatar';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { useCallState } from '../../pages/client/call/CallProvider';
 import { getMxIdLocalPart } from '../../utils/matrix';
-import { getMemberDisplayName } from '../../utils/room';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { openProfileViewer } from '../../../client/action/navigation';
 
 type RoomNavUserProps = {
   room: Room;
-  space: Room;
+  userId: string;
-  sender: string;
 };
-export function RoomNavUser({ room, space, sender }: RoomNavUserProps) {
+export function RoomNavUser({ room, userId }: RoomNavUserProps) {
   const mx = useMatrixClient();
-  const members = useRoomMembers(mx, space.roomId);
   const useAuthentication = useMediaAuthentication();
-
+  const [navUserExpanded, setNavUserExpanded] = useState(false);
-  const member = members.find((roomMember) => roomMember.userId === sender);
+  const [hover, setHover] = useState(false);
-  const avatarMxcUrl = member?.getMxcAvatarUrl();
+  const { hoverProps } = useHover({ onHoverChange: setHover });
+  const { focusWithinProps } = useFocusWithin({
+    onFocusWithinChange: (isFocused) => {
+      setHover(isFocused);
+      if (!isFocused) setNavUserExpanded(false);
+    },
+  });
+  const { isCallActive, activeCallRoomId } = useCallState();
+  const isActiveCall = isCallActive && activeCallRoomId === room.roomId;
+  const avatarMxcUrl = getMemberAvatarMxc(room, userId);
   const avatarUrl = avatarMxcUrl
     ? mx.mxcUrlToHttp(avatarMxcUrl, 32, 32, 'crop', undefined, false, useAuthentication)
     : undefined;
-  const getName =
+  const getName = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
-    getMemberDisplayName(room, member?.userId ?? '') ??
+  const isCallParticipant = isActiveCall && userId !== mx.getUserId();
-    getMxIdLocalPart(member?.userId ?? '') ??
+
-    member?.userId;
+  const handleNavUserClick = () => {
+    if (isCallParticipant) {
+      setNavUserExpanded((prev) => !prev);
+    }
+  };
+
+  const handleClickUser = () => {
+    openProfileViewer(userId, room.roomId);
+  };
+
+  // PLACEHOLDER
+  const [userMuted, setUserMuted] = useState(false);
+  const handleToggleMute = () => {
+    setUserMuted(!userMuted);
+  };
+
+  const optionsVisible = (hover || userMuted || navUserExpanded) && isCallParticipant && false; // Disable until individual volume control and mute have been added
+  const ariaLabel = isCallParticipant
+    ? `Call Participant: ${getName}${userMuted ? ', Muted' : ''}`
+    : getName;
 
   return (
-    <NavItem variant="Background" radii="400">
+    <NavItem
-      <NavItemContent>
+      tabIndex={0}
-        <Box as="span" grow="Yes" alignItems="Center" gap="200">
+      variant="Background"
+      radii="400"
+      style={{ paddingTop: config.space.S200, paddingBottom: config.space.S200 }}
+      {...hoverProps}
+      {...focusWithinProps}
+      aria-label={ariaLabel}
+    >
+      <NavItemContent onClick={handleNavUserClick}>
+        <Box direction="Column" grow="Yes" gap="200" justifyContent="Stretch">
+          <Box as="span" alignItems="Center" gap="200">
             <Avatar size="200">
               <UserAvatar
-              userId={member?.userId ?? ''}
+                userId={userId}
                 src={avatarUrl ?? undefined}
                 alt={getName}
                 renderFallback={() => <Icon size="50" src={Icons.User} filled />}
               />
             </Avatar>
-          <Text size="B400" priority="300" truncate>
+            <Text
+              size="B400"
+              priority="300"
+              // Set priority based on if talking
+              truncate
+            >
               {getName}
             </Text>
           </Box>
+          {navUserExpanded && (
+            <Box as="span" grow="Yes" alignItems="Center" gap="200">
+              {/* Slider here, when implemented into folds */}
+              <Text>---- THIS IS A SLIDER ---</Text>
+            </Box>
+          )}
+        </Box>
       </NavItemContent>
+      {optionsVisible && (
+        <NavItemOptions direction="Column" justifyContent="SpaceBetween">
+          <TooltipProvider
+            position="Bottom"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>{userMuted ? 'Unmute' : 'Mute'}</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                ref={triggerRef}
+                onClick={handleToggleMute}
+                aria-pressed={userMuted}
+                aria-label={userMuted ? `Unmute ${getName}` : `Mute ${getName}`}
+                variant={userMuted ? 'Critical' : 'Background'}
+                fill="None"
+                size="300"
+                radii="300"
+              >
+                <Icon size="50" src={userMuted ? Icons.VolumeMute : Icons.VolumeHigh} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+          {navUserExpanded && (
+            <TooltipProvider
+              position="Bottom"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>View Profile</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton
+                  ref={triggerRef}
+                  onClick={handleClickUser}
+                  aria-label="View Profile"
+                  variant="Background"
+                  fill="None"
+                  size="300"
+                  radii="300"
+                >
+                  <Icon size="50" src={Icons.User} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          )}
+        </NavItemOptions>
+      )}
     </NavItem>
   );
 }

src/app/hooks/useCallMembers.ts

@@ -0,0 +1,81 @@
+/*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;
+};