Merge branch 'master' into tma962-moment-upload-progress-bar

# Conflicts:
#	package.json
#	yarn.lock

5 files changed, 174 insertions, 163 deletions

diff --git a/src/assets/images/volume-off.png b/src/assets/images/volume-off.png
new file mode 100644
index 00000000..1e9a9286
--- /dev/null
+++ b/src/assets/images/volume-off.png
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 5dba5e69..29b82cec 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -12,7 +12,10 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
+// @ts-ignore
+import Pinchable from 'react-native-pinchable';
 import Animated, {EasingNode} from 'react-native-reanimated';
+import {SafeAreaView} from 'react-native-safe-area-context';
 import Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {TaggedUsersDrawer} from '.';
@@ -24,8 +27,6 @@ import {RootState} from '../../store/rootReducer';
 import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types';
 import {
   getTimePosted,
-  HeaderHeight,
-  isIPhoneX,
   navigateToProfile,
   normalize,
   SCREEN_HEIGHT,
@@ -60,7 +61,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const isOwnProfile = user.username === loggedInUsername;
 
   const [tags, setTags] = useState<MomentTagType[]>([]);
-  const [visible, setVisible] = useState(false);
+  const [tagsVisible, setTagsVisible] = useState(false);
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [taggedUsersVisible, setTaggedUsersVisible] = useState(false);
   const [hideText, setHideText] = useState(false);
@@ -198,6 +199,35 @@ const MomentPost: React.FC<MomentPostProps> = ({
     [user.username],
   );
 
+  const momentMedia = isVideo ? (
+    <View ref={imageRef}>
+      <Video
+        ref={videoRef}
+        source={{
+          uri: moment.moment_url,
+        }}
+        volume={1}
+        style={{
+          height: mediaHeight,
+        }}
+        repeat={true}
+        onLoad={(response) => {
+          const {width, height} = response.naturalSize;
+          setAspectRatio(width / height);
+        }}
+        paused={moment.moment_id !== currentVisibleMomentId}
+      />
+    </View>
+  ) : (
+    <Image
+      source={{uri: moment.moment_url}}
+      style={{
+        height: mediaHeight,
+      }}
+      ref={imageRef}
+    />
+  );
+
   return (
     <>
       <StatusBar barStyle={'light-content'} />
@@ -206,157 +236,118 @@ const MomentPost: React.FC<MomentPostProps> = ({
         isOpen={taggedUsersVisible}
         setIsOpen={setTaggedUsersVisible}
       />
-      <View style={styles.mainContainer}>
-        <View style={styles.imageContainer}>
-          {isVideo ? (
-            <View ref={imageRef}>
-              <Video
-                ref={videoRef}
-                source={{
-                  uri: moment.moment_url,
-                }}
-                volume={1}
-                style={[
-                  styles.media,
-                  {
-                    height: mediaHeight,
-                  },
-                ]}
-                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,
-                {
-                  height: mediaHeight,
-                },
-              ]}
-              resizeMode={'contain'}
-              ref={imageRef}
-            />
-          )}
-        </View>
-        {visible && (
-          <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
-            <MomentTags
-              editing={false}
-              tags={tags}
-              setTags={() => null}
-              imageRef={imageRef}
-            />
-          </Animated.View>
-        )}
+      <SafeAreaView style={styles.moreInfoButton}>
+        <MomentMoreInfoDrawer
+          isOpen={drawerVisible}
+          setIsOpen={setDrawerVisible}
+          isOwnProfile={isOwnProfile}
+          momentTagId={momentTagId}
+          removeTag={removeTag}
+          dismissScreenAndUpdate={() => {
+            dispatch(loadUserMoments(loggedInUserId));
+            navigation.goBack();
+          }}
+          screenType={screenType}
+          moment={moment}
+          tags={tags}
+        />
+      </SafeAreaView>
+      <View style={styles.background}>
         <TouchableWithoutFeedback
-          disabled={isVideo}
           onPress={() => {
-            setVisible(!visible);
-            setFadeValue(new Animated.Value(0));
-            Keyboard.dismiss();
+            if (keyboardVisible) {
+              Keyboard.dismiss();
+            } else {
+              setTagsVisible(!tagsVisible);
+              setFadeValue(new Animated.Value(0));
+            }
           }}>
-          <View style={styles.contentContainer}>
-            <View style={styles.topContainer}>
-              <MomentMoreInfoDrawer
-                isOpen={drawerVisible}
-                setIsOpen={setDrawerVisible}
-                isOwnProfile={isOwnProfile}
-                momentTagId={momentTagId}
-                removeTag={removeTag}
-                dismissScreenAndUpdate={() => {
-                  dispatch(loadUserMoments(loggedInUserId));
-                  navigation.goBack();
-                }}
+          {isVideo ? (
+            <View style={styles.mediaContainer}>{momentMedia}</View>
+          ) : (
+            <Pinchable>
+              <View style={styles.mediaContainer}>{momentMedia}</View>
+              {tagsVisible && !isVideo && (
+                <Animated.View
+                  style={[styles.tagsContainer, {opacity: fadeValue}]}>
+                  <MomentTags
+                    editing={false}
+                    tags={tags}
+                    setTags={() => null}
+                    imageRef={imageRef}
+                  />
+                </Animated.View>
+              )}
+            </Pinchable>
+          )}
+        </TouchableWithoutFeedback>
+        <View style={styles.bottomContainer} pointerEvents={'box-none'}>
+          <KeyboardAvoidingView
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            keyboardVerticalOffset={-20}>
+            {tags.length > 0 && !keyboardVisible && (
+              <TouchableOpacity
+                style={styles.tagIconContainer}
+                disabled={!isVideo}
+                onPress={() =>
+                  setTaggedUsersVisible((prevState) => !prevState)
+                }>
+                <Image
+                  source={require('../../assets/icons/tag_indicate.png')}
+                  style={styles.tagIcon}
+                />
+              </TouchableOpacity>
+            )}
+            <View style={styles.commentsCountContainer}>
+              <CommentsCount
+                momentId={moment.moment_id}
+                count={commentCount}
                 screenType={screenType}
-                moment={moment}
-                tags={tags}
               />
             </View>
-            <KeyboardAvoidingView
-              behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-              keyboardVerticalOffset={-20}>
-              <View style={styles.bottomContainer}>
-                {tags.length > 0 && (
-                  <TouchableOpacity
-                    disabled={!isVideo}
-                    onPress={() =>
-                      setTaggedUsersVisible((prevState) => !prevState)
-                    }>
-                    <Image
-                      source={require('../../assets/icons/tag_indicate.png')}
-                      style={styles.tagIcon}
-                    />
-                  </TouchableOpacity>
-                )}
-                <View style={styles.commentsCountContainer}>
-                  <CommentsCount
-                    momentId={moment.moment_id}
-                    count={commentCount}
-                    screenType={screenType}
-                  />
-                </View>
-                {momentPosterPreview}
-                {!hideText && (
-                  <>
-                    {moment.caption !== '' &&
-                      renderTextWithMentions({
-                        value: moment.caption,
-                        styles: styles.captionText,
-                        partTypes: mentionPartTypes('white', 'caption'),
-                        onPress: (userLocal: UserType) =>
-                          navigateToProfile(
-                            state,
-                            dispatch,
-                            navigation,
-                            screenType,
-                            userLocal,
-                          ),
-                      })}
-                  </>
-                )}
-                <View>
-                  <AddComment
-                    placeholderText={'Add a comment here!'}
-                    momentId={moment.moment_id}
-                    callback={() => {
-                      setCommentCount(commentCount + 1);
-                    }}
-                    onFocus={() => {
-                      setHideText(true);
-                    }}
-                    isKeyboardAvoiding={false}
-                    theme={'dark'}
-                  />
-                  <Text style={styles.text}>
-                    {getTimePosted(moment.date_created)}
-                  </Text>
-                </View>
-              </View>
-            </KeyboardAvoidingView>
-          </View>
-        </TouchableWithoutFeedback>
+            {momentPosterPreview}
+            {!hideText &&
+              moment.caption !== '' &&
+              renderTextWithMentions({
+                value: moment.caption,
+                styles: styles.captionText,
+                partTypes: mentionPartTypes('white', 'caption'),
+                onPress: (userLocal: UserType) =>
+                  navigateToProfile(
+                    state,
+                    dispatch,
+                    navigation,
+                    screenType,
+                    userLocal,
+                  ),
+              })}
+            <AddComment
+              placeholderText={'Add a comment here!'}
+              momentId={moment.moment_id}
+              callback={() => {
+                setCommentCount(commentCount + 1);
+              }}
+              onFocus={() => {
+                setHideText(true);
+              }}
+              isKeyboardAvoiding={false}
+              theme={'dark'}
+            />
+            <Text style={styles.text}>
+              {getTimePosted(moment.date_created)}
+            </Text>
+          </KeyboardAvoidingView>
+        </View>
       </View>
     </>
   );
 };
 
 const styles = StyleSheet.create({
-  media: {
-    zIndex: 0,
-  },
-  imageContainer: {
+  mediaContainer: {
     height: SCREEN_HEIGHT,
     width: SCREEN_WIDTH,
-    flexDirection: 'column',
     justifyContent: 'center',
-    overflow: 'hidden',
   },
   text: {
     marginHorizontal: '5%',
@@ -376,12 +367,16 @@ const styles = StyleSheet.create({
     marginBottom: normalize(5),
     width: SCREEN_WIDTH * 0.79,
   },
-  tagIcon: {
+  tagIconContainer: {
     width: normalize(30),
     height: normalize(30),
     bottom: normalize(20),
     left: '5%',
   },
+  tagIcon: {
+    width: '100%',
+    height: '100%',
+  },
   avatar: {
     width: 48,
     aspectRatio: 1,
@@ -411,37 +406,29 @@ const styles = StyleSheet.create({
     right: '2%',
     bottom: SCREEN_HEIGHT * 0.12,
   },
-  bottomContainer: {
-    flexDirection: 'column',
-    justifyContent: 'flex-end',
-  },
-  topContainer: {
-    paddingTop: isIPhoneX() ? HeaderHeight : '6%',
-    alignSelf: 'flex-end',
-    paddingRight: '8%',
+  moreInfoButton: {
+    position: 'absolute',
+    zIndex: 999,
+    top: 5,
+    right: 25,
   },
-  contentContainer: {
+  bottomContainer: {
     position: 'absolute',
     width: SCREEN_WIDTH,
     height: SCREEN_HEIGHT,
     flexDirection: 'column',
-    justifyContent: 'space-between',
+    justifyContent: 'flex-end',
     paddingBottom: '24%',
   },
   tagsContainer: {
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    marginBottom: '3%',
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
   },
-  mainContainer: {
+  background: {
     backgroundColor: 'black',
     width: SCREEN_WIDTH,
     height: SCREEN_HEIGHT,
-    flexDirection: 'column',
-    justifyContent: 'center',
   },
 });
 
diff --git a/src/components/moments/TrimmerPlayer.tsx b/src/components/moments/TrimmerPlayer.tsx
index 8729fde8..a7239d8b 100644
--- a/src/components/moments/TrimmerPlayer.tsx
+++ b/src/components/moments/TrimmerPlayer.tsx
@@ -10,6 +10,7 @@ interface TrimmerPlayerProps {
   hideTrimmer: boolean;
   handleLoad: Function;
   onChangedEndpoints: Function;
+  muted: boolean;
 }
 
 const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
@@ -18,6 +19,7 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
   hideTrimmer,
   handleLoad,
   onChangedEndpoints,
+  muted,
 }) => {
   // Stores the reference to player for seeking
   const playerRef = useRef<Video>();
@@ -65,7 +67,7 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
         source={{uri: source}}
         rate={1.0}
         volume={1.0}
-        muted={false}
+        muted={muted}
         paused={paused}
         resizeMode={'contain'}
         repeat={true}
diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx
index 38450337..9a061a53 100644
--- a/src/screens/upload/EditMedia.tsx
+++ b/src/screens/upload/EditMedia.tsx
@@ -68,6 +68,9 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
     start: 0,
   });
 
+  // Stores audio on/off information
+  const [audioOn, setAudioOn] = useState<boolean>(true);
+
   // Setting original aspect ratio of image
   useEffect(() => {
     if (mediaUri && !isVideo) {
@@ -144,6 +147,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
           callback(croppedURL);
         },
         videoCrop,
+        !audioOn,
       );
     }
   };
@@ -347,6 +351,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
               onChangedEndpoints={(response: {start: number; end: number}) =>
                 setTrimEnds(response)
               }
+              muted={!audioOn}
             />
           </View>
         </ReactNativeZoomableView>
@@ -361,11 +366,14 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
           </TouchableOpacity>
           <TouchableOpacity
             style={styles.iconContainer}
-            // TODO: finish me
-            onPress={() => null}>
+            onPress={() => setAudioOn((state) => !state)}>
             <Image
               style={styles.volumnIcon}
-              source={require('../../assets/images/volume-on.png')}
+              source={
+                audioOn
+                  ? require('../../assets/images/volume-on.png')
+                  : require('../../assets/images/volume-off.png')
+              }
             />
             <Text style={styles.iconText}>Volume</Text>
           </TouchableOpacity>
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index 97592fe5..8104ba74 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -130,6 +130,7 @@ export const cropVideo = (
     cropOffsetX?: number;
     cropOffsetY?: number;
   },
+  muted?: boolean,
 ) => {
   ProcessingManager.crop(sourceUri, {
     cropWidth: videoCropValues
@@ -154,6 +155,19 @@ export const cropVideo = (
       : 0,
     quality: 'highest',
   }).then((data: any) => {
-    handleData(data);
+    if (muted) {
+      removeAudio(data, handleData);
+    } else {
+      handleData(data);
+    }
   });
 };
+
+export const removeAudio = (
+  sourceUri: string,
+  handleData: (data: any) => any,
+) => {
+  ProcessingManager.compress(sourceUri, {removeAudio: true}).then((data: any) =>
+    handleData(data),
+  );
+};