@ha_tecno/live-id-sdk 1.0.0 → 2.1.0

package/src/components/recordButton/recordButton.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from "react";
+import { Pressable } from "react-native";
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming
+} from "react-native-reanimated";
+import Icon from "../icon/icon";
+import { styles } from "./styles";
+
+type Props = {
+  onPress: () => void;
+  disabled: boolean;
+  isRecording: boolean;
+  timer: number;
+};
+
+const RecordButton = ({ onPress, disabled, timer, isRecording }: Props) => {
+  const progress = useSharedValue(0);
+  const width = useSharedValue(100);
+  const translateX = useSharedValue(0);
+  const opacity = useSharedValue(0);
+
+  const animatedView = useAnimatedStyle(() => ({
+    width: width.value,
+    backgroundColor: interpolateColor(progress.value, [0, 1], ["#1F75FF", "#DE3737"])
+  }));
+
+  const animatedIcon = useAnimatedStyle(() => ({
+    transform: [{ translateX: -translateX.value }]
+  }));
+
+  const animatedText = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateX: translateX.value }]
+  }));
+
+  useEffect(() => {
+    if (timer === 0) {
+      setTimeout(() => {
+        width.value = withSpring(100);
+        translateX.value = withSpring(0);
+        opacity.value = withTiming(0, { duration: 250 });
+      }, 500);
+      setTimeout(() => {
+        progress.value = withSpring(0, { duration: 1000 });
+      }, 5);
+    }
+  }, [width, opacity, timer, progress, translateX]);
+
+  const handlePress = () => {
+    onPress();
+    width.value = withSpring(175);
+    translateX.value = withSpring(25);
+    opacity.value = withTiming(1, { duration: 250 });
+    progress.value = withSpring(1, { duration: 1000 });
+  };
+
+  return (
+    <Pressable onPress={handlePress} disabled={disabled}>
+      <Animated.View style={[styles.container, animatedView]}>
+        <Animated.View style={animatedIcon}>
+          <Icon name="videocam-outline" size={40} color="white" />
+        </Animated.View>
+        {isRecording && timer >= 0 ? (
+          <Animated.Text style={[styles.text, animatedText]}>{timer}</Animated.Text>
+        ) : undefined}
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+export default RecordButton;

package/src/components/recordButton/styles.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+	container: {
+		flexDirection: "row",
+		height: 50,
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: 50,
+	},
+	text: {
+		position: "absolute",
+		color: "#fff",
+	},
+});

package/src/index.tsx

@@ -1,6 +1,7 @@
-export { ValidaFinger } from './screens/ValidadeFinger';
+import { LifeCertificate, FingerRegister, FingerAuth } from "./screens";
 
 // deprecated
-export { CameraProvaVidas } from './screens/ProvaVidas';
-export { CadastroFinger } from './screens/CadastroFinger';
-export { CadastroScreen } from './screens/CadastroScreen/CadastroScreen';
+
+export { CadastroScreen } from "./screens/CadastroScreen/CadastroScreen";
+
+export { LifeCertificate, FingerRegister, FingerAuth };

package/src/screens/CadastroScreen/CadastroScreen.tsx

@@ -1,18 +1,8 @@
 /* eslint-disable react-native/no-inline-styles */
