Function BreakoutRoomsModal

BreakoutRoomsModal - Comprehensive breakout room management interface

A feature-rich modal for creating, configuring, and managing breakout rooms during meetings. Supports random/manual participant assignment, real-time room editing, start/stop controls, and participant movement. Perfect for facilitating small-group discussions, workshops, and collaborative activities within larger meetings.

Features:

• Create multiple breakout rooms
• Random participant assignment across rooms
• Manual participant assignment with drag-and-drop
• Add/remove rooms dynamically
• Edit room participants on-the-fly
• Start/stop breakout sessions
• Update active breakout configurations
• Participant visibility in each room
• Real-time socket synchronization
• Extensive HTML attributes customization for all UI elements
• Custom render hooks for complete UI flexibility

import React, { useState } from 'react';
import { BreakoutRoomsModal } from 'mediasfu-reactjs';

function BreakoutControl({ parameters }) {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <>
      <button onClick={() => setIsVisible(true)}>
        Breakout Rooms ({parameters.breakoutRooms.length})
      </button>
      <BreakoutRoomsModal
        isVisible={isVisible}
        onBreakoutRoomsClose={() => setIsVisible(false)}
        parameters={parameters}
        position="topRight"
        backgroundColor="#0f172a"
      />
    </>
  );
}
Copy

import { BreakoutRoomsModal } from 'mediasfu-reactjs';

function BrandedBreakout({ isVisible, onClose, parameters }) {
  const totalParticipantsInRooms = parameters.breakoutRooms.reduce(
    (sum, room) => sum + room.length,
    0
  );

  return (
    <BreakoutRoomsModal
      isVisible={isVisible}
      onBreakoutRoomsClose={onClose}
      parameters={parameters}
      backgroundColor="#1e3a8a"
      position="topLeft"
      contentProps={{
        style: {
          maxHeight: '90vh',
          borderRadius: 20,
          border: '2px solid #3b82f6',
        },
      }}
      startButtonProps={{
        style: {
          background: 'linear-gradient(135deg, #22c55e 0%, #14532d 100%)',
          color: 'white',
          padding: '12px 28px',
          borderRadius: 12,
          fontWeight: 600,
        },
      }}
      title={
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span>Breakout Rooms</span>
          <span style={{ fontSize: 14, fontWeight: 400 }}>
            ({totalParticipantsInRooms}/{parameters.participants.length} assigned)
          </span>
        </div>
      }
    />
  );
}
Copy

import { BreakoutRoomsModal } from 'mediasfu-reactjs';

function AnalyticsBreakout({ isVisible, onClose, parameters }) {
  return (
    <BreakoutRoomsModal
      isVisible={isVisible}
      onBreakoutRoomsClose={onClose}
      parameters={{
        ...parameters,
        updateBreakOutRoomStarted: (started) => {
          analytics.track('breakout_session_started', {
            roomCount: parameters.breakoutRooms.length,
            participantCount: parameters.participants.length,
          });
          parameters.updateBreakOutRoomStarted(started);
        },
        updateBreakOutRoomEnded: (ended) => {
          analytics.track('breakout_session_ended', {
            duration: Date.now() - sessionStartTime,
          });
          parameters.updateBreakOutRoomEnded(ended);
        },
      }}
      renderRoomList={({ defaultRoomList, rooms }) => {
        return (
          <div>
            <div style={{
              padding: 12,
              background: '#f8fafc',
              borderRadius: 8,
              marginBottom: 16,
            }}>
              <div style={{ fontWeight: 600 }}>
                {rooms.length} rooms configured
              </div>
              <div style={{ fontSize: 14, marginTop: 4 }}>
                Avg: {Math.round(
                  rooms.reduce((sum, r) => sum + r.length, 0) / rooms.length
                )} participants per room
              </div>
            </div>
            {defaultRoomList}
          </div>
        );
      }}
    />
  );
}
Copy

import { MediasfuGeneric, BreakoutRoomsModal } from 'mediasfu-reactjs';

const uiOverrides = {
  breakoutRoomsModal: {
    component: (props) => (
      <BreakoutRoomsModal
        {...props}
        backgroundColor="#0f172a"
        position="topRight"
        startButtonProps={{
          style: {
            background: '#22c55e',
            borderRadius: 12,
            padding: '12px 28px',
            fontWeight: 600,
          },
        }}
        stopButtonProps={{
          style: {
            background: '#ef4444',
            borderRadius: 12,
            padding: '12px 28px',
            fontWeight: 600,
          },
        }}
      />
    ),
  },
};

<MediasfuGeneric uiOverrides={uiOverrides} />;
Copy