scandoc-ai-components 0.0.80 → 0.0.82

package/dist/index.js

@@ -11190,6 +11190,7 @@ class ExtractorVideo {
     this.scanStartTime = null;
     this.unsupportedDocCount = 0;
     this.video = null;
+    this.lastMessage = null;
   }
   reset() {
     this.stopVideo();
@@ -11202,6 +11203,7 @@ class ExtractorVideo {
     this.unsupportedDocStartTime = null;
     this.unsupportedDocCount = 0;
     this.video = null;
+    this.lastMessage = null;
   }
   async analyzeVideoStream() {
     if (!this.isRunning) {
@@ -11269,9 +11271,11 @@ class ExtractorVideo {
               const imageId = response["Index"];
               const imageSide = response["Side"];
               //
-              if (this.extractionImages[imageSide] === undefined) {
-                this.extractionImages[imageSide] = images[imageId]["fullImg"];
+              if (this.extractionImages[imageSide] !== undefined) {
+                this.candidateImages = [];
+                return;
               }
+              this.extractionImages[imageSide] = images[imageId]["fullImg"];
               const extractionImages = {
                 ...this.extractionImages
               };
@@ -11310,6 +11314,7 @@ class ExtractorVideo {
   onExtraction(isExtractionOk, extractionData) {
     this.candidateImages = [];
     this.extractionImages = {};
+    this.lastMessage = null;
     this.stopVideo();
     if (isExtractionOk) {
       this.showMessage("Success - data extracted", "success");
@@ -11386,6 +11391,7 @@ class ExtractorVideo {
   }
   stopVideo() {
     this.isRunning = false;
+    this.lastMessage = null;
     if (this.video) {
       this.video.pause();
       if (this.video.srcObject !== undefined && this.video.srcObject !== null) {
@@ -11395,6 +11401,8 @@ class ExtractorVideo {
     }
   }
   showMessage(message) {
+    if (this.lastMessage === message) return;
+    this.lastMessage = message;
     const messageElement = document.getElementById("ScanDocAIMessage");
     if (messageElement) {
       messageElement.innerText = message;
@@ -11427,85 +11435,152 @@ class ExtractorVideo {
     const cfgValues = (0,_config__WEBPACK_IMPORTED_MODULE_1__.getScanDocAIConfigValues)();
     const borderColor = cfgValues.VIDEO_COLORS?.borderColor;
     const messageColor = cfgValues.VIDEO_COLORS?.messageColor;
-    return `
-            <div class="desktopFeedback" id="ScanDocAIMessage"></div>
-            <div class="desktopVideoArea">
-                <div class="desktopVideoHolder">
-					<video id="ScanDocAIVideoElement" class="desktopVideo" autoPlay muted playsInline></video>
-					<div class="backgroundOverlay"></div>
-					<div class="centerGuideDot"></div>
-                </div>
-            </div>
-    
-            <style>
-                .desktopVideoArea {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 8px;
-                    padding: 16px;
-                    background-color: rgba(255, 255, 255, 0.05);
-                    border: 1px solid ${borderColor};
-                    border-radius: 15px;
-                    margin-left: 20%;
-                    margin-right: 20%;
-                }
-    
-                .desktopVideoHolder {
-					position: relative;
-					width: 100%;
-					overflow: hidden;
-				}
-
-				.desktopVideo {
-					width: 100%;
-					height: auto;
-					margin-left: auto;
-					margin-right: auto;
-					max-width: 100vw;
-					max-height: 100vh;
-				}
-				
-				.centerGuideDot {
-					position: absolute;
-					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;
-					display: none; /* Hidden until video is ready */
-				}
-
-				@keyframes flicker {
-					0%, 100% { opacity: 1; }
-					50% { opacity: 0.3; }
-				}
-
-                .backgroundOverlay {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    background-color: rgba(0, 0, 0, 0.051);
-                    z-index: 2;
-                    pointer-events: none;
-                }
-    
-                .desktopFeedback {
-                    position: relative;
-                    display: flex;
-                    font-size: 22px;
-                    font-weight: 600;
-                    min-height: 36px;
-                    justify-content: center;
-                    align-items: center;
-                    color: ${messageColor};
-                }
-            </style>
-        `;
+    const isMobile = window.innerWidth < 768 || window.innerHeight > window.innerWidth;
+    window.innerWidth < 768 || window.innerHeight > window.innerWidth && window.innerWidth < 1024;
+    if (isMobile) {
+      // ✅ Mobile version with overlay feedback
+      return `
+				<div class="mobileVideoArea">
+					<video id="ScanDocAIVideoElement" class="mobileVideo" autoplay muted playsinline></video>
+					<div class="mobileOverlay">
+						<div class="mobileFeedback" id="ScanDocAIMessage"></div>
+						<div class="centerGuideDot"></div>
+					</div>
+				</div>
+	
+				<style>
+					.mobileVideoArea {
+						position: relative;
+						width: 100vw;
+						height: 100vh;
+						overflow: hidden;
+					}
+					.mobileVideo {
+						width: 100%;
+						height: 100%;
+						object-fit: cover;
+						pointer-events: none;
+					}
+					.mobileOverlay {
+						position: absolute;
+						inset: 0;
+						display: flex;
+						flex-direction: column;
+						justify-content: flex-start;
+						align-items: center;
+						pointer-events: none;
+						z-index: 10;
+					}
+					.mobileFeedback {
+						margin-top: 16px;
+						padding: 8px 16px;
+						border-radius: 8px;
+						background: rgba(15, 33, 63, 0.75);
+						color: ${messageColor};
+						font-weight: 600;
+						font-size: 16px;
+						text-align: center;
+						max-width: 90%;
+					}
+					.centerGuideDot {
+						width: 16px;
+						height: 16px;
+						border-radius: 50%;
+						background-color: #00ff55;
+						box-shadow: 0 0 8px 2px rgba(0, 255, 100, 0.8);
+						animation: flicker 1s infinite;
+						position: absolute;
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%, -50%);
+					}
+					@keyframes flicker {
+						0%, 100% { opacity: 1; }
+						50% { opacity: 0.3; }
+					}
+				</style>
+			`;
+    } else {
+      return `
+				<div class="desktopFeedback" id="ScanDocAIMessage"></div>
+				<div class="desktopVideoArea">
+					<div class="desktopVideoHolder">
+						<video id="ScanDocAIVideoElement" class="desktopVideo" autoPlay muted playsInline></video>
+						<div class="backgroundOverlay"></div>
+						<div class="centerGuideDot"></div>
+					</div>
+				</div>
+		
+				<style>
+					.desktopVideoArea {
+						display: flex;
+						flex-direction: column;
+						gap: 8px;
+						padding: 16px;
+						background-color: rgba(255, 255, 255, 0.05);
+						border: 1px solid ${borderColor};
+						border-radius: 15px;
+						margin-left: 20%;
+						margin-right: 20%;
+					}
+		
+					.desktopVideoHolder {
+						position: relative;
+						width: 100%;
+						overflow: hidden;
+					}
+
+					.desktopVideo {
+						width: 100%;
+						height: auto;
+						margin-left: auto;
+						margin-right: auto;
+						max-width: 100vw;
+						max-height: 100vh;
+					}
+					
+					.centerGuideDot {
+						position: absolute;
+						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;
+						display: none; /* Hidden until video is ready */
+					}
+
+					@keyframes flicker {
+						0%, 100% { opacity: 1; }
+						50% { opacity: 0.3; }
+					}
+
+					.backgroundOverlay {
+						position: absolute;
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+						background-color: rgba(0, 0, 0, 0.051);
+						z-index: 2;
+						pointer-events: none;
+					}
+		
+					.desktopFeedback {
+						position: relative;
+						display: flex;
+						font-size: 22px;
+						font-weight: 600;
+						min-height: 36px;
+						justify-content: center;
+						align-items: center;
+						color: ${messageColor};
+					}
+				</style>
+			`;
+    }
   }
 }
 let EXTRACTION_VIDEO = undefined;

package/package.json

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