@uxbertlabs/reportly 1.0.23 → 1.0.24

package/dist/index.esm.js

@@ -9297,51 +9297,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;
               }
@@ -9352,6 +9445,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);
@@ -9362,25 +9457,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;
               }
@@ -9393,15 +9519,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;
     }
   }
@@ -9485,6 +9609,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;
   }