Initial PTT designs

src/room/PTTCallView.jsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { useModalTriggerState } from "../Modal";
+import { SettingsModal } from "../settings/SettingsModal";
+import { InviteModal } from "./InviteModal";
+import { Button } from "../button";
+import { Header, LeftNav, RightNav, RoomSetupHeaderInfo } from "../Header";
+import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
+import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
+import styles from "./PTTCallView.module.css";
+import { Facepile } from "../Facepile";
+import { PTTButton } from "./PTTButton";
+import { PTTFeed } from "./PTTFeed";
+import { useMediaHandler } from "../settings/useMediaHandler";
+
+export function PTTCallView({
+  groupCall,
+  participants,
+  client,
+  roomName,
+  microphoneMuted,
+  toggleMicrophoneMuted,
+  userMediaFeeds,
+  activeSpeaker,
+  onLeave,
+  setShowInspector,
+  showInspector,
+  roomId,
+}) {
+  const { modalState: inviteModalState, modalProps: inviteModalProps } =
+    useModalTriggerState();
+  const { modalState: settingsModalState, modalProps: settingsModalProps } =
+    useModalTriggerState();
+  const { audioOutput } = useMediaHandler();
+
+  return (
+    <div className={styles.pttCallView}>
+      <Header className={styles.header}>
+        <LeftNav>
+          <RoomSetupHeaderInfo roomName={roomName} onPress={onLeave} />
+        </LeftNav>
+        <RightNav>
+          <Button variant="secondaryHangup" onPress={onLeave}>
+            Leave
+          </Button>
+          <Button variant="icon" onPress={() => inviteModalState.open()}>
+            <AddUserIcon />
+          </Button>
+          <Button variant="icon" onPress={() => settingsModalState.open()}>
+            <SettingsIcon />
+          </Button>
+        </RightNav>
+      </Header>
+      <div className={styles.headerSeparator} />
+      <div className={styles.participants}>
+        <p>{`${participants.length} user${
+          participants.length > 1 ? "s" : ""
+        } connected`}</p>
+        <Facepile client={client} participants={participants} />
+      </div>
+      <div className={styles.center}>
+        <PTTButton
+          client={client}
+          activeSpeaker={activeSpeaker}
+          groupCall={groupCall}
+        />
+        <p className={styles.actionTip}>Press and hold spacebar to talk</p>
+        {userMediaFeeds.map((callFeed) => (
+          <PTTFeed
+            key={callFeed.userId}
+            callFeed={callFeed}
+            audioOutputDevice={audioOutput}
+          />
+        ))}
+      </div>
+
+      {settingsModalState.isOpen && (
+        <SettingsModal
+          {...settingsModalProps}
+          setShowInspector={setShowInspector}
+          showInspector={showInspector}
+        />
+      )}
+      {inviteModalState.isOpen && (
+        <InviteModal roomId={roomId} {...inviteModalProps} />
+      )}
+    </div>
+  );
+}