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
60 lines • 2.31 kB
JavaScript
import React from 'react';
import { Modal, View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { getModalBodyTheme } from '../../components_modern/core/modalBodyTheme';
import { getModalPosition } from '../../methods/utils/getModalPosition';
const BackgroundModal = ({ isBackgroundModalVisible = false, onBackgroundClose, backgroundColor, style, isDarkMode, position = 'center', renderContainer, }) => {
if (!isBackgroundModalVisible) {
return null;
}
const theme = getModalBodyTheme(isDarkMode);
const dimensions = { width: 420, height: 240 };
const defaultContainer = (<Modal visible={isBackgroundModalVisible} transparent animationType="fade" onRequestClose={onBackgroundClose}>
<View style={[styles.modalOverlay, getModalPosition({ position })]}>
<View style={[styles.container, backgroundColor ? { backgroundColor } : null, { borderColor: theme.borderColor }, style]}>
<Text style={[styles.text, { color: theme.textColor }]}>Virtual background is currently unsupported on native mobile devices.</Text>
<TouchableOpacity onPress={onBackgroundClose} style={[styles.button, { backgroundColor: theme.buttonBackgroundColor }]}>
<Text style={[styles.buttonText, { color: theme.buttonTextColor }]}>Close</Text>
</TouchableOpacity>
</View>
</View>
</Modal>);
return renderContainer
? renderContainer({ defaultContainer, dimensions })
: defaultContainer;
};
const styles = StyleSheet.create({
modalOverlay: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.45)',
},
container: {
width: '80%',
maxWidth: 420,
minHeight: 240,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#1e293b',
borderRadius: 12,
borderWidth: 1,
padding: 20
},
text: {
color: '#fff',
fontSize: 16,
textAlign: 'center'
},
button: {
marginTop: 16,
paddingHorizontal: 16,
paddingVertical: 10,
borderRadius: 999,
backgroundColor: '#475569'
},
buttonText: {
color: '#fff',
fontSize: 14,
fontWeight: '600'
}
});
export default BackgroundModal;
//# sourceMappingURL=BackgroundModal.js.map