From e595e314f306c703fca779dff174690b33ebd612 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Fri, 6 Aug 2021 15:30:09 -0400
Subject: Basic additions

---
 src/screens/moments/CameraScreen.tsx | 61 +++++++++++++++++++++++++++---------
 1 file changed, 47 insertions(+), 14 deletions(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index c3ecdb14..483bfe38 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -33,6 +33,8 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const [isRecording, setIsRecording] = useState<boolean>(false);
   const [pictureProcessing, setPictureProcessing] = useState<boolean>(false);
   const [mounted, setMounted] = useState<boolean>(false);
+  const [vidUri, setVidUri] = useState<string>();
+  const [videoRecordStart, setVideoRecordStart] = useState<boolean>(false);
 
   useFocusEffect(
     useCallback(() => {
@@ -43,6 +45,9 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
       // reset in case we have returned to this screen
       setPictureProcessing(false);
 
+      // reset in case this wasn't properly called
+      setIsRecording(false);
+
       // in case the preview image gets stuck
       if (mounted) {
         cameraRef?.current?.resumePreview();
@@ -121,6 +126,25 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
             setCameraType(cameraType === 'front' ? 'back' : 'front');
           }
         }}
+        onRecordingStart={(event: {
+          nativeEvent: {
+            uri: string;
+            videoOrientation: number;
+            deviceOrientation: number;
+          };
+        }) => {
+          console.log('start', event.nativeEvent.uri);
+          setIsRecording(true);
+          setVidUri(event.nativeEvent.uri);
+          setVideoRecordStart(true);
+        }}
+        onRecordingEnd={() => {
+          if (videoRecordStart && vidUri) {
+            navigateToEditMedia(vidUri);
+          }
+          setVideoRecordStart(false);
+          setIsRecording(false);
+        }}
       />
       {!pictureProcessing && (
         <View style={[styles.bottomContainer, {bottom: tabBarHeight}]}>
@@ -132,29 +156,38 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
                 : styles.captureButtonContainer
             }
             activeOpacity={1}
-            onLongPress={() => {
-              takeVideo(cameraRef, (vid) => navigateToEditMedia(vid.uri));
-              setIsRecording(true);
+            onLongPress={async () => {
+              const resetAndStartCameraRecording = async () => {
+                if (await cameraRef.current?.isRecording()) {
+                  cameraRef.current?.stopRecording();
+                }
+              };
+
+              await resetAndStartCameraRecording();
+              takeVideo(cameraRef, (vid) => setVidUri(vid.uri));
             }}
             onPressOut={async () => {
               const cancelRecording = async () => {
-                if (await cameraRef.current?.isRecording()) {
+                if (isRecording && (await cameraRef.current?.isRecording())) {
                   cameraRef.current?.stopRecording();
-                  setIsRecording(false);
+                } else {
+                  takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
                 }
+                setIsRecording(false);
               };
+              setPictureProcessing(true);
               cancelRecording();
               // tmp fix for when the animation glitches during the beginning of
               // recording causing onPressOut to not be detected.
-              setTimeout(() => {
-                cancelRecording();
-              }, 500);
-              setTimeout(() => {
-                cancelRecording();
-              }, 1000);
-              setTimeout(() => {
-                cancelRecording();
-              }, 1500);
+              // setTimeout(() => {
+              //   cancelRecording();
+              // }, 500);
+              // setTimeout(() => {
+              //   cancelRecording();
+              // }, 1000);
+              // setTimeout(() => {
+              //   cancelRecording();
+              // }, 1500);
             }}
             onPress={() => {
               if (!pictureProcessing) {
-- 
cgit v1.2.3-70-g09d2


From 59975109d3f6945ac5153e775e6f91f933acc67e Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Fri, 6 Aug 2021 16:06:20 -0400
Subject: Correct changes

---
 src/screens/moments/CameraScreen.tsx | 57 ++++++++++++++----------------------
 1 file changed, 22 insertions(+), 35 deletions(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 483bfe38..c57755b4 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -36,6 +36,13 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const [vidUri, setVidUri] = useState<string>();
   const [videoRecordStart, setVideoRecordStart] = useState<boolean>(false);
 
+  const killUnnecessaryVideo = async () => {
+    setVideoRecordStart(false);
+    if (await cameraRef.current?.isRecording()) {
+      cameraRef.current?.stopRecording();
+    }
+  };
+
   useFocusEffect(
     useCallback(() => {
       navigation.dangerouslyGetParent()?.setOptions({
@@ -75,6 +82,17 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
     setMounted(true);
   }, []);
 
+  /*
+   * Triggers when vidUri updates
+   */
+  useEffect(() => {
+    if (videoRecordStart && vidUri) {
+      navigateToEditMedia(vidUri);
+    }
+    setVideoRecordStart(false);
+    setIsRecording(false);
+  }, [vidUri]);
+
   const navigateToEditMedia = (uri: string) => {
     cameraRef?.current?.resumePreview();
     navigation.navigate('EditMedia', {
@@ -126,25 +144,10 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
             setCameraType(cameraType === 'front' ? 'back' : 'front');
           }
         }}
-        onRecordingStart={(event: {
-          nativeEvent: {
-            uri: string;
-            videoOrientation: number;
-            deviceOrientation: number;
-          };
-        }) => {
-          console.log('start', event.nativeEvent.uri);
+        onRecordingStart={() => {
           setIsRecording(true);
-          setVidUri(event.nativeEvent.uri);
           setVideoRecordStart(true);
         }}
-        onRecordingEnd={() => {
-          if (videoRecordStart && vidUri) {
-            navigateToEditMedia(vidUri);
-          }
-          setVideoRecordStart(false);
-          setIsRecording(false);
-        }}
       />
       {!pictureProcessing && (
         <View style={[styles.bottomContainer, {bottom: tabBarHeight}]}>
@@ -157,13 +160,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
             }
             activeOpacity={1}
             onLongPress={async () => {
-              const resetAndStartCameraRecording = async () => {
-                if (await cameraRef.current?.isRecording()) {
-                  cameraRef.current?.stopRecording();
-                }
-              };
-
-              await resetAndStartCameraRecording();
+              await killUnnecessaryVideo();
               takeVideo(cameraRef, (vid) => setVidUri(vid.uri));
             }}
             onPressOut={async () => {
@@ -177,23 +174,13 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
               };
               setPictureProcessing(true);
               cancelRecording();
-              // tmp fix for when the animation glitches during the beginning of
-              // recording causing onPressOut to not be detected.
-              // setTimeout(() => {
-              //   cancelRecording();
-              // }, 500);
-              // setTimeout(() => {
-              //   cancelRecording();
-              // }, 1000);
-              // setTimeout(() => {
-              //   cancelRecording();
-              // }, 1500);
             }}
-            onPress={() => {
+            onPress={async () => {
               if (!pictureProcessing) {
                 setPictureProcessing(true);
               }
               takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
+              await killUnnecessaryVideo();
             }}>
             <View style={styles.captureButton} />
           </TouchableOpacity>
-- 
cgit v1.2.3-70-g09d2


From 90f9056e26b300e63a862e54eefac6c5befaba3b Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Fri, 6 Aug 2021 16:11:35 -0400
Subject: Adding extra kills

---
 src/screens/moments/CameraScreen.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index c57755b4..ba692ded 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -54,6 +54,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
 
       // reset in case this wasn't properly called
       setIsRecording(false);
+      killUnnecessaryVideo();
 
       // in case the preview image gets stuck
       if (mounted) {
@@ -173,7 +174,8 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
                 setIsRecording(false);
               };
               setPictureProcessing(true);
-              cancelRecording();
+              await cancelRecording();
+              await killUnnecessaryVideo();
             }}
             onPress={async () => {
               if (!pictureProcessing) {
-- 
cgit v1.2.3-70-g09d2


From f7cb9ac034829d986b781dc5ea97c3dd0beed047 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Fri, 6 Aug 2021 16:16:26 -0400
Subject: Fix unnecessary kill

---
 src/screens/moments/CameraScreen.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index ba692ded..f2c55b9c 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -87,7 +87,9 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
    * Triggers when vidUri updates
    */
   useEffect(() => {
+    console.log('effect', videoRecordStart, vidUri);
     if (videoRecordStart && vidUri) {
+      console.log('navigate');
       navigateToEditMedia(vidUri);
     }
     setVideoRecordStart(false);
@@ -175,7 +177,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
               };
               setPictureProcessing(true);
               await cancelRecording();
-              await killUnnecessaryVideo();
             }}
             onPress={async () => {
               if (!pictureProcessing) {
-- 
cgit v1.2.3-70-g09d2


From f75d83f1de9f0f49a128c8c1712590337fe30ffc Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Fri, 6 Aug 2021 16:17:52 -0400
Subject: Killed another unnecessary kill

---
 src/screens/moments/CameraScreen.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index f2c55b9c..69b6a30d 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -54,7 +54,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
 
       // reset in case this wasn't properly called
       setIsRecording(false);
-      killUnnecessaryVideo();
 
       // in case the preview image gets stuck
       if (mounted) {
-- 
cgit v1.2.3-70-g09d2


From 183255b98b79f5402bfde7c405f566741f38f759 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Fri, 6 Aug 2021 16:58:24 -0400
Subject: Remove print statements

---
 src/screens/moments/CameraScreen.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 69b6a30d..46e68a98 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -86,9 +86,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
    * Triggers when vidUri updates
    */
   useEffect(() => {
-    console.log('effect', videoRecordStart, vidUri);
     if (videoRecordStart && vidUri) {
-      console.log('navigate');
       navigateToEditMedia(vidUri);
     }
     setVideoRecordStart(false);
-- 
cgit v1.2.3-70-g09d2


From eb2409404c5e3fe11529b5b237ac5863ae383e16 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Fri, 6 Aug 2021 17:11:10 -0400
Subject: Unrender camera when not in focus

---
 src/screens/moments/CameraScreen.tsx | 42 +++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 46e68a98..78a9169d 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -1,7 +1,7 @@
 import CameraRoll from '@react-native-community/cameraroll';
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {RouteProp} from '@react-navigation/core';
-import {useFocusEffect} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useRef, useCallback, useEffect, useState} from 'react';
 import {Modal, StyleSheet, TouchableOpacity, View} from 'react-native';
@@ -27,6 +27,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const {screenType, selectedCategory} = route.params;
   const cameraRef = useRef<RNCamera>(null);
   const tabBarHeight = useBottomTabBarHeight();
+  const focused = useIsFocused();
   const [cameraType, setCameraType] = useState<keyof CameraType>('back');
   const [flashMode, setFlashMode] = useState<keyof FlashMode>('off');
   const [mostRecentPhoto, setMostRecentPhoto] = useState<string>('');
@@ -94,7 +95,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   }, [vidUri]);
 
   const navigateToEditMedia = (uri: string) => {
-    cameraRef?.current?.resumePreview();
     navigation.navigate('EditMedia', {
       screenType,
       media: {
@@ -130,25 +130,27 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
         <CloseIcon height={25} width={25} color={'white'} />
       </TouchableOpacity>
       <FlashButton flashMode={flashMode} setFlashMode={setFlashMode} />
-      <RNCamera
-        ref={cameraRef}
-        style={styles.camera}
-        type={cameraType}
-        flashMode={
-          flashMode === 'on' && isRecording && cameraType === 'back'
-            ? 'torch'
-            : flashMode
-        }
-        onDoubleTap={() => {
-          if (!pictureProcessing) {
-            setCameraType(cameraType === 'front' ? 'back' : 'front');
+      {focused && (
+        <RNCamera
+          ref={cameraRef}
+          style={styles.camera}
+          type={cameraType}
+          flashMode={
+            flashMode === 'on' && isRecording && cameraType === 'back'
+              ? 'torch'
+              : flashMode
           }
-        }}
-        onRecordingStart={() => {
-          setIsRecording(true);
-          setVideoRecordStart(true);
-        }}
-      />
+          onDoubleTap={() => {
+            if (!pictureProcessing) {
+              setCameraType(cameraType === 'front' ? 'back' : 'front');
+            }
+          }}
+          onRecordingStart={() => {
+            setIsRecording(true);
+            setVideoRecordStart(true);
+          }}
+        />
+      )}
       {!pictureProcessing && (
         <View style={[styles.bottomContainer, {bottom: tabBarHeight}]}>
           <FlipButton cameraType={cameraType} setCameraType={setCameraType} />
-- 
cgit v1.2.3-70-g09d2


From f4f8336bc66ed8de46ebdb2902a5cb37aac1b932 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 6 Aug 2021 17:32:13 -0400
Subject: Add show camera

---
 src/screens/moments/CameraScreen.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 78a9169d..1f38a0bf 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -33,7 +33,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const [mostRecentPhoto, setMostRecentPhoto] = useState<string>('');
   const [isRecording, setIsRecording] = useState<boolean>(false);
   const [pictureProcessing, setPictureProcessing] = useState<boolean>(false);
-  const [mounted, setMounted] = useState<boolean>(false);
+  const [showCamera, setShowCamera] = useState<boolean>(true);
   const [vidUri, setVidUri] = useState<string>();
   const [videoRecordStart, setVideoRecordStart] = useState<boolean>(false);
 
@@ -44,6 +44,14 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
     }
   };
 
+  useEffect(() => {
+    if (!focused) {
+      setTimeout(() => {
+        setShowCamera(false);
+      }, 500);
+    }
+  }, [focused]);
+
   useFocusEffect(
     useCallback(() => {
       navigation.dangerouslyGetParent()?.setOptions({
@@ -56,10 +64,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
       // reset in case this wasn't properly called
       setIsRecording(false);
 
-      // in case the preview image gets stuck
-      if (mounted) {
-        cameraRef?.current?.resumePreview();
-      }
+      setShowCamera(true);
 
       return () => setIsRecording(false);
     }, [navigation]),
@@ -79,8 +84,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
       .catch((_err) =>
         console.log('Unable to fetch preview photo for gallery'),
       );
-
-    setMounted(true);
   }, []);
 
   /*
@@ -130,7 +133,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
         <CloseIcon height={25} width={25} color={'white'} />
       </TouchableOpacity>
       <FlashButton flashMode={flashMode} setFlashMode={setFlashMode} />
-      {focused && (
+      {showCamera && (
         <RNCamera
           ref={cameraRef}
           style={styles.camera}
-- 
cgit v1.2.3-70-g09d2


From 3329ed720fb336d9e5f893158754f630c7c2509d Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 6 Aug 2021 17:47:57 -0400
Subject: Cleanup code, Pause preview earlier

---
 src/screens/moments/CameraScreen.tsx | 15 +++++----------
 src/utils/camera.ts                  |  2 +-
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 1f38a0bf..739461a8 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -27,7 +27,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const {screenType, selectedCategory} = route.params;
   const cameraRef = useRef<RNCamera>(null);
   const tabBarHeight = useBottomTabBarHeight();
-  const focused = useIsFocused();
   const [cameraType, setCameraType] = useState<keyof CameraType>('back');
   const [flashMode, setFlashMode] = useState<keyof FlashMode>('off');
   const [mostRecentPhoto, setMostRecentPhoto] = useState<string>('');
@@ -44,14 +43,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
     }
   };
 
-  useEffect(() => {
-    if (!focused) {
-      setTimeout(() => {
-        setShowCamera(false);
-      }, 500);
-    }
-  }, [focused]);
-
   useFocusEffect(
     useCallback(() => {
       navigation.dangerouslyGetParent()?.setOptions({
@@ -66,7 +57,11 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
 
       setShowCamera(true);
 
-      return () => setIsRecording(false);
+      return () => {
+        setTimeout(() => {
+          setShowCamera(false);
+        }, 500);
+      };
     }, [navigation]),
   );
 
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index ec2615de..c9dec292 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -23,12 +23,12 @@ export const takePicture = (
   cameraRef: RefObject<RNCamera>,
   callback: (pic: TakePictureResponse) => void,
 ) => {
+  cameraRef.current?.pausePreview();
   if (cameraRef !== null) {
     const options: TakePictureOptions = {
       forceUpOrientation: true,
       orientation: 'portrait',
       writeExif: false,
-      pauseAfterCapture: true,
     };
     cameraRef.current?.takePictureAsync(options).then((pic) => {
       callback(pic);
-- 
cgit v1.2.3-70-g09d2


From 2dfbf05b9f7bdd4237f771dd8cc5a9dcbc2a3b06 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 6 Aug 2021 18:01:58 -0400
Subject: Add slight delay before playing video

---
 src/components/moments/TrimmerPlayer.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/moments/TrimmerPlayer.tsx b/src/components/moments/TrimmerPlayer.tsx
index 8d1cd156..d884e6bd 100644
--- a/src/components/moments/TrimmerPlayer.tsx
+++ b/src/components/moments/TrimmerPlayer.tsx
@@ -25,13 +25,19 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
   const playerRef = useRef<Video>();
   // Stores where the video is playing (seekTime)
   const [seekTime, setSeekTime] = useState<number>(0);
-  const [paused, setPaused] = useState<boolean>(false);
+  const [paused, setPaused] = useState<boolean>(true);
   // 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(() => {
+    setTimeout(() => {
+      setPaused(false);
+    }, 1000);
+  }, []);
+
   useEffect(() => {
     playerRef.current?.seek(seekTime);
   }, [seekTime]);
-- 
cgit v1.2.3-70-g09d2


From 7405eab2f1cd932c1bc5495f9d30f943951e99d0 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 6 Aug 2021 18:02:04 -0400
Subject: Add comment

---
 src/components/moments/TrimmerPlayer.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/moments/TrimmerPlayer.tsx b/src/components/moments/TrimmerPlayer.tsx
index d884e6bd..daec98cf 100644
--- a/src/components/moments/TrimmerPlayer.tsx
+++ b/src/components/moments/TrimmerPlayer.tsx
@@ -32,6 +32,9 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
   const [end, setEnd] = useState<number>(60);
   const [start, setStart] = useState<number>(0);
 
+  // Slight delay to play video since RNCamera can't record and play video here
+  // at the same time.
+  // see: https://github.com/react-native-camera/react-native-camera/issues/2592
   useEffect(() => {
     setTimeout(() => {
       setPaused(false);
-- 
cgit v1.2.3-70-g09d2


From c35282de924e4f938d013df94a2115e53e63b376 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 6 Aug 2021 18:10:41 -0400
Subject: Cleanup logic

---
 src/screens/moments/CameraScreen.tsx | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 739461a8..8a794ab8 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -33,11 +33,8 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const [isRecording, setIsRecording] = useState<boolean>(false);
   const [pictureProcessing, setPictureProcessing] = useState<boolean>(false);
   const [showCamera, setShowCamera] = useState<boolean>(true);
-  const [vidUri, setVidUri] = useState<string>();
-  const [videoRecordStart, setVideoRecordStart] = useState<boolean>(false);
 
   const killUnnecessaryVideo = async () => {
-    setVideoRecordStart(false);
     if (await cameraRef.current?.isRecording()) {
       cameraRef.current?.stopRecording();
     }
@@ -81,17 +78,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
       );
   }, []);
 
-  /*
-   * Triggers when vidUri updates
-   */
-  useEffect(() => {
-    if (videoRecordStart && vidUri) {
-      navigateToEditMedia(vidUri);
-    }
-    setVideoRecordStart(false);
-    setIsRecording(false);
-  }, [vidUri]);
-
   const navigateToEditMedia = (uri: string) => {
     navigation.navigate('EditMedia', {
       screenType,
@@ -145,7 +131,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
           }}
           onRecordingStart={() => {
             setIsRecording(true);
-            setVideoRecordStart(true);
           }}
         />
       )}
@@ -161,7 +146,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
             activeOpacity={1}
             onLongPress={async () => {
               await killUnnecessaryVideo();
-              takeVideo(cameraRef, (vid) => setVidUri(vid.uri));
+              takeVideo(cameraRef, (vid) => navigateToEditMedia(vid.uri));
             }}
             onPressOut={async () => {
               const cancelRecording = async () => {
-- 
cgit v1.2.3-70-g09d2


From 7577436d9fcddc6ddad92fa354ec74b35f8a788c Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 6 Aug 2021 18:13:41 -0400
Subject: Cleanup code

---
 src/screens/moments/CameraScreen.tsx | 29 ++++++++++++-----------------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 8a794ab8..2294072b 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -1,9 +1,9 @@
 import CameraRoll from '@react-native-community/cameraroll';
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {RouteProp} from '@react-navigation/core';
-import {useFocusEffect, useIsFocused} from '@react-navigation/native';
+import {useFocusEffect} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useRef, useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Modal, StyleSheet, TouchableOpacity, View} from 'react-native';
 import {CameraType, FlashMode, RNCamera} from 'react-native-camera';
 import {AnimatedCircularProgress} from 'react-native-circular-progress';
@@ -34,7 +34,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const [pictureProcessing, setPictureProcessing] = useState<boolean>(false);
   const [showCamera, setShowCamera] = useState<boolean>(true);
 
-  const killUnnecessaryVideo = async () => {
+  const stopVideoRecording = async () => {
     if (await cameraRef.current?.isRecording()) {
       cameraRef.current?.stopRecording();
     }
@@ -129,9 +129,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
               setCameraType(cameraType === 'front' ? 'back' : 'front');
             }
           }}
-          onRecordingStart={() => {
-            setIsRecording(true);
-          }}
+          onRecordingStart={() => setIsRecording(true)}
         />
       )}
       {!pictureProcessing && (
@@ -145,27 +143,24 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
             }
             activeOpacity={1}
             onLongPress={async () => {
-              await killUnnecessaryVideo();
+              await stopVideoRecording();
               takeVideo(cameraRef, (vid) => navigateToEditMedia(vid.uri));
             }}
             onPressOut={async () => {
-              const cancelRecording = async () => {
-                if (isRecording && (await cameraRef.current?.isRecording())) {
-                  cameraRef.current?.stopRecording();
-                } else {
-                  takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
-                }
-                setIsRecording(false);
-              };
               setPictureProcessing(true);
-              await cancelRecording();
+              if (isRecording && (await cameraRef.current?.isRecording())) {
+                cameraRef.current?.stopRecording();
+              } else {
+                takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
+              }
+              setIsRecording(false);
             }}
             onPress={async () => {
               if (!pictureProcessing) {
                 setPictureProcessing(true);
               }
               takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
-              await killUnnecessaryVideo();
+              await stopVideoRecording();
             }}>
             <View style={styles.captureButton} />
           </TouchableOpacity>
-- 
cgit v1.2.3-70-g09d2


From cba64717bf87020e8dcf229408a9ca79d6c7aa21 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 6 Aug 2021 18:44:04 -0400
Subject: Cleanup code, Fix preview bug

---
 src/screens/moments/CameraScreen.tsx | 43 ++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 2294072b..c86f2efe 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -30,8 +30,8 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const [cameraType, setCameraType] = useState<keyof CameraType>('back');
   const [flashMode, setFlashMode] = useState<keyof FlashMode>('off');
   const [mostRecentPhoto, setMostRecentPhoto] = useState<string>('');
-  const [isRecording, setIsRecording] = useState<boolean>(false);
-  const [pictureProcessing, setPictureProcessing] = useState<boolean>(false);
+  const [recordingStarted, setRecordingStarted] = useState<boolean>(false);
+  const [showCaptureButtons, setShowCaptureButtons] = useState<boolean>(false);
   const [showCamera, setShowCamera] = useState<boolean>(true);
 
   const stopVideoRecording = async () => {
@@ -45,15 +45,9 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
       navigation.dangerouslyGetParent()?.setOptions({
         tabBarVisible: false,
       });
-
-      // reset in case we have returned to this screen
-      setPictureProcessing(false);
-
-      // reset in case this wasn't properly called
-      setIsRecording(false);
-
+      setRecordingStarted(false);
+      setShowCaptureButtons(true);
       setShowCamera(true);
-
       return () => {
         setTimeout(() => {
           setShowCamera(false);
@@ -107,7 +101,9 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
     <View style={styles.container}>
       <Modal
         transparent={true}
-        visible={isRecording && cameraType === 'front' && flashMode === 'on'}>
+        visible={
+          recordingStarted && cameraType === 'front' && flashMode === 'on'
+        }>
         <View style={styles.flashView} />
       </Modal>
       <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
@@ -120,24 +116,24 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
           style={styles.camera}
           type={cameraType}
           flashMode={
-            flashMode === 'on' && isRecording && cameraType === 'back'
+            flashMode === 'on' && recordingStarted && cameraType === 'back'
               ? 'torch'
               : flashMode
           }
           onDoubleTap={() => {
-            if (!pictureProcessing) {
+            if (showCaptureButtons) {
               setCameraType(cameraType === 'front' ? 'back' : 'front');
             }
           }}
-          onRecordingStart={() => setIsRecording(true)}
+          onRecordingStart={() => setRecordingStarted(true)}
         />
       )}
-      {!pictureProcessing && (
+      {showCaptureButtons && (
         <View style={[styles.bottomContainer, {bottom: tabBarHeight}]}>
           <FlipButton cameraType={cameraType} setCameraType={setCameraType} />
           <TouchableOpacity
             style={
-              isRecording
+              recordingStarted
                 ? styles.captureButtonVideoContainer
                 : styles.captureButtonContainer
             }
@@ -147,24 +143,27 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
               takeVideo(cameraRef, (vid) => navigateToEditMedia(vid.uri));
             }}
             onPressOut={async () => {
-              setPictureProcessing(true);
-              if (isRecording && (await cameraRef.current?.isRecording())) {
+              setShowCaptureButtons(false);
+              if (
+                recordingStarted &&
+                (await cameraRef.current?.isRecording())
+              ) {
                 cameraRef.current?.stopRecording();
               } else {
                 takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
               }
-              setIsRecording(false);
+              setRecordingStarted(false);
             }}
             onPress={async () => {
-              if (!pictureProcessing) {
-                setPictureProcessing(true);
+              if (showCaptureButtons) {
+                setShowCaptureButtons(false);
               }
               takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
               await stopVideoRecording();
             }}>
             <View style={styles.captureButton} />
           </TouchableOpacity>
-          {isRecording && (
+          {recordingStarted && (
             <AnimatedCircularProgress
               size={95}
               width={6}
-- 
cgit v1.2.3-70-g09d2


From 3de50e21aa5daf3106d93cf1ac024adc7918ee1f Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 6 Aug 2021 18:44:11 -0400
Subject: Fix preview bug

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

diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index c9dec292..ec2615de 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -23,12 +23,12 @@ export const takePicture = (
   cameraRef: RefObject<RNCamera>,
   callback: (pic: TakePictureResponse) => void,
 ) => {
-  cameraRef.current?.pausePreview();
   if (cameraRef !== null) {
     const options: TakePictureOptions = {
       forceUpOrientation: true,
       orientation: 'portrait',
       writeExif: false,
+      pauseAfterCapture: true,
     };
     cameraRef.current?.takePictureAsync(options).then((pic) => {
       callback(pic);
-- 
cgit v1.2.3-70-g09d2


From 54ca15a4d68d107be767938a83612843db2d04c2 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 6 Aug 2021 19:13:50 -0400
Subject: Add pause preview, Cleanup logics

---
 src/screens/moments/CameraScreen.tsx | 34 ++++++++++------------------------
 src/utils/camera.ts                  |  2 +-
 2 files changed, 11 insertions(+), 25 deletions(-)

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index c86f2efe..bd94bf63 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -33,12 +33,13 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const [recordingStarted, setRecordingStarted] = useState<boolean>(false);
   const [showCaptureButtons, setShowCaptureButtons] = useState<boolean>(false);
   const [showCamera, setShowCamera] = useState<boolean>(true);
+  const [videoUri, setVideoUri] = useState<string | undefined>();
 
-  const stopVideoRecording = async () => {
-    if (await cameraRef.current?.isRecording()) {
-      cameraRef.current?.stopRecording();
+  useEffect(() => {
+    if (recordingStarted && videoUri) {
+      navigateToEditMedia(videoUri);
     }
-  };
+  }, [videoUri]);
 
   useFocusEffect(
     useCallback(() => {
@@ -138,28 +139,13 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
                 : styles.captureButtonContainer
             }
             activeOpacity={1}
-            onLongPress={async () => {
-              await stopVideoRecording();
-              takeVideo(cameraRef, (vid) => navigateToEditMedia(vid.uri));
-            }}
-            onPressOut={async () => {
+            onLongPress={() =>
+              takeVideo(cameraRef, (vid) => setVideoUri(vid.uri))
+            }
+            onPressOut={() => cameraRef.current?.stopRecording()}
+            onPress={() => {
               setShowCaptureButtons(false);
-              if (
-                recordingStarted &&
-                (await cameraRef.current?.isRecording())
-              ) {
-                cameraRef.current?.stopRecording();
-              } else {
-                takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
-              }
-              setRecordingStarted(false);
-            }}
-            onPress={async () => {
-              if (showCaptureButtons) {
-                setShowCaptureButtons(false);
-              }
               takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
-              await stopVideoRecording();
             }}>
             <View style={styles.captureButton} />
           </TouchableOpacity>
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index ec2615de..5f02f653 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -24,11 +24,11 @@ export const takePicture = (
   callback: (pic: TakePictureResponse) => void,
 ) => {
   if (cameraRef !== null) {
+    cameraRef.current?.pausePreview();
     const options: TakePictureOptions = {
       forceUpOrientation: true,
       orientation: 'portrait',
       writeExif: false,
-      pauseAfterCapture: true,
     };
     cameraRef.current?.takePictureAsync(options).then((pic) => {
       callback(pic);
-- 
cgit v1.2.3-70-g09d2


From fbbeb7b7e602c9f5911298667f04c9e9302a562a Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 6 Aug 2021 19:15:36 -0400
Subject: Add error handling

---
 src/utils/camera.ts | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index 5f02f653..6edc2b4f 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -30,9 +30,14 @@ export const takePicture = (
       orientation: 'portrait',
       writeExif: false,
     };
-    cameraRef.current?.takePictureAsync(options).then((pic) => {
-      callback(pic);
-    });
+    cameraRef.current
+      ?.takePictureAsync(options)
+      .then((pic) => {
+        callback(pic);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   }
 };
 
@@ -46,9 +51,14 @@ export const takeVideo = (
       maxDuration: MAX_VIDEO_RECORDING_DURATION,
       quality: '1080p',
     };
-    cameraRef.current?.recordAsync(options).then((vid) => {
-      callback(vid);
-    });
+    cameraRef.current
+      ?.recordAsync(options)
+      .then((vid) => {
+        callback(vid);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   }
 };
 
-- 
cgit v1.2.3-70-g09d2