react-native-timacare 3.3.12 → 3.3.14

package/src/screens/camera/CCCDCameraScreen.tsx

@@ -12,6 +12,7 @@ import {
 import {
   Camera,
   useCameraDevice,
+  useCameraFormat,
   useCameraPermission,
 } from 'react-native-vision-camera';
 import { IconBackWhite, TakePhotoSvg } from '../../assets/icons';
@@ -36,6 +37,40 @@ const getImageSize = (
 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),
+  };
+};
+
 export default function CCCDCameraScreen(props) {
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
@@ -48,82 +83,67 @@ export default function CCCDCameraScreen(props) {
     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 takePicture = async () => {
     if (camera.current == null) return;
-
-    const photo = await camera.current.takePhoto({
-      skipMetadata: true,
-    });
-
     try {
-      const imageUri = `file://${photo.path}`;
-      const { width, height } = await getImageSize(imageUri);
-      const previewWidth = previewLayout.width || screenWidth;
-      const previewHeight = previewLayout.height || screenHeight;
+      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; // tỷ lệ giống CCCD
+      const frameHeight = frameWidth * 0.63;
       const frameX = (previewWidth - frameWidth) / 2;
       const frameY = (previewHeight - frameHeight) / 2;
 
-      // Tính scale dựa trên `resizeMode="cover"` mặc định của Vision Camera phủ kín màn hình
-      const scale = Math.max(previewWidth / width, previewHeight / height);
-
-      // Kích thước của ảnh nếu được hiển thị và zoom lên để cover màn hình
-      const renderedWidth = width * scale;
-      const renderedHeight = height * scale;
-
-      // Độ phân giải của các phần bị tràn ra khỏi màn hình (do cover)
-      const offsetX = (renderedWidth - previewWidth) / 2;
-      const offsetY = (renderedHeight - previewHeight) / 2;
-
-      // Tính tọa độ vùng cần crop trên ảnh gốc dựa vào toạ độ của khung UI
-      const cropX = (frameX + offsetX) / scale;
-      const cropY = (frameY + offsetY) / scale;
-      const cropWidth = frameWidth / scale;
-      const cropHeight = frameHeight / scale;
-
-      const cropXInt = Math.floor(clamp(cropX, 0, Math.max(0, width - 1)));
-      const cropYInt = Math.floor(clamp(cropY, 0, Math.max(0, height - 1)));
-      const cropWidthInt = Math.floor(
-        clamp(cropWidth, 1, Math.max(1, width - cropXInt))
-      );
-      const cropHeightInt = Math.floor(
-        clamp(cropHeight, 1, Math.max(1, height - cropYInt))
-      );
-
-      const cropData = {
-        offset: {
-          x: cropXInt,
-          y: cropYInt,
-        },
-        size: {
-          width: cropWidthInt,
-          height: cropHeightInt,
-        },
-      };
+      const cropRect = getSnapshotCropRect({
+        imageWidth,
+        imageHeight,
+        previewWidth,
+        previewHeight,
+        frameX,
+        frameY,
+        frameWidth,
+        frameHeight,
+      });
 
       const result = await RNImageManipulator.manipulate(
-        imageUri,
+        normalized.uri,
         [
           {
-            crop: {
-              originX: cropXInt,
-              originY: cropYInt,
-              width: cropWidthInt,
-              height: cropHeightInt,
-            },
+            crop: cropRect,
           },
         ],
         { format: 'jpg', compress: 1 }
       );
       setCameraActive(false);
       navigation.goBack();
-
       if (props.route?.params?.callback) {
         props.route.params.callback(result?.uri);
       }
@@ -133,7 +153,20 @@ export default function CCCDCameraScreen(props) {
   };
 
   if (!device || !hasPermission)
-    return <View style={{ flex: 1, backgroundColor: '#000' }} />;
+    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>
+    );
 
   const frameWidth = previewLayout.width * 0.85;
   const frameHeight = frameWidth * 0.63;
@@ -152,8 +185,12 @@ export default function CCCDCameraScreen(props) {
         style={{ flex: 1 }}
         device={device}
         isActive={cameraActive}
-        photo={true}
+        photo={false}
+        video={true}
+        outputOrientation="preview"
         ref={camera}
+        format={format}
+        resizeMode="cover"
       />
       <View style={$overlay} pointerEvents="none">
         <View style={[$darkOverlayTop, { height: frameY }]} />

package/src/screens/detail-loan/QrPayment.tsx

@@ -89,6 +89,7 @@ export const QrPayment = observer(function QrPayment(props: any) {
                 paddingHorizontal: 16,
                 marginTop: 8,
                 fontSize: 16,
+                color: '#333333',
               }}
               onChangeText={(text) => {
                 const numericValue = text.replace(/\D/g, '');

package/src/screens/detail-loan/ShowQrCode.tsx

@@ -34,7 +34,7 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
       .getQrPayment({
         LoanBriefId: props?.route?.params?.id,
         TypeCloseLoan: 0, // đóng tiền kỳ
-        Money: props?.route?.params?.amount,
+        Money: Number(props?.route?.params?.amount),
       })
       .then((response) => {
         setIsLoading(false);