Re-enable debugger and fix fetchRoom

src/ConferenceCallDebugger.js

@@ -17,10 +17,11 @@ limitations under the License.
 import EventEmitter from "events";
 
 export class ConferenceCallDebugger extends EventEmitter {
-  constructor(manager) {
+  constructor(client, groupCall) {
     super();
 
-    this.manager = manager;
+    this.client = client;
+    this.groupCall = groupCall;
 
     this.debugState = {
       users: new Map(),
@@ -29,11 +30,11 @@ export class ConferenceCallDebugger extends EventEmitter {
 
     this.bufferedEvents = [];
 
-    // this.manager.on("call", this._onCall);
-    // this.manager.on("debugstate", this._onDebugStateChanged);
-    // this.manager.client.on("event", this._onEvent);
-    // this.manager.on("entered", this._onEntered);
-    // this.manager.on("left", this._onLeft);
+    client.on("event", this._onEvent);
+    groupCall.on("call", this._onCall);
+    groupCall.on("debugstate", this._onDebugStateChanged);
+    groupCall.on("entered", this._onEntered);
+    groupCall.on("left", this._onLeft);
   }
 
   _onEntered = () => {
@@ -55,7 +56,7 @@ export class ConferenceCallDebugger extends EventEmitter {
   };
 
   _onEvent = (event) => {
-    if (!this.manager.entered) {
+    if (!this.groupCall.entered) {
       this.bufferedEvents.push(event);
       return;
     }
@@ -64,7 +65,7 @@ export class ConferenceCallDebugger extends EventEmitter {
     const type = event.getType();
 
     if (
-      roomId === this.manager.room.roomId &&
+      roomId === this.groupCall.room.roomId &&
       (type.startsWith("m.call.") ||
         type === "me.robertlong.call.info" ||
         type === "m.room.member")
@@ -376,8 +377,8 @@ export class ConferenceCallDebugger extends EventEmitter {
         .filter((stat) => stat.type === "remote-outbound-rtp")
         .map(processRemoteOutboundRTPStats);
 
-      this.manager.client.sendEvent(
-        this.manager.room.roomId,
+      this.client.sendEvent(
+        this.groupCall.room.roomId,
         "me.robertlong.call.info",
         event
       );
@@ -417,8 +418,8 @@ export class ConferenceCallDebugger extends EventEmitter {
     peerConnection.addEventListener(
       "icecandidateerror",
       ({ errorCode, url, errorText }) => {
-        this.manager.client.sendEvent(
-          this.manager.room.roomId,
+        this.client.sendEvent(
+          this.groupCall.room.roomId,
           "me.robertlong.call.ice_error",
           {
             call_id: call.callId,

src/ConferenceCallManagerHooks.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import matrix from "matrix-js-sdk";
+import { ConferenceCallDebugger } from "./ConferenceCallDebugger";
 
 // https://stackoverflow.com/a/9039885
 function isIOS() {
@@ -63,20 +64,8 @@ async function initClient(clientOptions, guest) {
   return client;
 }
 
-export async function fetchRoom(client, roomId, join, timeout = 5000) {
-  let room = client.getRoom(roomId);
-
-  if (room) {
-    return room;
-  }
-
-  if (join) {
-    room = await client.joinRoom(roomId);
-
-    if (room) {
-      return room;
-    }
-  }
+export async function fetchRoom(client, roomIdOrAlias, timeout = 5000) {
+  const { roomId } = await client.joinRoom(roomIdOrAlias);
 
   return new Promise((resolve, reject) => {
     let timeoutId;
@@ -297,7 +286,7 @@ function getParticipants(groupCall) {
   return [...groupCall.participants];
 }
 
-export function useGroupCall(client, roomId) {
+export function useGroupCall(client, roomId, debug = false) {
   const groupCallRef = useRef(null);
 
   const [
@@ -310,6 +299,7 @@ export function useGroupCall(client, roomId) {
       error,
       microphoneMuted,
       localVideoMuted,
+      callDebugger,
     },
     setState,
   ] = useState({
@@ -321,6 +311,7 @@ export function useGroupCall(client, roomId) {
     error: null,
     microphoneMuted: false,
     localVideoMuted: false,
+    callDebugger: null,
   });
 
   const updateState = (state) =>
@@ -354,6 +345,9 @@ export function useGroupCall(client, roomId) {
       updateState({
         room,
         loading: false,
+        callDebugger: debug
+          ? new ConferenceCallDebugger(client, groupCall)
+          : null,
       });
     }
 
@@ -443,6 +437,7 @@ export function useGroupCall(client, roomId) {
     roomName: room ? room.name : null,
     participants,
     groupCall: groupCallRef.current,
+    callDebugger: callDebugger,
     microphoneMuted,
     localVideoMuted,
     error,

src/DevTools.jsx

@@ -56,24 +56,24 @@ function sortEntries(a, b) {
   }
 }
 
-export function DevTools({ manager }) {
-  const [debugState, setDebugState] = useState(manager.callDebugger.debugState);
+export function DevTools({ callDebugger }) {
+  const [debugState, setDebugState] = useState(callDebugger.debugState);
   const [selectedEvent, setSelectedEvent] = useState();
   const [activeTab, setActiveTab] = useState("users");
 
   useEffect(() => {
     function onRoomDebug() {
-      setDebugState({ ...manager.callDebugger.debugState });
+      setDebugState({ ...callDebugger.debugState });
     }
 
-    manager.callDebugger.on("debug", onRoomDebug);
+    callDebugger.on("debug", onRoomDebug);
 
     return () => {
-      manager.callDebugger.removeListener("debug", onRoomDebug);
+      callDebugger.removeListener("debug", onRoomDebug);
     };
-  }, [manager]);
+  }, [callDebugger]);
 
-  if (!manager.entered) {
+  if (!callDebugger.groupCall.entered) {
     return <div className={styles.devTools} />;
   }
 

src/Room.jsx

@@ -45,6 +45,7 @@ function useQuery() {
 function useDebugMode() {
   const query = useQuery();
   const debugStr = query.get("debug");
+  const debugEnabled = query.has("debug");
   const [debugMode, setDebugMode] = useState(
     debugStr === "" || debugStr === "true"
   );
@@ -70,7 +71,7 @@ function useDebugMode() {
     };
   }, []);
 
-  return [debugMode, toggleDebugMode];
+  return { debugEnabled, debugMode, toggleDebugMode };
 }
 
 function useRoomLayout() {
@@ -84,6 +85,7 @@ function useRoomLayout() {
 }
 
 export function Room({ client }) {
+  const { debugEnabled, debugMode, toggleDebugMode } = useDebugMode();
   const { roomId } = useParams();
   const {
     loading,
@@ -100,7 +102,8 @@ export function Room({ client }) {
     leave,
     toggleLocalVideoMuted,
     toggleMicrophoneMuted,
-  } = useGroupCall(client, roomId);
+    callDebugger,
+  } = useGroupCall(client, roomId, debugEnabled);
 
   const content = () => {
     if (error) {
@@ -138,6 +141,10 @@ export function Room({ client }) {
           participants={participants}
           onLeave={leave}
           groupCall={groupCall}
+          debugEnabled={debugEnabled}
+          debugMode={debugMode}
+          toggleDebugMode={toggleDebugMode}
+          callDebugger={callDebugger}
         />
       );
     }
@@ -266,9 +273,11 @@ function InRoomView({
   toggleMicrophoneMuted,
   participants,
   onLeave,
-  groupCall,
+  debugEnabled,
+  debugMode,
+  toggleDebugMode,
+  callDebugger,
 }) {
-  const [debugMode, toggleDebugMode] = useDebugMode();
   const [roomLayout, toggleRoomLayout] = useRoomLayout();
 
   return (
@@ -284,10 +293,12 @@ function InRoomView({
             layout={roomLayout}
             onClick={toggleRoomLayout}
           />
-          <SettingsButton
-            title={debugMode ? "Disable DevTools" : "Enable DevTools"}
-            onClick={toggleDebugMode}
-          />
+          {debugEnabled && (
+            <SettingsButton
+              title={debugMode ? "Disable DevTools" : "Enable DevTools"}
+              onClick={toggleDebugMode}
+            />
+          )}
         </RightNav>
       </Header>
       {participants.length === 0 ? (
@@ -305,7 +316,9 @@ function InRoomView({
         />
         <HangupButton onClick={onLeave} />
       </div>
-      {debugMode && <DevTools groupCall={groupCall} />}
+      {debugEnabled && debugMode && callDebugger && (
+        <DevTools callDebugger={callDebugger} />
+      )}
     </>
   );
 }