jiti-meet/react/features/lobby/components/native/KnockingParticipantList.js

174 lines
5.6 KiB
JavaScript
Raw Normal View History

import React, { PureComponent } from 'react';
import { View } from 'react-native';
import { translate } from '../../../base/i18n/functions';
import { isLocalParticipantModerator } from '../../../base/participants/functions';
import { connect } from '../../../base/redux';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants.native';
import { handleLobbyChatInitialized } from '../../../chat/actions.native';
import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
import { screen } from '../../../mobile/navigation/routes';
import ParticipantItem
from '../../../participants-pane/components/native/ParticipantItem';
import { setKnockingParticipantApproval } from '../../actions.native';
import { getKnockingParticipants, getLobbyEnabled, showLobbyChatButton } from '../../functions';
import styles from './styles';
/**
* Props type of the component.
*/
export type Props = {
/**
* The list of participants.
*/
_participants: Array<Object>,
/**
* True if the list should be rendered.
*/
_visible: boolean,
/**
* True if the polls feature is disabled.
*/
_isPollsDisabled: boolean,
/**
* Returns true if the lobby chat button should be shown.
*/
_showChatButton: Function,
/**
* The Redux Dispatch function.
*/
dispatch: Function
};
/**
* Component to render a list for the actively knocking participants.
*/
class KnockingParticipantList extends PureComponent<Props> {
/**
* Instantiates a new component.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props: Props) {
super(props);
this._onRespondToParticipant = this._onRespondToParticipant.bind(this);
}
/**
* Implements {@code PureComponent#render}.
*
* @inheritdoc
*/
render() {
const { _participants, _visible, _showChatButton } = this.props;
2020-05-20 08:25:31 +00:00
if (!_visible) {
return null;
}
return (
<>
2020-05-20 08:25:31 +00:00
{ _participants.map(p => (
<View
key = { p.id }
style = { styles.knockingParticipantListEntry }>
<ParticipantItem
displayName = { p.name }
isKnockingParticipant = { true }
key = { p.id }
participantID = { p.id }>
<Button
labelKey = { 'lobby.admit' }
onClick = { this._onRespondToParticipant(p.id, true) }
style = { styles.lobbyButtonAdmit }
type = { BUTTON_TYPES.PRIMARY } />
{
_showChatButton(p)
? (
<Button
labelKey = { 'lobby.chat' }
onClick = { this._onInitializeLobbyChat(p.id) }
style = { styles.lobbyButtonChat }
type = { BUTTON_TYPES.SECONDARY } />
) : null
}
<Button
labelKey = { 'lobby.reject' }
onClick = { this._onRespondToParticipant(p.id, false) }
style = { styles.lobbyButtonReject }
type = { BUTTON_TYPES.DESTRUCTIVE } />
</ParticipantItem>
</View>
)) }
</>
);
}
_onRespondToParticipant: (string, boolean) => Function;
/**
* Function that constructs a callback for the response handler button.
*
* @param {string} id - The id of the knocking participant.
* @param {boolean} approve - The response for the knocking.
* @returns {Function}
*/
_onRespondToParticipant(id, approve) {
return () => {
this.props.dispatch(setKnockingParticipantApproval(id, approve));
};
}
_onInitializeLobbyChat: (string) => Function;
/**
* Function that constructs a callback for the lobby chat button.
*
* @param {string} id - The id of the knocking participant.
* @returns {Function}
*/
_onInitializeLobbyChat(id) {
return () => {
this.props.dispatch(handleLobbyChatInitialized(id));
if (this.props._isPollsDisabled) {
return navigate(screen.conference.chat);
}
navigate(screen.conference.chatandpolls.main);
};
}
}
2020-05-20 08:25:31 +00:00
/**
* Maps part of the Redux state to the props of this component.
*
* @param {Object} state - The Redux state.
* @returns {Props}
*/
function _mapStateToProps(state): Object {
const lobbyEnabled = getLobbyEnabled(state);
const knockingParticipants = getKnockingParticipants(state);
const { disablePolls } = state['features/base/config'];
2020-05-20 08:25:31 +00:00
return {
_visible: lobbyEnabled && isLocalParticipantModerator(state),
_showChatButton: participant => showLobbyChatButton(participant)(state),
_isPollsDisabled: disablePolls,
2020-05-20 08:25:31 +00:00
// On mobile we only show a portion of the list for screen real estate reasons
_participants: knockingParticipants.slice(0, 2)
2020-05-20 08:25:31 +00:00
};
}
export default translate(connect(_mapStateToProps)(KnockingParticipantList));