Clean up settings modal

src/settings/SettingsModal.jsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { Modal } from "../Modal";
+import styles from "./SettingsModal.module.css";
+import { TabContainer, TabItem } from "../Tabs";
+import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
+import { ReactComponent as VideoIcon } from "../icons/Video.svg";
+import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg";
+import { SelectInput } from "../SelectInput";
+import { Item } from "@react-stately/collections";
+import { useMediaHandler } from "./useMediaHandler";
+import { FieldRow, InputField } from "../Input";
+
+export function SettingsModal({
+  client,
+  setShowInspector,
+  showInspector,
+  ...rest
+}) {
+  const {
+    audioInput,
+    audioInputs,
+    setAudioInput,
+    videoInput,
+    videoInputs,
+    setVideoInput,
+  } = useMediaHandler(client);
+
+  return (
+    <Modal
+      title="Settings"
+      isDismissable
+      mobileFullScreen
+      className={styles.settingsModal}
+      {...rest}
+    >
+      <TabContainer className={styles.tabContainer}>
+        <TabItem
+          title={
+            <>
+              <AudioIcon width={16} height={16} />
+              <span>Audio</span>
+            </>
+          }
+        >
+          <SelectInput
+            label="Microphone"
+            selectedKey={audioInput}
+            onSelectionChange={setAudioInput}
+          >
+            {audioInputs.map(({ deviceId, label }) => (
+              <Item key={deviceId}>{label}</Item>
+            ))}
+          </SelectInput>
+        </TabItem>
+        <TabItem
+          title={
+            <>
+              <VideoIcon width={16} height={16} />
+              <span>Video</span>
+            </>
+          }
+        >
+          <SelectInput
+            label="Webcam"
+            selectedKey={videoInput}
+            onSelectionChange={setVideoInput}
+          >
+            {videoInputs.map(({ deviceId, label }) => (
+              <Item key={deviceId}>{label}</Item>
+            ))}
+          </SelectInput>
+        </TabItem>
+        <TabItem
+          title={
+            <>
+              <DeveloperIcon width={16} height={16} />
+              <span>Developer</span>
+            </>
+          }
+        >
+          <FieldRow>
+            <InputField
+              id="showInspector"
+              name="inspector"
+              label="Show Call Inspector"
+              type="checkbox"
+              checked={showInspector}
+              onChange={(e) => setShowInspector(e.target.checked)}
+            />
+          </FieldRow>
+        </TabItem>
+      </TabContainer>
+    </Modal>
+  );
+}

src/settings/SettingsModal.module.css

@@ -0,0 +1,8 @@
+.settingsModal {
+  width: 774px;
+  height: 480px;
+}
+
+.tabContainer {
+  margin: 27px 16px;
+}

src/settings/useMediaHandler.js

@@ -0,0 +1,72 @@
+import { useState, useEffect, useCallback } from "react";
+
+export function useMediaHandler(client) {
+  const [{ audioInput, videoInput, audioInputs, videoInputs }, setState] =
+    useState(() => {
+      const mediaHandler = client.getMediaHandler();
+
+      return {
+        audioInput: mediaHandler.audioInput,
+        videoInput: mediaHandler.videoInput,
+        audioInputs: [],
+        videoInputs: [],
+      };
+    });
+
+  useEffect(() => {
+    const mediaHandler = client.getMediaHandler();
+
+    function updateDevices() {
+      navigator.mediaDevices.enumerateDevices().then((devices) => {
+        const audioInputs = devices.filter(
+          (device) => device.kind === "audioinput"
+        );
+        const videoInputs = devices.filter(
+          (device) => device.kind === "videoinput"
+        );
+
+        setState(() => ({
+          audioInput: mediaHandler.audioInput,
+          videoInput: mediaHandler.videoInput,
+          audioInputs,
+          videoInputs,
+        }));
+      });
+    }
+
+    updateDevices();
+
+    mediaHandler.on("local_streams_changed", updateDevices);
+    navigator.mediaDevices.addEventListener("devicechange", updateDevices);
+
+    return () => {
+      mediaHandler.removeListener("local_streams_changed", updateDevices);
+      navigator.mediaDevices.removeEventListener("devicechange", updateDevices);
+    };
+  }, []);
+
+  const setAudioInput = useCallback(
+    (deviceId) => {
+      setState((prevState) => ({ ...prevState, audioInput: deviceId }));
+      client.getMediaHandler().setAudioInput(deviceId);
+    },
+    [client]
+  );
+
+  const setVideoInput = useCallback(
+    (deviceId) => {
+      setState((prevState) => ({ ...prevState, videoInput: deviceId }));
+      client.getMediaHandler().setVideoInput(deviceId);
+    },
+    [client]
+  );
+
+  return {
+    audioInput,
+    audioInputs,
+    setAudioInput,
+    videoInput,
+    videoInputs,
+    setVideoInput,
+  };
+}