Merge pull request #514 from IvanIFChen/tma988-remove-positioned-tags-for-video-moments

[TMA-988] Remove Positioned Tags for Video Moments

5 files changed, 150 insertions, 16 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index e789a9bf..5dba5e69 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -15,6 +15,7 @@ import {
 import Animated, {EasingNode} from 'react-native-reanimated';
 import Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
+import {TaggedUsersDrawer} from '.';
 import {headerBarOptions} from '../../routes';
 import {MomentContext} from '../../screens/profile/IndividualMoment';
 import {deleteMomentTag, loadMomentTags} from '../../services';
@@ -61,6 +62,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const [tags, setTags] = useState<MomentTagType[]>([]);
   const [visible, setVisible] = useState(false);
   const [drawerVisible, setDrawerVisible] = useState(false);
+  const [taggedUsersVisible, setTaggedUsersVisible] = useState(false);
   const [hideText, setHideText] = useState(false);
 
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
@@ -199,6 +201,11 @@ const MomentPost: React.FC<MomentPostProps> = ({
   return (
     <>
       <StatusBar barStyle={'light-content'} />
+      <TaggedUsersDrawer
+        users={tags.map((tag) => tag.user)}
+        isOpen={taggedUsersVisible}
+        setIsOpen={setTaggedUsersVisible}
+      />
       <View style={styles.mainContainer}>
         <View style={styles.imageContainer}>
           {isVideo ? (
@@ -249,6 +256,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
           </Animated.View>
         )}
         <TouchableWithoutFeedback
+          disabled={isVideo}
           onPress={() => {
             setVisible(!visible);
             setFadeValue(new Animated.Value(0));
@@ -276,10 +284,16 @@ const MomentPost: React.FC<MomentPostProps> = ({
               keyboardVerticalOffset={-20}>
               <View style={styles.bottomContainer}>
                 {tags.length > 0 && (
-                  <Image
-                    source={require('../../assets/icons/tag_indicate.png')}
-                    style={styles.tagIcon}
-                  />
+                  <TouchableOpacity
+                    disabled={!isVideo}
+                    onPress={() =>
+                      setTaggedUsersVisible((prevState) => !prevState)
+                    }>
+                    <Image
+                      source={require('../../assets/icons/tag_indicate.png')}
+                      style={styles.tagIcon}
+                    />
+                  </TouchableOpacity>
                 )}
                 <View style={styles.commentsCountContainer}>
                   <CommentsCount
diff --git a/src/components/moments/TaggedUsersDrawer.tsx b/src/components/moments/TaggedUsersDrawer.tsx
new file mode 100644
index 00000000..86698d30
--- /dev/null
+++ b/src/components/moments/TaggedUsersDrawer.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {BottomDrawer, ProfilePreview} from '..';
+import {ProfilePreviewType, ScreenType} from '../../types';
+import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+
+interface TaggedUsersDrawerProps {
+  users: ProfilePreviewType[];
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+}
+const TaggedUsersDrawer: React.FC<TaggedUsersDrawerProps> = ({
+  users,
+  isOpen,
+  setIsOpen,
+}) => {
+  return (
+    <BottomDrawer
+      initialSnapPosition={isIPhoneX() ? '35%' : '40%'}
+      showHeader={false}
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}>
+      <View style={styles.mainContainer}>
+        <View style={styles.headerContainer}>
+          <Text style={styles.title}>Tagged Friends</Text>
+        </View>
+        <View style={styles.scrollViewContainer}>
+          <ScrollView
+            contentContainerStyle={styles.scrollView}
+            horizontal
+            showsHorizontalScrollIndicator={false}>
+            {users.map((profilePreview) => (
+              <ProfilePreview
+                previewType={'Suggested People Drawer'}
+                screenType={ScreenType.SuggestedPeople}
+                profilePreview={profilePreview}
+                setMFDrawer={setIsOpen}
+              />
+            ))}
+          </ScrollView>
+        </View>
+        <TouchableOpacity
+          style={styles.cancelButton}
+          onPress={() => setIsOpen(false)}>
+          <Text style={styles.cancelButtonText}>Cancel</Text>
+        </TouchableOpacity>
+      </View>
+    </BottomDrawer>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flexDirection: 'column',
+    backgroundColor: '#f9f9f9',
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT * 0.46,
+    borderTopRightRadius: normalize(13),
+    borderTopLeftRadius: normalize(13),
+    borderWidth: 0.5,
+    borderColor: '#fff',
+  },
+  headerContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: normalize(17),
+    shadowOffset: {width: 0, height: 2},
+    shadowRadius: 3,
+    shadowColor: '#000',
+    shadowOpacity: 0.15,
+    backgroundColor: '#fff',
+    borderTopRightRadius: normalize(13),
+    borderTopLeftRadius: normalize(13),
+  },
+  title: {
+    fontSize: normalize(18),
+    lineHeight: 20,
+    fontWeight: 'bold',
+  },
+  scrollViewContainer: {
+    height: isIPhoneX() ? 153 : 135,
+    shadowColor: 'rgb(125, 125, 125)',
+    marginTop: '1%',
+  },
+  scrollView: {
+    height: '95%',
+    padding: 0,
+    marginHorizontal: '5%',
+  },
+  cancelButton: {
+    backgroundColor: '#F0F0F0',
+    height: 100,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  cancelButtonText: {
+    top: isIPhoneX() ? '6%' : '7%',
+    color: '#698DD3',
+    fontSize: normalize(16),
+    fontWeight: '700',
+    lineHeight: normalize(20),
+    letterSpacing: normalize(0.1),
+  },
+});
+
+export default TaggedUsersDrawer;
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
index 95e5c75a..16c9aed2 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -3,4 +3,5 @@ export {default as CaptionScreenHeader} from './CaptionScreenHeader';
 export {default as Moment} from './Moment';
 export {default as TagFriendsFooter} from './TagFriendsFoooter';
 export {default as MomentPost} from './MomentPost';
+export {default as TaggedUsersDrawer} from './TaggedUsersDrawer';
 export {default as TrimmerPlayer} from './TrimmerPlayer';
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index fc3bccf2..d11f8049 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -188,13 +188,17 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
             />
           </View>
         </TouchableOpacity>
-        <TouchableWithoutFeedback style={styles.captionContainer}>
-          {tags.length === 0 ? (
-            <Text style={styles.header}>Tap on photo to tag friends!</Text>
-          ) : (
-            <Text style={styles.header}>Press and drag to move</Text>
-          )}
-        </TouchableWithoutFeedback>
+        {!media.isVideo ? (
+          <TouchableWithoutFeedback style={styles.headerContainer}>
+            {tags.length === 0 ? (
+              <Text style={styles.header}>Tap on photo to tag friends!</Text>
+            ) : (
+              <Text style={styles.header}>Press and drag to move</Text>
+            )}
+          </TouchableWithoutFeedback>
+        ) : (
+          <View style={styles.headerPlaceholder} />
+        )}
         <TouchableOpacity
           style={styles.buttonContainer}
           // Altering the opacity style of TouchableOpacity doesn't work,
@@ -213,7 +217,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
           </Text>
         </TouchableOpacity>
       </View>
-      {tags.length !== 0 && (
+      {tags.length !== 0 && !media.isVideo && (
         <MomentTags
           tags={tags}
           setTags={setTags}
@@ -260,12 +264,15 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'flex-end',
   },
-  captionContainer: {
+  headerContainer: {
     width: SCREEN_WIDTH,
     flexDirection: 'row',
     justifyContent: 'center',
     zIndex: 9999,
   },
+  headerPlaceholder: {
+    width: SCREEN_WIDTH * 0.5,
+  },
   shareButtonTitle: {
     fontWeight: 'bold',
     fontSize: 18,
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index eba3e4bf..7f77bdca 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -152,9 +152,9 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
 
   const formattedTags = () => {
     return tags.map((tag) => ({
-      x: tag.x,
-      y: tag.y,
-      z: tag.z,
+      x: isMediaAVideo ? 0 : tag.x,
+      y: isMediaAVideo ? 0 : tag.y,
+      z: isMediaAVideo ? 0 : tag.z,
       user_id: tag.user.id,
     }));
   };