MediaSFU Angular
    Preparing search index...

    Class BreakoutRoomsModal

    BreakoutRoomsModal - Modal for creating and managing breakout rooms

    Allows hosts to create, configure, and manage breakout rooms for splitting participants into smaller groups. Supports random assignment, manual assignment, and room editing.

    Supports three levels of customization:

    1. Basic Usage: Use default modal UI with room list, assignment controls, and edit room modal
    2. Style Customization: Override modal appearance with overlayStyle and contentStyle
    3. Full Override: Provide a custom template via customTemplate for complete control

    Key Features:

    • Create multiple breakout rooms
    • Random participant assignment
    • Manual participant assignment with drag-and-drop
    • Edit room participants
    • Delete rooms
    • Start/stop breakout sessions
    • Room validation and error handling

    app-breakout-rooms-modal

    true

    CommonModule, FormsModule, FontAwesomeModule, RoomListComponent, EditRoomModalComponent

    isVisible - Whether the modal is currently visible. Default: false

    parameters - Object containing participants, breakout rooms, and update functions. Default: {}

    position - Modal position on screen ('topRight', 'topLeft', 'bottomRight', 'bottomLeft'). Default: 'topRight'

    backgroundColor - Background color of the modal content. Default: '#83c0e9'

    onBreakoutRoomsClose - Callback function to close the modal. Default: () => {}

    overlayStyle - Custom CSS styles for the modal overlay backdrop. Default: undefined

    contentStyle - Custom CSS styles for the modal content container. Default: undefined

    customTemplate - Custom TemplateRef to completely replace default modal template. Default: undefined

    ngOnInit - Initializes modal width and breakout rooms

    ngOnChanges - Updates breakout rooms when inputs change

    calculateModalWidth - Dynamically sets modal width based on screen size

    initializeBreakoutRooms - Sets up initial breakout rooms from parameters

    handleRandomAssign - Randomly distributes participants to rooms

    handleManualAssign - Initializes empty rooms for manual assignment

    handleAddRoom - Adds new breakout room

    handleSaveRooms - Validates and saves room configurations

    validateRooms - Validates room setup and participant assignments

    checkCanStartBreakout - Checks if breakout session can start

    handleStartBreakout - Starts breakout session

    handleStopBreakout - Stops breakout session

    handleEditRoom - Opens edit modal for specific room

    handleDeleteRoom - Removes room and reassigns participants

    handleAddParticipant - Adds participant to room

    handleRemoveParticipant - Removes participant from room

    getCombinedOverlayStyle - Merges default and custom overlay styles

    getCombinedContentStyle - Merges default and custom content styles

    modalContainerStyle - Returns computed overlay styles

    modalContentStyle - Returns computed content styles

    Implements

    • OnChanges
    • OnInit
    Index

    Constructors

    constructor

    Methods

    calculateModalWidth modalContainerStyle modalContentStyle ngOnChanges ngOnInit initializeBreakoutRooms handleRandomAssign handleManualAssign handleAddRoom handleSaveRooms validateRooms checkCanStartBreakout handleStartBreakout handleStopBreakout handleEditRoom handleDeleteRoom handleAddParticipant handleRemoveParticipant getCombinedOverlayStyle getCombinedContentStyle

    Properties

    isVisible parameters position backgroundColor onBreakoutRoomsClose overlayStyle? contentStyle? customTemplate? roomsContainerRef faDoorOpen faTimes faRandom faHandPointer faPlus faSave faPlay faSyncAlt faStop faUsers participantsRef breakoutRoomsRef numRooms newParticipantAction currentRoom editRoomModalVisible startBreakoutButtonVisible stopBreakoutButtonVisible modalWidth

    Constructors

    Methods

    • Returns {
          display: string;
          position: string;
          top: string;
          left: string;
          width: string;
          height: string;
          backgroundColor: string;
          zIndex: string;
      }

    • Returns {
          backgroundColor: string;
          borderRadius: string;
          padding: string;
          width: string;
          maxHeight: string;
          overflowX: string;
          overflowY: string;
          position: string;
          top: string;
          bottom: string;
          left: string;
          right: string;
      }

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • changes: SimpleChanges

        The changed properties.

      Returns void

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      Returns void

    Properties

    isVisible: boolean = false
    parameters: BreakoutRoomsModalParameters
    position: string = 'topRight'
    backgroundColor: string = '#83c0e9'
    onBreakoutRoomsClose: () => void = ...
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: any
    roomsContainerRef: ElementRef
    faDoorOpen: IconDefinition = faDoorOpen
    faTimes: IconDefinition = faTimes
    faRandom: IconDefinition = faRandom
    faHandPointer: IconDefinition = faHandPointer
    faPlus: IconDefinition = faPlus
    faSave: IconDefinition = faSave
    faPlay: IconDefinition = faPlay
    faSyncAlt: IconDefinition = faSyncAlt
    faStop: IconDefinition = faStop
    faUsers: IconDefinition = faUsers
    participantsRef: Participant[] = []
    breakoutRoomsRef: BreakoutParticipant[][] = []
    numRooms: string = ''
    newParticipantAction: string = 'autoAssignNewRoom'
    currentRoom: BreakoutParticipant[] | null = null
    editRoomModalVisible: boolean = false
    startBreakoutButtonVisible: boolean = false
    stopBreakoutButtonVisible: boolean = false
    modalWidth: number = 400

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties