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

107 lines
2.6 KiB
TypeScript
Raw Normal View History

/* eslint-disable lines-around-comment */
2022-09-13 07:36:00 +00:00
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
2022-09-13 07:36:00 +00:00
import { makeStyles } from 'tss-react/mui';
// @ts-ignore
import { approveParticipant } from '../../../av-moderation/actions';
import Button from '../../../base/ui/components/web/Button';
2022-09-13 07:36:00 +00:00
// @ts-ignore
import { QUICK_ACTION_BUTTON } from '../../constants';
type Props = {
/**
* The translated ask unmute aria label.
*/
ariaLabel?: boolean;
/**
* The translated "ask unmute" text.
*/
askUnmuteText: string;
/**
* The type of button to be displayed.
*/
buttonType: string;
/**
* Callback used to open a confirmation dialog for audio muting.
*/
muteAudio: Function;
/**
* Label for mute participant button.
*/
muteParticipantButtonText: string;
/**
* The ID of the participant.
*/
participantID: string;
/**
* The name of the participant.
*/
participantName: string;
};
2022-09-13 07:36:00 +00:00
const useStyles = makeStyles()((theme: Theme) => {
return {
button: {
2022-09-13 07:36:00 +00:00
marginRight: theme.spacing(2)
}
};
});
const ParticipantQuickAction = ({
askUnmuteText,
buttonType,
muteAudio,
muteParticipantButtonText,
participantID,
participantName
}: Props) => {
2022-09-13 07:36:00 +00:00
const { classes: styles } = useStyles();
const dispatch = useDispatch();
const { t } = useTranslation();
const askToUnmute = useCallback(() => {
dispatch(approveParticipant(participantID));
}, [ dispatch, participantID ]);
switch (buttonType) {
case QUICK_ACTION_BUTTON.MUTE: {
return (
<Button
accessibilityLabel = { `${t('participantsPane.actions.mute')} ${participantName}` }
className = { styles.button }
label = { muteParticipantButtonText }
onClick = { muteAudio(participantID) }
size = 'small'
testId = { `mute-${participantID}` } />
);
}
case QUICK_ACTION_BUTTON.ASK_TO_UNMUTE: {
return (
<Button
accessibilityLabel = { `${t('participantsPane.actions.askUnmute')} ${participantName}` }
className = { styles.button }
label = { askUnmuteText }
onClick = { askToUnmute }
size = 'small'
testId = { `unmute-${participantID}` } />
);
}
default: {
return null;
}
}
};
export default ParticipantQuickAction;