Fix trimmer logic

2 files changed, 50 insertions, 36 deletions

diff --git a/src/components/moments/TrimmerPlayer.tsx b/src/components/moments/TrimmerPlayer.tsx
index ef829637..b28df590 100644
--- a/src/components/moments/TrimmerPlayer.tsx
+++ b/src/components/moments/TrimmerPlayer.tsx
@@ -50,6 +50,10 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
   // Callback so parent knows where the trimming endpts are
   useEffect(() => onChangedEndpoints({end, start}), [end, start]);
 
+  useEffect(() => {
+    playerRef.current?.seek(0);
+  }, [hideTrimmer]);
+
   return (
     <>
       <Video
@@ -66,7 +70,6 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
         resizeMode={'contain'}
         repeat={true}
         onLoad={(payload) => {
-          console.log(payload, source);
           setEnd(payload.duration);
           handleLoad(payload.naturalSize);
         }}
@@ -80,28 +83,30 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
           setPaused((state) => !state);
         }}
       />
-      <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>
+      {!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>
+      )}
     </>
   );
 };
diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx
index 6b2d6008..1dc408ee 100644
--- a/src/screens/upload/EditMedia.tsx
+++ b/src/screens/upload/EditMedia.tsx
@@ -135,19 +135,14 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
         }));
       }
       setCropLoading(true);
-      trimVideo(
+      cropVideo(
         mediaUri,
-        (trimmedURL: string) =>
-          cropVideo(
-            trimmedURL,
-            (croppedURL: string) => {
-              setCropLoading(false);
-              // Pass the trimmed/cropped video
-              callback(croppedURL);
-            },
-            videoCrop,
-          ),
-        trimEnds,
+        (croppedURL: string) => {
+          setCropLoading(false);
+          // Pass the trimmed/cropped video
+          callback(croppedURL);
+        },
+        videoCrop,
       );
     }
   };
@@ -267,7 +262,21 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
           <TouchableOpacity onPress={() => setHideTrimmer(true)}>
             <Text style={styles.bigText}>Cancel</Text>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => setHideTrimmer(true)}>
+          <TouchableOpacity
+            onPress={() =>
+              trimVideo(
+                mediaUri,
+                (trimmedUri: string) => {
+                  setCropLoading(true);
+                  setMediaUri(trimmedUri);
+                  setTimeout(() => {
+                    setHideTrimmer(true);
+                    setCropLoading(false);
+                  }, 500);
+                },
+                trimEnds,
+              )
+            }>
             <Text style={styles.bigText}>Save</Text>
           </TouchableOpacity>
         </View>