@uxbertlabs/reportly 1.0.23 → 1.0.24

package/dist/features/screenshot.d.ts

@@ -1,12 +1,41 @@
 declare class Screenshot {
     private currentScreenshot;
+    private captureDelay;
     constructor();
+    /**
+     * Wait for specified milliseconds
+     */
     private wait;
+    /**
+     * Wait for animations to complete and DOM to stabilize
+     */
+    private waitForStability;
+    /**
+     * Wait for all images to finish loading
+     */
+    private waitForImages;
+    /**
+     * Wait for fonts to load
+     */
+    private waitForFonts;
+    /**
+     * Force a reflow to ensure styles are applied
+     */
+    private forceReflow;
     capture(mode?: "viewport" | "fullpage"): Promise<string>;
     private hideUXbertElements;
     private showUXbertElements;
     private showLoadingScreen;
     private hideLoadingScreen;
+    /**
+     * Set the delay before capture in milliseconds
+     * @param ms - Delay in milliseconds (default: 500)
+     */
+    setCaptureDelay(ms: number): void;
+    /**
+     * Get the current capture delay
+     */
+    getCaptureDelay(): number;
     getScreenshot(): string | null;
     clear(): void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"screenshot.d.ts","sourceRoot":"","sources":["../../src/features/screenshot.ts"],"names":[],"mappings":"AAGA,cAAM,UAAU;IACd,OAAO,CAAC,iBAAiB,CAAgB;;IAKzC,OAAO,CAAC,IAAI;IAGN,OAAO,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,OAAO,CAAC,MAAM,CAAC;IA8H1E,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,iBAAiB;IA6DzB,OAAO,CAAC,iBAAiB;IAOzB,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":"AAGA,cAAM,UAAU;IACd,OAAO,CAAC,iBAAiB,CAAgB;IACzC,OAAO,CAAC,YAAY,CAAe;;IAMnC;;OAEG;IACH,OAAO,CAAC,IAAI;IAIZ;;OAEG;YACW,gBAAgB;IAc9B;;OAEG;YACW,aAAa;IAgB3B;;OAEG;YACW,YAAY;IAc1B;;OAEG;IACH,OAAO,CAAC,WAAW;IAKb,OAAO,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,OAAO,CAAC,MAAM,CAAC;IA4M1E,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,aAAa,IAAI,MAAM,GAAG,IAAI;IAI9B,KAAK,IAAI,IAAI;CAGd;AAED,eAAe,UAAU,CAAC"}

package/dist/index.cjs.js

