pdfjs-reader-core 0.5.11 → 0.5.12

package/dist/index.cjs

@@ -1926,8 +1926,10 @@ function getRenderConfig(quality = "auto", capabilities) {
   switch (quality) {
     case "low":
       return {
-        canvasScaleFactor: Math.min(1, caps.devicePixelRatio * 0.5),
-        maxCanvasDimension: 2048,
+        canvasScaleFactor: caps.devicePixelRatio,
+        // 3072² ≈ 9 MP — fits a full-DPR US Letter (DPR=3 → 1836×2376) at
+        // default scale and caps at deep zoom on memory-constrained iPhones.
+        maxCanvasDimension: 3072,
         overscanPages: 1,
         maxPagesInMemory: 3,
         scrollDebounceMs: 100,
@@ -1940,7 +1942,8 @@ function getRenderConfig(quality = "auto", capabilities) {
       };
     case "medium":
       return {
-        canvasScaleFactor: Math.min(1.5, caps.devicePixelRatio * 0.75),
+        canvasScaleFactor: caps.devicePixelRatio,
+        // 4096² ≈ 16 MP — within iOS Safari per-canvas budget across versions.
         maxCanvasDimension: 4096,
         overscanPages: 2,
         maxPagesInMemory: 5,
@@ -5227,9 +5230,37 @@ var init_ThumbnailPanel = __esm({
       onClick,
       scale
     }) {
+      const buttonRef = (0, import_react18.useRef)(null);
       const canvasRef = (0, import_react18.useRef)(null);
       const [isRendered, setIsRendered] = (0, import_react18.useState)(false);
+      const [shouldRender, setShouldRender] = (0, import_react18.useState)(false);
+      (0, import_react18.useEffect)(() => {
+        if (shouldRender) return;
+        const el = buttonRef.current;
+        if (!el) return;
+        if (typeof IntersectionObserver === "undefined") {
+          setShouldRender(true);
+          return;
+        }
+        const observer = new IntersectionObserver(
+          (entries) => {
+            for (const entry of entries) {
+              if (entry.isIntersecting) {
+                setShouldRender(true);
+                observer.disconnect();
+                break;
+              }
+            }
+          },
+          // 200px root margin so the page is fetched just before it scrolls
+          // into view, hiding the render latency.
+          { rootMargin: "200px" }
+        );
+        observer.observe(el);
+        return () => observer.disconnect();
+      }, [shouldRender]);
       (0, import_react18.useEffect)(() => {
+        if (!shouldRender) return;
         let cancelled = false;
         const renderThumbnail = async () => {
           const canvas = canvasRef.current;
@@ -5263,10 +5294,11 @@ var init_ThumbnailPanel = __esm({
         return () => {
           cancelled = true;
         };
-      }, [document2, pageNumber, scale]);
+      }, [document2, pageNumber, scale, shouldRender]);
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "button",
         {
+          ref: buttonRef,
           onClick,
           className: cn(
             "thumbnail-item",
@@ -9489,6 +9521,11 @@ var init_VirtualizedDocumentContainer = __esm({
         selectHighlight,
         activeColor
       } = useHighlights();
+      const [defaultDims, setDefaultDims] = (0, import_react38.useState)({
+        width: DEFAULT_PAGE_WIDTH2,
+        height: DEFAULT_PAGE_HEIGHT2
+      });
+      const [dimsVersion, setDimsVersion] = (0, import_react38.useState)(0);
       (0, import_react38.useEffect)(() => {
         if (document2 !== documentRef.current) {
           documentRef.current = document2;
@@ -9497,39 +9534,47 @@ var init_VirtualizedDocumentContainer = __esm({
           setPageObjects(/* @__PURE__ */ new Map());
         }
       }, [document2]);
+      (0, import_react38.useEffect)(() => {
+        pageDimensionsCache.current.clear();
+        setDimsVersion((v) => v + 1);
+      }, [rotation]);
       (0, import_react38.useEffect)(() => {
         if (!document2 || numPages === 0) return;
-        const calculatePageInfos = async () => {
-          const infos = [];
-          let currentTop = 0;
-          for (let i = 1; i <= numPages; i++) {
-            let dimensions = pageDimensionsCache.current.get(i);
-            if (!dimensions) {
-              try {
-                const page = pageCache.current.get(i) || await document2.getPage(i);
-                if (!pageCache.current.has(i)) {
-                  pageCache.current.set(i, page);
-                }
-                const viewport = page.getViewport({ scale: 1, rotation });
-                dimensions = { width: viewport.width, height: viewport.height };
-                pageDimensionsCache.current.set(i, dimensions);
-              } catch {
-                dimensions = { width: DEFAULT_PAGE_WIDTH2, height: DEFAULT_PAGE_HEIGHT2 };
-              }
-            }
-            const scaledHeight = Math.floor(dimensions.height * scale);
-            infos.push({
-              pageNumber: i,
-              top: currentTop,
-              height: scaledHeight
-            });
-            currentTop += scaledHeight + pageGap;
+        let cancelled = false;
+        (async () => {
+          try {
+            const page = pageCache.current.get(1) ?? await document2.getPage(1);
+            if (cancelled) return;
+            pageCache.current.set(1, page);
+            const viewport = page.getViewport({ scale: 1, rotation });
+            const dims = { width: viewport.width, height: viewport.height };
+            pageDimensionsCache.current.set(1, dims);
+            setDefaultDims(dims);
+            setDimsVersion((v) => v + 1);
+          } catch {
           }
-          setPageInfos(infos);
-          setTotalHeight(currentTop - pageGap);
+        })();
+        return () => {
+          cancelled = true;
         };
-        calculatePageInfos();
-      }, [document2, numPages, scale, rotation, pageGap]);
+      }, [document2, numPages, rotation]);
+      (0, import_react38.useEffect)(() => {
+        if (!document2 || numPages === 0) {
+          setPageInfos([]);
+          setTotalHeight(0);
+          return;
+        }
+        const infos = [];
+        let currentTop = 0;
+        for (let i = 1; i <= numPages; i++) {
+          const dimensions = pageDimensionsCache.current.get(i) ?? defaultDims;
+          const scaledHeight = Math.floor(dimensions.height * scale);
+          infos.push({ pageNumber: i, top: currentTop, height: scaledHeight });
+          currentTop += scaledHeight + pageGap;
+        }
+        setPageInfos(infos);
+        setTotalHeight(Math.max(0, currentTop - pageGap));
+      }, [document2, numPages, scale, rotation, pageGap, defaultDims, dimsVersion]);
       const updateVisiblePages = (0, import_react38.useCallback)(() => {
         if (!scrollContainerRef.current || pageInfos.length === 0) return;
         const container = scrollContainerRef.current;
@@ -9577,6 +9622,7 @@ var init_VirtualizedDocumentContainer = __esm({
         const loadPages = async () => {
           const newPageObjects = new Map(pageObjects);
           let hasChanges = false;
+          let dimsChanged = false;
           for (const pageNum of visiblePages) {
             if (!newPageObjects.has(pageNum)) {
               try {
@@ -9587,6 +9633,14 @@ var init_VirtualizedDocumentContainer = __esm({
                 }
                 newPageObjects.set(pageNum, page);
                 hasChanges = true;
+                if (!pageDimensionsCache.current.has(pageNum)) {
+                  const vp = page.getViewport({ scale: 1, rotation });
+                  pageDimensionsCache.current.set(pageNum, {
+                    width: vp.width,
+                    height: vp.height
+                  });
+                  dimsChanged = true;
+                }
               } catch (error) {
                 const errorMessage = error instanceof Error ? error.message : String(error);
                 const isDocumentDestroyed = errorMessage.includes("destroyed") || errorMessage.includes("sendWithStream") || errorMessage.includes("sendWithPromise") || errorMessage.includes("Cannot read properties of null");
@@ -9606,9 +9660,12 @@ var init_VirtualizedDocumentContainer = __esm({
           if (hasChanges) {
             setPageObjects(newPageObjects);
           }
+          if (dimsChanged) {
+            setDimsVersion((v) => v + 1);
+          }
         };
         loadPages();
-      }, [document2, visiblePages, pageObjects]);
+      }, [document2, visiblePages, pageObjects, rotation]);
       (0, import_react38.useEffect)(() => {
         if (!scrollToPageRequest || !scrollContainerRef.current || pageInfos.length === 0) return;
         const { page, requestId, behavior } = scrollToPageRequest;
@@ -10173,7 +10230,7 @@ var init_DualPageContainer = __esm({
 });
 
 // src/components/PDFViewer/BookModeContainer.tsx
-var import_react41, import_react_pageflip, import_jsx_runtime27, BookPage, BookModeContainer;
+var import_react41, import_react_pageflip, import_jsx_runtime27, BOOK_MODE_OVERSCAN, BookPage, BookModeContainer;
 var init_BookModeContainer = __esm({
   "src/components/PDFViewer/BookModeContainer.tsx"() {
     "use strict";
@@ -10184,6 +10241,7 @@ var init_BookModeContainer = __esm({
     init_hooks();
     init_utils();
     import_jsx_runtime27 = require("react/jsx-runtime");
+    BOOK_MODE_OVERSCAN = 4;
     BookPage = import_react41.default.forwardRef(function BookPage2({ pageNumber, page, scale, rotation, width, height }, ref) {
       return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: "book-page", "data-page-number": pageNumber, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { width, height, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         PDFPage,
@@ -10216,9 +10274,10 @@ var init_BookModeContainer = __esm({
       } = usePDFViewer();
       const scrollToPageRequest = useViewerStore((s) => s.scrollToPageRequest);
       const { viewerStore } = usePDFViewerStores();
-      const [pages, setPages] = (0, import_react41.useState)([]);
+      const [pages, setPages] = (0, import_react41.useState)(/* @__PURE__ */ new Map());
       const [rawPageDims, setRawPageDims] = (0, import_react41.useState)({ width: 612, height: 792 });
-      const [isLoadingPages, setIsLoadingPages] = (0, import_react41.useState)(false);
+      const [hasFirstPage, setHasFirstPage] = (0, import_react41.useState)(false);
+      const pageRequestsRef = (0, import_react41.useRef)(/* @__PURE__ */ new Set());
       const containerRef = (0, import_react41.useRef)(null);
       const [containerSize, setContainerSize] = (0, import_react41.useState)({ width: 0, height: 0 });
       const flipBookRef = (0, import_react41.useRef)(null);
@@ -10235,41 +10294,67 @@ var init_BookModeContainer = __esm({
         return () => ro.disconnect();
       }, []);
       (0, import_react41.useEffect)(() => {
-        if (!document2) {
-          setPages([]);
-          return;
-        }
+        setPages(/* @__PURE__ */ new Map());
+        pageRequestsRef.current.clear();
+        setHasFirstPage(false);
+      }, [document2]);
+      (0, import_react41.useEffect)(() => {
+        if (!document2 || numPages === 0) return;
+        const start = Math.max(1, currentPage - BOOK_MODE_OVERSCAN);
+        const end = Math.min(numPages, currentPage + BOOK_MODE_OVERSCAN);
+        const isFirstLoad = !hasFirstPage;
         let cancelled = false;
-        const loadAllPages = async () => {
-          setIsLoadingPages(true);
-          try {
-            const pagePromises = [];
-            for (let i = 1; i <= numPages; i++) {
-              pagePromises.push(document2.getPage(i));
+        const wanted = [];
+        if (isFirstLoad && !pages.has(1) && !pageRequestsRef.current.has(1)) {
+          wanted.push(1);
+          pageRequestsRef.current.add(1);
+        }
+        for (let i = start; i <= end; i++) {
+          if (pages.has(i) || pageRequestsRef.current.has(i)) continue;
+          wanted.push(i);
+          pageRequestsRef.current.add(i);
+        }
+        if (wanted.length === 0) return;
+        (async () => {
+          const results = await Promise.allSettled(
+            wanted.map((i) => document2.getPage(i).then((p) => [i, p]))
+          );
+          if (cancelled) return;
+          const next = new Map(pages);
+          let firstPageJustLoaded = null;
+          for (const r of results) {
+            if (r.status === "fulfilled") {
+              const [i, page] = r.value;
+              next.set(i, page);
+              if (i === 1) firstPageJustLoaded = page;
             }
-            const results = await Promise.allSettled(pagePromises);
-            if (!cancelled) {
-              const loaded2 = results.map((r) => r.status === "fulfilled" ? r.value : null);
-              setPages(loaded2);
-              const firstPage = loaded2[0];
-              if (firstPage) {
-                const vp = firstPage.getViewport({ scale: 1, rotation });
-                setRawPageDims({ width: vp.width, height: vp.height });
-              }
+          }
+          for (const i of next.keys()) {
+            if (i !== 1 && (i < start || i > end)) {
+              next.delete(i);
             }
-          } catch {
-          } finally {
-            if (!cancelled) setIsLoadingPages(false);
           }
-        };
-        loadAllPages();
+          setPages(next);
+          if (firstPageJustLoaded) {
+            const vp = firstPageJustLoaded.getViewport({ scale: 1, rotation });
+            setRawPageDims({ width: vp.width, height: vp.height });
+            setHasFirstPage(true);
+          }
+          for (const i of wanted) {
+            pageRequestsRef.current.delete(i);
+          }
+        })();
         return () => {
           cancelled = true;
+          for (const i of wanted) {
+            pageRequestsRef.current.delete(i);
+          }
         };
-      }, [document2, numPages, rotation]);
+      }, [document2, numPages, currentPage, rotation, pages, hasFirstPage]);
       (0, import_react41.useEffect)(() => {
-        if (pages[0]) {
-          const vp = pages[0].getViewport({ scale: 1, rotation });
+        const firstPage = pages.get(1);
+        if (firstPage) {
+          const vp = firstPage.getViewport({ scale: 1, rotation });
           setRawPageDims({ width: vp.width, height: vp.height });
         }
       }, [pages, rotation]);
@@ -10320,8 +10405,28 @@ var init_BookModeContainer = __esm({
         sepia: "bg-amber-50"
       };
       const themeClass = theme === "dark" ? "dark" : theme === "sepia" ? "sepia" : "";
-      const ready = !!document2 && !isLoadingPages && pages.length > 0;
+      const ready = !!document2 && hasFirstPage;
       const hasContainer = containerSize.width > 0 && containerSize.height > 0;
+      const pageChildren = (0, import_react41.useMemo)(() => {
+        if (numPages === 0) return null;
+        const out = new Array(numPages);
+        for (let i = 0; i < numPages; i++) {
+          const pageNumber = i + 1;
+          out[i] = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            BookPage,
+            {
+              pageNumber,
+              page: pages.get(pageNumber) ?? null,
+              scale: renderScale,
+              rotation,
+              width: displayWidth,
+              height: displayHeight
+            },
+            pageNumber
+          );
+        }
+        return out;
+      }, [numPages, pages, renderScale, rotation, displayWidth, displayHeight]);
       return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         "div",
         {
@@ -10371,18 +10476,7 @@ var init_BookModeContainer = __esm({
                 autoSize: false,
                 renderOnlyPageLengthChange: false,
                 disableFlipByClick: false,
-                children: pages.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  BookPage,
-                  {
-                    pageNumber: index + 1,
-                    page,
-                    scale: renderScale,
-                    rotation,
-                    width: displayWidth,
-                    height: displayHeight
-                  },
-                  index
-                ))
+                children: pageChildren
               }
             )
           ]