react-native-timacare 3.3.63 → 3.3.65

package/src/screens/selfie/SelfieCamera.tsx

@@ -0,0 +1,302 @@
+//@ts-nocheck
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Dimensions,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  request,
+  PERMISSIONS,
+  RESULTS,
+  openSettings,
+} from 'react-native-permissions';
+import {
+  Camera as VisionCamera,
+  useCameraDevice,
+} from 'react-native-vision-camera';
+import { Svg, Ellipse, Path } from 'react-native-svg';
+import RNFS from 'react-native-fs';
+import MButton from '../../components/MButton';
+import { MText } from '../../components/MText';
+import { commonStyles } from '../CommonStyles';
+import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
+import { IconBack, TakePhotoSvg } from '../../assets/icons';
+
+const ORANGE = '#F05123';
+const SCREEN_WIDTH = Dimensions.get('window').width;
+// Khung oval: rộng ~72% màn hình, cao gấp 1.33 lần chiều rộng (tỉ lệ khuôn mặt)
+const OVAL_WIDTH = Math.round(SCREEN_WIDTH * 0.72);
+const OVAL_HEIGHT = Math.round(OVAL_WIDTH * 1.33);
+
+export default function SelfieCamera(props: any) {
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+  const isFocused = useIsFocused();
+  const myCamera = useRef(null);
+  const takingRef = useRef(false);
+  const [passPermission, setPassPermission] = useState(false);
+  const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
+  const [taking, setTaking] = useState(false);
+  // Kích thước vùng preview để vẽ mặt nạ oval đúng tâm
+  const [stage, setStage] = useState({ width: SCREEN_WIDTH, height: 0 });
+
+  const device = useCameraDevice('front');
+
+  const takePhoto = async () => {
+    if (myCamera.current == null || takingRef.current) return;
+    takingRef.current = true;
+    setTaking(true);
+    try {
+      const data = await myCamera.current.takePhoto({
+        qualityPrioritization: 'quality',
+      });
+      const uri = 'file://' + data.path;
+      navigation.goBack();
+      if (props.route?.params?.callback) {
+        props.route.params.callback(uri);
+      }
+      if (props.route?.params?.base64) {
+        const base64 = await RNFS.readFile(data.path, 'base64');
+        props.route.params.base64(base64);
+      }
+    } catch (err) {
+      console.log('takePhoto error', err);
+      takingRef.current = false;
+      setTaking(false);
+    }
+  };
+
+  const requestPermissions = () => {
+    request(
+      Platform.OS === 'ios'
+        ? PERMISSIONS.IOS.CAMERA
+        : PERMISSIONS.ANDROID.CAMERA
+    ).then((result) => {
+      switch (result) {
+        case RESULTS.UNAVAILABLE:
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              '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ị!',
+            primaryText: 'Đồng ý',
+          });
+          break;
+        case RESULTS.DENIED:
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
+            primaryText: 'Đồng ý',
+            onPrimaryPress: () => {
+              if (Platform.OS === 'ios') {
+                openSettings();
+              } else {
+                requestPermissions();
+              }
+            },
+          });
+          break;
+        case RESULTS.LIMITED:
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Quyền máy ảnh bị hạn chế. Vui lòng kiểm tra lại để tiếp tục!',
+            primaryText: 'Đồng ý',
+            onPrimaryPress: () => {
+              if (Platform.OS === 'ios') {
+                openSettings();
+              } else {
+                requestPermissions();
+              }
+            },
+          });
+          break;
+        case RESULTS.GRANTED:
+          setPassPermission(true);
+          break;
+        case RESULTS.BLOCKED:
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
+            primaryText: 'Đồng ý',
+            onPrimaryPress: () => 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);
+    } else {
+      setShouldRenderCamera(false);
+    }
+    return () => clearTimeout(timeout);
+  }, [isFocused]);
+
+  // Mặt nạ: phủ trắng toàn bộ vùng preview, khoét một lỗ hình oval ở giữa
+  // (fillRule evenodd) -> chỉ nhìn thấy camera bên trong oval.
+  const renderOvalMask = () => {
+    const { width: w, height: h } = stage;
+    if (!w || !h) return null;
+    const cx = w / 2;
+    const cy = h / 2;
+    const rx = OVAL_WIDTH / 2;
+    const ry = Math.min(OVAL_HEIGHT, h - 16) / 2;
+    const hole = `M ${cx - rx} ${cy} a ${rx} ${ry} 0 1 0 ${
+      rx * 2
+    } 0 a ${rx} ${ry} 0 1 0 ${-rx * 2} 0 Z`;
+    return (
+      <Svg
+        pointerEvents="none"
+        style={StyleSheet.absoluteFill}
+        width={w}
+        height={h}
+      >
+        <Path
+          d={`M 0 0 H ${w} V ${h} H 0 Z ${hole}`}
+          fill="#FFFFFF"
+          fillRule="evenodd"
+        />
+        {/* Vòng ngoài mờ tạo chiều sâu cho khung, vòng trong nét đứt là mốc căn mặt */}
+        <Ellipse
+          cx={cx}
+          cy={cy}
+          rx={rx + 8}
+          ry={ry + 8}
+          stroke={ORANGE}
+          strokeWidth={1}
+          strokeOpacity={0.25}
+          fill="none"
+        />
+        <Ellipse
+          cx={cx}
+          cy={cy}
+          rx={rx}
+          ry={ry}
+          stroke={ORANGE}
+          strokeWidth={2}
+          strokeDasharray="6 5"
+          strokeLinecap="round"
+          fill="none"
+        />
+      </Svg>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.header, { paddingTop: insets.top + 12 }]}>
+        <MButton onPress={() => navigation.goBack()} style={styles.backButton}>
+          <IconBack />
+        </MButton>
+        <View style={styles.titleWrap}>
+          <MText style={styles.headerTitle}>Xác thực khuôn mặt</MText>
+        </View>
+      </View>
+
+      <View
+        style={styles.stage}
+        onLayout={(e) => setStage(e.nativeEvent.layout)}
+      >
+        {passPermission && shouldRenderCamera && device ? (
+          <VisionCamera
+            ref={myCamera}
+            style={StyleSheet.absoluteFill}
+            device={device}
+            isActive={isFocused}
+            photo={true}
+          />
+        ) : (
+          <View
+            style={[
+              StyleSheet.absoluteFill,
+              commonStyles.alignCenter,
+              commonStyles.justifyCenter,
+            ]}
+          >
+            <ActivityIndicator color={ORANGE} size="large" />
+          </View>
+        )}
+        {renderOvalMask()}
+      </View>
+
+      <MText style={styles.instruction}>
+        Xin vui lòng nhìn thẳng, khuôn mặt ở trong khung hình, ánh sáng đủ rõ
+        nét khuôn mặt
+      </MText>
+
+      <View style={[styles.captureWrap, { marginBottom: insets.bottom + 24 }]}>
+        {/* Quầng cam nhạt quanh nút chụp: tách nút khỏi nền trắng, đúng thiết kế */}
+        <View style={styles.captureHalo}>
+          {taking ? (
+            <ActivityIndicator color={ORANGE} size="large" />
+          ) : (
+            <MButton onPress={takePhoto}>
+              <TakePhotoSvg />
+            </MButton>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#FFFFFF' },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  backButton: { width: 32, height: 32, justifyContent: 'center' },
+  titleWrap: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 32,
+  },
+  headerTitle: { color: '#333333', fontSize: 16, fontWeight: '600' },
+  stage: {
+    flex: 1,
+    overflow: 'hidden',
+    backgroundColor: '#FFFFFF',
+  },
+  instruction: {
+    textAlign: 'center',
+    color: '#333333',
+    fontSize: 14,
+    lineHeight: 20,
+    paddingHorizontal: 32,
+    marginTop: 16,
+  },
+  captureWrap: { alignItems: 'center', marginTop: 24 },
+  captureHalo: {
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(240, 81, 35, 0.10)',
+  },
+});