@transfergratis/react-native-sdk 0.1.2

package/src/components/KYCElements/OrientationVideoCaptureEnhanced.tsx

@@ -0,0 +1,613 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Alert,
+  ActivityIndicator,
+  Animated,
+  Dimensions,
+} from 'react-native';
+import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
+import { EnhancedCameraView } from '../EnhancedCameraView';
+import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
+import KYCService from '../../modules/api/KYCService';
+import FrontSelfieIcon from '../Svgs/frontSelfieIcon';
+import ScanningLine from '../Svgs/scanningLine';
+
+interface OrientationVideoCaptureEnhancedProps {
+  config?: Partial<OrientationVideoConfig>;
+  onComplete: (result: any) => void;
+  onError: (error: string) => void;
+  kycService: KYCService;
+}
+
+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 OrientationVideoCaptureEnhanced: React.FC<OrientationVideoCaptureEnhancedProps> = ({
+  config = {},
+  onComplete,
+  onError,
+  kycService,
+}) => {
+  const finalConfig = { ...defaultConfig, ...config };
+  const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+  
+  const bbox = [20, 140, 370, 340]; // [xMin, yMin, xMax, yMax]
+  
+  const [state, setState] = useState<OrientationVideoState>({
+    isRecording: false,
+    currentOrientation: null,
+    recordedVideo: null,
+    processingResult: null,
+    isProcessing: false,
+    error: null,
+    retakeCount: 0,
+  });
+
+  const [showCamera, setShowCamera] = useState(true);
+  const instructionAnimation = useRef(new Animated.Value(0)).current;
+  const recordingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    startInstructionAnimation();
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (recordingTimeoutRef.current) {
+        clearTimeout(recordingTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  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 (state.isRecording) return;
+
+    try {
+      setState(prev => ({ ...prev, isRecording: true, error: null }));
+      
+      // Simulate video recording with photo capture
+      // In a real implementation, you would need to extend EnhancedCameraView for video
+      const mockVideoPath = `video_${Date.now()}.mp4`;
+      
+      // Set timeout to simulate recording duration
+      recordingTimeoutRef.current = setTimeout(() => {
+        setState(prev => ({ 
+          ...prev, 
+          isRecording: false, 
+          recordedVideo: mockVideoPath 
+        }));
+        // Process the video immediately
+        processVideo(mockVideoPath);
+      }, 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 (!state.isRecording) return;
+
+    try {
+      if (recordingTimeoutRef.current) {
+        clearTimeout(recordingTimeoutRef.current);
+        recordingTimeoutRef.current = null;
+      }
+      
+      const mockVideoPath = `video_${Date.now()}.mp4`;
+      setState(prev => ({ 
+        ...prev, 
+        isRecording: false, 
+        recordedVideo: mockVideoPath 
+      }));
+      
+      // Process the video immediately
+      processVideo(mockVideoPath);
+    } 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);
+      
+      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) {
+      Alert.alert('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 
+    }));
+    setShowCamera(true);
+  };
+
+  const reset = () => {
+    setState({
+      isRecording: false,
+      currentOrientation: null,
+      recordedVideo: null,
+      processingResult: null,
+      isProcessing: false,
+      error: null,
+      retakeCount: 0,
+    });
+    setShowCamera(true);
+  };
+
+  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {
+    if (result.success && result.path) {
+      // For demo purposes, we'll use the photo as a video placeholder
+            setState(prev => ({
+        ...prev,
+        recordedVideo: result.path || null
+      }));
+      setShowCamera(false);
+      // Process the video
+      processVideo(result.path);
+    } else {
+      setState(prev => ({ 
+        ...prev, 
+        error: result.error || 'Capture failed' 
+      }));
+      onError(result.error || 'Capture failed');
+    }
+  };
+
+  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 (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>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <EnhancedCameraView
+        showCamera={showCamera}
+        showSwitchCamera={false}
+        cameraType="front"
+        bbox={{
+          xMin: 150,
+          yMin: 210,
+          xMax: 350,
+          yMax: 410,
+          borderColor: "#2DBD60",
+          borderWidth: 3,
+          cornerRadius: 8
+        }}
+        onCapture={handleCapture}
+        onError={(error) => {
+          setState(prev => ({ ...prev, error: error.message }));
+          onError(error.message);
+        }}
+        overlayComponent={
+          <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(${bbox[0] + (bbox[2] - bbox[0]) / 2}, ${bbox[1] + (bbox[3] - bbox[1]) / 2}) scale(1) 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)"
+                />
+                <ScanningLine yMin={140} screenWidth={screenWidth} height={screenHeight} yMax={340}/>
+              </Svg>
+              
+              {/* SideSelfieIcon positioned in the bbox */}
+              <View style={[styles.iconContainer, {
+                left: 20,
+                top: 140,
+                width: 350,
+                height: 200,
+              }]}>
+                <FrontSelfieIcon/>
+                {/* <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>
+        }
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+    position: 'relative',
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  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',
+  },
+  iconOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default OrientationVideoCaptureEnhanced;