feat(external-api): expose config for breakout rooms (#11055)

config.js

@@ -473,6 +473,7 @@ var config = {
     // If Lobby is enabled starts knocking automatically.
     // autoKnockLobby: false,
 
+    // DEPRECATED! Use `breakoutRooms.hideAddRoomButton` instead.
     // Hides add breakout room button
     // hideAddRoomButton: false,
 
@@ -1048,6 +1049,14 @@ var config = {
     */
     // dynamicBrandingUrl: '',
 
+    // Options related to the breakout rooms feature.
+    // breakoutRooms: {
+    //     // Hides the add breakout room button. This replaces `hideAddRoomButton`.
+    //     hideAddRoomButton: false,
+    //     // Hides the join breakout room button.
+    //     hideJoinRoomButton: false
+    // },
+
     // When true the user cannot add more images to be used as virtual background.
     // Only the default ones from will be available.
     // disableAddingBackgroundImages: false,

react/features/base/config/configWhitelist.js

@@ -22,6 +22,7 @@ export default [
     'apiLogLevels',
     'avgRtpStatsN',
     'backgroundAlpha',
+    'breakoutRooms',
     'buttonsWithNotifyClick',
 
     /**

react/features/base/config/reducer.js

@@ -342,6 +342,14 @@ function _translateLegacyConfig(oldValue: Object) {
         newValue.defaultRemoteDisplayName = interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME;
     }
 
+    if (oldValue.hideAddRoomButton) {
+        newValue.breakoutRooms = {
+            /* eslint-disable-next-line no-extra-parens */
+            ...(newValue.breakoutRooms || {}),
+            hideAddRoomButton: oldValue.hideAddRoomButton
+        };
+    }
+
     newValue.defaultRemoteDisplayName
         = newValue.defaultRemoteDisplayName || 'Fellow Jitster';
 

react/features/breakout-rooms/functions.js

@@ -71,3 +71,17 @@ export const isInBreakoutRoom = (stateful: Function | Object) => {
     return conference?.getBreakoutRooms()
         ?.isBreakoutRoom();
 };
+
+/**
+ * Returns the breakout rooms config.
+ *
+ * @param {Function|Object} stateful - The redux store, the redux
+ * {@code getState} function, or the redux state itself.
+ * @returns {Object}
+ */
+export const getBreakoutRoomsConfig = (stateful: Function | Object) => {
+    const state = toState(stateful);
+    const { breakoutRooms = {} } = state['features/base/config'];
+
+    return breakoutRooms;
+};

react/features/participants-pane/components/breakout-rooms/components/native/BreakoutRoomContextMenu.js

@@ -16,6 +16,7 @@ import {
 } from '../../../../../base/icons';
 import { isLocalParticipantModerator } from '../../../../../base/participants';
 import { closeBreakoutRoom, moveToRoom, removeBreakoutRoom } from '../../../../../breakout-rooms/actions';
+import { getBreakoutRoomsConfig } from '../../../../../breakout-rooms/functions';
 import styles from '../../../native/styles';
 
 type Props = {
@@ -30,6 +31,7 @@ const BreakoutRoomContextMenu = ({ room }: Props) => {
     const dispatch = useDispatch();
     const closeDialog = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
     const isLocalModerator = useSelector(isLocalParticipantModerator);
+    const { hideJoinRoomButton } = useSelector(getBreakoutRoomsConfig);
     const { t } = useTranslation();
 
     const onJoinRoom = useCallback(() => {
@@ -53,14 +55,18 @@ const BreakoutRoomContextMenu = ({ room }: Props) => {
             addScrollViewPadding = { false }
             onCancel = { closeDialog }
             showSlidingView = { true }>
-            <TouchableOpacity
+            {
-                onPress = { onJoinRoom }
+                !hideJoinRoomButton && (
-                style = { styles.contextMenuItem }>
+                    <TouchableOpacity
-                <Icon
+                        onPress = { onJoinRoom }
-                    size = { 24 }
+                        style = { styles.contextMenuItem }>
-                    src = { IconRingGroup } />
+                        <Icon
-                <Text style = { styles.contextMenuItemText }>{t('breakoutRooms.actions.join')}</Text>
+                            size = { 24 }
-            </TouchableOpacity>
+                            src = { IconRingGroup } />
+                        <Text style = { styles.contextMenuItemText }>{t('breakoutRooms.actions.join')}</Text>
+                    </TouchableOpacity>
+                )
+            }
             {!room?.isMainRoom && isLocalModerator
                 && (room?.participants && Object.keys(room.participants).length > 0
                     ? <TouchableOpacity

react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js

@@ -6,7 +6,12 @@ import { useSelector } from 'react-redux';
 import useContextMenu from '../../../../../base/components/context-menu/useContextMenu';
 import { getParticipantCount, isLocalParticipantModerator } from '../../../../../base/participants';
 import { equals } from '../../../../../base/redux';
-import { getBreakoutRooms, isInBreakoutRoom, getCurrentRoomId } from '../../../../../breakout-rooms/functions';
+import {
+    getBreakoutRooms,
+    isInBreakoutRoom,
+    getCurrentRoomId,
+    getBreakoutRoomsConfig
+} from '../../../../../breakout-rooms/functions';
 import { showOverflowDrawer } from '../../../../../toolbox/functions';
 
 import { AutoAssignButton } from './AutoAssignButton';
@@ -32,6 +37,7 @@ export const RoomList = ({ searchString }: Props) => {
     const inBreakoutRoom = useSelector(isInBreakoutRoom);
     const isLocalModerator = useSelector(isLocalParticipantModerator);
     const participantsCount = useSelector(getParticipantCount);
+    const { hideJoinRoomButton } = useSelector(getBreakoutRoomsConfig);
     const _overflowDrawer = useSelector(showOverflowDrawer);
     const [ lowerMenu, raiseMenu, toggleMenu, menuEnter, menuLeave, raiseContext ] = useContextMenu();
 
@@ -55,7 +61,7 @@ export const RoomList = ({ searchString }: Props) => {
                             room = { room }
                             searchString = { searchString }>
                             {!_overflowDrawer && <>
-                                <JoinActionButton room = { room } />
+                                {!hideJoinRoomButton && <JoinActionButton room = { room } />}
                                 {isLocalModerator && !room.isMainRoom
                                     && <RoomActionEllipsis onClick = { toggleMenu(room) } />}
                             </>}

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

@@ -13,7 +13,12 @@ import {
     isLocalParticipantModerator
 } from '../../../base/participants';
 import { equals } from '../../../base/redux';
-import { getBreakoutRooms, getCurrentRoomId, isInBreakoutRoom } from '../../../breakout-rooms/functions';
+import {
+    getBreakoutRooms,
+    getBreakoutRoomsConfig,
+    getCurrentRoomId,
+    isInBreakoutRoom
+} from '../../../breakout-rooms/functions';
 import MuteEveryoneDialog
     from '../../../video-menu/components/native/MuteEveryoneDialog';
 import {
@@ -43,7 +48,7 @@ const ParticipantsPane = () => {
         [ dispatch ]);
     const { t } = useTranslation();
 
-    const { hideAddRoomButton } = useSelector(state => state['features/base/config']);
+    const { hideAddRoomButton } = useSelector(getBreakoutRoomsConfig);
     const { conference } = useSelector(state => state['features/base/conference']);
 
     // $FlowExpectedError

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

@@ -9,6 +9,7 @@ import { translate } from '../../../base/i18n';
 import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
 import { isLocalParticipantModerator } from '../../../base/participants';
 import { connect } from '../../../base/redux';
+import { getBreakoutRoomsConfig } from '../../../breakout-rooms/functions';
 import { MuteEveryoneDialog } from '../../../video-menu/components/';
 import { close } from '../../actions';
 import { classList, findAncestorByClass, getParticipantsPaneOpen } from '../../functions';
@@ -373,7 +374,7 @@ class ParticipantsPane extends Component<Props, State> {
  */
 function _mapStateToProps(state: Object) {
     const isPaneOpen = getParticipantsPaneOpen(state);
-    const { hideAddRoomButton } = state['features/base/config'];
+    const { hideAddRoomButton } = getBreakoutRoomsConfig(state);
     const { conference } = state['features/base/conference'];
 
     // $FlowExpectedError