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

package/src/components/EnhancedCameraView.tsx

@@ -1,15 +1,18 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import {
-  View, StyleSheet, Text, AppState
-} from 'react-native';
-import { Camera, useCameraDevice } from 'react-native-vision-camera';
+import { View, StyleSheet, Text, Platform } from 'react-native';
+import { Camera, CodeType, useCameraDevice, useCodeScanner } from 'react-native-vision-camera';
 import VisionCameraModule from '../modules/camera/VisionCameraModule';
 import { useI18n } from '../hooks/useI18n';
 import { EnhancedCameraViewProps } from './OverLay/type';
-import { Button } from './ui/Button';
+import { WebBarcodeScanner } from './WebBarcodeScanner';
 
+export interface ExtendedCameraProps extends EnhancedCameraViewProps {
+  isScanningBarcode?: boolean;
+  onBarcodeScanned?: (data: string) => void;
+  barcodeTypes?: CodeType[];
+}
 
-export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
+export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
   showCamera,
   cameraType: initialCameraType = 'front',
   style,
@@ -18,21 +21,31 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
   silentCaptureResult,
   isProcessing = false,
   overlayComponent,
+  isScanningBarcode = false,
+  onBarcodeScanned,
+  barcodeTypes
 }) => {
   const { t } = useI18n();
   const camera = useRef<Camera>(null);
-
-  const isCapturingRef    = useRef(false);
-  const isProcessingRef   = useRef(isProcessing);
-
-  const [cameraType]      = useState<'front' | 'back'>(initialCameraType);
+  
+  const webVideoRef = useRef<HTMLVideoElement | null>(null);
+  const isCapturingRef = useRef(false);
+  const isProcessingRef = useRef(isProcessing);
+  const [cameraType] = useState<'front' | 'back'>(initialCameraType);
   const [hasPermission, setHasPermission] = useState<boolean | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
-  const [refreshCamera, setRefreshCamera] = useState(false);
+  const [refreshCamera] = useState(false);
+  
+  // 🚨 NEW STATE: Tells React when it is safe to mount the Web Scanner
+  const [isVideoFound, setIsVideoFound] = useState(false);
 
+  const scannedBarcodeRef = useRef<string | null>(null);
+  const containerRef = useRef<any>(null);
   const device = useCameraDevice(cameraType);
 
-  useEffect(() => { isProcessingRef.current = isProcessing; }, [isProcessing]);
+  useEffect(() => {
+    isProcessingRef.current = isProcessing;
+  }, [isProcessing]);
 
   const checkPermissions = async () => {
     try {
@@ -52,29 +65,40 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
     }
   };
 
-  useEffect(() => { if (showCamera) checkPermissions(); }, [showCamera, refreshCamera]);
-
   useEffect(() => {
-    const sub = AppState.addEventListener('change', next => {
-      if (next === 'active' && showCamera && hasPermission === false) checkPermissions();
-    });
-    return () => sub.remove();
-  }, [showCamera, hasPermission]);
-
-  const onInitialized  = useCallback(() => setIsInitialized(true), []);
-  const onCameraError  = useCallback((error: any) => {
+    if (showCamera) checkPermissions();
+  }, [showCamera, refreshCamera]);
+
+  const onInitialized = useCallback(() => setIsInitialized(true), []);
+  const onCameraError = useCallback((error: any) => {
     onError?.({ message: error.message || t('camera.errorOccurred') });
   }, [onError, t]);
 
+  const codeScanner = useCodeScanner({
+    codeTypes: barcodeTypes || ['pdf-417', 'qr', 'code-128', 'code-39'],
+    onCodeScanned: (codes) => {
+      if (!isProcessingRef.current && isScanningBarcode) {
+        for (const code of codes) {
+          if (code.value && scannedBarcodeRef.current !== code.value) {
+            scannedBarcodeRef.current = code.value;
+            onBarcodeScanned?.(code.value);
+            break;
+          }
+        }
+      }
+    }
+  });
+
   const captureSilentPhoto = useCallback(async () => {
     if (!camera.current || !isInitialized || isProcessingRef.current || isCapturingRef.current) return;
     if (silentCaptureResult?.isAnalyzing) return;
     try {
       isCapturingRef.current = true;
-      const photo  = await camera.current.takePhoto({ enableShutterSound: false, flash: 'off' });
+      const photo = await camera.current.takePhoto({ enableShutterSound: false, flash: 'off' });
       const result = await VisionCameraModule.processPhotoResult(photo);
-      onSilentCapture?.({ ...result, path: result.path || photo.path });
-    } catch { /* silent */ } finally {
+      onSilentCapture?.({ ...result, path: result.path || photo.path, barcode: scannedBarcodeRef.current });
+    } catch {
+    } finally {
       isCapturingRef.current = false;
     }
   }, [isInitialized, onSilentCapture, silentCaptureResult]);
@@ -85,26 +109,67 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
     let id: ReturnType<typeof setInterval>;
     const timer = setTimeout(() => {
       if (!active) return;
-      id = setInterval(captureSilentPhoto, 1500);
-    }, 1000);
-    return () => { active = false; clearTimeout(timer); if (id) clearInterval(id); };
-  }, [showCamera, isInitialized, isProcessing, captureSilentPhoto]);
-
-  if (hasPermission === null) return <View style={[styles.container, style]} />;
+      const intervalDelay = isScanningBarcode ? 3000 : 1500;
+      id = setInterval(captureSilentPhoto, intervalDelay);
+    }, 1500);
+    return () => {
+      active = false;
+      clearTimeout(timer);
+      if (id) clearInterval(id);
+    };
+  }, [showCamera, isInitialized, isProcessing, captureSilentPhoto, isScanningBarcode]);
+
+  // Web: Aggressive Video Element Hunter
+  useEffect(() => {
+    // 🚨 Kick off the search immediately if we are on the web and the camera should be showing
+    if (Platform.OS !== 'web' || !showCamera) return;
+    
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    const findVideo = () => {
+      console.log('🔍 [WEB ENGINE] Searching for <video> element in DOM...');
+      
+      let video: HTMLVideoElement | null = null;
+      if (containerRef.current?.querySelector) {
+        video = containerRef.current.querySelector('video');
+      }
+      if (!video) {
+        video = document.querySelector('video');
+      }
 
-  if (hasPermission === false) {
-    return (
-      <View style={[styles.container, style, { justifyContent: 'center', alignItems: 'center' }]}>
-        <Text style={styles.permissionMessage}>{t('camera.permissionRequired')}</Text>
-        <Button title="Refresh Camera" onPress={() => setRefreshCamera(p => !p)} variant="primary" />
-      </View>
-    );
-  }
+      if (video) {
+        console.log('✅ [WEB ENGINE] <video> element locked! Booting ZXing Scanner.');
+        webVideoRef.current = video;
+        setIsVideoFound(true); // This tells React to mount the scanner!
+      } else {
+        console.log('⏳ [WEB ENGINE] <video> not found yet, retrying in 500ms...');
+        timeoutId = setTimeout(findVideo, 500);
+      }
+    };
+    
+    // Start hunting immediately, do NOT wait for isInitialized
+    findVideo();
+
+    return () => clearTimeout(timeoutId);
+  }, [showCamera]);
+
+  // 🚨 FIX: Memoized Web Callback to prevent infinite re-rendering loop
+  const handleWebBarcodeScanned = useCallback((value: string) => {
+    console.log(`🎉 [WEB SCANNER] SUCCESS! Decoded value:`, value);
+    alert(`Decoded: ${value.substring(0, 50)}...`);
+    
+    if (!isProcessingRef.current && value !== scannedBarcodeRef.current) {
+      scannedBarcodeRef.current = value;
+      onBarcodeScanned?.(value);
+    }
+  }, [onBarcodeScanned]);
 
+  if (hasPermission === null) return <View style={[styles.container, style]} />;
+  if (hasPermission === false) return <View style={[styles.container, style]}><Text style={styles.permissionMessage}>{t('camera.permissionRequired')}</Text></View>;
   if (!device || !showCamera) return <View style={[styles.container, style]} />;
 
   return (
-    <View style={[styles.container, style]}>
+    <View ref={containerRef} style={[styles.container, style]}>
       <Camera
         ref={camera}
         style={StyleSheet.absoluteFill}
@@ -116,8 +181,17 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
         audio={false}
         onInitialized={onInitialized}
         onError={onCameraError}
+        codeScanner={Platform.OS !== 'web' && isScanningBarcode ? codeScanner : undefined}
       />
-
+      
+      {Platform.OS === 'web' && isScanningBarcode && isVideoFound && (
+        <WebBarcodeScanner
+          videoRef={webVideoRef as React.RefObject<HTMLVideoElement>}
+          onBarcodeScanned={handleWebBarcodeScanned}
+          active={!isProcessingRef.current}
+        />
+      )}
+      
       {overlayComponent}
     </View>
   );