mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-14 19:20:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #54 from GigiaJ/pr-41

Browse source 
Pr 41
This commit is contained in:
Jaggar 2025-07-05 07:07:33 +00:00 • committed by GitHub
commit 77f8a0409a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 38 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/app/features/room-nav/RoomNavItem.tsx
View file

@ -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) => (
<RoomNavUser room={room} userId={userId} />
{callMemberships.map((callMembership) => (
<RoomNavUser room={room} callMembership={callMembership} />
))}
</Box>
)}

8
src/app/features/room-nav/RoomNavUser.tsx
View file

@ -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 = () => {

81
src/app/hooks/useCallMembers.ts
View file

@ -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;
};

28
src/app/hooks/useCallMemberships.ts Normal file
View file

@ -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;
};