@hexar/biometric-identity-sdk-react-native 1.1.25 → 1.1.27

package/dist/components/ProfilePictureCapture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfilePictureCapture.d.ts","sourceRoot":"","sources":["../../src/components/ProfilePictureCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AASxE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAmC,cAAc,EAAsB,MAAM,oCAAoC,CAAC;AAGzJ,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,UAAU,EAAE,CAAC,MAAM,EAAE,8BAA8B,KAAK,IAAI,CAAC;IAC7D,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAqOtE,CAAC;AAwBF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ProfilePictureCapture.d.ts","sourceRoot":"","sources":["../../src/components/ProfilePictureCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAmC,cAAc,EAAsB,MAAM,oCAAoC,CAAC;AAGzJ,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,UAAU,EAAE,CAAC,MAAM,EAAE,8BAA8B,KAAK,IAAI,CAAC;IAC7D,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAkUtE,CAAC;AAsEF,eAAe,qBAAqB,CAAC"}

package/dist/components/ProfilePictureCapture.js

@@ -44,6 +44,10 @@ const ProfilePictureCapture = ({ onComplete, onError, onCancel, theme, language,
     const [isValidating, setIsValidating] = (0, react_1.useState)(false);
     const [currentChallenges, setCurrentChallenges] = (0, react_1.useState)([]);
     const [isLoadingChallenges, setIsLoadingChallenges] = (0, react_1.useState)(false);
+    const animatedProgress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const [displayProgress, setDisplayProgress] = (0, react_1.useState)(0);
+    const animationRef = (0, react_1.useRef)(null);
+    const hasStartedAnimation = (0, react_1.useRef)(false);
     const handleFetchChallenges = (0, react_1.useCallback)(async () => {
         return await fetchChallenges('active');
     }, [fetchChallenges]);
@@ -139,6 +143,40 @@ const ProfilePictureCapture = ({ onComplete, onError, onCancel, theme, language,
             throw error;
         }
     }, [isInitialized, isUsingBackend, sdk]);
+    // Handle progress animation during validation
+    (0, react_1.useEffect)(() => {
+        if (isValidating && !hasStartedAnimation.current) {
+            hasStartedAnimation.current = true;
+            animatedProgress.setValue(0);
+            setDisplayProgress(0);
+            // Start animation to 90% over 60 seconds
+            animationRef.current = react_native_1.Animated.timing(animatedProgress, {
+                toValue: 90,
+                duration: 60000, // 60 seconds
+                useNativeDriver: false,
+            });
+            animationRef.current.start();
+            // Update display value
+            const listener = animatedProgress.addListener(({ value }) => {
+                setDisplayProgress(Math.round(value));
+            });
+            return () => {
+                animatedProgress.removeListener(listener);
+                if (animationRef.current) {
+                    animationRef.current.stop();
+                }
+            };
+        }
+        else if (!isValidating && hasStartedAnimation.current) {
+            // Reset when validation ends
+            hasStartedAnimation.current = false;
+            if (animationRef.current) {
+                animationRef.current.stop();
+            }
+            animatedProgress.setValue(0);
+            setDisplayProgress(0);
+        }
+    }, [isValidating, animatedProgress]);
     const handleVideoComplete = (0, react_1.useCallback)(async (videoResult) => {
         biometric_identity_sdk_core_1.logger.info('ProfilePictureCapture: Video recording completed', {
             framesCount: videoResult.frames?.length || 0,
@@ -150,7 +188,22 @@ const ProfilePictureCapture = ({ onComplete, onError, onCancel, theme, language,
         setIsValidating(true);
         try {
             const result = await validateWithBackend(videoResult);
+            if (animationRef.current) {
+                animationRef.current.stop();
+            }
+            react_native_1.Animated.timing(animatedProgress, {
+                toValue: 100,
+                duration: 500,
+                useNativeDriver: false,
+            }).start(() => {
+                setDisplayProgress(100);
+            });
+            // Small delay to show 100% before completing
+            await new Promise(resolve => setTimeout(resolve, 500));
             if (!result.isValid) {
+                if (animationRef.current) {
+                    animationRef.current.stop();
+                }
                 setIsValidating(false);
                 const livenessError = {
                     name: 'BiometricError',
@@ -164,6 +217,10 @@ const ProfilePictureCapture = ({ onComplete, onError, onCancel, theme, language,
             onComplete(result);
         }
         catch (error) {
+            // Stop animation on error
+            if (animationRef.current) {
+                animationRef.current.stop();
+            }
             setIsValidating(false);
             if (error && typeof error === 'object' && 'code' in error) {
                 onError(error);
@@ -190,18 +247,36 @@ const ProfilePictureCapture = ({ onComplete, onError, onCancel, theme, language,
             };
             onError(biometricError);
         }
-    }, [validateWithBackend, onComplete, onError, strings, language, currentChallenges]);
+    }, [validateWithBackend, onComplete, onError, strings, language, currentChallenges, animatedProgress]);
     const handleVideoCancel = (0, react_1.useCallback)(() => {
         if (onCancel) {
             onCancel();
         }
     }, [onCancel]);
     if (isValidating) {
+        const progressWidth = animatedProgress.interpolate({
+            inputRange: [0, 100],
+            outputRange: ['0%', '100%'],
+            extrapolate: 'clamp',
+        });
         return (react_1.default.createElement(react_native_1.SafeAreaView, { style: [styles.container, { backgroundColor: theme?.backgroundColor || '#FFFFFF' }] },
-            react_1.default.createElement(react_native_1.View, { style: styles.loadingContainer },
+            react_1.default.createElement(react_native_1.View, { style: styles.progressContainer },
                 react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: theme?.primaryColor || '#4f46e5' }),
-                react_1.default.createElement(react_native_1.Text, { style: [styles.loadingText, { color: theme?.textColor || '#1e1b4b' }] }, strings.liveness.processing || strings.validation.checkingLiveness || 'Processing...'),
-                react_1.default.createElement(react_native_1.Text, { style: [styles.loadingSubtext, { color: theme?.secondaryTextColor || '#64748b' }] }, strings.validation.almostDone || strings.common.loading || 'This may take a few seconds'))));
+                react_1.default.createElement(react_native_1.Text, { style: [styles.progressTitle, { color: theme?.textColor || '#1e1b4b' }] }, strings.validation.title || strings.liveness.processing || strings.validation.checkingLiveness || 'Validating Profile Picture'),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.progressStatusText, { color: theme?.secondaryTextColor || '#64748b' }] }, strings.validation.validatingFace || strings.liveness.processing || 'Validando rostro...'),
+                react_1.default.createElement(react_native_1.View, { style: styles.progressBarContainer },
+                    react_1.default.createElement(react_native_1.View, { style: styles.progressBar },
+                        react_1.default.createElement(react_native_1.Animated.View, { style: [
+                                styles.progressFill,
+                                {
+                                    width: progressWidth,
+                                    backgroundColor: theme?.primaryColor || '#4f46e5',
+                                },
+                            ] })),
+                    react_1.default.createElement(react_native_1.Text, { style: [styles.progressText, { color: theme?.textColor || '#1e1b4b' }] },
+                        displayProgress,
+                        "%")),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.progressBottomText, { color: theme?.secondaryTextColor || '#64748b' }] }, strings.validation.almostDone || strings.common.loading || 'Esto puede tardar unos segundos...'))));
     }
     // Wait for initialization and challenge loading before showing VideoRecorder
     if (!isInitialized || (isUsingBackend && isLoadingChallenges)) {
@@ -233,5 +308,51 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 14,
         marginTop: 8,
     },
