scandoc-ai-components 0.0.74 → 0.0.76

package/dist/index.js

@@ -11365,6 +11365,10 @@ class ExtractorVideo {
       await this.video.play().catch(e => {
         console.warn(`Error on video play: ${e}`);
       });
+      this.video.addEventListener('loadeddata', () => {
+        this.adjustOverlayPosition();
+      });
+      window.addEventListener('resize', () => this.adjustOverlayPosition());
       this.scanStartTime = Date.now(); // Reset timer
       setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
       this.showMessage("Starting scanning");
@@ -11397,6 +11401,28 @@ class ExtractorVideo {
       messageElement.innerText = message;
     }
   }
+  adjustOverlayPosition() {
+    const video = this.video;
+    const overlay = document.querySelector(".desktopRectangle");
+    if (!video || !overlay || video.videoWidth === 0 || video.videoHeight === 0) return;
+    const videoRatio = video.videoWidth / video.videoHeight;
+    const container = video.parentElement;
+    const containerRatio = container.clientWidth / container.clientHeight;
+    let scaleWidth, scaleHeight;
+    if (videoRatio > containerRatio) {
+      scaleWidth = container.clientWidth;
+      scaleHeight = container.clientWidth / videoRatio;
+    } else {
+      scaleHeight = container.clientHeight;
+      scaleWidth = container.clientHeight * videoRatio;
+    }
+    const offsetX = (container.clientWidth - scaleWidth) / 2;
+    const offsetY = (container.clientHeight - scaleHeight) / 2;
+    overlay.style.left = `${offsetX + scaleWidth * 0.05}px`;
+    overlay.style.top = `${offsetY + scaleHeight * 0.05}px`;
+    overlay.style.width = `${scaleWidth * 0.90}px`;
+    overlay.style.height = `${scaleHeight * 0.90}px`;
+  }
   getHTML() {
     const cfgValues = (0,_config__WEBPACK_IMPORTED_MODULE_1__.getScanDocAIConfigValues)();
     const borderColor = cfgValues.VIDEO_COLORS?.borderColor;
@@ -11440,7 +11466,6 @@ class ExtractorVideo {
 
                 .desktopRectangle {
 					position: absolute;
-					top: 5%; left: 5%; right: 5%; bottom: 5%;
 					border: 5px dashed ${borderColor};
 					border-radius: 30px;
 					pointer-events: none;
@@ -11466,7 +11491,7 @@ class ExtractorVideo {
                     min-height: 36px;
                     justify-content: center;
                     align-items: center;
-                    color: #${messageColor};
+                    color: ${messageColor};
                 }
             </style>
         `;

package/package.json

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