Merge pull request #507 from shravyaramesh/tma985-moment-view-count

[TMA-985] Moment view count

1 files changed, 24 insertions, 3 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 29b82cec..0504052b 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -42,12 +42,14 @@ interface MomentPostProps {
   moment: MomentPostType;
   userXId: string | undefined;
   screenType: ScreenType;
+  updateMomentViewCount: () => void;
 }
 
 const MomentPost: React.FC<MomentPostProps> = ({
   moment,
   userXId,
   screenType,
+  updateMomentViewCount,
 }) => {
   const navigation = useNavigation();
   const dispatch = useDispatch();
@@ -192,11 +194,18 @@ const MomentPost: React.FC<MomentPostProps> = ({
             screenType={screenType}
             editable={false}
           />
-          <Text style={styles.headerText}>{user.username}</Text>
+          <View style={styles.profilePreviewContainer}>
+            <Text style={styles.headerText}>{user.username}</Text>
+            <Text style={styles.viewCount}>
+              {moment.view_count <= 9999
+                ? `${moment.view_count} Views`
+                : `${(moment.view_count / 1000).toFixed(1)}K Views`}
+            </Text>
+          </View>
         </TouchableOpacity>
       </View>
     ),
-    [user.username],
+    [user.username, moment.view_count],
   );
 
   const momentMedia = isVideo ? (
@@ -216,6 +225,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
           setAspectRatio(width / height);
         }}
         paused={moment.moment_id !== currentVisibleMomentId}
+        onEnd={updateMomentViewCount}
       />
     </View>
   ) : (
@@ -387,7 +397,17 @@ const styles = StyleSheet.create({
     fontSize: 15,
     fontWeight: 'bold',
     color: 'white',
-    paddingHorizontal: '3%',
+  },
+  viewCount: {
+    height: normalize(12),
+    left: 0,
+    top: '8%',
+    fontSize: 11,
+    fontWeight: '600',
+    lineHeight: 13,
+    letterSpacing: 0.08,
+    textAlign: 'left',
+    color: '#fff',
   },
   header: {
     alignItems: 'center',
@@ -430,6 +450,7 @@ const styles = StyleSheet.create({
     width: SCREEN_WIDTH,
     height: SCREEN_HEIGHT,
   },
+  profilePreviewContainer: {paddingHorizontal: '3%'},
 });
 
 export default MomentPost;