Merge pull request #472 from TaggiD-Inc/poc-video

[POC] PoC Video

1 files changed, 93 insertions, 39 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 6eccf5ab..319542f9 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {
   Image,
   KeyboardAvoidingView,
@@ -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';
@@ -71,7 +72,16 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const [momentTagId, setMomentTagId] = useState<string>('');
 
   const imageRef = useRef(null);
-  const {keyboardVisible} = useContext(MomentContext);
+  const videoRef = useRef<Video>(null);
+  const {keyboardVisible, currentVisibleMomentId} = useContext(MomentContext);
+  const isVideo = !(
+    moment.moment_url.endsWith('jpg') ||
+    moment.moment_url.endsWith('JPG') ||
+    moment.moment_url.endsWith('PNG') ||
+    moment.moment_url.endsWith('png') ||
+    moment.moment_url.endsWith('GIF') ||
+    moment.moment_url.endsWith('gif')
+  );
 
   /*
    * Load tags on initial render to pass tags data to moment header and content
@@ -126,13 +136,15 @@ const MomentPost: React.FC<MomentPostProps> = ({
    * determine if image must be displayed in full screen or not
    */
   useEffect(() => {
-    Image.getSize(
-      moment.moment_url,
-      (w, h) => {
-        setAspectRatio(w / h);
-      },
-      (err) => console.log(err),
-    );
+    if (!isVideo) {
+      Image.getSize(
+        moment.moment_url,
+        (w, h) => {
+          setAspectRatio(w / h);
+        },
+        (err) => console.log(err),
+      );
+    }
   }, []);
 
   /*
@@ -155,22 +167,31 @@ const MomentPost: React.FC<MomentPostProps> = ({
     }
   }, [keyboardVisible, hideText]);
 
-  const MomentPosterPreview = () => (
-    <View style={styles.momentPosterContainer}>
-      <TouchableOpacity
-        onPress={() =>
-          navigateToProfile(state, dispatch, navigation, screenType, user)
-        }
-        style={styles.header}>
-        <TaggAvatar
-          style={styles.avatar}
-          userXId={userXId}
-          screenType={screenType}
-          editable={false}
-        />
-        <Text style={styles.headerText}>{user.username}</Text>
-      </TouchableOpacity>
-    </View>
+  useEffect(() => {
+    if (moment.moment_id !== currentVisibleMomentId) {
+      videoRef.current?.seek(0);
+    }
+  }, [currentVisibleMomentId]);
+
+  const momentPosterPreview = useMemo(
+    () => (
+      <View style={styles.momentPosterContainer}>
+        <TouchableOpacity
+          onPress={() =>
+            navigateToProfile(state, dispatch, navigation, screenType, user)
+          }
+          style={styles.header}>
+          <TaggAvatar
+            style={styles.avatar}
+            userXId={userXId}
+            screenType={screenType}
+            editable={false}
+          />
+          <Text style={styles.headerText}>{user.username}</Text>
+        </TouchableOpacity>
+      </View>
+    ),
+    [user.username],
   );
 
   return (
@@ -178,17 +199,44 @@ 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}
+              style={[
+                styles.media,
+                {
+                  height: SCREEN_WIDTH / aspectRatio,
+                },
+              ]}>
+              <Video
+                ref={videoRef}
+                source={{
+                  uri: moment.moment_url,
+                }}
+                volume={1}
+                style={[
+                  styles.media,
+                  {
+                    height: SCREEN_WIDTH / aspectRatio,
+                  },
+                ]}
+                repeat={true}
+                resizeMode={'contain'}
+                onLoad={(response) => {
+                  const {width, height} = response.naturalSize;
+                  setAspectRatio(width / height);
+                }}
+                paused={moment.moment_id !== currentVisibleMomentId}
+              />
+            </View>
+          ) : (
+            <Image
+              source={{uri: moment.moment_url}}
+              style={styles.media}
+              resizeMode={'contain'}
+              ref={imageRef}
+            />
+          )}
         </View>
         {visible && (
           <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
@@ -233,9 +281,13 @@ 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 />
+                {momentPosterPreview}
                 {!hideText && (
                   <>
                     {moment.caption !== '' &&
@@ -281,8 +333,9 @@ const MomentPost: React.FC<MomentPostProps> = ({
 };
 
 const styles = StyleSheet.create({
-  image: {
+  media: {
     zIndex: 0,
+    flex: 1,
   },
   imageContainer: {
     height: SCREEN_HEIGHT,
@@ -340,6 +393,7 @@ const styles = StyleSheet.create({
   },
   commentsCountContainer: {
     position: 'absolute',
+    zIndex: 3,
     right: '2%',
     bottom: SCREEN_HEIGHT * 0.12,
   },