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

[POC] PoC Video

1 files changed, 101 insertions, 94 deletions

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 15926b5a..201caf49 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -1,16 +1,9 @@
 import {RouteProp} from '@react-navigation/core';
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useRef, useState} from 'react';
-import {
-  Image,
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
+import {Image, StyleSheet, TouchableWithoutFeedback, View} from 'react-native';
 import {Button} from 'react-native-elements';
+import Video from 'react-native-video';
 import {MainStackParams} from 'src/routes';
 import {
   CaptionScreenHeader,
@@ -30,7 +23,7 @@ interface TagFriendsScreenProps {
   route: TagFriendsScreenRouteProps;
 }
 const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
-  const {imagePath, selectedTags} = route.params;
+  const {media, selectedTags} = route.params;
   const navigation = useNavigation();
   const imageRef = useRef(null);
   const [tags, setTags] = useState<MomentTagType[]>([]);
@@ -54,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) {
+    if (imageRef && imageRef.current && !media.isVideo) {
       Image.getSize(
-        imagePath,
+        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),
       );
@@ -82,65 +79,85 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
 
   return (
     <SearchBackground>
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          style={styles.flex}>
-          <View style={styles.contentContainer}>
-            <View style={styles.buttonsContainer}>
-              <Button
-                title="Cancel"
-                buttonStyle={styles.button}
-                onPress={() => navigation.goBack()}
-              />
-              <Button
-                title="Done"
-                titleStyle={styles.shareButtonTitle}
-                buttonStyle={styles.button}
-                onPress={handleDone}
+      <View style={styles.contentContainer}>
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Cancel"
+            buttonStyle={styles.button}
+            onPress={() => navigation.goBack()}
+          />
+          <Button
+            title="Done"
+            titleStyle={styles.shareButtonTitle}
+            buttonStyle={styles.button}
+            onPress={handleDone}
+          />
+        </View>
+        <CaptionScreenHeader
+          style={styles.header}
+          title={'Tap on photo to tag friends!'}
+        />
+        <TouchableWithoutFeedback
+          onPress={() =>
+            navigation.navigate('TagSelectionScreen', {
+              selectedTags: tags,
+            })
+          }>
+          {media.isVideo ? (
+            <View
+              style={{
+                width: imageWidth,
+                height: imageHeight,
+                marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
+                marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
+              }}
+              ref={imageRef}>
+              <Video
+                style={{
+                  width: imageWidth,
+                  height: imageHeight,
+                }}
+                source={{uri: media.uri}}
+                repeat={true}
+                onLoad={(response) => {
+                  const {width, height, orientation} = response.naturalSize;
+                  // portrait will flip width and height
+                  if (orientation === 'portrait') {
+                    setMediaDimensions(height, width);
+                  } else {
+                    setMediaDimensions(width, height);
+                  }
+                }}
               />
             </View>
-            <CaptionScreenHeader
-              style={styles.header}
-              title={'Tap on photo to tag friends!'}
+          ) : (
+            <Image
+              ref={imageRef}
+              style={{
+                width: imageWidth,
+                height: imageHeight,
+                marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
+                marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
+              }}
+              source={{uri: media.uri}}
             />
-            <TouchableWithoutFeedback
-              onPress={() =>
-                navigation.navigate('TagSelectionScreen', {
-                  selectedTags: tags,
-                })
-              }>
-              <Image
-                ref={imageRef}
-                style={[
-                  {
-                    width: imageWidth,
-                    height: imageHeight,
-                    marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
-                    marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
-                  },
-                  styles.image,
-                ]}
-                source={{uri: imagePath}}
-              />
-            </TouchableWithoutFeedback>
-            {tags.length !== 0 && (
-              <MomentTags
-                tags={tags}
-                setTags={setTags}
-                editing={true}
-                imageRef={imageRef}
-                deleteFromList={(user) =>
-                  setTags(tags.filter((tag) => tag.user.id !== user.id))
-                }
-              />
-            )}
-            <View style={styles.footerContainer}>
-              <TagFriendsFooter tags={tags} setTags={setTags} />
-            </View>
-          </View>
-        </KeyboardAvoidingView>
-      </TouchableWithoutFeedback>
+          )}
+        </TouchableWithoutFeedback>
+        {tags.length !== 0 && (
+          <MomentTags
+            tags={tags}
+            setTags={setTags}
+            editing={true}
+            imageRef={imageRef}
+            deleteFromList={(user) =>
+              setTags(tags.filter((tag) => tag.user.id !== user.id))
+            }
+          />
+        )}
+        <View style={styles.footerContainer}>
+          <TagFriendsFooter tags={tags} setTags={setTags} />
+        </View>
+      </View>
     </SearchBackground>
   );
 };
@@ -148,7 +165,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
 const styles = StyleSheet.create({
   contentContainer: {
     paddingTop: StatusBarHeight,
-    justifyContent: 'flex-end',
   },
   buttonsContainer: {
     flexDirection: 'row',
@@ -166,19 +182,10 @@ const styles = StyleSheet.create({
   header: {
     marginVertical: 20,
   },
-  image: {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;