Add audio/video device options in call interface
Detect audio and video devices and show the options in the expand menus of the calling buttons in the call interface.
The options are not clickable for now, this will be implemented in https://git.jami.net/savoirfairelinux/jami-web/-/issues/146
GitLab: #98
Change-Id: I51ebf9ec90820db37e0d36b4ac9f57f119119da3
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 268cab6..379dc8f 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -106,14 +106,14 @@
};
export type ExpandableButtonProps = IconButtonProps & {
- hidden?: boolean;
+ isVertical?: boolean;
Icon?: ComponentType<SvgIconProps>;
expandMenuOptions?: (ExpandMenuOption | ExpandMenuRadioOption)[];
IconButtonComp?: ComponentType<IconButtonProps>;
};
export const ExpandableButton = ({
- hidden,
+ isVertical,
Icon,
expandMenuOptions = undefined,
IconButtonComp = IconButton,
@@ -125,19 +125,19 @@
};
return (
- <Box>
+ <>
{expandMenuOptions && (
<Menu
anchorEl={anchorEl}
open={!!anchorEl}
onClose={handleClose}
anchorOrigin={{
- vertical: !hidden ? 'top' : 'center',
- horizontal: !hidden ? 'center' : 'left',
+ vertical: !isVertical ? 'top' : 'center',
+ horizontal: !isVertical ? 'center' : 'left',
}}
transformOrigin={{
- vertical: !hidden ? 'bottom' : 'center',
- horizontal: !hidden ? 'center' : 'right',
+ vertical: !isVertical ? 'bottom' : 'center',
+ horizontal: !isVertical ? 'center' : 'right',
}}
>
{expandMenuOptions?.map((option, id) => {
@@ -168,28 +168,22 @@
})}
</Menu>
)}
- <Box
- position="relative"
- display="flex"
- justifyContent="center"
- alignItems="center"
- onClick={(e) => setAnchorEl(e.currentTarget)}
- >
+ <Box position="relative" display="flex" justifyContent="center" alignItems="center">
{expandMenuOptions && (
<IconButton
- {...props}
aria-label="expand options"
- size="small"
+ onClick={(e) => setAnchorEl(e.currentTarget)}
sx={{
- transform: !hidden ? 'scale(0.5)' : 'scale(0.5) rotate(-90deg)',
+ rotate: !isVertical ? '' : '-90deg',
position: 'absolute',
- top: !hidden ? '-50%' : 0,
- left: hidden ? '-50%' : 0,
- width: '100%',
- height: '100%',
+ top: !isVertical ? '-55%' : 'auto',
+ left: !isVertical ? 'auto' : '-55%',
+ zIndex: 1,
}}
+ className={props.className}
>
<ExpandLessIcon
+ fontSize="small"
sx={{
backgroundColor: '#444444',
borderRadius: '5px',
@@ -199,7 +193,7 @@
)}
<IconButtonComp {...props}>{Icon && <Icon />}</IconButtonComp>
</Box>
- </Box>
+ </>
);
};