MediaSFU Angular
    Preparing search index...

    Class ConfirmExitModal

    ConfirmExitModal - Confirmation dialog for leaving or being removed from a session

    Displays a confirmation modal when a user attempts to leave a room or session. Supports optional ban action for host/admin users.

    Supports three levels of customization:

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

    Key Features:

    • Exit confirmation with cancel option
    • Optional ban functionality for hosts
    • Socket-based room exit handling
    • Configurable positioning
    • Custom styling support

    Basic Usage:

    <app-confirm-exit-modal
      [isConfirmExitModalVisible]="showExitModal"
      [member]="currentMember"
      [roomName]="roomName"
      [socket]="socketInstance"
      [islevel]="userLevel"
      [exitEventOnConfirm]="handleConfirmExit"
      [onConfirmExitClose]="closeExitModal">
    </app-confirm-exit-modal>

    Style Customization:

    <app-confirm-exit-modal
      [isConfirmExitModalVisible]="showExitModal"
      [member]="currentMember"
      [roomName]="roomName"
      [socket]="socketInstance"
      [overlayStyle]="{
        backgroundColor: 'rgba(0, 0, 0, 0.8)'
      }"
      [contentStyle]="{
        backgroundColor: '#2c3e50',
        borderRadius: '12px',
        border: '2px solid #e74c3c'
      }"
      [position]="'center'"
      [exitEventOnConfirm]="handleConfirmExit"
      [onConfirmExitClose]="closeExitModal">
    </app-confirm-exit-modal>

    Custom Template Override:

    <app-confirm-exit-modal
      [isConfirmExitModalVisible]="showExitModal"
      [customTemplate]="customExitTemplate"
      [onConfirmExitClose]="closeExitModal">
    </app-confirm-exit-modal>

    <ng-template #customExitTemplate let-member="member" let-ban="ban" let-handleConfirmExit="handleConfirmExit">
      <div class="custom-exit-dialog">
        <h3>Confirm {{ ban ? 'Ban & Exit' : 'Exit' }}</h3>
        <p>Are you sure you want to {{ ban ? 'ban and remove' : 'remove' }} {{ member }}?</p>
        <div class="actions">
          <button (click)="handleConfirmExit()">Confirm</button>
          <button (click)="closeExitModal()">Cancel</button>
        </div>
      </div>
    </ng-template>

    app-confirm-exit-modal

    true

    CommonModule, FormsModule, FontAwesomeModule

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

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

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

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

    exitEventOnConfirm - Callback invoked when exit is confirmed. Default: undefined

    member - Name/ID of the member being removed or leaving. Default: ''

    ban - Whether to ban the member (in addition to removing). Default: false

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

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

    islevel - User level/role (e.g., '0' for host, '2' for participant). Default: '2'

    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 default modal content styles

    ngOnChanges - Updates visibility state and modal styles when inputs change

    handleConfirmExit - Executes exit confirmation logic and closes modal

    getCombinedOverlayStyle - Merges default and custom overlay styles

    getCombinedContentStyle - Merges default and custom content styles

    Implements

    • OnInit
    • OnChanges
    Index

    Constructors

    constructor

    Methods

    getCombinedContentStyle ngOnInit ngOnChanges handleConfirmExit

    Properties

    isConfirmExitModalVisible onConfirmExitClose position backgroundColor exitEventOnConfirm member ban roomName socket islevel overlayStyle? contentStyle? customTemplate? faTimes modalContentStyle

    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

    isConfirmExitModalVisible: boolean = false
    onConfirmExitClose: () => void
    position: string = 'topRight'
    backgroundColor: string = '#83c0e9'
    exitEventOnConfirm: (options: ConfirmExitOptions) => void
    member: string = ''
    ban: boolean = false
    roomName: string = ''
    socket: Socket = ...
    islevel: string = ''
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: TemplateRef<any>
    faTimes: IconDefinition = faTimes
    modalContentStyle: any

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties