@uxbertlabs/reportly 1.0.35 → 1.0.36

package/dist/features/screenshot.d.ts

@@ -15,17 +15,9 @@ declare class Screenshot {
      */
     private waitForStability;
     /**
-     * Wait for CSS animations and transitions to complete
-     */
-    private waitForAnimations;
-    /**
-     * Wait for all images to finish loading, including lazy-loaded images
+     * Wait for visible images to finish loading (no page scrolling to avoid annotation misalignment)
      */
     private waitForImages;
-    /**
-     * Trigger lazy-loading by briefly scrolling through the page
-     */
-    private triggerLazyLoading;
     /**
      * Wait for fonts to load
      */

package/dist/features/screenshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screenshot.d.ts","sourceRoot":"","sources":["../../src/features/screenshot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAC;AAEvE,cAAM,UAAU;IACd,OAAO,CAAC,iBAAiB,CAAgB;IACzC,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,MAAM,CAAkC;gBAEpC,KAAK,CAAC,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM;IAS9G;;OAEG;IACH,OAAO,CAAC,IAAI;IAIZ;;OAEG;YACW,gBAAgB;IAqB9B;;OAEG;YACW,iBAAiB;IAwC/B;;OAEG;YACW,aAAa;IA2C3B;;OAEG;YACW,kBAAkB;IAuChC;;OAEG;YACW,YAAY;IAc1B;;OAEG;IACH,OAAO,CAAC,WAAW;IAKb,OAAO,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,OAAO,CAAC,MAAM,CAAC;IAuO1E,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,iBAAiB;IA6DzB,OAAO,CAAC,iBAAiB;IAOzB;;;OAGG;IACH,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAIjC;;OAEG;IACH,eAAe,IAAI,MAAM;IAIzB;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI;IAWtC;;OAEG;IACH,QAAQ,IAAI,eAAe;IAI3B;;;OAGG;IACH,SAAS,CAAC,MAAM,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;IAIhD;;;OAGG;IACH,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIjC,aAAa,IAAI,MAAM,GAAG,IAAI;IAI9B,KAAK,IAAI,IAAI;CAGd;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"screenshot.d.ts","sourceRoot":"","sources":["../../src/features/screenshot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAC;AAEvE,cAAM,UAAU;IACd,OAAO,CAAC,iBAAiB,CAAgB;IACzC,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,MAAM,CAAkC;gBAEpC,KAAK,CAAC,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM;IAS9G;;OAEG;IACH,OAAO,CAAC,IAAI;IAIZ;;OAEG;YACW,gBAAgB;IAmB9B;;OAEG;YACW,aAAa;IA+C3B;;OAEG;YACW,YAAY;IAc1B;;OAEG;IACH,OAAO,CAAC,WAAW;IAKb,OAAO,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,OAAO,CAAC,MAAM,CAAC;IA0Q1E,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,iBAAiB;IA6DzB,OAAO,CAAC,iBAAiB;IAOzB;;;OAGG;IACH,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAIjC;;OAEG;IACH,eAAe,IAAI,MAAM;IAIzB;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI;IAWtC;;OAEG;IACH,QAAQ,IAAI,eAAe;IAI3B;;;OAGG;IACH,SAAS,CAAC,MAAM,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;IAIhD;;;OAGG;IACH,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIjC,aAAa,IAAI,MAAM,GAAG,IAAI;IAI9B,KAAK,IAAI,IAAI;CAGd;AAED,eAAe,UAAU,CAAC"}

package/dist/index.cjs.js

@@ -9328,77 +9328,46 @@ class Screenshot {
    * Wait for animations to complete and DOM to stabilize
    */
   async waitForStability() {
-    console.log('⏳ Waiting for page stability...');
+    console.log("⏳ Waiting for page stability...");
     // Wait for initial stabilization
     await this.wait(this.captureDelay);
-    // Wait for images to load (includes lazy-load triggering)
+    // Wait for currently loading images (NO scrolling to avoid misalignment)
+    // The onclone callback will handle image src copying
     await this.waitForImages();
     // Wait for fonts to load
     await this.waitForFonts();
-    // Wait for any ongoing animations/transitions to complete
-    await this.waitForAnimations();
-    // Additional wait for final rendering and layout shifts
-    await this.wait(300);
-    console.log('✅ Page stabilized and ready for capture');
+    // Brief wait for final rendering
+    await this.wait(100);
+    console.log("✅ Page stabilized and ready for capture");
   }
   /**
-   * Wait for CSS animations and transitions to complete
-   */
-  async waitForAnimations() {
-    // Get all elements with animations or transitions
-    const elements = document.querySelectorAll('*');
-    const animationPromises = [];
-    elements.forEach(element => {
-      const styles = window.getComputedStyle(element);
-      // Check for animations
-      const animationDuration = parseFloat(styles.animationDuration || '0');
-      if (animationDuration > 0) {
-        animationPromises.push(new Promise(resolve => {
-          const timeout = Math.min(animationDuration * 1000, 2000); // Max 2 seconds
-          setTimeout(resolve, timeout);
-        }));
-      }
-      // Check for transitions
-      const transitionDuration = parseFloat(styles.transitionDuration || '0');
-      if (transitionDuration > 0) {
-        animationPromises.push(new Promise(resolve => {
-          const timeout = Math.min(transitionDuration * 1000, 2000); // Max 2 seconds
-          setTimeout(resolve, timeout);
-        }));
-      }
-    });
-    if (animationPromises.length > 0) {
-      console.log(`⏳ Waiting for ${animationPromises.length} animations/transitions...`);
-      await Promise.race([Promise.all(animationPromises), this.wait(2000) // Max 2 seconds total
-      ]);
-    }
-  }
-  /**
-   * Wait for all images to finish loading, including lazy-loaded images
+   * Wait for visible images to finish loading (no page scrolling to avoid annotation misalignment)
    */
   async waitForImages() {
-    // First, trigger lazy-loading by scrolling through the page
-    await this.triggerLazyLoading();
-    // Now wait for all images to load
     const images = Array.from(document.images);
-    console.log(`⏳ Waiting for ${images.length} images to load...`);
-    const imagePromises = images.map((img, index) => {
-      if (img.complete && img.naturalHeight !== 0) {
-        return Promise.resolve();
-      }
+    // Filter to only images that are currently loading
+    const loadingImages = images.filter(img => !img.complete || img.naturalHeight === 0);
+    if (loadingImages.length === 0) {
+      console.log("✅ All visible images already loaded");
+      return;
+    }
+    console.log(`⏳ Waiting for ${loadingImages.length} loading images...`);
+    const imagePromises = loadingImages.map(img => {
       return new Promise(resolve => {
-        const startTime = Date.now();
+        if (img.complete && img.naturalHeight !== 0) {
+          resolve();
+          return;
+        }
         const onLoad = () => {
-          const loadTime = Date.now() - startTime;
-          console.log(`✅ Image ${index + 1} loaded in ${loadTime}ms:`, img.src.substring(0, 80));
+          console.log(`✅ Image loaded`);
           resolve();
         };
         const onError = () => {
-          console.warn(`❌ Image ${index + 1} failed to load:`, img.src.substring(0, 80));
-          resolve(); // Still resolve to not block other images
+          console.warn(`❌ Image failed to load`);
+          resolve(); // Still resolve to not block
         };
         const onTimeout = () => {
-          console.warn(`⏰ Image ${index + 1} timed out after 5s:`, img.src.substring(0, 80));
+          console.warn(`⏰ Image timed out after 2s`);
           resolve();
         };
         img.addEventListener("load", onLoad, {
@@ -9407,43 +9376,12 @@ class Screenshot {
         img.addEventListener("error", onError, {
           once: true
         });
-        // Increased timeout to 5 seconds for slow images
-        setTimeout(onTimeout, 5000);
+        // Shorter timeout - 2 seconds max
+        setTimeout(onTimeout, 2000);
       });
     });
     await Promise.all(imagePromises);
-    console.log(`✅ All ${images.length} images processed`);
-  }
-  /**
-   * Trigger lazy-loading by briefly scrolling through the page
-   */
-  async triggerLazyLoading() {
-    const originalScrollY = window.scrollY;
-    const originalScrollX = window.scrollX;
-    const pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
-    console.log(`📜 Triggering lazy-load for page height: ${pageHeight}px`);
-    // Scroll through the page in increments to trigger lazy-loading
-    const scrollIncrement = window.innerHeight;
-    const positions = [];
-    // Generate scroll positions (every viewport height)
-    for (let y = 0; y < pageHeight; y += scrollIncrement) {
-      positions.push(y);
-    }
-    // Add final position
-    if (positions[positions.length - 1] < pageHeight) {
-      positions.push(pageHeight);
-    }
-    // Quickly scroll to each position to trigger lazy-load
-    for (const position of positions) {
-      window.scrollTo(0, position);
-      // Small wait to let intersection observers fire
-      await this.wait(50);
-    }
-    // Scroll back to original position
-    window.scrollTo(originalScrollX, originalScrollY);
-    console.log(`✅ Lazy-load triggered, returned to position: ${originalScrollY}px`);
-    // Wait a bit for lazy-loaded images to start loading
-    await this.wait(200);
+    console.log(`✅ All ${loadingImages.length} images processed`);
   }
   /**
    * Wait for fonts to load
@@ -9504,7 +9442,8 @@ class Screenshot {
           y: window.scrollY,
           // Improved rendering options
           backgroundColor: null,
-          imageTimeout: 5000,
+          imageTimeout: 15000,
+          // Increased timeout for slow-loading images
           removeContainer: true,
           scale: window.devicePixelRatio || 1,
           onclone: clonedDoc => {
@@ -9521,11 +9460,25 @@ class Screenshot {
               // Disable transitions
               element.style.transition = "none";
             });
-            // Ensure lazy-loaded images are visible
-            const images = clonedBody.querySelectorAll("img");
-            images.forEach(img => {
-              img.style.opacity = "1";
-              img.style.visibility = "visible";
+            // Process images in the cloned document
+            const originalImages = document.body.querySelectorAll("img");
+            const clonedImages = clonedBody.querySelectorAll("img");
+            clonedImages.forEach((clonedImg, index) => {
+              const originalImg = originalImages[index];
+              if (originalImg) {
+                // Copy the current src from original to ensure it loads
+                clonedImg.src = originalImg.currentSrc || originalImg.src;
+                // Force visibility
+                clonedImg.style.opacity = "1";
+                clonedImg.style.visibility = "visible";
+                clonedImg.style.display = originalImg.style.display || "inline";
+                if (originalImg.width) clonedImg.width = originalImg.width;
+                if (originalImg.height) clonedImg.height = originalImg.height;
+                // Remove lazy loading attributes that might interfere
+                clonedImg.removeAttribute("loading");
+                clonedImg.removeAttribute("data-src");
+                clonedImg.removeAttribute("data-srcset");
+              }
             });
           },
           ignoreElements: element => {
@@ -9558,8 +9511,6 @@ class Screenshot {
           }
         });
       } else {
-        // Wait a bit for scroll to settle
-        await this.wait(1000);
         // Capture the full page
         canvas = await html2canvas(document.body, {
           useCORS: true,
@@ -9567,7 +9518,8 @@ class Screenshot {
           logging: false,
           // Improved rendering options
           backgroundColor: null,
-          imageTimeout: 5000,
+          imageTimeout: 15000,
+          // Increased timeout for slow-loading images
           removeContainer: true,
           scale: window.devicePixelRatio || 1,
           onclone: clonedDoc => {
@@ -9584,11 +9536,25 @@ class Screenshot {
               // Disable transitions
               element.style.transition = "none";
             });
-            // Ensure lazy-loaded images are visible
-            const images = clonedBody.querySelectorAll("img");
-            images.forEach(img => {
-              img.style.opacity = "1";
-              img.style.visibility = "visible";
+            // Process images in the cloned document
+            const originalImages = document.body.querySelectorAll("img");
+            const clonedImages = clonedBody.querySelectorAll("img");
+            clonedImages.forEach((clonedImg, index) => {
+              const originalImg = originalImages[index];
+              if (originalImg) {
+                // Copy the current src from original to ensure it loads
+                clonedImg.src = originalImg.currentSrc || originalImg.src;
+                // Force visibility
+                clonedImg.style.opacity = "1";
+                clonedImg.style.visibility = "visible";
+                clonedImg.style.display = originalImg.style.display || "inline";
+                if (originalImg.width) clonedImg.width = originalImg.width;
+                if (originalImg.height) clonedImg.height = originalImg.height;
+                // Remove lazy loading attributes that might interfere
+                clonedImg.removeAttribute("loading");
+                clonedImg.removeAttribute("data-src");
+                clonedImg.removeAttribute("data-srcset");
+              }
             });
           },
           ignoreElements: element => {