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

react/features/participants-pane/components/web/VisitorsList.tsx

@@ -0,0 +1,139 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { admitMultiple, goLive } from '../../../visitors/actions';
+import {
+    getPromotionRequests,
+    getVisitorsCount,
+    getVisitorsInQueueCount,
+    isVisitorsLive,
+    shouldDisplayCurrentVisitorsList
+} from '../../../visitors/functions';
+
+import { VisitorsItem } from './VisitorsItem';
+
+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            margin: `${theme.spacing(3)} 0`
+        },
+        headingW: {
+            color: theme.palette.participantWarningText
+        },
+        drawerActions: {
+            listStyleType: 'none',
+            margin: 0,
+            padding: 0
+        },
+        drawerItem: {
+            alignItems: 'center',
+            color: theme.palette.visitorsQueueText,
+            display: 'flex',
+            padding: '12px 16px',
+            ...theme.typography.bodyShortRegularLarge,
+
+            '&:first-child': {
+                marginTop: '15px'
+            },
+
+            '&:hover': {
+                cursor: 'pointer',
+                background: theme.palette.participantActionButton
+            }
+        },
+        icon: {
+            marginRight: 16
+        },
+        headingContainer: {
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between'
+        },
+        heading: {
+            ...theme.typography.bodyShortBold,
+            color: theme.palette.participantSectionText
+        },
+        link: {
+            ...theme.typography.labelBold,
+            color: theme.palette.participantLinkText,
+            cursor: 'pointer'
+        }
+    };
+});
+
+/**
+ * Component used to display a list of visitors waiting for approval to join the main meeting.
+ *
+ * @returns {ReactNode}
+ */
+export default function VisitorsList() {
+    const requests = useSelector(getPromotionRequests);
+    const visitorsCount = useSelector(getVisitorsCount);
+    const visitorsInQueueCount = useSelector(getVisitorsInQueueCount);
+    const isLive = useSelector(isVisitorsLive);
+    const showVisitorsInQueue = visitorsInQueueCount > 0 && isLive === false;
+    const showCurrentVisitorsList = useSelector(shouldDisplayCurrentVisitorsList);
+
+    const { t } = useTranslation();
+    const { classes, cx } = useStyles();
+    const dispatch = useDispatch();
+
+    const admitAll = useCallback(() => {
+        dispatch(admitMultiple(requests));
+    }, [ dispatch, requests ]);
+
+    const goLiveCb = useCallback(() => {
+        dispatch(goLive());
+    }, [ dispatch ]);
+
+    if (visitorsCount <= 0 && !showVisitorsInQueue) {
+        return null;
+    }
+
+    if (showCurrentVisitorsList && requests.length <= 0 && !showVisitorsInQueue) {
+        return null;
+    }
+
+    return (
+        <>
+            <div className = { classes.headingContainer }>
+                <div
+                    className = { cx(classes.heading, classes.headingW) }
+                    id = 'visitor-list-header' >
+                    { !showCurrentVisitorsList && t('participantsPane.headings.visitors', { count: visitorsCount })}
+                    { requests.length > 0
+                        && t(`participantsPane.headings.${showCurrentVisitorsList ? 'viewerRequests' : 'visitorRequests'}`, { count: requests.length }) }
+                    { showVisitorsInQueue
+                        && t('participantsPane.headings.visitorInQueue', { count: visitorsInQueueCount }) }
+                </div>
+                {
+                    requests.length > 1 && !showVisitorsInQueue // Go live button is with higher priority
+                    && <div
+                        className = { classes.link }
+                        onClick = { admitAll }>{ t('participantsPane.actions.admitAll') }</div>
+                }
+                {
+                    showVisitorsInQueue
+                    && <div
+                        className = { classes.link }
+                        onClick = { goLiveCb }>{ t('participantsPane.actions.goLive') }</div>
+                }
+            </div>
+            { requests.length > 0
+                && <div
+                    className = { classes.container }
+                    id = 'visitor-list'>
+                    {
+                        requests.map(r => (
+                            <VisitorsItem
+                                key = { r.from }
+                                request = { r } />)
+                        )
+                    }
+                </div>
+            }
+        </>
+    );
+}