@uxbertlabs/reportly 1.0.32 → 1.0.33

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useReducer, useMemo, useCallback, createContext, useContext, forwardRef, createElement, useState, useRef, useEffect } from 'react';
+import React, { useReducer, useMemo, useRef, useEffect, useCallback, createContext, useContext, forwardRef, createElement, useState } from 'react';
 
 class DeviceInfo {
   constructor() {
@@ -9303,6 +9303,12 @@ class Screenshot {
     this.quality = 0.95; // Default quality for JPEG/WebP
     this.format = "png"; // Default format
     this.currentScreenshot = null;
+    console.log("Screenshot module initialized", {
+      hooks,
+      captureDelay,
+      quality,
+      format
+    });
     if (hooks) this.hooks = hooks;
     if (captureDelay !== undefined) this.captureDelay = captureDelay;
     if (quality !== undefined) this.quality = quality;
@@ -9666,6 +9672,13 @@ class Screenshot {
       ...this.hooks,
       ...hooks
     };
+    console.log("[Screenshot] Hooks updated:", {
+      hasBeforeCapture: !!this.hooks.beforeCapture,
+      hasAfterCapture: !!this.hooks.afterCapture,
+      hasOnCaptureStart: !!this.hooks.onCaptureStart,
+      hasOnCaptureComplete: !!this.hooks.onCaptureComplete,
+      hasOnCaptureError: !!this.hooks.onCaptureError
+    });
   }
   /**
    * Get current hooks configuration
@@ -9697,11 +9710,6 @@ class Screenshot {
   }
 }
 
-var screenshot = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: Screenshot
-});
-
 const initialState = {
   isOpen: false,
   isAnnotating: false,
@@ -9812,7 +9820,30 @@ function ReportlyProvider({
   // Initialize services with useMemo to ensure they're only created once and support SSR
   const deviceInfo = useMemo(() => new DeviceInfo(), []);
   const exportService = useMemo(() => new Export(config.integrations?.n8n), [config.integrations?.n8n]);
-  const screenshot = useMemo(() => new Screenshot(config.screenshot?.hooks, config.screenshot?.captureDelay, config.screenshot?.quality, config.screenshot?.format), [config.screenshot?.hooks, config.screenshot?.captureDelay, config.screenshot?.quality, config.screenshot?.format]);
+  // Use ref for Screenshot to prevent recreation on config changes
+  const screenshotRef = useRef(null);
+  // Initialize Screenshot once
+  if (screenshotRef.current === null) {
+    screenshotRef.current = new Screenshot(config.screenshot?.hooks, config.screenshot?.captureDelay, config.screenshot?.quality, config.screenshot?.format);
+  }
+  // Update Screenshot configuration when config changes
+  useEffect(() => {
+    if (screenshotRef.current) {
+      if (config.screenshot?.hooks) {
+        screenshotRef.current.setHooks(config.screenshot.hooks);
+      }
+      if (config.screenshot?.captureDelay !== undefined) {
+        screenshotRef.current.setCaptureDelay(config.screenshot.captureDelay);
+      }
+      if (config.screenshot?.quality !== undefined) {
+        screenshotRef.current.setQuality(config.screenshot.quality);
+      }
+      if (config.screenshot?.format) {
+        screenshotRef.current.setFormat(config.screenshot.format);
+      }
+    }
+  }, [config.screenshot?.hooks, config.screenshot?.captureDelay, config.screenshot?.quality, config.screenshot?.format]);
+  const screenshot = screenshotRef.current;
   const openModal = useCallback(() => {
     dispatch({
       type: "OPEN_MODAL"
@@ -9968,6 +9999,7 @@ function ReportlyProvider({
   }, [annotationManager]);
   const contextValue = {
     state,
+    screenshot,
     annotationManager,
     setAnnotationManager: setAnnotationManagerState,
     openModal,
@@ -10009,7 +10041,7 @@ function cn(...inputs) {
 
 function Butterfly({
   width = "100%",
-  height = "auto",
+  height = "100%",
   className = "",
   style = {}
 }) {
@@ -10056,7 +10088,8 @@ function FloatingButton({
   }, /*#__PURE__*/React.createElement(Butterfly, {
     style: {
       color: "currentColor",
-      width: "40px"
+      width: "40px",
+      height: "40px"
     }
   }));
 }
@@ -10374,7 +10407,7 @@ const X = createLucideIcon("x", __iconNode);
 
 function AminahUXbertLogo({
   width = "100%",
-  height = "auto",
+  height = "100%",
   className = ""
 }) {
   return /*#__PURE__*/React.createElement("svg", {
@@ -10844,7 +10877,7 @@ function IssueModal({
 
 function AminahLogo({
   width = "100%",
-  height = "auto",
+  height = "100%",
   className = ""
 }) {
   return /*#__PURE__*/React.createElement("svg", {
@@ -11640,6 +11673,7 @@ class AnnotationManager {
 function ReportlyInner() {
   const {
     state,
+    screenshot,
     endAnnotation,
     updateScreenshot,
     setAnnotationManager
@@ -11685,15 +11719,13 @@ function ReportlyInner() {
   const handleDone = async () => {
     if (!annotationRef.current) return;
     try {
-      const Screenshot = (await Promise.resolve().then(function () { return screenshot; })).default;
       // Use the current mode from annotation manager (it has auto-adjusted based on drawing location)
       const captureMode = annotationRef.current.getCurrentMode();
       console.log('Using capture mode from annotation manager:', captureMode);
       // Hide the annotation canvas temporarily
       annotationRef.current.hide();
-      // Capture the screenshot
-      const screenshotService = new Screenshot();
-      const baseScreenshot = await screenshotService.capture(captureMode);
+      // Capture the screenshot using the configured screenshot instance from context
+      const baseScreenshot = await screenshot.capture(captureMode);
       // Export the annotated screenshot (combine base screenshot + annotations)
       // Pass the capture mode so annotations can be positioned correctly
       const annotatedScreenshot = await annotationRef.current.exportAnnotatedScreenshot(baseScreenshot, captureMode);