jiti-meet/react/features/participants-pane/components/web/ParticipantsPane.js

288 lines
7.7 KiB
JavaScript

// @flow
import React, { Component } from 'react';
import { ThemeProvider } from 'styled-components';
import { openDialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { isLocalParticipantModerator } from '../../../base/participants';
import { connect } from '../../../base/redux';
import { Drawer, JitsiPortal } from '../../../toolbox/components/web';
import { showOverflowDrawer } from '../../../toolbox/functions';
import { MuteEveryoneDialog } from '../../../video-menu/components/';
import { close } from '../../actions';
import { classList, findStyledAncestor, getParticipantsPaneOpen } from '../../functions';
import theme from '../../theme.json';
import { FooterContextMenu } from '../FooterContextMenu';
import LobbyParticipants from './LobbyParticipants';
import MeetingParticipants from './MeetingParticipants';
import {
AntiCollapse,
Close,
Container,
Footer,
FooterButton,
FooterEllipsisButton,
FooterEllipsisContainer,
Header
} from './styled';
/**
* The type of the React {@code Component} props of {@link ParticipantsPane}.
*/
type Props = {
/**
* Whether to display the context menu as a drawer.
*/
_overflowDrawer: boolean,
/**
* Is the participants pane open.
*/
_paneOpen: boolean,
/**
* Whether to show the footer menu.
*/
_showFooter: boolean,
/**
* The Redux dispatch function.
*/
dispatch: Function,
/**
* The i18n translate function.
*/
t: Function
};
/**
* The type of the React {@code Component} state of {@link ParticipantsPane}.
*/
type State = {
/**
* Indicates if the footer context menu is open.
*/
contextOpen: boolean,
};
/**
* Implements the participants list.
*/
class ParticipantsPane extends Component<Props, State> {
/**
* Initializes a new {@code ParticipantsPane} instance.
*
* @inheritdoc
*/
constructor(props) {
super(props);
this.state = {
contextOpen: false
};
// Bind event handlers so they are only bound once per instance.
this._onClosePane = this._onClosePane.bind(this);
this._onDrawerClose = this._onDrawerClose.bind(this);
this._onKeyPress = this._onKeyPress.bind(this);
this._onMuteAll = this._onMuteAll.bind(this);
this._onToggleContext = this._onToggleContext.bind(this);
this._onWindowClickListener = this._onWindowClickListener.bind(this);
}
/**
* Implements React's {@link Component#componentDidMount()}.
*
* @inheritdoc
*/
componentDidMount() {
window.addEventListener('click', this._onWindowClickListener);
}
/**
* Implements React's {@link Component#componentWillUnmount()}.
*
* @inheritdoc
*/
componentWillUnmount() {
window.removeEventListener('click', this._onWindowClickListener);
}
/**
* Implements React's {@link Component#render}.
*
* @inheritdoc
*/
render() {
const {
_overflowDrawer,
_paneOpen,
_showFooter,
t
} = this.props;
const { contextOpen } = this.state;
// when the pane is not open optimize to not
// execute the MeetingParticipantList render for large list of participants
if (!_paneOpen) {
return null;
}
return (
<ThemeProvider theme = { theme }>
<div className = { classList('participants_pane', !_paneOpen && 'participants_pane--closed') }>
<div className = 'participants_pane-content'>
<Header>
<Close
aria-label = { t('participantsPane.close', 'Close') }
onClick = { this._onClosePane }
onKeyPress = { this._onKeyPress }
role = 'button'
tabIndex = { 0 } />
</Header>
<Container>
<LobbyParticipants />
<AntiCollapse />
<MeetingParticipants />
</Container>
{_showFooter && (
<Footer>
<FooterButton onClick = { this._onMuteAll }>
{t('participantsPane.actions.muteAll')}
</FooterButton>
<FooterEllipsisContainer>
<FooterEllipsisButton
id = 'participants-pane-context-menu'
onClick = { this._onToggleContext } />
{this.state.contextOpen && !_overflowDrawer
&& <FooterContextMenu onMouseLeave = { this._onToggleContext } />}
</FooterEllipsisContainer>
</Footer>
)}
</div>
<JitsiPortal>
<Drawer
isOpen = { contextOpen && _overflowDrawer }
onClose = { this._onDrawerClose }>
<FooterContextMenu inDrawer = { true } />
</Drawer>
</JitsiPortal>
</div>
</ThemeProvider>
);
}
_onClosePane: () => void;
/**
* Callback for closing the participant pane.
*
* @private
* @returns {void}
*/
_onClosePane() {
this.props.dispatch(close());
}
_onDrawerClose: () => void
/**
* Callback for closing the drawer.
*
* @private
* @returns {void}
*/
_onDrawerClose() {
this.setState({
contextOpen: false
});
}
_onKeyPress: (Object) => void;
/**
* KeyPress handler for accessibility for closing the participants pane.
*
* @param {Object} e - The key event to handle.
*
* @returns {void}
*/
_onKeyPress(e) {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
this._onClosePane();
}
}
_onMuteAll: () => void;
/**
* The handler for clicking mute all button.
*
* @returns {void}
*/
_onMuteAll() {
this.props.dispatch(openDialog(MuteEveryoneDialog));
}
_onToggleContext: () => void;
/**
* Handler for toggling open/close of the footer context menu.
*
* @returns {void}
*/
_onToggleContext() {
this.setState({
contextOpen: !this.state.contextOpen
});
}
_onWindowClickListener: (event: Object) => void;
/**
* Window click event listener.
*
* @param {Event} e - The click event.
* @returns {void}
*/
_onWindowClickListener(e) {
if (this.state.contextOpen && !findStyledAncestor(e.target, FooterEllipsisContainer)) {
this.setState({
contextOpen: false
});
}
}
}
/**
* Maps (parts of) the redux state to the React {@code Component} props of
* {@code ParticipantsPane}.
*
* @param {Object} state - The redux state.
* @protected
* @returns {{
* _paneOpen: boolean,
* _showFooter: boolean
* }}
*/
function _mapStateToProps(state: Object) {
const isPaneOpen = getParticipantsPaneOpen(state);
return {
_overflowDrawer: showOverflowDrawer(state),
_paneOpen: isPaneOpen,
_showFooter: isPaneOpen && isLocalParticipantModerator(state)
};
}
export default translate(connect(_mapStateToProps)(ParticipantsPane));