@hexar/biometric-identity-sdk-react-native 1.0.6 → 1.0.8

package/src/components/InstructionsScreen.tsx

@@ -18,6 +18,7 @@ export interface InstructionsScreenProps {
   theme?: ThemeConfig;
   language?: SupportedLanguage;
   onStart: () => void;
+  onCancel?: () => void;
   styles?: {
     container?: ViewStyle;
     content?: ViewStyle;
@@ -28,6 +29,7 @@ export const InstructionsScreen: React.FC<InstructionsScreenProps> = ({
   theme,
   language = 'en',
   onStart,
+  onCancel,
   styles: customStyles,
 }) => {
   const [strings, setStrings] = useState(() => {
@@ -102,12 +104,27 @@ export const InstructionsScreen: React.FC<InstructionsScreenProps> = ({
         </View>
       </ScrollView>
 
-      {/* Start Button */}
+      {/* Footer Buttons */}
       <View style={styles.footer}>
+        {onCancel && (
+          <TouchableOpacity
+            style={[
+              styles.button,
+              styles.cancelButton,
+              { borderColor: theme?.errorColor || '#EF4444' },
+            ]}
+            onPress={onCancel}
+          >
+            <Text style={[styles.buttonText, { color: theme?.errorColor || '#EF4444' }]}>
+              {strings.common.cancel || 'Cancel'}
+            </Text>
+          </TouchableOpacity>
+        )}
         <TouchableOpacity
           style={[
             styles.button,
             { backgroundColor: theme?.primaryColor || '#6366F1' },
+            onCancel && styles.startButton,
           ]}
           onPress={onStart}
         >
@@ -235,12 +252,22 @@ const styles = StyleSheet.create({
     padding: 24,
     borderTopWidth: 1,
     borderTopColor: '#E5E7EB',
+    flexDirection: 'row',
+    gap: 12,
   },
   button: {
     paddingVertical: 16,
     paddingHorizontal: 32,
     borderRadius: 8,
     alignItems: 'center',
+    flex: 1,
+  },
+  cancelButton: {
+    borderWidth: 2,
+    backgroundColor: 'transparent',
+  },
+  startButton: {
+    flex: 1,
   },
   buttonText: {
     color: '#FFFFFF',

package/src/components/VideoRecorder.tsx

@@ -14,9 +14,9 @@ import {
   Platform,
   Alert,
 } from 'react-native';
-import { Camera, useCameraDevice, useCameraPermission, useFrameProcessor } from 'react-native-vision-camera';
+import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
 import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';
-import { ThemeConfig, LivenessInstruction } from '@hexar/biometric-identity-sdk-core';
+import { ThemeConfig, LivenessInstruction, SupportedLanguage, getStrings, setLanguage } from '@hexar/biometric-identity-sdk-core';
 
 // Challenge action configuration (matches backend response)
 export interface ChallengeAction {
@@ -29,6 +29,7 @@ export interface ChallengeAction {
 
 export interface VideoRecorderProps {
   theme?: ThemeConfig;
+  language?: SupportedLanguage;
   /** Total recording duration in ms (default: 8000ms for smart mode) */
   duration?: number;
   /** Instructions for user to follow */
@@ -88,22 +89,22 @@ const DEFAULT_CHALLENGES: ChallengeAction[] = [
   },
 ];
 
-// Instruction text mapping
-const INSTRUCTION_MAP: Record<string, { text: string; icon: string }> = {
-  look_left: { text: 'Slowly turn your head LEFT', icon: '←' },
-  look_right: { text: 'Slowly turn your head RIGHT', icon: '→' },
-  look_up: { text: 'Look UP', icon: '↑' },
-  look_down: { text: 'Look DOWN', icon: '↓' },
-  turn_head_left: { text: 'Turn your head LEFT', icon: '←' },
-  turn_head_right: { text: 'Turn your head RIGHT', icon: '→' },
-  smile: { text: 'Smile 😊', icon: '😊' },
-  blink: { text: 'Blink your eyes naturally', icon: '👁' },
-  open_mouth: { text: 'Open your mouth slightly', icon: '😮' },
-  stay_still: { text: 'Look at the camera and stay still', icon: '📷' },
-};
+const getInstructionMap = (strings: any): Record<string, { text: string; icon: string }> => ({
+  look_left: { text: strings.liveness.instructions.lookLeft || 'Slowly turn your head LEFT', icon: '←' },
+  look_right: { text: strings.liveness.instructions.lookRight || 'Slowly turn your head RIGHT', icon: '→' },
+  look_up: { text: strings.liveness.instructions.lookUp || 'Look UP', icon: '↑' },
+  look_down: { text: strings.liveness.instructions.lookDown || 'Look DOWN', icon: '↓' },
+  turn_head_left: { text: strings.liveness.instructions.turnHeadLeft || 'Turn your head LEFT', icon: '←' },
+  turn_head_right: { text: strings.liveness.instructions.turnHeadRight || 'Turn your head RIGHT', icon: '→' },
+  smile: { text: strings.liveness.instructions.smile || 'Smile 😊', icon: '😊' },
+  blink: { text: strings.liveness.instructions.blink || 'Blink your eyes naturally', icon: '👁' },
+  open_mouth: { text: strings.liveness.instructions.openMouth || 'Open your mouth slightly', icon: '😮' },
+  stay_still: { text: strings.liveness.instructions.stayStill || 'Look at the camera and stay still', icon: '📷' },
+});
 
 export const VideoRecorder: React.FC<VideoRecorderProps> = ({
   theme,
+  language,
   duration,
   instructions,
   challenges: propChallenges,
@@ -113,6 +114,11 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
   onCancel,
   onFetchChallenges,
 }) => {
+  if (language) {
+    setLanguage(language);
+  }
+  const strings = getStrings();
+  
   // State
   const [phase, setPhase] = useState<'loading' | 'countdown' | 'recording' | 'processing'>('loading');
   const [countdown, setCountdown] = useState(3);
@@ -136,13 +142,16 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
   const arrowAnim = useRef(new Animated.Value(0)).current;
   const progressAnim = useRef(new Animated.Value(0)).current;
   
-  // Refs
   const recordingStartTime = useRef<number>(0);
   const frameInterval = useRef<NodeJS.Timeout | null>(null);
   const frameCaptureInterval = useRef<NodeJS.Timeout | null>(null);
-
-  // Calculate total duration from challenges
-  const totalDuration = duration || challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000;
+  const videoRecordingRef = useRef<any>(null);
+  const isRecordingRef = useRef<boolean>(false);
+  const minDurationMs = 8000;
+  const totalDuration = duration || Math.max(
+    minDurationMs,
+    challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000
+  );
 
   // Check camera permissions
   useEffect(() => {
@@ -194,13 +203,13 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
           // Fetch from backend
           challengeList = await onFetchChallenges();
         } else if (instructions && instructions.length > 0) {
-          // Convert instructions to challenges
+          const instructionMap = getInstructionMap(strings);
           challengeList = instructions.map((inst, idx) => ({
             action: inst,
-            instruction: INSTRUCTION_MAP[inst]?.text || inst,
+            instruction: instructionMap[inst]?.text || inst,
             duration_ms: 2000,
             order: idx + 1,
-            icon: INSTRUCTION_MAP[inst]?.icon,
+            icon: instructionMap[inst]?.icon,
           }));
         } else {
           // Use default challenges
@@ -298,53 +307,149 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
     ).start();
   }, [arrowAnim]);
 
-  // Start recording
-  const startRecording = useCallback(async () => {
-    setPhase('recording');
-    recordingStartTime.current = Date.now();
+  const resetAndRetry = useCallback(() => {
+    setFrames([]);
+    setCompletedChallenges([]);
+    setCurrentChallengeIndex(0);
+    setChallengeProgress(0);
+    setOverallProgress(0);
+    recordingStartTime.current = 0;
+    setPhase('countdown');
+    setCountdown(3);
+  }, []);
+
+  const handleRecordingError = useCallback((error: any) => {
+    setPhase('loading');
+    Alert.alert(
+      'Recording Error',
+      'Failed to record video. Please try again.',
+      [{ text: 'OK', onPress: onCancel }]
+    );
+  }, [onCancel]);
+
+  const handleVideoComplete = useCallback(async (video: any) => {
+    console.log('handleVideoComplete called with video:', video?.path);
     
-    // Start capturing frames from camera
+    try {
+      setPhase('processing');
+      const actualDuration = Date.now() - recordingStartTime.current;
+      
+      console.log('Video duration:', actualDuration, 'min required:', minDurationMs);
+      
+      if (actualDuration < minDurationMs) {
+        setPhase('recording');
+        Alert.alert(
+          strings.errors.videoTooShort?.title || 'Recording Too Short',
+          strings.errors.videoTooShort?.message || `Video must be at least ${minDurationMs / 1000} seconds. Please try again.`,
+          [{ text: strings.common.retry || 'OK', onPress: resetAndRetry }]
+        );
+        return;
+      }
+
+      let videoBase64 = '';
+      if (video?.path) {
+        try {
+          const RNFS = require('react-native-fs');
+          videoBase64 = await RNFS.readFile(video.path, 'base64');
+          console.log('Video file read successfully, size:', videoBase64.length);
+        } catch (fsError) {
+          console.warn('Could not read video file, using captured frames:', fsError);
+        }
+      }
+      
+      const result: VideoRecordingResult = {
+        frames: frames.length > 0 ? frames : (videoBase64 ? [videoBase64] : []),
+        duration: actualDuration,
+        instructionsFollowed: completedChallenges.length === challenges.length,
+        qualityScore: frames.length > 0 ? Math.min(100, (frames.length / 30) * 100) : 85,
+        challengesCompleted: completedChallenges,
+        sessionId,
+      };
+
+      console.log('Video recording completed successfully:', {
+        duration: actualDuration,
+        frames: result.frames.length,
+        challengesCompleted: completedChallenges.length,
+        instructionsFollowed: result.instructionsFollowed
+      });
+
+      onComplete(result);
+    } catch (error) {
+      console.error('Error processing video:', error);
+      setPhase('recording');
+      handleRecordingError(error);
+    }
+  }, [frames, completedChallenges, challenges, sessionId, onComplete, resetAndRetry, handleRecordingError, strings, minDurationMs]);
+
+  const startFrameCapture = useCallback(() => {
     if (cameraRef.current && device) {
-      // Capture frames periodically (every 100ms = ~10 FPS)
       frameCaptureInterval.current = setInterval(async () => {
         try {
-          // Take a photo frame (react-native-vision-camera doesn't have direct frame access in v4)
-          // We'll use takeSnapshot or capture frames via photo
           const photo = await cameraRef.current?.takePhoto({
             flash: 'off',
           });
           
           if (photo) {
-            // Convert to base64 if possible, otherwise use file path
             try {
               const RNFS = require('react-native-fs');
               const base64 = await RNFS.readFile(photo.path, 'base64');
-              setFrames(prev => [...prev, base64]);
+              setFrames(prev => {
+                if (prev.length < 100) {
+                  return [...prev, base64];
+                }
+                return prev;
+              });
             } catch (fsError) {
-              // Fallback: use file path
-              setFrames(prev => [...prev, photo.path]);
+              setFrames(prev => {
+                if (prev.length < 100) {
+                  return [...prev, photo.path];
+                }
+                return prev;
+              });
             }
           }
         } catch (error) {
           console.warn('Frame capture error:', error);
-          // Continue even if one frame fails
         }
       }, 100);
-    } else {
-      // Fallback: simulate frames if camera not available
-      frameInterval.current = setInterval(() => {
-        setFrames(prev => [...prev, `frame_${Date.now()}`]);
-      }, 100);
     }
-
-    // Start first challenge
-    runChallenge(0);
   }, [device]);
 
-  // Run a specific challenge
+  const stopRecording = useCallback(async () => {
+    console.log('Stopping recording...');
+    isRecordingRef.current = false;
+    
+    if (videoRecordingRef.current) {
+      try {
+        console.log('Stopping video recording');
+        await videoRecordingRef.current.stop();
+        console.log('Video recording stopped');
+      } catch (error) {
+        console.error('Error stopping video recording:', error);
+      }
+      videoRecordingRef.current = null;
+    }
+    
+    if (frameCaptureInterval.current) {
+      clearInterval(frameCaptureInterval.current);
+      frameCaptureInterval.current = null;
+    }
+  }, []);
+
   const runChallenge = useCallback((index: number) => {
     if (index >= challenges.length) {
-      completeRecording();
+      if (isRecordingRef.current) {
+        const elapsed = Date.now() - recordingStartTime.current;
+        if (elapsed < minDurationMs) {
+          setTimeout(() => {
+            if (isRecordingRef.current) {
+              stopRecording();
+            }
+          }, minDurationMs - elapsed);
+          return;
+        }
+        stopRecording();
+      }
       return;
     }
 
@@ -352,84 +457,94 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
     setCurrentChallengeIndex(index);
     setChallengeProgress(0);
 
-    // Fade in instruction
     Animated.timing(fadeAnim, {
       toValue: 1,
       duration: 300,
       useNativeDriver: true,
     }).start();
 
-    // Animate arrow for directional challenges
     if (challenge.action.includes('left') || challenge.action.includes('right')) {
       animateArrow(challenge.action);
     }
 
-    // Progress animation for this challenge
     Animated.timing(progressAnim, {
       toValue: 100,
       duration: challenge.duration_ms,
       useNativeDriver: false,
     }).start();
 
-    // Update progress in real-time
     const progressInterval = setInterval(() => {
       setChallengeProgress(prev => {
         const newProgress = prev + (100 / (challenge.duration_ms / 100));
         return Math.min(100, newProgress);
       });
 
-      // Update overall progress
       const elapsed = Date.now() - recordingStartTime.current;
-      const totalTime = challenges.reduce((sum, c) => sum + c.duration_ms, 0);
+      const totalTime = Math.max(totalDuration, challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000);
       setOverallProgress(Math.min(100, (elapsed / totalTime) * 100));
     }, 100);
 
-    // Move to next challenge after duration
     setTimeout(() => {
       clearInterval(progressInterval);
       
-      // Mark challenge as completed
       setCompletedChallenges(prev => [...prev, challenge.action]);
       
-      // Fade out current instruction
       Animated.timing(fadeAnim, {
         toValue: 0,
         duration: 200,
         useNativeDriver: true,
       }).start(() => {
-        // Reset and start next challenge
         progressAnim.setValue(0);
         runChallenge(index + 1);
       });
     }, challenge.duration_ms);
-  }, [challenges, fadeAnim, progressAnim, animateArrow]);
+  }, [challenges, fadeAnim, progressAnim, animateArrow, totalDuration, minDurationMs, stopRecording]);
 
-  // Complete recording
-  const completeRecording = useCallback(() => {
-    if (frameInterval.current) {
-      clearInterval(frameInterval.current);
-    }
-    if (frameCaptureInterval.current) {
-      clearInterval(frameCaptureInterval.current);
+  const startRecording = useCallback(async () => {
+    setPhase('recording');
+    recordingStartTime.current = Date.now();
+    isRecordingRef.current = true;
+    
+    console.log('Starting video recording, total duration:', totalDuration);
+    
+    if (cameraRef.current && device) {
+      try {
+        videoRecordingRef.current = await cameraRef.current.startRecording({
+          flash: 'off',
+          onRecordingFinished: (video: any) => {
+            console.log('Video recording finished callback called', video);
+            if (isRecordingRef.current) {
+              handleVideoComplete(video);
+            }
+          },
+          onRecordingError: (error: any) => {
+            console.error('Recording error:', error);
+            handleRecordingError(error);
+          },
+        });
+        console.log('Video recording started successfully');
+      } catch (error) {
+        console.warn('Video recording not available, falling back to frame capture:', error);
+        startFrameCapture();
+      }
+    } else {
+      console.log('Camera not available, using frame capture');
+      startFrameCapture();
     }
 
-    setPhase('processing');
-    setOverallProgress(100);
-
-    // Process and return result
-    setTimeout(() => {
-      const result: VideoRecordingResult = {
-        frames,
-        duration: Date.now() - recordingStartTime.current,
-        instructionsFollowed: completedChallenges.length === challenges.length,
-        qualityScore: frames.length > 0 ? 85 + Math.random() * 10 : 0, // Quality based on frames captured
-        challengesCompleted: completedChallenges,
-        sessionId,
-      };
-
-      onComplete(result);
-    }, 500);
-  }, [frames, completedChallenges, challenges, sessionId, onComplete]);
+    runChallenge(0);
+    
+    const timeoutId = setTimeout(() => {
+      console.log('Recording timeout reached, stopping recording');
+      if (isRecordingRef.current) {
+        stopRecording().catch(err => {
+          console.error('Error stopping recording on timeout:', err);
+        });
+      }
+    }, totalDuration);
+    
+    return () => clearTimeout(timeoutId);
+  }, [device, totalDuration, handleVideoComplete, handleRecordingError, runChallenge, stopRecording, startFrameCapture]);
 
   // Current challenge
   const currentChallenge = challenges[currentChallengeIndex];
@@ -491,13 +606,17 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
     return (
       <View style={styles.container}>
         <View style={styles.permissionContainer}>
-          <Text style={styles.permissionText}>Camera permission is required</Text>
+          <Text style={styles.permissionText}>
+            {typeof strings.errors.cameraPermissionDenied === 'string' 
+              ? strings.errors.cameraPermissionDenied 
+              : strings.errors.cameraPermissionDenied?.message || 'Camera permission is required'}
+          </Text>
           <TouchableOpacity
             style={[styles.cancelButton, { borderColor: theme?.errorColor || '#EF4444' }]}
             onPress={onCancel}
           >
             <Text style={[styles.cancelButtonText, { color: theme?.errorColor || '#EF4444' }]}>
-              Cancel
+              {strings.common.cancel || 'Cancel'}
             </Text>
           </TouchableOpacity>
         </View>
@@ -509,13 +628,15 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
     return (
       <View style={styles.container}>
         <View style={styles.permissionContainer}>
-          <Text style={styles.permissionText}>Camera not available</Text>
+          <Text style={styles.permissionText}>
+            {strings.errors.cameraNotAvailable || 'Camera not available'}
+          </Text>
           <TouchableOpacity
             style={[styles.cancelButton, { borderColor: theme?.errorColor || '#EF4444' }]}
             onPress={onCancel}
           >
             <Text style={[styles.cancelButtonText, { color: theme?.errorColor || '#EF4444' }]}>
-              Cancel
+              {strings.common.cancel || 'Cancel'}
             </Text>
           </TouchableOpacity>
         </View>
@@ -532,8 +653,8 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
           style={StyleSheet.absoluteFill}
           device={device}
           isActive={phase === 'recording' || phase === 'countdown'}
-          video={false}
-          photo={true}
+          video={true}
+          audio={false}
         />
 
         {/* Face Oval Overlay */}
@@ -555,14 +676,14 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
         {/* Loading Phase */}
         {phase === 'loading' && (
           <View style={styles.centeredOverlay}>
-            <Text style={styles.loadingText}>Preparing challenges...</Text>
+            <Text style={styles.loadingText}>{strings.liveness.preparing || 'Preparing challenges...'}</Text>
           </View>
         )}
 
         {/* Countdown */}
         {phase === 'countdown' && (
           <View style={styles.countdownContainer}>
-            <Text style={styles.getReadyText}>Get Ready!</Text>
+            <Text style={styles.getReadyText}>{strings.liveness.getReady || 'Get Ready!'}</Text>
             <Animated.Text 
               style={[
                 styles.countdownText,
@@ -583,7 +704,7 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
                 { transform: [{ scale: pulseAnim }] }
               ]}
             />
-            <Text style={styles.recordingText}>Recording</Text>
+            <Text style={styles.recordingText}>{strings.liveness.recording || 'Recording'}</Text>
           </View>
         )}
 
@@ -651,7 +772,7 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
         {/* Processing Overlay */}
         {phase === 'processing' && (
           <View style={styles.processingOverlay}>
-            <Text style={styles.processingText}>Processing video...</Text>
+            <Text style={styles.processingText}>{strings.liveness.processing || 'Processing video...'}</Text>
           </View>
         )}
       </View>
@@ -661,15 +782,14 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
         {phase === 'countdown' && (
           <>
             <Text style={styles.bottomText}>
-              You'll perform {challenges.length} action{challenges.length > 1 ? 's' : ''}.{'\n'}
-              Follow the on-screen instructions.
+              {strings.liveness.countdownMessage || `You'll perform ${challenges.length} action${challenges.length > 1 ? 's' : ''}.\nFollow the on-screen instructions.`}
             </Text>
             <TouchableOpacity
               style={[styles.cancelButton, { borderColor: theme?.errorColor || '#EF4444' }]}
               onPress={onCancel}
             >
               <Text style={[styles.cancelButtonText, { color: theme?.errorColor || '#EF4444' }]}>
-                Cancel
+                {strings.common.cancel || 'Cancel'}
               </Text>
             </TouchableOpacity>
           </>
@@ -677,13 +797,13 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
         
         {phase === 'recording' && (
           <Text style={styles.bottomText}>
-            Keep your face visible and follow the instructions
+            {strings.liveness.recordingInstructions || 'Keep your face visible and follow the instructions'}
           </Text>
         )}
         
         {phase === 'processing' && (
           <Text style={styles.bottomText}>
-            Almost done...
+            {strings.validation.almostDone || 'Almost done...'}
           </Text>
         )}
       </View>