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

[POC] PoC Video

13 files changed, 241 insertions, 149 deletions

diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx
index c49ace7d..8d396550 100644
--- a/src/components/camera/GalleryIcon.tsx
+++ b/src/components/camera/GalleryIcon.tsx
@@ -1,14 +1,12 @@
-import {useNavigation} from '@react-navigation/native';
 import React from 'react';
 import {Image, Text, TouchableOpacity, View} from 'react-native';
-import {ScreenType} from '../../types';
 import {navigateToImagePicker} from '../../utils/camera';
+import {Image as ImageType} from 'react-native-image-crop-picker';
 import {styles} from './styles';
 
 interface GalleryIconProps {
-  screenType: ScreenType;
-  title: string;
   mostRecentPhotoUri: string;
+  callback: (pic: ImageType) => void;
 }
 
 /*
@@ -16,14 +14,12 @@ interface GalleryIconProps {
  * On click, navigates to the image picker
  */
 export const GalleryIcon: React.FC<GalleryIconProps> = ({
-  screenType,
-  title,
   mostRecentPhotoUri,
+  callback,
 }) => {
-  const navigation = useNavigation();
   return (
     <TouchableOpacity
-      onPress={() => navigateToImagePicker(navigation, screenType, title)}
+      onPress={() => navigateToImagePicker(callback)}
       style={styles.saveButton}>
       {mostRecentPhotoUri !== '' ? (
         <Image
diff --git a/src/components/camera/SaveButton.tsx b/src/components/camera/SaveButton.tsx
index 840cc804..0e220497 100644
--- a/src/components/camera/SaveButton.tsx
+++ b/src/components/camera/SaveButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Text, TouchableOpacity} from 'react-native';
 import SaveIcon from '../../assets/icons/camera/save.svg';
-import {downloadImage} from '../../utils/camera';
+import {saveImageToGallery} from '../../utils/camera';
 import {styles} from './styles';
 
 interface SaveButtonProps {
@@ -15,7 +15,7 @@ interface SaveButtonProps {
 export const SaveButton: React.FC<SaveButtonProps> = ({capturedImageURI}) => (
   <TouchableOpacity
     onPress={() => {
-      downloadImage(capturedImageURI);
+      saveImageToGallery(capturedImageURI);
     }}
     style={styles.saveButton}>
     <SaveIcon width={40} height={40} />
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 8a4ec082..33707d94 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -8,12 +8,11 @@ import {
   View,
 } from 'react-native';
 import {useDispatch} from 'react-redux';
-import {TAGG_LIGHT_BLUE} from '../../constants';
 import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
 import {postComment} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
 import {CommentThreadType, CommentType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, normalize} from '../../utils';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 import {CommentTextField} from './CommentTextField';
 import MentionInputControlled from './MentionInputControlled';
@@ -174,26 +173,6 @@ const styles = StyleSheet.create({
     flex: 1,
     maxHeight: 100,
   },
-  avatar: {
-    height: 35,
-    width: 35,
-    borderRadius: 30,
-    marginRight: 10,
-    marginLeft: '3%',
-    marginVertical: '2%',
-    alignSelf: 'flex-end',
-  },
-  submitButton: {
-    height: 35,
-    width: 35,
-    backgroundColor: TAGG_LIGHT_BLUE,
-    borderRadius: 999,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: '3%',
-    marginVertical: '2%',
-    alignSelf: 'flex-end',
-  },
   whiteBackround: {
     backgroundColor: '#fff',
   },
diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
index 6e92329c..6d86eb3f 100644
--- a/src/components/comments/CommentTextField.tsx
+++ b/src/components/comments/CommentTextField.tsx
@@ -1,8 +1,8 @@
 import React, {FC, ReactFragment} from 'react';
 import {
   NativeSyntheticEvent,
-  StyleSheet,
   StyleProp,
+  StyleSheet,
   Text,
   TextInput,
   TextInputSelectionChangeEventData,
@@ -10,22 +10,21 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {useSelector} from 'react-redux';
-import {TAGG_LIGHT_BLUE} from '../../constants';
-import {RootState} from '../../store/rootReducer';
 import {
+  MentionPartType,
   Part,
   PartType,
-  MentionPartType,
 } from 'react-native-controlled-mentions/dist/types';
 import {
   defaultMentionTextStyle,
   isMentionPartType,
 } from 'react-native-controlled-mentions/dist/utils';
-import {Avatar} from '../common';
-import {normalize} from '../../utils';
-
+import {useSelector} from 'react-redux';
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {RootState} from '../../store/rootReducer';
+import {normalize} from '../../utils';
+import {Avatar} from '../common';
 
 type CommentTextFieldProps = {
   containerStyle: StyleProp<ViewStyle>;
@@ -40,8 +39,6 @@ type CommentTextFieldProps = {
   ) => null;
   parts: Part[];
   addComment: () => any;
-  theme?: 'dark' | 'white';
-  keyboardVisible?: boolean;
   comment?: string;
 };
 
@@ -56,8 +53,6 @@ const CommentTextField: FC<CommentTextFieldProps> = ({
   handleSelectionChange,
   parts,
   addComment,
-  theme = 'white',
-  keyboardVisible = true,
   comment = '',
   ...textInputProps
 }) => {
@@ -99,20 +94,18 @@ const CommentTextField: FC<CommentTextFieldProps> = ({
             )}
           </Text>
         </TextInput>
-        {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && (
-          <View style={styles.submitButton}>
-            <TouchableOpacity
-              style={
-                comment === ''
-                  ? [styles.submitButton, styles.greyButton]
-                  : styles.submitButton
-              }
-              disabled={comment === ''}
-              onPress={addComment}>
-              <UpArrowIcon width={35} height={35} color={'white'} />
-            </TouchableOpacity>
-          </View>
-        )}
+        <View style={styles.submitButton}>
+          <TouchableOpacity
+            style={
+              comment === ''
+                ? [styles.submitButton, styles.greyButton]
+                : styles.submitButton
+            }
+            disabled={comment === ''}
+            onPress={addComment}>
+            <UpArrowIcon width={35} height={35} color={'white'} />
+          </TouchableOpacity>
+        </View>
       </View>
 
       {validateInput(keyboardText) &&
diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
index 90514193..d4a93bdd 100644
--- a/src/components/comments/CommentsCount.tsx
+++ b/src/components/comments/CommentsCount.tsx
@@ -3,27 +3,32 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import CommentsIcon from '../../assets/icons/moment-comment-icon.svg';
-import {MomentPostType, ScreenType} from '../../types';
+import {ScreenType} from '../../types';
 import {normalize} from '../../utils';
 
 interface CommentsCountProps {
-  moment: MomentPostType;
+  momentId: string;
+  count: number;
   screenType: ScreenType;
 }
 
-const CommentsCount: React.FC<CommentsCountProps> = ({moment, screenType}) => {
+const CommentsCount: React.FC<CommentsCountProps> = ({
+  momentId,
+  count,
+  screenType,
+}) => {
   const navigation = useNavigation();
   return (
     <TouchableOpacity
       style={styles.countContainer}
       onPress={() =>
         navigation.navigate('MomentCommentsScreen', {
-          moment_id: moment.moment_id,
+          moment_id: momentId,
           screenType,
         })
       }>
       <CommentsIcon width={25} height={25} />
-      <Text style={styles.count}>{moment.comments_count}</Text>
+      <Text style={styles.count}>{count}</Text>
     </TouchableOpacity>
   );
 };
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 94e772b6..7fa88f6e 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,7 +1,7 @@
 import {RouteProp} from '@react-navigation/core';
 import {useFocusEffect} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {default as React, useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {Image, StyleSheet, TouchableOpacity} from 'react-native';
 import {normalize} from 'react-native-elements';
 import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
@@ -25,7 +25,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
   route,
   navigation,
 }) => {
-  const {screenType, title, image} = route.params;
+  const {screenType, title, media} = route.params;
   const [aspectRatio, setAspectRatio] = useState<number>(1);
 
   // Stores the coordinates of the cropped image
@@ -34,7 +34,6 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
   const [y0, setY0] = useState<number>();
   const [y1, setY1] = useState<number>();
 
-  // Removes bottom navigation bar on current screen and add it back when navigating away
   useFocusEffect(
     useCallback(() => {
       navigation.dangerouslyGetParent()?.setOptions({
@@ -50,9 +49,9 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
 
   // Setting original aspect ratio of image
   useEffect(() => {
-    if (image.sourceURL) {
+    if (media.uri) {
       Image.getSize(
-        image.sourceURL,
+        media.uri,
         (w, h) => {
           setAspectRatio(w / h);
         },
@@ -67,10 +66,9 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
       x0 !== undefined &&
       x1 !== undefined &&
       y0 !== undefined &&
-      y1 !== undefined &&
-      image.sourceURL
+      y1 !== undefined
     ) {
-      PhotoManipulator.crop(image.sourceURL, {
+      PhotoManipulator.crop(media.uri, {
         x: x0,
         y: y1,
         width: Math.abs(x0 - x1),
@@ -80,7 +78,10 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
           navigation.navigate('CaptionScreen', {
             screenType,
             title: title,
-            image: {filename: croppedURL, path: croppedURL},
+            media: {
+              uri: croppedURL,
+              isVideo: false,
+            },
           });
         })
         .catch((err) => console.log('err: ', err));
@@ -88,13 +89,12 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
       x0 === undefined &&
       x1 === undefined &&
       y0 === undefined &&
-      y1 === undefined &&
-      image.sourceURL
+      y1 === undefined
     ) {
       navigation.navigate('CaptionScreen', {
         screenType,
         title: title,
-        image: {filename: image.sourceURL, path: image.sourceURL},
+        media,
       });
     }
   };
@@ -104,7 +104,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
    */
   const onMove = (position: IOnMove) => {
     Image.getSize(
-      image.path,
+      media.uri,
       (w, h) => {
         const x = position.positionX;
         const y = position.positionY;
@@ -154,7 +154,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         <Image
           style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}}
           source={{
-            uri: image.sourceURL,
+            uri: media.uri,
           }}
         />
       </ImageZoom>
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 4afacddb..d8a70353 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -1,4 +1,5 @@
-import React, {createRef, MutableRefObject, useEffect, useState} from 'react';
+import React, {createRef, RefObject, useEffect, useState} from 'react';
+import {Image, View} from 'react-native';
 import {MomentTagType, ProfilePreviewType} from '../../types';
 import TaggDraggable from '../taggs/TaggDraggable';
 import Draggable from './Draggable';
@@ -7,7 +8,7 @@ interface MomentTagsProps {
   editing: boolean;
   tags: MomentTagType[];
   setTags: (tag: MomentTagType[]) => void;
-  imageRef: MutableRefObject<null>;
+  imageRef: RefObject<Image>;
   deleteFromList?: (user: ProfilePreviewType) => void;
 }
 
@@ -21,14 +22,9 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   const [offset, setOffset] = useState([0, 0]);
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
   const [maxZIndex, setMaxZIndex] = useState(1);
-  const [draggableRefs, setDraggableRefs] = useState<
-    React.MutableRefObject<null>[]
-  >([]);
+  const [draggableRefs, setDraggableRefs] = useState<RefObject<View>[]>([]);
 
-  const updateTagPosition = (
-    ref: React.MutableRefObject<null>,
-    userId: string,
-  ) => {
+  const updateTagPosition = (ref: RefObject<Image>, userId: string) => {
     if (ref !== null && ref.current !== null) {
       ref.current.measure(
         (
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 9449271b..1e1cadce 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,6 +1,6 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
+import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
@@ -12,6 +12,8 @@ import UpIcon from '../../assets/icons/up_icon.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {MomentType, ScreenType} from '../../types';
 import {normalize, SCREEN_WIDTH} from '../../utils';
+import {navigateToVideoPicker} from '../../utils/camera';
+import ImagePicker from 'react-native-image-crop-picker';
 import MomentTile from './MomentTile';
 
 interface MomentProps {
@@ -41,6 +43,17 @@ const Moment: React.FC<MomentProps> = ({
 }) => {
   const navigation = useNavigation();
 
+  const navigateToCaptionScreenForVideo = (uri: string) => {
+    navigation.navigate('CaptionScreen', {
+      screenType,
+      title,
+      media: {
+        uri,
+        isVideo: true,
+      },
+    });
+  };
+
   const navigateToCameraScreen = () => {
     navigation.navigate('CameraScreen', {
       title,
@@ -84,7 +97,37 @@ const Moment: React.FC<MomentProps> = ({
               <PlusIcon
                 width={23}
                 height={23}
-                onPress={() => navigateToCameraScreen()}
+                onPress={() =>
+                  Alert.alert('Video Upload', 'pick one', [
+                    {
+                      text: 'gallery',
+                      onPress: () =>
+                        navigateToVideoPicker((vid) =>
+                          navigateToCaptionScreenForVideo(vid.path),
+                        ),
+                    },
+                    {
+                      text: 'camera (simulator will not work)',
+                      onPress: () =>
+                        ImagePicker.openCamera({
+                          mediaType: 'video',
+                        })
+                          .then((vid) => {
+                            if (vid.path) {
+                              navigateToCaptionScreenForVideo(vid.path);
+                            }
+                          })
+                          .catch((err) => console.error(err)),
+                    },
+                  ])
+                }
+                color={'black'}
+                style={styles.horizontalMargin}
+              />
+              <PlusIcon
+                width={23}
+                height={23}
+                onPress={navigateToCameraScreen}
                 color={TAGG_LIGHT_BLUE}
                 style={styles.horizontalMargin}
               />
@@ -114,7 +157,7 @@ const Moment: React.FC<MomentProps> = ({
             />
           ))}
         {(images === undefined || images.length === 0) && !userXId && (
-          <TouchableOpacity onPress={() => navigateToCameraScreen()}>
+          <TouchableOpacity onPress={navigateToCameraScreen}>
             <LinearGradient
               colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
               <View style={styles.defaultImage}>
@@ -150,9 +193,6 @@ const styles = StyleSheet.create({
     color: TAGG_LIGHT_BLUE,
     maxWidth: '70%',
   },
-  flexer: {
-    flex: 1,
-  },
   scrollContainer: {
     height: SCREEN_WIDTH / 3.25,
     backgroundColor: '#eee',
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 6eccf5ab..319542f9 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {
   Image,
   KeyboardAvoidingView,
@@ -12,6 +12,7 @@ import {
   View,
 } from 'react-native';
 import Animated, {EasingNode} from 'react-native-reanimated';
+import Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {headerBarOptions} from '../../routes';
 import {MomentContext} from '../../screens/profile/IndividualMoment';
@@ -71,7 +72,16 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const [momentTagId, setMomentTagId] = useState<string>('');
 
   const imageRef = useRef(null);
-  const {keyboardVisible} = useContext(MomentContext);
+  const videoRef = useRef<Video>(null);
+  const {keyboardVisible, currentVisibleMomentId} = useContext(MomentContext);
+  const isVideo = !(
+    moment.moment_url.endsWith('jpg') ||
+    moment.moment_url.endsWith('JPG') ||
+    moment.moment_url.endsWith('PNG') ||
+    moment.moment_url.endsWith('png') ||
+    moment.moment_url.endsWith('GIF') ||
+    moment.moment_url.endsWith('gif')
+  );
 
   /*
    * Load tags on initial render to pass tags data to moment header and content
@@ -126,13 +136,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),
+      );
+    }
   }, []);
 
   /*
@@ -155,22 +167,31 @@ const MomentPost: React.FC<MomentPostProps> = ({
     }
   }, [keyboardVisible, hideText]);
 
-  const MomentPosterPreview = () => (
-    <View style={styles.momentPosterContainer}>
-      <TouchableOpacity
-        onPress={() =>
-          navigateToProfile(state, dispatch, navigation, screenType, user)
-        }
-        style={styles.header}>
-        <TaggAvatar
-          style={styles.avatar}
-          userXId={userXId}
-          screenType={screenType}
-          editable={false}
-        />
-        <Text style={styles.headerText}>{user.username}</Text>
-      </TouchableOpacity>
-    </View>
+  useEffect(() => {
+    if (moment.moment_id !== currentVisibleMomentId) {
+      videoRef.current?.seek(0);
+    }
+  }, [currentVisibleMomentId]);
+
+  const momentPosterPreview = useMemo(
+    () => (
+      <View style={styles.momentPosterContainer}>
+        <TouchableOpacity
+          onPress={() =>
+            navigateToProfile(state, dispatch, navigation, screenType, user)
+          }
+          style={styles.header}>
+          <TaggAvatar
+            style={styles.avatar}
+            userXId={userXId}
+            screenType={screenType}
+            editable={false}
+          />
+          <Text style={styles.headerText}>{user.username}</Text>
+        </TouchableOpacity>
+      </View>
+    ),
+    [user.username],
   );
 
   return (
@@ -178,17 +199,44 @@ const MomentPost: React.FC<MomentPostProps> = ({
       <StatusBar barStyle={'light-content'} />
       <View style={styles.mainContainer}>
         <View style={styles.imageContainer}>
-          <Image
-            source={{uri: moment.moment_url}}
-            style={[
-              styles.image,
-              {
-                height: SCREEN_WIDTH / aspectRatio,
-              },
-            ]}
-            resizeMode={'contain'}
-            ref={imageRef}
-          />
+          {isVideo ? (
+            <View
+              ref={imageRef}
+              style={[
+                styles.media,
+                {
+                  height: SCREEN_WIDTH / aspectRatio,
+                },
+              ]}>
+              <Video
+                ref={videoRef}
+                source={{
+                  uri: moment.moment_url,
+                }}
+                volume={1}
+                style={[
+                  styles.media,
+                  {
+                    height: SCREEN_WIDTH / aspectRatio,
+                  },
+                ]}
+                repeat={true}
+                resizeMode={'contain'}
+                onLoad={(response) => {
+                  const {width, height} = response.naturalSize;
+                  setAspectRatio(width / height);
+                }}
+                paused={moment.moment_id !== currentVisibleMomentId}
+              />
+            </View>
+          ) : (
+            <Image
+              source={{uri: moment.moment_url}}
+              style={styles.media}
+              resizeMode={'contain'}
+              ref={imageRef}
+            />
+          )}
         </View>
         {visible && (
           <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
@@ -233,9 +281,13 @@ const MomentPost: React.FC<MomentPostProps> = ({
                   />
                 )}
                 <View style={styles.commentsCountContainer}>
-                  <CommentsCount moment={moment} screenType={screenType} />
+                  <CommentsCount
+                    momentId={moment.moment_id}
+                    count={commentCount}
+                    screenType={screenType}
+                  />
                 </View>
-                <MomentPosterPreview />
+                {momentPosterPreview}
                 {!hideText && (
                   <>
                     {moment.caption !== '' &&
@@ -281,8 +333,9 @@ const MomentPost: React.FC<MomentPostProps> = ({
 };
 
 const styles = StyleSheet.create({
-  image: {
+  media: {
     zIndex: 0,
+    flex: 1,
   },
   imageContainer: {
     height: SCREEN_HEIGHT,
@@ -340,6 +393,7 @@ const styles = StyleSheet.create({
   },
   commentsCountContainer: {
     position: 'absolute',
+    zIndex: 3,
     right: '2%',
     bottom: SCREEN_HEIGHT * 0.12,
   },
diff --git a/src/components/moments/legacy/MomentPostContent.tsx b/src/components/moments/legacy/MomentPostContent.tsx
index 6388be27..0e6e5eed 100644
--- a/src/components/moments/legacy/MomentPostContent.tsx
+++ b/src/components/moments/legacy/MomentPostContent.tsx
@@ -3,6 +3,7 @@ import React, {useContext, useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import Animated, {EasingNode} from 'react-native-reanimated';
+import Video from 'react-native-video';
 import {useDispatch, useStore} from 'react-redux';
 import {MomentContext} from '../../../screens/profile/IndividualMoment';
 import {RootState} from '../../../store/rootReducer';
@@ -32,14 +33,12 @@ interface MomentPostContentProps extends ViewProps {
   screenType: ScreenType;
   moment: MomentPostType;
   momentTags: MomentTagType[];
-  index: number;
 }
 const MomentPostContent: React.FC<MomentPostContentProps> = ({
   screenType,
   moment,
   style,
   momentTags,
-  index,
 }) => {
   const [tags, setTags] = useState<MomentTagType[]>(momentTags);
   const state: RootState = useStore().getState();
@@ -55,8 +54,14 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   );
   const [commentPreview, setCommentPreview] =
     useState<MomentCommentPreviewType | null>(moment.comment_preview);
-  const {keyboardVisible, scrollTo} = useContext(MomentContext);
+  const {keyboardVisible} = useContext(MomentContext);
   const [hideText, setHideText] = useState(false);
+  const isVideo = !(
+    moment.moment_url.endsWith('jpg') ||
+    moment.moment_url.endsWith('JPG') ||
+    moment.moment_url.endsWith('PNG') ||
+    moment.moment_url.endsWith('png')
+  );
 
   useEffect(() => {
     setTags(momentTags);
@@ -78,7 +83,6 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
       setHideText(false);
     }
   }, [keyboardVisible, hideText]);
-
   return (
     <View style={[styles.container, style]}>
       <TouchableWithoutFeedback
@@ -86,12 +90,34 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
           setVisible(!visible);
           setFadeValue(new Animated.Value(0));
         }}>
-        <Image
-          ref={imageRef}
-          style={styles.image}
-          source={{uri: moment.moment_url}}
-          resizeMode={'cover'}
-        />
+        {isVideo ? (
+          <View ref={imageRef}>
+            <Video
+              // ref={imageRef}
+              source={{
+                uri: moment.moment_url,
+              }}
+              // HLS m3u8 version
+              // source={{
+              //   uri: 'https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8',
+              // }}
+              // mp4 version
+              // source={{
+              //   uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+              // }}
+              volume={1}
+              style={styles.image}
+              repeat={true}
+            />
+          </View>
+        ) : (
+          <Image
+            ref={imageRef}
+            style={styles.image}
+            source={{uri: moment.moment_url}}
+            resizeMode={'cover'}
+          />
+        )}
         {tags.length > 0 && (
           <Image
             source={require('../../assets/icons/tag_indicate.png')}
@@ -115,7 +141,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
             renderTextWithMentions({
               value: moment.caption,
               styles: styles.captionText,
-              partTypes: mentionPartTypes('white'),
+              partTypes: mentionPartTypes('white', 'caption'),
               onPress: (user: UserType) =>
                 navigateToProfile(
                   state,
@@ -145,7 +171,6 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
         }}
         onFocus={() => {
           setHideText(true);
-          scrollTo(index);
         }}
         isKeyboardAvoiding={false}
         theme={'dark'}
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index dc4ebe32..910aa095 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -31,6 +31,13 @@ interface MomentMoreInfoDrawerProps extends ViewProps {
   tags: MomentTagType[];
 }
 
+type DrawerButtonType = [
+  string,
+  (event: GestureResponderEvent) => void,
+  JSX.Element?,
+  TextStyle?,
+][];
+
 const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
   const {
     setIsOpen,
@@ -45,9 +52,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
 
   const navigation = useNavigation();
 
-  const [drawerButtons, setDrawerButtons] = useState<
-    [string, (event: GestureResponderEvent) => void, JSX.Element?, TextStyle?][]
-  >([]);
+  const [drawerButtons, setDrawerButtons] = useState<DrawerButtonType>([]);
 
   const handleDeleteMoment = async () => {
     setIsOpen(false);
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index c0ee508a..cc001516 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -80,7 +80,6 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
             );
           }}>{`${website}`}</Text>
       )}
-
       {userXId && isBlocked && (
         <View style={styles.toggleButtonContainer}>
           <ToggleButton
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index d458fab6..ea19591d 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React from 'react';
+import React, {RefObject} from 'react';
 import {
   Image,
   StyleSheet,
@@ -17,7 +17,7 @@ import {normalize} from '../../utils';
 import {navigateToProfile} from '../../utils/users';
 
 interface TaggDraggableProps extends ViewProps {
-  draggableRef: React.MutableRefObject<null>;
+  draggableRef: RefObject<View>;
   taggedUser: ProfilePreviewType;
   editingView: boolean;
   deleteFromList: () => void;