@nypl/web-reader 5.0.0-alpha.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";
@@ -3506,10 +3507,7 @@ function createMultiStyleConfigHelpers(parts) {
 }
 
 // src/ui/theme/components/tabs.ts
-var {
-  defineMultiStyleConfig,
-  definePartsStyle
-} = createMultiStyleConfigHelpers(["root", "tab", "tablist"]);
+var { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(["root", "tab", "tablist"]);
 var getTabsStyle = (getColor2) => defineMultiStyleConfig({
   variants: {
     custom: definePartsStyle({
@@ -6141,14 +6139,7 @@ function Header(props) {
   var _a, _b, _c, _d;
   const [, toggleFullscreenHook] = useFullscreen();
   const [isFullscreen, setIsFullScreen] = useState10(false);
-  const {
-    navigator,
-    manifest,
-    type,
-    containerRef,
-    currentPage,
-    totalPages
-  } = props;
+  const { navigator, manifest, type, containerRef, currentPage, totalPages } = props;
   const isAtStart = (_a = props.state) == null ? void 0 : _a.atStart;
   const isAtEnd = (_b = props.state) == null ? void 0 : _b.atEnd;
   const iconFill = useColorModeValue_default(
@@ -6774,12 +6765,8 @@ function setReflowableCss(iframeHtml, settings) {
 }
 function setFixedCss(iframeDocument, iframeContainer) {
   if (!iframeContainer) return;
-  let { contentWidth, contentHeight } = extractContentViewportSize(
-    iframeDocument
-  );
-  const { containerWidth, containerHeight } = extractContentContainerSize(
-    iframeContainer
-  );
+  let { contentWidth, contentHeight } = extractContentViewportSize(iframeDocument);
+  const { containerWidth, containerHeight } = extractContentContainerSize(iframeContainer);
   contentWidth = contentWidth != null ? contentWidth : containerWidth;
   contentHeight = contentHeight != null ? contentHeight : containerHeight;
   const scale = Math.min(
@@ -7346,9 +7333,7 @@ function useResource(manifest, state2, getContent, injectables, dispatch) {
             if (element) document2 == null ? void 0 : document2.head.appendChild(element);
           }
           injectJS(document2.body);
-          const iframeContainer = window.document.querySelector(
-            'main [role="progressbar"]'
-          );
+          const iframeContainer = window.document.querySelector('main [role="progressbar"]');
           const readerSettings = {
             colorMode: state2.settings.colorMode,
             fontSize: state2.settings.fontSize,
@@ -7713,129 +7698,6 @@ var ChakraPage = chakra3(
 );
 var ChakraPage_default = ChakraPage;
 
-// src/PdfReader/ScrollPage.tsx
-import React48 from "react";
-import { useInView } from "react-intersection-observer";
-var Placeholder = ({ width, height, pageNumber }) => {
-  return /* @__PURE__ */ React48.createElement(
-    "div",
-    {
-      "data-page-number": pageNumber,
-      style: { width, height }
-    }
-  );
-};
-var ScrollPage = ({
-  scale,
-  pageNumber,
-  width,
-  height,
-  onLoadSuccess,
-  placeholderHeight,
-  placeholderWidth,
-  allowInView,
-  onInView,
-  fitMode,
-  rotate
-}) => {
-  const { ref: loadRef, inView: loadInView } = useInView({
-    threshold: 0,
-    triggerOnce: true
-  });
-  const { ref: visibilityRef, entry } = useInView({
-    threshold: Array.from({ length: 11 }, (_, i) => i * 0.1),
-    triggerOnce: false
-  });
-  const setRefs = React48.useCallback(
-    (el) => {
-      if (typeof loadRef === "function") loadRef(el);
-      if (typeof visibilityRef === "function") visibilityRef(el);
-    },
-    [loadRef, visibilityRef]
-  );
-  const handleLoadSuccess = React48.useCallback(
-    (page) => {
-      onLoadSuccess(page);
-    },
-    [onLoadSuccess]
-  );
-  React48.useEffect(() => {
-    if (onInView && entry) {
-      onInView(pageNumber, entry.intersectionRatio || 0);
-    }
-  }, [entry, onInView, pageNumber]);
-  return /* @__PURE__ */ React48.createElement("div", { ref: setRefs }, loadInView ? /* @__PURE__ */ React48.createElement(
-    ChakraPage_default,
-    {
-      "data-page-number": pageNumber,
-      pageNumber,
-      scale,
-      width,
-      height,
-      onLoadSuccess: handleLoadSuccess,
-      fitMode,
-      rotate
-    }
-  ) : /* @__PURE__ */ React48.createElement(
-    Placeholder,
-    {
-      width: placeholderWidth,
-      height: placeholderHeight,
-      pageNumber
-    }
-  ));
-};
-var ScrollPage_default = ScrollPage;
-
-// src/PdfReader/useMeasure.tsx
-import * as React49 from "react";
-var DEFAULT_DIMENSION = {
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0
-};
-function useMeasure() {
-  const [element, ref] = React49.useState(null);
-  const [rect, setRect] = React49.useState(DEFAULT_DIMENSION);
-  const observer = React49.useMemo(
-    () => new window.ResizeObserver(
-      (entries) => {
-        if (entries[0]) {
-          const {
-            x,
-            y,
-            width,
-            height,
-            top,
-            left,
-            bottom,
-            right
-          } = entries[0].contentRect;
-          setRect({ x, y, width, height, top, left, bottom, right });
-        }
-      }
-    ),
-    []
-  );
-  React49.useLayoutEffect(() => {
-    if (!element) return;
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
-  }, [element, observer]);
-  return [ref, rect];
-}
-
-// src/PdfReader/index.tsx
-import "react-pdf/dist/Page/AnnotationLayer.css";
-import "react-pdf/dist/Page/TextLayer.css";
-
 // src/PdfReader/lib.ts
 var SCALE_STEP = 0.1;
 var START_QUERY = "start";
@@ -8067,6 +7929,118 @@ function isStartOfResource(pageNumber, resourceHref) {
   return pageNumber === (startPage != null ? startPage : 1);
 }
 
+// src/PdfReader/ScrollPage.tsx
+import React48 from "react";
+import { useInView } from "react-intersection-observer";
+var Placeholder = ({ width, height, pageNumber }) => {
+  return /* @__PURE__ */ React48.createElement(
+    "div",
+    {
+      "data-page-number": pageNumber,
+      style: { width, height }
+    }
+  );
+};
+var ScrollPage = ({
+  scale,
+  pageNumber,
+  width,
+  height,
+  onLoadSuccess,
+  onPageRef,
+  placeholderHeight,
+  placeholderWidth,
+  allowInView,
+  onInView,
+  fitMode,
+  rotate
+}) => {
+  const { ref: loadRef, inView: loadInView } = useInView({
+    threshold: 0,
+    triggerOnce: true
+  });
+  const { ref: visibilityRef, entry } = useInView({
+    threshold: Array.from({ length: 11 }, (_, i) => i * 0.1),
+    triggerOnce: false
+  });
+  const setRefs = React48.useCallback(
+    (el) => {
+      if (typeof loadRef === "function") loadRef(el);
+      if (typeof visibilityRef === "function") visibilityRef(el);
+      if (onPageRef) onPageRef(pageNumber, el);
+    },
+    [loadRef, onPageRef, pageNumber, visibilityRef]
+  );
+  const handleLoadSuccess = React48.useCallback(
+    (page) => {
+      onLoadSuccess(page);
+    },
+    [onLoadSuccess]
+  );
+  React48.useEffect(() => {
+    if (allowInView && onInView && entry) {
+      onInView(pageNumber, entry.intersectionRatio || 0);
+    }
+  }, [allowInView, entry, onInView, pageNumber]);
+  return /* @__PURE__ */ React48.createElement("div", { ref: setRefs }, loadInView ? /* @__PURE__ */ React48.createElement(
+    ChakraPage_default,
+    {
+      "data-page-number": pageNumber,
+      pageNumber,
+      scale,
+      width,
+      height,
+      onLoadSuccess: handleLoadSuccess,
+      fitMode,
+      rotate
+    }
+  ) : /* @__PURE__ */ React48.createElement(
+    Placeholder,
+    {
+      width: placeholderWidth,
+      height: placeholderHeight,
+      pageNumber
+    }
+  ));
+};
+var ScrollPage_default = ScrollPage;
+
+// src/PdfReader/useMeasure.tsx
+import * as React49 from "react";
+var DEFAULT_DIMENSION = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function useMeasure() {
+  const [element, ref] = React49.useState(null);
+  const [rect, setRect] = React49.useState(DEFAULT_DIMENSION);
+  const observer = React49.useMemo(
+    () => new window.ResizeObserver(
+      (entries) => {
+        if (entries[0]) {
+          const { x, y, width, height, top, left, bottom, right } = entries[0].contentRect;
+          setRect({ x, y, width, height, top, left, bottom, right });
+        }
+      }
+    ),
+    []
+  );
+  React49.useLayoutEffect(() => {
+    if (!element) return;
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [element, observer]);
+  return [ref, rect];
+}
+
 // src/PdfReader/index.tsx
 function usePdfReader(args) {
   var _a, _b, _c, _d, _e, _f;
@@ -8104,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 });
@@ -8177,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;
@@ -8206,21 +8190,40 @@ function usePdfReader(args) {
   ]);
   React50.useEffect(() => {
     var _a2;
-    if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling)) return;
-    if (!state2.rendered) return;
-    process.nextTick(() => {
-      const page = document.querySelector(
-        `[data-page-number="${state2.pageNumber}"]`
-      );
-      page == null ? void 0 : page.scrollIntoView();
-    });
+    if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling) || !state2.rendered) return;
+    if (scrollState.current.isInViewUpdate) {
+      scrollState.current.isInViewUpdate = false;
+      return;
+    }
+    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";
@@ -8246,35 +8249,40 @@ 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 intersectionRatios = React50.useRef({});
-  const lastMostVisiblePage = React50.useRef(state2.pageNumber);
   const onInView = React50.useCallback(
     (pageNum, ratio) => {
       var _a2;
-      if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling)) return;
-      intersectionRatios.current[pageNum] = ratio;
-      Object.keys(intersectionRatios.current).forEach((key) => {
-        if (intersectionRatios.current[Number(key)] === 0) {
-          delete intersectionRatios.current[Number(key)];
-        }
-      });
+      const currentScrollState = scrollState.current;
+      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;
+      }
+      currentScrollState.ratios.set(pageNum, ratio);
+      let mostVisiblePage = currentScrollState.lastVisiblePage;
       let maxRatio = -1;
-      let mostVisiblePage = state2.pageNumber;
-      for (const [page, r] of Object.entries(intersectionRatios.current)) {
+      for (const [p, r] of currentScrollState.ratios) {
         if (r > maxRatio) {
           maxRatio = r;
-          mostVisiblePage = Number(page);
+          mostVisiblePage = p;
         }
+        if (r > 0.8) break;
       }
-      if (mostVisiblePage !== lastMostVisiblePage.current) {
-        lastMostVisiblePage.current = mostVisiblePage;
+      if (mostVisiblePage !== currentScrollState.lastVisiblePage) {
+        currentScrollState.lastVisiblePage = mostVisiblePage;
         if (state2.pageNumber !== mostVisiblePage) {
+          currentScrollState.isInViewUpdate = true;
           dispatch({ type: "PAGE_IN_VIEW", page: mostVisiblePage });
         }
       }
@@ -8339,7 +8347,7 @@ function usePdfReader(args) {
         tabIndex: -1,
         id: MAIN_CONTENT_ID,
         ref: containerRef,
-        height: pageHeight,
+        height,
         sx: {
           ".react-pdf__Document": {
             width: "100%",
@@ -8358,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;
@@ -8373,10 +8382,11 @@ function usePdfReader(args) {
               scale: state2.scale,
               pageNumber: index + 1,
               onLoadSuccess: onRenderSuccess,
-              allowInView: !isFetching,
+              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(
@@ -8597,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,