@sanctum-key/react-native-sdk 1.0.0

package/src/components/EnhancedCameraView.tsx

@@ -0,0 +1,482 @@
+import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { Camera, useCameraDevice } 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';
+
+
+
+
+export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({ 
+  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,
+}) => {
+  const { t } = useI18n();
+  const camera = useRef<Camera>(null);
+  const [cameraType, setCameraType] = useState<'front' | 'back'>(initialCameraType);
+  const [hasPermission, setHasPermission] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [flash, setFlash] = useState<'off' | 'on' | 'auto'>('off');
+  const [refreshCamera, setRefreshCamera] = useState(false);
+
+  const device = useCameraDevice(cameraType);
+  console.log({ setCameraType, setFlash });
+
+  // Sélectionner le meilleur format disponible pour une qualité maximale
+  // Prioriser les formats avec une bonne résolution vidéo (pour la prévisualisation) ET photo (pour la capture)
+  const bestFormat = useMemo(() => {
+    if (!device || !device.formats || device.formats.length === 0) {
+      return undefined;
+    }
+    
+    // Trier les formats en combinant la résolution vidéo (pour la prévisualisation) et photo (pour la capture)
+    // On priorise les formats avec une bonne résolution vidéo car c'est ce qui est affiché en temps réel
+    const sortedFormats = [...device.formats].sort((a, b) => {
+      // Résolution vidéo (pour la prévisualisation live)
+      const videoResolutionA = (a.videoWidth || 0) * (a.videoHeight || 0);
+      const videoResolutionB = (b.videoWidth || 0) * (b.videoHeight || 0);
+      
+      // Résolution photo (pour la capture)
+      const photoResolutionA = (a.photoWidth || 0) * (a.photoHeight || 0);
+      const photoResolutionB = (b.photoWidth || 0) * (b.photoHeight || 0);
+      
+      // Prioriser d'abord la résolution vidéo (prévisualisation), puis la résolution photo
+      if (videoResolutionB !== videoResolutionA) {
+        return videoResolutionB - videoResolutionA;
+      }
+      return photoResolutionB - photoResolutionA;
+    });
+    
+    return sortedFormats[0];
+  }, [device]);
+
+  const checkPermissions = async () => {
+    try {
+      const hasAllPermissions = await VisionCameraModule.hasAllPermissions();
+      console.log('hasAllPermissions', hasAllPermissions);
+      if (!hasAllPermissions) {
+        const granted = await VisionCameraModule.requestAllPermissions();
+        console.log('granted', granted);
+        if (!granted) {
+          console.log('permissionRequired', t('camera.permissionRequired'));
+          onError?.({ message: t('camera.permissionRequired') });
+          return;
+        }
+      }
+      setHasPermission(true);
+    } catch (error) {
+      console.error('Error checking permissions:', error);
+      onError?.({ message: t('camera.errorOccurred') });
+    }
+  };
+
+  // Check permissions on component mount
+  useEffect(() => {
+    if (showCamera) {
+      checkPermissions();
+    }
+  }, [showCamera, refreshCamera]);
+
+
+
+  const onInitialized = useCallback(() => {
+    console.log('Camera initialized!');
+    setIsInitialized(true);
+  }, []);
+
+  const onCameraError = useCallback((error: any) => {
+    console.error('Camera error:', error);
+    onError?.({ message: error.message || t('camera.errorOccurred') });
+  }, [onError, t]);
+
+  const captureSilentPhoto = useCallback(async () => {
+    if (!camera.current || !isInitialized) {
+      onError?.({ message: t('camera.notReady') });
+      return;
+    }
+    console.log('silentCaptureResult', silentCaptureResult);
+    if (silentCaptureResult?.isAnalyzing || silentCaptureResult?.success) {
+      return;
+    }
+    try {
+      const photo = await camera.current.takePhoto({
+        enableShutterSound: true,
+        flash: enableFlash ? flash : 'off',
+      });
+
+      const result = await VisionCameraModule.processPhotoResult(photo);
+      onSilentCapture?.(result);
+    } catch (error) {
+
+    }
+  }, [isInitialized, onError, onSilentCapture, enableFlash, flash, silentCaptureResult]);
+
+  // Automatically take a silent photo every 5 seconds when ready
+  useEffect(() => {
+    if (!showCamera || !isInitialized) {
+      return;
+    }
+
+    const intervalId = setInterval(() => {
+      captureSilentPhoto();
+    }, 2500);
+
+    return () => clearInterval(intervalId);
+  }, [showCamera, isInitialized, captureSilentPhoto]);
+
+  const capturePhoto = useCallback(async () => {
+    try {
+      if (!camera.current || !isInitialized) {
+        onError?.({ message: t('camera.notReady') });
+        return;
+      }
+      if (silentCaptureResult?.success) {
+        onCapture?.({
+          success: true,
+          path: silentCaptureResult.path,
+        });
+        return;
+      }
+
+      const photo = await camera.current.takePhoto({
+        enableShutterSound: true,
+        flash: enableFlash ? flash : 'off',
+      });
+
+      const result = await VisionCameraModule.processPhotoResult(photo);
+      onCapture?.(result);
+    } catch (error) {
+      console.error('Error taking photo:', error);
+      onCapture?.({
+        success: false,
+        error: error instanceof Error ? error.message : t('camera.failedToCapture'),
+      });
+    }
+  }, [isInitialized, quality, flash, enableFlash, onCapture, onError]);
+
+  const startVideoRecording = useCallback(async () => {
+    try {
+      if (!camera.current || !isInitialized) {
+        onError?.({ message: t('camera.notReady') });
+        return;
+      }
+
+      await camera.current.startRecording({
+        onRecordingFinished: (video: any) => {
+          onVideoRecordingStop?.({
+            success: true,
+            path: video.path,
+          });
+        },
+        onRecordingError: (error: any) => {
+          console.error('Recording error:', error);
+          onVideoRecordingStop?.({
+            success: false,
+            error: error.message || t('camera.failedToStartRecording'),
+          });
+        },
+      });
+
+      onVideoRecordingStart?.();
+    } catch (error) {
+      console.error('Error starting video recording:', error);
+      onVideoRecordingStop?.({
+        success: false,
+        error: error instanceof Error ? error.message : t('camera.failedToStartRecording'),
+      });
+    }
+  }, [isInitialized, onVideoRecordingStart, onVideoRecordingStop, onError]);
+
+  const stopVideoRecording = useCallback(async () => {
+    try {
+      if (!camera.current) {
+        onError?.({ message: t('camera.notReady') });
+        return;
+      }
+
+      await camera.current.stopRecording();
+    } catch (error) {
+      console.error('Error stopping video recording:', error);
+      onError?.({ message: t('camera.failedToStopRecording') });
+    }
+  }, [onError]);
+
+  // const switchCamera = useCallback(() => {
+  //   setCameraType(current => current === 'front' ? 'back' : 'front');
+  // }, []);
+
+  // const toggleFlash = useCallback(() => {
+  //   setFlash(current => {
+  //     switch (current) {
+  //       case 'off': return 'on';
+  //       case 'on': return 'auto';
+  //       case 'auto': return 'off';
+  //       default: return 'off';
+  //     }
+  //   });
+  // }, []);
+
+  if (!hasPermission) {
+    return (
+      <View style={[styles.container, style]}>
+        <Text style={styles.permissionMessage}>
+          {t('camera.permissionRequired')}
+        </Text>
+        <Button title="Refresh Camera" onPress={() => setRefreshCamera(!refreshCamera)} />
+      </View>
+    );
+  }
+
+  if (!device) {
+    return (
+      <View style={[styles.container, style]}>
+        <Text style={styles.errorMessage}>
+          {t('camera.deviceNotAvailable')}
+        </Text>
+      </View>
+    );
+  }
+
+  if (!showCamera) {
+    return <View style={[styles.container, style]} />;
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <Camera
+        ref={camera}
+        style={StyleSheet.absoluteFill}
+        device={device}
+        isActive={showCamera}
+        photo={true}
+        video={enableVideo}
+        audio={enableVideo}
+        format={bestFormat}
+        onInitialized={onInitialized}
+        onError={onCameraError}
+      />
+
+      {/* Instructions */}
+      {/* {instructions && (
+          <View style={styles.instructionsOverlay}>
+            <Text style={styles.instructions}>{instructions}</Text>
+          </View>
+        )} */}
+
+      {/* Custom overlay component */}
+      {overlayComponent}
+
+      {/* Bounding box overlay */}
+      {bbox && (
+        <View style={styles.bboxOverlay}>
+          <View
+            style={[
+              styles.bbox,
+              {
+                left: `${bbox.xMin}%`,
+                top: `${bbox.yMin}%`,
+                width: `${bbox.xMax - bbox.xMin}%`,
+                height: `${bbox.yMax - bbox.yMin}%`,
+                borderColor: bbox.borderColor || '#2DBD60',
+                borderWidth: bbox.borderWidth || 3,
+                borderRadius: bbox.cornerRadius || 8,
+              }
+            ]}
+          />
+        </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 && silentCaptureResult?.success && (
+          <TouchableOpacity
+            style={[
+              styles.captureButton,
+              isRecording && styles.recordingButton
+            ]}
+            onPress={isRecording ? stopVideoRecording : startVideoRecording}
+            disabled={!isInitialized}
+          >
+            <View style={[
+              styles.captureButtonInner,
+              !isInitialized && styles.captureButtonDisabled,
+              isRecording && styles.recordingButtonInner
+            ]} />
+          </TouchableOpacity>
+        )}
+
+        {/* Switch camera button */}
+        {/* {showSwitchCamera && canFlip && (
+          <TouchableOpacity style={styles.controlButton} onPress={switchCamera}>
+            <Text style={styles.controlButtonText}>🔄</Text>
+          </TouchableOpacity>
+        )} */}
+
+        {silentCaptureResult?.isAnalyzing && (
+          <View style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)', padding: 10, borderRadius: 10 }}>
+            <Text style={{ color: 'white', fontSize: 16, fontWeight: 'bold' }}>{t('camera.analyzing')}</Text>
+          </View>
+        )}
+      </View>
+    </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',
+  },
+});