scandoc-ai-components 0.0.77 → 0.0.79

package/dist/index.js

@@ -11174,13 +11174,12 @@ class ExtractorVideo {
   static VALIDATION_IMG_HEIGHT = 384;
   static VIDEO_SETTINGS = Object.freeze({
     width: {
-      ideal: 1024
+      ideal: 1920
     },
     height: {
-      ideal: 768
+      ideal: 1080
     },
-    // 4:3
-    facingMode: "user"
+    facingMode: "environment"
   });
   constructor(onExtractedResults) {
     this.candidateImages = [];
@@ -11191,7 +11190,6 @@ class ExtractorVideo {
     this.scanStartTime = null;
     this.unsupportedDocCount = 0;
     this.video = null;
-    this.updateOverlayTimeout = null;
   }
   reset() {
     this.stopVideo();
@@ -11404,8 +11402,8 @@ class ExtractorVideo {
   }
   adjustOverlayPosition() {
     const video = this.video;
-    const overlay = document.querySelector(".desktopRectangle");
-    if (!video || !overlay || video.videoWidth === 0 || video.videoHeight === 0) return;
+    const dot = document.querySelector(".centerGuideDot");
+    if (!video || !dot || video.videoWidth === 0 || video.videoHeight === 0) return;
     const videoRatio = video.videoWidth / video.videoHeight;
     const container = video.parentElement;
     const containerRatio = container.clientWidth / container.clientHeight;
@@ -11419,14 +11417,11 @@ class ExtractorVideo {
     }
     const offsetX = (container.clientWidth - scaleWidth) / 2;
     const offsetY = (container.clientHeight - scaleHeight) / 2;
-    const paddingRatio = 0.05;
-    const minPadding = 16;
-    const padX = Math.max(scaleWidth * paddingRatio, minPadding);
-    const padY = Math.max(scaleHeight * paddingRatio, minPadding);
-    overlay.style.left = `${offsetX + padX}px`;
-    overlay.style.top = `${offsetY + padY}px`;
-    overlay.style.width = `${scaleWidth - padX * 2}px`;
-    overlay.style.height = `${scaleHeight - padY * 2}px`;
+    const centerX = offsetX + scaleWidth / 2;
+    const centerY = offsetY + scaleHeight / 2;
+    dot.style.display = "block";
+    dot.style.left = `${centerX - 8}px`; // center minus half dot size
+    dot.style.top = `${centerY - 8}px`;
   }
   getHTML() {
     const cfgValues = (0,_config__WEBPACK_IMPORTED_MODULE_1__.getScanDocAIConfigValues)();
@@ -11438,7 +11433,7 @@ class ExtractorVideo {
                 <div class="desktopVideoHolder">
 					<video id="ScanDocAIVideoElement" class="desktopVideo" autoPlay muted playsInline></video>
 					<div class="backgroundOverlay"></div>
-					<div class="desktopRectangle dashedRectangle"></div>
+					<div class="centerGuideDot"></div>
                 </div>
             </div>
     
@@ -11468,13 +11463,23 @@ class ExtractorVideo {
 					height: 100%;
 					object-fit: cover;
 				}
-
-                .desktopRectangle {
+				
+				.centerGuideDot {
 					position: absolute;
-					border: 5px dashed ${borderColor};
-					border-radius: 30px;
+					width: 16px;
+					height: 16px;
+					background-color: #00ff55;
+					border-radius: 50%;
+					box-shadow: 0 0 8px 2px rgba(0, 255, 100, 0.8);
+					z-index: 4;
+					animation: flicker 1s infinite;
 					pointer-events: none;
-					z-index: 3;
+					display: none; /* Hidden until video is ready */
+				}
+
+				@keyframes flicker {
+					0%, 100% { opacity: 1; }
+					50% { opacity: 0.3; }
 				}
 
                 .backgroundOverlay {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "scandoc-ai-components",
   "author": "ScanDoc-AI",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "private": false,
   "description": "Pure JavaScript package for integrating ScanDoc-AI services.",
   "keywords": [