mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
195 lines (191 loc) • 6.72 kB
JavaScript
// RecordingModal.tsx
import React from 'react';
import { Modal, View, StyleSheet, ScrollView, Dimensions, Pressable, Text, } from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import StandardPanelComponent from './StandardPanelComponent';
import AdvancedPanelComponent from './AdvancedPanelComponent';
import { getModalPosition } from '../../methods/utils/getModalPosition';
/**
* RecordingModal component displays a modal with settings for configuring and managing recordings. It includes sections for both standard and advanced recording options, allowing users to specify video types, display options, background colors, custom text, and other recording parameters.
*
* @component
* @param {RecordingModalOptions} props - The properties object.
* @returns {JSX.Element} The rendered RecordingModal component.
*
* @example
* ```tsx
* import React from 'react';
* import { RecordingModal } from 'mediasfu-reactnative';
*
* const recordingParameters = {
* recordPaused: false,
* recordingVideoType: 'fullDisplay',
* recordingDisplayType: 'video',
* 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',
* updateRecordingVideoType: (value) => {},
* updateRecordingDisplayType: (value) => {},
* updateRecordingBackgroundColor: (value) => {},
* updateRecordingNameTagsColor: (value) => {},
* updateRecordingOrientationVideo: (value) => {},
* updateRecordingNameTags: (value) => {},
* updateRecordingAddText: (value) => {},
* updateRecordingCustomText: (value) => {},
* updateRecordingCustomTextPosition: (value) => {},
* updateRecordingCustomTextColor: (value) => {},
* updateRecordingMediaOptions: (value) => {},
* updateRecordingAudioOptions: (value) => {},
* updateRecordingVideoOptions: (value) => {},
* updateRecordingAddHLS: (value) => {},
* };
*
* function App() {
* return (
* <RecordingModal
* isRecordingModalVisible={true}
* onClose={() => console.log('Modal closed')}
* confirmRecording={() => console.log('Confirm recording settings')}
* startRecording={() => console.log('Start recording')}
* parameters={recordingParameters}
* />
* );
* }
*
* export default App;
* ```
*/
const RecordingModal = ({ isRecordingModalVisible, onClose, backgroundColor = '#83c0e9', position = 'bottomRight', confirmRecording, startRecording, parameters, }) => {
const { recordPaused } = parameters;
const screenWidth = Dimensions.get('window').width;
let modalWidth = 0.75 * screenWidth;
if (modalWidth > 400) {
modalWidth = 400;
}
return (<Modal transparent animationType="slide" visible={isRecordingModalVisible} onRequestClose={onClose}>
<View style={[styles.modalContainer, getModalPosition({ position })]}>
<View style={[styles.modalContent, { backgroundColor, width: modalWidth }]}>
{/* Header */}
<View style={styles.modalHeader}>
<Text style={styles.modalTitle}>
<FontAwesome name="bars" size={24} color="black"/>
{' Recording Settings'}
</Text>
<Pressable onPress={onClose} style={styles.closeButton}>
<FontAwesome name="times" size={24} color="black"/>
</Pressable>
</View>
<View style={styles.separator}/>
{/* Modal Body */}
<View style={styles.modalBody}>
<ScrollView style={styles.scrollView}>
<View style={styles.listGroup}>
<StandardPanelComponent parameters={parameters}/>
<AdvancedPanelComponent parameters={parameters}/>
</View>
</ScrollView>
</View>
<View style={styles.separator}/>
{/* Action Buttons */}
<View style={styles.buttonRow}>
<Pressable style={[styles.button, styles.confirmButton]} onPress={() => confirmRecording({ parameters })}>
<Text style={styles.buttonText}>Confirm</Text>
</Pressable>
{!recordPaused && (<Pressable style={[styles.button, styles.startButton]} onPress={() => startRecording({ parameters })}>
<Text style={styles.buttonText}>
Start <FontAwesome name="play" size={16} color="black"/>
</Text>
</Pressable>)}
</View>
</View>
</View>
</Modal>);
};
export default RecordingModal;
/**
* Stylesheet for the RecordingModal component.
*/
const styles = StyleSheet.create({
modalContainer: Object.assign(Object.assign({ flex: 1 }, StyleSheet.absoluteFillObject), { justifyContent: 'flex-end', alignItems: 'flex-end', zIndex: 9, elevation: 9 }),
modalContent: {
height: '75%',
backgroundColor: '#ffffff', // Default background color
borderRadius: 10,
padding: 15,
maxHeight: '80%',
maxWidth: '75%',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 9,
zIndex: 9,
},
scrollView: {
flex: 1,
maxHeight: '100%',
maxWidth: '100%',
},
modalHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 15,
},
modalTitle: {
fontSize: 16,
fontWeight: 'bold',
color: 'black',
flexDirection: 'row',
alignItems: 'center',
},
closeButton: {
padding: 5,
},
separator: {
height: 1,
backgroundColor: '#000000',
marginVertical: 10,
},
modalBody: {
flex: 1,
},
buttonRow: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 20,
},
button: {
flex: 1,
paddingVertical: 10,
borderRadius: 5,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 5,
},
confirmButton: {
backgroundColor: '#4CAF50',
},
startButton: {
backgroundColor: '#f44336',
},
buttonText: {
color: 'black',
fontSize: 14,
},
listGroup: {
margin: 0,
padding: 0,
},
});
//# sourceMappingURL=RecordingModal.js.map