feat(breakout-rooms/native): separate breakout rooms from participants

lang/main.json

@@ -67,7 +67,8 @@
             "renameBreakoutRoom": "Rename breakout room",
             "sendToBreakoutRoom": "Send participant to:"
         },
-        "breakoutList": "breakout list",
+        "breakoutList": "Breakout list",
+        "buttonLabel": "Breakout rooms",
         "defaultName": "Breakout room #{{index}}",
         "hideParticipantList": "Hide participant list",
         "mainRoom": "Main room",
@@ -76,7 +77,8 @@
             "joinedMainRoom": "Joining the main room",
             "joinedTitle": "Breakout Rooms"
         },
-        "showParticipantList": "Show participant list"
+        "showParticipantList": "Show participant list",
+        "title": "Breakout Rooms"
     },
     "calendarSync": {
         "addMeetingURL": "Add a meeting link",
@@ -811,6 +813,7 @@
             "askUnmute": "Ask to unmute",
             "audioModeration": "Unmute themselves",
             "blockEveryoneMicCamera": "Block everyone's mic and camera",
+            "breakoutRooms": "Breakout rooms",
             "invite": "Invite Someone",
             "moreModerationActions": "More moderation options",
             "moreModerationControls": "More moderation controls",
@@ -1157,7 +1160,7 @@
             "audioOnly": "Toggle audio only",
             "audioRoute": "Select the sound device",
             "boo": "Boo",
-            "breakoutRoom": "Join/leave breakout room",
+            "breakoutRooms": "Breakout rooms",
             "callQuality": "Manage video quality",
             "carmode": "Car Mode",
             "cc": "Toggle subtitles",

react/features/base/flags/constants.ts

@@ -23,6 +23,12 @@ export const AUDIO_MUTE_BUTTON_ENABLED = 'audio-mute.enabled';
  */
 export const AUDIO_ONLY_BUTTON_ENABLED = 'audio-only.enabled';
 
+/**
+ * Flag indicating that the Breakout Rooms button in the overflow menu is enabled.
+ * Default: enabled (true).
+ */
+export const BREAKOUT_ROOMS_BUTTON_ENABLED = 'breakout-rooms.enabled';
+
 /**
  * Flag indicating if calendar integration should be enabled.
  * Default: enabled (true) on Android, auto-detected on iOS.

react/features/participants-pane/components/breakout-rooms/components/native/AddBreakoutRoomButton.tsx → react/features/breakout-rooms/components/native/AddBreakoutRoomButton.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
-import Button from '../../../../../base/ui/components/native/Button';
-import { BUTTON_TYPES } from '../../../../../base/ui/constants.native';
-import { createBreakoutRoom } from '../../../../../breakout-rooms/actions';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.native';
+import { createBreakoutRoom } from '../../actions';
 
 import styles from './styles';
 

react/features/participants-pane/components/breakout-rooms/components/native/AutoAssignButton.tsx → react/features/breakout-rooms/components/native/AutoAssignButton.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
-import Button from '../../../../../base/ui/components/native/Button';
-import { BUTTON_TYPES } from '../../../../../base/ui/constants.native';
-import { autoAssignToBreakoutRooms } from '../../../../../breakout-rooms/actions';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.native';
+import { autoAssignToBreakoutRooms } from '../../actions';
 
 import styles from './styles';
 

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

@@ -4,22 +4,23 @@ import { TouchableOpacity, ViewStyle } from 'react-native';
 import { Text } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { createBreakoutRoomsEvent } from '../../../../../analytics/AnalyticsEvents';
-import { sendAnalytics } from '../../../../../analytics/functions';
-import { hideSheet, openDialog } from '../../../../../base/dialog/actions';
-import BottomSheet from '../../../../../base/dialog/components/native/BottomSheet';
-import Icon from '../../../../../base/icons/components/Icon';
-import { IconCloseLarge, IconEdit, IconRingGroup } from '../../../../../base/icons/svg';
-import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
-import { closeBreakoutRoom, moveToRoom, removeBreakoutRoom } from '../../../../../breakout-rooms/actions';
-import { getBreakoutRoomsConfig } from '../../../../../breakout-rooms/functions';
-import { IRoom } from '../../../../../breakout-rooms/types';
-import { isBreakoutRoomRenameAllowed } from '../../../../functions';
-import { BREAKOUT_CONTEXT_MENU_ACTIONS as ACTIONS } from '../../../../types';
-import styles from '../../../native/styles';
+import { createBreakoutRoomsEvent } from '../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../analytics/functions';
+import { hideSheet, openDialog } from '../../../base/dialog/actions';
+import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
+import Icon from '../../../base/icons/components/Icon';
+import { IconCloseLarge, IconEdit, IconRingGroup } from '../../../base/icons/svg';
+import { isLocalParticipantModerator } from '../../../base/participants/functions';
+import styles from '../../../participants-pane/components/native/styles';
+import { isBreakoutRoomRenameAllowed } from '../../../participants-pane/functions';
+import { BREAKOUT_CONTEXT_MENU_ACTIONS as ACTIONS } from '../../../participants-pane/types';
+import { closeBreakoutRoom, moveToRoom, removeBreakoutRoom } from '../../actions';
+import { getBreakoutRoomsConfig } from '../../functions';
+import { IRoom } from '../../types';
 
 import BreakoutRoomNamePrompt from './BreakoutRoomNamePrompt';
 
+
 /**
  * An array with all possible breakout rooms actions.
  */
@@ -85,7 +86,8 @@ const BreakoutRoomContextMenu = ({ room, actions = ALL_ACTIONS }: IProps) => {
                     </TouchableOpacity>
                 )
             }
