react-native-timacare 3.3.16 → 3.3.17

package/src/screens/camera/CCCDCameraScreen.tsx

@@ -1,256 +1,200 @@
-//@ts-nocheck
+// @ts-nocheck
 import React, { useEffect, useRef, useState } from 'react';
 import {
+  ActivityIndicator,
   Alert,
   Dimensions,
-  Image,
   Platform,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import {
-  Camera,
-  useCameraDevice,
-  useCameraFormat,
-  useCameraPermission,
-} from 'react-native-vision-camera';
+import { RNCamera } from 'react-native-camera';
 import { IconBackWhite, TakePhotoSvg } from '../../assets/icons';
 import { MText } from '../../components/MText';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import RNImageManipulator from '@oguzhnatly/react-native-image-manipulator';
-
-const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
-
-const getImageSize = (
-  uri: string
-): Promise<{ width: number; height: number }> =>
-  new Promise((resolve, reject) => {
-    Image.getSize(
-      uri,
-      (width, height) => resolve({ width, height }),
-      (err) => reject(err)
-    );
-  });
-
-const clamp = (value: number, min: number, max: number) =>
-  Math.min(Math.max(value, min), max);
-
-const getSnapshotCropRect = ({
-  imageWidth,
-  imageHeight,
-  previewWidth,
-  previewHeight,
-  frameX,
-  frameY,
-  frameWidth,
-  frameHeight,
-}: {
-  imageWidth: number;
-  imageHeight: number;
-  previewWidth: number;
-  previewHeight: number;
-  frameX: number;
-  frameY: number;
-  frameWidth: number;
-  frameHeight: number;
-}) => {
-  const scaleX = imageWidth / previewWidth;
-  const scaleY = imageHeight / previewHeight;
-  const originX = clamp(frameX * scaleX, 0, imageWidth);
-  const originY = clamp(frameY * scaleY, 0, imageHeight);
-  const width = clamp(frameWidth * scaleX, 1, imageWidth - originX);
-  const height = clamp(frameHeight * scaleY, 1, imageHeight - originY);
-
-  return {
-    originX: Math.round(originX),
-    originY: Math.round(originY),
-    width: Math.round(width),
-    height: Math.round(height),
-  };
-};
+import { commonStyles } from '../CommonStyles';
+import {
+  request,
+  PERMISSIONS,
+  RESULTS,
+  openSettings,
+} from 'react-native-permissions';
 
 export default function CCCDCameraScreen(props) {
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
-  const camera = useRef(null);
-  const device = useCameraDevice('back');
-  const [cameraActive, setCameraActive] = useState(true);
-  const { hasPermission, requestPermission } = useCameraPermission();
-  const [previewLayout, setPreviewLayout] = useState({
-    width: screenWidth,
-    height: screenHeight,
-  });
-
-  const format = useCameraFormat(device, [
-    {
-      photoAspectRatio: previewLayout.height / previewLayout.width,
-    },
-    {
-      videoAspectRatio: previewLayout.height / previewLayout.width,
-    },
-    {
-      photoResolution: 'max',
-    },
-  ]);
-
-  useEffect(() => {
-    if (!hasPermission) requestPermission();
-  }, [hasPermission, requestPermission]);
+  const isFocused = useIsFocused();
+  const myCamera = useRef(null);
+  const [passPermission, setPassPermission] = useState(false);
+  const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
 
   const takePicture = async () => {
-    if (camera.current == null) return;
+    if (myCamera.current == null) return;
     try {
-      const snapshot = await camera.current.takeSnapshot({
-        quality: 100,
-      });
-      const imageUri = `file://${snapshot.path}`;
-      const normalized = await RNImageManipulator.manipulate(imageUri, [], {
-        format: 'jpg',
-        compress: 1,
-      });
-      const { width: imageWidth, height: imageHeight } = await getImageSize(
-        normalized.uri
-      );
-
-      const previewWidth = previewLayout.width;
-      const previewHeight = previewLayout.height;
-
-      const frameWidth = previewWidth * 0.85;
-      const frameHeight = frameWidth * 0.63;
-      const frameX = (previewWidth - frameWidth) / 2;
-      const frameY = (previewHeight - frameHeight) / 2;
-
-      const cropRect = getSnapshotCropRect({
-        imageWidth,
-        imageHeight,
-        previewWidth,
-        previewHeight,
-        frameX,
-        frameY,
-        frameWidth,
-        frameHeight,
-      });
-
-      const result = await RNImageManipulator.manipulate(
-        normalized.uri,
-        [
-          {
-            crop: cropRect,
-          },
-        ],
-        { format: 'jpg', compress: 1 }
-      );
-      setCameraActive(false);
+      const options = {
+        base64: true,
+        pauseAfterCapture: true,
+        fixOrientation: false,
+        forceUpOrientation: false,
+        orientation: RNCamera.Constants.Orientation.portrait,
+        quality: 0.9,
+        pictureSize: '1280x720',
+      };
+      const data = await myCamera.current.takePictureAsync(options);
       navigation.goBack();
       if (props.route?.params?.callback) {
-        props.route.params.callback(result?.uri);
+        props.route.params.callback(data.uri);
       }
     } catch (err) {
       console.error(err);
     }
   };
 
-  if (!device || !hasPermission)
+  const requestPermissions = () => {
+    request(
+      Platform.OS === 'ios'
+        ? PERMISSIONS.IOS.CAMERA
+        : PERMISSIONS.ANDROID.CAMERA
+    ).then((result) => {
+      switch (result) {
+        case RESULTS.UNAVAILABLE:
+          console.log(
+            'This feature is not available (on this device / in this context)'
+          );
+          Alert.alert(
+            'Thông báo',
+            'Máy ảnh trên thiết bị không tương thích.\nVui lòng kiểm tra lại thiết bị!',
+            [{ text: 'Đồng ý' }]
+          );
+          break;
+        case RESULTS.DENIED:
+          console.log(
+            'The permission has not been requested / is denied but requestable'
+          );
+          Alert.alert(
+            'Thông báo',
+            'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
+            [
+              {
+                text: 'Đồng ý',
+                onPress: () => {
+                  if (Platform.OS === 'ios') {
+                    openSettings();
+                  } else {
+                    requestPermissions();
+                  }
+                },
+              },
+            ]
+          );
+          break;
+        case RESULTS.LIMITED:
+          console.log('The permission is limited: some actions are possible');
+          Alert.alert(
+            'Thông báo',
+            'Quyền máy ảnh bị hạn chế. Vui lòng kiểm tra lại để tiếp tục!',
+            [
+              {
+                text: 'Đồng ý',
+                onPress: () => {
+                  if (Platform.OS === 'ios') {
+                    openSettings();
+                  } else {
+                    requestPermissions();
+                  }
+                },
+              },
+            ]
+          );
+          break;
+        case RESULTS.GRANTED:
+          console.log('The permission is granted');
+          setPassPermission(true);
+          break;
+        case RESULTS.BLOCKED:
+          console.log('The permission is denied and not requestable anymore');
+          Alert.alert(
+            'Thông báo',
+            'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
+            [
+              {
+                text: 'Đồng ý',
+                onPress: () => {
+                  if (Platform.OS === 'ios') {
+                    openSettings();
+                  } else {
+                    openSettings();
+                  }
+                },
+              },
+            ]
+          );
+          break;
+      }
+    });
+  };
+
+  useEffect(() => {
+    requestPermissions();
+  }, []);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (isFocused) {
+      // Delay mounting camera to give Android time to release the previous one
+      timeout = setTimeout(() => {
+        setShouldRenderCamera(true);
+      }, 500); // thử 300ms–500ms nếu cần
+    } else {
+      setShouldRenderCamera(false);
+    }
+
+    return () => clearTimeout(timeout);
+  }, [isFocused]);
+
+  if (!passPermission && !shouldRenderCamera) {
     return (
-      <View
-        style={{
-          flex: 1,
-          backgroundColor: '#000',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <MText style={{ color: '#fff' }}>
-          Vui lòng cấp quyền truy cập Camera
-        </MText>
+      <View style={commonStyles.fill}>
+        <ActivityIndicator size="large" color="#0000ff" />
       </View>
     );
-
-  const frameWidth = previewLayout.width * 0.85;
-  const frameHeight = frameWidth * 0.63;
-  const frameX = (previewLayout.width - frameWidth) / 2;
-  const frameY = (previewLayout.height - frameHeight) / 2;
+  }
 
   return (
     <View
-      style={$container}
-      onLayout={(e) => {
-        const { width, height } = e.nativeEvent.layout;
-        if (width > 0 && height > 0) setPreviewLayout({ width, height });
-      }}
+      style={{ flex: 1, backgroundColor: 'black' }}
+      pointerEvents={'box-none'}
     >
-      <Camera
-        style={{ flex: 1 }}
-        device={device}
-        isActive={cameraActive}
-        photo={false}
-        video={true}
-        outputOrientation="preview"
-        ref={camera}
-        format={format}
-        resizeMode="cover"
-      />
-      <View style={$overlay} pointerEvents="none">
-        <View style={[$darkOverlayTop, { height: frameY }]} />
-        <View style={$row}>
-          <View
-            style={[$darkOverlaySide, { width: frameX, height: frameHeight }]}
-          />
-          <View
-            style={[$frameBorder, { width: frameWidth, height: frameHeight }]}
-          >
-            {/* Top Left */}
-            <Corner
-              style={{
-                top: 0,
-                left: 0,
-                borderTopWidth: CORNER_WIDTH,
-                borderLeftWidth: CORNER_WIDTH,
-                borderColor: BORDER_COLOR,
-              }}
-            />
-
-            {/* Top Right */}
-            <Corner
-              style={{
-                top: 0,
-                right: 0,
-                borderTopWidth: CORNER_WIDTH,
-                borderRightWidth: CORNER_WIDTH,
-                borderColor: BORDER_COLOR,
-              }}
-            />
-
-            {/* Bottom Left */}
-            <Corner
-              style={{
-                bottom: 0,
-                left: 0,
-                borderBottomWidth: CORNER_WIDTH,
-                borderLeftWidth: CORNER_WIDTH,
-                borderColor: BORDER_COLOR,
-              }}
-            />
-
-            {/* Bottom Right */}
-            <Corner
-              style={{
-                bottom: 0,
-                right: 0,
-                borderBottomWidth: CORNER_WIDTH,
-                borderRightWidth: CORNER_WIDTH,
-                borderColor: BORDER_COLOR,
-              }}
-            />
-          </View>
-          <View
-            style={[$darkOverlaySide, { width: frameX, height: frameHeight }]}
-          />
-        </View>
-        <View style={[$darkOverlayBottom, { height: frameY }]} />
+      <View
+        style={[
+          commonStyles.alignCenter,
+          commonStyles.fill,
+          commonStyles.justifyCenter,
+          {
+            position: 'absolute',
+            width: Dimensions.get('window').width,
+            height: Dimensions.get('window').height,
+          },
+        ]}
+      >
+        <RNCamera
+          ref={myCamera}
+          defaultVideoQuality={RNCamera.Constants.VideoQuality['720p']}
+          style={{
+            width: Dimensions.get('window').width,
+            height: 260,
+            overflow: 'hidden',
+          }}
+          maxZoom={1}
+        >
+          {({ camera, status, recordAudioPermissionStatus }) => {
+            if (status !== 'READY') return <ActivityIndicator />;
+          }}
+        </RNCamera>
       </View>
+
       <View style={[$back, { top: insets.top + 16 }]}>
         <TouchableOpacity
           onPress={() => {
@@ -308,23 +252,6 @@ export default function CCCDCameraScreen(props) {
   );
 }
 
-const CORNER_SIZE = 20;
-const CORNER_WIDTH = 2;
-const BORDER_COLOR = '#FDFDFD';
-
-const Corner = ({ style }: { style: ViewStyle }) => (
-  <View
-    style={[
-      style,
-      {
-        position: 'absolute',
-        width: CORNER_SIZE,
-        height: CORNER_SIZE,
-      },
-    ]}
-  />
-);
-
 const overlayColor = 'rgba(22, 22, 22, 0.7)';
 const $back: ViewStyle = {
   position: 'absolute',

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

@@ -300,7 +300,7 @@ export const OCR = observer(function OCR(props: any) {
       fixOrientation: false,
       forceUpOrientation: false,
       orientation: RNCamera.Constants.Orientation.portrait,
-      quality: 0.8,
+      quality: 0.9,
       pictureSize: '1280x720',
     };
     const data = await myCamera.current.takePictureAsync(options);