"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7553/react/features/participants-pane/components/web/LobbyParticipants.tsx" (27 Sep 2023, 5206 Bytes) of package /linux/misc/jitsi-meet-7553.tar.gz:

    1 import React, { useCallback } from 'react';
    2 import { useTranslation } from 'react-i18next';
    3 import { useDispatch, useSelector } from 'react-redux';
    4 import { makeStyles } from 'tss-react/mui';
    5 
    6 import Avatar from '../../../base/avatar/components/Avatar';
    7 import Icon from '../../../base/icons/components/Icon';
    8 import { IconCheck, IconCloseLarge } from '../../../base/icons/svg';
    9 import { withPixelLineHeight } from '../../../base/styles/functions.web';
   10 import { admitMultiple } from '../../../lobby/actions.web';
   11 import { getKnockingParticipants, getLobbyEnabled } from '../../../lobby/functions';
   12 import Drawer from '../../../toolbox/components/web/Drawer';
   13 import JitsiPortal from '../../../toolbox/components/web/JitsiPortal';
   14 import { showOverflowDrawer } from '../../../toolbox/functions.web';
   15 import { useLobbyActions, useParticipantDrawer } from '../../hooks';
   16 
   17 import LobbyParticipantItems from './LobbyParticipantItems';
   18 
   19 const useStyles = makeStyles()(theme => {
   20     return {
   21         drawerActions: {
   22             listStyleType: 'none',
   23             margin: 0,
   24             padding: 0
   25         },
   26         drawerItem: {
   27             alignItems: 'center',
   28             color: theme.palette.text01,
   29             display: 'flex',
   30             padding: '12px 16px',
   31             ...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
   32 
   33             '&:first-child': {
   34                 marginTop: '15px'
   35             },
   36 
   37             '&:hover': {
   38                 cursor: 'pointer',
   39                 background: theme.palette.action02
   40             }
   41         },
   42         icon: {
   43             marginRight: 16
   44         },
   45         headingContainer: {
   46             alignItems: 'center',
   47             display: 'flex',
   48             justifyContent: 'space-between'
   49         },
   50         heading: {
   51             ...withPixelLineHeight(theme.typography.bodyShortBold),
   52             color: theme.palette.text02
   53         },
   54         link: {
   55             ...withPixelLineHeight(theme.typography.labelBold),
   56             color: theme.palette.link01,
   57             cursor: 'pointer'
   58         }
   59     };
   60 });
   61 
   62 /**
   63  * Component used to display a list of participants waiting in the lobby.
   64  *
   65  * @returns {ReactNode}
   66  */
   67 export default function LobbyParticipants() {
   68     const lobbyEnabled = useSelector(getLobbyEnabled);
   69     const participants = useSelector(getKnockingParticipants);
   70     const { t } = useTranslation();
   71     const { classes } = useStyles();
   72     const dispatch = useDispatch();
   73     const admitAll = useCallback(() => {
   74         dispatch(admitMultiple(participants));
   75     }, [ dispatch, participants ]);
   76     const overflowDrawer = useSelector(showOverflowDrawer);
   77     const [ drawerParticipant, closeDrawer, openDrawerForParticipant ] = useParticipantDrawer();
   78     const [ admit, reject ] = useLobbyActions(drawerParticipant, closeDrawer);
   79 
   80     if (!lobbyEnabled || !participants.length) {
   81         return null;
   82     }
   83 
   84     return (
   85         <>
   86             <div className = { classes.headingContainer }>
   87                 <div className = { classes.heading }>
   88                     {t('participantsPane.headings.lobby', { count: participants.length })}
   89                 </div>
   90                 {
   91                     participants.length > 1
   92                     && <div
   93                         className = { classes.link }
   94                         onClick = { admitAll }>{t('lobby.admitAll')}</div>
   95                 }
   96             </div>
   97             <LobbyParticipantItems
   98                 openDrawerForParticipant = { openDrawerForParticipant }
   99                 overflowDrawer = { overflowDrawer }
  100                 participants = { participants } />
  101             <JitsiPortal>
  102                 <Drawer
  103                     isOpen = { Boolean(drawerParticipant && overflowDrawer) }
  104                     onClose = { closeDrawer }>
  105                     <ul className = { classes.drawerActions }>
  106                         <li className = { classes.drawerItem }>
  107                             <Avatar
  108                                 className = { classes.icon }
  109                                 participantId = { drawerParticipant?.participantID }
  110                                 size = { 20 } />
  111                             <span>{ drawerParticipant?.displayName }</span>
  112                         </li>
  113                         <li
  114                             className = { classes.drawerItem }
  115                             onClick = { admit }>
  116                             <Icon
  117                                 className = { classes.icon }
  118                                 size = { 20 }
  119                                 src = { IconCheck } />
  120                             <span>{ t('lobby.admit') }</span>
  121                         </li>
  122                         <li
  123                             className = { classes.drawerItem }
  124                             onClick = { reject }>
  125                             <Icon
  126                                 className = { classes.icon }
  127                                 size = { 20 }
  128                                 src = { IconCloseLarge } />
  129                             <span>{ t('lobby.reject')}</span>
  130                         </li>
  131                     </ul>
  132                 </Drawer>
  133             </JitsiPortal>
  134         </>
  135     );
  136 }