From 63bef47bffd2893f3013a02f71383c9c0a27881f Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 24 Jun 2021 18:20:15 -0400
Subject: Fix moment comment count, Add video support

---
 src/components/moments/MomentPost.tsx | 47 +++++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 13 deletions(-)

(limited to 'src/components/moments/MomentPost.tsx')

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 6eccf5ab..f030c41e 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -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';
@@ -72,6 +73,12 @@ const MomentPost: React.FC<MomentPostProps> = ({
 
   const imageRef = useRef(null);
   const {keyboardVisible} = useContext(MomentContext);
+  const isVideo = !(
+    moment.moment_url.endsWith('jpg') ||
+    moment.moment_url.endsWith('JPG') ||
+    moment.moment_url.endsWith('PNG') ||
+    moment.moment_url.endsWith('png')
+  );
 
   /*
    * Load tags on initial render to pass tags data to moment header and content
@@ -178,17 +185,26 @@ 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}>
+              <Video
+                source={{
+                  uri: moment.moment_url,
+                }}
+                volume={1}
+                style={styles.media}
+                repeat={true}
+                resizeMode={'contain'}
+              />
+            </View>
+          ) : (
+            <Image
+              source={{uri: moment.moment_url}}
+              style={styles.media}
+              resizeMode={'contain'}
+              ref={imageRef}
+            />
+          )}
         </View>
         {visible && (
           <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
@@ -233,7 +249,11 @@ 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 />
                 {!hideText && (
@@ -281,8 +301,9 @@ const MomentPost: React.FC<MomentPostProps> = ({
 };
 
 const styles = StyleSheet.create({
-  image: {
+  media: {
     zIndex: 0,
+    flex: 1,
   },
   imageContainer: {
     height: SCREEN_HEIGHT,
-- 
cgit v1.2.3-70-g09d2


From a6bc1f1a06a08bd842ba0b3bd00a88cea9bd9971 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 24 Jun 2021 18:50:00 -0400
Subject: Fix video layout while viewing

---
 src/components/moments/MomentPost.tsx | 36 ++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

(limited to 'src/components/moments/MomentPost.tsx')

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index f030c41e..770cdcee 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -133,13 +133,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),
+      );
+    }
   }, []);
 
   /*
@@ -186,15 +188,31 @@ const MomentPost: React.FC<MomentPostProps> = ({
       <View style={styles.mainContainer}>
         <View style={styles.imageContainer}>
           {isVideo ? (
-            <View ref={imageRef}>
+            <View
+              ref={imageRef}
+              style={[
+                styles.media,
+                {
+                  height: SCREEN_WIDTH / aspectRatio,
+                },
+              ]}>
               <Video
                 source={{
                   uri: moment.moment_url,
                 }}
                 volume={1}
-                style={styles.media}
+                style={[
+                  styles.media,
+                  {
+                    height: SCREEN_WIDTH / aspectRatio,
+                  },
+                ]}
                 repeat={true}
                 resizeMode={'contain'}
+                onLoad={(response) => {
+                  const {width, height} = response.naturalSize;
+                  setAspectRatio(width / height);
+                }}
               />
             </View>
           ) : (
-- 
cgit v1.2.3-70-g09d2


From 4bab63b7b0c24043749e78cbb4d639e8a4047bad Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 25 Jun 2021 16:40:35 -0400
Subject: Add logic to pause video when not visible

---
 src/components/moments/MomentPost.tsx    |  3 ++-
 src/screens/profile/IndividualMoment.tsx | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

(limited to 'src/components/moments/MomentPost.tsx')

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 770cdcee..e6bb5405 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -72,7 +72,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const [momentTagId, setMomentTagId] = useState<string>('');
 
   const imageRef = useRef(null);
-  const {keyboardVisible} = useContext(MomentContext);
+  const {keyboardVisible, currentVisibleMomentId} = useContext(MomentContext);
   const isVideo = !(
     moment.moment_url.endsWith('jpg') ||
     moment.moment_url.endsWith('JPG') ||
@@ -213,6 +213,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
                   const {width, height} = response.naturalSize;
                   setAspectRatio(width / height);
                 }}
+                paused={moment.moment_id !== currentVisibleMomentId}
               />
             </View>
           ) : (
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index ca31ad5b..7944c336 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,7 +1,7 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useRef, useState} from 'react';
-import {FlatList, Keyboard} from 'react-native';
+import {FlatList, Keyboard, ViewToken} from 'react-native';
 import {useSelector} from 'react-redux';
 import {MomentPost, TabsGradient} from '../../components';
 import {AVATAR_DIM} from '../../constants';
@@ -17,6 +17,7 @@ import {isIPhoneX} from '../../utils';
 type MomentContextType = {
   keyboardVisible: boolean;
   scrollTo: (index: number) => void;
+  currentVisibleMomentId: string | undefined;
 };
 
 export const MomentContext = React.createContext({} as MomentContextType);
@@ -48,6 +49,18 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
   );
   const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
   const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const [currentVisibleMomentId, setCurrentVisibleMomentId] = useState<
+    string | undefined
+  >();
+  // https://stackoverflow.com/a/57502343
+  const viewabilityConfigCallback = useRef(
+    (info: {viewableItems: ViewToken[]; changed: ViewToken[]}) => {
+      const index = info.viewableItems[0].index;
+      if (index !== null) {
+        setCurrentVisibleMomentId(momentData[index].moment_id);
+      }
+    },
+  );
 
   useEffect(() => {
     const showKeyboard = () => setKeyboardVisible(true);
@@ -74,6 +87,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
       value={{
         keyboardVisible,
         scrollTo,
+        currentVisibleMomentId,
       }}>
       <FlatList
         ref={scrollRef}
@@ -89,6 +103,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
         keyExtractor={(item, _) => item.moment_id}
         showsVerticalScrollIndicator={false}
         initialScrollIndex={initialIndex}
+        onViewableItemsChanged={viewabilityConfigCallback.current}
         onScrollToIndexFailed={(info) => {
           setTimeout(() => {
             scrollRef.current?.scrollToIndex({
-- 
cgit v1.2.3-70-g09d2


From acc7081036177e036bd7f43c7975939d33e91f2c Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 25 Jun 2021 17:05:14 -0400
Subject: Cleanup ref types

---
 src/components/common/MomentTags.tsx   | 14 +++++---------
 src/components/moments/MomentPost.tsx  | 12 +++++++++++-
 src/components/taggs/TaggDraggable.tsx |  4 ++--
 3 files changed, 18 insertions(+), 12 deletions(-)

(limited to 'src/components/moments/MomentPost.tsx')

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/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index e6bb5405..7d0752d5 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,5 +1,13 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {
+  createRef,
+  LegacyRef,
+  MutableRefObject,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   Image,
   KeyboardAvoidingView,
@@ -72,6 +80,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const [momentTagId, setMomentTagId] = useState<string>('');
 
   const imageRef = useRef(null);
+  const videoRef = useRef<Video>(null);
   const {keyboardVisible, currentVisibleMomentId} = useContext(MomentContext);
   const isVideo = !(
     moment.moment_url.endsWith('jpg') ||
@@ -197,6 +206,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
                 },
               ]}>
               <Video
+                ref={videoRef}
                 source={{
                   uri: moment.moment_url,
                 }}
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;
-- 
cgit v1.2.3-70-g09d2


From a61996f4f1c6fa0556272ca3861b88e6d4272fbd Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 25 Jun 2021 17:08:47 -0400
Subject: Add logic to reset video progress

---
 src/components/moments/MomentPost.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'src/components/moments/MomentPost.tsx')

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 7d0752d5..70bea442 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -173,6 +173,12 @@ const MomentPost: React.FC<MomentPostProps> = ({
     }
   }, [keyboardVisible, hideText]);
 
+  useEffect(() => {
+    if (moment.moment_id !== currentVisibleMomentId) {
+      videoRef.current?.seek(0);
+    }
+  }, [currentVisibleMomentId]);
+
   const MomentPosterPreview = () => (
     <View style={styles.momentPosterContainer}>
       <TouchableOpacity
-- 
cgit v1.2.3-70-g09d2


From 7ad33344681b430feff9b00392bf6d8e9e1722e7 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 25 Jun 2021 17:47:07 -0400
Subject: Remove unused styles, Fix comment navigation, Fix add comment

---
 src/components/comments/AddComment.tsx       | 23 +----------------------
 src/components/comments/CommentTextField.tsx | 26 ++++++++++++--------------
 src/components/moments/MomentPost.tsx        |  1 +
 3 files changed, 14 insertions(+), 36 deletions(-)

(limited to 'src/components/moments/MomentPost.tsx')

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..65a237e7 100644
--- a/src/components/comments/CommentTextField.tsx
+++ b/src/components/comments/CommentTextField.tsx
@@ -99,20 +99,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/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 70bea442..e55c93ba 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -396,6 +396,7 @@ const styles = StyleSheet.create({
   },
   commentsCountContainer: {
     position: 'absolute',
+    zIndex: 3,
     right: '2%',
     bottom: SCREEN_HEIGHT * 0.12,
   },
-- 
cgit v1.2.3-70-g09d2


From dcf45600b6e2be7820ed2d8c0f44603624f1e719 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 25 Jun 2021 18:01:41 -0400
Subject: Lint

---
 src/components/comments/CommentTextField.tsx | 19 +++++++------------
 src/components/moments/MomentPost.tsx        | 10 +---------
 2 files changed, 8 insertions(+), 21 deletions(-)

(limited to 'src/components/moments/MomentPost.tsx')

diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
index 65a237e7..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
 }) => {
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index e55c93ba..cb3a138b 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,13 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {
-  createRef,
-  LegacyRef,
-  MutableRefObject,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {
   Image,
   KeyboardAvoidingView,
-- 
cgit v1.2.3-70-g09d2


From 014af4ac61bae6e38a4965ceb274b147ac3395c6 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Tue, 29 Jun 2021 23:01:24 +0900
Subject: Construct and merge with master

---
 package.json                          |  4 ++--
 src/components/moments/Moment.tsx     | 45 ++++++++++++++++++++++++++++++++++-
 src/components/moments/MomentPost.tsx |  4 +++-
 3 files changed, 49 insertions(+), 4 deletions(-)

(limited to 'src/components/moments/MomentPost.tsx')

diff --git a/package.json b/package.json
index 09ed6fc5..e28fc214 100644
--- a/package.json
+++ b/package.json
@@ -46,8 +46,8 @@
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-hyperlink": "^0.0.19",
     "react-native-image-crop-picker": "^0.36.0",
-    "react-native-image-picker": "^4.0.4",
     "react-native-image-pan-zoom": "^2.1.12",
+    "react-native-image-picker": "^4.0.4",
     "react-native-image-resizer": "^1.4.4",
     "react-native-inappbrowser-reborn": "^3.5.0",
     "react-native-linear-gradient": "^2.5.6",
@@ -110,4 +110,4 @@
       "./node_modules/react-native-gesture-handler/jestSetup.js"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index a43a2830..04d35825 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -91,7 +91,14 @@ const Moment: React.FC<MomentProps> = ({
       mediaType: 'any',
     })
       .then((picture) => {
-        if (picture.path && picture.filename) {
+        if (
+          (picture.filename.endsWith('gif') ||
+            picture.filename.endsWith('GIF')) &&
+          picture.path &&
+          picture.filename
+        ) {
+          showAlert(picture);
+        } else if (picture.path && picture.filename) {
           navigation.navigate('ZoomInCropper', {
             screenType,
             title,
@@ -110,6 +117,42 @@ const Moment: React.FC<MomentProps> = ({
       });
   };
 
+  /* Handles GIF files */
+  const showAlert = (picture) =>
+    Alert.alert(
+      'Warning',
+      'The cropped image will not be a GIF, but will only include the first frame of the GIF. Continue?',
+      [
+        {
+          text: 'Cancel',
+          onPress: () => {},
+          style: 'cancel',
+        },
+        {
+          text: 'Continue',
+          onPress: () => {
+            navigation.navigate('ZoomInCropper', {
+              screenType,
+              title,
+              media: {
+                filename: picture.filename,
+                uri: picture.path,
+                isVideo: false,
+              },
+            });
+          },
+          style: 'default',
+        },
+      ],
+      {
+        cancelable: true,
+        onDismiss: () =>
+          Alert.alert(
+            'This alert was dismissed by tapping outside of the alert dialog.',
+          ),
+      },
+    );
+
   return (
     <View style={[styles.container, externalStyles?.container]}>
       <View style={[styles.header, externalStyles?.header]}>
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index cb3a138b..f5a256d6 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -78,7 +78,9 @@ const MomentPost: React.FC<MomentPostProps> = ({
     moment.moment_url.endsWith('jpg') ||
     moment.moment_url.endsWith('JPG') ||
     moment.moment_url.endsWith('PNG') ||
-    moment.moment_url.endsWith('png')
+    moment.moment_url.endsWith('png') ||
+    moment.moment_url.endsWith('GIF') ||
+    moment.moment_url.endsWith('gif')
   );
 
   /*
-- 
cgit v1.2.3-70-g09d2


From 5d07edcc1945b90046148b6c2424f20f024efae2 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 1 Jul 2021 15:33:19 -0400
Subject: Fix moment avatar rerender issue

---
 src/components/moments/MomentPost.tsx | 39 +++++++++++++++++++----------------
 1 file changed, 21 insertions(+), 18 deletions(-)

(limited to 'src/components/moments/MomentPost.tsx')

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index f5a256d6..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,
@@ -173,22 +173,25 @@ const MomentPost: React.FC<MomentPostProps> = ({
     }
   }, [currentVisibleMomentId]);
 
-  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>
+  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 (
@@ -284,7 +287,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
                     screenType={screenType}
                   />
                 </View>
-                <MomentPosterPreview />
+                {momentPosterPreview}
                 {!hideText && (
                   <>
                     {moment.caption !== '' &&
-- 
cgit v1.2.3-70-g09d2