@nypl/web-reader 5.0.0 → 5.0.1

package/dist/index.d.mts

@@ -35,9 +35,9 @@ interface Locations {
 
 declare const ReadiumWebpubContext = "http://readium.org/webpub/default.jsonld";
 declare const IS_DEV: boolean;
-declare const HEADER_HEIGHT = 48;
-declare const CHROME_HEIGHT = 48;
-declare const DEFAULT_HEIGHT = "calc(100vh - 48px)";
+declare const HEADER_HEIGHT = 49;
+declare const CHROME_HEIGHT = 49;
+declare const DEFAULT_HEIGHT = "calc(100vh - 49px)";
 declare const DEFAULT_SHOULD_GROW_WHEN_SCROLLING = true;
 declare const READER_MARGIN = 16;
 declare const DEFAULT_SETTINGS: ReaderSettings;
@@ -70,6 +70,7 @@ declare const FONT_DETAILS: {
         fontWeight: string;
     };
 };
+declare const IN_VIEW_DELAY_MS = 150;
 declare const LOCAL_STORAGE_SETTINGS_KEY = "web-reader-settings";
 declare const LOCAL_STORAGE_LOCATIONS_KEY = "web-reader-locations";
 declare const MAIN_CONTENT_ID = "mainContent";
@@ -546,4 +547,4 @@ type WebReaderProps = UseWebReaderArguments<string | Uint8Array>;
 declare const WebReaderWithoutBoundary: FC<WebReaderProps>;
 declare const WebReader: FC<WebReaderProps>;
 
-export { CHROME_HEIGHT, DEFAULT_FIT_MODE, DEFAULT_FONT_HEIGHT, DEFAULT_FONT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SETTINGS, DEFAULT_SHOULD_GROW_WHEN_SCROLLING, FONT_DETAILS, HEADER_HEIGHT, IS_DEV, LOCAL_STORAGE_LOCATIONS_KEY, LOCAL_STORAGE_SETTINGS_KEY, MAIN_CONTENT_ID, READER_MARGIN, type ReadiumLink, ReadiumWebpubContext, type WebReaderProps, WebReaderWithoutBoundary, type WebpubManifest, addTocToManifest, clearWebReaderLocalStorage, WebReader as default, getTheme, useColorModeValue, useHtmlReader, usePdfReader, useWebReader };
+export { CHROME_HEIGHT, DEFAULT_FIT_MODE, DEFAULT_FONT_HEIGHT, DEFAULT_FONT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SETTINGS, DEFAULT_SHOULD_GROW_WHEN_SCROLLING, FONT_DETAILS, HEADER_HEIGHT, IN_VIEW_DELAY_MS, IS_DEV, LOCAL_STORAGE_LOCATIONS_KEY, LOCAL_STORAGE_SETTINGS_KEY, MAIN_CONTENT_ID, READER_MARGIN, type ReadiumLink, ReadiumWebpubContext, type WebReaderProps, WebReaderWithoutBoundary, type WebpubManifest, addTocToManifest, clearWebReaderLocalStorage, WebReader as default, getTheme, useColorModeValue, useHtmlReader, usePdfReader, useWebReader };

package/dist/index.d.ts

@@ -35,9 +35,9 @@ interface Locations {
 
 declare const ReadiumWebpubContext = "http://readium.org/webpub/default.jsonld";
 declare const IS_DEV: boolean;
-declare const HEADER_HEIGHT = 48;
-declare const CHROME_HEIGHT = 48;
-declare const DEFAULT_HEIGHT = "calc(100vh - 48px)";
+declare const HEADER_HEIGHT = 49;
+declare const CHROME_HEIGHT = 49;
+declare const DEFAULT_HEIGHT = "calc(100vh - 49px)";
 declare const DEFAULT_SHOULD_GROW_WHEN_SCROLLING = true;
 declare const READER_MARGIN = 16;
 declare const DEFAULT_SETTINGS: ReaderSettings;
@@ -70,6 +70,7 @@ declare const FONT_DETAILS: {
         fontWeight: string;
     };
 };
