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
212 lines (208 loc) • 6.93 kB
JavaScript
// ShareEventModal.tsx
import React from 'react';
import { Modal, View, StyleSheet, Pressable, ScrollView, Dimensions, } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { getModalPosition } from '../../methods/utils/getModalPosition';
import MeetingIdComponent from '../menuComponents/MeetingIDComponent';
import MeetingPasscodeComponent from '../menuComponents/MeetingPasscodeComponent';
import ShareButtonsComponent from '../menuComponents/ShareButtonsComponent';
import { getModalBodyTheme } from '../../components_modern/core/modalBodyTheme';
/**
* ShareEventModal - Meeting credentials and invitation sharing interface
*
* ShareEventModal is a React Native component that displays meeting credentials
* (room name, meeting ID, passcode) with social sharing buttons. It allows hosts
* to share meeting access information via copy link, QR code, email, and other methods.
*
* **Key Features:**
* - Meeting ID display with copy functionality
* - Passcode display (admin passcode shown only to hosts)
* - Social share buttons (copy link, QR code, email, etc.)
* - Event type-specific formatting
* - Local/custom link support
* - Position-configurable modal (5 positions)
* - Scrollable content for long credentials
*
* **UI Customization:**
* This component can be replaced via `uiOverrides.shareEventModal` to
* provide a completely custom sharing interface.
*
* @component
* @param {ShareEventModalOptions} props - Configuration options
*
* @returns {JSX.Element} Rendered share event modal
*
* @example
* ```tsx
* // Basic usage for host sharing
* import React, { useState } from 'react';
* import { ShareEventModal } from 'mediasfu-reactnative-expo';
*
* const [showShare, setShowShare] = useState(false);
*
* return (
* <ShareEventModal
* isShareEventModalVisible={showShare}
* onShareEventClose={() => setShowShare(false)}
* roomName="meeting-room-123"
* adminPasscode="host-pass-456"
* islevel="2" // Host - shows admin passcode
* eventType="conference"
* shareButtons={true}
* />
* );
* ```
*
* @example
* ```tsx
* // Participant view without admin passcode
* return (
* <ShareEventModal
* isShareEventModalVisible={isVisible}
* onShareEventClose={handleClose}
* roomName="webinar-room-789"
* islevel="0" // Participant - no admin passcode shown
* eventType="webinar"
* position="center"
* backgroundColor="rgba(255, 255, 255, 0.9)"
* />
* );
* ```
*
* @example
* ```tsx
* // With custom local link
* return (
* <ShareEventModal
* isShareEventModalVisible={showModal}
* onShareEventClose={closeModal}
* roomName={roomId}
* adminPasscode={hostPass}
* islevel={userLevel}
* eventType="broadcast"
* localLink="https://custom-domain.com/join"
* shareButtons={true}
* position="bottomRight"
* />
* );
* ```
*
* @example
* ```tsx
* // Using custom UI via uiOverrides
* const config = {
* uiOverrides: {
* shareEventModal: {
* component: MyCustomShareModal,
* injectedProps: {
* theme: 'dark',
* showQRCode: true,
* },
* },
* },
* };
*
* return <MyMeetingComponent config={config} />;
* ```
*/
const ShareEventModal = ({ backgroundColor = 'rgba(255, 255, 255, 0.25)', isDarkMode, isShareEventModalVisible, onShareEventClose, shareButtons = true, position = 'topRight', roomName, adminPasscode, islevel, eventType, localLink, style, renderContent, renderContainer, }) => {
const screenWidth = Dimensions.get('window').width;
let modalWidth = 0.8 * screenWidth;
if (modalWidth > 350) {
modalWidth = 350;
}
const dimensions = { width: modalWidth, height: 0 };
const theme = getModalBodyTheme(isDarkMode);
const shouldUseModernTheme = typeof isDarkMode === 'boolean';
const defaultContent = (<>
<View style={styles.modalHeader}>
<Pressable onPress={onShareEventClose} style={styles.closeButton}>
<FontAwesome name="times" style={[styles.icon, { color: theme.iconColor }]}/>
</Pressable>
</View>
<View style={[styles.separator, { backgroundColor: theme.dividerColor }]}/>
{/* Modal Body */}
<View style={styles.modalBody}>
<ScrollView contentContainerStyle={styles.bodyContainer}>
{/* Conditionally render MeetingPasscodeComponent based on islevel */}
{islevel === '2' && adminPasscode && (<View style={styles.componentContainer}>
<MeetingPasscodeComponent meetingPasscode={adminPasscode} isDarkMode={isDarkMode}/>
</View>)}
{/* Meeting ID */}
<View style={styles.componentContainer}>
<MeetingIdComponent meetingID={roomName} isDarkMode={isDarkMode}/>
</View>
{/* Share Buttons */}
{shareButtons && (<View style={styles.componentContainer}>
<ShareButtonsComponent meetingID={roomName} eventType={eventType} localLink={localLink}/>
</View>)}
</ScrollView>
</View>
</>);
const content = renderContent
? renderContent({ defaultContent, dimensions })
: defaultContent;
const defaultContainer = (<Modal transparent animationType="fade" visible={isShareEventModalVisible} onRequestClose={onShareEventClose}>
<View style={[styles.modalContainer, getModalPosition({ position })]}>
<View style={[styles.modalContent, { backgroundColor, width: modalWidth }, shouldUseModernTheme ? { borderColor: theme.borderColor, borderWidth: 1 } : null, style]}>
{content}
</View>
</View>
</Modal>);
return renderContainer
? renderContainer({ defaultContainer, dimensions })
: defaultContainer;
};
export default ShareEventModal;
/**
* Stylesheet for the ShareEventModal component.
*/
const styles = StyleSheet.create({
modalContainer: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'flex-end',
zIndex: 9,
elevation: 9,
},
modalContent: {
height: '40%',
backgroundColor: '#83c0e9',
borderRadius: 10,
padding: 10,
maxHeight: '40%',
maxWidth: '80%',
zIndex: 9,
elevation: 9,
marginBottom: 10,
},
closeButton: {
alignSelf: 'flex-end',
padding: 5,
},
icon: {
fontSize: 20,
color: '#000000',
},
separator: {
height: 1,
backgroundColor: '#000000',
marginVertical: 5,
},
bodyContainer: {
paddingBottom: 10,
},
componentContainer: {
marginBottom: 15,
},
modalHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 15,
},
modalBody: {
flex: 1,
},
});
//# sourceMappingURL=ShareEventModal.js.map