element-call/src/SettingsModal.jsx
2021-12-10 10:54:18 -08:00

95 lines
2.5 KiB
JavaScript

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>
);
}