-import React, { useEffect, useState } from 'react';
-import {
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  StyleSheet,
-  Alert,
-  Image,
-} from 'react-native';
-import { cadastro } from '../../services';
-import Modal, { type ModalProps } from 'react-native-modal';
-
-import type { ScreenProps } from '../../types/screen';
+import React, { useEffect, useState } from "react";
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, Image } from "react-native";
+import { cadastro } from "../../services";
+import Modal, { type ModalProps } from "react-native-modal";
 
 interface CadastroScreenProps {
   isVisible: boolean;
@@ -20,7 +10,6 @@ interface CadastroScreenProps {
   onError?: (response?: any) => void;
   onSuccess?: (response?: any) => void;
   ModalParams?: ModalProps;
-  screenProps?: ScreenProps;
 }
 
 export const CadastroScreen: React.FC<CadastroScreenProps> = ({
@@ -28,15 +17,15 @@ export const CadastroScreen: React.FC<CadastroScreenProps> = ({
   onCloseModal,
   onError,
   onSuccess,
-  ModalParams,
+  ModalParams
 }) => {
-  const [cpf, setCpf] = useState('');
-  const [nome, setNome] = useState('');
-  const [senha, setSenha] = useState('');
-  const [confirmarSenha, setConfirmarSenha] = useState('');
+  const [cpf, setCpf] = useState("");
+  const [nome, setNome] = useState("");
+  const [senha, setSenha] = useState("");
+  const [confirmarSenha, setConfirmarSenha] = useState("");
 
   const generateRandomElevenDigits = () => {
-    let cpf = '';
+    let cpf = "";
     for (let i = 0; i < 11; i++) {
       cpf += Math.floor(Math.random() * 9);
     }
@@ -45,7 +34,7 @@ export const CadastroScreen: React.FC<CadastroScreenProps> = ({
 
   const generateRandomName = () => {
     // uma strin aleatória de 10 caracteres a 14 caracteres
-    let name = '';
+    let name = "";
     const length = Math.floor(Math.random() * 5) + 10;
     for (let i = 0; i < length; i++) {
       name += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
@@ -60,8 +49,8 @@ export const CadastroScreen: React.FC<CadastroScreenProps> = ({
   const generateRnadomUser = () => {
     setCpf(generateRandomElevenDigits());
     setNome(generateRandomName());
-    setSenha('123');
-    setConfirmarSenha('123');
+    setSenha("123");
+    setConfirmarSenha("123");
   };
 
   const handleCadastro = async () => {
@@ -74,7 +63,7 @@ export const CadastroScreen: React.FC<CadastroScreenProps> = ({
         onSuccess && onSuccess(response);
 
         onCloseModalHandler();
-        if (jsonString.includes('person_id')) {
+        if (jsonString.includes("person_id")) {
           if (response.finger === false) {
             // openModal({
             //   type: 'ajuda',
@@ -87,24 +76,18 @@ export const CadastroScreen: React.FC<CadastroScreenProps> = ({
             //   type: 'login',
             // });
           }
-        } else if (jsonString.includes('User exists')) {
-          Alert.alert('Usuário já cadastrado!');
+        } else if (jsonString.includes("User exists")) {
+          Alert.alert("Usuário já cadastrado!");
           // openModal({
           //   type: 'login',
           // });
-        } else if (jsonString.includes('erro')) {
-          Alert.alert('Usuário não cadastrado', 'Por favor, cadastre-se!');
+        } else if (jsonString.includes("erro")) {
+          Alert.alert("Usuário não cadastrado", "Por favor, cadastre-se!");
         } else {
-          Alert.alert(
-            'Erro',
-            'Ocorreu um erro ao fazer o Cadastro. Por favor, tente novamente mais tarde.'
-          );
+          Alert.alert("Erro", "Ocorreu um erro ao fazer o Cadastro. Por favor, tente novamente mais tarde.");
         }
       } else {
-        Alert.alert(
-          'Erro',
-          'As senhas não coincidem. Por favor, tente novamente.'
-        );
+        Alert.alert("Erro", "As senhas não coincidem. Por favor, tente novamente.");
         return;
       }
     } catch (error) {
@@ -128,7 +111,7 @@ export const CadastroScreen: React.FC<CadastroScreenProps> = ({
       {...ModalParams}
     >
       <View style={styles.container}>
-        <Image source={require('../../assets/logo.png')} style={styles.logo} />
+        <Image source={require("../../assets/logo.png")} style={styles.logo} />
         <Text style={styles.title}>Cadastro de usuário</Text>
         <TextInput
           style={styles.input}
@@ -172,41 +155,41 @@ export const CadastroScreen: React.FC<CadastroScreenProps> = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#fff',
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#fff"
   },
   title: {
     fontSize: 24,
     marginBottom: 16,
-    color: '#00bfff',
+    color: "#00bfff"
   },
   input: {
-    width: '80%',
+    width: "80%",
     height: 50,
     padding: 10,
     borderWidth: 1,
-    borderColor: '#ccc',
+    borderColor: "#ccc",
     borderRadius: 4,
     marginBottom: 16,
     fontSize: 16,
-    color: '#000',
+    color: "#000"
   },
   button: {
-    width: '80%',
+    width: "80%",
     height: 50,
-    backgroundColor: '#00bfff',
+    backgroundColor: "#00bfff",
     borderRadius: 4,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center"
   },
   buttonText: {
     fontSize: 16,
-    color: '#fff',
+    color: "#fff"
   },
   logo: {
     width: 500,
     height: 250,
-    resizeMode: 'contain',
-  },
+    resizeMode: "contain"
+  }
 });

package/src/screens/FingerAuth/FingerAuth.tsx

@@ -0,0 +1,121 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { View } from "react-native";
+import { Camera, useCameraFormat, Point, useCameraDevice, useCameraPermission } from "react-native-vision-camera";
+import Orientation from "react-native-orientation-locker";
+import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import { runOnJS } from "react-native-reanimated";
+
+import { styles } from "./styles";
+import { DeviceNotFound, Gabarito, CameraConfigInfo, ModalMessage, CaptureButton } from "../../components";
+import { useDispatch, useSelector } from "../../store/modules/fingerAuth";
+
+type Props = {
+  UID: string;
+  qualityPrioritization?: "speed" | "quality" | "balanced";
+  onSuccess: (code: number) => void;
+};
+
+const FingerAuth = ({ UID, qualityPrioritization, onSuccess }: Props) => {
+  const cameraRef = useRef<Camera>(null);
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const device = useCameraDevice("back");
+  const dispatch = useDispatch();
+  const state = useSelector();
+
+  useEffect(() => {
+    Orientation.lockToPortrait();
+    return () => {
+      Orientation.unlockAllOrientations();
+    };
+  }, []);
+
+  const cameraPermission = useCallback(async () => {
+    if (!hasPermission) {
+      await requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
+
+  useEffect(() => {
+    cameraPermission();
+    dispatch.getConfig("finger");
+  }, [cameraPermission]);
+
+  const containerCaptureStyled = useMemo(
+    () => [styles.containerCapture, { bottom: state.showButtonInfo ? 75 : 20 }],
+    [state.showButtonInfo]
+  );
+
+  const cameraFormat = useCameraFormat(device, [
+    {
+      photoResolution: {
+        height: 1280,
+        width: 720
+      }
+    }
+  ]);
+
+  useEffect(() => {
+    if (state.code === 0) {
+      dispatch.setModal("Sucesso!", "Usuário Identificado!");
+      onSuccess && onSuccess?.(state.code);
+      dispatch.handleLoading();
+    }
+    if (state.code !== 0 && state.code !== null) {
+      dispatch.setModal("Ocorreu um erro!", `Erro: ${state.message}`);
+      dispatch.handleLoading();
+    }
+    dispatch.resetState();
+  }, [state.code, state.message, dispatch.handleLoading, dispatch.resetState, dispatch.setModal]);
+
+  const takePhoto = async () => {
+    const photo = await cameraRef.current?.takePhoto({
+      qualityPrioritization: qualityPrioritization,
+      flash: "on"
+    });
+    if (photo != null) dispatch.sendImage(photo.path, UID);
+  };
+
+  const focus = useCallback((point: Point) => {
+    const camera = cameraRef.current;
+    if (camera != null) {
+      camera.focus(point);
+    }
+  }, []);
+
+  const gesture = Gesture.Tap().onBegin(({ x, y }) => {
+    runOnJS(focus)({ x, y });
+  });
+
+  if (device == null || hasPermission === false)
+    return <DeviceNotFound hasPermission={hasPermission} cameraPermission={cameraPermission} />;
+
+  return (
+    <GestureHandlerRootView style={styles.root}>
+      <GestureDetector gesture={gesture}>
+        <View style={styles.cameraContainer}>
+          <Camera
+            ref={cameraRef}
+            style={styles.camera}
+            isActive={true}
+            device={device}
+            format={cameraFormat}
+            torch={"on"}
+            focusable={true}
+            exposure={state.exposure}
+            zoom={2}
+            photo={true}
+            enableHighQualityPhotos={true}
+          />
+          <Gabarito />
+        </View>
+      </GestureDetector>
+      <View style={containerCaptureStyled}>
+        <CaptureButton authFinger onPress={takePhoto} loading={state.loading} />
+      </View>
+      {state.showButtonInfo && <CameraConfigInfo exposure={state.exposure} zoom={state.exposure} />}
+      <ModalMessage isLoading={state.loading} modal={state.modal} />
+    </GestureHandlerRootView>
+  );
+};
+
+export default FingerAuth;

package/src/screens/FingerAuth/styles.ts

@@ -0,0 +1,28 @@
+import { StyleSheet, Dimensions } from "react-native";
+
+const { height } = Dimensions.get("window");
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  root: {
+    flex: 1
+  },
+  cameraContainer: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  camera: {
+    flex: 1,
+    paddingBottom: height * 0.2
+  },
+  containerCapture: {
+    position: "absolute",
+    width: "100%",
+    alignItems: "center"
+  },
+  cameraConfigs: {
+    alignItems: "center"
+  }
+});

package/src/screens/FingerRegister/index.tsx

@@ -0,0 +1,139 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { View } from "react-native";
+import { Camera, useCameraFormat, type Point, useCameraDevice, useCameraPermission } from "react-native-vision-camera";
+import Orientation from "react-native-orientation-locker";
+import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import { runOnJS } from "react-native-reanimated";
+
+import { styles } from "./styles";
+import { useSelector, useDispatch } from "../../store/modules/fingerRegister";
+import {
+  CaptureButton,
+  DeviceNotFound,
+  HelpRegister,
+  ModalMessage,
+  CameraConfigInfo,
+  Gabarito
+} from "../../components";
+
+type Props = {
+  UID: string;
+  qualityPrioritization: "speed" | "quality" | "balanced";
+};
+
+const FingerRegister = ({ UID, qualityPrioritization }: Props) => {
+  const cameraRef = useRef<Camera>(null);
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const state = useSelector();
+  const dispatch = useDispatch();
+  const device = useCameraDevice("back");
+  const base64ImagesCount = state.base64Images.length;
+
+  useEffect(() => {
+    Orientation.lockToPortrait();
+    return () => {
+      Orientation.unlockAllOrientations();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (state.base64Images !== undefined && base64ImagesCount === 3) {
+      if (!UID) {
+        dispatch.setModal("Ocorreu um erro!", "Erro: UID não encontrado!");
+      }
+      dispatch.handleLoading();
+      dispatch.sendImages(state.base64Images, UID);
+    }
+  }, [dispatch.sendImages, dispatch.handleLoading, state.base64Images, base64ImagesCount]);
+
+  useEffect(() => {
+    if (state.code === 0) {
+      dispatch.setModal("Sucesso!", "Cadastro de digital realizado com sucesso!");
+      dispatch.handleLoading();
+    }
+    if (state.code !== 0 && state.code !== null) {
+      dispatch.setModal("Ocorreu um erro!", `Erro: ${state.message}`);
+      dispatch.handleLoading();
+    }
+    dispatch.resetState();
+  }, [state.code, state.message, dispatch.handleLoading, dispatch.resetState, dispatch.setModal]);
+
+  const cameraPermission = useCallback(async () => {
+    if (!hasPermission) {
+      await requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
+
+  useEffect(() => {
+    cameraPermission();
+    dispatch.getConfig("finger");
+  }, [cameraPermission]);
+
+  const containerCaptureStyled = useMemo(
+    () => [styles.containerCapture, { bottom: state.showButtonInfo ? 75 : 20 }],
+    [state.showButtonInfo]
+  );
+
+  const cameraFormat = useCameraFormat(device, [
+    {
+      photoResolution: {
+        width: 1920,
+        height: 1080
+      },
+      pixelFormat: "native"
+    }
+  ]);
+
+  const takePhoto = async () => {
+    const photo = await cameraRef.current?.takePhoto({
+      qualityPrioritization: qualityPrioritization,
+      flash: "on"
+    });
+    if (photo != null) dispatch.setImagePath(photo.path);
+  };
+
+  const focus = useCallback((point: Point) => {
+    const camera = cameraRef.current;
+    if (camera != null) {
+      camera.focus(point);
+    }
+  }, []);
+
+  const gesture = Gesture.Tap().onBegin(({ x, y }) => {
+    runOnJS(focus)({ x, y });
+  });
+
+  if (device == null || hasPermission === false)
+    return <DeviceNotFound hasPermission={hasPermission} cameraPermission={cameraPermission} />;
+
+  return (
+    <GestureHandlerRootView style={styles.root}>
+      <HelpRegister />
+      <GestureDetector gesture={gesture}>
+        <View style={styles.cameraContainer}>
+          <Camera
+            ref={cameraRef}
+            style={styles.camera}
+            isActive={true}
+            device={device}
+            format={cameraFormat}
+            torch={"on"}
+            focusable={true}
+            exposure={state.exposure}
+            zoom={state.exposure}
+            photo={true}
+            enableHighQualityPhotos={true}
+          />
+          <Gabarito />
+        </View>
+      </GestureDetector>
+      <View style={containerCaptureStyled}>
+        <CaptureButton onPress={takePhoto} imagesCount={base64ImagesCount} />
+      </View>
+      {state.showButtonInfo && <CameraConfigInfo exposure={state.exposure} zoom={state.zoom} />}
+      <ModalMessage isLoading={state.loading} modal={state.modal} />
+    </GestureHandlerRootView>
+  );
+};
+
+export default FingerRegister;

package/src/screens/FingerRegister/styles.ts

@@ -0,0 +1,28 @@
+import { StyleSheet, Dimensions } from "react-native";
+
+const { height } = Dimensions.get("window");
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  root: {
+    flex: 1
+  },
+  cameraContainer: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  camera: {
+    flex: 1,
+    paddingBottom: height * 0.2
+  },
+  containerCapture: {
+    position: "absolute",
+    width: "100%",
+    alignItems: "center"
+  },
+  cameraConfigs: {
+    alignItems: "center"
+  }
+});