From 11286fa274d0f8c721b7d507fc64660eed4807fe Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Fri, 9 Jul 2021 15:36:12 -0400
Subject: Add states and components for video trimming.

---
 src/screens/profile/CaptionScreen.tsx |  44 +-------------
 src/utils/camera.ts                   |  13 +----
 src/utils/trimmer.tsx                 | 106 ++++++++++++++++++++++++++++++++++
 3 files changed, 110 insertions(+), 53 deletions(-)
 create mode 100644 src/utils/trimmer.tsx

(limited to 'src')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index c6cf767f..4b5ac0c5 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -15,7 +15,6 @@ import {
 } from 'react-native';
 import {MentionInputControlled} from '../../components';
 import {Button, normalize} from 'react-native-elements';
-import Video from 'react-native-video';
 import {useDispatch, useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
 import {SearchBackground} from '../../components';
@@ -43,8 +42,7 @@ import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
-import {Trimmer, VideoPlayer} from 'react-native-video-processing';
-
+import {TrimmerPlayer} from '../../utils/trimmer';
 /**
  * Upload Screen to allow users to upload posts to Tagg
  */
@@ -198,11 +196,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     }
   };
 
-  const [currentTime, setCurrentTime] = useState(0);
-  const [startTime, setStartTime] = useState(0);
-  // todo: update with vid times
-  const [endTime, setEndTime] = useState(60);
-
   return (
     <SearchBackground>
       {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />}
@@ -229,39 +222,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               {...{title: moment ? moment.moment_category : title ?? ''}}
             />
             {isMediaAVideo ? (
-              <>
-                <VideoPlayer
-                  //style={styles.media}
-                  ref={(ref) => (this.videoPlayerRef = ref)}
-                  startTime={startTime} // seconds
-                  endTime={endTime} // seconds
-                  play={true} // default false
-                  replay={true} // should player play video again if it's ended
-                  //rotate={true} // use this prop to rotate video if it captured in landscape mode iOS only
-                  source={mediaUri}
-                  playerWidth={360} // iOS only
-                  playerHeight={680} // iOS only
-                  //resizeMode={VideoPlayer.Constants.resizeMode.CONTAIN}
-                  onChange={({nativeEvent}) =>
-                    setCurrentTime(nativeEvent.currentTime)
-                  } // get Current time on every second
-                />
-                <Trimmer
-                  source={mediaUri}
-                  height={50}
-                  width={350}
-                  onTrackerMove={(e) => setCurrentTime(e.currentTime)} // iOS only
-                  currentTime={currentTime} // 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) => {
-                    setStartTime(e.startTime);
-                    setEndTime(e.endTime);
-                  }}
-                />
-              </>
+              <TrimmerPlayer source={mediaUri} styles={styles.media} />
             ) : (
               <Image
                 style={styles.media}
@@ -305,6 +266,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 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);
+        }}
+      />
+    </>
+  );
+};
-- 
cgit v1.2.3-70-g09d2


From e9678b4dc94f04c192ad5573bb2debc6e28f21b6 Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Fri, 9 Jul 2021 16:22:26 -0400
Subject: Fix cropping bug. Updated the source to be the correct higher res
 video.

---
 src/components/moments/trimmer.tsx    | 129 ++++++++++++++++++++++++++++++++++
 src/screens/moments/CameraScreen.tsx  |   4 +-
 src/screens/profile/CaptionScreen.tsx |   2 +-
 src/utils/trimmer.tsx                 | 106 ----------------------------
 4 files changed, 132 insertions(+), 109 deletions(-)
 create mode 100644 src/components/moments/trimmer.tsx
 delete mode 100644 src/utils/trimmer.tsx

(limited to 'src')

diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
new file mode 100644
index 00000000..ebf0d59e
--- /dev/null
+++ b/src/components/moments/trimmer.tsx
@@ -0,0 +1,129 @@
+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 / 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',
+    }) // like VideoPlayer compress options
+      .then((data: any) => console.log(data));
+  };
+
+  /*
+  const [tempSource, setSource] = useState<string>(source);
+  const getCompressedVideo = () => {
+    console.log(source);
+    //ProcessingManager.getVideoInfo(source, (info) => console.log('info', info));
+
+    ProcessingManager.compress(source, {
+      width: 720,
+      height: 1280,
+      bitrateMultiplier: 3,
+      saveToCameraRoll: true, // default is false, iOS only
+      saveWithCurrentDate: true, // default is false, iOS only
+      minimumBitrate: 300000,
+      removeAudio: true, // default is false
+    }).then((data: string) => {
+      //console.log('compressed', data);
+      setSource(data);
+    });
+  };
+  useEffect(() => {
+    getCompressedVideo();
+  }, []); */
+
+  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, source);
+          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={'white'} // iOS only
+        onChange={(e) => {
+          //console.log('endsChange', e);
+          setPaused(true);
+          setEnd(e.endTime);
+          setStart(e.startTime);
+        }}
+      />
+    </>
+  );
+};
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 75638c40..7643f6ab 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 4b5ac0c5..9816f1a3 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -42,7 +42,7 @@ import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
-import {TrimmerPlayer} from '../../utils/trimmer';
+import {TrimmerPlayer} from '../../components/moments/trimmer';
 /**
  * Upload Screen to allow users to upload posts to Tagg
  */
diff --git a/src/utils/trimmer.tsx b/src/utils/trimmer.tsx
deleted file mode 100644
index 11d93ea8..00000000
--- a/src/utils/trimmer.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-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);
-        }}
-      />
-    </>
-  );
-};
-- 
cgit v1.2.3-70-g09d2


From c51abe84b279402c3b3ad541e2af80754d0c67e7 Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Tue, 13 Jul 2021 15:53:08 -0400
Subject: Cleaned up comments and added hideTrimmer functionality

---
 src/components/moments/trimmer.tsx    | 91 ++++++++++++-----------------------
 src/screens/profile/CaptionScreen.tsx |  6 ++-
 2 files changed, 37 insertions(+), 60 deletions(-)

(limited to 'src')

diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
index ebf0d59e..f011d222 100644
--- a/src/components/moments/trimmer.tsx
+++ b/src/components/moments/trimmer.tsx
@@ -3,10 +3,11 @@ 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,
-}) => {
+export const TrimmerPlayer: React.FC<{
+  source: string;
+  styles: Object;
+  hideTrimmer: boolean;
+}> = ({source, styles, hideTrimmer}) => {
   const playerRef = useRef<Video>();
 
   const [seekTime, setSeekTime] = useState<number>(0);
@@ -18,7 +19,6 @@ export const TrimmerPlayer: React.FC<{source: string; styles: Object}> = ({
   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);
     }
@@ -39,36 +39,12 @@ export const TrimmerPlayer: React.FC<{source: string; styles: Object}> = ({
     ProcessingManager.trim(source, {
       startTime: start / 2, //need to divide by two for bug in module
       endTime: end,
-      saveToCameraRoll: true, // default is false // iOS only
+      // 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));
+    }).then((data: any) => console.log('trim', data));
   };
 
-  /*
-  const [tempSource, setSource] = useState<string>(source);
-  const getCompressedVideo = () => {
-    console.log(source);
-    //ProcessingManager.getVideoInfo(source, (info) => console.log('info', info));
-
-    ProcessingManager.compress(source, {
-      width: 720,
-      height: 1280,
-      bitrateMultiplier: 3,
-      saveToCameraRoll: true, // default is false, iOS only
-      saveWithCurrentDate: true, // default is false, iOS only
-      minimumBitrate: 300000,
-      removeAudio: true, // default is false
-    }).then((data: string) => {
-      //console.log('compressed', data);
-      setSource(data);
-    });
-  };
-  useEffect(() => {
-    getCompressedVideo();
-  }, []); */
-
   return (
     <>
       <Video
@@ -82,15 +58,12 @@ export const TrimmerPlayer: React.FC<{source: string; styles: Object}> = ({
         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, source);
           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
@@ -98,32 +71,32 @@ export const TrimmerPlayer: React.FC<{source: string; styles: Object}> = ({
         //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={'white'} // iOS only
-        onChange={(e) => {
-          //console.log('endsChange', e);
-          setPaused(true);
-          setEnd(e.endTime);
-          setStart(e.startTime);
+          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/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 9816f1a3..e77f40c2 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -222,7 +222,11 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               {...{title: moment ? moment.moment_category : title ?? ''}}
             />
             {isMediaAVideo ? (
-              <TrimmerPlayer source={mediaUri} styles={styles.media} />
+              <TrimmerPlayer
+                source={mediaUri}
+                styles={styles.media}
+                hideTrimmer={true}
+              />
             ) : (
               <Image
                 style={styles.media}
-- 
cgit v1.2.3-70-g09d2


From 45e9f5568e24becad0b1aefece41606a554c5d4d Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Tue, 13 Jul 2021 16:12:32 -0400
Subject: Commented out trimmer player input.

---
 src/screens/profile/CaptionScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 383737e7..d472bc7c 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';
+// import {TrimmerPlayer} from '../../components/moments/trimmer';
 /**
  * Upload Screen to allow users to upload posts to Tagg
  */
-- 
cgit v1.2.3-70-g09d2


From 648193580fb2648906864f439befff5dad480671 Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Tue, 13 Jul 2021 16:13:06 -0400
Subject: Commented out trimmer player input.

---
 src/screens/profile/CaptionScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index d472bc7c..954f8b24 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';
+//import {TrimmerPlayer} from '../../components/moments/trimmer';
 /**
  * Upload Screen to allow users to upload posts to Tagg
  */
-- 
cgit v1.2.3-70-g09d2


From 18eca660a7220e4bb67b7ddc267cfde7e8905c0d Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Tue, 13 Jul 2021 16:22:27 -0400
Subject: Small variable I forgot to delete.

---
 src/utils/camera.ts | 13 -------------
 1 file changed, 13 deletions(-)

(limited to 'src')

diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index f95499a5..4f933b0c 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -8,7 +8,6 @@ import {
   TakePictureOptions,
   TakePictureResponse,
 } from 'react-native-camera';
-
 import ImagePicker, {ImageOrVideo, Video} from 'react-native-image-crop-picker';
 import {ERROR_UPLOAD} from '../constants/strings';
 
@@ -93,18 +92,6 @@ 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',
-- 
cgit v1.2.3-70-g09d2


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 +++++++++--------
 src/components/moments/trimmer.tsx        | 22 +++++++---------------
 src/screens/moments/CameraScreen.tsx      |  9 ---------
 src/utils/camera.ts                       |  1 +
 4 files changed, 17 insertions(+), 32 deletions(-)

(limited to 'src')

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);
               }}
diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
index f011d222..2bd3eb41 100644
--- a/src/components/moments/trimmer.tsx
+++ b/src/components/moments/trimmer.tsx
@@ -1,13 +1,14 @@
 import React, {useEffect, useState} from 'react';
 import Video from 'react-native-video';
-import {Trimmer, ProcessingManager} from 'react-native-video-processing';
+import {Trimmer} from 'react-native-video-processing';
 import {useRef} from 'react';
 
 export const TrimmerPlayer: React.FC<{
   source: string;
-  styles: Object;
+  videoStyles: Object;
   hideTrimmer: boolean;
-}> = ({source, styles, hideTrimmer}) => {
+  handleLoad: Function;
+}> = ({source, videoStyles, hideTrimmer, handleLoad}) => {
   const playerRef = useRef<Video>();
 
   const [seekTime, setSeekTime] = useState<number>(0);
@@ -35,16 +36,6 @@ export const TrimmerPlayer: React.FC<{
     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
@@ -56,11 +47,12 @@ export const TrimmerPlayer: React.FC<{
         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.
+        resizeMode={'contain'}
         repeat={true} // Repeat forever.
         onLoad={(payload) => {
           console.log(payload, source);
           setEnd(payload.duration);
+          handleLoad(payload.naturalSize);
         }}
         onProgress={(e) => {
           if (!paused) {
@@ -69,7 +61,7 @@ export const TrimmerPlayer: React.FC<{
         }} // Callback every ~250ms with currentTime
         //onEnd={() => console.log('end')} // Callback when playback finishes
         //onError={this.videoError} // Callback when video cannot be loaded
-        style={styles}
+        style={videoStyles}
         onTouchEnd={() => {
           setPaused((state) => !state);
         }}
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index ef52a56f..ee5834cb 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -184,16 +184,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
                 ) {
                   showGIFFailureAlert(() => navigateToCropper(media.path));
                 } else {
-<<<<<<< HEAD
-                  // is this a video?
-                  if (media.duration !== null) {
-                    navigateToCaptionScreen(true, media.sourceURL);
-                  } else {
-                    navigateToCropper(media.sourceURL);
-                  }
-=======
                   navigateToCropper(media.path);
->>>>>>> master
                 }
               }}
             />
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index 4a72f5f4..9e37d62e 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -8,6 +8,7 @@ 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';
 
-- 
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')

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')

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')

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')

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


From a9258d74545930709a81fd29cc0e4819014d734b Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Thu, 15 Jul 2021 16:58:04 -0400
Subject: Try to fix tracker issue. Still not working perfectly.

---
 src/components/moments/trimmer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
index 2dae23f7..aa6aa8c0 100644
--- a/src/components/moments/trimmer.tsx
+++ b/src/components/moments/trimmer.tsx
@@ -31,11 +31,11 @@ export const TrimmerPlayer: React.FC<{
   const [start, setStart] = useState<number>(0);
   useEffect(() => {
     setSeekTime(start);
-    setTrackerTime(start - 0.05);
+    setTrackerTime(start);
   }, [start]);
   useEffect(() => {
     setSeekTime(end);
-    setTrackerTime(end - 0.125);
+    setTrackerTime(end);
   }, [end]);
 
   useEffect(() => onChangedEndpoints({end, start}), [end, start]);
-- 
cgit v1.2.3-70-g09d2


From 5d57346e80cbab3d5e0106b3c9edf25670852d71 Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Thu, 15 Jul 2021 17:02:00 -0400
Subject: Temp fix for tracker.

---
 src/components/moments/trimmer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
index aa6aa8c0..c9e8a6c5 100644
--- a/src/components/moments/trimmer.tsx
+++ b/src/components/moments/trimmer.tsx
@@ -35,7 +35,7 @@ export const TrimmerPlayer: React.FC<{
   }, [start]);
   useEffect(() => {
     setSeekTime(end);
-    setTrackerTime(end);
+    setTrackerTime(start);
   }, [end]);
 
   useEffect(() => onChangedEndpoints({end, start}), [end, start]);
@@ -79,7 +79,7 @@ export const TrimmerPlayer: React.FC<{
           setPaused(true);
           setSeekTime(e.currentTime);
         }} // iOS only
-        currentTime={trackerTime + 0.25} // added .25 bc tracker is inaccurate
+        currentTime={trackerTime} // added .25 bc tracker is inaccurate
         themeColor={'white'} // iOS only
         // showTrackerHandle={true}
         thumbWidth={10} // iOS only
-- 
cgit v1.2.3-70-g09d2


From f25238c132c855672854612d113e9abf4c759d38 Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Fri, 16 Jul 2021 13:27:31 -0400
Subject: Update to video quality and master branch integration.

---
 src/utils/camera.ts | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index 5c7f5ee0..a7d562d0 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -66,6 +66,7 @@ export const navigateToImagePicker = (
       'UserLibrary',
     ],
     mediaType: 'any',
+    compressVideoPreset: 'Passthrough',
   })
     .then((media) => {
       callback(media);
@@ -77,22 +78,6 @@ export const navigateToImagePicker = (
     });
 };
 
-export const navigateToVideoPicker = (callback: (vid: Video) => void) => {
-  ImagePicker.openPicker({
-    mediaType: 'video',
-  })
-    .then(async (vid) => {
-      if (vid.path) {
-        callback(vid);
-      }
-    })
-    .catch((err) => {
-      if (err.code && err.code !== 'E_PICKER_CANCELLED') {
-        Alert.alert(ERROR_UPLOAD);
-      }
-    });
-};
-
 export const showGIFFailureAlert = (onSuccess: () => void) =>
   Alert.alert(
     'Warning',
-- 
cgit v1.2.3-70-g09d2


From ad3833942ead7c0f030ee8c5d33528a15a6164c2 Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Fri, 16 Jul 2021 13:45:43 -0400
Subject: Remove uneccessary innput.

---
 src/utils/camera.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index a7d562d0..5485b1ca 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -9,7 +9,7 @@ import {
   TakePictureResponse,
 } from 'react-native-camera';
 import {ProcessingManager} from 'react-native-video-processing';
-import ImagePicker, {ImageOrVideo, Video} from 'react-native-image-crop-picker';
+import ImagePicker, {ImageOrVideo} from 'react-native-image-crop-picker';
 import {ERROR_UPLOAD} from '../constants/strings';
 
 /*
-- 
cgit v1.2.3-70-g09d2


From 9d77a6c6a9c586ecaaee7efea752360cd5d88b3d Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Fri, 16 Jul 2021 14:36:15 -0400
Subject: Update files with pr review.

---
 src/components/moments/trimmer.tsx | 45 ++++++++++++++++++++------------------
 1 file changed, 24 insertions(+), 21 deletions(-)

(limited to 'src')

diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
index c9e8a6c5..c99eaa6f 100644
--- a/src/components/moments/trimmer.tsx
+++ b/src/components/moments/trimmer.tsx
@@ -11,24 +11,26 @@ export const TrimmerPlayer: React.FC<{
   handleLoad: Function;
   onChangedEndpoints: Function;
 }> = ({source, videoStyles, hideTrimmer, handleLoad, onChangedEndpoints}) => {
+  // Stores the reference to player for seeking
   const playerRef = useRef<Video>();
-
+  // Stores where the video is playing (seekTime)
   const [seekTime, setSeekTime] = useState<number>(0);
   const [paused, setPaused] = useState<boolean>(false);
+  // Stores where the tracker is
+  const [trackerTime, setTrackerTime] = useState<number>(0);
+  // Stores start/end of desired trimmed video
+  const [end, setEnd] = useState<number>(60);
+  const [start, setStart] = useState<number>(0);
+
   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);
@@ -37,22 +39,24 @@ export const TrimmerPlayer: React.FC<{
     setSeekTime(end);
     setTrackerTime(start);
   }, [end]);
-
+  // Callback so parent knows where the trimming endpts are
   useEffect(() => onChangedEndpoints({end, start}), [end, start]);
 
   return (
     <>
       <Video
+        // link to descr and use of props of video player ->
+        // https://github.com/react-native-video/react-native-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.
+        source={{uri: source}}
+        rate={1.0}
+        volume={1.0}
+        muted={false}
+        paused={paused}
         resizeMode={'contain'}
-        repeat={true} // Repeat forever.
+        repeat={true}
         onLoad={(payload) => {
           console.log(payload, source);
           setEnd(payload.duration);
@@ -63,14 +67,14 @@ export const TrimmerPlayer: React.FC<{
             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={videoStyles}
         onTouchEnd={() => {
           setPaused((state) => !state);
         }}
       />
       <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}
@@ -78,12 +82,11 @@ export const TrimmerPlayer: React.FC<{
         onTrackerMove={(e: {currentTime: number}) => {
           setPaused(true);
           setSeekTime(e.currentTime);
-        }} // iOS only
-        currentTime={trackerTime} // added .25 bc tracker is inaccurate
-        themeColor={'white'} // iOS only
-        // showTrackerHandle={true}
-        thumbWidth={10} // iOS only
-        trackerColor={'white'} // iOS only
+        }}
+        currentTime={trackerTime}
+        themeColor={'white'}
+        thumbWidth={10}
+        trackerColor={'white'}
         onChange={(e: {endTime: number; startTime: number}) => {
           setPaused(true);
           setEnd(e.endTime);
-- 
cgit v1.2.3-70-g09d2