jiti-meet/react/features/participants-pane/components/web/LobbyParticipantItem.tsx

144 lines
5.0 KiB
TypeScript

import { Theme } from '@mui/material';
import React, { useCallback, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IconChat, IconCloseCircle, IconHorizontalPoints } from '../../../base/icons/svg';
import { hasRaisedHand } from '../../../base/participants/functions';
import { IParticipant } from '../../../base/participants/types';
import Button from '../../../base/ui/components/web/Button';
import ContextMenu from '../../../base/ui/components/web/ContextMenu';
import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup';
import { BUTTON_TYPES } from '../../../base/ui/constants';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { showLobbyChatButton } from '../../../lobby/functions';
import { ACTION_TRIGGER, MEDIA_STATE } from '../../constants';
import { useLobbyActions } from '../../hooks';
import ParticipantItem from './ParticipantItem';
type Props = {
/**
* Callback used to open a drawer with admit/reject actions.
*/
openDrawerForParticipant: Function;
/**
* If an overflow drawer should be displayed.
*/
overflowDrawer: boolean;
/**
* Participant reference.
*/
participant: IParticipant;
};
const useStyles = makeStyles()((theme: Theme) => {
return {
button: {
marginRight: theme.spacing(2)
},
moreButton: {
paddingRight: '6px',
paddingLeft: '6px',
marginRight: theme.spacing(2)
},
contextMenu: {
position: 'fixed',
top: 'auto',
marginRight: '8px'
}
};
});
export const LobbyParticipantItem = ({
overflowDrawer,
participant: p,
openDrawerForParticipant
}: Props) => {
const { id } = p;
const [ admit, reject, chat ] = useLobbyActions({ participantID: id });
const { t } = useTranslation();
const [ isOpen, setIsOpen ] = useState(false);
const { classes: styles } = useStyles();
const showChat = useSelector(showLobbyChatButton(p));
const moreButtonRef = useRef();
const openContextMenu = useCallback(() => setIsOpen(true), []);
const closeContextMenu = useCallback(() => setIsOpen(false), []);
const renderAdmitButton = () => (
<Button
accessibilityLabel = { `${t('lobby.admit')} ${p.name}` }
className = { styles.button }
labelKey = { 'lobby.admit' }
onClick = { admit }
size = 'small'
testId = { `admit-${id}` } />);
return (
<ParticipantItem
actionsTrigger = { ACTION_TRIGGER.PERMANENT }
audioMediaState = { MEDIA_STATE.NONE }
displayName = { p.name }
local = { p.local }
openDrawerForParticipant = { openDrawerForParticipant }
overflowDrawer = { overflowDrawer }
participantID = { id }
raisedHand = { hasRaisedHand(p) }
videoMediaState = { MEDIA_STATE.NONE }
youText = { t('chat.you') }>
{showChat ? <>
{renderAdmitButton()}
<Button
accessibilityLabel = { `${t('participantsPane.actions.moreModerationActions')} ${p.name}` }
className = { styles.moreButton }
icon = { IconHorizontalPoints }
onClick = { openContextMenu }
ref = { moreButtonRef }
size = 'small' />
<ContextMenu
className = { styles.contextMenu }
hidden = { !isOpen }
offsetTarget = { moreButtonRef.current }
onMouseLeave = { closeContextMenu }>
<ContextMenuItemGroup
actions = { [ {
accessibilityLabel: `${t('lobby.chat')} ${p.name}`,
onClick: chat,
testId: `lobby-chat-${id}`,
icon: IconChat,
text: t('lobby.chat')
} ] } />
<ContextMenuItemGroup
actions = { [ {
accessibilityLabel: `${t('lobby.reject')} ${p.name}`,
onClick: reject,
testId: `reject-${id}`,
icon: IconCloseCircle,
text: t('lobby.reject')
} ] } />
</ContextMenu>
</> : <>
<Button
accessibilityLabel = { `${t('lobby.reject')} ${p.name}` }
className = { styles.button }
labelKey = { 'lobby.reject' }
onClick = { reject }
size = 'small'
testId = { `reject-${id}` }
type = { BUTTON_TYPES.DESTRUCTIVE } />
{renderAdmitButton()}
</>
}
</ParticipantItem>
);
};