jiti-meet/react/features/participants-pane/components/ParticipantQuickAction.js

79 lines
1.7 KiB
JavaScript

// @flow
import React from 'react';
import { QUICK_ACTION_BUTTON } from '../constants';
import AskToUnmuteButton from './AskToUnmuteButton';
import { QuickActionButton } from './web/styled';
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,
}
/**
* Component used to display mute/ask to unmute button.
*
* @param {Props} props - The props of the component.
* @returns {React$Element<'button'>}
*/
export default function ParticipantQuickAction({
askUnmuteText,
buttonType,
muteAudio,
muteParticipantButtonText,
participantID
}: Props) {
switch (buttonType) {
case QUICK_ACTION_BUTTON.MUTE: {
return (
<QuickActionButton
aria-label = { `mute-${participantID}` }
onClick = { muteAudio(participantID) }
primary = { true }>
{ muteParticipantButtonText }
</QuickActionButton>
);
}
case QUICK_ACTION_BUTTON.ASK_TO_UNMUTE: {
return (
<AskToUnmuteButton
askUnmuteText = { askUnmuteText }
participantID = { participantID } />
);
}
default: {
return null;
}
}
}