mirror of
https://github.com/vector-im/element-call.git
synced 2026-08-29 21:15:19 +00:00
032e1e438c
This moves the media devices state out of React to further our transition to a MVVM architecture in which we can more easily model and store complex application state. I have created an AppViewModel to act as the overarching state holder for any future non-React state we end up creating, and the MediaDevices reside within this. We should move more application logic (including the CallViewModel itself) there in the future.
122 lines
3.1 KiB
TypeScript
122 lines
3.1 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import {
|
|
type ChangeEvent,
|
|
type FC,
|
|
type ReactElement,
|
|
type ReactNode,
|
|
useCallback,
|
|
useId,
|
|
} from "react";
|
|
import {
|
|
Heading,
|
|
InlineField,
|
|
Label,
|
|
RadioControl,
|
|
Separator,
|
|
} from "@vector-im/compound-web";
|
|
import { Trans, useTranslation } from "react-i18next";
|
|
import { useObservableEagerState } from "observable-hooks";
|
|
|
|
import {
|
|
type AudioOutputDeviceLabel,
|
|
type DeviceLabel,
|
|
type SelectedDevice,
|
|
type MediaDevice,
|
|
} from "../state/MediaDevices";
|
|
import styles from "./DeviceSelection.module.css";
|
|
|
|
interface Props {
|
|
device: MediaDevice<DeviceLabel | AudioOutputDeviceLabel, SelectedDevice>;
|
|
title: string;
|
|
numberedLabel: (number: number) => string;
|
|
}
|
|
|
|
export const DeviceSelection: FC<Props> = ({
|
|
device,
|
|
title,
|
|
numberedLabel,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const groupId = useId();
|
|
const available = useObservableEagerState(device.available$);
|
|
const selectedId = useObservableEagerState(device.selected$)?.id;
|
|
const onChange = useCallback(
|
|
(e: ChangeEvent<HTMLInputElement>) => {
|
|
device.select(e.target.value);
|
|
},
|
|
[device],
|
|
);
|
|
|
|
// There is no need to show the menu if there is no choice that can be made.
|
|
if (available.size <= 1) return null;
|
|
|
|
return (
|
|
<div className={styles.selection}>
|
|
<Heading
|
|
type="body"
|
|
weight="semibold"
|
|
size="sm"
|
|
as="h4"
|
|
className={styles.title}
|
|
>
|
|
{title}
|
|
</Heading>
|
|
<Separator className={styles.separator} />
|
|
<div className={styles.options}>
|
|
{[...available].map(([id, label]) => {
|
|
let labelText: ReactNode;
|
|
switch (label.type) {
|
|
case "name":
|
|
labelText = label.name;
|
|
break;
|
|
case "number":
|
|
labelText = numberedLabel(label.number);
|
|
break;
|
|
case "default":
|
|
labelText =
|
|
label.name === null ? (
|
|
t("settings.devices.default")
|
|
) : (
|
|
<Trans
|
|
i18nKey="settings.devices.default_named"
|
|
name={label.name}
|
|
>
|
|
Default{" "}
|
|
<span className={styles.secondary}>
|
|
({{ name: label.name } as unknown as ReactElement})
|
|
</span>
|
|
</Trans>
|
|
);
|
|
break;
|
|
case "earpiece":
|
|
labelText = t("settings.devices.earpiece");
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<InlineField
|
|
key={id}
|
|
name={groupId}
|
|
control={
|
|
<RadioControl
|
|
checked={id === selectedId}
|
|
onChange={onChange}
|
|
value={id}
|
|
/>
|
|
}
|
|
>
|
|
<Label>{labelText}</Label>
|
|
</InlineField>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|