@@ -9301,51 +9301,144 @@ var parseBackgroundColor = function (context, element, backgroundColorOverride)
 // Screenshot capture using html2canvas
 class Screenshot {
   constructor() {
+    this.captureDelay = 500; // Default delay before capture
     this.currentScreenshot = null;
   }
+  /**
+   * Wait for specified milliseconds
+   */
   wait(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
+  /**
+   * Wait for animations to complete and DOM to stabilize
+   */
+  async waitForStability() {
+    // Wait for initial stabilization
+    await this.wait(this.captureDelay);
+    // Wait for images to load
+    await this.waitForImages();
+    // Wait for fonts to load
+    await this.waitForFonts();
+    // Additional short wait for any final rendering
+    await this.wait(100);
+  }
+  /**
+   * Wait for all images to finish loading
+   */
+  async waitForImages() {
+    const images = Array.from(document.images);
+    const imagePromises = images.map(img => {
+      if (img.complete) {
+        return Promise.resolve();
+      }
+      return new Promise(resolve => {
+        img.addEventListener('load', () => resolve(), {
+          once: true
+        });
+        img.addEventListener('error', () => resolve(), {
+          once: true
+        });
+        // Timeout after 3 seconds for slow images
+        setTimeout(() => resolve(), 3000);
+      });
+    });
+    await Promise.all(imagePromises);
+  }
+  /**
+   * Wait for fonts to load
+   */
+  async waitForFonts() {
+    if ('fonts' in document) {
+      try {
+        await Promise.race([document.fonts.ready, this.wait(1000) // Timeout after 1 second
+        ]);
+      } catch (e) {
+        // Font loading failed, continue anyway
+        console.warn('Font loading check failed:', e);
+      }
+    }
+  }
+  /**
+   * Force a reflow to ensure styles are applied
+   */
+  forceReflow() {
+    // Reading offsetHeight forces a reflow
+    document.body.offsetHeight;
+  }
   async capture(mode = "fullpage") {
     try {
-      // Hide UXbert UI elements before capturing
+      // Show loading screen immediately (before hiding UI)
+      this.showLoadingScreen();
+      // Wait for DOM to stabilize, animations to complete, and assets to load
+      await this.waitForStability();
+      // Hide loading screen and UXbert UI elements BEFORE capturing
+      this.hideLoadingScreen();
       this.hideUXbertElements();
+      // Force a reflow to ensure all styles are computed
+      this.forceReflow();
       const originalScrollY = window.scrollY;
       let canvas;
       if (mode === "viewport") {
         // Capture only the current viewport
         canvas = await html2canvas(document.body, {
-          //  foreignObjectRendering: true,
           useCORS: true,
           allowTaint: false,
-          logging: true,
+          logging: false,
           width: window.innerWidth,
           height: window.innerHeight,
           windowWidth: window.innerWidth,
           windowHeight: window.innerHeight,
           x: window.scrollX,
           y: window.scrollY,
-          onclone: async () => {
-            // Show loading screen after clone (won't appear in screenshot)
-            this.showLoadingScreen();
-            // Wait 1 second after cloning to let animations complete
-            await this.wait(1000);
+          // Improved rendering options
+          backgroundColor: null,
+          imageTimeout: 5000,
+          removeContainer: true,
+          scale: window.devicePixelRatio || 1,
+          onclone: clonedDoc => {
+            // Ensure all styles are applied in the cloned document
+            const clonedBody = clonedDoc.body;
+            // Force all animations to their final state
+            const animatedElements = clonedBody.querySelectorAll('*');
+            animatedElements.forEach(el => {
+              const element = el;
+              // Pause all animations
+              element.style.animationPlayState = 'paused';
+              element.style.animationDelay = '-9999s';
+              element.style.animationIterationCount = '1';
+              // 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';
+            });
           },
           ignoreElements: element => {
+            // Ignore loading screen by ID
+            if (element.id === 'uxbert-screenshot-loading') {
+              return true;
+            }
+            // Ignore Uxbert elements
+            if (element.getAttribute('data-uxbert-reportly') !== null || element.className?.toString().includes('uxbert-') || element.id?.includes('uxbert-')) {
+              return true;
+            }
             // Skip cross-origin images that might cause issues
             if (element.tagName === "IMG") {
               const img = element;
               try {
                 // Test if image is accessible
-                const canvas = document.createElement("canvas");
-                const ctx = canvas.getContext("2d");
-                canvas.width = 1;
-                canvas.height = 1;
+                const testCanvas = document.createElement("canvas");
+                const ctx = testCanvas.getContext("2d");
+                testCanvas.width = 1;
+                testCanvas.height = 1;
                 ctx?.drawImage(img, 0, 0, 1, 1);
-                canvas.toDataURL(); // This will throw if tainted
+                testCanvas.toDataURL();
                 return false; // Include the image
               } catch (e) {
-                // Image is tainted, skip it
                 console.warn("Skipping cross-origin image:", img.src);
                 return true;
               }
@@ -9356,6 +9449,8 @@ class Screenshot {
       } else {
         // Scroll to top to capture full page
         window.scrollTo(0, 0);
+        // Wait a bit for scroll to settle
+        await this.wait(100);
         // Get full page dimensions
         const fullPageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
         const fullPageWidth = Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);
@@ -9366,25 +9461,56 @@ class Screenshot {
           logging: false,
           width: fullPageWidth,
           height: fullPageHeight,
-          onclone: async () => {
-            // Show loading screen after clone (won't appear in screenshot)
-            this.showLoadingScreen();
+          windowWidth: fullPageWidth,
+          windowHeight: fullPageHeight,
+          // Improved rendering options
+          backgroundColor: null,
+          imageTimeout: 5000,
+          removeContainer: true,
+          scale: window.devicePixelRatio || 1,
+          onclone: clonedDoc => {
+            // Ensure all styles are applied in the cloned document
+            const clonedBody = clonedDoc.body;
+            // Force all animations to their final state
+            const animatedElements = clonedBody.querySelectorAll('*');
+            animatedElements.forEach(el => {
+              const element = el;
+              // Pause all animations at their end state
+              element.style.animationPlayState = 'paused';
+              element.style.animationDelay = '-9999s';
+              element.style.animationIterationCount = '1';
+              // 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';
+            });
           },
           ignoreElements: element => {
+            // Ignore loading screen by ID
+            if (element.id === 'uxbert-screenshot-loading') {
+              return true;
+            }
+            // Ignore Uxbert elements
+            if (element.getAttribute('data-uxbert-reportly') !== null || element.className?.toString().includes('uxbert-') || element.id?.includes('uxbert-')) {
+              return true;
+            }
             // Skip cross-origin images that might cause issues
             if (element.tagName === "IMG") {
               const img = element;
               try {
                 // Test if image is accessible
-                const canvas = document.createElement("canvas");
-                const ctx = canvas.getContext("2d");
-                canvas.width = 1;
-                canvas.height = 1;
+                const testCanvas = document.createElement("canvas");
+                const ctx = testCanvas.getContext("2d");
+                testCanvas.width = 1;
+                testCanvas.height = 1;
                 ctx?.drawImage(img, 0, 0, 1, 1);
-                canvas.toDataURL(); // This will throw if tainted
+                testCanvas.toDataURL();
                 return false; // Include the image
               } catch (e) {
-                // Image is tainted, skip it
                 console.warn("Skipping cross-origin image:", img.src);
                 return true;
               }
@@ -9397,15 +9523,13 @@ class Screenshot {
       }
       // Show UXbert UI elements again
       this.showUXbertElements();
-      // Hide loading screen
-      this.hideLoadingScreen();
       // Convert to base64
       this.currentScreenshot = canvas.toDataURL("image/png");
       return this.currentScreenshot;
     } catch (error) {
       console.error("Screenshot capture failed:", error);
-      this.showUXbertElements();
       this.hideLoadingScreen();
+      this.showUXbertElements();
       throw error;
     }
   }
@@ -9489,6 +9613,19 @@ class Screenshot {
       loadingOverlay.remove();
     }
   }
+  /**
+   * Set the delay before capture in milliseconds
+   * @param ms - Delay in milliseconds (default: 500)
+   */
+  setCaptureDelay(ms) {
+    this.captureDelay = Math.max(0, Math.min(ms, 5000)); // Clamp between 0-5000ms
+  }
+  /**
+   * Get the current capture delay
+   */
+  getCaptureDelay() {
+    return this.captureDelay;
+  }
   getScreenshot() {
     return this.currentScreenshot;
   }