init

react/features/breakout-rooms/actionTypes.ts

@@ -0,0 +1,15 @@
+/**
+ * The type of (redux) action to reset the breakout rooms data.
+ */
+export const _RESET_BREAKOUT_ROOMS = '_RESET_BREAKOUT_ROOMS';
+
+/**
+ * The type of (redux) action to update the room counter locally.
+ */
+export const _UPDATE_ROOM_COUNTER = '_UPDATE_ROOM_COUNTER';
+
+/**
+  * The type of (redux) action to update the breakout room data.
+  *
+  */
+export const UPDATE_BREAKOUT_ROOMS = 'UPDATE_BREAKOUT_ROOMS';

react/features/breakout-rooms/actions.ts

@@ -0,0 +1,322 @@
+import i18next from 'i18next';
+import { chunk, filter, shuffle } from 'lodash-es';
+
+import { createBreakoutRoomsEvent } from '../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../analytics/functions';
+import { IStore } from '../app/types';
+import {
+    conferenceLeft,
+    conferenceWillLeave,
+    createConference
+} from '../base/conference/actions';
+import { CONFERENCE_LEAVE_REASONS } from '../base/conference/constants';
+import { getCurrentConference } from '../base/conference/functions';
+import { setAudioMuted, setVideoMuted } from '../base/media/actions';
+import { MEDIA_TYPE } from '../base/media/constants';
+import { getRemoteParticipants } from '../base/participants/functions';
+import { createDesiredLocalTracks } from '../base/tracks/actions';
+import {
+    getLocalTracks,
+    isLocalTrackMuted
+} from '../base/tracks/functions';
+import { clearNotifications, showNotification } from '../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
+
+import { _RESET_BREAKOUT_ROOMS, _UPDATE_ROOM_COUNTER } from './actionTypes';
+import { FEATURE_KEY } from './constants';
+import {
+    getBreakoutRooms,
+    getMainRoom,
+    getRoomByJid
+} from './functions';
+import logger from './logger';
+
+/**
+ * Action to create a breakout room.
+ *
+ * @param {string} name - Name / subject for the breakout room.
+ * @returns {Function}
+ */
+export function createBreakoutRoom(name?: string) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+        let { roomCounter } = state[FEATURE_KEY];
+        const subject = name || i18next.t('breakoutRooms.defaultName', { index: ++roomCounter });
+
+        sendAnalytics(createBreakoutRoomsEvent('create'));
+
+        dispatch({
+            type: _UPDATE_ROOM_COUNTER,
+            roomCounter
+        });
+
+        getCurrentConference(state)?.getBreakoutRooms()
+            ?.createBreakoutRoom(subject);
+    };
+}
+
+/**
+ * Action to close a room and send participants to the main room.
+ *
+ * @param {string} roomId - The id of the room to close.
+ * @returns {Function}
+ */
+export function closeBreakoutRoom(roomId: string) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const rooms = getBreakoutRooms(getState);
+        const room = rooms[roomId];
+        const mainRoom = getMainRoom(getState);
+
+        sendAnalytics(createBreakoutRoomsEvent('close'));
+
+        if (room && mainRoom) {
+            Object.values(room.participants).forEach(p => {
+                dispatch(sendParticipantToRoom(p.jid, mainRoom.id));
+            });
+        }
+    };
+}
+
+/**
+ * Action to rename a breakout room.
+ *
+ * @param {string} breakoutRoomJid - The jid of the breakout room to rename.
+ * @param {string} name - New name / subject for the breakout room.
+ * @returns {Function}
+ */
+export function renameBreakoutRoom(breakoutRoomJid: string, name = '') {
+    return (_dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const trimmedName = name.trim();
+
+        if (trimmedName.length !== 0) {
+            sendAnalytics(createBreakoutRoomsEvent('rename'));
+            getCurrentConference(getState)?.getBreakoutRooms()
+                ?.renameBreakoutRoom(breakoutRoomJid, trimmedName);
+        }
+    };
+}
+
+/**
+ * Action to remove a breakout room.
+ *
+ * @param {string} breakoutRoomJid - The jid of the breakout room to remove.
+ * @returns {Function}
+ */
+export function removeBreakoutRoom(breakoutRoomJid: string) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        sendAnalytics(createBreakoutRoomsEvent('remove'));
+        const room = getRoomByJid(getState, breakoutRoomJid);
+
+        if (!room) {
+            logger.error('The room to remove was not found.');
+
+            return;
+        }
+
+        if (Object.keys(room.participants).length > 0) {
+            dispatch(closeBreakoutRoom(room.id));
+        }
+        getCurrentConference(getState)?.getBreakoutRooms()
+            ?.removeBreakoutRoom(breakoutRoomJid);
+    };
+}
+
+/**
+ * Action to auto-assign the participants to breakout rooms.
+ *
+ * @returns {Function}
+ */
+export function autoAssignToBreakoutRooms() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const rooms = getBreakoutRooms(getState);
+        const breakoutRooms = filter(rooms, room => !room.isMainRoom);
+
+        if (breakoutRooms) {
+            sendAnalytics(createBreakoutRoomsEvent('auto.assign'));
+            const participantIds = Array.from(getRemoteParticipants(getState).keys());
+            const length = Math.ceil(participantIds.length / breakoutRooms.length);
+
+            chunk(shuffle(participantIds), length).forEach((group, index) =>
+                group.forEach(participantId => {
+                    dispatch(sendParticipantToRoom(participantId, breakoutRooms[index].id));
+                })
+            );
+        }
+    };
+}
+
+/**
+ * Action to send a participant to a room.
+ *
+ * @param {string} participantId - The participant id.
+ * @param {string} roomId - The room id.
+ * @returns {Function}
+ */
+export function sendParticipantToRoom(participantId: string, roomId: string) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const rooms = getBreakoutRooms(getState);
+        const room = rooms[roomId];
+
+        if (!room) {
+            logger.warn(`Invalid room: ${roomId}`);
+
+            return;
+        }
+
+        // Get the full JID of the participant. We could be getting the endpoint ID or
+        // a participant JID. We want to find the connection JID.
+        const participantJid = _findParticipantJid(getState, participantId);
+
+        if (!participantJid) {
+            logger.warn(`Could not find participant ${participantId}`);
+
+            return;
+        }
+
+        getCurrentConference(getState)?.getBreakoutRooms()
+            ?.sendParticipantToRoom(participantJid, room.jid);
+    };
+}
+
+/**
+ * Action to move to a room.
+ *
+ * @param {string} roomId - The room id to move to. If omitted move to the main room.
+ * @returns {Function}
+ */
+export function moveToRoom(roomId?: string) {
+    return async (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const mainRoomId = getMainRoom(getState)?.id;
+        let _roomId: string | undefined | String = roomId || mainRoomId;
+
+        // Check if we got a full JID.
+        if (_roomId && _roomId?.indexOf('@') !== -1) {
+            const [ id, ...domainParts ] = _roomId.split('@');
+
+            // On mobile we first store the room and the connection is created
+            // later, so let's attach the domain to the room String object as
+            // a little hack.
+
+            // eslint-disable-next-line no-new-wrappers
+            _roomId = new String(id);
+
+            // @ts-ignore
+            _roomId.domain = domainParts.join('@');
+        }
+
+        const roomIdStr = _roomId?.toString();
+        const goToMainRoom = roomIdStr === mainRoomId;
+        const rooms = getBreakoutRooms(getState);
+        const targetRoom = rooms[roomIdStr ?? ''];
+
+        if (!targetRoom) {
+            logger.warn(`Unknown room: ${targetRoom}`);
+
+            return;
+        }
+
+        dispatch({
+            type: _RESET_BREAKOUT_ROOMS
+        });
+
+        if (navigator.product === 'ReactNative') {
+            const conference = getCurrentConference(getState);
+            const { audio, video } = getState()['features/base/media'];
+
+            dispatch(conferenceWillLeave(conference));
+
+            try {
+                await conference?.leave(CONFERENCE_LEAVE_REASONS.SWITCH_ROOM);
+            } catch (error) {
+                logger.warn('JitsiConference.leave() rejected with:', error);
+
+                dispatch(conferenceLeft(conference));
+            }
+
+            dispatch(clearNotifications());
+            dispatch(createConference(_roomId));
+            dispatch(setAudioMuted(audio.muted));
+            dispatch(setVideoMuted(Boolean(video.muted)));
+            dispatch(createDesiredLocalTracks());
+        } else {
+            const localTracks = getLocalTracks(getState()['features/base/tracks']);
+            const isAudioMuted = isLocalTrackMuted(localTracks, MEDIA_TYPE.AUDIO);
+            const isVideoMuted = isLocalTrackMuted(localTracks, MEDIA_TYPE.VIDEO);
+
+            try {
+                // all places we fire notifyConferenceLeft we pass the room name from APP.conference
+                await APP.conference.leaveRoom(false /* doDisconnect */, CONFERENCE_LEAVE_REASONS.SWITCH_ROOM).then(
+                    () => APP.API.notifyConferenceLeft(APP.conference.roomName));
+            } catch (error) {
+                logger.warn('APP.conference.leaveRoom() rejected with:', error);
+
+                // TODO: revisit why we don't dispatch CONFERENCE_LEFT here.
+            }
+
+            APP.conference.joinRoom(_roomId, {
+                startWithAudioMuted: isAudioMuted,
+                startWithVideoMuted: isVideoMuted
+            });
+        }
+
+        if (goToMainRoom) {
+            dispatch(showNotification({
+                titleKey: 'breakoutRooms.notifications.joinedTitle',
+                descriptionKey: 'breakoutRooms.notifications.joinedMainRoom',
+                concatText: true,
+                maxLines: 2
+            }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
+        } else {
+            dispatch(showNotification({
+                titleKey: 'breakoutRooms.notifications.joinedTitle',
+                descriptionKey: 'breakoutRooms.notifications.joined',
+                descriptionArguments: { name: targetRoom.name },
+                concatText: true,
+                maxLines: 2
+            }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
+        }
+    };
+}
+
+/**
+ * Finds a participant's connection JID given its ID.
+ *
+ * @param {Function} getState - The redux store state getter.
+ * @param {string} participantId - ID of the given participant.
+ * @returns {string|undefined} - The participant connection JID if found.
+ */
+function _findParticipantJid(getState: IStore['getState'], participantId: string) {
+    const conference = getCurrentConference(getState);
+
+    if (!conference) {
+        return;
+    }
+
+    // Get the full JID of the participant. We could be getting the endpoint ID or
+    // a participant JID. We want to find the connection JID.
+    let _participantId = participantId;
+    let participantJid;
+
+    if (!participantId.includes('@')) {
+        const p = conference.getParticipantById(participantId);
+
+        _participantId = p?.getJid(); // This will be the room JID.
+    }
+
+    if (_participantId) {
+        const rooms = getBreakoutRooms(getState);
+
+        for (const room of Object.values(rooms)) {
+            const participants = room.participants || {};
+            const p = participants[_participantId]
+                || Object.values(participants).find(item => item.jid === _participantId);
+
+            if (p) {
+                participantJid = p.jid;
+                break;
+            }
+        }
+    }
+
+    return participantJid;
+}

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

@@ -0,0 +1,32 @@
+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 '../../actions';
+
+import styles from './styles';
+
+/**
+ * Button to add a breakout room.
+ *
+ * @returns {JSX.Element} - The add breakout room button.
+ */
+const AddBreakoutRoomButton = () => {
+    const dispatch = useDispatch();
+
+    const onAdd = useCallback(() =>
+        dispatch(createBreakoutRoom())
+    , [ dispatch ]);
+
+    return (
+        <Button
+            accessibilityLabel = 'breakoutRooms.actions.add'
+            labelKey = 'breakoutRooms.actions.add'
+            onClick = { onAdd }
+            style = { styles.button }
+            type = { BUTTON_TYPES.SECONDARY } />
+    );
+};
+
+export default AddBreakoutRoomButton;

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

@@ -0,0 +1,33 @@
+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 '../../actions';
+
+import styles from './styles';
+
+/**
+ * Button to auto assign participants to breakout rooms.
+ *
+ * @returns {JSX.Element} - The auto assign button.
+ */
+const AutoAssignButton = () => {
+    const dispatch = useDispatch();
+
+    const onAutoAssign = useCallback(() => {
+        dispatch(autoAssignToBreakoutRooms());
+    }, [ dispatch ]);
+
+    return (
+        <Button
+            accessibilityLabel = 'breakoutRooms.actions.autoAssign'
+            labelKey = 'breakoutRooms.actions.autoAssign'
+            labelStyle = { styles.autoAssignLabel }
+            onClick = { onAutoAssign }
+            style = { styles.autoAssignButton }
+            type = { BUTTON_TYPES.TERTIARY } />
+    );
+};
+
+export default AutoAssignButton;

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

@@ -0,0 +1,125 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+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 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.
+ */
+const ALL_ACTIONS = [ ACTIONS.JOIN, ACTIONS.REMOVE, ACTIONS.RENAME ];
+
+interface IProps {
+
+    /**
+     * The actions that will be displayed.
+     */
+    actions: Array<ACTIONS>;
+
+    /**
+     * The room for which the menu is open.
+     */
+    room: IRoom;
+}
+
+const BreakoutRoomContextMenu = ({ room, actions = ALL_ACTIONS }: IProps) => {
+    const dispatch = useDispatch();
+    const isLocalModerator = useSelector(isLocalParticipantModerator);
+    const { hideJoinRoomButton } = useSelector(getBreakoutRoomsConfig);
+    const _isBreakoutRoomRenameAllowed = useSelector(isBreakoutRoomRenameAllowed);
+    const { t } = useTranslation();
+
+    const onJoinRoom = useCallback(() => {
+        sendAnalytics(createBreakoutRoomsEvent('join'));
+        dispatch(moveToRoom(room.jid));
+        dispatch(hideSheet());
+    }, [ dispatch, room ]);
+
+    const onRemoveBreakoutRoom = useCallback(() => {
+        dispatch(removeBreakoutRoom(room.jid));
+        dispatch(hideSheet());
+    }, [ dispatch, room ]);
+
+    const onRenameBreakoutRoom = useCallback(() => {
+        dispatch(openDialog(BreakoutRoomNamePrompt, {
+            breakoutRoomJid: room.jid,
+            initialRoomName: room.name
+        }));
+        dispatch(hideSheet());
+    }, [ dispatch, room ]);
+
+    const onCloseBreakoutRoom = useCallback(() => {
+        dispatch(closeBreakoutRoom(room.id));
+        dispatch(hideSheet());
+    }, [ dispatch, room ]);
+
+    return (
+        <BottomSheet
+            addScrollViewPadding = { false }
+            showSlidingView = { true }>
+            {
+                !hideJoinRoomButton && actions.includes(ACTIONS.JOIN) && (
+                    <TouchableOpacity
+                        onPress = { onJoinRoom }
+                        style = { styles.contextMenuItem as ViewStyle }>
+                        <Icon
+                            size = { 24 }
+                            src = { IconRingGroup } />
+                        <Text style = { styles.contextMenuItemText }>{t('breakoutRooms.actions.join')}</Text>
+                    </TouchableOpacity>
+                )
+            }
+            {
+                !room?.isMainRoom && actions.includes(ACTIONS.RENAME) && _isBreakoutRoomRenameAllowed
+                && <TouchableOpacity
+                    onPress = { onRenameBreakoutRoom }
+                    style = { styles.contextMenuItem as ViewStyle }>
+                    <Icon
+                        size = { 24 }
+                        src = { IconEdit } />
+                    <Text style = { styles.contextMenuItemText }>{t('breakoutRooms.actions.rename')}</Text>
+                </TouchableOpacity>
+            }
+            {
+                !room?.isMainRoom && isLocalModerator && actions.includes(ACTIONS.REMOVE)
+                && (room?.participants && Object.keys(room.participants).length > 0
+                    ? <TouchableOpacity
+                        onPress = { onCloseBreakoutRoom }
+                        style = { styles.contextMenuItem as ViewStyle }>
+                        <Icon
+                            size = { 24 }
+                            src = { IconCloseLarge } />
+                        <Text style = { styles.contextMenuItemText }>{t('breakoutRooms.actions.close')}</Text>
+                    </TouchableOpacity>
+                    : <TouchableOpacity
+                        onPress = { onRemoveBreakoutRoom }
+                        style = { styles.contextMenuItem as ViewStyle }>
+                        <Icon
+                            size = { 24 }
+                            src = { IconCloseLarge } />
+                        <Text style = { styles.contextMenuItemText }>{t('breakoutRooms.actions.remove')}</Text>
+                    </TouchableOpacity>
+                )
+            }
+        </BottomSheet>
+    );
+};
+
+export default BreakoutRoomContextMenu;

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

@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+
+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.
+ *
+ * @param {IProps} props - The props of the component.
+ * @returns {JSX.Element}
+ */
+export default function BreakoutRoomNamePrompt({ breakoutRoomJid, initialRoomName }: IProps) {
+    const dispatch = useDispatch();
+    const onSubmit = useCallback((roomName: string) => {
+        const formattedRoomName = roomName?.trim();
+
+        if (formattedRoomName) {
+            dispatch(renameBreakoutRoom(breakoutRoomJid, formattedRoomName));
+
+            return true;
+        }
+
+        return false;
+    }, [ breakoutRoomJid, dispatch ]);
+
+    return (
+        <InputDialog
+            descriptionKey = 'dialog.renameBreakoutRoomTitle'
+            initialValue = { initialRoomName?.trim() }
+            onSubmit = { onSubmit } />
+    );
+}

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

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+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 {
+
+    /**
+     * Participant to be displayed.
+     */
+    item: any;
+
+    /**
+     * The room the participant is in.
+     */
+    room: IRoom;
+}
+
+const BreakoutRoomParticipantItem = ({ item, room }: IProps) => {
+    const { defaultRemoteDisplayName = '' } = useSelector((state: IReduxState) => state['features/base/config']);
+    const moderator = useSelector(isLocalParticipantModerator);
+    const dispatch = useDispatch();
+    const onPress = useCallback(() => {
+        if (moderator) {
+            dispatch(showRoomParticipantMenu(room, item.jid, item.displayName));
+        }
+    }, [ moderator, room, item ]);
+
+    return (
+        <ParticipantItem
+            displayName = { item.displayName || defaultRemoteDisplayName }
+            isModerator = { isParticipantModerator(item) }
+            key = { item.jid }
+            onPress = { onPress }
+            participantID = { item.jid } />
+    );
+};
+
+export default BreakoutRoomParticipantItem;

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

@@ -0,0 +1,67 @@
+import React, { useCallback, useMemo } 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);
+    const renderListHeaderComponent = useMemo(() => (
+        <>
+            { showAutoAssign && <AutoAssignButton /> }
+            { inBreakoutRoom && <LeaveBreakoutRoomButton /> }
+            {
+                isBreakoutRoomsSupported
+                && rooms.map(room => (<CollapsibleRoom
+                    key = { room.id }
+                    room = { room }
+                    roomId = { room.id } />))
+            }
+        </>
+    ), [ showAutoAssign, inBreakoutRoom, isBreakoutRoomsSupported, rooms ]);
+
+    return (
+        <JitsiScreen
+            footerComponent = { isLocalModerator && showAddBreakoutRoom
+                ? AddBreakoutRoomButton : undefined }
+            style = { styles.breakoutRoomsContainer }>
+
+            { /* Fixes warning regarding nested lists */ }
+            <FlatList
+                ListHeaderComponent = { renderListHeaderComponent }
+                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> {
+    override accessibilityLabel = 'toolbar.accessibilityLabel.breakoutRooms';
+    override icon = IconRingGroup;
+    override label = 'breakoutRooms.buttonLabel';
+
+    /**
+     * Handles clicking / pressing the button and opens the breakout rooms screen.
+     *
+     * @private
+     * @returns {void}
+     */
+    override _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/breakout-rooms/components/native/CollapsibleRoom.tsx

@@ -0,0 +1,66 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FlatList } from 'react-native';
+import { useDispatch } from 'react-redux';
+
+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';
+
+interface IProps {
+
+    /**
+     * Room to display.
+     */
+    room: IRoom;
+
+    roomId: string;
+}
+
+/**
+ * Returns a key for a passed item of the list.
+ *
+ * @param {Object} item - The participant.
+ * @returns {string} - The user ID.
+ */
+function _keyExtractor(item: any) {
+    return item.jid;
+}
+
+export const CollapsibleRoom = ({ room, roomId }: IProps) => {
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const _openContextMenu = useCallback(() => {
+        dispatch(openSheet(BreakoutRoomContextMenu, { room }));
+    }, [ room ]);
+    const roomParticipantsNr = Object.values(room.participants || {}).length;
+    const title
+        = `${room.name
+    || t('breakoutRooms.mainRoom')} (${roomParticipantsNr})`;
+
+    return (
+        <CollapsibleList
+            onLongPress = { _openContextMenu }
+            title = { title }>
+            <FlatList
+                data = { Object.values(room.participants || {}) }
+                keyExtractor = { _keyExtractor }
+
+                /* @ts-ignore */
+                listKey = { roomId as String }
+
+                // eslint-disable-next-line react/jsx-no-bind, no-confusing-arrow
+                renderItem = { ({ item: participant }) => (
+                    <BreakoutRoomParticipantItem
+                        item = { participant }
+                        room = { room } />
+                ) }
+                scrollEnabled = { false }
+                showsHorizontalScrollIndicator = { false }
+                windowSize = { 2 } />
+        </CollapsibleList>
+    );
+};

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

@@ -0,0 +1,36 @@
+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 '../../actions';
+
+import styles from './styles';
+
+/**
+ * Button to leave a breakout rooms.
+ *
+ * @returns {JSX.Element} - The leave breakout room button.
+ */
+const LeaveBreakoutRoomButton = () => {
+    const dispatch = useDispatch();
+
+    const onLeave = useCallback(() => {
+        sendAnalytics(createBreakoutRoomsEvent('leave'));
+        dispatch(moveToRoom());
+    }
+    , [ dispatch ]);
+
+    return (
+        <Button
+            accessibilityLabel = 'breakoutRooms.actions.leaveBreakoutRoom'
+            labelKey = 'breakoutRooms.actions.leaveBreakoutRoom'
+            onClick = { onLeave }
+            style = { styles.button }
+            type = { BUTTON_TYPES.DESTRUCTIVE } />
+    );
+};
+
+export default LeaveBreakoutRoomButton;

react/features/breakout-rooms/components/native/styles.ts

@@ -0,0 +1,76 @@
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+
+/**
+ * The styles of the native components of the feature {@code breakout rooms}.
+ */
+export default {
+
+    button: {
+        marginBottom: BaseTheme.spacing[4],
+        marginHorizontal: BaseTheme.spacing[2]
+    },
+
+    collapsibleList: {
+        alignItems: 'center',
+        borderRadius: BaseTheme.shape.borderRadius,
+        display: 'flex',
+        flexDirection: 'row',
+        height: BaseTheme.spacing[7],
+        marginHorizontal: BaseTheme.spacing[2],
+        marginTop: BaseTheme.spacing[3]
+    },
+
+    arrowIcon: {
+        backgroundColor: BaseTheme.palette.ui03,
+        height: BaseTheme.spacing[5],
+        width: BaseTheme.spacing[5],
+        borderRadius: 6,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+
+    roomName: {
+        fontSize: 15,
+        color: BaseTheme.palette.text01,
+        fontWeight: 'bold',
+        marginLeft: BaseTheme.spacing[2]
+    },
+
+    listTile: {
+        fontSize: 15,
+        color: BaseTheme.palette.text01,
+        fontWeight: 'bold',
+        marginLeft: BaseTheme.spacing[2]
+    },
+
+    autoAssignLabel: {
+        color: BaseTheme.palette.link01
+    },
+
+    autoAssignButton: {
+        alignSelf: 'center',
+        justifyContent: 'center',
+        marginTop: BaseTheme.spacing[3]
+    },
+
+    breakoutRoomsContainer: {
+        backgroundColor: BaseTheme.palette.ui01,
+        flex: 1,
+        flexDirection: 'column',
+        height: 'auto',
+        paddingHorizontal: BaseTheme.spacing[3]
+    },
+
+    inputContainer: {
+        marginLeft: BaseTheme.spacing[2],
+        marginRight: BaseTheme.spacing[2],
+        marginTop: BaseTheme.spacing[4]
+    },
+
+    centerInput: {
+        paddingRight: BaseTheme.spacing[3],
+        textAlign: 'center'
+    }
+};

react/features/breakout-rooms/constants.ts

@@ -0,0 +1,9 @@
+/**
+ * Key for this feature.
+ */
+export const FEATURE_KEY = 'features/breakout-rooms';
+
+/**
+ * Feature to rename breakout rooms.
+ */
+export const BREAKOUT_ROOMS_RENAME_FEATURE = 'rename';

react/features/breakout-rooms/functions.ts

@@ -0,0 +1,216 @@
+import { find } from 'lodash-es';
+
+import { IStateful } from '../base/app/types';
+import { getCurrentConference } from '../base/conference/functions';
+import {
+    getLocalParticipant,
+    getParticipantById,
+    getParticipantCount,
+    isLocalParticipantModerator
+} from '../base/participants/functions';
+import { IJitsiParticipant } from '../base/participants/types';
+import { toState } from '../base/redux/functions';
+
+import { FEATURE_KEY } from './constants';
+import { IRoom, IRoomInfo, IRoomInfoParticipant, IRooms, IRoomsInfo } from './types';
+
+/**
+ * Returns the rooms object for breakout rooms.
+ *
+ * @param {IStateful} stateful - The redux store, the redux
+ * {@code getState} function, or the redux state itself.
+ * @returns {Object} Object of rooms.
+ */
+export const getBreakoutRooms = (stateful: IStateful): IRooms => toState(stateful)[FEATURE_KEY].rooms;
+
+/**
+ * Returns the main room.
+ *
+ * @param {IStateful} stateful - The redux store, the redux
+ * {@code getState} function, or the redux state itself.
+ * @returns {IRoom|undefined} The main room object, or undefined.
+ */
+export const getMainRoom = (stateful: IStateful) => {
+    const rooms = getBreakoutRooms(stateful);
+
+    return find(rooms, room => Boolean(room.isMainRoom));
+};
+
+/**
+ * Returns the rooms info.
+ *
+ * @param {IStateful} stateful - The redux store, the redux.
+
+* @returns {IRoomsInfo} The rooms info.
+ */
+export const getRoomsInfo = (stateful: IStateful) => {
+    const breakoutRooms = getBreakoutRooms(stateful);
+    const conference = getCurrentConference(stateful);
+
+    const initialRoomsInfo = {
+        rooms: []
+    };
+
+    // only main roomn
+    if (!breakoutRooms || Object.keys(breakoutRooms).length === 0) {
+        // filter out hidden participants
+        const conferenceParticipants = conference?.getParticipants()
+            .filter((participant: IJitsiParticipant) => !participant.isHidden());
+
+        const localParticipant = getLocalParticipant(stateful);
+        let localParticipantInfo;
+
+        if (localParticipant) {
+            localParticipantInfo = {
+                role: localParticipant.role,
+                displayName: localParticipant.name,
+                avatarUrl: localParticipant.loadableAvatarUrl,
+                id: localParticipant.id
+            };
+        }
+
+        return {
+            ...initialRoomsInfo,
+            rooms: [ {
+                isMainRoom: true,
+                id: conference?.room?.roomjid,
+                jid: conference?.room?.myroomjid,
+                participants: conferenceParticipants?.length > 0
+                    ? [
+                        localParticipantInfo,
+                        ...conferenceParticipants.map((participantItem: IJitsiParticipant) => {
+                            const storeParticipant = getParticipantById(stateful, participantItem.getId());
+
+                            return {
+                                jid: participantItem.getJid(),
+                                role: participantItem.getRole(),
+                                displayName: participantItem.getDisplayName(),
+                                avatarUrl: storeParticipant?.loadableAvatarUrl,
+                                id: participantItem.getId()
+                            } as IRoomInfoParticipant;
+                        }) ]
+                    : [ localParticipantInfo ]
+            } as IRoomInfo ]
+        } as IRoomsInfo;
+    }
+
+    return {
+        ...initialRoomsInfo,
+        rooms: Object.keys(breakoutRooms).map(breakoutRoomKey => {
+            const breakoutRoomItem = breakoutRooms[breakoutRoomKey];
+
+            return {
+                isMainRoom: Boolean(breakoutRoomItem.isMainRoom),
+                id: breakoutRoomItem.id,
+                jid: breakoutRoomItem.jid,
+                participants: breakoutRoomItem.participants && Object.keys(breakoutRoomItem.participants).length
+                    ? Object.keys(breakoutRoomItem.participants).map(participantLongId => {
+                        const participantItem = breakoutRoomItem.participants[participantLongId];
+                        const ids = participantLongId.split('/');
+                        const storeParticipant = getParticipantById(stateful,
+                            ids.length > 1 ? ids[1] : participantItem.jid);
+
+                        return {
+                            jid: participantItem?.jid,
+                            role: participantItem?.role,
+                            displayName: participantItem?.displayName,
+                            avatarUrl: storeParticipant?.loadableAvatarUrl,
+                            id: storeParticipant ? storeParticipant.id
+                                : participantLongId
+                        } as IRoomInfoParticipant;
+                    }) : []
+            } as IRoomInfo;
+        })
+    } as IRoomsInfo;
+};
+
+/**
+ * Returns the room by Jid.
+ *
+ * @param {IStateful} stateful - The redux store, the redux
+ * {@code getState} function, or the redux state itself.
+ * @param {string} roomJid - The jid of the room.
+ * @returns {IRoom|undefined} The main room object, or undefined.
+ */
+export const getRoomByJid = (stateful: IStateful, roomJid: string) => {
+    const rooms = getBreakoutRooms(stateful);
+
+    return find(rooms, (room: IRoom) => room.jid === roomJid);
+};
+
+/**
+ * Returns the id of the current room.
+ *
+ * @param {IStateful} stateful - The redux store, the redux
+ * {@code getState} function, or the redux state itself.
+ * @returns {string} Room id or undefined.
+ */
+export const getCurrentRoomId = (stateful: IStateful) => {
+    const conference = getCurrentConference(stateful);
+
+    return conference?.getName();
+};
+
+/**
+ * Determines whether the local participant is in a breakout room.
+ *
+ * @param {IStateful} stateful - The redux store, the redux
+ * {@code getState} function, or the redux state itself.
+ * @returns {boolean}
+ */
+export const isInBreakoutRoom = (stateful: IStateful) => {
+    const conference = getCurrentConference(stateful);
+
+    return conference?.getBreakoutRooms()?.isBreakoutRoom();
+};
+
+/**
+ * Returns the breakout rooms config.
+ *
+ * @param {IStateful} stateful - The redux store, the redux
+ * {@code getState} function, or the redux state itself.
+ * @returns {Object}
+ */
+export const getBreakoutRoomsConfig = (stateful: IStateful) => {
+    const state = toState(stateful);
+    const { breakoutRooms = {} } = state['features/base/config'];
+
+    return breakoutRooms;
+};
+
+/**
+ * Returns whether the add breakout room button is visible.
+ *
+ * @param {IStateful} stateful - Global state.
+ * @returns {boolean}
+ */
+export const isAddBreakoutRoomButtonVisible = (stateful: IStateful) => {
+    const state = toState(stateful);
+    const isLocalModerator = isLocalParticipantModerator(state);
+    const { conference } = state['features/base/conference'];
+    const isBreakoutRoomsSupported = conference?.getBreakoutRooms()?.isSupported();
+    const { hideAddRoomButton } = getBreakoutRoomsConfig(state);
+
+    return isLocalModerator && isBreakoutRoomsSupported && !hideAddRoomButton;
+};
+
+/**
+ * Returns whether the auto assign participants to breakout rooms button is visible.
+ *
+ * @param {IStateful} stateful - Global state.
+ * @returns {boolean}
+ */
+export const isAutoAssignParticipantsVisible = (stateful: IStateful) => {
+    const state = toState(stateful);
+    const rooms = getBreakoutRooms(state);
+    const inBreakoutRoom = isInBreakoutRoom(state);
+    const isLocalModerator = isLocalParticipantModerator(state);
+    const participantsCount = getParticipantCount(state);
+    const { hideAutoAssignButton } = getBreakoutRoomsConfig(state);
+
+    return !inBreakoutRoom
+        && isLocalModerator
+        && participantsCount > 2
+        && Object.keys(rooms).length > 1
+        && !hideAutoAssignButton;
+};

react/features/breakout-rooms/logger.ts

@@ -0,0 +1,5 @@
+import { getLogger } from '../base/logging/functions';
+
+import { FEATURE_KEY } from './constants';
+
+export default getLogger(FEATURE_KEY);

react/features/breakout-rooms/middleware.ts

@@ -0,0 +1,107 @@
+import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
+import { getParticipantById } from '../base/participants/functions';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
+import { editMessage } from '../chat/actions.any';
+import { MESSAGE_TYPE_REMOTE } from '../chat/constants';
+
+import { UPDATE_BREAKOUT_ROOMS } from './actionTypes';
+import { moveToRoom } from './actions';
+import logger from './logger';
+import { IRooms } from './types';
+
+/**
+ * Registers a change handler for state['features/base/conference'].conference to
+ * set the event listeners needed for the breakout rooms feature to operate.
+ */
+StateListenerRegistry.register(
+    state => state['features/base/conference'].conference,
+    (conference, { dispatch }, previousConference) => {
+        if (conference && !previousConference) {
+            conference.on(JitsiConferenceEvents.BREAKOUT_ROOMS_MOVE_TO_ROOM, (roomId: string) => {
+                logger.debug(`Moving to room: ${roomId}`);
+                dispatch(moveToRoom(roomId));
+            });
+
+            conference.on(JitsiConferenceEvents.BREAKOUT_ROOMS_UPDATED, ({ rooms, roomCounter }: {
+                roomCounter: number; rooms: IRooms;
+            }) => {
+                logger.debug('Room list updated');
+                if (typeof APP !== 'undefined') {
+                    APP.API.notifyBreakoutRoomsUpdated(rooms);
+                }
+                dispatch({
+                    type: UPDATE_BREAKOUT_ROOMS,
+                    rooms,
+                    roomCounter
+                });
+            });
+        }
+    });
+
+MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
+    const { type } = action;
+
+    switch (type) {
+    case UPDATE_BREAKOUT_ROOMS: {
+        // edit name if it was overwritten
+        if (!action.updatedNames) {
+            const { overwrittenNameList } = getState()['features/base/participants'];
+
+            if (Object.keys(overwrittenNameList).length > 0) {
+                const newRooms: IRooms = {};
+
+                Object.entries(action.rooms as IRooms).forEach(([ key, r ]) => {
+                    let participants = r?.participants || {};
+                    let jid;
+
+                    for (const id of Object.keys(overwrittenNameList)) {
+                        jid = Object.keys(participants).find(p => p.slice(p.indexOf('/') + 1) === id);
+
+                        if (jid) {
+                            participants = {
+                                ...participants,
+                                [jid]: {
+                                    ...participants[jid],
+                                    displayName: overwrittenNameList[id as keyof typeof overwrittenNameList]
+                                }
+                            };
+                        }
+                    }
+
+                    newRooms[key] = {
+                        ...r,
+                        participants
+                    };
+                });
+
+                action.rooms = newRooms;
+            }
+        }
+
+        // edit the chat history to match names for participants in breakout rooms
+        const { messages } = getState()['features/chat'];
+
+        messages?.forEach(m => {
+            if (m.messageType === MESSAGE_TYPE_REMOTE && !getParticipantById(getState(), m.participantId)) {
+                const rooms: IRooms = action.rooms;
+
+                for (const room of Object.values(rooms)) {
+                    const participants = room.participants || {};
+                    const matchedJid = Object.keys(participants).find(jid => jid.endsWith(m.participantId));
+
+                    if (matchedJid) {
+                        m.displayName = participants[matchedJid].displayName;
+
+                        dispatch(editMessage(m));
+                    }
+                }
+            }
+        });
+
+        break;
+    }
+    }
+
+    return next(action);
+});

react/features/breakout-rooms/reducer.ts

@@ -0,0 +1,46 @@
+import ReducerRegistry from '../base/redux/ReducerRegistry';
+
+import {
+    UPDATE_BREAKOUT_ROOMS,
+    _RESET_BREAKOUT_ROOMS,
+    _UPDATE_ROOM_COUNTER
+} from './actionTypes';
+import { FEATURE_KEY } from './constants';
+import { IRooms } from './types';
+
+const DEFAULT_STATE = {
+    rooms: {},
+    roomCounter: 0
+};
+
+export interface IBreakoutRoomsState {
+    roomCounter: number;
+    rooms: IRooms;
+}
+
+/**
+ * Listen for actions for the breakout-rooms feature.
+ */
+ReducerRegistry.register<IBreakoutRoomsState>(FEATURE_KEY, (state = DEFAULT_STATE, action): IBreakoutRoomsState => {
+    switch (action.type) {
+    case _UPDATE_ROOM_COUNTER:
+        return {
+            ...state,
+            roomCounter: action.roomCounter
+        };
+    case UPDATE_BREAKOUT_ROOMS: {
+        const { roomCounter, rooms } = action;
+
+        return {
+            ...state,
+            roomCounter,
+            rooms
+        };
+    }
+    case _RESET_BREAKOUT_ROOMS: {
+        return DEFAULT_STATE;
+    }
+    }
+
+    return state;
+});

react/features/breakout-rooms/types.ts

@@ -0,0 +1,36 @@
+export interface IRoom {
+    id: string;
+    isMainRoom?: boolean;
+    jid: string;
+    name: string;
+    participants: {
+        [jid: string]: {
+            displayName: string;
+            jid: string;
+            role: string;
+        };
+    };
+}
+
+export interface IRooms {
+    [jid: string]: IRoom;
+}
+
+export interface IRoomInfo {
+    id: string;
+    isMainRoom: boolean;
+    jid: string;
+    participants: IRoomInfoParticipant[];
+}
+
+export interface IRoomsInfo {
+    rooms: IRoomInfo[];
+}
+
+export interface IRoomInfoParticipant {
+    avatarUrl: string;
+    displayName: string;
+    id: string;
+    jid: string;
+    role: string;
+}