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/hooks/useCall.ts

@@ -2,6 +2,7 @@ import { Room } from 'matrix-js-sdk';
 import {
   MatrixRTCSession,
   MatrixRTCSessionEvent,
+  MatrixRTCSessionEventHandlerMap,
 } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
 import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import { useEffect, useState } from 'react';
@@ -33,32 +34,27 @@ export const useCallSession = (room: Room): MatrixRTCSession => {
   return session;
 };
 
-export const useCallMembers = (room: Room, session: MatrixRTCSession): CallMembership[] => {
-  const [memberships, setMemberships] = useState<CallMembership[]>(
-    MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription)
-  );
-
+export const useCallMembersChange = (
+  session: MatrixRTCSession,
+  callback: (members: CallMembership[]) => void
+): void => {
   useEffect(() => {
-    const updateMemberships = () => {
-      setMemberships(MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription));
-    };
+    const handleMembershipsChange: MatrixRTCSessionEventHandlerMap[MatrixRTCSessionEvent.MembershipsChanged] =
+      (oldestMembership, newMemberships) => {
+        callback(newMemberships);
+      };
 
-    updateMemberships();
-
-    session.on(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    session.on(MatrixRTCSessionEvent.MembershipsChanged, handleMembershipsChange);
     return () => {
-      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
-    };
-  }, [session, room]);
-
-  return memberships;
-};
-
-export const useCallMembersChange = (session: MatrixRTCSession, callback: () => void): void => {
-  useEffect(() => {
-    session.on(MatrixRTCSessionEvent.MembershipsChanged, callback);
-    return () => {
-      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, callback);
+      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, handleMembershipsChange);
     };
   }, [session, callback]);
 };
+
+export const useCallMembers = (session: MatrixRTCSession): CallMembership[] => {
+  const [memberships, setMemberships] = useState<CallMembership[]>(session.memberships);
+
+  useCallMembersChange(session, setMemberships);
+
+  return memberships;
+};

src/app/hooks/useCallEmbed.ts

@@ -1,5 +1,4 @@
 import { createContext, RefObject, useCallback, useContext, useEffect, useState } from 'react';
-import { MatrixRTCSession } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
 import { MatrixClient, Room } from 'matrix-js-sdk';
 import { useSetAtom } from 'jotai';
 import {
@@ -45,8 +44,7 @@ export const createCallEmbed = (
   pref?: CallPreferences
 ): CallEmbed => {
   const rtcSession = mx.matrixRTC.getRoomSession(room);
-  const ongoing =
-    MatrixRTCSession.sessionMembershipsForRoom(room, rtcSession.sessionDescription).length > 0;
+  const ongoing = rtcSession.memberships.length > 0;
 
   const intent = CallEmbed.getIntent(dm, ongoing, pref?.video);
   const widget = CallEmbed.getWidget(mx, room, intent, themeKind);

src/app/hooks/useCallSpeakers.ts

@@ -8,7 +8,7 @@ import { useCallJoined } from './useCallEmbed';
 export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
   const [speakers, setSpeakers] = useState(new Set<string>());
   const callSession = useCallSession(callEmbed.room);
-  const callMembers = useCallMembers(callEmbed.room, callSession);
+  const callMembers = useCallMembers(callSession);
   const joined = useCallJoined(callEmbed);
 
   const videoContainers = useMemo(() => {