react-native-timacare 3.3.56-alert → 3.3.57-cccd

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

@@ -1,7 +1,12 @@
 // @ts-nocheck
-import React, { useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
-  Dimensions,
   Image,
   ImageStyle,
   Platform,
@@ -15,12 +20,7 @@ import { useNavigation, useIsFocused } from '@react-navigation/native';
 import Modal from 'react-native-modal';
 import { MText } from '../../components/MText';
 import LinearGradient from 'react-native-linear-gradient';
-import {
-  CloseIcon,
-  IconBackWhite,
-  TakePhotoSvg,
-  TimaSmall,
-} from '../../assets/icons';
+import { CloseIcon, IconBack, TakePhotoSvg, TimaSmall } from '../../assets/icons';
 import MButton from '../../components/MButton';
 import {
   request,
@@ -28,23 +28,21 @@ import {
   RESULTS,
   openSettings,
 } from 'react-native-permissions';
-import {
-  Camera as VisionCamera,
-  useCameraDevice,
-  useCameraFormat,
-} from 'react-native-vision-camera';
-import { commonStyles } from '../CommonStyles';
+import { Camera as VisionCamera, useCameraDevices } from 'react-native-vision-camera';
 import { ScreenNames } from '../../navigation';
 import { load, OCR_V2, save } from '../../utils/storage';
-import { IconUpload } from '../../assets/svgs';
 import ImagePicker from 'react-native-image-crop-picker';
 import { launchImageLibrary } from 'react-native-image-picker';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
+import {
+  cropPhotoToAspect,
+  pickClosestFocusDevice,
+} from '../../utils/cameraCrop';
 
-const { width: screenWidth } = Dimensions.get('window');
-const frameWidth = screenWidth * 0.85;
-const frameHeight = frameWidth * 0.63; // tỷ lệ giống CCCD
+const ORANGE = '#F05123';
+// Đăng ký xe (cà vẹt) có tỉ lệ gần với thẻ ID-1: 85.6mm x 54mm
+const CARD_ASPECT_RATIO = 85.6 / 54;
 
 export default function VehicleCamera(props: any) {
   const insets = useSafeAreaInsets();
@@ -59,28 +57,45 @@ export default function VehicleCamera(props: any) {
   const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const navigation = useNavigation();
   const [showModal, setShowModal] = useState(false);
-  const [title, setTitle] = useState(
+  const [title] = useState(
     props?.route?.params?.front
       ? 'Chụp đăng ký xe mặt trước'
       : 'Chụp đăng ký xe mặt sau'
   );
   const [taking, setTaking] = useState(false);
   const [passPermission, setPassPermission] = useState(false);
+  const [focusPoint, setFocusPoint] = useState(null);
 
   const myCamera = useRef(null);
-  const device = useCameraDevice('back');
-  const format = useCameraFormat(device, [
-    { photoResolution: { width: 1280, height: 720 } },
+  const frameSize = useRef({ width: 0, height: 0 });
+  const focusTimer = useRef(null);
+
+  // Chọn ống kính sau lấy nét gần nhất (macro) để chụp cận thẻ mà không mờ
+  const devices = useCameraDevices();
+  const device = useMemo(() => pickClosestFocusDevice(devices, 'back'), [
+    devices,
   ]);
 
-  const takePhoto = async () => {
-    if (myCamera.current == null || taking) return;
-    setTaking(true);
-    const data = await myCamera.current.takePhoto({
-      qualityPrioritization: 'quality',
-    });
-    const uri = 'file://' + data.path;
-    setTaking(false);
+  // Lấy nét vào một điểm (toạ độ theo hệ khung preview = camera view). Dùng cho
+  // chạm-để-lấy-nét và lấy nét giữa khung trước khi chụp -> tránh mờ khi gần.
+  const focusAt = useCallback(
+    async (x, y) => {
+      const cam = myCamera.current;
+      if (cam == null || !device?.supportsFocus) return;
+      setFocusPoint({ x, y });
+      if (focusTimer.current) clearTimeout(focusTimer.current);
+      focusTimer.current = setTimeout(() => setFocusPoint(null), 800);
+      try {
+        await cam.focus({ x, y });
+      } catch (e) {
+        // focus có thể lỗi nếu đang lấy nét dở hoặc điểm ngoài vùng -> bỏ qua
+      }
+    },
+    [device]
+  );
+
+  // Điều hướng sau khi có ảnh (giữ nguyên logic gốc của VehicleCamera)
+  const goNextWithUri = (uri) => {
     if (props?.route?.params?.front) {
       navigation.push(ScreenNames.VehicleRegistrationFront, {
         uri,
@@ -97,6 +112,36 @@ export default function VehicleCamera(props: any) {
     }
   };
 
+  const takePhoto = async () => {
+    if (myCamera.current == null || taking) return;
+    setTaking(true);
+    try {
+      // Lấy nét giữa khung trước khi chụp để tài liệu ở gần vẫn nét
+      const { width: fw, height: fh } = frameSize.current;
+      if (device?.supportsFocus && fw && fh) {
+        try {
+          await myCamera.current.focus({ x: fw / 2, y: fh / 2 });
+        } catch (e) {}
+      }
+      const data = await myCamera.current.takePhoto({
+        qualityPrioritization: 'quality',
+      });
+      // Cắt ảnh vừa đúng khung theo tỉ lệ thẻ (xử lý orientation trong util)
+      const uri = await cropPhotoToAspect(data, CARD_ASPECT_RATIO);
+      setTaking(false);
+      goNextWithUri(uri);
+    } catch (e) {
+      console.error(e);
+      setTaking(false);
+      AlertGlobal.show({
+        type: 'warning',
+        title: 'Thông báo',
+        message: 'Không chụp được ảnh. Vui lòng thử lại.',
+        primaryText: 'Đồng ý',
+      });
+    }
+  };
+
   const requestPermissions = () => {
     request(
       Platform.OS === 'ios'
@@ -189,6 +234,9 @@ export default function VehicleCamera(props: any) {
   useEffect(() => {
     requestPermissions();
     loadIntro();
+    return () => {
+      if (focusTimer.current) clearTimeout(focusTimer.current);
+    };
   }, []);
 
   useEffect(() => {
@@ -205,228 +253,92 @@ export default function VehicleCamera(props: any) {
     return () => clearTimeout(timeout);
   }, [isFocused]);
 
+  // Giữ nguyên logic chọn ảnh từ thư viện của VehicleCamera
   const pickImageFromGallery = async () => {
     if (Platform.OS === 'android') {
-      const result = await launchImageLibrary({
-        mediaType: 'photo',
-      });
+      const result = await launchImageLibrary({ mediaType: 'photo' });
       if (result.assets) {
-        if (props?.route?.params?.front) {
-          navigation.push(ScreenNames.VehicleRegistrationFront, {
-            uri: result.assets[0]?.uri,
-            loan: props?.route?.params?.loan,
-          });
-        } else if (props.route?.params?.callback) {
-          navigation.goBack();
-          props.route?.params?.callback(result.assets[0]?.uri);
-        } else {
-          navigation.push(ScreenNames.VehicleRegistrationBack, {
-            uri: result.assets[0]?.uri,
-            loan: props?.route?.params?.loan,
-          });
-        }
+        goNextWithUri(result.assets[0]?.uri);
       }
     } else {
       ImagePicker.openPicker({}).then((image) => {
-        if (props?.route?.params?.front) {
-          navigation.push(ScreenNames.VehicleRegistrationFront, {
-            uri:
-              Platform.OS === 'android' ? image?.path : 'file://' + image?.path,
-            loan: props?.route?.params?.loan,
-          });
-        } else if (props.route?.params?.callback) {
-          navigation.goBack();
-          props.route?.params?.callback(
-            Platform.OS === 'android' ? image?.path : 'file://' + image?.path
-          );
-        } else {
-          navigation.push(ScreenNames.VehicleRegistrationBack, {
-            uri:
-              Platform.OS === 'android' ? image?.path : 'file://' + image?.path,
-            loan: props?.route?.params?.loan,
-          });
-        }
+        goNextWithUri(
+          Platform.OS === 'android' ? image?.path : 'file://' + image?.path
+        );
       });
     }
   };
 
   return (
-    <View
-      style={[$flex, { backgroundColor: '#000' }]}
-      pointerEvents={'box-none'}
-    >
+    <View style={styles.container}>
       {passPermission && shouldRenderCamera ? (
-        <View style={{ flex: 1 }}>
-          {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={$darkOverlaySide} />
+        <>
+          <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
+            <TouchableOpacity
+              onPress={() => navigation.goBack()}
+              hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+            >
+              <IconBack />
+            </TouchableOpacity>
+            <View style={styles.titleWrap}>
+              <MText style={styles.headerTitle}>ĐĂNG KÝ XE</MText>
             </View>
-            <View style={$darkOverlayBottom} />
           </View>
 
+          <MText style={styles.instruction}>{title}</MText>
+
+          {/* Khung tỉ lệ thẻ: vùng nhìn thấy của preview = vùng sẽ crop.
+              Chạm vào khung để lấy nét thủ công. */}
           <View
-            style={{
-              position: 'absolute',
-              bottom: 20,
-              left: 0,
-              right: 0,
-              zIndex: 1000,
+            style={styles.photoFrame}
+            onLayout={(e) => {
+              frameSize.current = e.nativeEvent.layout;
             }}
+            onStartShouldSetResponder={() => true}
+            onResponderRelease={(e) =>
+              focusAt(e.nativeEvent.locationX, e.nativeEvent.locationY)
+            }
           >
-            {/* <TouchableOpacity
-              onPress={() => {
-                pickImageFromGallery();
-              }}
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 8,
-                marginBottom: 50,
-              }}
-            >
-              <IconUpload />
-              <MText
-                style={{
-                  color: 'white',
-                  fontSize: 12,
-                }}
-              >
-                Tải ảnh từ thư viện
-              </MText>
-            </TouchableOpacity> */}
-            {!taking && (
-              <>
-                <MText
-                  style={{
-                    color: 'white',
-                    textAlign: 'center',
-                    fontSize: 14,
-                  }}
-                >
-                  Vui lòng đặt giấy tờ nằm vừa khung hình chữ nhật,{'\n'}chụp đủ
-                  ánh sáng và rõ nét.
-                </MText>
-                <View
-                  style={{
-                    alignItems: 'center',
-                    marginVertical: 24,
-                  }}
-                >
-                  <MButton
-                    onPress={() => {
-                      takePhoto();
-                    }}
-                  >
-                    <TakePhotoSvg />
-                  </MButton>
-                </View>
-              </>
-            )}
-          </View>
-          <View
-            style={[
-              commonStyles.fill,
-              { position: 'absolute', width: '100%', height: '100%' },
-            ]}
-          >
-            <View
-              style={[
-                commonStyles.row,
-                commonStyles.alignCenter,
-                { paddingVertical: 16, marginTop: insets.top },
-              ]}
-            >
-              <MButton
-                onPress={() => {
-                  navigation.goBack();
-                }}
+            {device ? (
+              <VisionCamera
+                key={cameraKey}
+                ref={myCamera}
+                style={StyleSheet.absoluteFill}
+                device={device}
+                isActive={isFocused}
+                photo={true}
+              />
+            ) : null}
+            <View style={[styles.corner, styles.cornerTL]} />
+            <View style={[styles.corner, styles.cornerTR]} />
+            <View style={[styles.corner, styles.cornerBL]} />
+            <View style={[styles.corner, styles.cornerBR]} />
+            {focusPoint && (
+              <View
+                pointerEvents="none"
                 style={[
-                  {
-                    width: 48,
-                    height: 48,
-                    zIndex: 1000,
-                    position: 'absolute',
-                    left: 16,
-                    top: 16,
-                  },
+                  styles.focusRing,
+                  { left: focusPoint.x - 32, top: focusPoint.y - 32 },
                 ]}
-              >
-                <IconBackWhite />
-              </MButton>
-              <View style={{ flex: 1, alignItems: 'center' }}>
-                <MText style={$title}>ĐĂNG KÝ XE</MText>
-              </View>
-            </View>
-            <MText
-              style={{
-                color: 'white',
-                textAlign: 'center',
-              }}
-            >
-              {title}
-            </MText>
+              />
+            )}
           </View>
-        </View>
-      ) : (
-        <View></View>
-      )}
+
+          <View style={styles.spacer} />
+          <MText style={[styles.hint, { marginTop: 0, marginBottom: 20 }]}>
+            Đưa giấy tờ lại gần cho vừa khung, chạm vào màn hình{'\n'}để lấy nét
+            nếu ảnh bị mờ.
+          </MText>
+          <TouchableOpacity
+            style={[styles.captureButton, { marginBottom: insets.bottom + 24 }]}
+            onPress={takePhoto}
+            disabled={taking}
+          >
+            <TakePhotoSvg />
+          </TouchableOpacity>
+        </>
+      ) : null}
+
       <Modal
         isVisible={showModal}
         style={$modal}
@@ -551,58 +463,88 @@ export default function VehicleCamera(props: any) {
   );
 }
 
-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 $overlay: ViewStyle = {
-  ...StyleSheet.absoluteFillObject,
-  justifyContent: 'center',
-  alignItems: 'center',
-};
-
-const $darkOverlayTop: ViewStyle = {
-  width: '100%',
-  flex: 1,
-  backgroundColor: overlayColor,
-};
-
-const $darkOverlayBottom: ViewStyle = {
-  width: '100%',
-  flex: 1,
-  backgroundColor: overlayColor,
-};
-const $darkOverlaySide: ViewStyle = {
-  flex: 1,
-  height: frameHeight,
-  backgroundColor: overlayColor,
-};
-const $frameBorder: ViewStyle = {
-  width: frameWidth,
-  height: frameHeight,
-};
-
-const $overlayRow: ViewStyle = {
-  width: '100%',
-  height: frameHeight,
-  flexDirection: 'row',
-  alignItems: 'center',
-};
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#FFFFFF' },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+  titleWrap: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 24,
+  },
+  headerTitle: { color: '#333333', fontSize: 16, fontWeight: '600' },
+  instruction: {
+    textAlign: 'center',
+    color: '#333333',
+    fontSize: 14,
+    lineHeight: 20,
+    marginTop: 20,
+    marginBottom: 28,
+  },
+  photoFrame: {
+    marginHorizontal: 24,
+    aspectRatio: CARD_ASPECT_RATIO,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#000000',
+  },
+  corner: {
+    position: 'absolute',
+    width: 26,
+    height: 26,
+    borderColor: ORANGE,
+  },
+  focusRing: {
+    position: 'absolute',
+    width: 64,
+    height: 64,
+    borderRadius: 8,
+    borderWidth: 1.5,
+    borderColor: '#FFD54A',
+  },
+  cornerTL: {
+    top: 0,
+    left: 0,
+    borderTopWidth: 4,
+    borderLeftWidth: 4,
+    borderTopLeftRadius: 8,
+  },
+  cornerTR: {
+    top: 0,
+    right: 0,
+    borderTopWidth: 4,
+    borderRightWidth: 4,
+    borderTopRightRadius: 8,
+  },
+  cornerBL: {
+    bottom: 0,
+    left: 0,
+    borderBottomWidth: 4,
+    borderLeftWidth: 4,
+    borderBottomLeftRadius: 8,
+  },
+  cornerBR: {
+    bottom: 0,
+    right: 0,
+    borderBottomWidth: 4,
+    borderRightWidth: 4,
+    borderBottomRightRadius: 8,
+  },
+  hint: {
+    textAlign: 'center',
+    color: '#555555',
+    fontSize: 13,
+    lineHeight: 19,
+    marginTop: 48,
+  },
+  spacer: { flex: 1 },
+  captureButton: { alignSelf: 'center' },
+});
 
 const $row: ViewStyle = {
   flexDirection: 'row',
@@ -651,10 +593,6 @@ const $description: TextStyle = {
   textAlign: 'center',
 };
 
-const $flex: ViewStyle = {
-  flex: 1,
-};
-
 const $modal: ViewStyle = {
   justifyContent: 'flex-end',
   margin: 0,