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,142 +296,176 @@ 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 (
-    <NavItem
-      variant="Background"
-      radii="400"
-      highlight={unread !== undefined}
-      aria-selected={selected}
-      data-hover={!!menuAnchor}
-      onContextMenu={handleContextMenu}
-      {...hoverProps}
-      {...focusWithinProps}
-    >
-      <NavItemContent onClick={handleNavItemClick}>
-        <Box as="span" grow="Yes" alignItems="Center" gap="200">
-          <Avatar size="200" radii="400">
-            {showAvatar ? (
-              <RoomAvatar
-                roomId={room.roomId}
-                src={
-                  direct
-                    ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-                    : getRoomAvatarUrl(mx, room, 96, useAuthentication)
-                }
-                alt={room.name}
-                renderFallback={() => (
-                  <Text as="span" size="H6">
-                    {nameInitials(room.name)}
-                  </Text>
+    <Box direction="Column" grow="Yes">
+      <NavItem
+        variant="Background"
+        radii="400"
+        highlight={unread !== undefined}
+        aria-selected={selected}
+        data-hover={!!menuAnchor}
+        onContextMenu={handleContextMenu}
+        {...hoverProps}
+        {...focusWithinProps}
+      >
+        <NavButton onClick={handleNavItemClick} aria-label={ariaLabel}>
+          <NavItemContent>
+            <Box as="span" grow="Yes" alignItems="Center" gap="200">
+              <Avatar size="200" radii="400">
+                {showAvatar ? (
+                  <RoomAvatar
+                    roomId={room.roomId}
+                    src={
+                      direct
+                        ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                        : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                    }
+                    alt={room.name}
+                    renderFallback={() => (
+                      <Text as="span" size="H6">
+                        {nameInitials(room.name)}
+                      </Text>
+                    )}
+                  />
+                ) : (
+                  <RoomIcon
+                    style={{
+                      opacity: unread || isActiveCall ? config.opacity.P500 : config.opacity.P300,
+                    }}
+                    filled={selected || isActiveCall}
+                    size="100"
+                    joinRule={room.getJoinRule()}
+                    call={room.isCallRoom()}
+                  />
                 )}
-              />
-            ) : (
-              <RoomIcon
-                style={{
-                  opacity: unread || isActiveCall ? config.opacity.P500 : config.opacity.P300,
-                }}
-                filled={selected || isActiveCall}
-                size="100"
-                joinRule={room.getJoinRule()}
-                call={room.isCallRoom()}
-              />
-            )}
-          </Avatar>
-          <Box as="span" grow="Yes">
-            <Text
-              priority={unread || isActiveCall ? '500' : '300'}
-              as="span"
-              size="Inherit"
-              truncate
-            >
-              {room.name}
-            </Text>
-          </Box>
-          {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
-            <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
-              <TypingIndicator size="300" disableAnimation />
-            </Badge>
-          )}
-          {!optionsVisible && unread && (
-            <UnreadBadgeCenter>
-              <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
-            </UnreadBadgeCenter>
-          )}
-          {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
-            <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
-          )}
-        </Box>
-      </NavItemContent>
-      {optionsVisible && (
-        <NavItemOptions>
-          <PopOut
-            anchor={menuAnchor}
-            offset={menuAnchor?.width === 0 ? 0 : undefined}
-            alignOffset={menuAnchor?.width === 0 ? 0 : -5}
-            position="Bottom"
-            align={menuAnchor?.width === 0 ? 'Start' : 'End'}
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  returnFocusOnDeactivate: false,
-                  onDeactivate: () => setMenuAnchor(undefined),
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <RoomNavItemMenu
-                  room={room}
-                  requestClose={() => setMenuAnchor(undefined)}
-                  notificationMode={notificationMode}
+              </Avatar>
+              <Box as="span" grow="Yes">
+                <Text
+                  priority={unread || isActiveCall ? '500' : '300'}
+                  as="span"
+                  size="Inherit"
+                  truncate
+                >
+                  {room.name}
+                </Text>
+              </Box>
+              {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
+                <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
+                  <TypingIndicator size="300" disableAnimation />
+                </Badge>
+              )}
+              {!optionsVisible && unread && (
+                <UnreadBadgeCenter>
+                  <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
+                </UnreadBadgeCenter>
+              )}
+              {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
+                <Icon
+                  size="50"
+                  src={getRoomNotificationModeIcon(notificationMode)}
+                  aria-label={notificationMode}
                 />
-              </FocusTrap>
-            }
-          >
-            {room.isCallRoom() && (
-              <TooltipProvider
+              )}
+            </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}
                 position="Bottom"
-                offset={4}
-                tooltip={
-                  <Tooltip>
-                    <Text>Open Chat</Text>
-                  </Tooltip>
+                align={menuAnchor?.width === 0 ? 'Start' : 'End'}
+                content={
+                  <FocusTrap
+                    focusTrapOptions={{
+                      initialFocus: false,
+                      returnFocusOnDeactivate: false,
+                      onDeactivate: () => setMenuAnchor(undefined),
+                      clickOutsideDeactivates: true,
+                      isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                      isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                      escapeDeactivates: stopPropagation,
+                    }}
+                  >
+                    <RoomNavItemMenu
+                      room={room}
+                      requestClose={() => setMenuAnchor(undefined)}
+                      notificationMode={notificationMode}
+                    />
+                  </FocusTrap>
                 }
               >
-                {(triggerRef) => (
-                  <IconButton
-                    ref={triggerRef}
-                    data-testid="chat-button"
-                    onClick={handleChatButtonClick}
-                    aria-pressed={isChatOpen && selected}
-                    variant="Background"
-                    fill="None"
-                    size="300"
-                    radii="300"
+                {room.isCallRoom() && (
+                  <TooltipProvider
+                    position="Bottom"
+                    offset={4}
+                    tooltip={
+                      <Tooltip>
+                        <Text>Open Chat</Text>
+                      </Tooltip>
+                    }
                   >
-                    <NavLink to={linkPath}>
-                      <Icon size="50" src={Icons.Message} />
-                    </NavLink>
-                  </IconButton>
+                    {(triggerRef) => (
+                      <IconButton
+                        ref={triggerRef}
+                        data-testid="chat-button"
+                        onClick={handleChatButtonClick}
+                        aria-pressed={isChatOpen && selected}
+                        aria-label="Open Chat"
+                        variant="Background"
+                        fill="None"
+                        size="300"
+                        radii="300"
+                      >
+                        <NavLink to={linkPath}>
+                          <Icon size="50" src={Icons.Message} />
+                        </NavLink>
+                      </IconButton>
+                    )}
+                  </TooltipProvider>
                 )}
-              </TooltipProvider>
-            )}
-            <IconButton
-              onClick={handleOpenMenu}
-              aria-pressed={!!menuAnchor}
-              variant="Background"
-              fill="None"
-              size="300"
-              radii="300"
-            >
-              <Icon size="50" src={Icons.VerticalDots} />
-            </IconButton>
-          </PopOut>
-        </NavItemOptions>
+                <IconButton
+                  onClick={handleOpenMenu}
+                  aria-pressed={!!menuAnchor}
+                  aria-controls={`menu-${room.roomId}`}
+                  aria-label="More Options"
+                  variant="Background"
+                  fill="None"
+                  size="300"
+                  radii="300"
+                >
+                  <Icon size="50" src={Icons.VerticalDots} />
+                </IconButton>
+              </PopOut>
+            </NavItemOptions>
+          )}
+        </NavButton>
+      </NavItem>
+      {room.isCallRoom() && (
+        <Box direction="Column" style={{ paddingLeft: config.space.S200 }}>
+          {callMembers.map((userId) => (
+            <RoomNavUser room={room} userId={userId} />
+          ))}
+        </Box>
       )}
