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
200 lines (199 loc) • 7.82 kB
TypeScript
import React from 'react';
import { SwitchAudioOptions, SwitchAudioParameters } from '../../methods/streamMethods/switchAudio';
import { SwitchVideoOptions, SwitchVideoParameters } from '../../methods/streamMethods/switchVideo';
import { SwitchVideoAltOptions, SwitchVideoAltParameters } from '../../methods/streamMethods/switchVideoAlt';
/**
* Parameters for media settings state and device management.
*
* @interface MediaSettingsModalParameters
* @extends SwitchAudioParameters, SwitchVideoParameters, SwitchVideoAltParameters
*
* **Default Devices:**
* @property {string} userDefaultVideoInputDevice - Currently selected video input device ID
* @property {string} userDefaultAudioInputDevice - Currently selected audio input device ID
*
* **Available Devices:**
* @property {MediaDeviceInfo[]} videoInputs - List of available video input devices (cameras)
* @property {MediaDeviceInfo[]} audioInputs - List of available audio input devices (microphones)
*
* **Background Modal:**
* @property {boolean} isBackgroundModalVisible - Whether background effects modal is visible
* @property {function} updateIsBackgroundModalVisible - Callback to update background modal visibility
*
* **Utility:**
* @property {function} getUpdatedAllParams - Function to retrieve current parameter state
*/
export interface MediaSettingsModalParameters extends SwitchAudioParameters, SwitchVideoParameters, SwitchVideoAltParameters {
userDefaultVideoInputDevice: string;
videoInputs: MediaDeviceInfo[];
audioInputs: MediaDeviceInfo[];
userDefaultAudioInputDevice: string;
isBackgroundModalVisible: boolean;
updateIsBackgroundModalVisible: (visible: boolean) => void;
getUpdatedAllParams: () => MediaSettingsModalParameters;
}
/**
* Configuration options for the MediaSettingsModal component.
*
* @interface MediaSettingsModalOptions
*
* **Modal Control:**
* @property {boolean} isMediaSettingsModalVisible - Whether the modal is currently visible
* @property {function} onMediaSettingsClose - Callback to close the modal
*
* **Device Switch Handlers:**
* @property {function} [switchCameraOnPress=switchVideoAlt] - Handler for camera switching (front/back on mobile)
* @property {function} [switchVideoOnPress=switchVideo] - Handler for video input device switching
* @property {function} [switchAudioOnPress=switchAudio] - Handler for audio input device switching
*
* **State Parameters:**
* @property {MediaSettingsModalParameters} parameters - Current device state and available devices
*
* **Customization:**
* @property {'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft'} [position='topRight'] - Modal screen position
* @property {string} [backgroundColor='#83c0e9'] - Modal background color
* @property {object} [style] - Additional custom styles
*
* **Advanced Render Overrides:**
* @property {function} [renderContent] - Custom content renderer (receives defaultContent and dimensions)
* @property {function} [renderContainer] - Custom container renderer (receives defaultContainer and dimensions)
*/
export interface MediaSettingsModalOptions {
isMediaSettingsModalVisible: boolean;
onMediaSettingsClose: () => void;
switchCameraOnPress?: (options: SwitchVideoAltOptions) => Promise<void>;
switchVideoOnPress?: (options: SwitchVideoOptions) => Promise<void>;
switchAudioOnPress?: (options: SwitchAudioOptions) => Promise<void>;
parameters: MediaSettingsModalParameters;
position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft';
backgroundColor?: string;
isDarkMode?: boolean;
renderMode?: 'modal' | 'sidebar' | 'inline';
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 MediaSettingsModalType = (options: MediaSettingsModalOptions) => JSX.Element;
/**
* MediaSettingsModal - Audio/Video device selection interface
*
* MediaSettingsModal is a React Native component that provides an interface for
* participants to select their preferred audio and video input devices. It supports
* camera switching (front/back on mobile), microphone selection, and background
* effects integration.
*
* **Key Features:**
* - Audio input device selection (microphone)
* - Video input device selection (camera)
* - Camera switch button (front/back on mobile)
* - Background effects modal integration
* - Real-time device switching
* - Available device enumeration
* - Position-configurable modal (4 corners)
*
* **UI Customization:**
* This component can be replaced via `uiOverrides.mediaSettingsModal` to
* provide a completely custom media settings interface.
*
* @component
* @param {MediaSettingsModalOptions} props - Configuration options for media settings
*
* @returns {JSX.Element} Rendered media settings modal
*
* @example
* // Basic usage - Device selection
* import React, { useState } from 'react';
* import { MediaSettingsModal } from 'mediasfu-reactnative-expo';
*
* function MediaControls() {
* const [isModalVisible, setModalVisible] = useState(false);
* const [selectedCamera, setSelectedCamera] = useState('camera1');
* const [selectedMic, setSelectedMic] = useState('mic1');
*
* const videoDevices = [
* { deviceId: 'camera1', label: 'Front Camera', kind: 'videoinput' },
* { deviceId: 'camera2', label: 'Back Camera', kind: 'videoinput' },
* ];
*
* const audioDevices = [
* { deviceId: 'mic1', label: 'Built-in Microphone', kind: 'audioinput' },
* { deviceId: 'mic2', label: 'Bluetooth Headset', kind: 'audioinput' },
* ];
*
* return (
* <>
* <Button title="Media Settings" onPress={() => setModalVisible(true)} />
* <MediaSettingsModal
* isMediaSettingsModalVisible={isModalVisible}
* onMediaSettingsClose={() => setModalVisible(false)}
* parameters={{
* userDefaultVideoInputDevice: selectedCamera,
* userDefaultAudioInputDevice: selectedMic,
* videoInputs: videoDevices,
* audioInputs: audioDevices,
* isBackgroundModalVisible: false,
* updateIsBackgroundModalVisible: (visible) => console.log('Background modal:', visible),
* getUpdatedAllParams: () => ({
* userDefaultVideoInputDevice: selectedCamera,
* userDefaultAudioInputDevice: selectedMic,
* videoInputs: videoDevices,
* audioInputs: audioDevices,
* }),
* }}
* />
* );
* };
* ```
*
* @example
* ```tsx
* // With position and background effects modal
* const handleSwitchCamera = async (options: SwitchVideoAltOptions) => {
* await switchVideoAlt(options);
* console.log('Camera switched');
* };
*
* return (
* <MediaSettingsModal
* isMediaSettingsModalVisible={showSettings}
* onMediaSettingsClose={() => setShowSettings(false)}
* switchCameraOnPress={handleSwitchCamera}
* parameters={mediaParameters}
* position="bottomLeft"
* backgroundColor="#2c3e50"
* />
* );
* ```
*
* @example
* ```tsx
* // Using custom UI via uiOverrides
* const config = {
* uiOverrides: {
* mediaSettingsModal: {
* component: MyCustomMediaSettings,
* injectedProps: {
* theme: 'dark',
* showAdvancedOptions: true,
* },
* },
* },
* };
*
* return <MyMediaComponent config={config} />;
* ```
*/
declare const MediaSettingsModal: React.FC<MediaSettingsModalOptions>;
export default MediaSettingsModal;