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

2026-09-15 15:56:32 +05:00
commit 1d2bfcac0c
3159 changed files with 464524 additions and 0 deletions
--- a/react/features/participants-pane/components/web/LobbyParticipants.tsx
+++ b/react/features/participants-pane/components/web/LobbyParticipants.tsx
@@ -0,0 +1,135 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import Avatar from '../../../base/avatar/components/Avatar';
+import Icon from '../../../base/icons/components/Icon';
+import { IconCheck, IconCloseLarge } from '../../../base/icons/svg';
+import { admitMultiple } from '../../../lobby/actions.web';
+import { getKnockingParticipants, getLobbyEnabled } from '../../../lobby/functions';
+import Drawer from '../../../toolbox/components/web/Drawer';
+import JitsiPortal from '../../../toolbox/components/web/JitsiPortal';
+import { showOverflowDrawer } from '../../../toolbox/functions.web';
+import { useLobbyActions, useParticipantDrawer } from '../../hooks';
+
+import LobbyParticipantItems from './LobbyParticipantItems';
+
+const useStyles = makeStyles()(theme => {
+    return {
+        drawerActions: {
+            listStyleType: 'none',
+            margin: 0,
+            padding: 0
+        },
+        drawerItem: {
+            alignItems: 'center',
+            color: theme.palette.participantCounterText,
+            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 participants waiting in the lobby.
+ *
+ * @returns {ReactNode}
+ */
+export default function LobbyParticipants() {
+    const lobbyEnabled = useSelector(getLobbyEnabled);
+    const participants = useSelector(getKnockingParticipants);
+    const { t } = useTranslation();
+    const { classes } = useStyles();
+    const dispatch = useDispatch();
+    const admitAll = useCallback(() => {
+        dispatch(admitMultiple(participants));
+    }, [ dispatch, participants ]);
+    const overflowDrawer = useSelector(showOverflowDrawer);
+    const [ drawerParticipant, closeDrawer, openDrawerForParticipant ] = useParticipantDrawer();
+    const [ admit, reject ] = useLobbyActions(drawerParticipant, closeDrawer);
+
+    if (!lobbyEnabled || !participants.length) {
+        return null;
+    }
+
+    return (
+        <>
+            <div className = { classes.headingContainer }>
+                <div className = { classes.heading }>
+                    {t('participantsPane.headings.lobby', { count: participants.length })}
+                </div>
+                {
+                    participants.length > 1
+                    && <div
+                        className = { classes.link }
+                        onClick = { admitAll }>{t('participantsPane.actions.admitAll')}</div>
+                }
+            </div>
+            <LobbyParticipantItems
+                openDrawerForParticipant = { openDrawerForParticipant }
+                overflowDrawer = { overflowDrawer }
+                participants = { participants } />
+            <JitsiPortal>
+                <Drawer
+                    isOpen = { Boolean(drawerParticipant && overflowDrawer) }
+                    onClose = { closeDrawer }>
+                    <ul className = { classes.drawerActions }>
+                        <li className = { classes.drawerItem }>
+                            <Avatar
+                                className = { classes.icon }
+                                participantId = { drawerParticipant?.participantID }
+                                size = { 20 } />
+                            <span>{ drawerParticipant?.displayName }</span>
+                        </li>
+                        <li
+                            className = { classes.drawerItem }
+                            onClick = { admit }>
+                            <Icon
+                                className = { classes.icon }
+                                size = { 20 }
+                                src = { IconCheck } />
+                            <span>{ t('participantsPane.actions.admit') }</span>
+                        </li>
+                        <li
+                            className = { classes.drawerItem }
+                            onClick = { reject }>
+                            <Icon
+                                className = { classes.icon }
+                                size = { 20 }
+                                src = { IconCloseLarge } />
+                            <span>{ t('participantsPane.actions.reject')}</span>
+                        </li>
+                    </ul>
+                </Drawer>
+            </JitsiPortal>
+        </>
+    );
+}