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

react/features/speaker-stats/components/web/FaceExpressionsSwitch.tsx

@@ -0,0 +1,61 @@
+import { Theme } from '@mui/material';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import Switch from '../../../base/ui/components/web/Switch';
+
+const useStyles = makeStyles()((theme: Theme) => {
+    return {
+        switchContainer: {
+            display: 'flex',
+            alignItems: 'center'
+        },
+
+        switchLabel: {
+            marginRight: 10,
+            ...theme.typography.bodyShortRegular
+        }
+    };
+});
+
+/**
+ * The type of the React {@code Component} props of {@link ToggleFaceExpressionsButton}.
+ */
+interface IProps {
+
+    /**
+     * The function to initiate the change in the speaker stats table.
+     */
+    onChange: (checked?: boolean) => void;
+
+    /**
+     * The state of the button.
+     */
+    showFaceExpressions: boolean;
+
+}
+
+/**
+ * React component for toggling face expressions grid.
+ *
+ * @returns {React$Element<any>}
+ */
+export default function FaceExpressionsSwitch({ onChange, showFaceExpressions }: IProps) {
+    const { classes } = useStyles();
+    const { t } = useTranslation();
+
+    return (
+        <div className = { classes.switchContainer } >
+            <label
+                className = { classes.switchLabel }
+                htmlFor = 'face-expressions-switch'>
+                { t('speakerStats.displayEmotions')}
+            </label>
+            <Switch
+                checked = { showFaceExpressions }
+                id = 'face-expressions-switch'
+                onChange = { onChange } />
+        </div>
+    );
+}