38085baab8
This is closer to what the designs actually want device settings to look like, and it avoids the visual glitch in which the dropdown would render underneath the slider.
72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { ChangeEvent, FC, useCallback, useId } from "react";
|
|
import {
|
|
Heading,
|
|
InlineField,
|
|
Label,
|
|
RadioControl,
|
|
Separator,
|
|
} from "@vector-im/compound-web";
|
|
|
|
import { MediaDevice } from "../livekit/MediaDevicesContext";
|
|
import styles from "./DeviceSelection.module.css";
|
|
|
|
interface Props {
|
|
devices: MediaDevice;
|
|
caption: string;
|
|
}
|
|
|
|
export const DeviceSelection: FC<Props> = ({ devices, caption }) => {
|
|
const groupId = useId();
|
|
const onChange = useCallback(
|
|
(e: ChangeEvent<HTMLInputElement>) => {
|
|
devices.select(e.target.value);
|
|
},
|
|
[devices],
|
|
);
|
|
|
|
if (devices.available.length == 0) return null;
|
|
|
|
return (
|
|
<div className={styles.selection}>
|
|
<Heading
|
|
type="body"
|
|
weight="semibold"
|
|
size="sm"
|
|
as="h4"
|
|
className={styles.title}
|
|
>
|
|
{caption}
|
|
</Heading>
|
|
<Separator className={styles.separator} />
|
|
<div className={styles.options}>
|
|
{devices.available.map(({ deviceId, label }, index) => (
|
|
<InlineField
|
|
key={deviceId}
|
|
name={groupId}
|
|
control={
|
|
<RadioControl
|
|
checked={deviceId === devices.selectedId}
|
|
onChange={onChange}
|
|
value={deviceId}
|
|
/>
|
|
}
|
|
>
|
|
<Label>
|
|
{!!label && label.trim().length > 0
|
|
? label
|
|
: `${caption} ${index + 1}`}
|
|
</Label>
|
|
</InlineField>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|