MediaSFU Angular
    Preparing search index...

    Class WaitingRoomModal

    WaitingRoomModal - Modal for managing participants waiting to join the session

    Displays participants in the waiting room and allows host to admit or reject them. Provides filtering and batch admission capabilities.

    Supports three levels of customization:

    1. Basic Usage: Use default modal UI with waiting participant list and admit/reject actions
    2. Style Customization: Override modal appearance with overlayStyle and contentStyle
    3. Full Override: Provide a custom template via customTemplate for complete control

    Key Features:

    • Waiting participant list with names
    • Admit/reject individual participants
    • Participant filtering by name
    • Real-time counter badge
    • Socket-based admission handling

    Basic Usage:

    <app-waiting-room-modal
      [isWaitingModalVisible]="showWaitingRoom"
      [waitingRoomCounter]="waitingCount"
      [waitingRoomList]="waitingParticipants"
      [roomName]="currentRoom"
      [socket]="socketInstance"
      [parameters]="waitingRoomParams"
      [onWaitingRoomClose]="closeWaitingRoom"
      [onWaitingRoomFilterChange]="filterWaiting"
      [updateWaitingList]="updateWaiting">
    </app-waiting-room-modal>

    Style Customization:

    <app-waiting-room-modal
      [isWaitingModalVisible]="showWaitingRoom"
      [waitingRoomCounter]="waitingCount"
      [waitingRoomList]="waitingParticipants"
      [roomName]="currentRoom"
      [socket]="socketInstance"
      [overlayStyle]="{
        backgroundColor: 'rgba(0, 0, 0, 0.9)'
      }"
      [contentStyle]="{
        backgroundColor: '#1e1e1e',
        borderRadius: '10px',
        border: '1px solid #4a90e2'
      }"
      [backgroundColor]="'#2c3e50'"
      [position]="'center'"
      [onWaitingRoomClose]="closeWaitingRoom"
      [updateWaitingList]="updateWaiting">
    </app-waiting-room-modal>

    Custom Template Override:

    <app-waiting-room-modal
      [isWaitingModalVisible]="showWaitingRoom"
      [customTemplate]="customWaitingTemplate"
      [onWaitingRoomClose]="closeWaitingRoom">
    </app-waiting-room-modal>

    <ng-template #customWaitingTemplate let-waitingList="waitingRoomList" let-onAdmit="onAdmit" let-onReject="onReject">
      <div class="custom-waiting-room">
        <h3>Waiting to Join ({{ waitingList.length }})</h3>
        <div *ngFor="let participant of waitingList" class="waiting-participant">
          <img [src]="participant.avatar" alt="avatar">
          <span>{{ participant.name }}</span>
          <button (click)="onAdmit(participant)" class="admit">Admit</button>
          <button (click)="onReject(participant)" class="reject">Reject</button>
        </div>
      </div>
    </ng-template>

    app-waiting-room-modal

    true

    CommonModule, FontAwesomeModule, FormsModule

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

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

    waitingRoomCounter - Number of participants in waiting room (for badge). Default: 0

    onWaitingRoomFilterChange - Callback when filter input changes. Default: () => {}

    waitingRoomList - Array of waiting participant objects. Default: []

    updateWaitingList - Function to update the waiting list state. Default: () => {}

    roomName - Name of the room/session. Default: ''

    socket - Socket.io client instance for real-time communication. Default: undefined

    position - Modal position on screen ('topRight', 'center', etc.). Default: 'topRight'

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

    parameters - Additional parameters including filtered waiting list. Default: {}

    onWaitingRoomItemPress - Callback when admit/reject action is pressed. Default: respondToWaitingService.respondToWaiting

    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 component and default styles

    ngOnChanges - Updates waiting list when inputs change

    updateParameters - Refreshes filtered waiting list from parameters

    handleModalClose - Closes modal via onWaitingRoomClose callback

    handleFilterChange - Filters waiting list based on search input

    handleItemPress - Handles admit/reject actions for waiting participants

    getCombinedOverlayStyle - Merges default and custom overlay styles

    getCombinedContentStyle - Merges default and custom content styles

    modalContainerStyle - Returns computed overlay styles

    modalContentStyle - Returns computed content styles

    inputStyle - Returns filter input field styles

    Implements

    • OnChanges
    • OnInit
    Index

    Accessors

    modalContainerStyle modalContentStyle inputStyle

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges updateParameters handleModalClose handleFilterChange handleItemPress getCombinedOverlayStyle getCombinedContentStyle

    Properties

    isWaitingModalVisible waitingRoomCounter waitingRoomList roomName socket position backgroundColor parameters onWaitingRoomClose onWaitingRoomFilterChange updateWaitingList overlayStyle? contentStyle? customTemplate? onWaitingRoomItemPress faTimes faCheck waitingRoomList_s waitingRoomCounter_s reRender

    Accessors

    • get modalContainerStyle(): {
          position: string;
          top: string;
          left: string;
          width: string;
          height: string;
          backgroundColor: string;
          display: string;
          zIndex: string;
      }

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

    • get modalContentStyle(): {
          position: string;
          backgroundColor: string;
          borderRadius: string;
          padding: string;
          width: string;
          maxHeight: string;
          overflowY: string;
          top: string;
          bottom: string;
          left: string;
          right: string;
      }

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

    • get inputStyle(): {
          width: string;
          padding: string;
          borderRadius: string;
          border: string;
          fontSize: string;
          marginBottom: string;
      }

      Returns {
          width: string;
          padding: string;
          borderRadius: string;
          border: string;
          fontSize: string;
          marginBottom: string;
      }

    Constructors

    Methods

    • 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

    • 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

    Properties

    isWaitingModalVisible: boolean = false
    waitingRoomCounter: number = 0
    waitingRoomList: WaitingRoomParticipant[] = []
    roomName: string = ''
    socket: Socket = ...
    position: string = 'topRight'
    backgroundColor: string = '#83c0e9'
    parameters: WaitingRoomModalParameters = ...
    onWaitingRoomClose: () => void = ...
    onWaitingRoomFilterChange: (value: string) => void = ...
    updateWaitingList: (data: WaitingRoomParticipant[]) => void = ...
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: any
    onWaitingRoomItemPress: (data: RespondToWaitingOptions) => void
    faTimes: IconDefinition = faTimes
    faCheck: IconDefinition = faCheck
    waitingRoomList_s: WaitingRoomParticipant[] = []
    waitingRoomCounter_s: number = 0
    reRender: boolean = false

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods
    Properties