Switch audio/video devices while in call
Enable the menus to switch audio/video devices.
Add connectionstatechange webRTCConnection listener to set the connected
status.
GitLab: #146
Change-Id: Ic3afbdee2b1a6bf312d3d7d902adb3c103a7d26f
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index a27028a..a89726c 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -19,6 +19,7 @@
import {
Box,
ClickAwayListener,
+ FormControlLabel,
IconButton,
IconButtonProps,
ListItemIcon,
@@ -28,6 +29,7 @@
Popper,
Radio,
RadioGroup,
+ RadioGroupProps,
SvgIconProps,
} from '@mui/material';
import { styled } from '@mui/material/styles';
@@ -97,12 +99,11 @@
icon?: ReactNode;
};
-export type ExpandMenuRadioOption = {
+export type ExpandMenuRadioOption = RadioGroupProps & {
options: {
key: string;
description: ReactNode;
}[];
- defaultSelectedOption?: string;
};
export type ExpandableButtonProps = IconButtonProps & {
@@ -142,19 +143,21 @@
>
{expandMenuOptions?.map((option, id) => {
if ('options' in option) {
- const { options, defaultSelectedOption } = option;
+ const { options, ...radioGroupProps } = option;
return (
- <RadioGroup key={id} defaultValue={defaultSelectedOption}>
- {options.map(({ description, key }) => {
- return (
- <MenuItem key={key}>
- <ListItemIcon>
- <Radio value={key} />
- </ListItemIcon>
- <ListItemText>{description}</ListItemText>
- </MenuItem>
- );
- })}
+ <RadioGroup key={id} {...radioGroupProps}>
+ {options.map(({ description, key }, i) => (
+ <MenuItem key={i}>
+ <FormControlLabel
+ value={key}
+ control={<Radio value={key} />}
+ label={<ListItemText>{description}</ListItemText>}
+ sx={{
+ width: '100%',
+ }}
+ />
+ </MenuItem>
+ ))}
</RadioGroup>
);
}