Add circular progress bar

1 files changed, 27 insertions, 1 deletions

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index c759e5db..317a2b37 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -3,7 +3,13 @@ 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, {createRef, useCallback, useEffect, useState} from 'react';
+import React, {
+  createRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {CameraType, FlashMode, RNCamera} from 'react-native-camera';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
@@ -17,6 +23,9 @@ import {
 import {MainStackParams} from '../../routes';
 import {HeaderHeight, normalize, SCREEN_WIDTH} from '../../utils';
 import {showGIFFailureAlert, takePicture, takeVideo} from '../../utils/camera';
+import {AnimatedCircularProgress} from 'react-native-circular-progress';
+import {Easing} from 'react-native-reanimated';
+import {TAGG_LIGHT_PURPLE, TAGG_PURPLE} from '../../constants';
 
 type CameraScreenRouteProps = RouteProp<MainStackParams, 'CameraScreen'>;
 export type CameraScreenNavigationProps = StackNavigationProp<
@@ -30,12 +39,14 @@ interface CameraScreenProps {
 const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const {title, screenType} = route.params;
   const cameraRef = createRef<RNCamera>();
+  const circularProgress = createRef<AnimatedCircularProgress>();
   const tabBarHeight = useBottomTabBarHeight();
   const [cameraType, setCameraType] = useState<keyof CameraType>('front');
   const [flashMode, setFlashMode] = useState<keyof FlashMode>('off');
   const [mediaFromGallery, setMediaFromGallery] = useState<string>('');
   const [mostRecentPhoto, setMostRecentPhoto] = useState<string>('');
   const [showSaveButton, setShowSaveButton] = useState<boolean>(false);
+  const [isRecording, setIsRecording] = useState<boolean>(false);
 
   useFocusEffect(
     useCallback(() => {
@@ -121,14 +132,17 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
           <FlipButton cameraType={cameraType} setCameraType={setCameraType} />
         )}
         <TouchableOpacity
+          activeOpacity={1}
           onLongPress={() => {
             takeVideo(cameraRef, (vid) => {
               navigateToCaptionScreen(true, vid.uri);
             });
+            setIsRecording(true);
           }}
           onPressOut={async () => {
             if (await cameraRef.current?.isRecording()) {
               cameraRef.current?.stopRecording();
+              setIsRecording(false);
             }
           }}
           onPress={() => {
@@ -140,6 +154,18 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
           style={styles.captureButtonContainer}>
           <View style={styles.captureButton} />
         </TouchableOpacity>
+        {isRecording && (
+          <AnimatedCircularProgress
+            size={93}
+            width={4}
+            fill={100}
+            rotation={0}
+            duration={60000 + 1000} // an extra second for UI to load
+            tintColor={TAGG_PURPLE}
+            style={styles.bottomContainer}
+            lineCap={'round'}
+          />
+        )}
         <View style={styles.bottomRightContainer}>
           {mediaFromGallery ? (
             <TaggSquareButton