mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
112 lines (111 loc) • 3.99 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';
/**
* Interface defining the parameters required by the MediaSettingsModal component.
*/
export interface MediaSettingsModalParameters extends SwitchAudioParameters, SwitchVideoParameters, SwitchVideoAltParameters {
userDefaultVideoInputDevice: string;
videoInputs: MediaDeviceInfo[];
audioInputs: MediaDeviceInfo[];
userDefaultAudioInputDevice: string;
isBackgroundModalVisible: boolean;
updateIsBackgroundModalVisible: (visible: boolean) => void;
getUpdatedAllParams: () => MediaSettingsModalParameters;
}
/**
* Interface defining the options (props) for the MediaSettingsModal component.
*/
export interface MediaSettingsModalOptions {
/**
* Determines if the media settings modal is visible.
*/
isMediaSettingsModalVisible: boolean;
/**
* Callback function to close the media settings modal.
*/
onMediaSettingsClose: () => void;
/**
* Function to handle camera switch action.
* @default switchVideoAlt
*/
switchCameraOnPress?: (options: SwitchVideoAltOptions) => Promise<void>;
/**
* Function to handle video input switch action.
* @default switchVideo
*/
switchVideoOnPress?: (options: SwitchVideoOptions) => Promise<void>;
/**
* Function to handle audio input switch action.
* @default switchAudio
*/
switchAudioOnPress?: (options: SwitchAudioOptions) => Promise<void>;
/**
* Parameters containing user default devices and available devices.
*/
parameters: MediaSettingsModalParameters;
/**
* Position of the modal on the screen.
* @default "topRight"
*/
position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft';
/**
* Background color of the modal.
* @default "#83c0e9"
*/
backgroundColor?: string;
}
export type MediaSettingsModalType = (options: MediaSettingsModalOptions) => JSX.Element;
/**
* MediaSettingsModal provides a modal interface for users to adjust media settings, such as selecting audio and video input devices and switching cameras.
*
* @example
* ```tsx
* import React, { useState } from 'react';
* import { MediaSettingsModal } from 'mediasfu-reactnative';
* import { io } from 'socket.io-client';
*
* const socket = io('https://your-server-url.com');
* const videoInputs = [
* { deviceId: 'videoDevice1', label: 'Front Camera' },
* { deviceId: 'videoDevice2', label: 'Back Camera' }
* ];
* const audioInputs = [
* { deviceId: 'audioDevice1', label: 'Built-in Microphone' },
* { deviceId: 'audioDevice2', label: 'External Microphone' }
* ];
*
* function App() {
* const [isModalVisible, setModalVisible] = useState(true);
*
* return (
* <View>
* <Button title="Open Media Settings" onPress={() => setModalVisible(true)} />
* <MediaSettingsModal
* isMediaSettingsModalVisible={isModalVisible}
* onMediaSettingsClose={() => setModalVisible(false)}
* position="bottomLeft"
* backgroundColor="#f0f0f0"
* parameters={{
* userDefaultVideoInputDevice: 'videoDevice1',
* userDefaultAudioInputDevice: 'audioDevice1',
* videoInputs,
* audioInputs,
* getUpdatedAllParams: () => ({
* userDefaultVideoInputDevice: 'videoDevice1',
* userDefaultAudioInputDevice: 'audioDevice1',
* videoInputs,
* audioInputs,
* }),
* }}
* />
* </View>
* );
* }
*
* export default App;
* ```
*/
declare const MediaSettingsModal: React.FC<MediaSettingsModalOptions>;
export default MediaSettingsModal;