+    progressContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+        width: '85%',
+        alignSelf: 'center',
+    },
+    progressTitle: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginTop: 24,
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    progressStatusText: {
+        fontSize: 16,
+        marginBottom: 32,
+        textAlign: 'center',
+    },
+    progressBarContainer: {
+        width: '100%',
+        marginBottom: 24,
+    },
+    progressBar: {
+        width: '100%',
+        height: 8,
+        backgroundColor: '#E5E7EB',
+        borderRadius: 4,
+        overflow: 'hidden',
+        marginBottom: 8,
+    },
+    progressFill: {
+        height: '100%',
+        borderRadius: 4,
+    },
+    progressText: {
+        fontSize: 14,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    progressBottomText: {
+        fontSize: 14,
+        textAlign: 'center',
+        marginTop: 16,
+    },
 });
 exports.default = exports.ProfilePictureCapture;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexar/biometric-identity-sdk-react-native",
-  "version": "1.1.25",
+  "version": "1.1.27",
   "description": "React Native wrapper for Biometric Identity SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/ProfilePictureCapture.tsx

@@ -5,6 +5,7 @@ import {
   StyleSheet,
   ActivityIndicator,
   SafeAreaView,
+  Animated,
 } from 'react-native';
 import { VideoRecorder, VideoRecordingResult } from './VideoRecorder';
 import { ThemeConfig, SupportedLanguage, getStrings, setLanguage, logger, BiometricError, BiometricErrorCode } from '@hexar/biometric-identity-sdk-core';
