scandoc-ai-components 0.0.59 → 0.0.61

package/dist/index.js

@@ -11332,47 +11332,6 @@ class ExtractorVideo {
       setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
     }
   }
-  async getCameraMargins() {
-    const video = document.getElementById('ScanDocAIVideoElement');
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-    const isColumnBlack = x => {
-      const threshold = 16;
-      for (let y = 0; y < canvas.height; y++) {
-        const i = (y * canvas.width + x) * 4;
-        const [r, g, b] = [imageData[i], imageData[i + 1], imageData[i + 2]];
-        if (r > threshold || g > threshold || b > threshold) return false;
-      }
-      return true;
-    };
-    const isRowBlack = y => {
-      const threshold = 16;
-      for (let x = 0; x < canvas.width; x++) {
-        const i = (y * canvas.width + x) * 4;
-        const [r, g, b] = [imageData[i], imageData[i + 1], imageData[i + 2]];
-        if (r > threshold || g > threshold || b > threshold) return false;
-      }
-      return true;
-    };
-    let left = 0,
-      right = 0,
-      top = 0,
-      bottom = 0;
-    while (left < canvas.width && isColumnBlack(left)) left++;
-    while (right < canvas.width && isColumnBlack(canvas.width - 1 - right)) right++;
-    while (top < canvas.height && isRowBlack(top)) top++;
-    while (bottom < canvas.height && isRowBlack(canvas.height - 1 - bottom)) bottom++;
-    return {
-      leftPct: left / canvas.width,
-      rightPct: right / canvas.width,
-      topPct: top / canvas.height,
-      bottomPct: bottom / canvas.height
-    };
-  }
   async startVideo() {
     try {
       const serviceConfig = (0,_config__WEBPACK_IMPORTED_MODULE_1__.getScanDocAIConfig)();
@@ -11405,16 +11364,6 @@ class ExtractorVideo {
       await this.video.play().catch(e => {
         console.warn(`Error on video play: ${e}`);
       });
-      setTimeout(async () => {
-        const margins = await this.getCameraMargins();
-        const rectangle = document.querySelector('.desktopRectangle');
-        if (rectangle) {
-          rectangle.style.top = `${margins.topPct * 100}%`;
-          rectangle.style.bottom = `${margins.bottomPct * 100}%`;
-          rectangle.style.left = `${margins.leftPct * 100}%`;
-          rectangle.style.right = `${margins.rightPct * 100}%`;
-        }
-      }, 500);
       this.scanStartTime = Date.now(); // Reset timer
       setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
       this.showMessage("Starting scanning");
@@ -11449,83 +11398,91 @@ class ExtractorVideo {
   }
   getHTML() {
     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="desktopRectangle dashedRectangle"></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 #5078bb;
-					border-radius: 15px;
-					margin-left: 20%;
-					margin-right: 20%;
-				}
-	
-				.desktopVideoHolder {
-					position: relative;
-					max-width: 100%;
-					overflow: hidden;
-				}
-	
-				.desktopVideo {
-					width: 100%;
-					height: auto;
-					margin-left: auto;
-					margin-right: auto;
-					max-width: 100vw;
-					max-height: 100vh;
-				}
-	
-				.desktopRectangle {
-					position: absolute;
-					border-radius: 30px;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					transition: all 0.3s ease;
-				}
-	
-				.dashedRectangle {
-					border: 5px dashed #5078bb;
-				}
-	
-				.solidRectangle {
-					border: 5px solid #5078bb;
-				}
-	
-				.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: #5078bb;
-				}
-			</style>
-		`;
+            <div class="desktopFeedback" id="ScanDocAIMessage"></div>
+            <div class="desktopVideoArea">
+                <div class="desktopVideoHolder">
+                    <div class="videoWrapper">
+                        <video id="ScanDocAIVideoElement" class="desktopVideo" autoPlay muted playsInline></video>
+                        <div class="backgroundOverlay"></div>
+                        <div class="desktopRectangle dashedRectangle"></div>
+                    </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 #5078bb;
+                    border-radius: 15px;
+                    margin-left: 20%;
+                    margin-right: 20%;
+                }
+    
+                .desktopVideoHolder {
+                    position: relative;
+                    max-width: 100%;
+                    overflow: hidden;
+                }
+    
+                .videoWrapper {
+                    position: relative;
+                    width: 100%;
+                    aspect-ratio: 16 / 9;
+                }
+                .desktopVideo {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                    display: block;
+                }
+                .desktopRectangle {
+                    position: absolute;
+                    top: 5%;
+                    left: 5%;
+                    right: 5%;
+                    bottom: 5%;
+                    border-radius: 30px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    z-index: 3;
+                }
+    
+                .dashedRectangle {
+                    border: 5px dashed #5078bb;
+                }
+    
+                .solidRectangle {
+                    border: 5px solid #5078bb;
+                }
+    
+                .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: #5078bb;
+                }
+            </style>
+        `;
   }
 }
 let EXTRACTION_VIDEO = undefined;

package/package.json

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