Get new group calls working

src/ConferenceCallManagerHooks.js

@@ -47,32 +47,32 @@ async function initClient(clientOptions, guest) {
   return client;
 }
 
-export async function fetchRoom(client, roomIdOrAlias, timeout = 5000) {
+export async function fetchGroupCall(client, roomIdOrAlias, timeout = 5000) {
   const { roomId } = await client.joinRoom(roomIdOrAlias);
 
   return new Promise((resolve, reject) => {
     let timeoutId;
 
-    function onRoom(room) {
+    function onGroupCallIncoming(groupCall) {
-      if (room && room.roomId === roomId) {
+      if (groupCall && groupCall.room.roomId === roomId) {
         clearTimeout(timeoutId);
-        client.removeListener("Room", onRoom);
+        client.removeListener("GroupCall.incoming", onGroupCallIncoming);
-        resolve(room);
+        resolve(groupCall);
       }
     }
 
-    const room = client.getRoom(roomId);
+    const groupCall = client.getGroupCallForRoom(roomId);
 
-    if (room) {
+    if (groupCall) {
-      resolve(room);
+      resolve(groupCall);
     }
 
-    client.on("Room", onRoom);
+    client.on("GroupCall.incoming", onGroupCallIncoming);
 
     if (timeout) {
       timeoutId = setTimeout(() => {
-        client.removeListener("Room", onRoom);
+        client.removeListener("GroupCall.incoming", onGroupCallIncoming);
-        reject(new Error("Fetching room timed out."));
+        reject(new Error("Fetching group call timed out."));
       }, timeout);
     }
   });

src/Home.jsx

@@ -22,6 +22,10 @@ import ColorHash from "color-hash";
 import styles from "./Home.module.css";
 import { FieldRow, InputField, Button, ErrorMessage } from "./Input";
 import { Center, Content, Modal } from "./Layout";
+import {
+  GroupCallIntent,
+  GroupCallType,
+} from "matrix-js-sdk/src/browser-index";
 
 const colorHash = new ColorHash({ lightness: 0.3 });
 
@@ -75,6 +79,12 @@ export function Home({ client, onLogout }) {
           });
         }
 
+        await client.createGroupCall(
+          room_id,
+          GroupCallType.Video,
+          GroupCallIntent.Prompt
+        );
+
         history.push(`/room/${room_id}`);
       }
 

src/Room.jsx

@@ -25,11 +25,7 @@ import {
 } from "./RoomButton";
 import { Header, LeftNav, RightNav, CenterNav } from "./Header";
 import { Button, ErrorMessage } from "./Input";
-import {
+import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
-  GroupCallIntent,
-  GroupCallState,
-  GroupCallType,
-} from "matrix-js-sdk/src/webrtc/groupCall";
 import VideoGrid, {
   useVideoGridLayout,
 } from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid";
@@ -37,7 +33,7 @@ import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
 import { useGroupCall } from "matrix-react-sdk/src/hooks/useGroupCall";
 import { useCallFeed } from "matrix-react-sdk/src/hooks/useCallFeed";
 import { useMediaStream } from "matrix-react-sdk/src/hooks/useMediaStream";
-import { fetchRoom } from "./ConferenceCallManagerHooks";
+import { fetchGroupCall } from "./ConferenceCallManagerHooks";
 
 function useLoadGroupCall(client, roomId) {
   const [state, setState] = useState({
@@ -47,25 +43,8 @@ function useLoadGroupCall(client, roomId) {
   });
 
   useEffect(() => {
-    async function load() {
-      await fetchRoom(client, roomId);
-
-      let groupCall = client.getGroupCallForRoom(roomId);
-
-      if (!groupCall) {
-        groupCall = await client.createGroupCall(
-          roomId,
-          GroupCallType.Video,
-          GroupCallIntent.Prompt
-        );
-      }
-
-      return groupCall;
-    }
-
     setState({ loading: true });
-
+    fetchGroupCall(client, roomId, 30000)
-    load()
       .then((groupCall) => setState({ loading: false, groupCall }))
       .catch((error) => setState({ loading: false, error }));
   }, [roomId]);