/* @flow */ import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { Tooltip } from '../../../base/tooltip'; import { FACE_EXPRESSIONS_EMOJIS } from '../../../face-landmarks/constants'; const useStyles = makeStyles(theme => { return { labels: { padding: '22px 0 7px 0', height: 20 }, emojis: { paddingLeft: 27, ...theme.typography.bodyShortRegularLarge, lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px` } }; }); /** * The type of the React {@code Component} props of {@link SpeakerStatsLabels}. */ type Props = { /** * True if the face expressions detection is not disabled. */ showFaceExpressions: boolean, }; const SpeakerStatsLabels = (props: Props) => { const { t } = useTranslation(); const classes = useStyles(); const FaceExpressionsLabels = () => Object.keys(FACE_EXPRESSIONS_EMOJIS).map( expression => (
{ FACE_EXPRESSIONS_EMOJIS[expression] }
) ); const nameTimeClass = `name-time${ props.showFaceExpressions ? ' name-time_expressions-on' : '' }`; return (
{ t('speakerStats.name') }
{ t('speakerStats.speakerTime') }
{ props.showFaceExpressions &&
}
); }; export default SpeakerStatsLabels;