Const// Basic usage - Display recording modal with default settings
import React, { useState } from 'react';
import { RecordingModal, confirmRecording, startRecording } from 'mediasfu-reactnative-expo';
function RecordingControls() {
const [showModal, setShowModal] = useState(false);
const [recordingParams, setRecordingParams] = useState({
recordPaused: false,
recordingVideoType: 'fullDisplay',
recordingDisplayType: 'video' as const,
recordingBackgroundColor: '#ffffff',
recordingNameTagsColor: '#000000',
recordingOrientationVideo: 'landscape',
recordingNameTags: true,
recordingAddText: false,
recordingCustomText: '',
recordingCustomTextPosition: 'top',
recordingCustomTextColor: '#000000',
recordingMediaOptions: 'default',
recordingAudioOptions: 'default',
recordingVideoOptions: 'default',
recordingAddHLS: false,
eventType: 'conference' as const,
updateRecordingVideoType: (value: string) => setRecordingParams({...recordingParams, recordingVideoType: value}),
updateRecordingDisplayType: (value: 'video' | 'media' | 'all') => setRecordingParams({...recordingParams, recordingDisplayType: value}),
// ... other update functions
getUpdatedAllParams: () => recordingParams,
});
return (
<>
<Button title="Recording Settings" onPress={() => setShowModal(true)} />
<RecordingModal
isRecordingModalVisible={showModal}
onClose={() => setShowModal(false)}
confirmRecording={confirmRecording}
startRecording={startRecording}
parameters={recordingParams}
/>
</>
);
}
// With custom styling and positioning
<RecordingModal
isRecordingModalVisible={showRecordingModal}
onClose={() => setShowRecordingModal(false)}
backgroundColor="#1a1a2e"
position="center"
confirmRecording={async (options) => {
console.log('Confirming recording settings');
await confirmRecording(options);
}}
startRecording={async (options) => {
console.log('Starting recording with settings:', options.parameters);
await startRecording(options);
}}
parameters={{
...recordingParams,
recordingBackgroundColor: '#0f3460',
recordingNameTagsColor: '#e94560',
recordingAddText: true,
recordingCustomText: 'Company Webinar',
recordingAddHLS: true,
}}
/>
// Using uiOverrides for complete modal replacement
import { MyCustomRecordingModal } from './MyCustomRecordingModal';
const sessionConfig = {
credentials: { apiKey: 'your-api-key' },
uiOverrides: {
recordingModalComponent: {
component: MyCustomRecordingModal,
injectedProps: {
theme: 'professional',
presets: ['meeting', 'webinar', 'presentation'],
},
},
},
};
// MyCustomRecordingModal.tsx
export const MyCustomRecordingModal = (props: RecordingModalOptions & { theme: string; presets: string[] }) => {
return (
<Modal visible={props.isRecordingModalVisible} onRequestClose={props.onClose}>
<View style={{ backgroundColor: props.theme === 'professional' ? '#2c3e50' : '#fff' }}>
<Text>Recording Settings</Text>
{props.presets.map(preset => (
<Button key={preset} title={preset} onPress={() => applyPreset(preset)} />
))}
<Button title="Start" onPress={() => props.startRecording({ parameters: props.parameters })} />
</View>
</Modal>
);
};
);
}
export default App;
RecordingModal - Comprehensive recording settings with standard and advanced options
RecordingModal is a feature-rich React Native modal for configuring and managing session recordings. It provides both standard (quick start) and advanced (detailed) panels for customizing video layout, background, text overlays, media options, and more.
Key Features:
UI Customization: This component can be replaced via
uiOverrides.recordingModalComponentto provide a completely custom recording modal implementation.