From e4d73a338d7cffd92cc40e44629cc035337d6e3a Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 24 Jun 2021 18:43:13 -0400
Subject: Fix tagg layout issue, Cleanup css

---
 src/screens/moments/TagFriendsScreen.tsx | 88 +++++++++++++++-----------------
 1 file changed, 42 insertions(+), 46 deletions(-)

(limited to 'src')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 69118660..81415437 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -47,26 +47,30 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
     });
   };
 
+  const setMediaDimensions = (width: number, height: number) => {
+    const imageAspectRatio = width / height;
+
+    // aspectRatio: >= 1 [Landscape] [1:1]
+    if (imageAspectRatio >= 1) {
+      setImageWidth(SCREEN_WIDTH);
+      setImageHeight(SCREEN_WIDTH / imageAspectRatio);
+    }
+    // aspectRatio: < 1 [Portrait]
+    if (imageAspectRatio < 1) {
+      setImageHeight(SCREEN_WIDTH);
+      setImageWidth(SCREEN_WIDTH * imageAspectRatio);
+    }
+  };
+
   /*
-   * Calculating image width and height with respect to it's enclosing view's dimensions
+   * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images.
    */
   useEffect(() => {
     if (imageRef && imageRef.current) {
       Image.getSize(
         media.uri,
         (w, h) => {
-          const imageAspectRatio = w / h;
-
-          // aspectRatio: >= 1 [Landscape] [1:1]
-          if (imageAspectRatio >= 1) {
-            setImageWidth(SCREEN_WIDTH);
-            setImageHeight(SCREEN_WIDTH / imageAspectRatio);
-          }
-          // aspectRatio: < 1 [Portrait]
-          else if (imageAspectRatio < 1) {
-            setImageHeight(SCREEN_WIDTH);
-            setImageWidth(SCREEN_WIDTH * imageAspectRatio);
-          }
+          setMediaDimensions(w, h);
         },
         (err) => console.log(err),
       );
@@ -100,25 +104,36 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
             })
           }>
           {media.isVideo ? (
-            <View style={styles.media} ref={imageRef}>
+            <View
+              style={{
+                width: imageWidth,
+                height: imageHeight,
+                marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
+                marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
+              }}
+              ref={imageRef}>
               <Video
-                style={styles.media}
+                style={{
+                  width: imageWidth,
+                  height: imageHeight,
+                }}
                 source={{uri: media.uri}}
                 repeat={true}
+                onLoad={(response) => {
+                  const {width, height} = response.naturalSize;
+                  setMediaDimensions(width, height);
+                }}
               />
             </View>
           ) : (
             <Image
               ref={imageRef}
-              style={[
-                {
-                  width: imageWidth,
-                  height: imageHeight,
-                  marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
-                  marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
-                },
-                styles.media,
-              ]}
+              style={{
+                width: imageWidth,
+                height: imageHeight,
+                marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
+                marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
+              }}
               source={{uri: media.uri}}
             />
           )}
@@ -162,29 +177,10 @@ const styles = StyleSheet.create({
   header: {
     marginVertical: 20,
   },
-  // media: {
-  //   position: 'relative',
-  //   width: SCREEN_WIDTH,
-  //   aspectRatio: 1,
-  //   marginBottom: '3%',
-  // },
-  media: {
-    zIndex: 0,
-    justifyContent: 'center',
-    alignSelf: 'center',
-  },
-  text: {
-    position: 'relative',
-    backgroundColor: 'white',
-    width: '100%',
-    paddingHorizontal: '2%',
-    paddingVertical: '1%',
-    height: 60,
-  },
-  flex: {
-    flex: 1,
+  footerContainer: {
+    marginHorizontal: '5%',
+    marginTop: '3%',
   },
-  footerContainer: {marginHorizontal: '5%', marginTop: '3%'},
 });
 
 export default TagFriendsScreen;
-- 
cgit v1.2.3-70-g09d2