Add logic to show/hide trimmer

1 files changed, 27 insertions, 12 deletions

diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx
index d25a0fb9..0494375c 100644
--- a/src/screens/upload/EditMedia.tsx
+++ b/src/screens/upload/EditMedia.tsx
@@ -3,7 +3,6 @@ import {RouteProp} from '@react-navigation/core';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import {normalize} from 'react-native-elements';
 import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
 import PhotoManipulator from 'react-native-photo-manipulator';
 import TrimIcon from '../../assets/icons/trim.svg';
@@ -14,6 +13,7 @@ import {MainStackParams} from '../../routes';
 import {
   cropVideo,
   HeaderHeight,
+  normalize,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
   trimVideo,
@@ -36,6 +36,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
   const [origDimensions, setOrigDimensions] = useState<number[]>([0, 0]);
   const vidRef = useRef<View>(null);
   const [cropLoading, setCropLoading] = useState<boolean>(false);
+  const [hideTrimmer, setHideTrimmer] = useState<boolean>(true);
 
   // Stores the coordinates of the cropped image
   const [x0, setX0] = useState<number>();
@@ -299,7 +300,6 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
           zoomStep={0.5}
           initialZoom={1}
           bindToBorders={true}
-          // onZoomAfter={this.logOutZoomState}
           onDoubleTapAfter={(
             _1: any,
             _2: any,
@@ -322,7 +322,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
           style={styles.zoomView}>
           <View style={styles.videoParent} ref={vidRef}>
             <TrimmerPlayer
-              hideTrimmer={false}
+              hideTrimmer={hideTrimmer}
               source={media.uri}
               videoStyles={[
                 styles.media,
@@ -344,13 +344,22 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
       )}
       {!checkIfUriImage(media.uri) && (
         <View style={styles.iconCarrier}>
-          <TrimIcon />
-          <Text style={styles.iconText}>Trim</Text>
-          <Image
-            style={styles.volumnIcon}
-            source={require('../../assets/images/volume-on.png')}
-          />
-          <Text style={styles.iconText}>Volume</Text>
+          <TouchableOpacity
+            style={styles.iconContainer}
+            onPress={() => setHideTrimmer((state) => !state)}>
+            <TrimIcon />
+            <Text style={styles.iconText}>Trim</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={styles.iconContainer}
+            // TODO: finish me
+            onPress={() => null}>
+            <Image
+              style={styles.volumnIcon}
+              source={require('../../assets/images/volume-on.png')}
+            />
+            <Text style={styles.iconText}>Volume</Text>
+          </TouchableOpacity>
         </View>
       )}
       <TaggSquareButton
@@ -402,14 +411,20 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     position: 'absolute',
     right: SCREEN_WIDTH * 0.025,
-    top: SCREEN_HEIGHT * 0.2,
+    top: SCREEN_HEIGHT * 0.1,
     flexDirection: 'column',
     justifyContent: 'space-evenly',
     alignItems: 'center',
   },
+  iconContainer: {
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
   iconText: {
     color: 'white',
-    fontSize: 10,
+    fontSize: normalize(11),
+    fontWeight: 'bold',
   },
   media: {
     zIndex: 0,