pdfjs-reader-core 0.5.4 → 0.5.6

package/dist/index.cjs

@@ -1863,6 +1863,129 @@ var init_page_turn_sound = __esm({
   }
 });
 
+// src/utils/mobile-config.ts
+function detectDeviceCapabilities() {
+  if (typeof window === "undefined") {
+    return {
+      isMobile: false,
+      isTouch: false,
+      devicePixelRatio: 1,
+      deviceMemory: null,
+      hardwareConcurrency: 4,
+      isLowEnd: false,
+      connectionType: "unknown",
+      screenSize: "large"
+    };
+  }
+  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  ) || window.matchMedia("(max-width: 768px)").matches;
+  const isTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+  const devicePixelRatio = window.devicePixelRatio || 1;
+  const deviceMemory = navigator.deviceMemory ?? null;
+  const hardwareConcurrency = navigator.hardwareConcurrency || 2;
+  const screenWidth = window.screen.width;
+  const screenSize = screenWidth < 640 ? "small" : screenWidth < 1024 ? "medium" : "large";
+  const connection = navigator.connection;
+  let connectionType = "unknown";
+  if (connection?.effectiveType) {
+    connectionType = ["slow-2g", "2g", "3g"].includes(connection.effectiveType) ? "slow" : "fast";
+  }
+  const isLowEnd = deviceMemory !== null && deviceMemory < 4 || hardwareConcurrency <= 2 || isMobile && devicePixelRatio > 2 && screenSize === "small";
+  return {
+    isMobile,
+    isTouch,
+    devicePixelRatio,
+    deviceMemory,
+    hardwareConcurrency,
+    isLowEnd,
+    connectionType,
+    screenSize
+  };
+}
+function getRenderConfig(quality = "auto", capabilities) {
+  const caps = capabilities ?? detectDeviceCapabilities();
+  if (quality === "auto") {
+    if (caps.isLowEnd) {
+      quality = "low";
+    } else if (caps.isMobile) {
+      quality = "medium";
+    } else {
+      quality = "high";
+    }
+  }
+  switch (quality) {
+    case "low":
+      return {
+        canvasScaleFactor: Math.min(1, caps.devicePixelRatio * 0.5),
+        maxCanvasDimension: 2048,
+        overscanPages: 1,
+        maxPagesInMemory: 3,
+        scrollDebounceMs: 100,
+        useLowResPreview: true,
+        fullResDelayMs: 300,
+        disableTextLayerOnScroll: true,
+        currentPagePriority: 10,
+        useIdleCallback: true,
+        maxConcurrentRenders: 1
+      };
+    case "medium":
+      return {
+        canvasScaleFactor: Math.min(1.5, caps.devicePixelRatio * 0.75),
+        maxCanvasDimension: 4096,
+        overscanPages: 2,
+        maxPagesInMemory: 5,
+        scrollDebounceMs: 50,
+        useLowResPreview: true,
+        fullResDelayMs: 150,
+        disableTextLayerOnScroll: true,
+        currentPagePriority: 5,
+        useIdleCallback: true,
+        maxConcurrentRenders: 2
+      };
+    case "high":
+    default:
+      return {
+        canvasScaleFactor: caps.devicePixelRatio,
+        maxCanvasDimension: 8192,
+        overscanPages: 3,
+        maxPagesInMemory: 10,
+        scrollDebounceMs: 16,
+        useLowResPreview: false,
+        fullResDelayMs: 0,
+        disableTextLayerOnScroll: false,
+        currentPagePriority: 1,
+        useIdleCallback: false,
+        maxConcurrentRenders: 4
+      };
+  }
+}
+function calculateOptimalCanvasDimensions(width, height, scaleFactor, maxDimension) {
+  let canvasWidth = Math.floor(width * scaleFactor);
+  let canvasHeight = Math.floor(height * scaleFactor);
+  let actualScale = scaleFactor;
+  if (canvasWidth > maxDimension || canvasHeight > maxDimension) {
+    const scaleToFit = Math.min(maxDimension / canvasWidth, maxDimension / canvasHeight);
+    canvasWidth = Math.floor(canvasWidth * scaleToFit);
+    canvasHeight = Math.floor(canvasHeight * scaleToFit);
+    actualScale = scaleFactor * scaleToFit;
+  }
+  return { width: canvasWidth, height: canvasHeight, actualScale };
+}
+function getDeviceCapabilities() {
+  if (!globalCapabilities) {
+    globalCapabilities = detectDeviceCapabilities();
+  }
+  return globalCapabilities;
+}
+var globalCapabilities;
+var init_mobile_config = __esm({
+  "src/utils/mobile-config.ts"() {
+    "use strict";
+    globalCapabilities = null;
+  }
+});
+
 // src/utils/camera-math.ts
 function fitPageScale(page, viewport) {
   const sx = viewport.width / page.width;
@@ -1917,6 +2040,7 @@ var init_utils = __esm({
     init_text_search();
     init_coordinates();
     init_page_turn_sound();
+    init_mobile_config();
   }
 });
 
