snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/audio-translation/components/web/TranslationLabel.tsx

@@ -0,0 +1,47 @@
+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;