react-native-timacare 3.3.28 → 3.3.30

package/src/screens/toan-trinh-so/VehicleCamera.tsx

@@ -29,7 +29,11 @@ import {
   RESULTS,
   openSettings,
 } from 'react-native-permissions';
-import { RNCamera } from 'react-native-camera';
+import {
+  Camera as VisionCamera,
+  useCameraDevice,
+  useCameraFormat,
+} from 'react-native-vision-camera';
 import { commonStyles } from '../CommonStyles';
 import { ScreenNames } from '../../navigation';
 import { load, OCR_V2, save } from '../../utils/storage';
@@ -64,30 +68,30 @@ export default function VehicleCamera(props: any) {
   const [passPermission, setPassPermission] = useState(false);
 
   const myCamera = useRef(null);
+  const device = useCameraDevice('back');
+  const format = useCameraFormat(device, [
+    { photoResolution: { width: 1280, height: 720 } },
+  ]);
 
   const takePhoto = async () => {
+    if (myCamera.current == null || taking) return;
     setTaking(true);
-    const options = {
-      // width: 720,
-      base64: true,
-      pauseAfterCapture: true,
-      fixOrientation: false,
-      forceUpOrientation: false,
-      orientation: RNCamera.Constants.Orientation.portrait,
-    };
-    const data = await myCamera.current.takePictureAsync(options);
+    const data = await myCamera.current.takePhoto({
+      qualityPrioritization: 'quality',
+    });
+    const uri = 'file://' + data.path;
     setTaking(false);
     if (props?.route?.params?.front) {
       navigation.push(ScreenNames.VehicleRegistrationFront, {
-        uri: data?.uri,
+        uri,
         loan: props?.route?.params?.loan,
       });
     } else if (props.route?.params?.callback) {
       navigation.goBack();
-      props.route?.params?.callback(data?.uri);
+      props.route?.params?.callback(uri);
     } else {
       navigation.push(ScreenNames.VehicleRegistrationBack, {
-        uri: data?.uri,
+        uri,
         loan: props?.route?.params?.loan,
       });
     }
@@ -257,73 +261,68 @@ export default function VehicleCamera(props: any) {
     >
       {passPermission && shouldRenderCamera ? (
         <View style={{ flex: 1 }}>
-          <RNCamera
-            key={cameraKey}
-            ref={myCamera}
-            defaultVideoQuality={RNCamera.Constants.VideoQuality['720p']}
-            style={{
-              flex: 1,
-            }}
-            maxZoom={1}
-            androidCameraPermissionOptions={{
-              title: 'Permission to use camera',
-              message: 'We need your permission to use your camera',
-              buttonPositive: 'Ok',
-              buttonNegative: 'Cancel',
-            }}
-            quality={0.9}
-            pictureSize="1280x720"
-          >
-            <View style={$overlay}>
-              <View style={$darkOverlayTop} />
-              <View style={$overlayRow}>
-                <View style={$darkOverlaySide} />
-                <View style={$frameBorder}>
-                  <Corner
-                    style={{
-                      top: 0,
-                      left: 0,
-                      borderTopWidth: CORNER_WIDTH,
-                      borderLeftWidth: CORNER_WIDTH,
-                      borderColor: BORDER_COLOR,
-                    }}
-                  />
-
-                  <Corner
-                    style={{
-                      top: 0,
-                      right: 0,
-                      borderTopWidth: CORNER_WIDTH,
-                      borderRightWidth: CORNER_WIDTH,
-                      borderColor: BORDER_COLOR,
-                    }}
-                  />
-
-                  <Corner
-                    style={{
-                      bottom: 0,
-                      left: 0,
-                      borderBottomWidth: CORNER_WIDTH,
-                      borderLeftWidth: CORNER_WIDTH,
-                      borderColor: BORDER_COLOR,
-                    }}
-                  />
-
-                  <Corner
-                    style={{
-                      bottom: 0,
-                      right: 0,
-                      borderBottomWidth: CORNER_WIDTH,
-                      borderRightWidth: CORNER_WIDTH,
-                      borderColor: BORDER_COLOR,
-                    }}
-                  />
-                </View>
-                <View style={$darkOverlaySide} />
+          {device ? (
+            <VisionCamera
+              key={cameraKey}
+              ref={myCamera}
+              style={{
+                flex: 1,
+              }}
+              device={device}
+              isActive={true}
+              photo={true}
+              format={format}
+            />
+          ) : null}
+          <View style={$overlay}>
+            <View style={$darkOverlayTop} />
+            <View style={$overlayRow}>
+              <View style={$darkOverlaySide} />
+              <View style={$frameBorder}>
+                <Corner
+                  style={{
+                    top: 0,
+                    left: 0,
+                    borderTopWidth: CORNER_WIDTH,
+                    borderLeftWidth: CORNER_WIDTH,
+                    borderColor: BORDER_COLOR,
+                  }}
+                />
+
+                <Corner
+                  style={{
+                    top: 0,
+                    right: 0,
+                    borderTopWidth: CORNER_WIDTH,
+                    borderRightWidth: CORNER_WIDTH,
+                    borderColor: BORDER_COLOR,
+                  }}
+                />
+
+                <Corner
+                  style={{
+                    bottom: 0,
+                    left: 0,
+                    borderBottomWidth: CORNER_WIDTH,
+                    borderLeftWidth: CORNER_WIDTH,
+                    borderColor: BORDER_COLOR,
+                  }}
+                />
+
+                <Corner
+                  style={{
+                    bottom: 0,
+                    right: 0,
+                    borderBottomWidth: CORNER_WIDTH,
+                    borderRightWidth: CORNER_WIDTH,
+                    borderColor: BORDER_COLOR,
+                  }}
+                />
               </View>
-              <View style={$darkOverlayBottom} />
+              <View style={$darkOverlaySide} />
             </View>
-          </RNCamera>
+            <View style={$darkOverlayBottom} />
+          </View>
 
           <View
             style={{

package/src/screens/uploadVideo/index.tsx

@@ -10,7 +10,10 @@ import {
   View,
 } from 'react-native';
 import { formatDDMMYYY, formatMoney } from '../../utils';
-import { RNCamera } from 'react-native-camera';
+import {
+  Camera as VisionCamera,
+  useCameraDevice,
+} from 'react-native-vision-camera';
 import MButton from '../../components/MButton';
 import { IconPause, IconPlay } from '../../assets/icons';
 import { MText } from '../../components/MText';
@@ -39,6 +42,8 @@ export const Video = observer(function Video(props: any) {
   const [count, setCount] = useState(COUNTDOWN_SECONDS);
   const [isRecording, setIsRecording] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [passPermission, setPassPermission] = useState(false);
+  const device = useCameraDevice('front');
 
   const loan = props?.route?.params?.loan;
   const content = useMemo(() => {
@@ -56,7 +61,10 @@ export const Video = observer(function Video(props: any) {
       (permission) => statuses[permission] !== RESULTS.GRANTED
     );
 
-    if (toRequest.length === 0) return true;
+    if (toRequest.length === 0) {
+      setPassPermission(true);
+      return true;
+    }
 
     const requested = await requestMultiple(toRequest);
     const values = Object.values(requested);
@@ -64,6 +72,7 @@ export const Video = observer(function Video(props: any) {
     const anyBlocked = values.some((status) => status === RESULTS.BLOCKED);
 
     if (!allGranted) {
+      setPassPermission(false);
       Alert.alert(
         'Thông báo',
         anyBlocked
@@ -81,6 +90,7 @@ export const Video = observer(function Video(props: any) {
       );
     }
 
+    setPassPermission(allGranted);
     return allGranted;
   };
 
@@ -114,19 +124,20 @@ export const Video = observer(function Video(props: any) {
 
     setIsRecording(true);
     try {
-      const data = await camera.current.recordAsync({
-        quality: RNCamera.Constants.VideoQuality['480p'],
-        videoBitrate: 1500000,
-        ...(Platform.OS === 'ios'
-          ? { codec: RNCamera.Constants.VideoCodec.H264 }
-          : {}),
+      const data = await new Promise((resolve, reject) => {
+        camera.current.startRecording({
+          videoCodec: Platform.OS === 'ios' ? 'h264' : undefined,
+          onRecordingFinished: resolve,
+          onRecordingError: reject,
+        });
       });
 
       setIsLoading(true);
+      const uri = 'file://' + data.path;
       const formData = new FormData();
       formData.append('video', {
-        name: data.uri.split(/[\\/]/).pop(),
-        uri: data.uri,
+        name: data.path.split(/[\\/]/).pop(),
+        uri,
         type: 'video/*',
       });
 
@@ -188,27 +199,16 @@ export const Video = observer(function Video(props: any) {
               </MText>
             </View>
           )}
-          <RNCamera
-            ref={camera}
-            style={styles.preview}
-            type={RNCamera.Constants.Type.front}
-            permissionDialogTitle={'Permission to use camera'}
-            permissionDialogMessage={
-              'We need your permission to use your camera phone'
-            }
-            androidCameraPermissionOptions={{
-              title: 'Permission to use camera',
-              message: 'We need your permission to use your camera',
-              buttonPositive: 'Ok',
-              buttonNegative: 'Cancel',
-            }}
-            androidRecordAudioPermissionOptions={{
-              title: 'Permission to use audio recording',
-              message: 'We need your permission to use your audio',
-              buttonPositive: 'Ok',
-              buttonNegative: 'Cancel',
-            }}
-          />
+          {passPermission && device ? (
+            <VisionCamera
+              ref={camera}
+              style={styles.preview}
+              device={device}
+              isActive={true}
+              video={true}
+              audio={true}
+            />
+          ) : null}
           <View
             style={{
               backgroundColor: '#00000080',
@@ -217,6 +217,7 @@ export const Video = observer(function Video(props: any) {
               bottom: 0,
               left: 0,
               right: 0,
+              paddingVertical: 16,
             }}
           >
             {isRecording ? (
@@ -224,7 +225,6 @@ export const Video = observer(function Video(props: any) {
                 style={{
                   justifyContent: 'center',
                   alignItems: 'center',
-                  marginBottom: 20,
                 }}
                 onPress={() => {
                   stopRecording();
@@ -237,7 +237,6 @@ export const Video = observer(function Video(props: any) {
                 style={{
                   justifyContent: 'center',
                   alignItems: 'center',
-                  marginBottom: 20,
                 }}
                 disabled={videoStore.isLoading}
                 onPress={() => {