@sanctum-key/react-native-sdk 1.0.0

package/src/components/KYCElements/OrientationVideoCapture.tsx

@@ -0,0 +1,649 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+  Animated,
+} from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
+import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
+import { Camera, useCameraDevice } from 'react-native-vision-camera';
+import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
+import { KycEnvironment } from '../../types/env.types';
+import kycService from '../../modules/api/KYCService';
+import VisionCameraModule from '../../modules/camera/VisionCameraModule';
+import SideSelfieIcon from '../Svgs/sideSelfieIcon';
+
+interface OrientationVideoCaptureProps {
+  config?: Partial<OrientationVideoConfig>;
+  onComplete: (result: any) => void;
+  onError: (error: string) => void;
+  kycService: typeof kycService;
+  env?: KycEnvironment;
+}
+
+const defaultConfig: OrientationVideoConfig = {
+  duration: 10, // 10 seconds
+  orientations: ['center', 'left', 'right'],
+  instructions: {
+    center: 'Look straight ahead at the camera',
+    left: 'Turn your head to the left',
+    right: 'Turn your head to the right',
+  },
+  showPreview: true,
+  allowRetake: true,
+  maxRetakes: 3,
+  quality: 0.8,
+  aspectRatio: 16 / 9,
+};
+
+export const OrientationVideoCapture: React.FC<OrientationVideoCaptureProps> = ({
+  config = {},
+  onComplete,
+  onError,
+  kycService,
+  env = 'PRODUCTION',
+}) => {
+  const finalConfig = { ...defaultConfig, ...config };
+  
+  const [state, setState] = useState<OrientationVideoState>({
+    isRecording: false,
+    currentOrientation: null,
+    recordedVideo: null,
+    processingResult: null,
+    isProcessing: false,
+    error: null,
+    retakeCount: 0,
+  });
+
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const cameraRef = useRef<Camera>(null);
+  const recordingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const instructionAnimation = useRef(new Animated.Value(0)).current;
+
+  const device = useCameraDevice('front');
+
+  useEffect(() => {
+    requestCameraPermission();
+    startInstructionAnimation();
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (recordingTimeoutRef.current) {
+        clearTimeout(recordingTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const requestCameraPermission = async () => {
+    try {
+      const hasAllPermissions = await VisionCameraModule.hasAllPermissions();
+      if (!hasAllPermissions) {
+        const granted = await VisionCameraModule.requestAllPermissions();
+        if (!granted) {
+          onError('Camera permissions not granted');
+          return;
+        }
+      }
+      setHasPermission(true);
+    } catch (error) {
+      console.error('Error requesting permissions:', error);
+      onError('Failed to request camera permissions');
+    }
+  };
+
+  const startInstructionAnimation = () => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(instructionAnimation, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: false,
+        }),
+        Animated.timing(instructionAnimation, {
+          toValue: 0.8,
+          duration: 1000,
+          useNativeDriver: false,
+        }),
+      ])
+    ).start();
+  };
+
+  const startRecording = async () => {
+    if (!cameraRef.current || state.isRecording) return;
+
+    try {
+      setState(prev => ({ ...prev, isRecording: true, error: null }));
+      
+      await cameraRef.current.startRecording({
+        onRecordingFinished: (video) => {
+          setState(prev => ({ 
+            ...prev, 
+            isRecording: false, 
+            recordedVideo: video.path 
+          }));
+          // Process the video immediately
+          processVideo(video.path);
+        },
+        onRecordingError: (error) => {
+          console.error('Recording error:', error);
+          setState(prev => ({ 
+            ...prev, 
+            isRecording: false, 
+            error: 'Failed to record video' 
+          }));
+          onError('Failed to record video');
+        },
+      });
+
+      // Set timeout to stop recording after duration
+      recordingTimeoutRef.current = setTimeout(() => {
+        if (cameraRef.current && state.isRecording) {
+          cameraRef.current.stopRecording();
+        }
+      }, finalConfig.duration * 1000);
+
+    } catch (error) {
+      console.error('Error starting recording:', error);
+      setState(prev => ({ 
+        ...prev, 
+        isRecording: false, 
+        error: 'Failed to start recording' 
+      }));
+      onError('Failed to start recording');
+    }
+  };
+
+  const stopRecording = async () => {
+    if (!cameraRef.current || !state.isRecording) return;
+
+    try {
+      if (recordingTimeoutRef.current) {
+        clearTimeout(recordingTimeoutRef.current);
+        recordingTimeoutRef.current = null;
+      }
+      await cameraRef.current.stopRecording();
+    } catch (error) {
+      console.error('Error stopping recording:', error);
+    }
+  };
+
+  const processVideo = async (videoUri: string) => {
+    if (state.isProcessing) return;
+
+    setState(prev => ({ ...prev, isProcessing: true, error: null }));
+
+    try {
+      const result = await kycService.processOrientationVideo(videoUri, env);
+      
+      if (result.success && result.data) {
+        setState(prev => ({ 
+          ...prev, 
+          processingResult: result.data || null,
+          isProcessing: false 
+        }));
+        onComplete(result.data);
+      } else {
+        setState(prev => ({ 
+          ...prev, 
+          isProcessing: false,
+          error: result.message || 'Processing failed' 
+        }));
+        onError(result.message || 'Processing failed');
+      }
+    } catch (error) {
+      console.error('Error processing video:', error);
+      setState(prev => ({ 
+        ...prev, 
+        isProcessing: false,
+        error: 'Failed to process video' 
+      }));
+      onError('Failed to process video');
+    }
+  };
+
+  const retake = () => {
+    if (state.retakeCount >= finalConfig.maxRetakes) {
+      showAlert('Max Retakes Reached', 'You have reached the maximum number of retakes.');
+      return;
+    }
+
+    setState(prev => ({ 
+      ...prev, 
+      recordedVideo: null,
+      processingResult: null,
+      error: null,
+      retakeCount: prev.retakeCount + 1 
+    }));
+  };
+
+  const reset = () => {
+    setState({
+      isRecording: false,
+      currentOrientation: null,
+      recordedVideo: null,
+      processingResult: null,
+      isProcessing: false,
+      error: null,
+      retakeCount: 0,
+    });
+  };
+
+  const renderInstructions = () => {
+    if (!state.currentOrientation) return null;
+
+    const instruction = finalConfig.instructions[state.currentOrientation];
+    
+    return (
+      <Animated.View 
+        style={[
+          styles.instructionContainer,
+          { opacity: instructionAnimation }
+        ]}
+      >
+        <Text style={styles.instructionText}>{instruction}</Text>
+      </Animated.View>
+    );
+  };
+
+  const renderProcessingResult = () => {
+    if (!state.processingResult) return null;
+
+    const { center, left, right } = state.processingResult;
+    const allCaptured = center.captured && left.captured && right.captured;
+
+    return (
+      <View style={styles.resultContainer}>
+        <Text style={styles.resultTitle}>
+          {allCaptured ? '✅ All orientations captured!' : '⚠️ Some orientations missing'}
+        </Text>
+        
+        <View style={styles.orientationResults}>
+          <View style={styles.orientationResult}>
+            <Text style={styles.orientationLabel}>Center</Text>
+            <Text style={[styles.orientationStatus, center.captured && styles.captured]}>
+              {center.captured ? '✅' : '❌'}
+            </Text>
+            {center.captured && (
+              <Text style={styles.frameInfo}>Frame: {center.frame}</Text>
+            )}
+          </View>
+          
+          <View style={styles.orientationResult}>
+            <Text style={styles.orientationLabel}>Left</Text>
+            <Text style={[styles.orientationStatus, left.captured && styles.captured]}>
+              {left.captured ? '✅' : '❌'}
+            </Text>
+            {left.captured && (
+              <Text style={styles.frameInfo}>Frame: {left.frame}</Text>
+            )}
+          </View>
+          
+          <View style={styles.orientationResult}>
+            <Text style={styles.orientationLabel}>Right</Text>
+            <Text style={[styles.orientationStatus, right.captured && styles.captured]}>
+              {right.captured ? '✅' : '❌'}
+            </Text>
+            {right.captured && (
+              <Text style={styles.frameInfo}>Frame: {right.frame}</Text>
+            )}
+          </View>
+        </View>
+      </View>
+    );
+  };
+
+  if (hasPermission === null) {
+    return (
+      <View style={styles.container}>
+        <ActivityIndicator size="large" color="#007AFF" />
+        <Text style={styles.loadingText}>Requesting camera permission...</Text>
+      </View>
+    );
+  }
+
+  if (hasPermission === false) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.errorText}>No access to camera</Text>
+        <TouchableOpacity style={styles.button} onPress={requestCameraPermission}>
+          <Text style={styles.buttonText}>Grant Permission</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  if (state.recordedVideo && finalConfig.showPreview) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.videoPreview}>
+          <Text style={styles.previewText}>Video recorded successfully</Text>
+          <Text style={styles.previewSubtext}>Path: {state.recordedVideo}</Text>
+        </View>
+        
+        {state.isProcessing && (
+          <View style={styles.processingOverlay}>
+            <ActivityIndicator size="large" color="#007AFF" />
+            <Text style={styles.processingText}>Processing video...</Text>
+          </View>
+        )}
+        
+        {renderProcessingResult()}
+        
+        <View style={styles.buttonContainer}>
+          {finalConfig.allowRetake && state.retakeCount < finalConfig.maxRetakes && (
+            <TouchableOpacity style={styles.retakeButton} onPress={retake}>
+              <Text style={styles.retakeButtonText}>
+                Retake ({finalConfig.maxRetakes - state.retakeCount} left)
+              </Text>
+            </TouchableOpacity>
+          )}
+          
+          <TouchableOpacity style={styles.resetButton} onPress={reset}>
+            <Text style={styles.resetButtonText}>Start Over</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+
+  if (!device) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.errorText}>Camera device not available</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Camera
+        ref={cameraRef}
+        style={styles.camera}
+        device={device}
+        isActive={true}
+        video={true}
+        audio={true}
+      >
+        <View style={styles.overlay}>
+          {renderInstructions()}
+          
+                    {/* SideSelfieIcon overlay with mask */}
+          <View style={styles.iconOverlay}>
+            <Svg
+              height="100%"
+              width="100%"
+              style={StyleSheet.absoluteFill}
+            >
+                              <Defs>
+                  <Mask id="faceMask">
+                    {/* Fond blanc - zone visible (extérieur) */}
+                    <Rect
+                      x="0"
+                      y="0"
+                      width="100%"
+                      height="100%"
+                      fill="white"
+                    />
+                    {/* Zone noire - zone masquée (forme du visage dans le bbox) */}
+                    <Path
+                      d="M35.4198 48.9242C38.2153 41.9014 42.5851 35.6693 48.3859 30.8232C61.3601 19.9842 88.1543 1.5 120 1.5C151.846 1.5 178.64 19.9842 191.614 30.8232C197.415 35.6693 201.785 41.9014 204.58 48.9242C210.484 63.7564 220 93.0114 220 127.5C220 168.082 204.19 212.617 198.234 227.954C196.792 231.667 194.971 235.196 192.628 238.417C183.46 251.021 156.313 283.5 120 283.5C83.6867 283.5 56.5401 251.021 47.3723 238.417C45.0294 235.196 43.2081 231.667 41.7663 227.954C35.8102 212.617 20 168.082 20 127.5C20 93.0114 29.5157 63.7564 35.4198 48.9242Z"
+                      fill="black"
+                      transform="translate(195, 240) scale(0.8) translate(-120, -142.5)"
+                    />
+                  </Mask>
+                </Defs>
+
+              {/* Overlay semi-transparent avec masque */}
+              <Rect
+                x="0"
+                y="0"
+                width="100%"
+                height="100%"
+                fill="rgba(0, 0, 0, 0.5)"
+                mask="url(#faceMask)"
+              />
+            </Svg>
+            
+            {/* SideSelfieIcon positioned in the bbox */}
+            <View style={[styles.iconContainer, {
+              left: 20,
+              top: 140,
+              width: 350,
+              height: 200,
+            }]}>
+              <SideSelfieIcon />
+            </View>
+          </View>
+          
+          {state.error && (
+            <View style={styles.errorContainer}>
+              <Text style={styles.errorText}>{state.error}</Text>
+            </View>
+          )}
+          
+          <View style={styles.controlsContainer}>
+            {state.isRecording ? (
+              <TouchableOpacity style={styles.stopButton} onPress={stopRecording}>
+                <Text style={styles.stopButtonText}>Stop Recording</Text>
+              </TouchableOpacity>
+            ) : (
+              <TouchableOpacity 
+                style={styles.recordButton} 
+                onPress={startRecording}
+                disabled={state.isProcessing}
+              >
+                <Text style={styles.recordButtonText}>Start Recording</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        </View>
+      </Camera>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  camera: {
+    flex: 1,
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    justifyContent: 'space-between',
+    padding: 20,
+  },
+  instructionContainer: {
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    padding: 15,
+    borderRadius: 10,
+    marginTop: 50,
+    alignSelf: 'center',
+  },
+  instructionText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  controlsContainer: {
+    alignItems: 'center',
+    marginBottom: 50,
+  },
+  recordButton: {
+    backgroundColor: '#FF3B30',
+    paddingHorizontal: 30,
+    paddingVertical: 15,
+    borderRadius: 25,
+    minWidth: 150,
+    alignItems: 'center',
+  },
+  recordButtonText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  stopButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 30,
+    paddingVertical: 15,
+    borderRadius: 25,
+    minWidth: 150,
+    alignItems: 'center',
+  },
+  stopButtonText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  videoPreview: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f0f0f0',
+  },
+  previewText: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 10,
+  },
+  previewSubtext: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    paddingHorizontal: 20,
+  },
+  processingOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  processingText: {
+    color: '#fff',
+    fontSize: 16,
+    marginTop: 10,
+  },
+  resultContainer: {
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    padding: 20,
+    borderRadius: 10,
+    margin: 20,
+  },
+  resultTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginBottom: 15,
+  },
+  orientationResults: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  orientationResult: {
+    alignItems: 'center',
+  },
+  orientationLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 5,
+  },
+  orientationStatus: {
+    fontSize: 20,
+    marginBottom: 5,
+  },
+  captured: {
+    color: '#34C759',
+  },
+  frameInfo: {
+    fontSize: 12,
+    color: '#666',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 20,
+  },
+  retakeButton: {
+    backgroundColor: '#FF9500',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 20,
+  },
+  retakeButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  resetButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 20,
+  },
+  resetButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  errorContainer: {
+    backgroundColor: 'rgba(255, 59, 48, 0.8)',
+    padding: 15,
+    borderRadius: 10,
+    margin: 20,
+  },
+  errorText: {
+    color: '#fff',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  loadingText: {
+    color: '#fff',
+    fontSize: 16,
+    textAlign: 'center',
+    marginTop: 10,
+  },
+  button: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 30,
+    paddingVertical: 15,
+    borderRadius: 25,
+    marginTop: 20,
+    alignSelf: 'center',
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  iconOverlay: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: [{ translateX: -120 }, { translateY: -142.5 }], // Half of width and height
+    opacity: 1,
+    zIndex: 10,
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+    borderRadius: 10,
+    padding: 10,
+  },
+  iconContainer: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default OrientationVideoCapture;