feedback-vos 1.0.45 → 1.0.47

package/dist/index.mjs

@@ -393,62 +393,76 @@ function ScreenshotButton({
   const [tempScreenshot, setTempScreenshot] = useState(null);
   const themeClasses = getThemeClasses(theme);
   async function handleTakeScreenshot() {
-    setIsTakenScreenShot(true);
-    const canvas = await html2canvas(document.body, {
-      width: window.innerWidth,
-      height: window.innerHeight,
-      windowWidth: window.innerWidth,
-      windowHeight: window.innerHeight,
-      scrollX: -window.scrollX,
-      scrollY: -window.scrollY,
-      scale: 1,
-      // Use scale 1 for consistent sizing
-      useCORS: true,
-      allowTaint: true,
-      // Allow external images for better rendering
-      backgroundColor: null,
-      // Preserve page background
-      removeContainer: false,
-      // Maintain proper container rendering
-      logging: false,
-      ignoreElements: (element) => {
-        return element.hasAttribute("data-feedback-widget") || element.closest("[data-feedback-widget]") !== null;
+    try {
+      setIsTakenScreenShot(true);
+      const canvas = await html2canvas(document.body, {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight,
+        scrollX: -window.scrollX,
+        scrollY: -window.scrollY,
+        scale: 1,
+        // Use scale 1 for consistent sizing
+        useCORS: true,
+        allowTaint: true,
+        // Allow external images for better rendering
+        backgroundColor: null,
+        // Preserve page background
+        removeContainer: false,
+        // Maintain proper container rendering
+        logging: false,
+        ignoreElements: (element) => {
+          const isWidget = element.hasAttribute("data-feedback-widget") || element.closest("[data-feedback-widget]") !== null;
+          if (isWidget) return true;
+          if (element.tagName === "IMG" || element.tagName === "CANVAS" || element.tagName === "VIDEO") {
+            const rect = element.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) return true;
+          }
+          return false;
+        }
+      });
+      if (canvas.width === 0 || canvas.height === 0) {
+        console.warn("Screenshot failed: Captured canvas has 0 width or height");
+        return;
       }
-    });
-    const isMobile = window.innerWidth < 768;
-    const targetWidth = isMobile ? 1080 : 1920;
-    const targetHeight = isMobile ? 1920 : 1080;
-    const normalizedCanvas = document.createElement("canvas");
-    normalizedCanvas.width = targetWidth;
-    normalizedCanvas.height = targetHeight;
-    const ctx = normalizedCanvas.getContext("2d");
-    if (!ctx) {
+      const isMobile = window.innerWidth < 768;
+      const targetWidth = isMobile ? 1080 : 1920;
+      const targetHeight = isMobile ? 1920 : 1080;
+      const normalizedCanvas = document.createElement("canvas");
+      normalizedCanvas.width = targetWidth;
+      normalizedCanvas.height = targetHeight;
+      const ctx = normalizedCanvas.getContext("2d");
+      if (!ctx) {
+        return;
+      }
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = "high";
+      const sourceAspect = canvas.width / canvas.height;
+      const targetAspect = targetWidth / targetHeight;
+      let drawWidth = targetWidth;
+      let drawHeight = targetHeight;
+      let drawX = 0;
+      let drawY = 0;
+      if (sourceAspect > targetAspect) {
+        drawHeight = targetHeight;
+        drawWidth = drawHeight * sourceAspect;
+        drawX = (targetWidth - drawWidth) / 2;
+      } else {
+        drawWidth = targetWidth;
+        drawHeight = drawWidth / sourceAspect;
+        drawY = (targetHeight - drawHeight) / 2;
+      }
+      ctx.fillStyle = "#ffffff";
+      ctx.fillRect(0, 0, targetWidth, targetHeight);
+      ctx.drawImage(canvas, drawX, drawY, drawWidth, drawHeight);
+      const base64image = normalizedCanvas.toDataURL("image/png", 1);
+      onScreenshotTook(base64image);
+    } catch (error) {
+      console.error("Failed to take screenshot:", error);
+    } finally {
       setIsTakenScreenShot(false);
-      return;
-    }
-    ctx.imageSmoothingEnabled = true;
-    ctx.imageSmoothingQuality = "high";
-    const sourceAspect = canvas.width / canvas.height;
-    const targetAspect = targetWidth / targetHeight;
-    let drawWidth = targetWidth;
-    let drawHeight = targetHeight;
-    let drawX = 0;
-    let drawY = 0;
-    if (sourceAspect > targetAspect) {
-      drawHeight = targetHeight;
-      drawWidth = drawHeight * sourceAspect;
-      drawX = (targetWidth - drawWidth) / 2;
-    } else {
-      drawWidth = targetWidth;
-      drawHeight = drawWidth / sourceAspect;
-      drawY = (targetHeight - drawHeight) / 2;
     }
-    ctx.fillStyle = "#ffffff";
-    ctx.fillRect(0, 0, targetWidth, targetHeight);
-    ctx.drawImage(canvas, drawX, drawY, drawWidth, drawHeight);
-    const base64image = normalizedCanvas.toDataURL("image/png", 1);
-    onScreenshotTook(base64image);
-    setIsTakenScreenShot(false);
   }
   function handleEditorSave(editedScreenshot) {
     onScreenshotTook(editedScreenshot);