@@ -44,6 +45,10 @@ export const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps> = ({
   const [isValidating, setIsValidating] = useState(false);
   const [currentChallenges, setCurrentChallenges] = useState<any[]>([]);
   const [isLoadingChallenges, setIsLoadingChallenges] = useState(false);
+  const animatedProgress = useRef(new Animated.Value(0)).current;
+  const [displayProgress, setDisplayProgress] = useState(0);
+  const animationRef = useRef<Animated.CompositeAnimation | null>(null);
+  const hasStartedAnimation = useRef(false);
 
   const handleFetchChallenges = useCallback(async () => {
     return await fetchChallenges('active');
@@ -149,6 +154,44 @@ export const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps> = ({
     }
   }, [isInitialized, isUsingBackend, sdk]);
 
+  // Handle progress animation during validation
+  useEffect(() => {
+    if (isValidating && !hasStartedAnimation.current) {
+      hasStartedAnimation.current = true;
+      animatedProgress.setValue(0);
+      setDisplayProgress(0);
+      
+      // Start animation to 90% over 60 seconds
+      animationRef.current = Animated.timing(animatedProgress, {
+        toValue: 90,
+        duration: 60000, // 60 seconds
+        useNativeDriver: false,
+      });
+      
+      animationRef.current.start();
+      
+      // Update display value
+      const listener = animatedProgress.addListener(({ value }) => {
+        setDisplayProgress(Math.round(value));
+      });
+      
+      return () => {
+        animatedProgress.removeListener(listener);
+        if (animationRef.current) {
+          animationRef.current.stop();
+        }
+      };
+    } else if (!isValidating && hasStartedAnimation.current) {
+      // Reset when validation ends
+      hasStartedAnimation.current = false;
+      if (animationRef.current) {
+        animationRef.current.stop();
+      }
+      animatedProgress.setValue(0);
+      setDisplayProgress(0);
+    }
+  }, [isValidating, animatedProgress]);
+
   const handleVideoComplete = useCallback(async (videoResult: VideoRecordingResult) => {
     logger.info('ProfilePictureCapture: Video recording completed', {
       framesCount: videoResult.frames?.length || 0,
@@ -163,7 +206,24 @@ export const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps> = ({
     try {
       const result = await validateWithBackend(videoResult);
       
+      if (animationRef.current) {
+        animationRef.current.stop();
+      }
+      Animated.timing(animatedProgress, {
+        toValue: 100,
+        duration: 500,
+        useNativeDriver: false,
+      }).start(() => {
+        setDisplayProgress(100);
+      });
+      
+      // Small delay to show 100% before completing
+      await new Promise(resolve => setTimeout(resolve, 500));
+      
       if (!result.isValid) {
+        if (animationRef.current) {
+          animationRef.current.stop();
+        }
         setIsValidating(false);
         const livenessError: BiometricError = {
           name: 'BiometricError',
@@ -177,6 +237,10 @@ export const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps> = ({
       setIsValidating(false);
       onComplete(result);
     } catch (error: any) {
+      // Stop animation on error
+      if (animationRef.current) {
+        animationRef.current.stop();
+      }
       setIsValidating(false);
       
       if (error && typeof error === 'object' && 'code' in error) {
@@ -205,7 +269,7 @@ export const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps> = ({
       } as BiometricError;
       onError(biometricError);
     }
-  }, [validateWithBackend, onComplete, onError, strings, language, currentChallenges]);
+  }, [validateWithBackend, onComplete, onError, strings, language, currentChallenges, animatedProgress]);
 
   const handleVideoCancel = useCallback(() => {
     if (onCancel) {
@@ -214,15 +278,45 @@ export const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps> = ({
   }, [onCancel]);
 
   if (isValidating) {
+    const progressWidth = animatedProgress.interpolate({
+      inputRange: [0, 100],
+      outputRange: ['0%', '100%'],
+      extrapolate: 'clamp',
+    });
+
     return (
       <SafeAreaView style={[styles.container, { backgroundColor: theme?.backgroundColor || '#FFFFFF' }]}>
-        <View style={styles.loadingContainer}>
+        <View style={styles.progressContainer}>
           <ActivityIndicator size="large" color={theme?.primaryColor || '#4f46e5'} />
-          <Text style={[styles.loadingText, { color: theme?.textColor || '#1e1b4b' }]}>
-            {strings.liveness.processing || strings.validation.checkingLiveness || 'Processing...'}
+          
+          <Text style={[styles.progressTitle, { color: theme?.textColor || '#1e1b4b' }]}>
+            {strings.validation.title || strings.liveness.processing || strings.validation.checkingLiveness || 'Validating Profile Picture'}
+          </Text>
+
+          <Text style={[styles.progressStatusText, { color: theme?.secondaryTextColor || '#64748b' }]}>
+            {(strings.validation as any).validatingFace || strings.liveness.processing || 'Validando rostro...'}
           </Text>
-          <Text style={[styles.loadingSubtext, { color: theme?.secondaryTextColor || '#64748b' }]}>
-            {strings.validation.almostDone || strings.common.loading || 'This may take a few seconds'}
+
+          {/* Progress Bar */}
+          <View style={styles.progressBarContainer}>
+            <View style={styles.progressBar}>
+              <Animated.View
+                style={[
+                  styles.progressFill,
+                  {
+                    width: progressWidth,
+                    backgroundColor: theme?.primaryColor || '#4f46e5',
+                  },
+                ]}
+              />
+            </View>
+            <Text style={[styles.progressText, { color: theme?.textColor || '#1e1b4b' }]}>
+              {displayProgress}%
+            </Text>
+          </View>
+
+          <Text style={[styles.progressBottomText, { color: theme?.secondaryTextColor || '#64748b' }]}>
+            {strings.validation.almostDone || strings.common.loading || 'Esto puede tardar unos segundos...'}
           </Text>
         </View>
       </SafeAreaView>
@@ -277,6 +371,52 @@ const styles = StyleSheet.create({
     fontSize: 14,
     marginTop: 8,
   },
+  progressContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+    width: '85%',
+    alignSelf: 'center',
+  },
+  progressTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginTop: 24,
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  progressStatusText: {
+    fontSize: 16,
+    marginBottom: 32,
+    textAlign: 'center',
+  },
+  progressBarContainer: {
+    width: '100%',
+    marginBottom: 24,
+  },
+  progressBar: {
+    width: '100%',
+    height: 8,
+    backgroundColor: '#E5E7EB',
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 4,
+  },
+  progressText: {
+    fontSize: 14,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  progressBottomText: {
+    fontSize: 14,
+    textAlign: 'center',
+    marginTop: 16,
+  },
 });
 
 export default ProfilePictureCapture;