@nypl/web-reader 5.0.0 → 5.0.1

package/dist/index.mjs

@@ -1373,7 +1373,7 @@ import * as React29 from "react";
 // src/constants.ts
 var ReadiumWebpubContext = "http://readium.org/webpub/default.jsonld";
 var IS_DEV = process.env.NODE_ENV === "development";
-var HEADER_HEIGHT = 48;
+var HEADER_HEIGHT = 49;
 var CHROME_HEIGHT = HEADER_HEIGHT;
 var DEFAULT_HEIGHT = `calc(100vh - ${CHROME_HEIGHT}px)`;
 var DEFAULT_SHOULD_GROW_WHEN_SCROLLING = true;
@@ -1413,6 +1413,7 @@ var FONT_DETAILS = {
     fontWeight: "regular"
   }
 };
+var IN_VIEW_DELAY_MS = 150;
 var LOCAL_STORAGE_SETTINGS_KEY = "web-reader-settings";
 var LOCAL_STORAGE_LOCATIONS_KEY = "web-reader-locations";
 var MAIN_CONTENT_ID = "mainContent";
@@ -7946,6 +7947,7 @@ var ScrollPage = ({
   width,
   height,
   onLoadSuccess,
+  onPageRef,
   placeholderHeight,
   placeholderWidth,
   allowInView,
@@ -7965,8 +7967,9 @@ var ScrollPage = ({
     (el) => {
       if (typeof loadRef === "function") loadRef(el);
       if (typeof visibilityRef === "function") visibilityRef(el);
+      if (onPageRef) onPageRef(pageNumber, el);
     },
-    [loadRef, visibilityRef]
+    [loadRef, onPageRef, pageNumber, visibilityRef]
   );
   const handleLoadSuccess = React48.useCallback(
     (page) => {
@@ -8075,7 +8078,24 @@ function usePdfReader(args) {
   const isFetching = !state2.resource;
   const isParsed = typeof state2.numPages === "number";
   const [containerRef, containerSize] = useMeasure();
-  const [pageHeight, setPageHeight] = React50.useState(0);
+  const documentContainerRef = React50.useRef(null);
+  const pageRefs = React50.useRef(/* @__PURE__ */ new Map());
+  const setPageRef = React50.useCallback(
+    (pageNumber, element) => {
+      if (element) {
+        pageRefs.current.set(pageNumber, element);
+        return;
+      }
+      pageRefs.current.delete(pageNumber);
+    },
+    []
+  );
+  const scrollState = React50.useRef({
+    ratios: /* @__PURE__ */ new Map(),
+    lastVisiblePage: state2.pageNumber,
+    isInViewUpdate: false,
+    lastProgrammaticNavAt: 0
+  });
   React50.useEffect(() => {
     if (!webpubManifestUrl || !manifest) {
       return dispatch({ type: "ARGS_CHANGED", args: void 0 });
@@ -8148,13 +8168,6 @@ function usePdfReader(args) {
     var _a2;
     resizePage(containerSize, state2.fitMode, (_a2 = state2.rotation) != null ? _a2 : 0, state2.scale);
   }, [containerSize, resizePage, state2.fitMode, state2.rotation, state2.scale]);
-  React50.useEffect(() => {
-    if (pageHeight === 0 && state2.pdfWidth && state2.pdfHeight) {
-      const aspectRatio = state2.pdfHeight / state2.pdfWidth;
-      const initialPageHeight = (containerSize.width - READER_MARGIN) * aspectRatio;
-      setPageHeight(Math.round(initialPageHeight));
-    }
-  }, [state2.pdfWidth, state2.pdfHeight, containerSize.width, pageHeight]);
   React50.useEffect(() => {
     var _a2, _b2;
     const isFirstResource = state2.resourceIndex === 0;
@@ -8177,25 +8190,40 @@ function usePdfReader(args) {
   ]);
   React50.useEffect(() => {
     var _a2;
-    if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling)) return;
-    if (!state2.rendered) return;
+    if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling) || !state2.rendered) return;
     if (scrollState.current.isInViewUpdate) {
       scrollState.current.isInViewUpdate = false;
       return;
     }
-    process.nextTick(() => {
-      const page = document.querySelector(
-        `[data-page-number="${state2.pageNumber}"]`
-      );
-      page == null ? void 0 : page.scrollIntoView();
-    });
+    const documentContainer = documentContainerRef.current;
+    const pageRef = pageRefs.current.get(state2.pageNumber);
+    if (documentContainer && pageRef) {
+      const containerRect = documentContainer.getBoundingClientRect();
+      const pageRect = pageRef.getBoundingClientRect();
+      documentContainer.scrollTo({
+        top: documentContainer.scrollTop + (pageRect.top - containerRect.top)
+      });
+    }
   }, [state2.pageNumber, (_c = state2.settings) == null ? void 0 : _c.isScrolling, state2.rendered]);
+  const beginProgrammaticNavigation = React50.useCallback(
+    (pendingPage) => {
+      const currentScrollState = scrollState.current;
+      currentScrollState.lastVisiblePage = pendingPage;
+      currentScrollState.lastProgrammaticNavAt = Date.now();
+      currentScrollState.ratios.clear();
+    },
+    []
+  );
   const goForward = React50.useCallback(() => __async(null, null, function* () {
+    beginProgrammaticNavigation(
+      state2.numPages ? Math.min(state2.pageNumber + 1, state2.numPages) : state2.pageNumber + 1
+    );
     dispatch({ type: "GO_FORWARD" });
-  }), []);
+  }), [beginProgrammaticNavigation, state2.numPages, state2.pageNumber]);
   const goBackward = React50.useCallback(() => __async(null, null, function* () {
+    beginProgrammaticNavigation(Math.max(1, state2.pageNumber - 1));
     dispatch({ type: "GO_BACKWARD" });
-  }), []);
+  }), [beginProgrammaticNavigation, state2.pageNumber]);
   const setScroll = React50.useCallback(
     (val) => __async(null, null, function* () {
       const isScrolling = val === "scrolling";
@@ -8221,42 +8249,38 @@ function usePdfReader(args) {
   const goToPage = React50.useCallback((href) => __async(null, null, function* () {
     dispatch({ type: "GO_TO_HREF", href });
   }), []);
-  const goToPageNumber = React50.useCallback((page) => {
-    dispatch({ type: "GO_TO_PAGE", page });
-  }, []);
+  const goToPageNumber = React50.useCallback(
+    (page) => {
+      beginProgrammaticNavigation(page);
+      dispatch({ type: "GO_TO_PAGE", page });
+    },
+    [beginProgrammaticNavigation]
+  );
   const setFitMode = React50.useCallback((mode) => {
     dispatch({ type: "SET_FIT_MODE", fitMode: mode });
   }, []);
-  const scrollState = React50.useRef({
-    ratios: /* @__PURE__ */ new Map(),
-    lastVisiblepage: state2.pageNumber,
-    hasScrolled: false,
-    isInViewUpdate: false
-  });
   const onInView = React50.useCallback(
     (pageNum, ratio) => {
       var _a2;
       const currentScrollState = scrollState.current;
-      if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling)) return;
-      currentScrollState.ratios.set(pageNum, ratio);
-      if (!currentScrollState.hasScrolled && state2.pageNumber === 1) {
-        const container = document.querySelector(
-          `#${MAIN_CONTENT_ID} .react-pdf__Document`
-        );
-        if (container && container.scrollTop > 0)
-          currentScrollState.hasScrolled = true;
-        else return;
+      if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling) || Date.now() - currentScrollState.lastProgrammaticNavAt < IN_VIEW_DELAY_MS)
+        return;
+      if (ratio <= 0) {
+        currentScrollState.ratios.delete(pageNum);
+        return;
       }
-      let mostVisiblePage = currentScrollState.lastVisiblepage;
+      currentScrollState.ratios.set(pageNum, ratio);
+      let mostVisiblePage = currentScrollState.lastVisiblePage;
       let maxRatio = -1;
-      currentScrollState.ratios.forEach((r, p) => {
+      for (const [p, r] of currentScrollState.ratios) {
         if (r > maxRatio) {
           maxRatio = r;
           mostVisiblePage = p;
         }
-      });
-      if (mostVisiblePage !== currentScrollState.lastVisiblepage) {
-        currentScrollState.lastVisiblepage = mostVisiblePage;
+        if (r > 0.8) break;
+      }
+      if (mostVisiblePage !== currentScrollState.lastVisiblePage) {
+        currentScrollState.lastVisiblePage = mostVisiblePage;
         if (state2.pageNumber !== mostVisiblePage) {
           currentScrollState.isInViewUpdate = true;
           dispatch({ type: "PAGE_IN_VIEW", page: mostVisiblePage });
@@ -8323,7 +8347,7 @@ function usePdfReader(args) {
         tabIndex: -1,
         id: MAIN_CONTENT_ID,
         ref: containerRef,
-        height: pageHeight,
+        height,
         sx: {
           ".react-pdf__Document": {
             width: "100%",
@@ -8342,7 +8366,8 @@ function usePdfReader(args) {
         {
           file: state2.resource,
           onLoadSuccess: onDocumentLoadSuccess,
-          onLoadError: onDocumentLoadError
+          onLoadError: onDocumentLoadError,
+          inputRef: documentContainerRef
         },
         isParsed && state2.numPages && /* @__PURE__ */ React50.createElement(React50.Fragment, null, state2.settings.isScrolling && Array.from(new Array(state2.numPages), (_, index) => {
           var _a2;
@@ -8360,7 +8385,8 @@ function usePdfReader(args) {
               allowInView: state2.rendered,
               onInView,
               fitMode: state2.fitMode,
-              rotate: (_a2 = state2.rotation) != null ? _a2 : 0
+              rotate: (_a2 = state2.rotation) != null ? _a2 : 0,
+              onPageRef: setPageRef
             }
           );
         }), !state2.settings.isScrolling && /* @__PURE__ */ React50.createElement(
@@ -8581,6 +8607,7 @@ export {
   DEFAULT_SHOULD_GROW_WHEN_SCROLLING,
   FONT_DETAILS,
   HEADER_HEIGHT,
+  IN_VIEW_DELAY_MS,
   IS_DEV,
   LOCAL_STORAGE_LOCATIONS_KEY,
   LOCAL_STORAGE_SETTINGS_KEY,