-    </NavItem>
+    </Box>
   );
 }

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

@@ -1,51 +1,163 @@
-import { Avatar, Box, Icon, Icons, Text } from 'folds';
-import React from 'react';
+import {
+  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;
-  sender: string;
+  userId: 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 member = members.find((roomMember) => roomMember.userId === sender);
-  const avatarMxcUrl = member?.getMxcAvatarUrl();
+  const [navUserExpanded, setNavUserExpanded] = useState(false);
+  const [hover, setHover] = useState(false);
+  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 =
-    getMemberDisplayName(room, member?.userId ?? '') ??
-    getMxIdLocalPart(member?.userId ?? '') ??
-    member?.userId;
+  const getName = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+  const isCallParticipant = isActiveCall && userId !== mx.getUserId();
+
+  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">
-      <NavItemContent>
-        <Box as="span" grow="Yes" alignItems="Center" gap="200">
-          <Avatar size="200">
-            <UserAvatar
-              userId={member?.userId ?? ''}
-              src={avatarUrl ?? undefined}
-              alt={getName}
-              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-            />
-          </Avatar>
-          <Text size="B400" priority="300" truncate>
-            {getName}
-          </Text>
+    <NavItem
+      tabIndex={0}
+      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={userId}
+                src={avatarUrl ?? undefined}
+                alt={getName}
+                renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+              />
+            </Avatar>
+            <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;
+};