Function ConfigureWhiteboardModal

ConfigureWhiteboardModal - A comprehensive modal for configuring and managing collaborative whiteboard sessions.

This component provides a sophisticated interface for host-controlled whiteboard management, including participant selection, access control, session lifecycle management, and compatibility checks with other session features like screen sharing and recording.

Key Features:

• Participant Management: Dual-list interface for assigning/removing whiteboard access from participants
• Session Control: Start, stop, and update whiteboard sessions with socket-based synchronization
• Access Validation: Automatic checks for host permissions and session state compatibility
• Screen Share Integration: Validates compatibility with active screen sharing sessions
• Recording Integration: Ensures whiteboard works correctly with recording states (started, paused, resumed, stopped)
• Breakout Room Awareness: Handles whiteboard availability during breakout room sessions
• Canvas Stream Management: Integrates with captureCanvasStream for whiteboard video streaming
• User Media Sync: Prepopulates user media when whiteboard state changes via prepopulateUserMedia
• Pagination Support: Handles large participant lists with configurable page limits
• Real-time Updates: Socket-based synchronization for whiteboard state across all participants
• Granular Customization: Extensive HTML attributes and render hooks for all UI elements
• Empty States: Custom messages for empty assigned/pending participant lists
• Responsive Layout: Flexible positioning and responsive design

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

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

  const participants = [
    { id: '1', name: 'Alice', islevel: '1', useBoard: false },
    { id: '2', name: 'Bob', islevel: '1', useBoard: false }
  ];

  const parameters = {
    participants,
    socket,
    itemPageLimit: 10,
    islevel: '2',
    roomName: 'meeting-room-123',
    eventType: 'meeting' as const,
    shareScreenStarted: false,
    shared: false,
    breakOutRoomStarted: false,
    breakOutRoomEnded: true,
    recordStarted: false,
    recordResumed: false,
    recordPaused: false,
    recordStopped: false,
    recordingMediaOptions: 'video',
    canStartWhiteboard: true,
    whiteboardStarted: false,
    whiteboardEnded: true,
    hostLabel: 'Host',
    updateWhiteboardStarted: (started) => console.log('Whiteboard started:', started),
    updateWhiteboardEnded: (ended) => console.log('Whiteboard ended:', ended),
    updateWhiteboardUsers: (users) => console.log('Whiteboard users:', users),
    updateCanStartWhiteboard: (can) => console.log('Can start:', can),
    updateIsConfigureWhiteboardModalVisible: (visible) => setShowModal(visible),
    onScreenChanges: async ({ changed }) => console.log('Screen changed:', changed),
    captureCanvasStream: async (options) => console.log('Capture canvas stream'),
    prepopulateUserMedia: async ({ name }) => console.log('Prepopulate for:', name),
    rePort: async ({ restart }) => console.log('Report restart:', restart),
    getUpdatedAllParams: () => parameters
  };

  return (
    <ConfigureWhiteboardModal
      isVisible={showModal}
      onConfigureWhiteboardClose={() => setShowModal(false)}
      parameters={parameters}
    />
  );
};
Copy

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

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

  const showAlert = ({ message, type }) => {
    setAlertMessage(`${type}: ${message}`);
    setTimeout(() => setAlertMessage(''), 5000);
  };

  const parameters = {
    // ... (same as basic example)
    showAlert,
    getUpdatedAllParams: () => parameters
  };

  return (
    <>
      {alertMessage && <div className="alert">{alertMessage}</div>}
      <ConfigureWhiteboardModal
        isVisible={showModal}
        onConfigureWhiteboardClose={() => setShowModal(false)}
        parameters={parameters}
        backgroundColor="#2c3e50"
        position="bottomRight"
        assignedTitle={<h3 style={{ color: '#2ecc71' }}>✅ Whiteboard Users</h3>}
        pendingTitle={<h3 style={{ color: '#95a5a6' }}>👥 Available Participants</h3>}
        startButtonProps={{
          style: {
            backgroundColor: '#2ecc71',
            color: '#fff',
            padding: '12px 24px'
          }
        }}
      />
    </>
  );
};
Copy

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

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

  const parameters = {
    // ... (basic parameters)
    updateWhiteboardStarted: (started) => {
      analytics.track('Whiteboard Started', {
        roomName: 'meeting-room-123',
        timestamp: new Date()
      });
    },
    updateWhiteboardUsers: (users) => {
      analytics.track('Whiteboard Users Updated', {
        userCount: users.length,
        users: users.map(u => u.name)
      });
    },
    getUpdatedAllParams: () => parameters
  };

  return (
    <ConfigureWhiteboardModal
      isVisible={showModal}
      onConfigureWhiteboardClose={() => {
        analytics.track('Whiteboard Config Closed');
        setShowModal(false);
      }}
      parameters={parameters}
      renderActions={({ defaultActions, whiteboardStarted }) => {
        React.useEffect(() => {
          if (whiteboardStarted) {
            analytics.track('Whiteboard Session Active');
          }
        }, [whiteboardStarted]);
        return defaultActions;
      }}
    />
  );
};
Copy

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

const CustomWhiteboardComponent = (props) => (
  <ConfigureWhiteboardModal
    {...props}
    position="topLeft"
    renderBody={({ assignedParticipants, pendingParticipants, isEditing }) => (
      <div className="custom-whiteboard-config">
        <div className="participants-stats">
          <div className="stat-card">
            <h4>{assignedParticipants.length}</h4>
            <p>Active on Whiteboard</p>
          </div>
          <div className="stat-card">
            <h4>{pendingParticipants.length}</h4>
            <p>Can Be Added</p>
          </div>
        </div>
        <div className="participants-grid">
          <div className="assigned-column">
            <h3>🎨 Whiteboard Access</h3>
            {assignedParticipants.map(p => (
              <div key={p.id} className="participant-card active">
                {p.name}
                {isEditing && <button>Remove</button>}
              </div>
            ))}
          </div>
          <div className="pending-column">
            <h3>👥 Other Participants</h3>
            {pendingParticipants.map(p => (
              <div key={p.id} className="participant-card">
                {p.name}
                {isEditing && <button>Add</button>}
              </div>
            ))}
          </div>
        </div>
      </div>
    )}
  />
);

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

  return (
    <MediasfuGeneric
      credentials={credentials}
      uiOverrides={{
        ConfigureWhiteboardModal: CustomWhiteboardComponent
      }}
    />
  );
};
Copy