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
94 lines • 3.05 kB
JavaScript
// MeetingIdComponent.tsx
import React from 'react';
import { View, Text, TextInput, StyleSheet, TouchableOpacity, } from 'react-native';
import * as Clipboard from 'expo-clipboard';
import { FontAwesome5 } from '@expo/vector-icons';
/**
* MeetingIdComponent displays a meeting ID in a read-only input field with an option to copy the ID to the clipboard.
*
* @component
* @param {MeetingIdComponentOptions} props - Configuration options for the MeetingIdComponent.
* @param {string} [props.meetingID=''] - The meeting ID to display.
* @returns {JSX.Element} The rendered MeetingIdComponent component.
*
* @example
* ```tsx
* import React from 'react';
* import { MeetingIdComponent } from 'mediasfu-reactnative-expo';
*
* function App() {
* return (
* <MeetingIdComponent meetingID="1234567890" />
* );
* }
*
* export default App;
* ```
*/
const MeetingIdComponent = ({ meetingID = '', isDarkMode }) => {
const themed = typeof isDarkMode === 'boolean';
const textColor = themed ? (isDarkMode ? '#f8fafc' : '#0f172a') : '#000000';
const inputBackgroundColor = themed ? (isDarkMode ? '#1e293b' : '#ffffff') : '#f0f0f0';
const inputBorderColor = themed ? (isDarkMode ? 'rgba(226, 232, 240, 0.22)' : 'rgba(71, 85, 105, 0.28)') : 'gray';
/**
* Copies the meeting ID to the clipboard and alerts the user.
*/
const handleCopy = async () => {
try {
await Clipboard.setStringAsync(meetingID);
}
catch {
// Handle error
}
};
return (<View style={styles.formGroup}>
<Text style={[styles.label, { color: textColor }]}>Event ID:</Text>
<View style={styles.inputContainer}>
<TextInput style={[styles.disabledInput, { color: textColor, backgroundColor: inputBackgroundColor, borderColor: inputBorderColor }]} value={meetingID} editable={false} selectTextOnFocus={false} accessibilityLabel="Event ID"/>
<TouchableOpacity onPress={handleCopy} style={styles.copyButton}>
<FontAwesome5 name="copy" style={[styles.copyIcon, { color: textColor }]}/>
</TouchableOpacity>
</View>
</View>);
};
export default MeetingIdComponent;
/**
* Stylesheet for the MeetingIdComponent.
*/
const styles = StyleSheet.create({
formGroup: {
marginTop: 10,
maxWidth: 300,
width: '100%',
marginBottom: 10,
},
label: {
fontWeight: 'bold',
fontSize: 16,
color: '#000000',
marginBottom: 5,
},
inputContainer: {
flexDirection: 'row',
alignItems: 'center',
},
disabledInput: {
flex: 1,
borderWidth: 1,
borderColor: 'gray',
padding: 10,
backgroundColor: '#f0f0f0',
color: 'black',
borderRadius: 5,
fontSize: 16,
},
copyButton: {
padding: 10,
marginLeft: 5,
},
copyIcon: {
fontSize: 20,
color: '#0F0F10FF', // Blue color for copy icon
},
});
//# sourceMappingURL=MeetingIDComponent.js.map