From 63bef47bffd2893f3013a02f71383c9c0a27881f Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 24 Jun 2021 18:20:15 -0400
Subject: Fix moment comment count, Add video support

---
 src/components/comments/CommentsCount.tsx | 15 ++++++----
 src/components/moments/MomentPost.tsx     | 47 ++++++++++++++++++++++---------
 src/constants/strings.ts                  |  2 +-
 src/screens/moments/TagFriendsScreen.tsx  |  6 ----
 4 files changed, 45 insertions(+), 25 deletions(-)

(limited to 'src')

diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
index 90514193..d4a93bdd 100644
--- a/src/components/comments/CommentsCount.tsx
+++ b/src/components/comments/CommentsCount.tsx
@@ -3,27 +3,32 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import CommentsIcon from '../../assets/icons/moment-comment-icon.svg';
-import {MomentPostType, ScreenType} from '../../types';
+import {ScreenType} from '../../types';
 import {normalize} from '../../utils';
 
 interface CommentsCountProps {
-  moment: MomentPostType;
+  momentId: string;
+  count: number;
   screenType: ScreenType;
 }
 
-const CommentsCount: React.FC<CommentsCountProps> = ({moment, screenType}) => {
+const CommentsCount: React.FC<CommentsCountProps> = ({
+  momentId,
+  count,
+  screenType,
+}) => {
   const navigation = useNavigation();
   return (
     <TouchableOpacity
       style={styles.countContainer}
       onPress={() =>
         navigation.navigate('MomentCommentsScreen', {
-          moment_id: moment.moment_id,
+          moment_id: momentId,
           screenType,
         })
       }>
       <CommentsIcon width={25} height={25} />
-      <Text style={styles.count}>{moment.comments_count}</Text>
+      <Text style={styles.count}>{count}</Text>
     </TouchableOpacity>
   );
 };
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 6eccf5ab..f030c41e 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -12,6 +12,7 @@ import {
   View,
 } from 'react-native';
 import Animated, {EasingNode} from 'react-native-reanimated';
+import Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {headerBarOptions} from '../../routes';
 import {MomentContext} from '../../screens/profile/IndividualMoment';
@@ -72,6 +73,12 @@ const MomentPost: React.FC<MomentPostProps> = ({
 
   const imageRef = useRef(null);
   const {keyboardVisible} = useContext(MomentContext);
+  const isVideo = !(
+    moment.moment_url.endsWith('jpg') ||
+    moment.moment_url.endsWith('JPG') ||
+    moment.moment_url.endsWith('PNG') ||
+    moment.moment_url.endsWith('png')
+  );
 
   /*
    * Load tags on initial render to pass tags data to moment header and content
@@ -178,17 +185,26 @@ const MomentPost: React.FC<MomentPostProps> = ({
       <StatusBar barStyle={'light-content'} />
       <View style={styles.mainContainer}>
         <View style={styles.imageContainer}>
-          <Image
-            source={{uri: moment.moment_url}}
-            style={[
-              styles.image,
-              {
-                height: SCREEN_WIDTH / aspectRatio,
-              },
-            ]}
-            resizeMode={'contain'}
-            ref={imageRef}
-          />
+          {isVideo ? (
+            <View ref={imageRef}>
+              <Video
+                source={{
+                  uri: moment.moment_url,
+                }}
+                volume={1}
+                style={styles.media}
+                repeat={true}
+                resizeMode={'contain'}
+              />
+            </View>
+          ) : (
+            <Image
+              source={{uri: moment.moment_url}}
+              style={styles.media}
+              resizeMode={'contain'}
+              ref={imageRef}
+            />
+          )}
         </View>
         {visible && (
           <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
@@ -233,7 +249,11 @@ const MomentPost: React.FC<MomentPostProps> = ({
                   />
                 )}
                 <View style={styles.commentsCountContainer}>
-                  <CommentsCount moment={moment} screenType={screenType} />
+                  <CommentsCount
+                    momentId={moment.moment_id}
+                    count={commentCount}
+                    screenType={screenType}
+                  />
                 </View>
                 <MomentPosterPreview />
                 {!hideText && (
@@ -281,8 +301,9 @@ const MomentPost: React.FC<MomentPostProps> = ({
 };
 
 const styles = StyleSheet.create({
-  image: {
+  media: {
     zIndex: 0,
+    flex: 1,
   },
   imageContainer: {
     height: SCREEN_HEIGHT,
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index a1064f49..112bc546 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -77,7 +77,7 @@ You've been tagged by ${invitee}. Follow the instructions below to skip the line
 Sign up and use this code to get in: ${inviteCode}\n ${APP_STORE_LINK}`;
 export const SUCCESS_LAST_CONTACT_INVITE = 'Done! That was your last invite, hope you used it wisely!';
 export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`;
-export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!';
+export const SUCCESS_PIC_UPLOAD = 'Beautiful, the Moment was uploaded successfully!';
 export const SUCCESS_PWD_RESET = 'Your password was reset successfully!';
 export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code';
 export const UP_TO_DATE = 'Up-to-Date!';
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index db7456bc..69118660 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -108,12 +108,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               />
             </View>
           ) : (
-            // <Image
-            //   ref={imageRef}
-            //   style={styles.media}
-            //   source={{uri: media.uri}}
-            //   resizeMode={'cover'}
-            // />
             <Image
               ref={imageRef}
               style={[
-- 
cgit v1.2.3-70-g09d2