+declare const IN_VIEW_DELAY_MS = 150;
 declare const LOCAL_STORAGE_SETTINGS_KEY = "web-reader-settings";
 declare const LOCAL_STORAGE_LOCATIONS_KEY = "web-reader-locations";
 declare const MAIN_CONTENT_ID = "mainContent";
@@ -546,4 +547,4 @@ type WebReaderProps = UseWebReaderArguments<string | Uint8Array>;
 declare const WebReaderWithoutBoundary: FC<WebReaderProps>;
 declare const WebReader: FC<WebReaderProps>;
 
-export { CHROME_HEIGHT, DEFAULT_FIT_MODE, DEFAULT_FONT_HEIGHT, DEFAULT_FONT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SETTINGS, DEFAULT_SHOULD_GROW_WHEN_SCROLLING, FONT_DETAILS, HEADER_HEIGHT, IS_DEV, LOCAL_STORAGE_LOCATIONS_KEY, LOCAL_STORAGE_SETTINGS_KEY, MAIN_CONTENT_ID, READER_MARGIN, type ReadiumLink, ReadiumWebpubContext, type WebReaderProps, WebReaderWithoutBoundary, type WebpubManifest, addTocToManifest, clearWebReaderLocalStorage, WebReader as default, getTheme, useColorModeValue, useHtmlReader, usePdfReader, useWebReader };
+export { CHROME_HEIGHT, DEFAULT_FIT_MODE, DEFAULT_FONT_HEIGHT, DEFAULT_FONT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SETTINGS, DEFAULT_SHOULD_GROW_WHEN_SCROLLING, FONT_DETAILS, HEADER_HEIGHT, IN_VIEW_DELAY_MS, IS_DEV, LOCAL_STORAGE_LOCATIONS_KEY, LOCAL_STORAGE_SETTINGS_KEY, MAIN_CONTENT_ID, READER_MARGIN, type ReadiumLink, ReadiumWebpubContext, type WebReaderProps, WebReaderWithoutBoundary, type WebpubManifest, addTocToManifest, clearWebReaderLocalStorage, WebReader as default, getTheme, useColorModeValue, useHtmlReader, usePdfReader, useWebReader };

package/dist/index.js

@@ -814,6 +814,7 @@ __export(src_exports, {
   DEFAULT_SHOULD_GROW_WHEN_SCROLLING: () => DEFAULT_SHOULD_GROW_WHEN_SCROLLING,
   FONT_DETAILS: () => FONT_DETAILS,
   HEADER_HEIGHT: () => HEADER_HEIGHT,
+  IN_VIEW_DELAY_MS: () => IN_VIEW_DELAY_MS,
   IS_DEV: () => IS_DEV,
   LOCAL_STORAGE_LOCATIONS_KEY: () => LOCAL_STORAGE_LOCATIONS_KEY,
   LOCAL_STORAGE_SETTINGS_KEY: () => LOCAL_STORAGE_SETTINGS_KEY,
@@ -1389,7 +1390,7 @@ var React29 = __toESM(require("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;
@@ -1429,6 +1430,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";
@@ -7928,6 +7930,7 @@ var ScrollPage = ({
   width,
   height,
   onLoadSuccess,
+  onPageRef,
   placeholderHeight,
   placeholderWidth,
   allowInView,
@@ -7947,8 +7950,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 = import_react98.default.useCallback(
     (page) => {
@@ -8057,7 +8061,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 });
@@ -8130,13 +8151,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;
@@ -8159,25 +8173,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";
@@ -8203,42 +8232,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 });
@@ -8305,7 +8330,7 @@ function usePdfReader(args) {
         tabIndex: -1,
         id: MAIN_CONTENT_ID,
         ref: containerRef,
-        height: pageHeight,
+        height,
         sx: {
           ".react-pdf__Document": {
             width: "100%",
@@ -8324,7 +8349,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;
@@ -8342,7 +8368,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(
@@ -8564,6 +8591,7 @@ var src_default = WebReader;
   DEFAULT_SHOULD_GROW_WHEN_SCROLLING,
   FONT_DETAILS,
   HEADER_HEIGHT,
+  IN_VIEW_DELAY_MS,
   IS_DEV,
   LOCAL_STORAGE_LOCATIONS_KEY,
   LOCAL_STORAGE_SETTINGS_KEY,