Merge pull request #548 from brian-tagg/tma033-video-button

[TMA-1033] Video Button

1 files changed, 47 insertions, 62 deletions

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index c3ecdb14..bd94bf63 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -3,7 +3,7 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {RouteProp} from '@react-navigation/core';
 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';
@@ -30,25 +30,30 @@ 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 [mounted, setMounted] = useState<boolean>(false);
+  const [recordingStarted, setRecordingStarted] = useState<boolean>(false);
+  const [showCaptureButtons, setShowCaptureButtons] = useState<boolean>(false);
+  const [showCamera, setShowCamera] = useState<boolean>(true);
+  const [videoUri, setVideoUri] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (recordingStarted && videoUri) {
+      navigateToEditMedia(videoUri);
+    }
+  }, [videoUri]);
 
   useFocusEffect(
     useCallback(() => {
       navigation.dangerouslyGetParent()?.setOptions({
         tabBarVisible: false,
       });
-
-      // reset in case we have returned to this screen
-      setPictureProcessing(false);
-
-      // in case the preview image gets stuck
-      if (mounted) {
-        cameraRef?.current?.resumePreview();
-      }
-
-      return () => setIsRecording(false);
+      setRecordingStarted(false);
+      setShowCaptureButtons(true);
+      setShowCamera(true);
+      return () => {
+        setTimeout(() => {
+          setShowCamera(false);
+        }, 500);
+      };
     }, [navigation]),
   );
 
@@ -66,12 +71,9 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
       .catch((_err) =>
         console.log('Unable to fetch preview photo for gallery'),
       );
-
-    setMounted(true);
   }, []);
 
   const navigateToEditMedia = (uri: string) => {
-    cameraRef?.current?.resumePreview();
     navigation.navigate('EditMedia', {
       screenType,
       media: {
@@ -100,71 +102,54 @@ 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}>
         <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');
+      {showCamera && (
+        <RNCamera
+          ref={cameraRef}
+          style={styles.camera}
+          type={cameraType}
+          flashMode={
+            flashMode === 'on' && recordingStarted && cameraType === 'back'
+              ? 'torch'
+              : flashMode
           }
-        }}
-      />
-      {!pictureProcessing && (
+          onDoubleTap={() => {
+            if (showCaptureButtons) {
+              setCameraType(cameraType === 'front' ? 'back' : 'front');
+            }
+          }}
+          onRecordingStart={() => setRecordingStarted(true)}
+        />
+      )}
+      {showCaptureButtons && (
         <View style={[styles.bottomContainer, {bottom: tabBarHeight}]}>
           <FlipButton cameraType={cameraType} setCameraType={setCameraType} />
           <TouchableOpacity
             style={
-              isRecording
+              recordingStarted
                 ? styles.captureButtonVideoContainer
                 : styles.captureButtonContainer
             }
             activeOpacity={1}
-            onLongPress={() => {
-              takeVideo(cameraRef, (vid) => navigateToEditMedia(vid.uri));
-              setIsRecording(true);
-            }}
-            onPressOut={async () => {
-              const cancelRecording = async () => {
-                if (await cameraRef.current?.isRecording()) {
-                  cameraRef.current?.stopRecording();
-                  setIsRecording(false);
-                }
-              };
-              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);
-            }}
+            onLongPress={() =>
+              takeVideo(cameraRef, (vid) => setVideoUri(vid.uri))
+            }
+            onPressOut={() => cameraRef.current?.stopRecording()}
             onPress={() => {
-              if (!pictureProcessing) {
-                setPictureProcessing(true);
-              }
+              setShowCaptureButtons(false);
               takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
             }}>
             <View style={styles.captureButton} />
           </TouchableOpacity>
-          {isRecording && (
+          {recordingStarted && (
             <AnimatedCircularProgress
               size={95}
               width={6}