Clean up remaining room components

src/room/GridLayoutMenu.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Button } from "../button";
+import { PopoverMenuTrigger } from "../PopoverMenu";
+import { ReactComponent as SpotlightIcon } from "../icons/Spotlight.svg";
+import { ReactComponent as FreedomIcon } from "../icons/Freedom.svg";
+import { ReactComponent as CheckIcon } from "../icons/Check.svg";
+import styles from "./GridLayoutMenu.module.css";
+import { Menu } from "../Menu";
+import { Item } from "@react-stately/collections";
+import { Tooltip, TooltipTrigger } from "../Tooltip";
+
+export function GridLayoutMenu({ layout, setLayout }) {
+  return (
+    <PopoverMenuTrigger placement="bottom right">
+      <TooltipTrigger>
+        <Button variant="icon">
+          {layout === "spotlight" ? <SpotlightIcon /> : <FreedomIcon />}
+        </Button>
+        {(props) => (
+          <Tooltip position="bottom" {...props}>
+            Layout Type
+          </Tooltip>
+        )}
+      </TooltipTrigger>
+      {(props) => (
+        <Menu {...props} label="Grid layout menu" onAction={setLayout}>
+          <Item key="freedom" textValue="Freedom">
+            <FreedomIcon />
+            <span>Freedom</span>
+            {layout === "freedom" && <CheckIcon className={styles.checkIcon} />}
+          </Item>
+          <Item key="spotlight" textValue="Spotlight">
+            <SpotlightIcon />
+            <span>Spotlight</span>
+            {layout === "spotlight" && (
+              <CheckIcon className={styles.checkIcon} />
+            )}
+          </Item>
+        </Menu>
+      )}
+    </PopoverMenuTrigger>
+  );
+}

src/room/GridLayoutMenu.module.css

@@ -0,0 +1,8 @@
+.checkIcon {
+  position: absolute;
+  right: 16px;
+}
+
+.checkIcon * {
+  stroke: var(--textColor1);
+}

src/room/GroupCallInspector.jsx