@@ -7136,9 +7260,17 @@ var init_CanvasLayer = __esm({
           onRenderError?.(new Error("Failed to get canvas context"));
           return;
         }
-        const outputScale = window.devicePixelRatio || 1;
-        canvas.width = Math.floor(viewport.width * outputScale);
-        canvas.height = Math.floor(viewport.height * outputScale);
+        const capabilities = getDeviceCapabilities();
+        const renderConfig = getRenderConfig("auto", capabilities);
+        const optimal = calculateOptimalCanvasDimensions(
+          viewport.width,
+          viewport.height,
+          renderConfig.canvasScaleFactor,
+          renderConfig.maxCanvasDimension
+        );
+        const outputScale = optimal.actualScale;
+        canvas.width = optimal.width;
+        canvas.height = optimal.height;
         canvas.style.width = `${Math.floor(viewport.width)}px`;
         canvas.style.height = `${Math.floor(viewport.height)}px`;
         context.scale(outputScale, outputScale);
@@ -10936,39 +11068,53 @@ var init_PDFViewerClient = __esm({
       }, [viewerStore, annotationStore, searchStore]);
       const handleRetry = (0, import_react43.useCallback)(() => {
         srcIdRef.current = null;
+        if (abortControllerRef.current) {
+          abortControllerRef.current.abort();
+          abortControllerRef.current = null;
+        }
         viewerStore.getState().setError(null);
         setLoadState("idle");
       }, [viewerStore]);
       const abortControllerRef = (0, import_react43.useRef)(null);
       const currentSrcRef = (0, import_react43.useRef)(null);
+      const teardownTimerRef = (0, import_react43.useRef)(null);
       (0, import_react43.useEffect)(() => {
         mountedRef.current = true;
+        if (teardownTimerRef.current !== null) {
+          clearTimeout(teardownTimerRef.current);
+          teardownTimerRef.current = null;
+        }
         return () => {
-          mountedRef.current = false;
-          if (abortControllerRef.current) {
-            abortControllerRef.current.abort();
-            abortControllerRef.current = null;
-          }
-          if (currentSrcRef.current && typeof currentSrcRef.current === "string") {
-            clearDocumentCache(currentSrcRef.current);
-          }
-          srcIdRef.current = null;
-          currentSrcRef.current = null;
-          const currentDoc = viewerStore.getState().document;
-          if (currentDoc) {
-            try {
-              currentDoc.destroy();
-            } catch {
+          teardownTimerRef.current = setTimeout(() => {
+            teardownTimerRef.current = null;
+            mountedRef.current = false;
+            if (abortControllerRef.current) {
+              abortControllerRef.current.abort();
+              abortControllerRef.current = null;
             }
-          }
-          viewerStore.getState().setDocument(null);
-          viewerStore.getState().setLoading(false);
-          viewerStore.getState().setError(null);
+            if (currentSrcRef.current && typeof currentSrcRef.current === "string") {
+              clearDocumentCache(currentSrcRef.current);
+            }
+            srcIdRef.current = null;
+            currentSrcRef.current = null;
+            const currentDoc = viewerStore.getState().document;
+            if (currentDoc) {
+              try {
+                currentDoc.destroy();
+              } catch {
+              }
+            }
+            viewerStore.getState().setDocument(null);
+            viewerStore.getState().setLoading(false);
+            viewerStore.getState().setError(null);
+          }, 0);
         };
       }, [viewerStore]);
       const cancelLoaderRef = (0, import_react43.useRef)(null);
       (0, import_react43.useEffect)(() => {
-        if (srcIdRef.current === srcId && viewerStore.getState().document) {
+        const existingAC = abortControllerRef.current;
+        const loadInFlight = existingAC !== null && !existingAC.signal.aborted;
+        if (srcIdRef.current === srcId && (viewerStore.getState().document || loadInFlight)) {
           return;
         }
         const loadId = srcId;
@@ -11093,14 +11239,7 @@ var init_PDFViewerClient = __esm({
             onErrorRef.current?.(error2);
           }
         });
-        return () => {
-          abortController.abort();
-          if (cancelLoaderRef.current) {
-            cancelLoaderRef.current();
-            cancelLoaderRef.current = null;
-          }
-        };
-      }, [srcId, src, workerSrc, initialPage, initialScale, viewerStore]);
+      }, [srcId, workerSrc, initialPage, initialScale, viewerStore]);
       const prevPageRef = (0, import_react43.useRef)(currentPage);
       (0, import_react43.useEffect)(() => {
         if (prevPageRef.current !== currentPage) {
@@ -13136,6 +13275,7 @@ init_hooks();
 
 // src/components/TutorMode/CameraView.tsx
 var import_framer_motion = require("framer-motion");
+init_utils();
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function CameraView({
   camera,
@@ -13143,13 +13283,14 @@ function CameraView({
   durationMs = 700,
   className
 }) {
+  const isMobile = getDeviceCapabilities().isMobile;
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     import_framer_motion.motion.div,
     {
       className,
       style: {
         transformOrigin: "50% 50%",
-        willChange: "transform",
+        ...isMobile ? {} : { willChange: "transform" },
         width: "100%",
         height: "100%",
         position: "relative"
@@ -13174,6 +13315,7 @@ var import_framer_motion8 = require("framer-motion");
 // src/components/TutorMode/SpotlightMask.tsx
 var import_react55 = require("react");
 var import_framer_motion2 = require("framer-motion");
+init_utils();
 
 // src/components/TutorMode/tokens.ts
 var INK = "#2a2420";
@@ -13224,7 +13366,9 @@ function SpotlightMask({
   const h = y2 - y1;
   const rx = action.shape === "rounded" ? 14 : action.shape === "ellipse" ? w / 2 : 0;
   const ry = action.shape === "rounded" ? 14 : action.shape === "ellipse" ? h / 2 : 0;
-  const feather = Math.max(16, action.feather_px);
+  const isMobile = getDeviceCapabilities().isMobile;
+  const requestedFeather = Math.max(16, action.feather_px);
+  const feather = isMobile ? Math.min(12, requestedFeather) : requestedFeather;
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(