4 files changed, 119 insertions, 3 deletions
diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
new file mode 100644
index 00000000..f011d222
--- /dev/null
+++ b/src/components/moments/trimmer.tsx
@@ -0,0 +1,102 @@
+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;
+  hideTrimmer: boolean;
+}> = ({source, styles, hideTrimmer}) => {
+  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)) {
+      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 / 2, //need to divide by two for bug in module
+      endTime: end,
+      // saveToCameraRoll: true, // default is false // iOS only
+      saveWithCurrentDate: true, // default is false // iOS only
+      quality: 'highest',
+    }).then((data: any) => console.log('trim', 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.
+        onLoad={(payload) => {
+          console.log(payload, source);
+          setEnd(payload.duration);
+        }}
+        onProgress={(e) => {
+          if (!paused) {
+            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);
+        }}
+      />
+      {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);
+          }}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 2282ecad..10e42e6d 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -186,9 +186,9 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
                 } else {
                   // is this a video?
                   if (media.duration !== null) {
-                    navigateToCaptionScreen(true, media.path);
+                    navigateToCaptionScreen(true, media.sourceURL);
                   } else {
-                    navigateToCropper(media.path);
+                    navigateToCropper(media.sourceURL);
                   }
                 }
               }}
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 1232eb66..383737e7 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -49,7 +49,7 @@ import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
 import {isIPhoneX, normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
-
+import {TrimmerPlayer} from '../../components/moments/trimmer';
 /**
  * Upload Screen to allow users to upload posts to Tagg
  */
@@ -365,6 +365,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     </SearchBackground>
   );
 };
+
 const styles = StyleSheet.create({
   contentContainer: {
     paddingTop: StatusBarHeight,
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index 4f933b0c..f95499a5 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -8,6 +8,7 @@ import {
   TakePictureOptions,
   TakePictureResponse,
 } from 'react-native-camera';
+
 import ImagePicker, {ImageOrVideo, Video} from 'react-native-image-crop-picker';
 import {ERROR_UPLOAD} from '../constants/strings';
 
@@ -92,6 +93,18 @@ export const navigateToVideoPicker = (callback: (vid: Video) => void) => {
     });
 };
 
+const options = {
+  compress: {
+    width: 1080,
+    height: 1920,
+    bitrateMultiplier: 3,
+    saveToCameraRoll: true, // default is false, iOS only
+    saveWithCurrentDate: true, // default is false, iOS only
+    minimumBitrate: 300000,
+    // removeAudio: true, // default is false
+  },
+};
+
 export const showGIFFailureAlert = (onSuccess: () => void) =>
   Alert.alert(
     'Warning',