From 0561794c67d827c918029f2e06572fd03b4531fd Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 22 Jun 2021 18:51:57 -0400
Subject: Finish poc for for video streaming

---
 src/components/moments/MomentPostContent.tsx |  41 +++-
 src/screens/chat/ChatListScreen.tsx          | 288 ++++++++++++---------------
 src/screens/profile/IndividualMoment.tsx     |   1 +
 3 files changed, 157 insertions(+), 173 deletions(-)

(limited to 'src')

diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index aca2999c..27a68e47 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -3,6 +3,7 @@ import React, {useContext, useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import Animated, {EasingNode} from 'react-native-reanimated';
+import Video from 'react-native-video';
 import {useDispatch, useStore} from 'react-redux';
 import {MomentContext} from '../../screens/profile/IndividualMoment';
 import {RootState} from '../../store/rootReducer';
@@ -54,6 +55,12 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
     useState<MomentCommentPreviewType | null>(moment.comment_preview);
   const {keyboardVisible, scrollTo} = useContext(MomentContext);
   const [hideText, setHideText] = useState(false);
+  const isVideo = !(
+    moment.moment_url.endsWith('jpg') ||
+    moment.moment_url.endsWith('JPG') ||
+    moment.moment_url.endsWith('PNG') ||
+    moment.moment_url.endsWith('png')
+  );
 
   useEffect(() => {
     setTags(momentTags);
@@ -83,12 +90,32 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
           setVisible(!visible);
           setFadeValue(new Animated.Value(0));
         }}>
-        <Image
-          ref={imageRef}
-          style={styles.image}
-          source={{uri: moment.moment_url}}
-          resizeMode={'cover'}
-        />
+        {isVideo ? (
+          <Video
+            // ref={imageRef}
+            source={{
+              uri: moment.moment_url,
+            }}
+            // 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={1}
+            style={styles.image}
+            // style={styles.video}
+          />
+        ) : (
+          <Image
+            ref={imageRef}
+            style={styles.image}
+            source={{uri: moment.moment_url}}
+            resizeMode={'cover'}
+          />
+        )}
         {tags.length > 0 && (
           <Image
             source={require('../../assets/icons/tag_indicate.png')}
@@ -96,7 +123,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
           />
         )}
       </TouchableWithoutFeedback>
-      {visible && (
+      {visible && !isVideo && (
         <Animated.View style={[styles.tapTag, {opacity: fadeValue}]}>
           <MomentTags
             editing={false}
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/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index f8113aba..cc176cd3 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -9,6 +9,7 @@ import {AVATAR_DIM} from '../../constants';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootreducer';
 import {MomentPostType} from '../../types';
+import Video from 'react-native-video';
 import {
   isIPhoneX,
   normalize,
-- 
cgit v1.2.3-70-g09d2