aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/screens/chat/ChatListScreen.tsx288
1 files changed, 166 insertions, 122 deletions
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index 1df5c2da..08b41151 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,26 +1,10 @@
-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 React from 'react';
+import {StyleSheet} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import Video from 'react-native-video';
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';
+import {SCREEN_WIDTH} from '../../utils';
type ChatListScreenNavigationProp = StackNavigationProp<
MainStackParams,
@@ -29,114 +13,174 @@ 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]);
+const ChatListScreen: React.FC<ChatListScreenProps> = () => {
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>
+ <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>
);
};
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,
+ video: {
+ width: SCREEN_WIDTH,
+ aspectRatio: 2,
},
});
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;