scandoc-ai-components 0.0.75 → 0.0.77

package/dist/index.js

@@ -11365,6 +11365,11 @@ 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());
+      setTimeout(() => this.adjustOverlayPosition(), 500);
       this.scanStartTime = Date.now(); // Reset timer
       setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
       this.showMessage("Starting scanning");
@@ -11397,6 +11402,32 @@ 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;
+    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`;
+  }
   getHTML() {
     const cfgValues = (0,_config__WEBPACK_IMPORTED_MODULE_1__.getScanDocAIConfigValues)();
     const borderColor = cfgValues.VIDEO_COLORS?.borderColor;
@@ -11440,7 +11471,6 @@ class ExtractorVideo {
 
                 .desktopRectangle {
 					position: absolute;
-					top: 5%; left: 5%; right: 5%; bottom: 5%;
 					border: 5px dashed ${borderColor};
 					border-radius: 30px;
 					pointer-events: none;

package/package.json

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