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