From 936d9b41f19396631b43dc5ee6dc6b414740340e Mon Sep 17 00:00:00 2001 From: Mihaela Dumitru Date: Wed, 2 Mar 2022 16:15:18 +0200 Subject: [PATCH] feat(external-api): expose config for breakout rooms (#11055) --- config.js | 9 ++++++++ react/features/base/config/configWhitelist.js | 1 + react/features/base/config/reducer.js | 8 +++++++ react/features/breakout-rooms/functions.js | 14 ++++++++++++ .../native/BreakoutRoomContextMenu.js | 22 ++++++++++++------- .../breakout-rooms/components/web/RoomList.js | 10 +++++++-- .../components/native/ParticipantsPane.js | 9 ++++++-- .../components/web/ParticipantsPane.js | 3 ++- 8 files changed, 63 insertions(+), 13 deletions(-) diff --git a/config.js b/config.js index ed8f4a99c..097664219 100644 --- a/config.js +++ b/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, diff --git a/react/features/base/config/configWhitelist.js b/react/features/base/config/configWhitelist.js index 336e09763..9242859a3 100644 --- a/react/features/base/config/configWhitelist.js +++ b/react/features/base/config/configWhitelist.js @@ -22,6 +22,7 @@ export default [ 'apiLogLevels', 'avgRtpStatsN', 'backgroundAlpha', + 'breakoutRooms', 'buttonsWithNotifyClick', /** diff --git a/react/features/base/config/reducer.js b/react/features/base/config/reducer.js index 22bec92ec..1c0b2d759 100644 --- a/react/features/base/config/reducer.js +++ b/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'; diff --git a/react/features/breakout-rooms/functions.js b/react/features/breakout-rooms/functions.js index 92aed1eb4..40fd4fbf9 100644 --- a/react/features/breakout-rooms/functions.js +++ b/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; +}; diff --git a/react/features/participants-pane/components/breakout-rooms/components/native/BreakoutRoomContextMenu.js b/react/features/participants-pane/components/breakout-rooms/components/native/BreakoutRoomContextMenu.js index a2b2bd48e..ba1b1ee05 100644 --- a/react/features/participants-pane/components/breakout-rooms/components/native/BreakoutRoomContextMenu.js +++ b/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 }> - - - {t('breakoutRooms.actions.join')} - + { + !hideJoinRoomButton && ( + + + {t('breakoutRooms.actions.join')} + + ) + } {!room?.isMainRoom && isLocalModerator && (room?.participants && Object.keys(room.participants).length > 0 ? { 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 && <> - + {!hideJoinRoomButton && } {isLocalModerator && !room.isMainRoom && } } diff --git a/react/features/participants-pane/components/native/ParticipantsPane.js b/react/features/participants-pane/components/native/ParticipantsPane.js index 5fb92af66..c802cca49 100644 --- a/react/features/participants-pane/components/native/ParticipantsPane.js +++ b/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 diff --git a/react/features/participants-pane/components/web/ParticipantsPane.js b/react/features/participants-pane/components/web/ParticipantsPane.js index e4425093b..ddc3ae56c 100644 --- a/react/features/participants-pane/components/web/ParticipantsPane.js +++ b/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 { */ 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