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

react/features/e2ee/components/ParticipantVerificationDialog.tsx

@@ -0,0 +1,123 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { IReduxState, IStore } from '../../app/types';
+import { getParticipantById } from '../../base/participants/functions';
+import Dialog from '../../base/ui/components/web/Dialog';
+import { participantVerified } from '../actions';
+import { ISas } from '../reducer';
+
+interface IProps {
+    decimal: string;
+    dispatch: IStore['dispatch'];
+    emoji: string;
+    pId: string;
+    participantName?: string;
+    sas: ISas;
+}
+
+const useStyles = makeStyles()(() => {
+    return {
+        container: {
+            display: 'flex',
+            flexDirection: 'column',
+            margin: '16px'
+        },
+        row: {
+            alignSelf: 'center',
+            display: 'flex'
+        },
+        item: {
+            textAlign: 'center',
+            margin: '16px'
+        },
+        emoji: {
+            fontSize: '2.5rem',
+            margin: '12px'
+        }
+    };
+});
+
+const ParticipantVerificationDialog = ({
+    dispatch,
+    participantName,
+    pId,
+    sas
+}: IProps) => {
+    const { classes } = useStyles();
+    const { t } = useTranslation();
+
+    const _onDismissed = useCallback(() => {
+        dispatch(participantVerified(pId, false));
+
+        return true;
+    }, [ pId ]);
+
+    const _onConfirmed = useCallback(() => {
+        dispatch(participantVerified(pId, true));
+
+        return true;
+    }, [ pId ]);
+
+    const { emoji } = sas;
+
+    return (
+        <Dialog
+            cancel = {{ translationKey: 'dialog.verifyParticipantDismiss' }}
+            ok = {{ translationKey: 'dialog.verifyParticipantConfirm' }}
+            onCancel = { _onDismissed }
+            onSubmit = { _onConfirmed }
+            titleKey = 'dialog.verifyParticipantTitle'>
+            <div>
+                {t('dialog.verifyParticipantQuestion', { participantName })}
+            </div>
+
+            <div className = { classes.container }>
+                <div className = { classes.row }>
+                    {/* @ts-ignore */}
+                    {emoji.slice(0, 4).map((e: Array<string>) =>
+                        (<div
+                            className = { classes.item }
+                            key = { e.toString() }>
+                            <div className = { classes.emoji }>{e[0]}</div>
+                            <div>{e[1].charAt(0).toUpperCase() + e[1].slice(1)}</div>
+                        </div>))}
+                </div>
+
+                <div className = { classes.row }>
+                    {/* @ts-ignore */}
+                    {emoji.slice(4, 7).map((e: Array<string>) =>
+                        (<div
+                            className = { classes.item }
+                            key = { e.toString() }>
+                            <div className = { classes.emoji }>{e[0]} </div>
+                            <div>{e[1].charAt(0).toUpperCase() + e[1].slice(1)}</div>
+                        </div>))}
+                </div>
+
+            </div>
+
+        </Dialog>
+    );
+};
+
+/**
+ * Maps part of the Redux store to the props of this component.
+ *
+ * @param {IReduxState} state - The Redux state.
+ * @param {IProps} ownProps - The own props of the component.
+ * @returns {IProps}
+ */
+export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
+    const participant = getParticipantById(state, ownProps.pId);
+
+    return {
+        sas: ownProps.sas,
+        pId: ownProps.pId,
+        participantName: participant?.name
+    };
+}
+
+export default connect(_mapStateToProps)(ParticipantVerificationDialog);