@transfergratis/react-native-sdk 0.1.2

package/src/components/KYCElements/OrientationVideoCaptureFinal.tsx

@@ -0,0 +1,531 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Alert,
+  ActivityIndicator,
+  Animated,
+} 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 SideSelfieIcon from '../Svgs/sideSelfieIcon';
+
+interface OrientationVideoCaptureFinalProps {
+  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 OrientationVideoCaptureFinal: React.FC<OrientationVideoCaptureFinalProps> = ({
+  config = {},
+  onComplete,
+  onError,
+  kycService,
+}) => {
+  const finalConfig = { ...defaultConfig, ...config };
+  
+  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 handleVideoRecordingStart = () => {
+    setState(prev => ({ ...prev, isRecording: true, error: null }));
+    
+    // Set timeout to automatically stop recording after duration
+    recordingTimeoutRef.current = setTimeout(() => {
+      // The recording will be stopped automatically by the timeout
+    }, finalConfig.duration * 1000);
+  };
+
+  const handleVideoRecordingStop = (result: { success: boolean; path?: string; error?: string }) => {
+    if (recordingTimeoutRef.current) {
+      clearTimeout(recordingTimeoutRef.current);
+      recordingTimeoutRef.current = null;
+    }
+
+    if (result.success && result.path) {
+            setState(prev => ({
+        ...prev,
+        isRecording: false,
+        recordedVideo: result.path || null
+      }));
+      setShowCamera(false);
+      // Process the video immediately
+      processVideo(result.path);
+    } else {
+      setState(prev => ({ 
+        ...prev, 
+        isRecording: false,
+        error: result.error || 'Recording failed' 
+      }));
+      onError(result.error || 'Recording failed');
+    }
+  };
+
+  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 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>
+          <Text style={styles.previewSubtext}>Duration: {finalConfig.duration} seconds</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"
+        enableVideo={true}
+        isRecording={state.isRecording}
+        onVideoRecordingStart={handleVideoRecordingStart}
+        onVideoRecordingStop={handleVideoRecordingStop}
+        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(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>
+            )}
+            
+            {state.isRecording && (
+              <View style={styles.recordingIndicator}>
+                <Text style={styles.recordingText}>Recording... {finalConfig.duration}s</Text>
+              </View>
+            )}
+          </View>
+        }
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  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',
+  },
+  recordingIndicator: {
+    backgroundColor: 'rgba(255, 59, 48, 0.8)',
+    padding: 10,
+    borderRadius: 20,
+    alignSelf: 'center',
+    marginTop: 20,
+  },
+  recordingText: {
+    color: '#fff',
+    fontSize: 16,
+    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,
+    marginBottom: 5,
+  },
+  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: '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 OrientationVideoCaptureFinal;