Cleanup code, Add support for video tagging

1 files changed, 57 insertions, 61 deletions

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 570c3776..bda38651 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,58 +47,62 @@ 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={styles.media} ref={imageRef}>
+              <Video
+                style={styles.media}
+                source={{uri: media.uri}}
+                repeat={true}
               />
             </View>
-            <CaptionScreenHeader
-              style={styles.header}
-              title={'Tap on photo to tag friends!'}
+          ) : (
+            <Image
+              ref={imageRef}
+              style={styles.media}
+              source={{uri: media.uri}}
+              resizeMode={'cover'}
             />
-            <TouchableWithoutFeedback
-              onPress={() =>
-                navigation.navigate('TagSelectionScreen', {
-                  selectedTags: tags,
-                })
-              }>
-              <Image
-                ref={imageRef}
-                style={styles.image}
-                source={{uri: imagePath}}
-                resizeMode={'cover'}
-              />
-            </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>
   );
 };
@@ -113,7 +110,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
 const styles = StyleSheet.create({
   contentContainer: {
     paddingTop: StatusBarHeight,
-    justifyContent: 'flex-end',
   },
   buttonsContainer: {
     flexDirection: 'row',
@@ -131,7 +127,7 @@ const styles = StyleSheet.create({
   header: {
     marginVertical: 20,
   },
-  image: {
+  media: {
     position: 'relative',
     width: SCREEN_WIDTH,
     aspectRatio: 1,