From a6bc1f1a06a08bd842ba0b3bd00a88cea9bd9971 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 24 Jun 2021 18:50:00 -0400
Subject: Fix video layout while viewing

---
 src/components/moments/MomentPost.tsx | 36 ++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

(limited to 'src')

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>
           ) : (
-- 
cgit v1.2.3-70-g09d2