2 files changed, 107 insertions, 12 deletions

diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index ccdd42b0..f95499a5 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -8,10 +8,9 @@ import {
   TakePictureOptions,
   TakePictureResponse,
 } from 'react-native-camera';
-import {ProcessingManager} from 'react-native-video-processing';
+
 import ImagePicker, {ImageOrVideo, Video} from 'react-native-image-crop-picker';
 import {ERROR_UPLOAD} from '../constants/strings';
-import RNFetchBlob from 'rn-fetch-blob';
 
 /*
  * Captures a photo and pauses to show the preview of the picture taken
@@ -69,9 +68,6 @@ export const navigateToImagePicker = (
     mediaType: 'any',
   })
     .then((media) => {
-      const path: String = getVideoPath(media);
-      ProcessingManager.compress(path, options.compress) // like VideoPlayer compress options
-        .then((data: any) => console.log(data));
       callback(media);
     })
     .catch((err) => {
@@ -81,19 +77,12 @@ export const navigateToImagePicker = (
     });
 };
 
-const getVideoPath = (uri) => {
-  console.log(uri);
-  return uri.path;
-};
-
 export const navigateToVideoPicker = (callback: (vid: Video) => void) => {
   ImagePicker.openPicker({
     mediaType: 'video',
   })
     .then(async (vid) => {
       if (vid.path) {
-        ProcessingManager.compress(vid.path, options.compress) // like VideoPlayer compress options
-          .then((data: any) => console.log(data));
         callback(vid);
       }
     })
diff --git a/src/utils/trimmer.tsx b/src/utils/trimmer.tsx
new file mode 100644
index 00000000..11d93ea8
--- /dev/null
+++ b/src/utils/trimmer.tsx
@@ -0,0 +1,106 @@
+import React, {useEffect, useState} from 'react';
+import Video from 'react-native-video';
+import {Trimmer, ProcessingManager} from 'react-native-video-processing';
+import {useRef} from 'react';
+
+export const TrimmerPlayer: React.FC<{source: string; styles: Object}> = ({
+  source,
+  styles,
+}) => {
+  const playerRef = useRef<Video>();
+
+  const [seekTime, setSeekTime] = useState<number>(0);
+  const [paused, setPaused] = useState<boolean>(false);
+  useEffect(() => {
+    playerRef.current?.seek(seekTime);
+  }, [seekTime]);
+
+  const [trackerTime, setTrackerTime] = useState<number>(0);
+  useEffect(() => {
+    if (!paused && (trackerTime >= end || trackerTime < start)) {
+      console.log('trackerTime reset start', start);
+      setTrackerTime(start);
+      playerRef.current?.seek(start);
+    }
+  }, [trackerTime]);
+
+  const [end, setEnd] = useState<number>(60);
+  const [start, setStart] = useState<number>(0);
+  useEffect(() => {
+    setSeekTime(start);
+    setTrackerTime(start);
+  }, [start]);
+  useEffect(() => {
+    setSeekTime(end);
+    setTrackerTime(end - 0.1);
+  }, [end]);
+
+  const trim = () => {
+    ProcessingManager.trim(source, {
+      startTime: start,
+      endTime: end,
+      saveToCameraRoll: true, // default is false // iOS only
+      saveWithCurrentDate: true, // default is false // iOS only
+      quality: 'highest',
+    }) // like VideoPlayer compress options
+      .then((data: any) => console.log(data));
+  };
+
+  return (
+    <>
+      <Video
+        ref={(ref) => {
+          playerRef.current = ref || undefined;
+        }}
+        source={{uri: source}} // Looks for .mp4 file (background.mp4) in the given expansion version.
+        rate={1.0} // 0 is paused, 1 is normal.
+        volume={1.0} // 0 is muted, 1 is normal.
+        muted={false} // Mutes the audio entirely.
+        paused={paused} // Pauses playback entirely.
+        //resizeMode="cover" // Fill the whole screen at aspect ratio.
+        repeat={true} // Repeat forever.
+        //onLoadStart={this.loadStart} // Callback when video starts to load
+        onLoad={(payload) => {
+          console.log(payload);
+          setEnd(payload.duration);
+        }} // Callback when video loads
+        onProgress={(e) => {
+          //console.log('progress', e.currentTime);
+          if (!paused) {
+            // make sure within bounds
+            setTrackerTime(e.currentTime);
+          }
+        }} // Callback every ~250ms with currentTime
+        //onEnd={() => console.log('end')} // Callback when playback finishes
+        //onError={this.videoError} // Callback when video cannot be loaded
+        style={styles}
+        onTouchEnd={() => {
+          //setPaused((state) => !state);
+          trim();
+        }}
+      />
+      <Trimmer
+        source={source}
+        height={100}
+        width={350}
+        onTrackerMove={(e) => {
+          //console.log('trackerMove', e);
+          setPaused(true);
+          setSeekTime(e.currentTime);
+        }} // iOS only
+        // added .25 bc tracker is inaccurate
+        currentTime={trackerTime + 0.25} // use this prop to set tracker position iOS only
+        themeColor={'white'} // iOS only
+        showTrackerHandle={true}
+        thumbWidth={10} // iOS only
+        trackerColor={'green'} // iOS only
+        onChange={(e) => {
+          //console.log('endsChange', e);
+          setPaused(true);
+          setEnd(e.endTime);
+          setStart(e.startTime);
+        }}
+      />
+    </>
+  );
+};