jiti-meet/react/features/speaker-stats/components/web/FaceExpressionsSwitch.js

98 lines
2.8 KiB
JavaScript

// @flow
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Switch } from '../../../base/react';
const useStyles = makeStyles(theme => {
return {
switchContainer: {
display: 'flex',
alignItems: 'center',
'& svg': {
display: 'none'
},
'& div': {
width: 38,
'& > label': {
width: 32,
height: 20,
backgroundColor: theme.palette.ui05,
'&:not([data-checked]):hover': {
backgroundColor: theme.palette.ui05
},
'&[data-checked]': {
backgroundColor: theme.palette.action01,
'&:hover': {
backgroundColor: theme.palette.action01
},
'&::before': {
margin: '0 0 1.5px -3px',
backgroundColor: theme.palette.text01
}
},
'&:focus-within': {
borderColor: 'transparent'
},
'&::before': {
width: 14,
height: 14,
margin: '0 0 1.5px 1.5px',
backgroundColor: theme.palette.text01
}
}
}
},
switchLabel: {
marginRight: 10,
...theme.typography.bodyShortRegular,
lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
}
};
});
/**
* The type of the React {@code Component} props of {@link ToggleFaceExpressionsButton}.
*/
type Props = {
/**
* The function to initiate the change in the speaker stats table.
*/
onChange: Function,
/**
* The state of the button.
*/
showFaceExpressions: boolean,
};
/**
* React component for toggling face expressions grid.
*
* @returns {React$Element<any>}
*/
export default function FaceExpressionsSwitch({ onChange, showFaceExpressions }: Props) {
const classes = useStyles();
const { t } = useTranslation();
return (
<div className = { classes.switchContainer } >
<label
className = { classes.switchLabel }
htmlFor = 'face-expressions-switch'>
{ t('speakerStats.displayEmotions')}
</label>
<Switch
id = 'face-expressions-switch'
onValueChange = { onChange }
trackColor = {{ false: 'blue' }}
value = { showFaceExpressions } />
</div>
);
}