Incorporate trimming into the old moment flow with the cropping functionality.

2 files changed, 41 insertions, 19 deletions

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 20edafd0..a4e86c35 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -9,6 +9,7 @@ import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {MainStackParams} from '../../routes';
 import {
   cropVideo,
+  trimVideo,
   HeaderHeight,
   numberWithCommas,
   SCREEN_HEIGHT,
@@ -16,7 +17,6 @@ import {
 } from '../../utils';
 import {TaggSquareButton} from '../common';
 import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
-import Video from 'react-native-video';
 import {TrimmerPlayer} from '../moments/trimmer';
 
 type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
@@ -53,6 +53,15 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
     cropOffsetY?: number;
   }>({});
 
+  // Stores the current trim endpoints
+  const [trimEnds, setTrimEnds] = useState<{
+    end: number;
+    start: number;
+  }>({
+    end: 60,
+    start: 0,
+  });
+
   const checkIfUriImage = (uri: string) => {
     return (
       uri.endsWith('jpg') ||
@@ -138,19 +147,24 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
           cropHeight: origDimensions[1],
         }));
       }
-      cropVideo(
+      trimVideo(
         media.uri,
-        (croppedURL: string) => {
-          navigation.navigate('CaptionScreen', {
-            screenType,
-            media: {
-              uri: croppedURL,
-              isVideo: true,
+        (trimmedURL: string) =>
+          cropVideo(
+            trimmedURL,
+            (croppedURL: string) => {
+              navigation.navigate('CaptionScreen', {
+                screenType,
+                media: {
+                  uri: croppedURL,
+                  isVideo: true,
+                },
+                selectedCategory,
+              });
             },
-            selectedCategory,
-          });
-        },
-        videoCrop,
+            videoCrop,
+          ),
+        trimEnds,
       );
     }
   };
@@ -315,11 +329,14 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
                   height: SCREEN_WIDTH / aspectRatio,
                 },
               ]}
-              handleLoad={(response: Object) => {
+              handleLoad={(response: {width: number; height: number}) => {
                 const {width, height} = response;
                 setOrigDimensions([width, height]);
                 setAspectRatio(width / height);
               }}
+              onChangedEndpoints={(response: {start: number; end: number}) =>
+                setTrimEnds(response)
+              }
             />
           </View>
         </ReactNativeZoomableView>
diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
index 3c5c4980..2dae23f7 100644
--- a/src/components/moments/trimmer.tsx
+++ b/src/components/moments/trimmer.tsx
@@ -2,13 +2,15 @@ import React, {useEffect, useState} from 'react';
 import Video from 'react-native-video';
 import {Trimmer} from 'react-native-video-processing';
 import {useRef} from 'react';
+import {SCREEN_WIDTH} from '../../utils';
 
 export const TrimmerPlayer: React.FC<{
   source: string;
   videoStyles: Object;
   hideTrimmer: boolean;
   handleLoad: Function;
-}> = ({source, videoStyles, hideTrimmer, handleLoad}) => {
+  onChangedEndpoints: Function;
+}> = ({source, videoStyles, hideTrimmer, handleLoad, onChangedEndpoints}) => {
   const playerRef = useRef<Video>();
 
   const [seekTime, setSeekTime] = useState<number>(0);
@@ -29,13 +31,15 @@ export const TrimmerPlayer: React.FC<{
   const [start, setStart] = useState<number>(0);
   useEffect(() => {
     setSeekTime(start);
-    setTrackerTime(start);
+    setTrackerTime(start - 0.05);
   }, [start]);
   useEffect(() => {
     setSeekTime(end);
-    setTrackerTime(end - 0.1);
+    setTrackerTime(end - 0.125);
   }, [end]);
 
+  useEffect(() => onChangedEndpoints({end, start}), [end, start]);
+
   return (
     <>
       <Video
@@ -69,8 +73,9 @@ export const TrimmerPlayer: React.FC<{
       <Trimmer
         source={source}
         height={hideTrimmer ? 0 : 75}
-        width={hideTrimmer ? 0 : 350} // replace w screen width
-        onTrackerMove={(e) => {
+        width={hideTrimmer ? 0 : SCREEN_WIDTH}
+        borderWidth={hideTrimmer ? 0 : 100}
+        onTrackerMove={(e: {currentTime: number}) => {
           setPaused(true);
           setSeekTime(e.currentTime);
         }} // iOS only
@@ -79,7 +84,7 @@ export const TrimmerPlayer: React.FC<{
         // showTrackerHandle={true}
         thumbWidth={10} // iOS only
         trackerColor={'white'} // iOS only
-        onChange={(e: Object) => {
+        onChange={(e: {endTime: number; startTime: number}) => {
           setPaused(true);
           setEnd(e.endTime);
           setStart(e.startTime);