Function ConfirmHereModal

ConfirmHereModal - A modal component for confirming user presence with countdown timer.

This component displays an interactive modal that prompts users to confirm their presence in a session. It features a configurable countdown timer, socket-based presence confirmation, and comprehensive customization options for styling, content, and behavior.

Key Features:

• Countdown Timer: Configurable countdown duration (default 120 seconds) with real-time display
• Socket Communication: Emits presence confirmation to both primary and local sockets
• Timeout Handling: Custom callback support for timeout scenarios with automatic modal dismissal
• Custom Content: Fully customizable title, message (with dynamic context), and labels
• Loading States: Built-in spinner with customizable appearance during confirmation processing
• Flexible Messaging: Message can be static node or dynamic function receiving countdown context
• HTML Attributes: Granular control over all UI elements (overlay, content, buttons, text, etc.)
• Render Hooks: Complete override capability for all visual elements (spinner, title, message, countdown, button, body, content)
• Responsive Design: Automatic centering and z-index management for overlay positioning
• Accessibility: Semantic HTML with proper button and heading elements

import React, { useState } from 'react';
import { ConfirmHereModal } from 'mediasfu-reactjs';
import { io } from 'socket.io-client';

const BasicPresenceCheck = () => {
  const [showModal, setShowModal] = useState(true);
  const socket = io('https://mediasfu.com');

  return (
    <ConfirmHereModal
      isConfirmHereModalVisible={showModal}
      onConfirmHereClose={() => setShowModal(false)}
      socket={socket}
      roomName="meeting-room-123"
      member="user@example.com"
      countdownDuration={120}
    />
  );
};
Copy

import React, { useState } from 'react';
import { ConfirmHereModal } from 'mediasfu-reactjs';
import { io } from 'socket.io-client';

const CustomStyledPresence = () => {
  const [showModal, setShowModal] = useState(true);
  const socket = io('https://mediasfu.com');

  const handleTimeout = () => {
    console.warn('User failed to confirm presence');
    // Redirect to lobby or end session
  };

  return (
    <ConfirmHereModal
      isConfirmHereModalVisible={showModal}
      onConfirmHereClose={() => setShowModal(false)}
      socket={socket}
      roomName="meeting-room-123"
      member="user@example.com"
      backgroundColor="#ff6b6b"
      countdownDuration={60}
      onTimeout={handleTimeout}
      title={<h2 style={{ color: '#fff' }}>⚠️ Are You Still There?</h2>}
      message={({ counter }) => (
        <p style={{ color: counter < 10 ? '#fff' : '#333' }}>
          You will be removed from the meeting if you don't respond!
        </p>
      )}
      confirmButtonLabel="Yes, I'm Here!"
      confirmButtonProps={{
        style: { 
          backgroundColor: '#2ecc71',
          color: '#fff',
          padding: '12px 24px',
          fontSize: '16px'
        }
      }}
    />
  );
};
Copy

import React, { useState } from 'react';
import { ConfirmHereModal } from 'mediasfu-reactjs';
import { io } from 'socket.io-client';

const AnalyticsPresence = () => {
  const [showModal, setShowModal] = useState(true);
  const socket = io('https://mediasfu.com');

  const handleConfirm = () => {
    // Track confirmation
    analytics.track('Presence Confirmed', {
      roomName: 'meeting-room-123',
      timeRemaining: counter
    });
    setShowModal(false);
  };

  const handleTimeout = () => {
    analytics.track('Presence Timeout', {
      roomName: 'meeting-room-123'
    });
  };

  return (
    <ConfirmHereModal
      isConfirmHereModalVisible={showModal}
      onConfirmHereClose={handleConfirm}
      socket={socket}
      roomName="meeting-room-123"
      member="user@example.com"
      onTimeout={handleTimeout}
      renderCountdown={({ defaultCountdown, counter }) => (
        <div>
          {defaultCountdown}
          {counter < 30 && (
            <p style={{ color: 'red' }}>⏰ Less than 30 seconds remaining!</p>
          )}
        </div>
      )}
    />
  );
};
Copy

import React, { useState } from 'react';
import { MediasfuGeneric, ConfirmHereModal } from 'mediasfu-reactjs';

const CustomPresenceComponent = (props) => (
  <ConfirmHereModal
    {...props}
    title="Custom Presence Check"
    countdownDuration={90}
    message="Please confirm you're still attending this session."
    renderBody={({ spinner, title, message, countdown, confirmButton }) => (
      <div className="custom-presence">
        <div className="presence-header">
          {spinner}
          {title}
        </div>
        <div className="presence-content">
          {message}
          <div className="presence-countdown">{countdown}</div>
        </div>
        <div className="presence-footer">
          {confirmButton}
        </div>
      </div>
    )}
  />
);

const App = () => {
  const [credentials] = useState({
    apiUserName: 'user123',
    apiKey: 'your-api-key'
  });

  return (
    <MediasfuGeneric
      credentials={credentials}
      uiOverrides={{
        ConfirmHereModal: CustomPresenceComponent
      }}
    />
  );
};
Copy