@nypl/web-reader 5.0.0-alpha.0 → 5.0.0

package/dist/index.mjs

@@ -3506,10 +3506,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 +6138,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 +6764,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 +7332,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 +7697,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 +7928,116 @@ 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,
+  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 (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;
@@ -8208,6 +8179,10 @@ function usePdfReader(args) {
     var _a2;
     if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling)) return;
     if (!state2.rendered) return;
+    if (scrollState.current.isInViewUpdate) {
+      scrollState.current.isInViewUpdate = false;
+      return;
+    }
     process.nextTick(() => {
       const page = document.querySelector(
         `[data-page-number="${state2.pageNumber}"]`
@@ -8252,29 +8227,38 @@ function usePdfReader(args) {
   const setFitMode = React50.useCallback((mode) => {
     dispatch({ type: "SET_FIT_MODE", fitMode: mode });
   }, []);
-  const intersectionRatios = React50.useRef({});
-  const lastMostVisiblePage = React50.useRef(state2.pageNumber);
+  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;
-      intersectionRatios.current[pageNum] = ratio;
-      Object.keys(intersectionRatios.current).forEach((key) => {
-        if (intersectionRatios.current[Number(key)] === 0) {
-          delete intersectionRatios.current[Number(key)];
-        }
-      });
+      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;
+      }
+      let mostVisiblePage = currentScrollState.lastVisiblepage;
       let maxRatio = -1;
-      let mostVisiblePage = state2.pageNumber;
-      for (const [page, r] of Object.entries(intersectionRatios.current)) {
+      currentScrollState.ratios.forEach((r, p) => {
         if (r > maxRatio) {
           maxRatio = r;
-          mostVisiblePage = Number(page);
+          mostVisiblePage = p;
         }
-      }
-      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 });
         }
       }
@@ -8373,7 +8357,7 @@ 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