smartcomply-web-sdk 1.0.60 → 1.0.62

package/dist/smartcomply.browser.js

@@ -298,6 +298,8 @@ var SmartComplySDK = (() => {
   var MAX_SNAPSHOT_BYTES = 2 * 1024 * 1024;
   var DEFAULT_CHALLENGE_ACTIONS = ["BLINK"];
   var LIVENESS_TIME_LIMIT_SECONDS = 12;
+  var DOC_CAMERA_IDEAL_WIDTH = 2e3;
+  var DOC_CAMERA_IDEAL_HEIGHT = 1500;
   var RECORDING_BITS_PER_SECOND = 8e5;
 
   // src/camera/Permission.ts
@@ -352,6 +354,15 @@ var SmartComplySDK = (() => {
           }
         };
       }
+      if (name === "OverconstrainedError") {
+        return {
+          stream: null,
+          permission: {
+            status: "unknown",
+            reason: "Camera constraints not supported. Trying with different settings..."
+          }
+        };
+      }
       return {
         stream: null,
         permission: {
@@ -361,6 +372,9 @@ var SmartComplySDK = (() => {
       };
     }
   }
+  function isRetryableCameraError(status) {
+    return status !== "denied" && status !== "unsupported";
+  }
   function releaseCameraStream(stream) {
     if (!stream) return;
     stream.getTracks().forEach((t2) => t2.stop());
@@ -370,6 +384,13 @@ var SmartComplySDK = (() => {
   }
 
   // src/camera/CameraManager.ts
+  var CameraAccessError = class extends Error {
+    constructor(message, status) {
+      super(message);
+      this.status = status;
+      this.name = "CameraAccessError";
+    }
+  };
   var CameraManager = class {
     constructor() {
       this.stream = null;
@@ -391,7 +412,7 @@ var SmartComplySDK = (() => {
       };
       const { stream, permission } = await requestCameraAccess(constraints || defaults);
       if (!stream) {
-        throw new Error(permission.reason || "Unable to access the camera.");
+        throw new CameraAccessError(permission.reason || "Unable to access the camera.", permission.status);
       }
       this.stream = stream;
       this._watchTracks();
@@ -5923,12 +5944,21 @@ var SmartComplySDK = (() => {
     };
   }
 
+  // src/utils/documentRules.ts
+  function requiresBackSide(documentType) {
+    const type = documentType.toLowerCase();
+    return type.includes("voter") || type.includes("driver") || type.includes("license") || type.includes("national id") || type.includes("national id card") || type.includes("ghana");
+  }
+  function computeScaleRatio(srcWidth, srcHeight, maxWidth, maxHeight) {
+    return Math.min(maxWidth / srcWidth, maxHeight / srcHeight, 1);
+  }
+
   // src/flow/DocumentCapture.ts
   var DocumentCapture = class {
     constructor() {
       this.root = null;
       this.videoEl = null;
-      this.stream = null;
+      this.cameraManager = new CameraManager();
       this.resolveCapture = null;
       this.rejectCapture = null;
       this.frontBlob = null;
@@ -5982,12 +6012,8 @@ var SmartComplySDK = (() => {
       this.backBlob = null;
       this.currentSide = "front";
     }
-    requiresBackSide(documentType) {
-      const type = documentType.toLowerCase();
-      return type.includes("voter") || type.includes("driver") || type.includes("license") || type.includes("national id") || type.includes("national id card") || type.includes("ghana");
-    }
     shouldCaptureBackSide(documentType) {
-      return this.requiresBackOverride !== void 0 ? this.requiresBackOverride : this.requiresBackSide(documentType);
+      return this.requiresBackOverride !== void 0 ? this.requiresBackOverride : requiresBackSide(documentType);
     }
     renderChoiceScreen(container, theme, documentType) {
       this.root = document.createElement("div");
@@ -6127,7 +6153,7 @@ var SmartComplySDK = (() => {
             return;
           }
           this.showLoadingState("Processing image...", theme);
-          this.compressImage(file, 1280, 960, 0.85).then((c2) => this.handleFileUploadComplete(c2, container, theme, documentType)).catch(() => this.handleFileUploadComplete(file, container, theme, documentType));
+          this.compressImage(file, 2e3, 1500, 0.92).then((c2) => this.handleFileUploadComplete(c2, container, theme, documentType)).catch(() => this.handleFileUploadComplete(file, container, theme, documentType));
         }
       });
       this.root.appendChild(fileInput);
@@ -6203,67 +6229,53 @@ var SmartComplySDK = (() => {
         return;
       }
       const maxRetries = 3;
-      let retryCount = 0;
-      const attemptCameraAccess = async (constraints) => {
+      const attemptCameraAccess = async (constraints, retryCount = 0) => {
         try {
-          return await navigator.mediaDevices.getUserMedia(constraints);
+          return await this.cameraManager.open(constraints);
         } catch (err) {
           console.warn(`Camera access attempt ${retryCount + 1} failed:`, err);
-          if (retryCount < maxRetries - 1) {
-            retryCount++;
-            await new Promise((resolve) => setTimeout(resolve, 1e3 * retryCount));
-            return attemptCameraAccess(constraints);
+          const status = err instanceof CameraAccessError ? err.status : "unknown";
+          if (isRetryableCameraError(status) && retryCount < maxRetries - 1) {
+            await new Promise((resolve) => setTimeout(resolve, 1e3 * (retryCount + 1)));
+            return attemptCameraAccess(constraints, retryCount + 1);
           }
           throw err;
         }
       };
+      let stream;
       try {
-        this.stream = await attemptCameraAccess({
+        stream = await attemptCameraAccess({
           video: {
             facingMode: { ideal: "environment" },
-            width: { ideal: 1280 },
-            height: { ideal: 960 }
+            width: { ideal: DOC_CAMERA_IDEAL_WIDTH },
+            height: { ideal: DOC_CAMERA_IDEAL_HEIGHT }
           }
         });
       } catch (err) {
         console.warn("Rear camera failed, trying any camera:", err);
         try {
-          this.stream = await attemptCameraAccess({
-            video: { width: { ideal: 1280 } }
+          stream = await attemptCameraAccess({
+            video: { width: { ideal: DOC_CAMERA_IDEAL_WIDTH } }
           });
         } catch (fallbackErr) {
-          const errorMessage = this.getCameraErrorMessage(fallbackErr);
-          this.rejectCapture?.(new Error(errorMessage));
+          this.rejectCapture?.(new Error(fallbackErr?.message || "Camera access failed. Please check your camera permissions and try again."));
           return;
         }
       }
+      this.cameraManager.onStreamInterrupted(() => {
+        if (this.resolveCapture || this.rejectCapture) {
+          this.rejectCapture?.(new Error("Camera connection was lost. Please check your camera and try again."));
+        }
+      });
       if (this.videoEl) {
-        this.videoEl.srcObject = this.stream;
-      }
-    }
-    getCameraErrorMessage(error) {
-      if (error.name === "NotAllowedError") {
-        return "Camera access denied. Please allow camera permissions and try again.";
-      } else if (error.name === "NotFoundError") {
-        return "No camera found. Please ensure your device has a working camera.";
-      } else if (error.name === "NotReadableError") {
-        return "Camera is already in use by another application. Please close other apps using the camera and try again.";
-      } else if (error.name === "OverconstrainedError") {
-        return "Camera constraints not supported. Trying with different settings...";
-      } else {
-        return "Camera access failed. Please check your camera permissions and try again.";
+        this.videoEl.srcObject = stream;
       }
     }
     captureFrame(container, theme, documentType) {
       if (!this.videoEl) return;
-      const MAX_W = 1280;
-      const MAX_H = 960;
-      const vw = this.videoEl.videoWidth || MAX_W;
-      const vh = this.videoEl.videoHeight || MAX_H;
-      const ratio = Math.min(MAX_W / vw, MAX_H / vh, 1);
       const canvas = document.createElement("canvas");
-      canvas.width = Math.round(vw * ratio);
-      canvas.height = Math.round(vh * ratio);
+      canvas.width = this.videoEl.videoWidth;
+      canvas.height = this.videoEl.videoHeight;
       const ctx = canvas.getContext("2d");
       if (!ctx) return;
       ctx.drawImage(this.videoEl, 0, 0, canvas.width, canvas.height);
@@ -6277,7 +6289,7 @@ var SmartComplySDK = (() => {
           }
         },
         "image/jpeg",
-        0.85
+        0.92
       );
     }
     /**
@@ -6376,7 +6388,7 @@ var SmartComplySDK = (() => {
         }
         useBtn.textContent = "Processing...";
         useBtn.disabled = true;
-        this.compressImage(imageData, 1280, 960, 0.85).then((compressed) => this.handleCaptureComplete(compressed, container, theme, documentType)).catch(() => this.handleCaptureComplete(imageData, container, theme, documentType));
+        this.compressImage(imageData, 2e3, 1500, 0.92).then((compressed) => this.handleCaptureComplete(compressed, container, theme, documentType)).catch(() => this.handleCaptureComplete(imageData, container, theme, documentType));
       };
       const useBtn = this.createButton(qualityIsPoor ? "Use Anyway ⚠" : "Use Photo ✓", theme, !qualityIsPoor);
       useBtn.style.flex = "1";
@@ -6444,72 +6456,12 @@ var SmartComplySDK = (() => {
       if (input) input.click();
     }
     stopCamera() {
-      if (this.stream) {
-        this.stream.getTracks().forEach((t2) => t2.stop());
-        this.stream = null;
-      }
+      this.cameraManager.stop();
       if (this.videoEl) {
         this.videoEl.srcObject = null;
         this.videoEl = null;
       }
     }
-    createEnhancedButton(label, theme, isPrimary, ariaLabel) {
-      const btn = document.createElement("button");
-      btn.textContent = label;
-      btn.setAttribute("aria-label", ariaLabel);
-      btn.style.cssText = `
-      padding:18px 24px;border-radius:16px;font-size:16px;font-weight:600;
-      cursor:pointer;transition:all 0.3s ease;border:none;width:100%;
-      min-height:56px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
-      position:relative;overflow:hidden;
-      ${isPrimary ? `background:linear-gradient(135deg, ${theme.primary}, ${theme.primary}DD);color:#fff;box-shadow:0 8px 24px ${theme.primary}25, 0 4px 12px ${theme.primary}15;` : `background:${theme.inputBg};color:${theme.text};border:2px solid ${theme.border};box-shadow:0 2px 8px ${theme.border}20;`}
-    `;
-      btn.addEventListener("click", (e2) => {
-        const ripple = document.createElement("span");
-        const rect = btn.getBoundingClientRect();
-        const size = Math.max(rect.width, rect.height);
-        const x2 = e2.clientX - rect.left - size / 2;
-        const y2 = e2.clientY - rect.top - size / 2;
-        ripple.style.cssText = `
-        position:absolute;width:${size}px;height:${size}px;
-        left:${x2}px;top:${y2}px;border-radius:50%;
-        background:${isPrimary ? "rgba(255,255,255,0.3)" : theme.primary + "20"};
-        transform:scale(0);animation:ripple 0.6s ease-out;
-        pointer-events:none;
-      `;
-        btn.appendChild(ripple);
-        setTimeout(() => ripple.remove(), 600);
-      });
-      btn.addEventListener("mouseenter", () => {
-        btn.style.transform = "translateY(-2px)";
-        if (isPrimary) {
-          btn.style.boxShadow = `0 12px 32px ${theme.primary}30, 0 6px 16px ${theme.primary}20`;
-        } else {
-          btn.style.boxShadow = `0 4px 16px ${theme.border}30, 0 2px 8px ${theme.border}20`;
-          btn.style.borderColor = theme.primary;
-        }
-      });
-      btn.addEventListener("mouseleave", () => {
-        btn.style.transform = "translateY(0)";
-        if (isPrimary) {
-          btn.style.boxShadow = `0 8px 24px ${theme.primary}25, 0 4px 12px ${theme.primary}15`;
-        } else {
-          btn.style.boxShadow = `0 2px 8px ${theme.border}20`;
-          btn.style.borderColor = theme.border;
-        }
-      });
-      if (!document.head.querySelector("style[data-ripple-animation]")) {
-        const style2 = document.createElement("style");
-        style2.setAttribute("data-ripple-animation", "true");
-        style2.textContent = `
-        @keyframes ripple {
-          to { transform: scale(4); opacity: 0; }
-        }
-      `;
-        document.head.appendChild(style2);
-      }
-      return btn;
-    }
     showLoadingState(message, theme) {
       if (!this.root) return;
       this.root.innerHTML = "";
@@ -6612,7 +6564,7 @@ var SmartComplySDK = (() => {
             const swapped = orientation >= 5 && orientation <= 8;
             const srcW = swapped ? h2 : w2;
             const srcH = swapped ? w2 : h2;
-            const ratio = Math.min(maxWidth / srcW, maxHeight / srcH, 1);
+            const ratio = computeScaleRatio(srcW, srcH, maxWidth, maxHeight);
             const outW = Math.round(srcW * ratio);
             const outH = Math.round(srcH * ratio);
             const canvas = document.createElement("canvas");
@@ -6660,7 +6612,7 @@ var SmartComplySDK = (() => {
           imgEl.onload = () => {
             URL.revokeObjectURL(url);
             let { naturalWidth: w2, naturalHeight: h2 } = imgEl;
-            const ratio = Math.min(maxWidth / w2, maxHeight / h2, 1);
+            const ratio = computeScaleRatio(w2, h2, maxWidth, maxHeight);
             const canvas = document.createElement("canvas");
             canvas.width = Math.round(w2 * ratio);
             canvas.height = Math.round(h2 * ratio);
@@ -6764,10 +6716,6 @@ var SmartComplySDK = (() => {
     const u2 = typeName.toUpperCase();
     const advanced = u2.includes("ADVANCED");
     const cleanName = typeName.replace(/\s*with\s+face\s*/gi, " ").replace(/\s*\(NIN\)\s*/gi, " ").replace(/\s*\(BVN\)\s*/gi, " ").replace(/\s{2,}/g, " ").trim();
-    const requiresBackSide = (type) => {
-      const t2 = type.toLowerCase();
-      return t2.includes("voter") || t2.includes("driver") || t2.includes("license") || t2.includes("national id") || t2.includes("national id card");
-    };
     if (u2.includes("BVN") || u2.includes("BANK VERIFICATION")) {
       return { icon: "🏦", desc: "Enter your 11-digit Bank Verification Number (BVN)", requiresBack: false };
     }
@@ -6775,7 +6723,7 @@ var SmartComplySDK = (() => {
       return { icon: "🆔", desc: "Enter your 11-digit National Identification Number (NIN)", requiresBack: false };
     }
     if (u2.includes("GHANA")) {
-      if (isDocumentFlow) return { icon: "🪪", desc: "Capture or upload your Ghana Card", requiresBack: true };
+      if (isDocumentFlow) return { icon: "🪪", desc: "Capture or upload your Ghana Card", requiresBack: requiresBackSide(typeName) };
       return { icon: "🪪", desc: "Enter your Ghana Card number", requiresBack: false };
     }
     if (u2.includes("SSNIT"))
@@ -7940,6 +7888,7 @@ var SmartComplySDK = (() => {
       container.appendChild(yesBtn);
       const noBtn = this.createSecondaryButton("No, retake document");
       this._onceClick(noBtn, () => {
+        this.docCapture?.destroy();
         this._confirmRetries++;
         this._ocrName = "";
         this._ocrDocNumber = "";