Add logic to show/hide trimmer

2 files changed, 61 insertions, 34 deletions

diff --git a/src/components/moments/TrimmerPlayer.tsx b/src/components/moments/TrimmerPlayer.tsx
index 4d6a8985..ef829637 100644
--- a/src/components/moments/TrimmerPlayer.tsx
+++ b/src/components/moments/TrimmerPlayer.tsx
@@ -1,7 +1,8 @@
 import React, {useEffect, useRef, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
 import Video from 'react-native-video';
 import {Trimmer} from 'react-native-video-processing';
-import {SCREEN_WIDTH} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 interface TrimmerPlayerProps {
   source: string;
@@ -79,29 +80,40 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
           setPaused((state) => !state);
         }}
       />
-      <Trimmer
-        // link to descr and use of props for trimmer ->
-        // https://github.com/shahen94/react-native-video-processing
-        source={source}
-        height={hideTrimmer ? 0 : 75}
-        width={hideTrimmer ? 0 : SCREEN_WIDTH}
-        borderWidth={hideTrimmer ? 0 : 100}
-        onTrackerMove={(e: {currentTime: number}) => {
-          setPaused(true);
-          setSeekTime(e.currentTime);
-        }}
-        currentTime={trackerTime}
-        themeColor={'white'}
-        thumbWidth={10}
-        trackerColor={'white'}
-        onChange={(e: {endTime: number; startTime: number}) => {
-          setPaused(true);
-          setEnd(e.endTime);
-          setStart(e.startTime);
-        }}
-      />
+      <View style={styles.trimmerContainer}>
+        <Trimmer
+          // link to descr and use of props for trimmer ->
+          // https://github.com/shahen94/react-native-video-processing
+          source={source}
+          height={hideTrimmer ? 0 : 75}
+          width={hideTrimmer ? 0 : SCREEN_WIDTH}
+          onTrackerMove={(e: {currentTime: number}) => {
+            setPaused(true);
+            setSeekTime(e.currentTime);
+          }}
+          currentTime={trackerTime}
+          themeColor={'white'}
+          thumbWidth={10}
+          trackerColor={'white'}
+          onChange={(e: {endTime: number; startTime: number}) => {
+            setPaused(true);
+            setEnd(e.endTime);
+            setStart(e.startTime);
+          }}
+        />
+      </View>
     </>
   );
 };
 
+const styles = StyleSheet.create({
+  trimmerContainer: {
+    position: 'absolute',
+    bottom: SCREEN_HEIGHT * 0.1,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'red',
+  },
+});
+
 export default TrimmerPlayer;
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,