fix: call drop (#2954)

* update matrix-js-sdk and improve call driver

* remove unused room param from call members hook

* downgrade matrix-js-sdk to latest stable release

src/app/features/call-status/CallStatus.tsx

@@ -22,7 +22,7 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
   const { room } = callEmbed;
 
   const callSession = useCallSession(room);
-  const callMembers = useCallMembers(room, callSession);
+  const callMembers = useCallMembers(callSession);
   const screenSize = useScreenSize();
   const callJoined = useCallJoined(callEmbed);
   const speakers = useCallSpeakers(callEmbed);

src/app/features/call-status/LiveChip.tsx

@@ -82,7 +82,7 @@ export function LiveChip({ count, room, members }: LiveChipProps) {
 
                     return (
                       <MenuItem
-                        key={callMember.membershipID}
+                        key={callMember.memberId}
                         size="400"
                         variant="Surface"
                         radii="300"

src/app/features/call-status/MemberGlance.tsx

@@ -29,7 +29,7 @@ export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceP
   return (
     <Box alignItems="Center">
       {visibleMembers.map((callMember) => {
-        const userId = callMember.sender;
+        const { userId } = callMember;
         if (!userId) return null;
         const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
         const avatarMxc = getMemberAvatarMxc(room, userId);
@@ -39,7 +39,7 @@ export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceP
 
         return (
           <StackedAvatar
-            key={callMember.membershipID}
+            key={callMember.memberId}
             className={speakers.has(callMember.sender) ? css.SpeakerAvatarOutline : undefined}
             title={name}
             as="button"

src/app/features/call/CallMemberCard.tsx

@@ -1,4 +1,4 @@
-import { CallMembership, SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import React, { useState } from 'react';
 import { Avatar, Box, Icon, Icons, Text } from 'folds';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -12,12 +12,6 @@ import { UserAvatar } from '../../components/user-avatar';
 import { getMouseEventCords } from '../../utils/dom';
 import * as css from './styles.css';
 
-interface MemberWithMembershipData {
-  membershipData?: SessionMembershipData & {
-    'm.call.intent': 'video' | 'audio';
-  };
-}
-
 type CallMemberCardProps = {
   member: CallMembership;
 };
@@ -28,7 +22,7 @@ export function CallMemberCard({ member }: CallMemberCardProps) {
 
   const openUserProfile = useOpenUserRoomProfile();
 
-  const userId = member.sender;
+  const { userId } = member;
   if (!userId) return null;
 
   const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
@@ -37,13 +31,12 @@ export function CallMemberCard({ member }: CallMemberCardProps) {
     ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
     : undefined;
 
-  const audioOnly =
-    (member as unknown as MemberWithMembershipData).membershipData?.['m.call.intent'] === 'audio';
+  const audioOnly = member.callIntent === 'audio';
 
   return (
     <SequenceCard
       as="button"
-      key={member.membershipID}
+      key={member.memberId}
       className={css.CallMemberCard}
       variant="SurfaceVariant"
       radii="500"
@@ -92,7 +85,7 @@ export function CallMemberRenderer({
   return (
     <>
       {truncatedMembers.map((member) => (
-        <CallMemberCard key={member.membershipID} member={member} />
+        <CallMemberCard key={member.memberId} member={member} />
       ))}
       {members.length > max && (
         <SequenceCard

src/app/features/call/CallView.tsx

@@ -90,7 +90,7 @@ function CallPrescreen() {
   );
 
   const callSession = useCallSession(room);
-  const callMembers = useCallMembers(room, callSession);
+  const callMembers = useCallMembers(callSession);
   const hasParticipant = callMembers.length > 0;
 
   const callEmbed = useCallEmbed();

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

@@ -282,7 +282,7 @@ export function RoomNavItem({
 
   const optionsVisible = hover || !!menuAnchor;
   const callSession = useCallSession(room);
-  const callMembers = useCallMembers(room, callSession);
+  const callMembers = useCallMembers(callSession);
   const startCall = useCallStart(direct);
   const callEmbed = useCallEmbed();
   const callPref = useAtomValue(useCallPreferencesAtom());

src/app/features/room/Room.tsx

@@ -27,7 +27,7 @@ export function Room() {
   const mx = useMatrixClient();
 
   const callSession = useCallSession(room);
-  const callMembers = useCallMembers(room, callSession);
+  const callMembers = useCallMembers(callSession);
   const callEmbed = useCallEmbed();
 
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');

src/app/features/room/RoomTimeline.tsx

@@ -27,7 +27,6 @@ import { HTMLReactParserOptions } from 'html-react-parser';
 import classNames from 'classnames';
 import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
-import { SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import to from 'await-to-js';
 import { useAtomValue, useSetAtom } from 'jotai';
 import {
@@ -1475,7 +1474,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const senderId = mEvent.getSender() ?? '';
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-        const content = mEvent.getContent<SessionMembershipData>();
+        const content = mEvent.getContent();
         const prevContent = mEvent.getPrevContent();
 
         const callJoined = content.application;