Function EventSettingsModal

EventSettingsModal - Host controls for participant permissions

EventSettingsModal is a React Native component that provides host-level controls for managing participant permissions across audio, video, screenshare, and chat. Settings can be configured to allow, require approval, or disallow participant actions.

Key Features:

• Granular permission controls (audio, video, screenshare, chat)
• Three permission levels: allow, approval-required, disallow
• Real-time permission broadcasting to all participants
• Position-configurable modal (4 corners)
• Immediate settings application
• Socket.io-based synchronization

Permission Options:

• Allow: Participants can use feature freely
• Approval: Participants must request permission
• Disallow: Feature is disabled for participants

UI Customization: This component can be replaced via uiOverrides.eventSettingsModal to provide a completely custom event settings interface.

// Basic usage - Host permission controls
import React, { useState } from 'react';
import { EventSettingsModal } from 'mediasfu-reactnative-expo';
import { io } from 'socket.io-client';

function HostControls() {
  const [isModalVisible, setModalVisible] = useState(false);
  const [audioSetting, setAudioSetting] = useState('allow');
  const [videoSetting, setVideoSetting] = useState('allow');
  const [screenshareSetting, setScreenshareSetting] = useState('approval');
  const [chatSetting, setChatSetting] = useState('allow');
  
  const socket = io('https://mediasfu.com');

  return (
    <>
      <Button title="Event Settings" onPress={() => setModalVisible(true)} />
      <EventSettingsModal
        isEventSettingsModalVisible={isModalVisible}
        onEventSettingsClose={() => setModalVisible(false)}
        audioSetting={audioSetting}
        videoSetting={videoSetting}
        screenshareSetting={screenshareSetting}
        chatSetting={chatSetting}
        updateAudioSetting={setAudioSetting}
        updateVideoSetting={setVideoSetting}
        updateScreenshareSetting={setScreenshareSetting}
        updateChatSetting={setChatSetting}
        updateIsSettingsModalVisible={setModalVisible}
        roomName="meeting-room-123"
        socket={socket}
        showAlert={(alert) => console.log(alert.message)}
      />
    </>
  );
}
Copy

// Positioned at bottom-left with custom colors
<EventSettingsModal
  isEventSettingsModalVisible={true}
  onEventSettingsClose={closeModal}
  position="bottomLeft"
  backgroundColor="#2c2c2c"
  audioSetting="allow"
  videoSetting="approval"
  screenshareSetting="disallow"
  chatSetting="allow"
  updateAudioSetting={setAudioSetting}
  updateVideoSetting={setVideoSetting}
  updateScreenshareSetting={setScreenshareSetting}
  updateChatSetting={setChatSetting}
  updateIsSettingsModalVisible={setModalVisible}
  roomName={roomName}
  socket={socket}
/>
Copy

// Using uiOverrides for complete settings modal replacement
import { MyCustomEventSettings } from './MyCustomEventSettings';

const sessionConfig = {
  credentials: { apiKey: 'your-api-key' },
  uiOverrides: {
    eventSettingsModal: {
      component: MyCustomEventSettings,
      injectedProps: {
        showAdvancedOptions: true,
      },
    },
  },
};

// MyCustomEventSettings.tsx
export const MyCustomEventSettings = (props: EventSettingsModalOptions & { showAdvancedOptions: boolean }) => {
  const handleSave = async () => {
    await props.onModifyEventSettings?.({
      parameters: {
        audioSet: props.audioSetting,
        videoSet: props.videoSetting,
        screenshareSet: props.screenshareSetting,
        chatSet: props.chatSetting,
        ...props,
      },
    });
    props.onEventSettingsClose();
  };

  return (
    <Modal visible={props.isEventSettingsModalVisible}>
      <View style={{ padding: 20 }}>
        <Text>Audio Permission:</Text>
        <Picker
          selectedValue={props.audioSetting}
          onValueChange={props.updateAudioSetting}
        >
          <Picker.Item label="Allow" value="allow" />
          <Picker.Item label="Approval Required" value="approval" />
          <Picker.Item label="Disallow" value="disallow" />
        </Picker>
        {props.showAdvancedOptions && <AdvancedPermissionOptions />}
        <Button title="Save Settings" onPress={handleSave} />
      </View>
    </Modal>
  );
};
Copy