From c2d715603392bd1257d2cf2b6a5b57d7436309a9 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 30 Jul 2021 14:19:52 -0700
Subject: [PATCH] Filter inactive participants from the dev tools

---
 src/ConferenceCallManager.js | 14 +++++++++++---
 src/DevTools.jsx             |  4 ++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/ConferenceCallManager.js b/src/ConferenceCallManager.js
index 61b6f7fe..3c734690 100644
--- a/src/ConferenceCallManager.js
+++ b/src/ConferenceCallManager.js
@@ -167,9 +167,17 @@ export class ConferenceCallManager extends EventEmitter {
       this.client.sendStateEvent(this.roomId, CONF_ROOM, { active: true }, "");
     }
 
-    this.room
-      .getMembers()
-      .forEach((member) => this._processMember(member.userId));
+    const roomMemberIds = this.room.getMembers().map(({ userId }) => userId);
+
+    for (const userId of this.debugState.keys()) {
+      if (roomMemberIds.indexOf(userId) === -1) {
+        this.debugState.delete(userId);
+      }
+    }
+
+    roomMemberIds.forEach((userId) => {
+      this._processMember(userId);
+    });
 
     for (const { call, onHangup, onReplaced } of this.pendingCalls) {
       if (call.roomId !== roomId) {
diff --git a/src/DevTools.jsx b/src/DevTools.jsx
index 5c0f4f9c..51c76897 100644
--- a/src/DevTools.jsx
+++ b/src/DevTools.jsx
@@ -41,6 +41,10 @@ export function DevTools({ manager }) {
     };
   }, [manager]);
 
+  if (!manager.joined) {
+    return <div className={styles.devTools} />;
+  }
+
   return (
     <div className={styles.devTools}>
       {Array.from(debugState.entries()).map(([userId, props]) => (