MediaSFU Angular
    Preparing search index...

    Class ConfirmHereModal

    ConfirmHereModal - Presence confirmation modal with countdown timer

    Displays an "Are you still here?" modal with countdown timer to confirm user presence. Automatically disconnects user if they don't respond within the countdown duration.

    Supports three levels of customization:

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

    Key Features:

    • Countdown timer with visual feedback
    • Automatic disconnect on timeout
    • Socket-based presence confirmation
    • "Yes, I'm here" confirmation button
    • Configurable duration and styling

    Basic Usage:

    <app-confirm-here-modal
      [isConfirmHereModalVisible]="showPresenceCheck"
      [socket]="socketInstance"
      [roomName]="currentRoom"
      [member]="currentMember"
      [countdownDuration]="120"
      [onConfirmHereClose]="handlePresenceConfirmed">
    </app-confirm-here-modal>

    Style Customization:

    <app-confirm-here-modal
      [isConfirmHereModalVisible]="showPresenceCheck"
      [socket]="socketInstance"
      [roomName]="currentRoom"
      [member]="currentMember"
      [countdownDuration]="90"
      [overlayStyle]="{
        backgroundColor: 'rgba(0, 0, 0, 0.9)'
      }"
      [contentStyle]="{
        backgroundColor: '#1e1e1e',
        border: '3px solid #ff6b6b',
        borderRadius: '15px',
        padding: '30px'
      }"
      [displayColor]="'#ff6b6b'"
      [onConfirmHereClose]="handlePresenceConfirmed">
    </app-confirm-here-modal>

    Custom Template Override:

    <app-confirm-here-modal
      [isConfirmHereModalVisible]="showPresenceCheck"
      [customTemplate]="customPresenceTemplate"
      [onConfirmHereClose]="handlePresenceConfirmed">
    </app-confirm-here-modal>

    <ng-template #customPresenceTemplate let-counter="counter" let-onConfirm="onConfirm">
      <div class="custom-presence-check">
        <div class="countdown-circle">{{ counter }}</div>
        <h3>Still there?</h3>
        <p>You'll be disconnected in {{ counter }} seconds</p>
        <button (click)="onConfirm()" class="confirm-btn">I'm here!</button>
      </div>
    </ng-template>

    app-confirm-here-modal

    true

    CommonModule, FontAwesomeModule

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

    position - Modal position on screen (e.g., 'center', 'topCenter'). Default: 'center'

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

    displayColor - Color of the countdown timer text. Default: '#000000'

    onConfirmHereClose - Callback function when user confirms presence or modal closes. Default: () => {}

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

    localSocket - Optional local socket instance for community edition. Default: undefined

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

    member - Name/ID of the member confirming presence. Default: ''

    countdownDuration - Countdown duration in seconds before auto-disconnect. Default: 120

    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 countdown timer and socket listeners

    ngOnDestroy - Cleans up timers and socket listeners

    startCountdown - Begins countdown timer

    stopCountdown - Stops countdown timer

    handleConfirmHere - Handles user confirmation and sends socket event

    getCombinedOverlayStyle - Merges default and custom overlay styles

    getCombinedContentStyle - Merges default and custom content styles

    Implements

    • OnInit
    • OnDestroy
    Index

    Accessors

    spinnerContainerStyle modalContainerStyle modalContentStyle

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges ngOnDestroy getCombinedOverlayStyle getCombinedContentStyle startCountdown clearCountdown handleConfirmHere

    Properties

    isConfirmHereModalVisible position backgroundColor displayColor onConfirmHereClose countdownDuration? socket localSocket? roomName member overlayStyle? contentStyle? customTemplate? faSpinner counter countdownInterval

    Accessors

    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

    Properties

    isConfirmHereModalVisible: boolean = false
    position: string = 'center'
    backgroundColor: string = '#83c0e9'
    displayColor: string = '#000000'
    onConfirmHereClose: () => void
    countdownDuration?: number = 120
    socket: Socket
    localSocket?: Socket<DefaultEventsMap, DefaultEventsMap>
    roomName: string
    member: string
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: TemplateRef<any>
    faSpinner: IconDefinition = faSpinner
    counter: number
    countdownInterval: any

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods
    Properties