ConstSocket.io client instance
// Basic requests management
import React, { useState } from 'react';
import { RequestsModal } from 'mediasfu-reactjs';
function RequestsManagement({ socket, roomName, parameters }) {
const [isVisible, setIsVisible] = useState(false);
const [requestList, setRequestList] = useState([]);
const [searchText, setSearchText] = useState('');
return (
<>
<button onClick={() => setIsVisible(true)}>
Requests ({requestList.length})
</button>
<RequestsModal
isRequestsModalVisible={isVisible}
onRequestClose={() => setIsVisible(false)}
requestCounter={requestList.length}
onRequestFilterChange={setSearchText}
requestList={requestList}
updateRequestList={setRequestList}
roomName={roomName}
socket={socket}
parameters={parameters}
position="topRight"
backgroundColor="#0f172a"
/>
</>
);
}
// Custom styled with request type indicators
import { RequestsModal } from 'mediasfu-reactjs';
function BrandedRequests(props) {
return (
<RequestsModal
{...props}
backgroundColor="#1e3a8a"
position="topLeft"
contentProps={{
style: {
borderRadius: 20,
border: '2px solid #3b82f6',
maxHeight: '80vh',
},
}}
badgeProps={{
style: {
background: '#ef4444',
color: 'white',
borderRadius: '50%',
padding: '4px 8px',
fontSize: 12,
fontWeight: 600,
},
}}
renderRequest={({ request, index, defaultRequest, handleRespond }) => (
<div style={{
padding: 16,
background: index % 2 === 0 ? '#f8fafc' : 'white',
borderRadius: 8,
marginBottom: 8,
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div>
<div style={{ fontWeight: 600 }}>{request.name || request.username}</div>
<div style={{ fontSize: 14, color: '#64748b' }}>
{request.icon ? `${request.icon} ` : ''}Request to join
</div>
</div>
<div style={{ display: 'flex', gap: 8 }}>
<button
onClick={() => handleRespond('accepted')}
style={{
background: '#22c55e',
color: 'white',
border: 'none',
borderRadius: 8,
padding: '8px 16px',
cursor: 'pointer',
}}
>
Accept
</button>
<button
onClick={() => handleRespond('rejected')}
style={{
background: '#ef4444',
color: 'white',
border: 'none',
borderRadius: 8,
padding: '8px 16px',
cursor: 'pointer',
}}
>
Reject
</button>
</div>
</div>
</div>
)}
/>
);
}
// Analytics tracking for request actions
import { RequestsModal } from 'mediasfu-reactjs';
function AnalyticsRequests(props) {
const handleRequestAction = async (options) => {
analytics.track('request_action', {
action: options.action,
requestType: options.type,
participantName: options.request.name || options.request.username,
});
return props.onRequestItemPress?.(options);
};
return (
<RequestsModal
{...props}
onRequestItemPress={handleRequestAction}
renderHeader={({ defaultHeader, counter, onClose }) => (
<div>
<div style={{
padding: 12,
background: '#f8fafc',
borderRadius: 8,
marginBottom: 16,
}}>
<div style={{ fontWeight: 600 }}>
{counter} pending {counter === 1 ? 'request' : 'requests'}
</div>
</div>
{defaultHeader}
</div>
)}
/>
);
}
// Override with MediasfuGeneric uiOverrides
import { MediasfuGeneric, RequestsModal } from 'mediasfu-reactjs';
const uiOverrides = {
requestsModal: {
component: (props) => (
<RequestsModal
{...props}
backgroundColor="#0f172a"
position="topRight"
badgeProps={{
style: {
background: '#ef4444',
borderRadius: '50%',
padding: '4px 8px',
fontWeight: 600,
},
}}
/>
),
},
};
<MediasfuGeneric uiOverrides={uiOverrides} />;
RequestsModal - Manage participant join and feature requests
A comprehensive modal for hosts to review and respond to participant requests including meeting entry requests, screen share requests, and other permission requests. Provides search/filter functionality, request counters, and accept/reject actions. Perfect for managing meeting security and participant approvals.
Features: