feedback-vos 1.0.39 → 1.0.41

package/dist/index.mjs

@@ -265,8 +265,21 @@ function ScreenshotEditor({
     const editedScreenshot = canvas.toDataURL("image/png");
     onSave(editedScreenshot);
   };
-  const maxWidth = 600;
-  const displayWidth = image ? Math.min(maxWidth, image.width) : maxWidth;
+  const [maxDisplayWidth, setMaxDisplayWidth] = useState(600);
+  useEffect(() => {
+    const updateMaxWidth = () => {
+      if (window.innerWidth >= 768) {
+        const availableWidth = window.innerWidth * 0.9 - 64;
+        setMaxDisplayWidth(Math.max(1200, Math.min(availableWidth, 1600)));
+      } else {
+        setMaxDisplayWidth(600);
+      }
+    };
+    updateMaxWidth();
+    window.addEventListener("resize", updateMaxWidth);
+    return () => window.removeEventListener("resize", updateMaxWidth);
+  }, []);
+  const displayWidth = image ? Math.min(maxDisplayWidth, image.width) : maxDisplayWidth;
   const displayHeight = image ? displayWidth / image.width * image.height : 400;
   return /* @__PURE__ */ jsx("div", { className: `fixed inset-0 z-50 flex items-center justify-center ${themeClasses.overlay} p-2 md:p-4`, children: /* @__PURE__ */ jsxs("div", { className: `${themeClasses.bgSecondary} rounded-lg shadow-xl max-w-4xl w-full max-h-[95vh] md:max-h-[90vh] overflow-auto`, children: [
     /* @__PURE__ */ jsxs("div", { className: `sticky top-0 ${themeClasses.bgSecondary} border-b ${themeClasses.borderPrimary} p-2 md:p-4 flex items-center justify-between z-10 gap-2`, children: [
@@ -384,21 +397,55 @@ function ScreenshotButton({
     const canvas = await html2canvas(document.body, {
       width: window.innerWidth,
       height: window.innerHeight,
-      scrollX: -window.scrollX,
-      scrollY: -window.scrollY,
       windowWidth: window.innerWidth,
       windowHeight: window.innerHeight,
-      scale: window.devicePixelRatio || 1,
-      // Use device pixel ratio for better quality
+      scrollX: -window.scrollX,
+      scrollY: -window.scrollY,
+      scale: 1,
+      // Use scale 1 for consistent sizing
       useCORS: true,
-      // Enable CORS for better image rendering
+      allowTaint: true,
+      // Allow external images for better rendering
+      backgroundColor: null,
+      // Preserve page background
+      removeContainer: false,
+      // Maintain proper container rendering
       logging: false,
-      // Disable logging for cleaner output
       ignoreElements: (element) => {
         return element.hasAttribute("data-feedback-widget") || element.closest("[data-feedback-widget]") !== null;
       }
     });
-    const base64image = canvas.toDataURL("image/png", 1);
+    const targetWidth = 1920;
+    const targetHeight = 1080;
+    const normalizedCanvas = document.createElement("canvas");
+    normalizedCanvas.width = targetWidth;
+    normalizedCanvas.height = targetHeight;
+    const ctx = normalizedCanvas.getContext("2d");
+    if (!ctx) {
+      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);
   }
@@ -748,7 +795,7 @@ async function uploadFileToRepo(token, owner, repo, file, folderPath, defaultBra
   return rawUrl;
 }
 async function uploadScreenshotToRepo(token, owner, repo, screenshot, screenshotPath) {
-  const compressedScreenshot = await compressScreenshot(screenshot, 2560, 0.9);
+  const compressedScreenshot = await compressScreenshot(screenshot, 1920, 0.85);
   const base64Content = compressedScreenshot.includes(",") ? compressedScreenshot.split(",")[1] : compressedScreenshot;
   const repoResponse = await fetch(
     `https://api.github.com/repos/${owner}/${repo}`,
@@ -850,7 +897,7 @@ async function uploadScreenshotToRepo(token, owner, repo, screenshot, screenshot
   console.log(`Screenshot uploaded successfully to: ${rawUrl}`);
   return rawUrl;
 }
-function compressScreenshot(dataUrl, maxWidth = 2560, quality = 0.9) {
+function compressScreenshot(dataUrl, maxWidth = 1920, quality = 0.85) {
   return new Promise((resolve, reject) => {
     if (typeof window === "undefined" || typeof document === "undefined") {
       reject(new Error("Screenshot compression only works in browser environments"));
@@ -865,9 +912,8 @@ function compressScreenshot(dataUrl, maxWidth = 2560, quality = 0.9) {
         height = height * maxWidth / width;
         width = maxWidth;
       }
-      const dpr = window.devicePixelRatio || 1;
-      canvas.width = width * dpr;
-      canvas.height = height * dpr;
+      canvas.width = width;
+      canvas.height = height;
       const ctx = canvas.getContext("2d");
       if (!ctx) {
         reject(new Error("Could not get canvas context"));
@@ -875,7 +921,6 @@ function compressScreenshot(dataUrl, maxWidth = 2560, quality = 0.9) {
       }
       ctx.imageSmoothingEnabled = true;
       ctx.imageSmoothingQuality = "high";
-      ctx.scale(dpr, dpr);
       ctx.drawImage(img, 0, 0, width, height);
       const compressedDataUrl = canvas.toDataURL("image/jpeg", quality);
       resolve(compressedDataUrl);