Squashed commit of the following:

commit b6e4676b6ea262580453963ed6cfd85932d32341
Author: Ivan Chen <ivan@tagg.id>
Date:   Mon Jun 21 19:04:08 2021 -0400

    Add library, Add sample code

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;