@@ -0,0 +1,204 @@
+import { Resizable } from "re-resizable";
+import React, { useEffect, useState, useMemo } from "react";
+import { useCallback } from "react";
+import ReactJson from "react-json-view";
+
+function getCallUserId(call) {
+  return call.getOpponentMember()?.userId || call.invitee || null;
+}
+
+function getCallState(call) {
+  return {
+    id: call.callId,
+    opponentMemberId: getCallUserId(call),
+    state: call.state,
+    direction: call.direction,
+  };
+}
+
+function getHangupCallState(call) {
+  return {
+    ...getCallState(call),
+    hangupReason: call.hangupReason,
+  };
+}
+
+export function GroupCallInspector({ client, groupCall, show }) {
+  const [roomStateEvents, setRoomStateEvents] = useState([]);
+  const [toDeviceEvents, setToDeviceEvents] = useState([]);
+  const [state, setState] = useState({
+    userId: client.getUserId(),
+  });
+
+  const updateState = useCallback(
+    (next) => setState((prev) => ({ ...prev, ...next })),
+    []
+  );
+
+  useEffect(() => {
+    function onUpdateRoomState(event) {
+      if (event) {
+        setRoomStateEvents((prev) => [
+          ...prev,
+          {
+            eventType: event.getType(),
+            stateKey: event.getStateKey(),
+            content: event.getContent(),
+          },
+        ]);
+      }
+
+      const roomEvent = groupCall.room.currentState
+        .getStateEvents("org.matrix.msc3401.call", groupCall.groupCallId)
+        .getContent();
+
+      const memberEvents = Object.fromEntries(
+        groupCall.room.currentState
+          .getStateEvents("org.matrix.msc3401.call.member")
+          .map((event) => [event.getStateKey(), event.getContent()])
+      );
+
+      updateState({
+        ["org.matrix.msc3401.call"]: roomEvent,
+        ["org.matrix.msc3401.call.member"]: memberEvents,
+      });
+    }
+
+    function onCallsChanged() {
+      const calls = groupCall.calls.reduce((obj, call) => {
+        obj[
+          `${call.callId} (${call.getOpponentMember()?.userId || call.sender})`
+        ] = getCallState(call);
+        return obj;
+      }, {});
+
+      updateState({ calls });
+    }
+
+    function onCallHangup(call) {
+      setState(({ hangupCalls, ...rest }) => ({
+        ...rest,
+        hangupCalls: {
+          ...hangupCalls,
+          [`${call.callId} (${
+            call.getOpponentMember()?.userId || call.sender
+          })`]: getHangupCallState(call),
+        },
+      }));
+    }
+
+    function onToDeviceEvent(event) {
+      const eventType = event.getType();
+
+      if (
+        !(
+          eventType.startsWith("m.call.") ||
+          eventType.startsWith("org.matrix.call.")
+        )
+      ) {
+        return;
+      }
+
+      const content = event.getContent();
+
+      if (content.conf_id && content.conf_id !== groupCall.groupCallId) {
+        return;
+      }
+
+      setToDeviceEvents((prev) => [
+        ...prev,
+        { eventType, content, sender: event.getSender() },
+      ]);
+    }
+
+    client.on("RoomState.events", onUpdateRoomState);
+    groupCall.on("calls_changed", onCallsChanged);
+    client.on("state", onCallsChanged);
+    client.on("hangup", onCallHangup);
+    client.on("toDeviceEvent", onToDeviceEvent);
+
+    onUpdateRoomState();
+  }, [client, groupCall]);
+
+  const toDeviceEventsByCall = useMemo(() => {
+    const result = {};
+
+    for (const event of toDeviceEvents) {
+      const callId = event.content.call_id;
+      const key = `${callId} (${event.sender})`;
+      result[key] = result[key] || [];
+      result[key].push(event);
+    }
+
+    return result;
+  }, [toDeviceEvents]);
+
+  useEffect(() => {
+    let timeout;
+
+    async function updateCallStats() {
+      const callIds = groupCall.calls.map(
+        (call) =>
+          `${call.callId} (${call.getOpponentMember()?.userId || call.sender})`
+      );
+      const stats = await Promise.all(
+        groupCall.calls.map((call) =>
+          call.peerConn
+            ? call.peerConn
+                .getStats(null)
+                .then((stats) =>
+                  Object.fromEntries(
+                    Array.from(stats).map(([_id, report], i) => [
+                      report.type + i,
+                      report,
+                    ])
+                  )
+                )
+            : Promise.resolve(null)
+        )
+      );
+
+      const callStats = {};
+
+      for (let i = 0; i < groupCall.calls.length; i++) {
+        callStats[callIds[i]] = stats[i];
+      }
+
+      updateState({ callStats });
+      timeout = setTimeout(updateCallStats, 1000);
+    }
+
+    if (show) {
+      updateCallStats();
+    }
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [show]);
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Resizable enable={{ top: true }} defaultSize={{ height: 200 }}>
+      <ReactJson
+        theme="monokai"
+        src={{
+          ...state,
+          roomStateEvents,
+          toDeviceEvents,
+          toDeviceEventsByCall,
+        }}
+        name={null}
+        indentWidth={2}
+        collapsed={1}
+        displayDataTypes={false}
+        displayObjectSize={false}
+        enableClipboard={false}
+        style={{ height: "100%", overflowY: "scroll" }}
+      />
+    </Resizable>
+  );
+}

src/room/InCallView.jsx

@@ -13,9 +13,9 @@ import VideoGrid, {
 import SimpleVideoGrid from "matrix-react-sdk/src/components/views/voip/GroupCallView/SimpleVideoGrid";
 import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
 import { getAvatarUrl } from "../ConferenceCallManagerHooks";
-import { GroupCallInspector } from "../GroupCallInspector";
+import { GroupCallInspector } from "./GroupCallInspector";
 import { OverflowMenu } from "./OverflowMenu";
-import { GridLayoutMenu } from "../GridLayoutMenu";
+import { GridLayoutMenu } from "./GridLayoutMenu";
 import { Avatar } from "../Avatar";
 import { UserMenuContainer } from "../UserMenuContainer";
 

src/room/InviteModal.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Modal, ModalContent } from "../Modal";
+import { CopyButton } from "../button";
+import { getRoomUrl } from "../ConferenceCallManagerHooks";
+import styles from "./InviteModal.module.css";
+
+export function InviteModal({ roomId, ...rest }) {
+  return (
+    <Modal
+      title="Invite People"
+      isDismissable
+      className={styles.inviteModal}
+      {...rest}
+    >
+      <ModalContent>
+        <p>Copy and share this meeting link</p>
+        <CopyButton className={styles.copyButton} value={getRoomUrl(roomId)} />
+      </ModalContent>
+    </Modal>
+  );
+}

src/room/InviteModal.module.css

@@ -0,0 +1,7 @@
+.inviteModal {
+  max-width: 413px;
+}
+
+.copyButton {
+  width: 100%;
+}

src/room/OverflowMenu.jsx

@@ -8,7 +8,7 @@ import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
 import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg";
 import { useModalTriggerState } from "../Modal";
 import { SettingsModal } from "../settings/SettingsModal";
-import { InviteModal } from "../InviteModal";
+import { InviteModal } from "./InviteModal";
 import { Tooltip, TooltipTrigger } from "../Tooltip";
 
 export function OverflowMenu({