mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-13 18:50:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add state listener so the call activity is real time updated on joins/leaves within the space

Browse source
This commit is contained in:
Gigiaj 2025-05-04 12:15:31 -05:00
parent b40ddf0c61
commit 9cb705149a
1 changed files with 17 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/app/pages/client/space/Space.tsx
View file

@ -23,11 +23,10 @@ import {
toRem, toRem,
} from 'folds'; } from 'folds';
import { useVirtualizer } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual';
import { JoinRule, Room, RoomMember } from 'matrix-js-sdk'; import { JoinRule, Room } from 'matrix-js-sdk';
import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types'; import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import { logger } from 'matrix-js-sdk/lib/logger'; import { logger } from 'matrix-js-sdk/lib/logger';
import { WidgetApiToWidgetAction } from 'matrix-widget-api';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { mDirectAtom } from '../../../state/mDirectList'; import { mDirectAtom } from '../../../state/mDirectList';
import { import {
@ -38,7 +37,7 @@ import {
NavLink, NavLink,
} from '../../../components/nav'; } from '../../../components/nav';
import { getSpaceLobbyPath, getSpaceRoomPath, getSpaceSearchPath } from '../../pathUtils'; import { getSpaceLobbyPath, getSpaceRoomPath, getSpaceSearchPath } from '../../pathUtils';
import { getCanonicalAliasOrRoomId, getMxIdLocalPart, isRoomAlias } from '../../../utils/matrix'; import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../../utils/matrix';
import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom'; import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
import { import {
useSpaceLobbySelected, useSpaceLobbySelected,
@ -78,12 +77,10 @@ import {
useRoomsNotificationPreferencesContext, useRoomsNotificationPreferencesContext,
} from '../../../hooks/useRoomsNotificationPreferences'; } from '../../../hooks/useRoomsNotificationPreferences';
import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings'; import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
import { useCallState } from '../CallProvider';
import { CallNavBottom } from '../../call/CallNavBottom'; import { CallNavBottom } from '../../call/CallNavBottom';
import { getMemberDisplayName, getStateEvents } from '../../../utils/room'; import { getStateEvents } from '../../../utils/room';
import { useRoomMembers } from '../../../hooks/useRoomMembers'; import { RoomNavUser } from '../../../features/room-nav/RoomNavUser';
import { UserAvatar } from '../../../components/user-avatar'; import { useStateEvents } from '../../../hooks/useStateEvents';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
/** /**
* Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
@ -398,8 +395,6 @@ export function Space() {
const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom()); const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
const useAuthentication = useMediaAuthentication();
const getRoom = useCallback( const getRoom = useCallback(
(rId: string): Room | undefined => { (rId: string): Room | undefined => {
if (allJoinedRooms.has(rId)) { if (allJoinedRooms.has(rId)) {
@ -431,12 +426,20 @@ export function Space() {
) )
); );
const members = useRoomMembers(mx, space.roomId); const callRooms = useMemo(
() =>
hierarchy
.map((item) => mx.getRoom(item.roomId))
.filter((room): room is Room => !!room && room.isCallRoom()),
[hierarchy, mx]
);
const updateTrigger = useStateEvents(callRooms, StateEvent.GroupCallMemberPrefix);
//.getMxcAvatarUrl()
const processedHierarchy = useMemo( const processedHierarchy = useMemo(
() => processHierarchyForVirtualizer(hierarchy, mx, space.roomId, closedCategories), () => processHierarchyForVirtualizer(hierarchy, mx, space.roomId, closedCategories),
[hierarchy, mx, space.roomId, closedCategories] // eslint-disable-next-line react-hooks/exhaustive-deps
[hierarchy, mx, space.roomId, closedCategories, updateTrigger]
); );
const virtualizer = useVirtualizer({ const virtualizer = useVirtualizer({
@ -562,41 +565,9 @@ export function Space() {
} }
case 'user': { case 'user': {
const { sender, room } = item; const { sender, room } = item;
const member = members.find((roomMember) => roomMember.userId === sender);
const avatarMxcUrl = member?.getMxcAvatarUrl();
const avatarUrl = avatarMxcUrl
? mx.mxcUrlToHttp(
avatarMxcUrl,
32,
32,
'crop',
undefined,
false,
useAuthentication
)
: undefined;
const getName =
getMemberDisplayName(room, member?.userId ?? '') ??
getMxIdLocalPart(member?.userId ?? '') ??
member?.userId;
return ( return (
<Box> <Box>
<NavItem variant="Background" radii="400"> <RoomNavUser room={room} space={space} sender={sender} />
<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>
{getName}
</Box>
</NavItemContent>
</NavItem>
</Box> </Box>
); );
} }