pdfjs-reader-core 0.5.2 → 0.5.5

package/dist/index.js

@@ -1839,6 +1839,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;
@@ -1893,6 +2016,7 @@ var init_utils = __esm({
     init_text_search();
     init_coordinates();
     init_page_turn_sound();
+    init_mobile_config();
   }
 });
 
@@ -7099,9 +7223,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);
@@ -10906,39 +11038,53 @@ var init_PDFViewerClient = __esm({
       }, [viewerStore, annotationStore, searchStore]);
       const handleRetry = useCallback34(() => {
         srcIdRef.current = null;
+        if (abortControllerRef.current) {
+          abortControllerRef.current.abort();
+          abortControllerRef.current = null;
+        }
         viewerStore.getState().setError(null);
         setLoadState("idle");
       }, [viewerStore]);
       const abortControllerRef = useRef20(null);
       const currentSrcRef = useRef20(null);
+      const teardownTimerRef = useRef20(null);
       useEffect23(() => {
         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 = useRef20(null);
       useEffect23(() => {
-        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;
@@ -11063,14 +11209,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 = useRef20(currentPage);
       useEffect23(() => {
         if (prevPageRef.current !== currentPage) {
@@ -12950,6 +13089,7 @@ import { useEffect as useEffect28, useMemo as useMemo15, useRef as useRef27, use
 import { useStore as useStore2 } from "zustand";
 
 // src/components/TutorMode/CameraView.tsx
+init_utils();
 import { motion } from "framer-motion";
 import { jsx as jsx41 } from "react/jsx-runtime";
 function CameraView({
@@ -12958,13 +13098,14 @@ function CameraView({
   durationMs = 700,
   className
 }) {
+  const isMobile = getDeviceCapabilities().isMobile;
   return /* @__PURE__ */ jsx41(
     motion.div,
     {
       className,
       style: {
         transformOrigin: "50% 50%",
-        willChange: "transform",
+        ...isMobile ? {} : { willChange: "transform" },
         width: "100%",
         height: "100%",
         position: "relative"
@@ -12987,6 +13128,7 @@ function CameraView({
 import { AnimatePresence } from "framer-motion";
 
 // src/components/TutorMode/SpotlightMask.tsx
+init_utils();
 import { useId } from "react";
 import { motion as motion2 } from "framer-motion";
 
@@ -13039,7 +13181,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__ */ jsxs35(