// @flow import React, { useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import { ThemeProvider } from 'styled-components'; import { openDialog } from '../../base/dialog'; import { getParticipantCount, isEveryoneModerator, isLocalParticipantModerator } from '../../base/participants'; import { MuteEveryoneDialog } from '../../video-menu/components/'; import { close } from '../actions'; import { classList, findStyledAncestor, getParticipantsPaneOpen } from '../functions'; import theme from '../theme.json'; import { FooterContextMenu } from './FooterContextMenu'; import { LobbyParticipantList } from './LobbyParticipantList'; import { MeetingParticipantList } from './MeetingParticipantList'; import { AntiCollapse, Close, Container, Footer, FooterButton, FooterEllipsisButton, FooterEllipsisContainer, Header } from './styled'; export const ParticipantsPane = () => { const dispatch = useDispatch(); const paneOpen = useSelector(getParticipantsPaneOpen); const isLocalModerator = useSelector(isLocalParticipantModerator); const participantsCount = useSelector(getParticipantCount); const everyoneModerator = useSelector(isEveryoneModerator); const showContextMenu = !everyoneModerator && participantsCount > 2; const [ contextOpen, setContextOpen ] = useState(false); const { t } = useTranslation(); const closePane = useCallback(() => dispatch(close(), [ dispatch ])); const closePaneKeyPress = useCallback(e => { if (closePane && (e.key === ' ' || e.key === 'Enter')) { e.preventDefault(); closePane(); } }, [ closePane ]); const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)), [ dispatch ]); useEffect(() => { const handler = [ 'click', e => { if (!findStyledAncestor(e.target, FooterEllipsisContainer)) { setContextOpen(false); } } ]; window.addEventListener(...handler); return () => window.removeEventListener(...handler); }, [ contextOpen ]); const toggleContext = useCallback(() => setContextOpen(!contextOpen), [ contextOpen, setContextOpen ]); return (
{isLocalModerator && ( )}
); };