-            {!room?.isMainRoom && actions.includes(ACTIONS.RENAME) && _isBreakoutRoomRenameAllowed
+            {
+                !room?.isMainRoom && actions.includes(ACTIONS.RENAME) && _isBreakoutRoomRenameAllowed
                 && <TouchableOpacity
                     onPress = { onRenameBreakoutRoom }
                     style = { styles.contextMenuItem as ViewStyle }>
@@ -95,7 +97,8 @@ const BreakoutRoomContextMenu = ({ room, actions = ALL_ACTIONS }: IProps) => {
                     <Text style = { styles.contextMenuItemText }>{t('breakoutRooms.actions.rename')}</Text>
                 </TouchableOpacity>
             }
-            {!room?.isMainRoom && isLocalModerator && actions.includes(ACTIONS.REMOVE)
+            {
+                !room?.isMainRoom && isLocalModerator && actions.includes(ACTIONS.REMOVE)
                 && (room?.participants && Object.keys(room.participants).length > 0
                     ? <TouchableOpacity
                         onPress = { onCloseBreakoutRoom }

react/features/participants-pane/components/breakout-rooms/components/native/BreakoutRoomNamePrompt.tsx → react/features/breakout-rooms/components/native/BreakoutRoomNamePrompt.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
-import InputDialog from '../../../../../base/dialog/components/native/InputDialog';
-import { renameBreakoutRoom } from '../../../../../breakout-rooms/actions';
-import { IBreakoutRoomNamePromptProps as IProps } from '../../../../types';
+import InputDialog from '../../../base/dialog/components/native/InputDialog';
+import { IBreakoutRoomNamePromptProps as IProps } from '../../../participants-pane/types';
+import { renameBreakoutRoom } from '../../actions';
+
 
 /**
  * Implements a component to render a breakout room name prompt.

react/features/participants-pane/components/breakout-rooms/components/native/BreakoutRoomParticipantItem.tsx → react/features/breakout-rooms/components/native/BreakoutRoomParticipantItem.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { IReduxState } from '../../../../../app/types';
-import { isLocalParticipantModerator, isParticipantModerator } from '../../../../../base/participants/functions';
-import { IRoom } from '../../../../../breakout-rooms/types';
-import { showRoomParticipantMenu } from '../../../../actions.native';
-import ParticipantItem from '../../../native/ParticipantItem';
+import { IReduxState } from '../../../app/types';
+import { isLocalParticipantModerator, isParticipantModerator } from '../../../base/participants/functions';
+import { showRoomParticipantMenu } from '../../../participants-pane/actions.native';
+import ParticipantItem from '../../../participants-pane/components/native/ParticipantItem';
+import { IRoom } from '../../types';
 
 interface IProps {
 

react/features/breakout-rooms/components/native/BreakoutRooms.tsx

@@ -0,0 +1,68 @@
+import React, { useCallback } from 'react';
+import { FlatList } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import JitsiScreen from '../../../base/modal/components/JitsiScreen';
+import { isLocalParticipantModerator } from '../../../base/participants/functions';
+import { equals } from '../../../base/redux/functions';
+import {
+    getBreakoutRooms,
+    getCurrentRoomId,
+    isAddBreakoutRoomButtonVisible,
+    isAutoAssignParticipantsVisible,
+    isInBreakoutRoom
+} from '../../functions';
+
+import AddBreakoutRoomButton from './AddBreakoutRoomButton';
+import AutoAssignButton from './AutoAssignButton';
+import { CollapsibleRoom } from './CollapsibleRoom';
+import LeaveBreakoutRoomButton from './LeaveBreakoutRoomButton';
+import styles from './styles';
+
+
+const BreakoutRooms = () => {
+    const currentRoomId = useSelector(getCurrentRoomId);
+    const inBreakoutRoom = useSelector(isInBreakoutRoom);
+    const isBreakoutRoomsSupported = useSelector((state: IReduxState) =>
+        state['features/base/conference'].conference?.getBreakoutRooms()?.isSupported());
+    const isLocalModerator = useSelector(isLocalParticipantModerator);
+    const keyExtractor = useCallback((e: undefined, i: number) => i.toString(), []);
+    const rooms = Object.values(useSelector(getBreakoutRooms, equals))
+        .filter(room => room.id !== currentRoomId)
+        .sort((p1, p2) => (p1?.name || '').localeCompare(p2?.name || ''));
+    const showAddBreakoutRoom = useSelector(isAddBreakoutRoomButtonVisible);
+    const showAutoAssign = useSelector(isAutoAssignParticipantsVisible);
+
+    return (
+        <JitsiScreen
+            footerComponent = { isLocalModerator && showAddBreakoutRoom
+                ? AddBreakoutRoomButton : undefined }
+            style = { styles.breakoutRoomsContainer }>
+
+            { /* Fixes warning regarding nested lists */ }
+            <FlatList
+
+                /* eslint-disable react/jsx-no-bind */
+                ListHeaderComponent = { () => (
+                    <>
+                        { showAutoAssign && <AutoAssignButton /> }
+                        { inBreakoutRoom && <LeaveBreakoutRoomButton /> }
+                        {
+                            isBreakoutRoomsSupported
+                            && rooms.map(room => (<CollapsibleRoom
+                                key = { room.id }
+                                room = { room }
+                                roomId = { room.id } />))
+                        }
+                    </>
+                ) }
+                data = { [] as ReadonlyArray<undefined> }
+                keyExtractor = { keyExtractor }
+                renderItem = { null }
+                windowSize = { 2 } />
+        </JitsiScreen>
+    );
+};
+
+export default BreakoutRooms;

react/features/breakout-rooms/components/native/BreakoutRoomsButton.tsx

@@ -0,0 +1,53 @@
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import {
+    BREAKOUT_ROOMS_BUTTON_ENABLED
+} from '../../../base/flags/constants';
+import { getFeatureFlag } from '../../../base/flags/functions';
+import { translate } from '../../../base/i18n/functions';
+import { IconRingGroup } from '../../../base/icons/svg';
+import AbstractButton,
+{
+    IProps as AbstractButtonProps
+} from '../../../base/toolbox/components/AbstractButton';
+import {
+    navigate
+} from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
+
+
+/**
+ * Implements an {@link AbstractButton} to open the breakout room screen.
+ */
+class BreakoutRoomsButton extends AbstractButton<AbstractButtonProps> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.breakoutRooms';
+    icon = IconRingGroup;
+    label = 'breakoutRooms.buttonLabel';
+
+    /**
+     * Handles clicking / pressing the button and opens the breakout rooms screen.
+     *
+     * @private
+     * @returns {void}
+     */
+    _handleClick() {
+        return navigate(screen.conference.breakoutRooms);
+    }
+}
+
+/**
+ * Maps part of the redux state to the component's props.
+ *
+ * @param {IReduxState} state - The Redux state.
+ * @returns {Object}
+ */
+function _mapStateToProps(state: IReduxState) {
+    const enabled = getFeatureFlag(state, BREAKOUT_ROOMS_BUTTON_ENABLED, true);
+
+    return {
+        visible: enabled
+    };
+}
+
+export default translate(connect(_mapStateToProps)(BreakoutRoomsButton));

react/features/participants-pane/components/breakout-rooms/components/native/CollapsibleRoom.tsx → react/features/breakout-rooms/components/native/CollapsibleRoom.tsx

@@ -3,11 +3,9 @@ import { useTranslation } from 'react-i18next';
 import { FlatList } from 'react-native';
 import { useDispatch } from 'react-redux';
 
-import { openSheet } from '../../../../../base/dialog/actions';
-import { IRoom } from '../../../../../breakout-rooms/types';
-import { participantMatchesSearch } from '../../../../functions';
-import CollapsibleList from '../../../native/CollapsibleList';
-import styles from '../../../native/styles';
+import { openSheet } from '../../../base/dialog/actions';
+import CollapsibleList from '../../../participants-pane/components/native/CollapsibleList';
+import { IRoom } from '../../types';
 
 import BreakoutRoomContextMenu from './BreakoutRoomContextMenu';
 import BreakoutRoomParticipantItem from './BreakoutRoomParticipantItem';
@@ -19,10 +17,7 @@ interface IProps {
      */
     room: IRoom;
 
-    /**
-     * Participants search string.
-     */
-    searchString: string;
+    roomId: string;
 }
 
 /**
@@ -35,7 +30,7 @@ function _keyExtractor(item: any) {
     return item.jid;
 }
 
-export const CollapsibleRoom = ({ room, searchString }: IProps) => {
+export const CollapsibleRoom = ({ room, roomId }: IProps) => {
     const dispatch = useDispatch();
     const { t } = useTranslation();
     const _openContextMenu = useCallback(() => {
@@ -46,29 +41,22 @@ export const CollapsibleRoom = ({ room, searchString }: IProps) => {
         = `${room.name
     || t('breakoutRooms.mainRoom')} (${roomParticipantsNr})`;
 
-    // Regarding the fact that we have 3 sections, we apply
-    // a certain height percentage for every section in order for all to fit
-    // inside the participants pane container
-    const containerStyle
-        = roomParticipantsNr > 2 ? styles.collapsibleRoomContainer : undefined;
-
     return (
         <CollapsibleList
-            containerStyle = { containerStyle }
             onLongPress = { _openContextMenu }
             title = { title }>
             <FlatList
-                bounces = { false }
                 data = { Object.values(room.participants || {}) }
-                horizontal = { false }
                 keyExtractor = { _keyExtractor }
+                listKey = { roomId }
+
                 // eslint-disable-next-line react/jsx-no-bind, no-confusing-arrow
-                renderItem = { ({ item: participant }) => participantMatchesSearch(participant, searchString)
-                    ? <BreakoutRoomParticipantItem
+                renderItem = { ({ item: participant }) => (
+                    <BreakoutRoomParticipantItem
                         item = { participant }
                         room = { room } />
-                    : null }
-                scrollEnabled = { true }
+                ) }
+                scrollEnabled = { false }
                 showsHorizontalScrollIndicator = { false }
                 windowSize = { 2 } />
         </CollapsibleList>

react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.tsx → react/features/breakout-rooms/components/native/LeaveBreakoutRoomButton.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createBreakoutRoomsEvent } from '../../../../../analytics/AnalyticsEvents';
-import { sendAnalytics } from '../../../../../analytics/functions';
-import Button from '../../../../../base/ui/components/native/Button';
-import { BUTTON_TYPES } from '../../../../../base/ui/constants.native';
-import { moveToRoom } from '../../../../../breakout-rooms/actions';
+import { createBreakoutRoomsEvent } from '../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../analytics/functions';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.native';
+import { moveToRoom } from '../../actions';
 
 import styles from './styles';