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

4 files changed, 211 insertions, 122 deletions

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 7d6ce3a8..5679c1c7 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -345,6 +345,11 @@ PODS:
     - React-Core
   - react-native-splash-screen (3.2.0):
     - React
+  - react-native-video (5.1.1):
+    - React-Core
+    - react-native-video/Video (= 5.1.1)
+  - react-native-video/Video (5.1.1):
+    - React-Core
   - React-RCTActionSheet (0.63.3):
     - React-Core/RCTActionSheetHeaders (= 0.63.3)
   - React-RCTAnimation (0.63.3):
@@ -531,6 +536,7 @@ DEPENDENCIES:
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
+  - react-native-video (from `../node_modules/react-native-video`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
   - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
@@ -639,6 +645,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-splash-screen:
     :path: "../node_modules/react-native-splash-screen"
+  react-native-video:
+    :path: "../node_modules/react-native-video"
   React-RCTActionSheet:
     :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
@@ -745,6 +753,7 @@ SPEC CHECKSUMS:
   react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d
   react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
+  react-native-video: 0bb76b6d6b77da3009611586c7dbf817b947f30e
   React-RCTActionSheet: 53ea72699698b0b47a6421cb1c8b4ab215a774aa
   React-RCTAnimation: 1befece0b5183c22ae01b966f5583f42e69a83c2
   React-RCTBlob: 0b284339cbe4b15705a05e2313a51c6d8b51fa40
diff --git a/package.json b/package.json
index bc524f94..399a40ea 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@reduxjs/toolkit": "^1.4.0",
     "@stream-io/flat-list-mvcp": "^0.10.1",
     "@types/react-native-vector-icons": "^6.4.5",
+    "@types/react-native-video": "^5.0.6",
     "moment": "^2.29.1",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
@@ -59,6 +60,7 @@
     "react-native-splash-screen": "^3.2.0",
     "react-native-svg": "^12.1.0",
     "react-native-vector-icons": "^7.0.0",
+    "react-native-video": "^5.1.1",
     "react-promise-tracker": "^2.1.0",
     "react-redux": "^7.2.2",
     "reanimated-bottom-sheet": "^1.0.0-alpha.22",
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;
diff --git a/yarn.lock b/yarn.lock
index 9c1ebdf8..273dfed2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1335,6 +1335,14 @@
     "@types/react" "*"
     "@types/react-native" "*"
 
+"@types/react-native-video@^5.0.6":
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-native-video/-/react-native-video-5.0.6.tgz#1a84eff00820b8d3136dd6d6333ce471738293a6"
+  integrity sha512-elf7Y7qornIySK5yR9yOINtQcqXScSQoe9yz5Kuisq/IV5Kf3BprsNGHloRXT+WYVQflii6+EJwyAUs1R4izAw==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "*"
+
 "@types/react-native@*":
   version "0.64.10"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.10.tgz#5eb6a72c77ce0f7e6e14b19c61a6bc585975eef5"
@@ -2784,6 +2792,11 @@ electron-to-chromium@^1.3.723:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz#0728587f1b9b970ec9ffad932496429aef750d09"
   integrity sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==
 
+eme-encryption-scheme-polyfill@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.3.tgz#2ca6e06480e06cceb5e50efd27943ac46c959878"
+  integrity sha512-44CNFMsqzHdKHrzWxlS7xZ8KUHn5XutBqpmCuWzNIynmAyFInHrrD3ozv/RvK9ZhgV6QY6Easx8EWAmxteNodg==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
@@ -4860,6 +4873,11 @@ jws@^3.2.2:
     jwa "^1.4.1"
     safe-buffer "^5.0.1"
 
+keymirror@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/keymirror/-/keymirror-0.1.1.tgz#918889ea13f8d0a42e7c557250eee713adc95c35"
+  integrity sha1-kYiJ6hP40KQufFVyUO7nE63JXDU=
+
 kind-of@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44"
@@ -6588,6 +6606,15 @@ react-native-vector-icons@^7.0.0:
     prop-types "^15.7.2"
     yargs "^15.0.2"
 
+react-native-video@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-5.1.1.tgz#89a7989efeb8d404611c06154d1da227a745d7d8"
+  integrity sha512-zee8gRUrjPWRoZSEBiMebClqu1iAuCQNLjzqpmXFrRWEoJj7azM3BPqLQWJgsnfLiYUYGySeApC/G60THM5+tw==
+  dependencies:
+    keymirror "^0.1.1"
+    prop-types "^15.7.2"
+    shaka-player "^2.5.9"
+
 react-native@0.63.3:
   version "0.63.3"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.63.3.tgz#4a7f6540e049ff41810887bbd1125abc4672f3bf"
@@ -7130,6 +7157,13 @@ setprototypeof@1.1.1:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
   integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
 
+shaka-player@^2.5.9:
+  version "2.5.23"
+  resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-2.5.23.tgz#db92d1c6cf2314f0180a2cec11b0e2f2560336f5"
+  integrity sha512-3MC9k0OXJGw8AZ4n/ZNCZS2yDxx+3as5KgH6Tx4Q5TRboTBBCu6dYPI5vp1DxKeyU12MBN1Zcbs7AKzXv2EnCg==
+  dependencies:
+    eme-encryption-scheme-polyfill "^2.0.1"
+
 shallow-clone@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060"