2022-02-05 00:55:57 +00:00
|
|
|
import React from "react";
|
2022-01-06 00:54:13 +00:00
|
|
|
import { Modal } from "../Modal";
|
2021-12-07 01:34:10 +00:00
|
|
|
import styles from "./SettingsModal.module.css";
|
2022-01-21 23:43:03 +00:00
|
|
|
import { TabContainer, TabItem } from "../tabs/Tabs";
|
2022-01-06 00:54:13 +00:00
|
|
|
import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
|
|
|
|
|
import { ReactComponent as VideoIcon } from "../icons/Video.svg";
|
|
|
|
|
import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg";
|
2022-01-06 01:27:01 +00:00
|
|
|
import { SelectInput } from "../input/SelectInput";
|
2021-12-07 01:34:10 +00:00
|
|
|
import { Item } from "@react-stately/collections";
|
|
|
|
|
import { useMediaHandler } from "./useMediaHandler";
|
2022-02-05 00:55:57 +00:00
|
|
|
import { FieldRow, InputField } from "../input/Input";
|
2022-02-01 23:11:06 +00:00
|
|
|
import { Button } from "../button";
|
2022-02-05 00:55:57 +00:00
|
|
|
import { useDownloadDebugLog } from "./rageshake";
|
2022-02-16 19:29:43 +00:00
|
|
|
import { Body } from "../typography/Typography";
|
2021-12-07 01:34:10 +00:00
|
|
|
|
|
|
|
|
export function SettingsModal({
|
|
|
|
|
client,
|
|
|
|
|
setShowInspector,
|
|
|
|
|
showInspector,
|
|
|
|
|
...rest
|
|
|
|
|
}) {
|
|
|
|
|
const {
|
|
|
|
|
audioInput,
|
|
|
|
|
audioInputs,
|
|
|
|
|
setAudioInput,
|
|
|
|
|
videoInput,
|
|
|
|
|
videoInputs,
|
|
|
|
|
setVideoInput,
|
|
|
|
|
} = useMediaHandler(client);
|
|
|
|
|
|
2022-02-05 00:55:57 +00:00
|
|
|
const downloadDebugLog = useDownloadDebugLog();
|
2022-02-01 23:11:06 +00:00
|
|
|
|
2021-12-07 01:34:10 +00:00
|
|
|
return (
|
|
|
|
|
<Modal
|
|
|
|
|
title="Settings"
|
|
|
|
|
isDismissable
|
2021-12-10 18:54:18 +00:00
|
|
|
mobileFullScreen
|
2021-12-07 01:34:10 +00:00
|
|
|
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>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
>
|
2022-02-16 19:29:43 +00:00
|
|
|
<FieldRow>
|
|
|
|
|
<Body className={styles.fieldRowText}>
|
|
|
|
|
Version: {import.meta.env.VITE_APP_VERSION || "dev"}
|
|
|
|
|
</Body>
|
|
|
|
|
</FieldRow>
|
2021-12-07 01:34:10 +00:00
|
|
|
<FieldRow>
|
|
|
|
|
<InputField
|
|
|
|
|
id="showInspector"
|
|
|
|
|
name="inspector"
|
|
|
|
|
label="Show Call Inspector"
|
|
|
|
|
type="checkbox"
|
|
|
|
|
checked={showInspector}
|
|
|
|
|
onChange={(e) => setShowInspector(e.target.checked)}
|
|
|
|
|
/>
|
|
|
|
|
</FieldRow>
|
2022-02-01 23:11:06 +00:00
|
|
|
<FieldRow>
|
|
|
|
|
<Button onPress={downloadDebugLog}>Download Debug Logs</Button>
|
|
|
|
|
</FieldRow>
|
2021-12-07 01:34:10 +00:00
|
|
|
</TabItem>
|
|
|
|
|
</TabContainer>
|
|
|
|
|
</Modal>
|
|
|
|
|
);
|
|
|
|
|
}
|
