feat(participants-pane) consolidate moeration options

lang/main.json

@@ -723,6 +723,7 @@
             "audioModeration": "Unmute themselves",
             "blockEveryoneMicCamera": "Block everyone's mic and camera",
             "invite": "Invite Someone",
+            "moderator": "Moderator",
             "moreModerationActions": "More moderation options",
             "moreModerationControls": "More moderation controls",
             "moreParticipantOptions": "More participant options",

react/features/participants-pane/components/native/ContextMenuMore.js → react/features/participants-pane/components/native/ModeratorMenu.js

@@ -19,17 +19,23 @@ import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
 import {
     Icon,
     IconCheck,
+    IconMicrophoneEmptySlash,
     IconVideoOff
 } from '../../../base/icons';
 import { MEDIA_TYPE } from '../../../base/media';
 import { getParticipantCount, isEveryoneModerator } from '../../../base/participants';
+import MuteEveryoneDialog from '../../../video-menu/components/native/MuteEveryoneDialog';
 import MuteEveryonesVideoDialog
     from '../../../video-menu/components/native/MuteEveryonesVideoDialog';
 
 import styles from './styles';
 
-export const ContextMenuMore = () => {
+export const ModeratorMenu = () => {
     const dispatch = useDispatch();
+    const muteAll = useCallback(() => {
+        dispatch(openDialog(MuteEveryoneDialog));
+        dispatch(hideSheet());
+    }, [ dispatch ]);
     const muteAllVideo = useCallback(() => {
         dispatch(openDialog(MuteEveryonesVideoDialog));
         dispatch(hideSheet());
@@ -53,6 +59,14 @@ export const ContextMenuMore = () => {
         <BottomSheet
             addScrollViewPadding = { false }
             showSlidingView = { true }>
+            <TouchableOpacity
+                onPress = { muteAll }
+                style = { styles.contextMenuItem }>
+                <Icon
+                    size = { 24 }
+                    src = { IconMicrophoneEmptySlash } />
+                <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.muteAll')}</Text>
+            </TouchableOpacity>
             <TouchableOpacity
                 onPress = { muteAllVideo }
                 style = { styles.contextMenuItem }>

react/features/participants-pane/components/native/ParticipantsPaneFooter.tsx

@@ -4,21 +4,15 @@ import { View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
 // @ts-ignore
-import { openDialog, openSheet } from '../../../base/dialog';
-// @ts-ignore
-import { IconHorizontalPoints } from '../../../base/icons';
+import { openSheet } from '../../../base/dialog';
 import Button from '../../../base/react/components/native/Button';
-import IconButton from '../../../base/react/components/native/IconButton';
 // @ts-ignore
 import { BUTTON_TYPES } from '../../../base/react/constants';
-import MuteEveryoneDialog
-// @ts-ignore
-    from '../../../video-menu/components/native/MuteEveryoneDialog';
 // @ts-ignore
-import { isMoreActionsVisible, isMuteAllVisible } from '../../functions';
+import { isMoreActionsVisible } from '../../functions';
 
 // @ts-ignore
-import { ContextMenuMore } from './ContextMenuMore';
+import { ModeratorMenu } from './ModeratorMenu';
 // @ts-ignore
 import styles from './styles';
 
@@ -28,34 +22,23 @@ import styles from './styles';
  *
  * @returns { JSX.Element} - The participants pane footer component.
  */
-const ParticipantsPaneFooter = (): JSX.Element => {
+const ParticipantsPaneFooter = (): JSX.Element|null => {
     const dispatch = useDispatch();
-    const openMoreMenu = useCallback(() => dispatch(openSheet(ContextMenuMore)), [ dispatch ]);
-    const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)),
-        [ dispatch ]);
+    const openMenu = useCallback(() => dispatch(openSheet(ModeratorMenu)), [ dispatch ]);
     const showMoreActions = useSelector(isMoreActionsVisible);
-    const showMuteAll = useSelector(isMuteAllVisible);
+
+    if (!showMoreActions) {
+        return null;
+    }
 
     return (
         <View style = { styles.participantsPaneFooter }>
-            {
-                showMuteAll && (
-                    <Button
-                        accessibilityLabel = 'participantsPane.actions.muteAll'
-                        label = 'participantsPane.actions.muteAll'
-                        onPress = { muteAll }
-                        type = { BUTTON_TYPES.SECONDARY } />
-                )
-            }
-            {
-                showMoreActions && (
-                    <IconButton
-                        onPress = { openMoreMenu }
-                        src = { IconHorizontalPoints }
-                        style = { styles.moreButton }
-                        type = { BUTTON_TYPES.SECONDARY } />
-                )
-            }
+            <Button
+                accessibilityLabel = 'participantsPane.actions.moderator'
+                label = 'participantsPane.actions.moderator'
+                onPress = { openMenu }
+                style = { styles.moreButton }
+                type = { BUTTON_TYPES.SECONDARY } />
         </View>
     );
 };

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

@@ -20,6 +20,7 @@ import { openDialog } from '../../../base/dialog';
 import {
     IconCheck,
     IconHorizontalPoints,
+    IconMicrophoneEmptySlash,
     IconVideoOff
 } from '../../../base/icons';
 import { MEDIA_TYPE } from '../../../base/media';
@@ -33,7 +34,10 @@ import {
     openSettingsDialog,
     shouldShowModeratorSettings
 } from '../../../settings';
-import { MuteEveryonesVideoDialog } from '../../../video-menu/components';
+import {
+    MuteEveryoneDialog,
+    MuteEveryonesVideoDialog
+} from '../../../video-menu/components';
 
 const useStyles = makeStyles(theme => {
     return {
@@ -104,6 +108,9 @@ export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props
 
     const classes = useStyles();
 
+    const muteAll = useCallback(
+        () => dispatch(openDialog(MuteEveryoneDialog)), [ dispatch ]);
+
     const muteAllVideo = useCallback(
         () => dispatch(openDialog(MuteEveryonesVideoDialog)), [ dispatch ]);
 
@@ -140,6 +147,13 @@ export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props
             onMouseLeave = { onMouseLeave }>
             <ContextMenuItemGroup
                 actions = { [ {
+                    accessibilityLabel: t('participantsPane.actions.muteAll'),
+                    id: 'participants-pane-context-menu-stop-mic',
+                    icon: IconMicrophoneEmptySlash,
+                    onClick: muteAll,
+                    text: t('participantsPane.actions.muteAll')
+                },
+                {
                     accessibilityLabel: t('participantsPane.actions.stopEveryonesVideo'),
                     id: 'participants-pane-context-menu-stop-video',
                     icon: IconVideoOff,

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

@@ -5,20 +5,17 @@ import React, { Component } from 'react';
 
 import Button from '../../../base/components/common/Button';
 import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json';
-import { openDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
-import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
+import { Icon, IconClose } from '../../../base/icons';
 import { isLocalParticipantModerator } from '../../../base/participants/functions';
 import { BUTTON_TYPES } from '../../../base/react/constants';
 import { connect } from '../../../base/redux';
 import { isAddBreakoutRoomButtonVisible } from '../../../breakout-rooms/functions';
-import { MuteEveryoneDialog } from '../../../video-menu/components/';
 import { close } from '../../actions';
 import {
     findAncestorByClass,
     getParticipantsPaneOpen,
-    isMoreActionsVisible,
-    isMuteAllVisible
+    isMoreActionsVisible
 } from '../../functions';
 import { AddBreakoutRoomButton } from '../breakout-rooms/components/web/AddBreakoutRoomButton';
 import { RoomList } from '../breakout-rooms/components/web/RoomList';
@@ -57,11 +54,6 @@ type Props = {
      */
     _showMoreActionsButton: boolean,
 
-    /**
-     * Whether to show the mute all button.
-     */
-    _showMuteAllButton: boolean,
-
     /**
      * Whether to show the footer menu.
      */
@@ -182,7 +174,6 @@ class ParticipantsPane extends Component<Props, State> {
         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);
         this.setSearchString = this.setSearchString.bind(this);
@@ -219,7 +210,6 @@ class ParticipantsPane extends Component<Props, State> {
             _showAddRoomButton,
             _showFooter,
             _showMoreActionsButton,
-            _showMuteAllButton,
             classes,
             t
         } = this.props;
@@ -258,19 +248,12 @@ class ParticipantsPane extends Component<Props, State> {
                     </div>
                     {_showFooter && (
                         <div className = { classes.footer }>
-                            {_showMuteAllButton && (
-                                <Button
-                                    accessibilityLabel = { t('participantsPane.actions.muteAll') }
-                                    label = { t('participantsPane.actions.muteAll') }
-                                    onClick = { this._onMuteAll }
-                                    type = { BUTTON_TYPES.SECONDARY } />
-                            )}
                             {_showMoreActionsButton && (
                                 <div className = { classes.footerMoreContainer }>
                                     <Button
                                         accessibilityLabel = { t('participantsPane.actions.moreModerationActions') }
-                                        icon = { IconHorizontalPoints }
                                         id = 'participants-pane-context-menu'
+                                        label = { t('participantsPane.actions.moderator') }
                                         onClick = { this._onToggleContext }
                                         type = { BUTTON_TYPES.SECONDARY } />
                                     <FooterContextMenu
@@ -342,17 +325,6 @@ class ParticipantsPane extends Component<Props, State> {
         }
     }
 
-    _onMuteAll: () => void;
-
-    /**
-     * The handler for clicking mute all button.
-     *
-     * @returns {void}
-     */
-    _onMuteAll() {
-        this.props.dispatch(openDialog(MuteEveryoneDialog));
-    }
-
     _onToggleContext: () => void;
 
     /**
@@ -403,7 +375,6 @@ function _mapStateToProps(state: Object) {
         _paneOpen: isPaneOpen,
         _showAddRoomButton: isAddBreakoutRoomButtonVisible(state),
         _showFooter: isLocalParticipantModerator(state),
-        _showMuteAllButton: isMuteAllVisible(state),
         _showMoreActionsButton: isMoreActionsVisible(state)
     };
 }