MediaSFU Angular
    Preparing search index...

    Class RequestsModal

    RequestsModal - Modal for managing participant requests (screen share, unmute, etc.)

    Displays and manages incoming requests from participants (e.g., screen share requests, unmute requests). Allows host to approve or deny requests with filtering capabilities.

    Supports three levels of customization:

    1. Basic Usage: Use default modal UI with request list and action handlers
    2. Style Customization: Override modal appearance with overlayStyle and contentStyle
    3. Full Override: Provide a custom template via customTemplate for complete control

    Key Features:

    • Request list display with participant names
    • Approve/deny actions for each request
    • Request filtering by name
    • Real-time request counter badge
    • Socket-based request handling

    Basic Usage:

    <app-requests-modal
      [isRequestsModalVisible]="showRequestsModal"
      [requestCounter]="requestCount"
      [requestList]="pendingRequests"
      [roomName]="currentRoom"
      [socket]="socketInstance"
      [parameters]="requestParams"
      [onRequestClose]="closeRequestsModal"
      [onRequestFilterChange]="filterRequests"
      [updateRequestList]="updateRequests">
    </app-requests-modal>

    Style Customization:

    <app-requests-modal
      [isRequestsModalVisible]="showRequestsModal"
      [requestCounter]="requestCount"
      [requestList]="pendingRequests"
      [roomName]="currentRoom"
      [socket]="socketInstance"
      [overlayStyle]="{
        backgroundColor: 'rgba(0, 0, 0, 0.85)'
      }"
      [contentStyle]="{
        backgroundColor: '#2c3e50',
        borderRadius: '12px',
        maxHeight: '600px'
      }"
      [backgroundColor]="'#34495e'"
      [position]="'topRight'"
      [onRequestClose]="closeRequestsModal"
      [updateRequestList]="updateRequests">
    </app-requests-modal>

    Custom Template Override:

    <app-requests-modal
      [isRequestsModalVisible]="showRequestsModal"
      [customTemplate]="customRequestsTemplate"
      [onRequestClose]="closeRequestsModal">
    </app-requests-modal>

    <ng-template #customRequestsTemplate let-requestList="requestList" let-onApprove="onApprove" let-onDeny="onDeny">
      <div class="custom-requests">
        <h3>Pending Requests ({{ requestList.length }})</h3>
        <div *ngFor="let request of requestList" class="request-item">
          <span>{{ request.name }} wants to {{ request.type }}</span>
          <button (click)="onApprove(request)">✓</button>
          <button (click)="onDeny(request)">✗</button>
        </div>
      </div>
    </ng-template>

    app-requests-modal

    true

    CommonModule, FontAwesomeModule, RenderRequestComponent

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

    requestCounter - Number of pending requests (for badge display). Default: 0

    requestList - Array of request objects to display. Default: []

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

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

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

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

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

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

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

    onRequestItemPress - Callback when approve/deny action is pressed. Default: respondToRequestsService.respondToRequests

    updateRequestList - Function to update the request list state. 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 component and default styles

    ngOnChanges - Updates request list when inputs change

    updateRequests - Refreshes filtered request list from parameters

    handleModalClose - Closes modal via onRequestClose callback

    handleFilterChange - Filters request list based on search input

    getCombinedOverlayStyle - Merges default and custom overlay styles

    getCombinedContentStyle - Merges default and custom content styles

    Implements

    • OnInit
    • OnChanges
    Index

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges updateRequests handleModalClose handleFilterChange getCombinedOverlayStyle getCombinedContentStyle

    Properties

    isRequestsModalVisible requestCounter requestList roomName socket backgroundColor position parameters onRequestClose onRequestFilterChange onRequestItemPress updateRequestList overlayStyle? contentStyle? customTemplate? faTimes requestList_s requestCounter_s reRender

    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

    isRequestsModalVisible: boolean = false
    requestCounter: number = 0
    requestList: Request[] = []
    roomName: string
    socket: Socket = ...
    backgroundColor: string = '#83c0e9'
    position: string = 'topRight'
    parameters: any
    onRequestClose: () => void
    onRequestFilterChange: (filter: string) => void
    onRequestItemPress: (params: any) => void
    updateRequestList: (newRequestList: any[]) => void
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: any
    faTimes: IconDefinition = faTimes
    requestList_s: any[] = []
    requestCounter_s: number = 0
    reRender: boolean = false

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties