2021-04-21 13:48:05 +00:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
import React from 'react';
|
2021-06-10 12:48:44 +00:00
|
|
|
import { useTranslation } from 'react-i18next';
|
2021-04-21 13:48:05 +00:00
|
|
|
import { useSelector } from 'react-redux';
|
|
|
|
|
|
|
|
import { getIsParticipantAudioMuted, getIsParticipantVideoMuted } from '../../base/tracks';
|
2021-06-23 11:23:44 +00:00
|
|
|
import { ACTION_TRIGGER, MEDIA_STATE } from '../constants';
|
|
|
|
import { getParticipantAudioMediaState } from '../functions';
|
2021-04-21 13:48:05 +00:00
|
|
|
|
|
|
|
import { ParticipantItem } from './ParticipantItem';
|
2021-06-23 11:23:44 +00:00
|
|
|
import ParticipantQuickAction from './ParticipantQuickAction';
|
2021-04-21 13:48:05 +00:00
|
|
|
import { ParticipantActionEllipsis } from './styled';
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Is this item highlighted
|
|
|
|
*/
|
|
|
|
isHighlighted: boolean,
|
|
|
|
|
2021-06-23 11:23:44 +00:00
|
|
|
/**
|
|
|
|
* Callback used to open a confirmation dialog for audio muting.
|
|
|
|
*/
|
|
|
|
muteAudio: Function,
|
|
|
|
|
2021-04-21 13:48:05 +00:00
|
|
|
/**
|
|
|
|
* Callback for the activation of this item's context menu
|
|
|
|
*/
|
|
|
|
onContextMenu: Function,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Callback for the mouse leaving this item
|
|
|
|
*/
|
|
|
|
onLeave: Function,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Participant reference
|
|
|
|
*/
|
|
|
|
participant: Object
|
|
|
|
};
|
|
|
|
|
|
|
|
export const MeetingParticipantItem = ({
|
|
|
|
isHighlighted,
|
|
|
|
onContextMenu,
|
|
|
|
onLeave,
|
2021-06-23 11:23:44 +00:00
|
|
|
muteAudio,
|
2021-04-21 13:48:05 +00:00
|
|
|
participant
|
|
|
|
}: Props) => {
|
2021-06-10 12:48:44 +00:00
|
|
|
const { t } = useTranslation();
|
2021-04-21 13:48:05 +00:00
|
|
|
const isAudioMuted = useSelector(getIsParticipantAudioMuted(participant));
|
|
|
|
const isVideoMuted = useSelector(getIsParticipantVideoMuted(participant));
|
2021-06-23 11:23:44 +00:00
|
|
|
const audioMediaState = useSelector(getParticipantAudioMediaState(participant, isAudioMuted));
|
2021-04-21 13:48:05 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<ParticipantItem
|
2021-06-23 11:23:44 +00:00
|
|
|
actionsTrigger = { ACTION_TRIGGER.HOVER }
|
|
|
|
audioMediaState = { audioMediaState }
|
2021-04-21 13:48:05 +00:00
|
|
|
isHighlighted = { isHighlighted }
|
|
|
|
onLeave = { onLeave }
|
|
|
|
participant = { participant }
|
2021-06-23 11:23:44 +00:00
|
|
|
videoMuteState = { isVideoMuted ? MEDIA_STATE.MUTED : MEDIA_STATE.UNMUTED }>
|
|
|
|
<ParticipantQuickAction
|
|
|
|
isAudioMuted = { isAudioMuted }
|
|
|
|
muteAudio = { muteAudio }
|
|
|
|
participant = { participant } />
|
2021-06-10 12:48:44 +00:00
|
|
|
<ParticipantActionEllipsis
|
|
|
|
aria-label = { t('MeetingParticipantItem.ParticipantActionEllipsis.options') }
|
|
|
|
onClick = { onContextMenu } />
|
2021-04-21 13:48:05 +00:00
|
|
|
</ParticipantItem>
|
|
|
|
);
|
|
|
|
};
|