@sanctum-key/react-native-sdk 1.0.24 → 1.0.26

package/build/src/components/EnhancedCameraView.web.js

@@ -1,9 +1,13 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { View, StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
 import { useI18n } from '../hooks/useI18n';
-export const EnhancedCameraView = ({ instructions = 'Position yourself in the frame and tap the capture button', showCamera, cameraType: initialCameraType = 'front', style, onCapture, onError, onClose, enableFlash = false, enableHdr = false, quality = 'high', showCaptureButton = true, showSwitchCamera = true, overlayComponent, bbox, canFlip = true, enableVideo = false, isRecording = false, onVideoRecordingStart, onVideoRecordingStop, videoDuration = 10, onSilentCapture, silentCaptureResult, captureStabilizationDelayMs = 2500, }) => {
+// 🚨 Import the WebBarcodeScanner we built earlier
+import { WebBarcodeScanner } from './WebBarcodeScanner';
+export const EnhancedCameraView = ({ instructions = 'Position yourself in the frame and tap the capture button', showCamera, cameraType: initialCameraType = 'front', style, onCapture, onError, onClose, enableFlash = false, enableHdr = false, quality = 'high', showCaptureButton = true, showSwitchCamera = true, overlayComponent, bbox, canFlip = true, enableVideo = false, isRecording = false, onVideoRecordingStart, onVideoRecordingStop, videoDuration = 10, onSilentCapture, silentCaptureResult, captureStabilizationDelayMs = 2500, 
+// 🚨 New props for barcode support
+isScanningBarcode = false, onBarcodeScanned, }) => {
     const { t } = useI18n();
-    // Vérification de plateforme - ce composant est uniquement pour le web
+    // Platform check
     if (Platform.OS !== 'web') {
         console.warn('EnhancedCameraView.web.tsx should only be used on web platform');
         return null;
@@ -13,19 +17,22 @@ export const EnhancedCameraView = ({ instructions = 'Position yourself in the fr
     const [cameraType, setCameraType] = useState(initialCameraType);
     const [hasPermission, setHasPermission] = useState(false);
     const [isInitialized, setIsInitialized] = useState(false);
-    const [flash, setFlash] = useState('off');
+    // const [flash, setFlash] = useState<'off' | 'on' | 'auto'>('off');
     const [stream, setStream] = useState(null);
-    const [isRecordingVideo, setIsRecordingVideo] = useState(false);
-    const [mediaRecorder, setMediaRecorder] = useState(null);
-    const [recordedChunks, setRecordedChunks] = useState([]);
-    console.log('cameraType', cameraType, recordedChunks);
-    // Check permissions on component mount
+    // const [isRecordingVideo, setIsRecordingVideo] = useState(false);
+    // const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
+    // const [recordedChunks, setRecordedChunks] = useState<Blob[]>([]);
+    // 🚨 New Refs for Barcode Logic
+    const isProcessingRef = useRef(silentCaptureResult?.isAnalyzing || false);
+    const scannedBarcodeRef = useRef(null);
+    useEffect(() => {
+        isProcessingRef.current = silentCaptureResult?.isAnalyzing || false;
+    }, [silentCaptureResult?.isAnalyzing]);
     useEffect(() => {
         if (showCamera) {
             checkPermissions();
         }
     }, [showCamera]);
-    // Cleanup stream on unmount
     useEffect(() => {
         return () => {
             if (stream) {
@@ -33,13 +40,11 @@ export const EnhancedCameraView = ({ instructions = 'Position yourself in the fr
             }
         };
     }, [stream]);
-    // Build video constraints for quality (min + ideal improve Android/Samsung web quality; higher ideal for documents)
     const getVideoConstraints = useCallback(() => {
         const isHigh = quality === 'high';
         const isMedium = quality === 'medium';
         return {
             facingMode: cameraType === 'front' ? 'user' : 'environment',
-            // min forces Android Chrome to use at least this resolution (avoids 640x480 default)
             width: {
                 min: isHigh ? 1280 : isMedium ? 960 : 640,
                 ideal: isHigh ? 2560 : isMedium ? 1280 : 640,
@@ -56,12 +61,11 @@ export const EnhancedCameraView = ({ instructions = 'Position yourself in the fr
                 onError?.({ message: 'Camera not supported in this browser' });
                 return;
             }
-            // Use same constraints as startCamera so Android Chrome doesn't cache low resolution (e.g. 640x480)
-            const stream = await navigator.mediaDevices.getUserMedia({
+            const tempStream = await navigator.mediaDevices.getUserMedia({
                 video: getVideoConstraints(),
                 audio: enableVideo,
             });
-            stream.getTracks().forEach(track => track.stop());
+            tempStream.getTracks().forEach(track => track.stop());
             setHasPermission(true);
             await startCamera();
         }
@@ -85,7 +89,6 @@ export const EnhancedCameraView = ({ instructions = 'Position yourself in the fr
             }
             catch (err) {
                 const name = err instanceof Error ? err.name : '';
-                // On some Android devices, min constraints can fail; fallback to ideal only
                 if (name === 'OverconstrainedError') {
                     const fallbackConstraints = {
                         video: {
@@ -104,7 +107,9 @@ export const EnhancedCameraView = ({ instructions = 'Position yourself in the fr
             setStream(newStream);
             if (videoRef.current) {
                 videoRef.current.srcObject = newStream;
+                // 🚨 CRUCIAL FIX: Wait for the video to actually have metadata before saying it's initialized
                 videoRef.current.onloadedmetadata = () => {
+                    console.log('✅ [WEB ENGINE] Camera stream loaded metadata. Initializing.');
                     setIsInitialized(true);
                 };
             }
@@ -114,46 +119,33 @@ export const EnhancedCameraView = ({ instructions = 'Position yourself in the fr
             onError?.({ message: 'Failed to start camera' });
         }
     };
-    const onInitialized = useCallback(() => {
-        console.log('Camera initialized!');
-        setIsInitialized(true);
-    }, []);
-    const onCameraError = useCallback((error) => {
-        console.error('Camera error:', error);
-        onError?.({ message: error.message || 'Camera error occurred' });
-    }, [onError]);
-    console.log('isInitialized', onInitialized, onCameraError);
-    const capturePhoto = useCallback(async () => {
-        try {
-            onCapture && onCapture({
-                success: true
-            });
-        }
-        catch (error) {
-            console.error('Error taking photo:', error);
-            onCapture?.({
-                success: false,
-                error: error instanceof Error ? error.message : 'Failed to capture photo',
-            });
-        }
-    }, [isInitialized, onCapture, onError]);
+    // const capturePhoto = useCallback(async () => {
+    //   try {
+    //     onCapture && onCapture({ success: true });
+    //   } catch (error) {
+    //     console.error('Error taking photo:', error);
+    //     onCapture?.({
+    //       success: false,
+    //       error: error instanceof Error ? error.message : 'Failed to capture photo',
+    //     });
+    //   }
+    // }, [isInitialized, onCapture, onError]);
     const captureSilentPhoto = useCallback(async () => {
         try {
+            // During barcode phase, we still need to take a photo to give
+            // handleSilentCapture the image path for pendingCAImage.
+            // IDCardCapture gates further processing via scanPhase state.
             if (!videoRef.current || !canvasRef.current || !isInitialized) {
-                onError?.({ message: 'Camera not ready' });
-                return;
+                return; // Fail silently, no need to throw errors in a loop
             }
             const video = videoRef.current;
             const canvas = canvasRef.current;
             const context = canvas.getContext('2d');
             if (!context) {
-                onError?.({ message: 'Canvas context not available' });
                 return;
             }
-            // Set canvas dimensions to match video
             canvas.width = video.videoWidth;
             canvas.height = video.videoHeight;
-            // For front camera: draw flipped so captured image matches non-mirrored preview (no mirror confusion)
             if (cameraType === 'front') {
                 context.save();
                 context.translate(canvas.width, 0);
@@ -164,22 +156,13 @@ export const EnhancedCameraView = ({ instructions = 'Position yourself in the fr
             else {
                 context.drawImage(video, 0, 0);
             }
-            // Convert to base64 (0.95 for document/ID capture clarity; backend can exploit text better)
             const imageDataUrl = canvas.toDataURL('image/jpeg', 0.95);
-            onSilentCapture?.({
-                success: true,
-                path: imageDataUrl,
-            });
+            onSilentCapture?.({ success: true, path: imageDataUrl, barcode: null });
         }
         catch (error) {
-            console.error('Error taking photo:', error);
-            onCapture?.({
-                success: false,
-                error: error instanceof Error ? error.message : 'Failed to capture photo',
-            });
+            console.error('Error taking silent photo:', error);
         }
-    }, [isInitialized, cameraType, onError, onSilentCapture]);
-    // Stabilization delay then auto-capture every 5s; stop as soon as capture is validated (no more new captures)
+    }, [isInitialized, cameraType, onSilentCapture, isScanningBarcode]);
     useEffect(() => {
         if (!showCamera || !isInitialized || silentCaptureResult?.success) {
             return;
@@ -197,85 +180,28 @@ export const EnhancedCameraView = ({ instructions = 'Position yourself in the fr
                 clearInterval(intervalId);
         };
     }, [showCamera, isInitialized, captureStabilizationDelayMs, captureSilentPhoto, silentCaptureResult?.success]);
-    const startVideoRecording = useCallback(async () => {
-        try {
-            if (!stream || !isInitialized) {
-                onError?.({ message: 'Camera not ready' });
-                return;
-            }
-            const chunks = [];
-            setRecordedChunks(chunks);
-            const recorder = new MediaRecorder(stream, {
-                mimeType: 'video/webm;codecs=vp9',
-            });
-            recorder.ondataavailable = (event) => {
-                if (event.data.size > 0) {
-                    chunks.push(event.data);
-                }
-            };
-            recorder.onstop = () => {
-                const blob = new Blob(chunks, { type: 'video/webm' });
-                const url = URL.createObjectURL(blob);
-                onVideoRecordingStop?.({
-                    success: true,
-                    path: url,
-                });
-                setRecordedChunks([]);
-                setIsRecordingVideo(false);
-            };
-            recorder.onerror = (event) => {
-                console.error('Recording error:', event);
-                onVideoRecordingStop?.({
-                    success: false,
-                    error: 'Failed to record video',
-                });
-                setIsRecordingVideo(false);
-            };
-            setMediaRecorder(recorder);
-            recorder.start();
-            setIsRecordingVideo(true);
-            onVideoRecordingStart?.();
-            // Auto-stop after videoDuration seconds
-            setTimeout(() => {
-                if (recorder.state === 'recording') {
-                    recorder.stop();
-                }
-            }, videoDuration * 1000);
+    // 🚨 Memoized Callback for Barcode Decoding
+    const handleWebBarcodeScanned = useCallback((value) => {
+        console.log(`🎉 [WEB SCANNER] SUCCESS! Decoded value:`, value);
+        if (!isProcessingRef.current && value !== scannedBarcodeRef.current) {
+            scannedBarcodeRef.current = value;
+            onBarcodeScanned?.(value);
         }
-        catch (error) {
-            console.error('Error starting video recording:', error);
-            onVideoRecordingStop?.({
-                success: false,
-                error: error instanceof Error ? error.message : 'Failed to start video recording',
-            });
-        }
-    }, [isInitialized, stream, videoDuration, onVideoRecordingStart, onVideoRecordingStop, onError]);
-    const stopVideoRecording = useCallback(async () => {
-        try {
-            if (mediaRecorder && mediaRecorder.state === 'recording') {
-                mediaRecorder.stop();
-            }
-        }
-        catch (error) {
-            console.error('Error stopping video recording:', error);
-            onError?.({ message: 'Failed to stop video recording' });
-        }
-    }, [mediaRecorder, onError]);
+    }, [onBarcodeScanned]);
+    // Video recording logic...
+    // const startVideoRecording = useCallback(async () => {
+    //   /* ... Keep original logic ... */
+    // }, [isInitialized, stream, videoDuration, onVideoRecordingStart, onVideoRecordingStop, onError]);
+    // const stopVideoRecording = useCallback(async () => {
+    //   /* ... Keep original logic ... */
+    // }, [mediaRecorder, onError]);
     const switchCamera = useCallback(async () => {
         setCameraType(current => current === 'front' ? 'back' : 'front');
-        // Restart camera with new facing mode
         await startCamera();
     }, [cameraType]);
-    const toggleFlash = useCallback(() => {
-        setFlash(current => {
-            switch (current) {
-                case 'off': return 'on';
-                case 'on': return 'auto';
-                case 'auto': return 'off';
-                default: return 'off';
-            }
-        });
-    }, []);
+    // const toggleFlash = useCallback(() => {
+    //   /* ... Keep original logic ... */
+    // }, []);
     if (!hasPermission) {
         return (<View style={[styles.container, style]}>
         <Text style={styles.permissionMessage}>
@@ -287,7 +213,6 @@ export const EnhancedCameraView = ({ instructions = 'Position yourself in the fr
         return <View style={[styles.container, style]}/>;
     }
     return (<View style={[styles.container, style]}>
-      {/* Video element; no mirror for front camera so preview matches final photo and doesn't confuse users */}
       <video ref={videoRef} style={{
             position: 'absolute',
             width: '100%',
@@ -295,25 +220,19 @@ export const EnhancedCameraView = ({ instructions = 'Position yourself in the fr
             objectFit: 'cover',
             transform: cameraType === 'front' ? 'scaleX(-1)' : undefined,
         }} autoPlay playsInline muted/>
-
-      {/* Hidden canvas for photo capture */}
       <canvas ref={canvasRef} style={{
             position: 'absolute',
             left: '-9999px',
             top: '-9999px',
         }}/>
 
-      {/* Instructions */}
-      {/* {instructions && (
-          <View style={styles.instructionsOverlay}>
-            <Text style={styles.instructions}>{instructions}</Text>
-          </View>
-        )} */}
+      {isScanningBarcode && isInitialized && (<WebBarcodeScanner videoRef={videoRef} onBarcodeScanned={handleWebBarcodeScanned} 
+        // Use silentCaptureResult.isAnalyzing (state) not the ref so
+        // React re-renders with the correct active value
+        active={isScanningBarcode && isInitialized && !(silentCaptureResult?.isAnalyzing ?? false)}/>)}
 
-      {/* Custom overlay component */}
       {overlayComponent}
 
-      {/* Bounding box overlay */}
       {bbox && (<View style={styles.bboxOverlay}>
           <View style={[
                 styles.bbox,
@@ -325,45 +244,15 @@ export const EnhancedCameraView = ({ instructions = 'Position yourself in the fr
                     borderColor: bbox.borderColor || '#2DBD60',
                     borderWidth: bbox.borderWidth || 3,
                     borderRadius: bbox.cornerRadius || 8,
-                }
+                },
             ]}/>
         </View>)}
 
-      {/* Analyzing indicator - Same as mobile */}
       {silentCaptureResult?.isAnalyzing && (<View style={styles.analyzingContainer}>
           <Text style={styles.analyzingText}>{t('camera.analyzing')}</Text>
         </View>)}
 
-      {/* Camera controls */}
       <View style={styles.controlsContainer}>
-        {/* Flash button */}
-        {enableFlash && (<TouchableOpacity style={styles.controlButton} onPress={toggleFlash}>
-            <Text style={styles.controlButtonText}>
-              {flash === 'off' ? '⚡' : flash === 'on' ? '⚡️' : '✨'}
-            </Text>
-          </TouchableOpacity>)}
-
-        {/* Capture button */}
-        {showCaptureButton && !enableVideo && silentCaptureResult?.success && (<TouchableOpacity style={styles.captureButton} onPress={capturePhoto} disabled={!isInitialized}>
-            <View style={[
-                styles.captureButtonInner,
-                !isInitialized && styles.captureButtonDisabled
-            ]}/>
-          </TouchableOpacity>)}
-
-        {/* Video recording button */}
-        {showCaptureButton && enableVideo && (<TouchableOpacity style={[
-                styles.captureButton,
-                isRecordingVideo && styles.recordingButton
-            ]} onPress={isRecordingVideo ? stopVideoRecording : startVideoRecording} disabled={!isInitialized}>
-            <View style={[
-                styles.captureButtonInner,
-                !isInitialized && styles.captureButtonDisabled,
-                isRecordingVideo && styles.recordingButtonInner
-            ]}/>
-          </TouchableOpacity>)}
-
-        {/* Switch camera button */}
         {showSwitchCamera && canFlip && (<TouchableOpacity style={styles.controlButton} onPress={switchCamera}>
             <Text style={styles.controlButtonText}>🔄</Text>
           </TouchableOpacity>)}
@@ -371,129 +260,25 @@ export const EnhancedCameraView = ({ instructions = 'Position yourself in the fr
     </View>);
 };
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: 'black',
-    },
-    instructionsOverlay: {
-        position: 'absolute',
-        top: 60,
-        left: 20,
-        right: 20,
-        backgroundColor: 'rgba(0, 0, 0, 0.7)',
-        padding: 15,
-        borderRadius: 10,
-        zIndex: 1,
-    },
-    instructions: {
-        color: 'white',
-        fontSize: 16,
-        textAlign: 'center',
-        fontWeight: '500',
-    },
-    closeButton: {
-        position: 'absolute',
-        top: 50,
-        right: 20,
-        backgroundColor: 'rgba(0, 0, 0, 0.7)',
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        justifyContent: 'center',
-        alignItems: 'center',
-        zIndex: 2,
-    },
-    closeButtonText: {
-        color: 'white',
-        fontSize: 20,
-        fontWeight: 'bold',
-    },
-    controlsContainer: {
-        position: 'absolute',
-        bottom: 40,
-        left: 0,
-        right: 0,
-        flexDirection: 'row',
-        justifyContent: 'space-around',
-        alignItems: 'center',
-        paddingHorizontal: 40,
-        zIndex: 1,
-    },
-    controlButton: {
-        backgroundColor: 'rgba(0, 0, 0, 0.7)',
-        width: 50,
-        height: 50,
-        borderRadius: 25,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    controlButtonText: {
-        fontSize: 24,
-    },
-    captureButton: {
-        backgroundColor: 'rgba(255, 255, 255, 0.3)',
-        width: 80,
-        height: 80,
-        borderRadius: 40,
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderWidth: 3,
-        borderColor: 'white',
-    },
-    captureButtonInner: {
-        backgroundColor: 'white',
-        width: 60,
-        height: 60,
-        borderRadius: 30,
-    },
-    captureButtonDisabled: {
-        backgroundColor: 'rgba(255, 255, 255, 0.5)',
-    },
-    recordingButton: {
-        backgroundColor: 'rgba(255, 59, 48, 0.3)',
-        borderColor: '#FF3B30',
-    },
-    recordingButtonInner: {
-        backgroundColor: '#FF3B30',
-    },
-    permissionMessage: {
-        color: 'white',
-        fontSize: 16,
-        textAlign: 'center',
-        margin: 20,
-    },
-    errorMessage: {
-        color: 'red',
-        fontSize: 16,
-        textAlign: 'center',
-        margin: 20,
-    },
-    bboxOverlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: 'none',
-    },
-    bbox: {
-        position: 'absolute',
-        borderStyle: 'solid',
-        backgroundColor: 'transparent',
-    },
-    analyzingContainer: {
-        position: 'absolute',
-        bottom: 100,
-        alignSelf: 'center',
-        backgroundColor: 'rgba(0, 0, 0, 0.7)',
-        padding: 10,
-        borderRadius: 10,
-        zIndex: 1000,
-    },
-    analyzingText: {
-        color: 'white',
-        fontSize: 16,
-        fontWeight: 'bold',
-    },
+    // ... Keep all your original styles exactly as they are
+    container: { flex: 1, backgroundColor: 'black' },
+    instructionsOverlay: { position: 'absolute', top: 60, left: 20, right: 20, backgroundColor: 'rgba(0, 0, 0, 0.7)', padding: 15, borderRadius: 10, zIndex: 1 },
+    instructions: { color: 'white', fontSize: 16, textAlign: 'center', fontWeight: '500' },
+    closeButton: { position: 'absolute', top: 50, right: 20, backgroundColor: 'rgba(0, 0, 0, 0.7)', width: 40, height: 40, borderRadius: 20, justifyContent: 'center', alignItems: 'center', zIndex: 2 },
+    closeButtonText: { color: 'white', fontSize: 20, fontWeight: 'bold' },
+    controlsContainer: { position: 'absolute', bottom: 40, left: 0, right: 0, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', paddingHorizontal: 40, zIndex: 1 },
+    controlButton: { backgroundColor: 'rgba(0, 0, 0, 0.7)', width: 50, height: 50, borderRadius: 25, justifyContent: 'center', alignItems: 'center' },
+    controlButtonText: { fontSize: 24 },
+    captureButton: { backgroundColor: 'rgba(255, 255, 255, 0.3)', width: 80, height: 80, borderRadius: 40, justifyContent: 'center', alignItems: 'center', borderWidth: 3, borderColor: 'white' },
+    captureButtonInner: { backgroundColor: 'white', width: 60, height: 60, borderRadius: 30 },
+    captureButtonDisabled: { backgroundColor: 'rgba(255, 255, 255, 0.5)' },
+    recordingButton: { backgroundColor: 'rgba(255, 59, 48, 0.3)', borderColor: '#FF3B30' },
+    recordingButtonInner: { backgroundColor: '#FF3B30' },
+    permissionMessage: { color: 'white', fontSize: 16, textAlign: 'center', margin: 20 },
+    errorMessage: { color: 'red', fontSize: 16, textAlign: 'center', margin: 20 },
+    bboxOverlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'none' },
+    bbox: { position: 'absolute', borderStyle: 'solid', backgroundColor: 'transparent' },
+    analyzingContainer: { position: 'absolute', bottom: 100, alignSelf: 'center', backgroundColor: 'rgba(0, 0, 0, 0.7)', padding: 10, borderRadius: 10, zIndex: 1000 },
+    analyzingText: { color: 'white', fontSize: 16, fontWeight: 'bold' },
 });
 //# sourceMappingURL=EnhancedCameraView.web.js.map