From f1873c074f3e9d8807b5e812f7ee37ba495a6c0a Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Wed, 14 Jul 2021 17:48:55 -0400
Subject: Incorportated the trimmer component on the zoom inn croppper page.
 Trimmer is hidden. Will incorporate trimmer soon.

---
 src/components/comments/ZoomInCropper.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

(limited to 'src/components/comments')

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 6f8ff97c..5fad89e6 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -10,12 +10,14 @@ import {MainStackParams} from '../../routes';
 import {
   cropVideo,
   HeaderHeight,
+  numberWithCommas,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
 } 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'>;
 type ZoomInCropperNavigationProps = StackNavigationProp<
@@ -304,19 +306,18 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
           }}
           style={styles.zoomView}>
           <View style={styles.videoParent} ref={vidRef}>
-            <Video
-              source={{uri: media.uri}}
-              volume={1}
-              style={[
+            <TrimmerPlayer
+              hideTrimmer={false}
+              source={media.uri}
+              videoStyles={[
                 styles.media,
                 {
                   height: SCREEN_WIDTH / aspectRatio,
                 },
               ]}
-              repeat={true}
-              resizeMode={'contain'}
-              onLoad={(response) => {
-                const {width, height} = response.naturalSize;
+              handleLoad={(response: Object) => {
+                console.log(response);
+                const {width, height} = response;
                 setOrigDimensions([width, height]);
                 setAspectRatio(width / height);
               }}
-- 
cgit v1.2.3-70-g09d2


From d3b757fa16224f6c7cff136674cfac05c3a24c3f Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Wed, 14 Jul 2021 17:49:36 -0400
Subject: Hide the trimmer.

---
 src/components/comments/ZoomInCropper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/comments')

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 5fad89e6..3c1e287d 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -307,7 +307,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
           style={styles.zoomView}>
           <View style={styles.videoParent} ref={vidRef}>
             <TrimmerPlayer
-              hideTrimmer={false}
+              hideTrimmer={true}
               source={media.uri}
               videoStyles={[
                 styles.media,
-- 
cgit v1.2.3-70-g09d2


From eed51412f523cd661a2081147c7b1b0591732973 Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Thu, 15 Jul 2021 15:34:41 -0400
Subject: Incorporate trimmer with zoom/crop component. Can toggle on and off
 with a boolean prop on the trimmerPlayer component.

---
 src/components/comments/ZoomInCropper.tsx |  3 +--
 src/components/moments/trimmer.tsx        | 42 ++++++++++++++-----------------
 2 files changed, 20 insertions(+), 25 deletions(-)

(limited to 'src/components/comments')

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 3c1e287d..20edafd0 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -307,7 +307,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
           style={styles.zoomView}>
           <View style={styles.videoParent} ref={vidRef}>
             <TrimmerPlayer
-              hideTrimmer={true}
+              hideTrimmer={false}
               source={media.uri}
               videoStyles={[
                 styles.media,
@@ -316,7 +316,6 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
                 },
               ]}
               handleLoad={(response: Object) => {
-                console.log(response);
                 const {width, height} = response;
                 setOrigDimensions([width, height]);
                 setAspectRatio(width / height);
diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
index 2bd3eb41..3c5c4980 100644
--- a/src/components/moments/trimmer.tsx
+++ b/src/components/moments/trimmer.tsx
@@ -66,29 +66,25 @@ export const TrimmerPlayer: React.FC<{
           setPaused((state) => !state);
         }}
       />
-      {hideTrimmer ? (
-        <> </>
-      ) : (
-        <Trimmer
-          source={source}
-          height={100}
-          width={350}
-          onTrackerMove={(e) => {
-            setPaused(true);
-            setSeekTime(e.currentTime);
-          }} // iOS only
-          currentTime={trackerTime + 0.25} // added .25 bc tracker is inaccurate
-          themeColor={'white'} // iOS only
-          showTrackerHandle={true}
-          thumbWidth={10} // iOS only
-          trackerColor={'white'} // iOS only
-          onChange={(e) => {
-            setPaused(true);
-            setEnd(e.endTime);
-            setStart(e.startTime);
-          }}
-        />
-      )}
+      <Trimmer
+        source={source}
+        height={hideTrimmer ? 0 : 75}
+        width={hideTrimmer ? 0 : 350} // replace w screen width
+        onTrackerMove={(e) => {
+          setPaused(true);
+          setSeekTime(e.currentTime);
+        }} // iOS only
+        currentTime={trackerTime + 0.25} // added .25 bc tracker is inaccurate
+        themeColor={'white'} // iOS only
+        // showTrackerHandle={true}
+        thumbWidth={10} // iOS only
+        trackerColor={'white'} // iOS only
+        onChange={(e: Object) => {
+          setPaused(true);
+          setEnd(e.endTime);
+          setStart(e.startTime);
+        }}
+      />
     </>
   );
 };
-- 
cgit v1.2.3-70-g09d2


From 05c79b11815e6544e9066aeed09199c6074f480b Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Thu, 15 Jul 2021 16:42:10 -0400
Subject: Incorporate trimming into the old moment flow with the cropping
 functionality.

---
 src/components/comments/ZoomInCropper.tsx | 43 +++++++++++++++++++++----------
 src/components/moments/trimmer.tsx        | 17 +++++++-----
 src/utils/camera.ts                       | 15 +++++++++++
 3 files changed, 56 insertions(+), 19 deletions(-)

(limited to 'src/components/comments')

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);
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index 9e37d62e..5c7f5ee0 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -118,6 +118,21 @@ export const showGIFFailureAlert = (onSuccess: () => void) =>
     },
   );
 
+export const trimVideo = (
+  sourceUri: string,
+  handleData: (data: any) => any,
+  ends: {
+    start: number;
+    end: number;
+  },
+) => {
+  ProcessingManager.trim(sourceUri, {
+    startTime: ends.start / 2, //needed divide by 2 for bug in module
+    endTime: ends.end,
+    quality: 'passthrough',
+  }).then((data: any) => handleData(data));
+};
+
 export const cropVideo = (
   sourceUri: string,
   handleData: (data: any) => any,
-- 
cgit v1.2.3-70-g09d2


From 3953720cefb0a5e25fedea61c2c56d0ac23cbc7f Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Thu, 15 Jul 2021 16:43:58 -0400
Subject: Remove redundant import.

---
 src/components/comments/ZoomInCropper.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/components/comments')

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index a4e86c35..8563288e 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -11,7 +11,6 @@ import {
   cropVideo,
   trimVideo,
   HeaderHeight,
-  numberWithCommas,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
 } from '../../utils';
-- 
cgit v1.2.3-70-g09d2