mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
242 lines (241 loc) • 9.53 kB
TypeScript
import React from 'react';
import { Socket } from 'socket.io-client';
import { ShowAlert } from '../../@types/types';
import { ModifySettingsOptions } from '../../methods/settingsMethods/modifySettings';
/**
* Parameters for event settings state management.
*
* @interface EventSettingsModalParameters
*
* **Display Settings:**
* @property {string} meetingDisplayType - Current display type for meeting layout
* @property {boolean} autoWave - Whether auto-wave feature is enabled
* @property {boolean} forceFullDisplay - Whether to force full display mode
* @property {boolean} meetingVideoOptimized - Whether video optimization is enabled
*
* **Session Context:**
* @property {string} roomName - Name of the meeting room
* @property {Socket} socket - Socket.io connection for real-time updates
* @property {ShowAlert} [showAlert] - Optional alert display function
*/
export interface EventSettingsModalParameters {
meetingDisplayType: string;
autoWave: boolean;
forceFullDisplay: boolean;
meetingVideoOptimized: boolean;
roomName: string;
socket: Socket;
showAlert?: ShowAlert;
}
/**
* Configuration options for the EventSettingsModal component.
*
* @interface EventSettingsModalOptions
*
* **Modal Control:**
* @property {boolean} isEventSettingsModalVisible - Whether the modal is currently visible
* @property {function} onEventSettingsClose - Callback to close the modal
* @property {function} updateIsSettingsModalVisible - Callback to update modal visibility state
*
* **Permission Settings (Current State):**
* @property {string} audioSetting - Current audio permission ("allow" | "approval" | "disallow")
* @property {string} videoSetting - Current video permission ("allow" | "approval" | "disallow")
* @property {string} screenshareSetting - Current screenshare permission ("allow" | "approval" | "disallow")
* @property {string} chatSetting - Current chat permission ("allow" | "disallow")
*
* **State Update Callbacks:**
* @property {function} updateAudioSetting - Callback to update audio permission setting
* @property {function} updateVideoSetting - Callback to update video permission setting
* @property {function} updateScreenshareSetting - Callback to update screenshare permission setting
* @property {function} updateChatSetting - Callback to update chat permission setting
*
* **Session Context:**
* @property {string} roomName - Meeting room name for settings updates
* @property {Socket} socket - Socket connection for broadcasting changes
* @property {ShowAlert} [showAlert] - Optional alert function for user feedback
*
* **Customization:**
* @property {function} [onModifyEventSettings=modifySettings] - Custom handler for settings modifications
* @property {'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'} [position='topRight'] - Modal screen position
* @property {string} [backgroundColor='#83c0e9'] - Modal background color
*
* **Advanced Render Overrides:**
* @property {object} [style] - Additional custom styles
* @property {function} [renderContent] - Custom content renderer (receives defaultContent and dimensions)
* @property {function} [renderContainer] - Custom container renderer (receives defaultContainer and dimensions)
*/
export interface EventSettingsModalOptions {
isEventSettingsModalVisible: boolean;
onEventSettingsClose: () => void;
onModifyEventSettings?: (options: ModifySettingsOptions) => Promise<void>;
position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
backgroundColor?: string;
isDarkMode?: boolean;
audioSetting: string;
videoSetting: string;
screenshareSetting: string;
chatSetting: string;
updateAudioSetting: (setting: string) => void;
updateVideoSetting: (setting: string) => void;
updateScreenshareSetting: (setting: string) => void;
updateChatSetting: (setting: string) => void;
updateIsSettingsModalVisible: (isVisible: boolean) => void;
roomName: string;
socket: Socket;
showAlert?: ShowAlert;
style?: object;
renderContent?: (options: {
defaultContent: JSX.Element;
dimensions: {
width: number;
height: number;
};
}) => JSX.Element;
renderContainer?: (options: {
defaultContainer: JSX.Element;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
}
export type EventSettingsModalType = (options: EventSettingsModalOptions) => JSX.Element;
/**
* 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.
*
* @component
* @param {EventSettingsModalOptions} props - Configuration options for event settings
*
* @returns {JSX.Element} Rendered event settings modal
*
* @example
* // 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)}
* />
* </>
* );
* }
*
* @example
* // 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}
* />
*
* @example
* // 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>
* );
* };
*/
declare const EventSettingsModal: React.FC<EventSettingsModalOptions>;
export default EventSettingsModal;