ConstSocket.io client instance
// Basic event settings for host
import React, { useState } from 'react';
import { EventSettingsModal } from 'mediasfu-reactjs';
function HostSettings({ socket, roomName, showAlert }) {
const [isVisible, setIsVisible] = useState(false);
const [audioSetting, setAudioSetting] = useState('allow');
const [videoSetting, setVideoSetting] = useState('approval');
const [screenshareSetting, setScreenshareSetting] = useState('approval');
const [chatSetting, setChatSetting] = useState('allow');
return (
<>
<button onClick={() => setIsVisible(true)}>
Event Settings
</button>
<EventSettingsModal
isEventSettingsModalVisible={isVisible}
onEventSettingsClose={() => setIsVisible(false)}
audioSetting={audioSetting}
videoSetting={videoSetting}
screenshareSetting={screenshareSetting}
chatSetting={chatSetting}
updateAudioSetting={setAudioSetting}
updateVideoSetting={setVideoSetting}
updateScreenshareSetting={setScreenshareSetting}
updateChatSetting={setChatSetting}
updateIsSettingsModalVisible={setIsVisible}
roomName={roomName}
socket={socket}
showAlert={showAlert}
position="topRight"
backgroundColor="#0f172a"
/>
</>
);
}
// Custom styled with permission indicators
import { EventSettingsModal } from 'mediasfu-reactjs';
function BrandedSettings(props) {
const permissionIcons = {
allow: '✓',
disallow: '✗',
approval: '⚠',
};
return (
<EventSettingsModal
{...props}
backgroundColor="#1e3a8a"
position="topLeft"
contentProps={{
style: {
borderRadius: 20,
border: '2px solid #3b82f6',
},
}}
saveButtonProps={{
style: {
background: 'linear-gradient(135deg, #22c55e 0%, #14532d 100%)',
color: 'white',
padding: '12px 28px',
borderRadius: 12,
fontWeight: 600,
},
}}
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<span>Meeting Permissions</span>
<div style={{ fontSize: 12, display: 'flex', gap: 8 }}>
<span>{permissionIcons[props.audioSetting]} Audio</span>
<span>{permissionIcons[props.videoSetting]} Video</span>
</div>
</div>
}
/>
);
}
// Analytics tracking for permission changes
import { EventSettingsModal } from 'mediasfu-reactjs';
function AnalyticsSettings(props) {
const handleModifySettings = async (options) => {
analytics.track('event_settings_modified', {
audioChanged: options.parameters.audioSetting !== props.audioSetting,
videoChanged: options.parameters.videoSetting !== props.videoSetting,
screenshareChanged: options.parameters.screenshareSetting !== props.screenshareSetting,
chatChanged: options.parameters.chatSetting !== props.chatSetting,
newSettings: {
audio: options.parameters.audioSetting,
video: options.parameters.videoSetting,
screenshare: options.parameters.screenshareSetting,
chat: options.parameters.chatSetting,
},
});
return props.onModifyEventSettings?.(options);
};
return (
<EventSettingsModal
{...props}
onModifyEventSettings={handleModifySettings}
/>
);
}
// Override with MediasfuGeneric uiOverrides
import { MediasfuGeneric, EventSettingsModal } from 'mediasfu-reactjs';
const uiOverrides = {
eventSettingsModal: {
component: (props) => (
<EventSettingsModal
{...props}
backgroundColor="#0f172a"
position="topRight"
saveButtonProps={{
style: {
background: '#22c55e',
borderRadius: 12,
padding: '12px 28px',
fontWeight: 600,
},
}}
/>
),
},
};
<MediasfuGeneric uiOverrides={uiOverrides} />;
EventSettingsModal - Host controls for participant permissions and meeting settings
A comprehensive modal for meeting hosts to configure participant permissions for audio, video, screen sharing, and chat. Provides granular control with allow/disallow/approval options, enabling hosts to manage meeting security and participant interactions effectively.
Features: