94 lines
2.5 KiB
JavaScript
94 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
|
|
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>
|
|
);
|
|
}
|