mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
239 lines (232 loc) • 9.76 kB
JavaScript
import React, { useEffect, useState, useRef } from 'react';
import { Modal, View, Text, Pressable, StyleSheet, Dimensions, } from 'react-native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import MessagePanel from './MessagePanel';
import { getModalPosition } from '../../methods/utils/getModalPosition';
import { sendMessage } from '../../methods/messageMethods/sendMessage';
/**
* MessagesModal component displays a modal for direct and group messages.
*
* @component
* @param {MessagesModalOptions} props - The properties for the MessagesModal component.
* @returns {JSX.Element} The rendered MessagesModal component.
*
* @example
* ```tsx
* import React, { useState } from 'react';
* import { MessagesModal } from 'mediasfu-reactnative';
*
* function App() {
* const [isVisible, setIsVisible] = useState(true);
* const messages = [
* { sender: 'Alice', message: 'Hello everyone!', timestamp: '10:01', group: true },
* { sender: 'Bob', message: 'Hey Alice!', timestamp: '10:02', receivers: ['Alice'], group: false },
* ];
* const handleSendMessage = async (options) => {
* // Logic for sending a message
* console.log('Message sent:', options);
* };
* return (
* <MessagesModal
* isMessagesModalVisible={isVisible}
* onMessagesClose={() => setIsVisible(false)}
* messages={messages}
* onSendMessagePress={handleSendMessage}
* eventType="conference"
* member="john_doe"
* islevel="1"
* coHostResponsibility={[{ name: 'chat', value: true }]}
* coHost="jane_doe"
* startDirectMessage={false}
* directMessageDetails={null}
* updateStartDirectMessage={(start) => console.log('Start Direct Message:', start)}
* updateDirectMessageDetails={(participant) => console.log('Direct Message Participant:', participant)}
* showAlert={(alert) => console.log('Alert:', alert)}
* roomName="MainRoom"
* socket={socketInstance}
* chatSetting="default"
* position="bottomRight"
* backgroundColor="#f5f5f5"
* activeTabBackgroundColor="#7AD2DCFF"
* />
* );
* }
* export default App;
* ```
*/
const MessagesModal = ({ isMessagesModalVisible, onMessagesClose, onSendMessagePress = sendMessage, messages, position = 'topRight', backgroundColor = '#f5f5f5', activeTabBackgroundColor = '#7AD2DCFF', eventType, member, islevel, coHostResponsibility, coHost, startDirectMessage, directMessageDetails, updateStartDirectMessage, updateDirectMessageDetails, showAlert, roomName, socket, chatSetting, }) => {
const screenWidth = Dimensions.get('window').width;
let modalWidth = 0.8 * screenWidth;
if (modalWidth > 400) {
modalWidth = 400;
}
const [directMessages, setDirectMessages] = useState([]);
const [groupMessages, setGroupMessages] = useState([]);
const activeTab = useRef(eventType === 'webinar' || eventType === 'conference' ? 'direct' : 'group');
const [focusedInput, setFocusedInput] = useState(false);
const [reRender, setReRender] = useState(false);
/**
* Switches the active tab to 'direct'.
*/
const switchToDirectTab = () => {
activeTab.current = 'direct';
setReRender(!reRender);
};
/**
* Switches the active tab to 'group'.
*/
const switchToGroupTab = () => {
activeTab.current = 'group';
setReRender(!reRender);
};
useEffect(() => {
var _a;
const chatValue = (_a = coHostResponsibility === null || coHostResponsibility === void 0 ? void 0 : coHostResponsibility.find((item) => item.name === 'chat')) === null || _a === void 0 ? void 0 : _a.value;
const populateMessages = () => {
const directMsgs = messages.filter((message) => !message.group
&& (message.sender === member
|| message.receivers.includes(member)
|| islevel === '2'
|| (coHost === member && chatValue === true)));
setDirectMessages(directMsgs);
const groupMsgs = messages.filter((message) => message.group);
setGroupMessages(groupMsgs);
};
if (isMessagesModalVisible) {
populateMessages();
}
}, [
coHost,
coHostResponsibility,
isMessagesModalVisible,
islevel,
member,
messages,
]);
useEffect(() => {
if (startDirectMessage && directMessageDetails) {
if (eventType === 'webinar' || eventType === 'conference') {
activeTab.current = 'direct';
setFocusedInput(true);
}
}
else if (eventType === 'broadcast' || eventType === 'chat') {
activeTab.current = 'group';
}
}, [startDirectMessage, directMessageDetails, eventType]);
useEffect(() => {
// Force re-render when reRender state changes
}, [reRender]);
return (<Modal animationType="fade" transparent visible={isMessagesModalVisible} onRequestClose={onMessagesClose}>
<View style={[styles.modalContainer, getModalPosition({ position })]}>
<View style={[styles.modalContent, { backgroundColor, width: modalWidth }]}>
<View style={styles.header}>
{eventType === 'webinar' || eventType === 'conference' ? (<View style={styles.tabsContainer}>
<Pressable onPress={switchToDirectTab} style={[
styles.tab,
activeTab.current === 'direct' && styles.activeTab,
activeTab.current === 'direct' && { backgroundColor: activeTabBackgroundColor },
]}>
<Text style={[
styles.tabText,
activeTab.current === 'direct' && styles.activeTabText,
]}>
Direct
</Text>
</Pressable>
<Pressable onPress={switchToGroupTab} style={[
styles.tab,
activeTab.current === 'group' && styles.activeTab,
activeTab.current === 'group' && { backgroundColor: activeTabBackgroundColor },
]}>
<Text style={[
styles.tabText,
activeTab.current === 'group' && styles.activeTabText,
]}>
Group
</Text>
</Pressable>
</View>) : null}
{/* Close Button */}
<Pressable onPress={onMessagesClose} style={styles.closeButton}>
<FontAwesome5 name="times" size={24} color="black"/>
</Pressable>
</View>
<View style={styles.separator}/>
<View style={styles.modalBody}>
{activeTab.current === 'direct'
&& (eventType === 'webinar' || eventType === 'conference') && (<MessagePanel messages={directMessages} messagesLength={messages.length} type="direct" onSendMessagePress={onSendMessagePress} username={member} backgroundColor={backgroundColor} focusedInput={focusedInput} showAlert={showAlert} eventType={eventType} member={member} islevel={islevel} coHostResponsibility={coHostResponsibility} coHost={coHost} directMessageDetails={directMessageDetails} updateStartDirectMessage={updateStartDirectMessage} updateDirectMessageDetails={updateDirectMessageDetails} roomName={roomName} socket={socket} chatSetting={chatSetting} startDirectMessage={startDirectMessage}/>)}
{activeTab.current === 'group' && (<MessagePanel messages={groupMessages} messagesLength={messages.length} type="group" onSendMessagePress={onSendMessagePress} username={member} backgroundColor={backgroundColor} focusedInput={false} showAlert={showAlert} eventType={eventType} member={member} islevel={islevel} coHostResponsibility={coHostResponsibility} coHost={coHost} directMessageDetails={directMessageDetails} updateStartDirectMessage={updateStartDirectMessage} updateDirectMessageDetails={updateDirectMessageDetails} roomName={roomName} socket={socket} chatSetting={chatSetting} startDirectMessage={startDirectMessage}/>)}
</View>
</View>
</View>
</Modal>);
};
export default MessagesModal;
/**
* Stylesheet for the MessagesModal component.
*/
const styles = StyleSheet.create({
modalContainer: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'flex-end',
zIndex: 9,
elevation: 9,
},
modalContent: {
height: '75%',
backgroundColor: '#f5f5f5',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
padding: 10,
maxHeight: '75%',
maxWidth: '80%',
zIndex: 9,
elevation: 9, // For Android shadow
shadowColor: '#000', // For iOS shadow
shadowOffset: { width: 0, height: -2 },
shadowOpacity: 0.25,
shadowRadius: 4,
marginBottom: 10,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
tabsContainer: {
flexDirection: 'row',
},
tab: {
paddingHorizontal: 15,
paddingVertical: 5,
marginVertical: 10,
borderRadius: 4,
},
activeTab: {
// Additional styles for active tab if needed
},
tabText: {
fontWeight: 'bold',
fontSize: 16,
color: '#000000',
},
activeTabText: {
color: '#ffffff',
backgroundColor: '#7AD2DCFF',
borderRadius: 4,
},
separator: {
height: 1,
backgroundColor: 'black',
marginVertical: 5,
},
closeButton: {
padding: 5,
},
modalBody: {
flex: 1,
},
});
//# sourceMappingURL=MessagesModal.js.map