ConstComprehensive parameters object containing:
// Basic usage for whiteboard configuration
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}
/>
);
};
// Custom styled with validation alerts
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'
}
}}
/>
</>
);
};
// Analytics tracking for whiteboard management
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;
}}
/>
);
};
// Integration with MediasfuGeneric using uiOverrides
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
}}
/>
);
};
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: