diff options
| -rw-r--r-- | package.json | 7 | ||||
| -rw-r--r-- | src/screens/moments/CameraScreen.tsx | 28 | ||||
| -rw-r--r-- | yarn.lock | 9 |
3 files changed, 39 insertions, 5 deletions
diff --git a/package.json b/package.json index 63203775..42e94b39 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "react-native": "0.63.3", "react-native-animatable": "^1.3.3", "react-native-camera": "^3.44.1", + "react-native-circular-progress": "^1.3.7", "react-native-confirmation-code-field": "^6.5.0", "react-native-contacts": "^6.0.4", "react-native-controlled-mentions": "^2.2.5", @@ -47,8 +48,8 @@ "react-native-haptic-feedback": "^1.11.0", "react-native-hyperlink": "^0.0.19", "react-native-image-crop-picker": "^0.36.0", - "react-native-image-picker": "^4.0.4", "react-native-image-pan-zoom": "^2.1.12", + "react-native-image-picker": "^4.0.4", "react-native-image-resizer": "^1.4.4", "react-native-inappbrowser-reborn": "^3.5.0", "react-native-linear-gradient": "^2.5.6", @@ -61,7 +62,7 @@ "react-native-share": "^5.1.7", "react-native-snap-carousel": "^3.9.1", "react-native-splash-screen": "^3.2.0", - "react-native-svg": "^12.1.0", + "react-native-svg": "^12.1.1", "react-native-vector-icons": "^7.0.0", "react-native-video": "^5.1.1", "react-promise-tracker": "^2.1.0", @@ -111,4 +112,4 @@ "./node_modules/react-native-gesture-handler/jestSetup.js" ] } -}
\ No newline at end of file +} 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 @@ -6434,6 +6434,13 @@ react-native-camera@^3.44.1: dependencies: prop-types "^15.6.2" +react-native-circular-progress@^1.3.7: + version "1.3.7" + resolved "https://registry.yarnpkg.com/react-native-circular-progress/-/react-native-circular-progress-1.3.7.tgz#cc430fbc612bd01134a8fc9667be107591ae6959" + integrity sha512-Lpe4Sb0Sdfdxopl6sEc3ooKnwlK5j1nKGq5lgi9UKDFKO6iBAszeH+PiUt6acGSRbKMH1av+9G9ni9r/6T0+nQ== + dependencies: + prop-types "^15.7.2" + react-native-confirmation-code-field@^6.5.0: version "6.7.0" resolved "https://registry.yarnpkg.com/react-native-confirmation-code-field/-/react-native-confirmation-code-field-6.7.0.tgz#81f5e646898addb3243cf89d41d884b0762ae962" @@ -6657,7 +6664,7 @@ react-native-svg-transformer@^0.14.3: path-dirname "^1.0.2" semver "^5.6.0" -react-native-svg@^12.1.0: +react-native-svg@^12.1.1: version "12.1.1" resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.1.tgz#5f292410b8bcc07bbc52b2da7ceb22caf5bcaaee" integrity sha512-NIAJ8jCnXGCqGWXkkJ1GTzO4a3Md5at5sagYV8Vh4MXYnL4z5Rh428Wahjhh+LIjx40EE5xM5YtwyJBqOIba2Q== |