Function EventSettingsModal

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:

• Audio permission control (allow, disallow, approval required)
• Video permission control (allow, disallow, approval required)
• Screen share permission control (allow, disallow, approval required)
• Chat permission control (allow, disallow)
• Real-time settings synchronization via socket
• Customizable permission labels and options
• Extensive HTML attributes customization
• Custom render hooks for sections
• Responsive positioning
• Settings validation

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"
      />
    </>
  );
}
Copy

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>
      }
    />
  );
}
Copy

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}
    />
  );
}
Copy

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} />;
Copy