diff options
| -rw-r--r-- | src/screens/chat/ChatListScreen.tsx | 288 | ||||
| -rw-r--r-- | src/screens/profile/CaptionScreen.tsx | 4 |
2 files changed, 124 insertions, 168 deletions
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 08b41151..0f5d8073 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -1,10 +1,26 @@ +import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; -import React from 'react'; -import {StyleSheet} from 'react-native'; -import {SafeAreaView} from 'react-native-safe-area-context'; -import Video from 'react-native-video'; +import React, {useContext, useEffect, useMemo, useState} from 'react'; +import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; +import {useStore} from 'react-redux'; +import {ChannelList, Chat} from 'stream-chat-react-native'; +import {ChatContext} from '../../App'; +import {TabsGradient} from '../../components'; +import EmptyContentView from '../../components/common/EmptyContentView'; +import {ChannelPreview, MessagesHeader} from '../../components/messages'; import {MainStackParams} from '../../routes'; -import {SCREEN_WIDTH} from '../../utils'; +import {RootState} from '../../store/rootReducer'; +import { + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalReactionType, + LocalUserType, +} from '../../types'; +import {connectChatAccount, HeaderHeight} from '../../utils'; +import NewChatModal from './NewChatModal'; type ChatListScreenNavigationProp = StackNavigationProp< MainStackParams, @@ -13,174 +29,114 @@ type ChatListScreenNavigationProp = StackNavigationProp< interface ChatListScreenProps { navigation: ChatListScreenNavigationProp; } - +/* + * Screen that displays all of the user's active conversations. + */ const ChatListScreen: React.FC<ChatListScreenProps> = () => { + const {chatClient} = useContext(ChatContext); + const [modalVisible, setChatModalVisible] = useState(false); + const state: RootState = useStore().getState(); + const loggedInUserId = state.user.user.userId; + const tabbarHeight = useBottomTabBarHeight(); + + const memoizedFilters = useMemo( + () => ({ + members: {$in: [loggedInUserId]}, + type: 'messaging', + }), + [], + ); + + const chatTheme = { + channelListMessenger: { + flatListContent: { + backgroundColor: 'white', + paddingBottom: tabbarHeight + HeaderHeight + 20, + }, + }, + }; + + useEffect(() => { + if (loggedInUserId) { + connectChatAccount(loggedInUserId, chatClient) + .then((success) => { + if (!success) { + Alert.alert('Something wrong with chat'); + } + }) + .catch((err) => { + console.log('Error connecting to chat: ', err); + Alert.alert('Something wrong with chat'); + }); + } + }, [loggedInUserId]); + return ( - <SafeAreaView> - <Video - // HLS m3u8 version - source={{ - uri: 'https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8', - }} - // mp4 version - // source={{ - // uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', - // }} - volume={5} - style={styles.video} - /> - </SafeAreaView> + <View style={styles.background}> + <SafeAreaView> + <StatusBar barStyle="dark-content" /> + <MessagesHeader + createChannel={() => { + setChatModalVisible(true); + }} + /> + <Chat client={chatClient} style={chatTheme}> + <View style={styles.chatContainer}> + <ChannelList< + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalReactionType, + LocalUserType + > + filters={memoizedFilters} + options={{ + presence: true, + state: true, + watch: true, + }} + sort={{last_message_at: -1}} + maxUnreadCount={99} + Preview={ChannelPreview} + EmptyStateIndicator={() => { + return <EmptyContentView viewType={'ChatList'} />; + }} + /> + </View> + </Chat> + <NewChatModal {...{modalVisible, setChatModalVisible}} /> + </SafeAreaView> + <TabsGradient /> + </View> ); }; const styles = StyleSheet.create({ - video: { - width: SCREEN_WIDTH, - aspectRatio: 2, + background: { + flex: 1, + backgroundColor: 'white', + }, + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + placeholder: { + fontSize: 14, + fontWeight: 'bold', + marginBottom: 10, + }, + button: { + backgroundColor: '#CCE4FC', + padding: 15, + borderRadius: 5, + }, + chatContainer: { + height: '100%', + marginTop: 10, }, }); export default ChatListScreen; - -// import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; -// import {StackNavigationProp} from '@react-navigation/stack'; -// import React, {useContext, useEffect, useMemo, useState} from 'react'; -// import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; -// import {useStore} from 'react-redux'; -// import {ChannelList, Chat} from 'stream-chat-react-native'; -// import {ChatContext} from '../../App'; -// import {TabsGradient} from '../../components'; -// import {ChannelPreview, MessagesHeader} from '../../components/messages'; -// import {MainStackParams} from '../../routes'; -// import {RootState} from '../../store/rootReducer'; -// import EmptyContentView from '../../components/common/EmptyContentView'; -// import { -// LocalAttachmentType, -// LocalChannelType, -// LocalCommandType, -// LocalEventType, -// LocalMessageType, -// LocalReactionType, -// LocalUserType, -// } from '../../types'; -// import {connectChatAccount, HeaderHeight} from '../../utils'; -// import NewChatModal from './NewChatModal'; - -// type ChatListScreenNavigationProp = StackNavigationProp< -// MainStackParams, -// 'ChatList' -// >; -// interface ChatListScreenProps { -// navigation: ChatListScreenNavigationProp; -// } -// /* -// * Screen that displays all of the user's active conversations. -// */ -// const ChatListScreen: React.FC<ChatListScreenProps> = () => { -// const {chatClient} = useContext(ChatContext); -// const [modalVisible, setChatModalVisible] = useState(false); -// const state: RootState = useStore().getState(); -// const loggedInUserId = state.user.user.userId; -// const tabbarHeight = useBottomTabBarHeight(); - -// const memoizedFilters = useMemo( -// () => ({ -// members: {$in: [loggedInUserId]}, -// type: 'messaging', -// }), -// [], -// ); - -// const chatTheme = { -// channelListMessenger: { -// flatListContent: { -// backgroundColor: 'white', -// paddingBottom: tabbarHeight + HeaderHeight + 20, -// }, -// }, -// }; - -// useEffect(() => { -// if (loggedInUserId) { -// connectChatAccount(loggedInUserId, chatClient) -// .then((success) => { -// if (!success) { -// Alert.alert('Something wrong with chat'); -// } -// }) -// .catch((err) => { -// console.log('Error connecting to chat: ', err); -// Alert.alert('Something wrong with chat'); -// }); -// } -// }, [loggedInUserId]); - -// return ( -// <View style={styles.background}> -// <SafeAreaView> -// <StatusBar barStyle="dark-content" /> -// <MessagesHeader -// createChannel={() => { -// setChatModalVisible(true); -// }} -// /> -// <Chat client={chatClient} style={chatTheme}> -// <View style={styles.chatContainer}> -// <ChannelList< -// LocalAttachmentType, -// LocalChannelType, -// LocalCommandType, -// LocalEventType, -// LocalMessageType, -// LocalReactionType, -// LocalUserType -// > -// filters={memoizedFilters} -// options={{ -// presence: true, -// state: true, -// watch: true, -// }} -// sort={{last_message_at: -1}} -// maxUnreadCount={99} -// Preview={ChannelPreview} -// EmptyStateIndicator={() => { -// return <EmptyContentView viewType={'ChatList'} />; -// }} -// /> -// </View> -// </Chat> -// <NewChatModal {...{modalVisible, setChatModalVisible}} /> -// </SafeAreaView> -// <TabsGradient /> -// </View> -// ); -// }; - -// const styles = StyleSheet.create({ -// background: { -// flex: 1, -// backgroundColor: 'white', -// }, -// container: { -// flex: 1, -// justifyContent: 'center', -// alignItems: 'center', -// }, -// placeholder: { -// fontSize: 14, -// fontWeight: 'bold', -// marginBottom: 10, -// }, -// button: { -// backgroundColor: '#CCE4FC', -// padding: 15, -// borderRadius: 5, -// }, -// chatContainer: { -// height: '100%', -// marginTop: 10, -// }, -// }); - -// export default ChatListScreen; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 48724620..9326ba6a 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -15,6 +15,7 @@ import { } from 'react-native'; import {MentionInput} from 'react-native-controlled-mentions'; import {Button, normalize} from 'react-native-elements'; +import Video from 'react-native-video'; import {useDispatch, useSelector} from 'react-redux'; import FrontArrow from '../../assets/icons/front-arrow.svg'; import {SearchBackground} from '../../components'; @@ -205,8 +206,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { {...{title: moment ? moment.moment_category : title ?? ''}} /> {isMediaAVideo ? ( - // <Video uri={mediaUri} style={styles.media} /> - <></> + <Video source={{uri: mediaUri}} style={styles.media} /> ) : ( <Image style={styles.media} |