@transfergratis/react-native-sdk 0.1.2

package/build/components/KYCElements/OrientationVideoCaptureFinal.js

@@ -0,0 +1,429 @@
+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 SideSelfieIcon from '../Svgs/sideSelfieIcon';
+const defaultConfig = {
+    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 = ({ config = {}, onComplete, onError, kycService, }) => {
+    const finalConfig = { ...defaultConfig, ...config };
+    const [state, setState] = useState({
+        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(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) => {
+        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) => {
+        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;
+//# sourceMappingURL=OrientationVideoCaptureFinal.js.map

package/build/components/KYCElements/OrientationVideoCaptureFinal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrientationVideoCaptureFinal.js","sourceRoot":"","sources":["../../../src/components/KYCElements/OrientationVideoCaptureFinal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  TouchableOpacity,\n  Alert,\n  ActivityIndicator,\n  Animated,\n} from 'react-native';\nimport Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';\nimport { EnhancedCameraView } from '../EnhancedCameraView';\nimport { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';\nimport KYCService from '../../modules/api/KYCService';\nimport SideSelfieIcon from '../Svgs/sideSelfieIcon';\n\ninterface OrientationVideoCaptureFinalProps {\n  config?: Partial<OrientationVideoConfig>;\n  onComplete: (result: any) => void;\n  onError: (error: string) => void;\n  kycService: KYCService;\n}\n\nconst defaultConfig: OrientationVideoConfig = {\n  duration: 10, // 10 seconds\n  orientations: ['center', 'left', 'right'],\n  instructions: {\n    center: 'Look straight ahead at the camera',\n    left: 'Turn your head to the left',\n    right: 'Turn your head to the right',\n  },\n  showPreview: true,\n  allowRetake: true,\n  maxRetakes: 3,\n  quality: 0.8,\n  aspectRatio: 16 / 9,\n};\n\nexport const OrientationVideoCaptureFinal: React.FC<OrientationVideoCaptureFinalProps> = ({\n  config = {},\n  onComplete,\n  onError,\n  kycService,\n}) => {\n  const finalConfig = { ...defaultConfig, ...config };\n  \n  const [state, setState] = useState<OrientationVideoState>({\n    isRecording: false,\n    currentOrientation: null,\n    recordedVideo: null,\n    processingResult: null,\n    isProcessing: false,\n    error: null,\n    retakeCount: 0,\n  });\n\n  const [showCamera, setShowCamera] = useState(true);\n  const instructionAnimation = useRef(new Animated.Value(0)).current;\n  const recordingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    startInstructionAnimation();\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (recordingTimeoutRef.current) {\n        clearTimeout(recordingTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  const startInstructionAnimation = () => {\n    Animated.loop(\n      Animated.sequence([\n        Animated.timing(instructionAnimation, {\n          toValue: 1,\n          duration: 1000,\n          useNativeDriver: false,\n        }),\n        Animated.timing(instructionAnimation, {\n          toValue: 0.8,\n          duration: 1000,\n          useNativeDriver: false,\n        }),\n      ])\n    ).start();\n  };\n\n  const handleVideoRecordingStart = () => {\n    setState(prev => ({ ...prev, isRecording: true, error: null }));\n    \n    // Set timeout to automatically stop recording after duration\n    recordingTimeoutRef.current = setTimeout(() => {\n      // The recording will be stopped automatically by the timeout\n    }, finalConfig.duration * 1000);\n  };\n\n  const handleVideoRecordingStop = (result: { success: boolean; path?: string; error?: string }) => {\n    if (recordingTimeoutRef.current) {\n      clearTimeout(recordingTimeoutRef.current);\n      recordingTimeoutRef.current = null;\n    }\n\n    if (result.success && result.path) {\n            setState(prev => ({\n        ...prev,\n        isRecording: false,\n        recordedVideo: result.path || null\n      }));\n      setShowCamera(false);\n      // Process the video immediately\n      processVideo(result.path);\n    } else {\n      setState(prev => ({ \n        ...prev, \n        isRecording: false,\n        error: result.error || 'Recording failed' \n      }));\n      onError(result.error || 'Recording failed');\n    }\n  };\n\n  const processVideo = async (videoUri: string) => {\n    if (state.isProcessing) return;\n\n    setState(prev => ({ ...prev, isProcessing: true, error: null }));\n\n    try {\n      const result = await kycService.processOrientationVideo(videoUri);\n      \n      if (result.success && result.data) {\n        setState(prev => ({ \n          ...prev, \n          processingResult: result.data || null,\n          isProcessing: false \n        }));\n        onComplete(result.data);\n      } else {\n        setState(prev => ({ \n          ...prev, \n          isProcessing: false,\n          error: result.message || 'Processing failed' \n        }));\n        onError(result.message || 'Processing failed');\n      }\n    } catch (error) {\n      console.error('Error processing video:', error);\n      setState(prev => ({ \n        ...prev, \n        isProcessing: false,\n        error: 'Failed to process video' \n      }));\n      onError('Failed to process video');\n    }\n  };\n\n  const retake = () => {\n    if (state.retakeCount >= finalConfig.maxRetakes) {\n      Alert.alert('Max Retakes Reached', 'You have reached the maximum number of retakes.');\n      return;\n    }\n\n    setState(prev => ({ \n      ...prev, \n      recordedVideo: null,\n      processingResult: null,\n      error: null,\n      retakeCount: prev.retakeCount + 1 \n    }));\n    setShowCamera(true);\n  };\n\n  const reset = () => {\n    setState({\n      isRecording: false,\n      currentOrientation: null,\n      recordedVideo: null,\n      processingResult: null,\n      isProcessing: false,\n      error: null,\n      retakeCount: 0,\n    });\n    setShowCamera(true);\n  };\n\n  const renderInstructions = () => {\n    if (!state.currentOrientation) return null;\n\n    const instruction = finalConfig.instructions[state.currentOrientation];\n    \n    return (\n      <Animated.View \n        style={[\n          styles.instructionContainer,\n          { opacity: instructionAnimation }\n        ]}\n      >\n        <Text style={styles.instructionText}>{instruction}</Text>\n      </Animated.View>\n    );\n  };\n\n  const renderProcessingResult = () => {\n    if (!state.processingResult) return null;\n\n    const { center, left, right } = state.processingResult;\n    const allCaptured = center.captured && left.captured && right.captured;\n\n    return (\n      <View style={styles.resultContainer}>\n        <Text style={styles.resultTitle}>\n          {allCaptured ? '✅ All orientations captured!' : '⚠️ Some orientations missing'}\n        </Text>\n        \n        <View style={styles.orientationResults}>\n          <View style={styles.orientationResult}>\n            <Text style={styles.orientationLabel}>Center</Text>\n            <Text style={[styles.orientationStatus, center.captured && styles.captured]}>\n              {center.captured ? '✅' : '❌'}\n            </Text>\n            {center.captured && (\n              <Text style={styles.frameInfo}>Frame: {center.frame}</Text>\n            )}\n          </View>\n          \n          <View style={styles.orientationResult}>\n            <Text style={styles.orientationLabel}>Left</Text>\n            <Text style={[styles.orientationStatus, left.captured && styles.captured]}>\n              {left.captured ? '✅' : '❌'}\n            </Text>\n            {left.captured && (\n              <Text style={styles.frameInfo}>Frame: {left.frame}</Text>\n            )}\n          </View>\n          \n          <View style={styles.orientationResult}>\n            <Text style={styles.orientationLabel}>Right</Text>\n            <Text style={[styles.orientationStatus, right.captured && styles.captured]}>\n              {right.captured ? '✅' : '❌'}\n            </Text>\n            {right.captured && (\n              <Text style={styles.frameInfo}>Frame: {right.frame}</Text>\n            )}\n          </View>\n        </View>\n      </View>\n    );\n  };\n\n  if (state.recordedVideo && finalConfig.showPreview) {\n    return (\n      <View style={styles.container}>\n        <View style={styles.videoPreview}>\n          <Text style={styles.previewText}>Video recorded successfully</Text>\n          <Text style={styles.previewSubtext}>Path: {state.recordedVideo}</Text>\n          <Text style={styles.previewSubtext}>Duration: {finalConfig.duration} seconds</Text>\n        </View>\n        \n        {state.isProcessing && (\n          <View style={styles.processingOverlay}>\n            <ActivityIndicator size=\"large\" color=\"#007AFF\" />\n            <Text style={styles.processingText}>Processing video...</Text>\n          </View>\n        )}\n        \n        {renderProcessingResult()}\n        \n        <View style={styles.buttonContainer}>\n          {finalConfig.allowRetake && state.retakeCount < finalConfig.maxRetakes && (\n            <TouchableOpacity style={styles.retakeButton} onPress={retake}>\n              <Text style={styles.retakeButtonText}>\n                Retake ({finalConfig.maxRetakes - state.retakeCount} left)\n              </Text>\n            </TouchableOpacity>\n          )}\n          \n          <TouchableOpacity style={styles.resetButton} onPress={reset}>\n            <Text style={styles.resetButtonText}>Start Over</Text>\n          </TouchableOpacity>\n        </View>\n      </View>\n    );\n  }\n\n  return (\n    <View style={styles.container}>\n      <EnhancedCameraView\n        showCamera={showCamera}\n        showSwitchCamera={false}\n        cameraType=\"front\"\n        enableVideo={true}\n        isRecording={state.isRecording}\n        onVideoRecordingStart={handleVideoRecordingStart}\n        onVideoRecordingStop={handleVideoRecordingStop}\n        onError={(error) => {\n          setState(prev => ({ ...prev, error: error.message }));\n          onError(error.message);\n        }}\n        overlayComponent={\n          <View style={styles.overlay}>\n            {renderInstructions()}\n            \n            {/* SideSelfieIcon overlay with mask */}\n            <View style={styles.iconOverlay}>\n              <Svg\n                height=\"100%\"\n                width=\"100%\"\n                style={StyleSheet.absoluteFill}\n              >\n                <Defs>\n                  <Mask id=\"faceMask\">\n                    {/* Fond blanc - zone visible (extérieur) */}\n                    <Rect\n                      x=\"0\"\n                      y=\"0\"\n                      width=\"100%\"\n                      height=\"100%\"\n                      fill=\"white\"\n                    />\n                    {/* Zone noire - zone masquée (forme du visage dans le bbox) */}\n                    <Path\n                      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\"\n                      fill=\"black\"\n                      transform=\"translate(195, 240) scale(0.8) translate(-120, -142.5)\"\n                    />\n                  </Mask>\n                </Defs>\n\n                {/* Overlay semi-transparent avec masque */}\n                <Rect\n                  x=\"0\"\n                  y=\"0\"\n                  width=\"100%\"\n                  height=\"100%\"\n                  fill=\"rgba(0, 0, 0, 0.5)\"\n                  mask=\"url(#faceMask)\"\n                />\n              </Svg>\n              \n              {/* SideSelfieIcon positioned in the bbox */}\n              <View style={[styles.iconContainer, {\n                left: 20,\n                top: 140,\n                width: 350,\n                height: 200,\n              }]}>\n                <SideSelfieIcon />\n              </View>\n            </View>\n            \n            {state.error && (\n              <View style={styles.errorContainer}>\n                <Text style={styles.errorText}>{state.error}</Text>\n              </View>\n            )}\n            \n            {state.isRecording && (\n              <View style={styles.recordingIndicator}>\n                <Text style={styles.recordingText}>Recording... {finalConfig.duration}s</Text>\n              </View>\n            )}\n          </View>\n        }\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#000',\n  },\n  overlay: {\n    flex: 1,\n    backgroundColor: 'rgba(0, 0, 0, 0.2)',\n    justifyContent: 'space-between',\n    padding: 20,\n  },\n  instructionContainer: {\n    backgroundColor: 'rgba(0, 0, 0, 0.7)',\n    padding: 15,\n    borderRadius: 10,\n    marginTop: 50,\n    alignSelf: 'center',\n  },\n  instructionText: {\n    color: '#fff',\n    fontSize: 18,\n    fontWeight: 'bold',\n    textAlign: 'center',\n  },\n  recordingIndicator: {\n    backgroundColor: 'rgba(255, 59, 48, 0.8)',\n    padding: 10,\n    borderRadius: 20,\n    alignSelf: 'center',\n    marginTop: 20,\n  },\n  recordingText: {\n    color: '#fff',\n    fontSize: 16,\n    fontWeight: 'bold',\n  },\n  videoPreview: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#f0f0f0',\n  },\n  previewText: {\n    fontSize: 18,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 10,\n  },\n  previewSubtext: {\n    fontSize: 14,\n    color: '#666',\n    textAlign: 'center',\n    paddingHorizontal: 20,\n    marginBottom: 5,\n  },\n  processingOverlay: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    backgroundColor: 'rgba(0, 0, 0, 0.7)',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  processingText: {\n    color: '#fff',\n    fontSize: 16,\n    marginTop: 10,\n  },\n  resultContainer: {\n    backgroundColor: 'rgba(255, 255, 255, 0.9)',\n    padding: 20,\n    borderRadius: 10,\n    margin: 20,\n  },\n  resultTitle: {\n    fontSize: 18,\n    fontWeight: 'bold',\n    textAlign: 'center',\n    marginBottom: 15,\n  },\n  orientationResults: {\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n  },\n  orientationResult: {\n    alignItems: 'center',\n  },\n  orientationLabel: {\n    fontSize: 14,\n    fontWeight: '600',\n    marginBottom: 5,\n  },\n  orientationStatus: {\n    fontSize: 20,\n    marginBottom: 5,\n  },\n  captured: {\n    color: '#34C759',\n  },\n  frameInfo: {\n    fontSize: 12,\n    color: '#666',\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n    padding: 20,\n  },\n  retakeButton: {\n    backgroundColor: '#FF9500',\n    paddingHorizontal: 20,\n    paddingVertical: 10,\n    borderRadius: 20,\n  },\n  retakeButtonText: {\n    color: '#fff',\n    fontSize: 16,\n    fontWeight: '600',\n  },\n  resetButton: {\n    backgroundColor: '#007AFF',\n    paddingHorizontal: 20,\n    paddingVertical: 10,\n    borderRadius: 20,\n  },\n  resetButtonText: {\n    color: '#fff',\n    fontSize: 16,\n    fontWeight: '600',\n  },\n  errorContainer: {\n    backgroundColor: 'rgba(255, 59, 48, 0.8)',\n    padding: 15,\n    borderRadius: 10,\n    margin: 20,\n  },\n  errorText: {\n    color: '#fff',\n    fontSize: 16,\n    textAlign: 'center',\n  },\n  iconOverlay: {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: [{ translateX: -120 }, { translateY: -142.5 }], // Half of width and height\n    opacity: 1,\n    zIndex: 10,\n    backgroundColor: 'rgba(0, 0, 0, 0.1)',\n    borderRadius: 10,\n    padding: 10,\n  },\n  iconContainer: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n});\n\nexport default OrientationVideoCaptureFinal; "]}

package/build/components/KYCElements/SelfieCapture.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { KYCElement } from '../../types/KYC.types';
+interface SelfieCaptureProps {
+    element: KYCElement;
+    value?: string;
+    onValueChange: (value: string) => void;
+    error?: string;
+}
+export declare const SelfieCapture: React.FC<SelfieCaptureProps>;
+export {};
+//# sourceMappingURL=SelfieCapture.d.ts.map

package/build/components/KYCElements/SelfieCapture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelfieCapture.d.ts","sourceRoot":"","sources":["../../../src/components/KYCElements/SelfieCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,kBAAkB;IAC1B,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiHtD,CAAC"}