Add logic to show/hide trimmer

1 files changed, 34 insertions, 22 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;