Merge pull request #515 from brian-tagg/tma990-trimmer-cropper-screen

[TMA-990] Trimmer/cropper screen

2 files changed, 54 insertions, 27 deletions

diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/TrimmerPlayer.tsx
index c99eaa6f..b28df590 100644
--- a/src/components/moments/trimmer.tsx
+++ b/src/components/moments/TrimmerPlayer.tsx
@@ -1,16 +1,24 @@
-import React, {useEffect, useState} from 'react';
+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 {useRef} from 'react';
-import {SCREEN_WIDTH} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
-export const TrimmerPlayer: React.FC<{
+interface TrimmerPlayerProps {
   source: string;
   videoStyles: Object;
   hideTrimmer: boolean;
   handleLoad: Function;
   onChangedEndpoints: Function;
-}> = ({source, videoStyles, hideTrimmer, handleLoad, onChangedEndpoints}) => {
+}
+
+const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
+  source,
+  videoStyles,
+  hideTrimmer,
+  handleLoad,
+  onChangedEndpoints,
+}) => {
   // Stores the reference to player for seeking
   const playerRef = useRef<Video>();
   // Stores where the video is playing (seekTime)
@@ -42,6 +50,10 @@ export const TrimmerPlayer: React.FC<{
   // Callback so parent knows where the trimming endpts are
   useEffect(() => onChangedEndpoints({end, start}), [end, start]);
 
+  useEffect(() => {
+    playerRef.current?.seek(0);
+  }, [hideTrimmer]);
+
   return (
     <>
       <Video
@@ -58,7 +70,6 @@ export const TrimmerPlayer: React.FC<{
         resizeMode={'contain'}
         repeat={true}
         onLoad={(payload) => {
-          console.log(payload, source);
           setEnd(payload.duration);
           handleLoad(payload.naturalSize);
         }}
@@ -72,27 +83,42 @@ export const TrimmerPlayer: React.FC<{
           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);
-        }}
-      />
+      {!hideTrimmer && (
+        <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={75}
+            width={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/components/moments/index.ts b/src/components/moments/index.ts
index cac2da2e..95e5c75a 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -3,3 +3,4 @@ export {default as CaptionScreenHeader} from './CaptionScreenHeader';
 export {default as Moment} from './Moment';
 export {default as TagFriendsFooter} from './TagFriendsFoooter';
 export {default as MomentPost} from './MomentPost';
+export {default as TrimmerPlayer} from './TrimmerPlayer';