MediaSFU Angular
    Preparing search index...

    Class ParticipantsModal

    ParticipantsModal - Customizable participants list modal with interaction controls

    app-participants-modal

    true

    ./participants-modal.component.html

    ['./participants-modal.component.css']

    [CommonModule, FontAwesomeModule, ParticipantList, ParticipantListOthers]

    A modal for displaying and managing meeting participants with customizable UI. Supports three levels of customization:

    1. Style Overrides: Customize modal appearance with overlayStyle and contentStyle
    2. Component Replacement: Replace participant list rendering components
    3. Complete Replacement: Use customTemplate for full UI control

    Features:

    • Filter participants by name
    • Mute/unmute participants
    • Send direct messages
    • Remove participants (host/co-host only)
    • Separate lists for active and waiting participants

    Basic Usage

    <app-participants-modal
      [isParticipantsModalVisible]="true"
      [onParticipantsClose]="closeModalFunction"
      [onParticipantsFilterChange]="filterFunction"
      [participantsCounter]="5"
      [parameters]="participantsModalParameters"
      [position]="'topRight'"
      [backgroundColor]="'#83c0e9'">
    </app-participants-modal>

    With Style Customization

    <app-participants-modal
      [isParticipantsModalVisible]="true"
      [overlayStyle]="{ backgroundColor: 'rgba(0, 0, 0, 0.9)' }"
      [contentStyle]="{ borderRadius: '16px', maxHeight: '80vh' }"
      [onParticipantsClose]="closeModalFunction"
      [parameters]="participantsModalParameters">
    </app-participants-modal>

    Custom Template Override

    <app-participants-modal
      [isParticipantsModalVisible]="true"
      [customTemplate]="customParticipantsTemplate"
      [parameters]="participantsModalParameters"
      [onParticipantsClose]="closeModalFunction">
    </app-participants-modal>

    <ng-template #customParticipantsTemplate let-context>
      <div class="my-participants-modal">
        <h2>{{ context.participantsCounter }} Participants</h2>
        <div *ngFor="let participant of context.parameters.participants">
          {{ participant.name }}
        </div>
        <button (click)="context.onParticipantsClose()">Close</button>
      </div>
    </ng-template>

    isParticipantsModalVisible - Controls modal visibility

    onParticipantsClose - Callback when modal is closed

    onParticipantsFilterChange - Callback when filter changes

    participantsCounter - Total number of participants

    parameters - Modal parameters including participants list

    position - Modal position (default: 'topRight')

    backgroundColor - Modal background color (default: '#83c0e9')

    overlayStyle - Custom overlay styles

    contentStyle - Custom content styles

    customTemplate - Complete template override

    Implements

    • OnInit
    • OnChanges
    Index

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges updateParticipantsData handleFilterChange handleClose canShowParticipantList getCombinedOverlayStyle getCombinedContentStyle

    Properties

    isParticipantsModalVisible onParticipantsClose onParticipantsFilterChange participantsCounter onMuteParticipants onMessageParticipants onRemoveParticipants parameters position backgroundColor overlayStyle? contentStyle? customTemplate? participant_s participantsCounter_s reRender faTimes

    Constructors

    Methods

    • 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

    isParticipantsModalVisible: boolean = false
    onParticipantsClose: () => void
    onParticipantsFilterChange: (filter: string) => void
    participantsCounter: number = 0
    onMuteParticipants: (options: MuteParticipantsOptions) => Promise<void>
    onMessageParticipants: (options: MessageParticipantsOptions) => void
    onRemoveParticipants: (options: RemoveParticipantsOptions) => Promise<void>
    parameters: ParticipantsModalParameters = ...
    position: string = 'topRight'
    backgroundColor: string = '#83c0e9'
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: TemplateRef<any>
    participant_s: Participant[] = []
    participantsCounter_s: number = 0
    reRender: boolean = false
    faTimes: IconDefinition = faTimes

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties