react-native-expo-cropper 1.2.38 → 1.2.40

package/dist/CustomCamera.js

@@ -8,7 +8,7 @@ exports["default"] = CustomCamera;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _expoCamera = require("expo-camera");
+var _reactNativeVisionCamera = require("react-native-vision-camera");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -38,44 +38,31 @@ function CustomCamera(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     loadingBeforeCapture = _useState4[0],
     setLoadingBeforeCapture = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hasPermission = _useState6[0],
-    setHasPermission = _useState6[1];
   var cameraRef = (0, _react.useRef)(null);
   var cameraWrapperRef = (0, _react.useRef)(null);
   var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  var _useState7 = (0, _react.useState)({
+  var _useState5 = (0, _react.useState)({
       width: 0,
       height: 0,
       x: 0,
       y: 0
     }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    cameraWrapperLayout = _useState6[0],
+    setCameraWrapperLayout = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    cameraWrapperLayout = _useState8[0],
-    setCameraWrapperLayout = _useState8[1];
-  var _useState9 = (0, _react.useState)(null),
-    _useState0 = _slicedToArray(_useState9, 2),
-    greenFrame = _useState0[0],
-    setGreenFrame = _useState0[1];
+    greenFrame = _useState8[0],
+    setGreenFrame = _useState8[1];
+  var _useCameraPermission = (0, _reactNativeVisionCamera.useCameraPermission)(),
+    hasPermission = _useCameraPermission.hasPermission,
+    requestPermission = _useCameraPermission.requestPermission;
+  var device = (0, _reactNativeVisionCamera.useCameraDevice)('back');
   (0, _react.useEffect)(function () {
-    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-      var _yield$Camera$request, status;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.n) {
-          case 0:
-            _context.n = 1;
-            return _expoCamera.Camera.requestCameraPermissionsAsync();
-          case 1:
-            _yield$Camera$request = _context.v;
-            status = _yield$Camera$request.status;
-            setHasPermission(status === 'granted');
-          case 2:
-            return _context.a(2);
-        }
-      }, _callee);
-    }))();
-  }, []);
+    if (!hasPermission) {
+      requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
 
   // Helper function to wait for multiple render cycles (works on iOS)
   var waitForRender = function waitForRender() {
@@ -94,23 +81,19 @@ function CustomCamera(_ref) {
     });
   };
 
-  // ✅ CRITICAL FIX: Calculate green frame coordinates relative to camera preview
-  // The green frame should be calculated on the wrapper (as it's visually drawn there)
-  // But we store it with wrapper dimensions so ImageCropper can map it correctly
+  // Green frame coordinates relative to camera preview wrapper.
+  // Preview matches sensor output (VisionCamera) so framing matches capture.
   var calculateGreenFrameCoordinates = function calculateGreenFrameCoordinates() {
     var wrapperWidth = cameraWrapperLayout.width;
     var wrapperHeight = cameraWrapperLayout.height;
     if (wrapperWidth === 0 || wrapperHeight === 0) {
-      console.warn("Camera wrapper layout not ready, cannot calculate green frame");
+      console.warn('Camera wrapper layout not ready, cannot calculate green frame');
       return null;
     }
-
-    // ✅ Calculate green frame as percentage of WRAPPER
-    var frameWidth = wrapperWidth * 0.85; // 85% of wrapper width
-    var frameHeight = wrapperHeight * 0.70; // 70% of wrapper height
-    var frameX = (wrapperWidth - frameWidth) / 2; // Centered horizontally
-    var frameY = (wrapperHeight - frameHeight) / 2; // Centered vertically
-
+    var frameWidth = wrapperWidth * 0.85;
+    var frameHeight = wrapperHeight * 0.7;
+    var frameX = (wrapperWidth - frameWidth) / 2;
+    var frameY = (wrapperHeight - frameHeight) / 2;
     var frameCoords = {
       x: frameX,
       y: frameY,
@@ -118,19 +101,14 @@ function CustomCamera(_ref) {
       height: frameHeight,
       wrapperWidth: wrapperWidth,
       wrapperHeight: wrapperHeight,
-      // ✅ Store percentages for easier mapping later
       percentX: frameX / wrapperWidth * 100,
       percentY: frameY / wrapperHeight * 100,
       percentWidth: 85,
-      // 85% of wrapper width
-      percentHeight: 70 // 70% of wrapper height
+      percentHeight: 70
     };
-    console.log("✅ Green frame coordinates calculated:", frameCoords);
+    console.log('Green frame coordinates calculated:', frameCoords);
     return frameCoords;
   };
-
-  // 🔁 Keep green frame state in sync with wrapper layout so we can both render it
-  // and send the exact same coordinates along with the captured photo.
   (0, _react.useEffect)(function () {
     var coords = calculateGreenFrameCoordinates();
     if (coords) {
@@ -138,78 +116,101 @@ function CustomCamera(_ref) {
     }
   }, [cameraWrapperLayout]);
   var takePicture = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var photo, greenFrameCoords, fixedUri, _t;
-      return _regenerator().w(function (_context2) {
-        while (1) switch (_context2.p = _context2.n) {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var photo, uri, capturedAspectRatio, greenFrameCoords, _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
           case 0:
-            if (!cameraRef.current) {
-              _context2.n = 5;
+            if (!(!cameraRef.current || !device)) {
+              _context.n = 1;
               break;
             }
-            _context2.p = 1;
-            // Show loading after a delay (using setImmediate for iOS compatibility)
+            return _context.a(2);
+          case 1:
+            _context.p = 1;
             waitForRender(5).then(function () {
               setLoadingBeforeCapture(true);
             });
-
-            // Wait a bit before taking picture (works on iOS)
-            _context2.n = 2;
+            _context.n = 2;
             return waitForRender(2);
           case 2:
-            _context2.n = 3;
-            return cameraRef.current.takePictureAsync({
-              quality: 1,
-              // Qualité maximale (0-1, 1 = meilleure qualité)
-              shutterSound: false,
-              // skipProcessing: true = Désactiver le traitement automatique pour préserver la qualité pixel-perfect
-              // IMPORTANT : Cela préserve la résolution originale et évite toute interpolation
-              skipProcessing: true,
-              // exif: true = Inclure les métadonnées EXIF (orientation, etc.)
-              // L'orientation sera gérée dans ImageCropper si nécessaire via la fonction de rotation
-              exif: true
+            _context.n = 3;
+            return cameraRef.current.takePhoto({
+              enableShutterSound: false,
+              flash: 'off'
             });
           case 3:
-            photo = _context2.v;
-            console.log("Photo captured with maximum quality:", {
-              uri: photo.uri,
+            photo = _context.v;
+            if (!(!photo.path || !photo.width || !photo.height)) {
+              _context.n = 4;
+              break;
+            }
+            throw new Error('Invalid photo received from camera');
+          case 4:
+            uri = photo.path.startsWith('file://') ? photo.path : "file://".concat(photo.path);
+            capturedAspectRatio = photo.width / photo.height;
+            console.log('Photo captured (VisionCamera):', {
+              uri: uri,
               width: photo.width,
               height: photo.height,
-              exif: photo.exif ? "present" : "missing"
+              aspectRatio: capturedAspectRatio.toFixed(3)
             });
-
-            // ✅ CRITICAL FIX: Use the same green frame coordinates that are used for rendering
-            // Fallback to recalculation if, for some reason, state is not yet set
-            greenFrameCoords = greenFrame || calculateGreenFrameCoordinates(); // ✅ REFACTORISATION : Utiliser directement l'URI de la photo
-            // L'orientation sera gérée dans ImageCropper si l'utilisateur utilise la fonction de rotation
-            // skipProcessing: true préserve la qualité mais peut laisser l'orientation EXIF non appliquée
-            // C'est acceptable car l'utilisateur peut corriger via la rotation dans ImageCropper
-            fixedUri = photo.uri; // Envoyer l'URI et les coordonnées du green frame à ImageCropper
-            onPhotoCaptured(fixedUri, {
+            greenFrameCoords = greenFrame || calculateGreenFrameCoordinates();
+            if (greenFrameCoords) {
+              _context.n = 5;
+              break;
+            }
+            throw new Error('Green frame coordinates not available');
+          case 5:
+            onPhotoCaptured(uri, {
               greenFrame: greenFrameCoords,
               capturedImageSize: {
                 width: photo.width,
-                height: photo.height
+                height: photo.height,
+                aspectRatio: capturedAspectRatio
               }
             });
             setLoadingBeforeCapture(false);
-            _context2.n = 5;
+            _context.n = 7;
             break;
-          case 4:
-            _context2.p = 4;
-            _t = _context2.v;
-            console.error("Error capturing photo:", _t);
+          case 6:
+            _context.p = 6;
+            _t = _context.v;
+            console.error('Error capturing photo:', _t);
             setLoadingBeforeCapture(false);
-            _reactNative.Alert.alert("Erreur", "Impossible de capturer la photo. Veuillez réessayer.");
-          case 5:
-            return _context2.a(2);
+            _reactNative.Alert.alert('Erreur', "Impossible de capturer la photo: ".concat(_t.message || 'Erreur inconnue', ". Veuillez r\xE9essayer."));
+          case 7:
+            return _context.a(2);
         }
-      }, _callee2, null, [[1, 4]]);
+      }, _callee, null, [[1, 6]]);
     }));
     return function takePicture() {
-      return _ref3.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
+  if (!hasPermission) {
+    return /*#__PURE__*/_react["default"].createElement(_reactNative.SafeAreaView, {
+      style: styles.outerContainer
+    }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+      style: styles.permissionContainer
+    }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+      style: styles.text
+    }, "Acc\xE8s \xE0 la cam\xE9ra requis pour prendre des photos."), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+      style: styles.button,
+      onPress: requestPermission
+    }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+      style: styles.buttonText
+    }, "Autoriser la cam\xE9ra"))));
+  }
+  if (!device) {
+    return /*#__PURE__*/_react["default"].createElement(_reactNative.SafeAreaView, {
+      style: styles.outerContainer
+    }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+      style: styles.permissionContainer
+    }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+      style: styles.text
+    }, "Aucune cam\xE9ra arri\xE8re disponible.")));
+  }
   return /*#__PURE__*/_react["default"].createElement(_reactNative.SafeAreaView, {
     style: styles.outerContainer
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
@@ -223,14 +224,17 @@ function CustomCamera(_ref) {
         x: layout.x,
         y: layout.y
       });
-      console.log("Camera wrapper layout updated:", layout);
+      console.log('Camera wrapper layout updated:', layout);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_expoCamera.CameraView, {
-    style: styles.camera,
-    facing: "back",
+  }, /*#__PURE__*/_react["default"].createElement(_reactNativeVisionCamera.Camera, {
     ref: cameraRef,
-    onCameraReady: function onCameraReady() {
-      return setIsReady(true);
+    style: _reactNative.StyleSheet.absoluteFill,
+    device: device,
+    isActive: true,
+    photo: true,
+    onInitialized: function onInitialized() {
+      setIsReady(true);
+      console.log('VisionCamera ready - preview matches capture');
     }
   }), loadingBeforeCapture && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: styles.loadingOverlay
@@ -278,7 +282,6 @@ var styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     position: 'relative'
   },
-  camera: _objectSpread({}, _reactNative.StyleSheet.absoluteFillObject),
   scanFrame: {
     position: 'absolute',
     borderWidth: 4,
@@ -300,14 +303,6 @@ var styles = _reactNative.StyleSheet.create({
     zIndex: 21,
     backgroundColor: 'transparent'
   }),
-  cancelIcon: {
-    position: 'absolute',
-    top: 20,
-    left: 20,
-    backgroundColor: PRIMARY_GREEN,
-    borderRadius: 5,
-    padding: 8
-  },
   buttonContainer: {
     position: 'absolute',
     bottom: 0,
@@ -329,16 +324,15 @@ var styles = _reactNative.StyleSheet.create({
     fontSize: 18,
     color: GLOW_WHITE
   },
-  container: {
+  permissionContainer: {
     flex: 1,
-    backgroundColor: DEEP_BLACK,
     justifyContent: 'center',
     alignItems: 'center',
     padding: 20
   },
-  iconText: {
-    fontSize: 18,
-    color: GLOW_WHITE,
+  buttonText: {
+    fontSize: 16,
+    color: DEEP_BLACK,
     fontWeight: '600'
   }
 });