Fix video layout while viewing

1 files changed, 27 insertions, 9 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index f030c41e..770cdcee 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -133,13 +133,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),
+      );
+    }
   }, []);
 
   /*
@@ -186,15 +188,31 @@ const MomentPost: React.FC<MomentPostProps> = ({
       <View style={styles.mainContainer}>
         <View style={styles.imageContainer}>
           {isVideo ? (
-            <View ref={imageRef}>
+            <View
+              ref={imageRef}
+              style={[
+                styles.media,
+                {
+                  height: SCREEN_WIDTH / aspectRatio,
+                },
+              ]}>
               <Video
                 source={{
                   uri: moment.moment_url,
                 }}
                 volume={1}
-                style={styles.media}
+                style={[
+                  styles.media,
+                  {
+                    height: SCREEN_WIDTH / aspectRatio,
+                  },
+                ]}
                 repeat={true}
                 resizeMode={'contain'}
+                onLoad={(response) => {
+                  const {width, height} = response.naturalSize;
+                  setAspectRatio(width / height);
+                }}
               />
             </View>
           ) : (