feat: Show footer context menu in p2p.

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

@@ -5,10 +5,7 @@ import { ThemeProvider } from 'styled-components';
 
 import { openDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
-import {
-    getParticipantCount,
-    isLocalParticipantModerator
-} from '../../../base/participants';
+import { isLocalParticipantModerator } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { MuteEveryoneDialog } from '../../../video-menu/components/';
 import { close } from '../../actions';
@@ -39,11 +36,6 @@ type Props = {
      */
     _paneOpen: boolean,
 
-    /**
-     * Whether to show context menu.
-     */
-    _showContextMenu: boolean,
-
     /**
      * Whether to show the footer menu.
      */
@@ -122,7 +114,6 @@ class ParticipantsPane extends Component<Props, State> {
     render() {
         const {
             _paneOpen,
-            _showContextMenu,
             _showFooter,
             t
         } = this.props;
@@ -155,15 +146,13 @@ class ParticipantsPane extends Component<Props, State> {
                                 <FooterButton onClick = { this._onMuteAll }>
                                     {t('participantsPane.actions.muteAll')}
                                 </FooterButton>
-                                {_showContextMenu && (
-                                    <FooterEllipsisContainer>
-                                        <FooterEllipsisButton
-                                            id = 'participants-pane-context-menu'
-                                            onClick = { this._onToggleContext } />
-                                        {this.state.contextOpen
-                                            && <FooterContextMenu onMouseLeave = { this._onToggleContext } />}
-                                    </FooterEllipsisContainer>
-                                )}
+                                <FooterEllipsisContainer>
+                                    <FooterEllipsisButton
+                                        id = 'participants-pane-context-menu'
+                                        onClick = { this._onToggleContext } />
+                                    {this.state.contextOpen
+                                        && <FooterContextMenu onMouseLeave = { this._onToggleContext } />}
+                                </FooterEllipsisContainer>
                             </Footer>
                         )}
                     </div>
@@ -249,7 +238,6 @@ class ParticipantsPane extends Component<Props, State> {
  * @protected
  * @returns {{
  *     _paneOpen: boolean,
- *     _showContextMenu: boolean,
  *     _showFooter: boolean
  * }}
  */
@@ -258,7 +246,6 @@ function _mapStateToProps(state: Object) {
 
     return {
         _paneOpen: isPaneOpen,
-        _showContextMenu: isPaneOpen && getParticipantCount(state) > 2,
         _showFooter: isPaneOpen && isLocalParticipantModerator(state)
     };
 }