fix(breakout-rooms) Hide non-working options inside breakout rooms (#10959)

When the local participant is a moderator and is in a breakout room hide the following:
- advanced moderation
- Ask to Unmute
- Grant Moderator

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

@@ -27,6 +27,7 @@ import {
     getParticipantCount,
     isEveryoneModerator
 } from '../../../base/participants';
+import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
 import {
     SETTINGS_TABS,
     openSettingsDialog,
@@ -89,6 +90,7 @@ export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props
     const participantCount = useSelector(getParticipantCount);
     const isAudioModerationEnabled = useSelector(isAvModerationEnabled(MEDIA_TYPE.AUDIO));
     const isVideoModerationEnabled = useSelector(isAvModerationEnabled(MEDIA_TYPE.VIDEO));
+    const isBreakoutRoom = useSelector(isInBreakoutRoom);
 
     const { t } = useTranslation();
 
@@ -144,7 +146,7 @@ export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props
                     onClick: muteAllVideo,
                     text: t('participantsPane.actions.stopEveryonesVideo')
                 } ] } />
-            {isModerationSupported && (participantCount === 1 || !allModerators) && (
+            {!isBreakoutRoom && isModerationSupported && (participantCount === 1 || !allModerators) && (
                 <ContextMenuItemGroup actions = { actions }>
                     <div className = { classes.text }>
                         <span>{t('participantsPane.actions.allow')}</span>

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

@@ -116,6 +116,11 @@ type Props = {
      */
     isHighlighted: boolean,
 
+    /**
+     * Whether or not the local participant is in a breakout room.
+     */
+    isInBreakoutRoom: boolean,
+
     /**
      * Callback used to open a confirmation dialog for audio muting.
      */
@@ -189,6 +194,7 @@ function MeetingParticipantItem({
     _videoMediaState,
     askUnmuteText,
     isHighlighted,
+    isInBreakoutRoom,
     muteAudio,
     muteParticipantButtonText,
     onContextMenu,
@@ -261,13 +267,15 @@ function MeetingParticipantItem({
 
             {!overflowDrawer && !_participant?.isFakeParticipant
                 && <>
-                    <ParticipantQuickAction
-                        askUnmuteText = { askToUnmuteText }
-                        buttonType = { _quickActionButtonType }
-                        muteAudio = { muteAudio }
-                        muteParticipantButtonText = { muteParticipantButtonText }
-                        participantID = { _participantID }
-                        participantName = { _displayName } />
+                    {!isInBreakoutRoom && (
+                        <ParticipantQuickAction
+                            askUnmuteText = { askToUnmuteText }
+                            buttonType = { _quickActionButtonType }
+                            muteAudio = { muteAudio }
+                            muteParticipantButtonText = { muteParticipantButtonText }
+                            participantID = { _participantID }
+                            participantName = { _displayName } />
+                    )}
                     <ParticipantActionEllipsis
                         accessibilityLabel = { participantActionEllipsisLabel }
                         onClick = { onContextMenu } />

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

@@ -11,6 +11,11 @@ type Props = {
      */
     askUnmuteText: string,
 
+    /**
+     * Whether or not the local participant is in a breakout room.
+     */
+    isInBreakoutRoom: boolean,
+
     /**
      * Callback for the mouse leaving this item.
      */
@@ -34,7 +39,7 @@ type Props = {
     /**
      * The meeting participants.
      */
-     participantIds: Array<string>,
+    participantIds: Array<string>,
 
     /**
      * Callback used to open an actions drawer for a participant.
@@ -74,6 +79,7 @@ type Props = {
  */
 function MeetingParticipantItems({
     askUnmuteText,
+    isInBreakoutRoom,
     lowerMenu,
     toggleMenu,
     muteAudio,
@@ -90,6 +96,7 @@ function MeetingParticipantItems({
         <MeetingParticipantItem
             askUnmuteText = { askUnmuteText }
             isHighlighted = { raiseContextId === id }
+            isInBreakoutRoom = { isInBreakoutRoom }
             key = { id }
             muteAudio = { muteAudio }
             muteParticipantButtonText = { muteParticipantButtonText }

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

@@ -3,7 +3,7 @@
 import { makeStyles } from '@material-ui/styles';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { rejectParticipantAudio } from '../../../av-moderation/actions';
 import useContextMenu from '../../../base/components/context-menu/useContextMenu';
@@ -15,7 +15,7 @@ import {
 } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { normalizeAccents } from '../../../base/util/strings';
-import { getBreakoutRooms, getCurrentRoomId } from '../../../breakout-rooms/functions';
+import { getBreakoutRooms, getCurrentRoomId, isInBreakoutRoom } from '../../../breakout-rooms/functions';
 import { showOverflowDrawer } from '../../../toolbox/functions';
 import { muteRemote } from '../../../video-menu/actions.any';
 import { getSortedParticipantIds, shouldRenderInviteButton } from '../../functions';
@@ -92,6 +92,7 @@ function MeetingParticipants({
     const youText = t('chat.you');
     const askUnmuteText = t('participantsPane.actions.askUnmute');
     const muteParticipantButtonText = t('dialog.muteParticipantButton');
+    const isBreakoutRoom = useSelector(isInBreakoutRoom);
 
     const styles = useStyles();
 
@@ -112,6 +113,7 @@ function MeetingParticipants({
             <div>
                 <MeetingParticipantItems
                     askUnmuteText = { askUnmuteText }
+                    isInBreakoutRoom = { isBreakoutRoom }
                     lowerMenu = { lowerMenu }
                     muteAudio = { muteAudio }
                     muteParticipantButtonText = { muteParticipantButtonText }

react/features/video-menu/components/web/ParticipantContextMenu.js

@@ -12,7 +12,7 @@ import { isIosMobileBrowser, isMobileBrowser } from '../../../base/environment/u
 import { IconShareVideo } from '../../../base/icons';
 import { MEDIA_TYPE } from '../../../base/media';
 import { getLocalParticipant, PARTICIPANT_ROLE } from '../../../base/participants';
-import { getBreakoutRooms, getCurrentRoomId } from '../../../breakout-rooms/functions';
+import { getBreakoutRooms, getCurrentRoomId, isInBreakoutRoom } from '../../../breakout-rooms/functions';
 import { setVolume } from '../../../filmstrip/actions.web';
 import { isForceMuted } from '../../../participants-pane/functions';
 import { requestRemoteControl, stopController } from '../../../remote-control';
@@ -139,6 +139,7 @@ const ParticipantContextMenu = ({
     const { participantsVolume } = useSelector(state => state['features/filmstrip']);
     const _volume = (participant?.local ?? true ? undefined
         : participant?.id ? participantsVolume[participant?.id] : undefined) || 1;
+    const isBreakoutRoom = useSelector(isInBreakoutRoom);
 
     const _currentRoomId = useSelector(getCurrentRoomId);
     const _rooms = Object.values(useSelector(getBreakoutRooms));
@@ -209,7 +210,7 @@ const ParticipantContextMenu = ({
             );
         }
 
-        if (!disableGrantModerator) {
+        if (!disableGrantModerator && !isBreakoutRoom) {
             buttons2.push(
                 <GrantModeratorButton
                     key = 'grant-moderator'