Merge pull request #567 from vector-im/dbkr/waitUntilRoomReadyForGroupCalls

Use new method to wait until a room is ready for group calls

package.json

@@ -38,7 +38,7 @@
     "classnames": "^2.3.1",
     "color-hash": "^2.0.1",
     "events": "^3.3.0",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#45e56f8cc36c459ed43e405be4206e5e66b3ad98",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#98d119d6e1d39f1c5b01b36e7fda133e9f12f50c",
     "matrix-widget-api": "^1.0.0",
     "mermaid": "^8.13.8",
     "normalize.css": "^8.0.1",

src/room/GroupCallInspector.tsx

@@ -121,8 +121,11 @@ export function InspectorContextProvider({
 }: {
   children: React.ReactNode;
 }) {
-  // The context will be initialized empty.
-  // It is then set from within GroupCallInspector.
+  // We take the tuple of [currentState, setter] and stick
+  // it straight into the context for other things to call
+  // the setState method... this feels like a fairly severe
+  // contortion of the hooks API - is this really the best way
+  // to do this?
   const context = useState<InspectorContextState>({});
   return (
     <InspectorContext.Provider value={context}>

src/room/useLoadGroupCall.ts

@@ -21,7 +21,7 @@ import {
   GroupCallIntent,
 } from "matrix-js-sdk/src/webrtc/groupCall";
 import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEventHandler";
-import { ClientEvent } from "matrix-js-sdk/src/client";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
@@ -45,38 +45,15 @@ export const useLoadGroupCall = (
   useEffect(() => {
     setState({ loading: true });
 
-    const waitForRoom = async (roomId: string): Promise<Room> => {
-      const room = client.getRoom(roomId);
-      if (room) return room;
-      console.log(`Room ${roomId} hasn't arrived yet: waiting`);
-
-      const waitPromise = new Promise<Room>((resolve) => {
-        const onRoomEvent = async (room: Room) => {
-          if (room.roomId === roomId) {
-            client.removeListener(ClientEvent.Room, onRoomEvent);
-            resolve(room);
-          }
-        };
-        client.on(ClientEvent.Room, onRoomEvent);
-      });
-
-      // race the promise with a timeout so we don't
-      // wait forever for the room
-      const timeoutPromise = new Promise<Room>((_, reject) => {
-        setTimeout(() => {
-          reject(new Error("Timed out trying to join room"));
-        }, 30000);
-      });
-
-      return Promise.race([waitPromise, timeoutPromise]);
-    };
-
     const fetchOrCreateRoom = async (): Promise<Room> => {
       try {
         const room = await client.joinRoom(roomIdOrAlias, { viaServers });
-        // wait for the room to come down the sync stream, otherwise
-        // client.getRoom() won't return the room.
-        return waitForRoom(room.roomId);
+        logger.info(
+          `Joined ${roomIdOrAlias}, waiting room to be ready for group calls`
+        );
+        await client.waitUntilRoomReadyForGroupCalls(room.roomId);
+        logger.info(`${roomIdOrAlias}, is ready for group calls`);
+        return room;
       } catch (error) {
         if (
           isLocalRoomId(roomIdOrAlias) &&
@@ -91,7 +68,8 @@ export const useLoadGroupCall = (
             createPtt
           );
           // likewise, wait for the room
-          return await waitForRoom(roomId);
+          await client.waitUntilRoomReadyForGroupCalls(roomId);
+          return client.getRoom(roomId);
         } else {
           throw error;
         }
@@ -100,7 +78,9 @@ export const useLoadGroupCall = (
 
     const fetchOrCreateGroupCall = async (): Promise<GroupCall> => {
       const room = await fetchOrCreateRoom();
+      logger.debug(`Fetched / joined room ${roomIdOrAlias}`);
       const groupCall = client.getGroupCallForRoom(room.roomId);
+      logger.debug("Got group call", groupCall);
 
       if (groupCall) return groupCall;
 
@@ -111,7 +91,11 @@ export const useLoadGroupCall = (
         )
       ) {
         // The call doesn't exist, but we can create it
-        console.log(`Creating ${createPtt ? "PTT" : "video"} group call room`);
+        console.log(
+          `No call found in ${roomIdOrAlias}: creating ${
+            createPtt ? "PTT" : "video"
+          } call`
+        );
         return await client.createGroupCall(
           room.roomId,
           createPtt ? GroupCallType.Voice : GroupCallType.Video,

src/settings/submit-rageshake.ts

@@ -40,7 +40,9 @@ export function useSubmitRageshake(): {
   error: Error;
 } {
   const client: MatrixClient = useClient().client;
-  const json = useContext(InspectorContext);
+  // The value of the context is the whole tuple returned from setState,
+  // so we just want the current state.
+  const [inspectorState] = useContext(InspectorContext);
 
   const [{ sending, sent, error }, setState] = useState({
     sending: false,
@@ -231,10 +233,12 @@ export function useSubmitRageshake(): {
             body.append("compressed-log", new Blob([buf]), entry.id);
           }
 
-          if (json) {
+          if (inspectorState) {
             body.append(
               "file",
-              new Blob([JSON.stringify(json)], { type: "text/plain" }),
+              new Blob([JSON.stringify(inspectorState)], {
+                type: "text/plain",
+              }),
               "groupcall.txt"
             );
           }
@@ -262,7 +266,7 @@ export function useSubmitRageshake(): {
         console.error(error);
       }
     },
-    [client, json, sending]
+    [client, inspectorState, sending]
   );
 
   return {

yarn.lock

@@ -8390,9 +8390,9 @@ matrix-events-sdk@^0.0.1-beta.7:
   resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1-beta.7.tgz#5ffe45eba1f67cc8d7c2377736c728b322524934"
   integrity sha512-9jl4wtWanUFSy2sr2lCjErN/oC8KTAtaeaozJtrgot1JiQcEI4Rda9OLgQ7nLKaqb4Z/QUx/fR3XpDzm5Jy1JA==
 
-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#3334c01191bcd82b5243916284c9a08d08fd9795":
-  version "19.2.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/3334c01191bcd82b5243916284c9a08d08fd9795"
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#98d119d6e1d39f1c5b01b36e7fda133e9f12f50c":
+  version "19.3.0"
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/98d119d6e1d39f1c5b01b36e7fda133e9f12f50c"
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@types/sdp-transform" "^2.4.5"