48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useSelector } from 'react-redux';
|
|
import { makeStyles } from 'tss-react/mui';
|
|
|
|
import { IconTranslate } from '../../../base/icons/svg';
|
|
import Label from '../../../base/label/components/web/Label';
|
|
import Tooltip from '../../../base/tooltip/components/Tooltip';
|
|
import { isAudioTranslationActiveInMeeting } from '../../functions';
|
|
|
|
const useStyles = makeStyles()(theme => {
|
|
return {
|
|
translation: {
|
|
background: theme.palette.action01
|
|
}
|
|
};
|
|
});
|
|
|
|
/**
|
|
* Conference-header label shown while audio translation is active in the meeting.
|
|
*
|
|
* @returns {ReactElement|null}
|
|
*/
|
|
const TranslationLabel = () => {
|
|
const { classes: styles } = useStyles();
|
|
const { t } = useTranslation();
|
|
const active = useSelector(isAudioTranslationActiveInMeeting);
|
|
|
|
if (!active) {
|
|
return null;
|
|
}
|
|
|
|
const content = t('audioTranslation.labelTooltip');
|
|
|
|
return (
|
|
<Tooltip
|
|
content = { content }
|
|
position = { 'bottom' }>
|
|
<Label
|
|
accessibilityText = { content }
|
|
className = { styles.translation }
|
|
icon = { IconTranslate } />
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
export default TranslationLabel;
|