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

package/README.md

@@ -123,6 +123,18 @@ There are two different injectables props you can pass to the web reader.
 
 Your app can provide both props or only one. The reader will decide which one to load into the iframe based on the book format defined in the webpub manifest.
 
+## Required CSS for the PDF Reader (Text & Annotation Layers)
+
+When rendering PDFs the library relies on `react-pdf`'s text and annotation layer styles.
+
+To avoid importing global CSS from inside distributed JS in Next.js applications, you must import global CSS only from the app root (`pages/_app.js` / `pages/_app.tsx` or `app/layout.tsx`). After installing `@nypl/web-reader`, import the following CSS from your application root:
+
+```js
+// pages/_app.tsx or app/layout.tsx
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
+```
+
 ## Other Injectables
 
 You can import and inject other files into the `<WebReader />` to customize behavior. For example, in Open eBooks, we import some [custom JavaScript](https://github.com/NYPL/ereading-clients/blob/staging/apps/oew/src/components/theme-ui/WebReader.tsx#L65) to disable right clicking & copying copywritten content.

package/dist/index.js

@@ -3515,10 +3515,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({
@@ -6129,14 +6126,7 @@ function Header(props) {
   var _a, _b, _c, _d;
   const [, toggleFullscreenHook] = useFullscreen();
   const [isFullscreen, setIsFullScreen] = (0, import_react84.useState)(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(
@@ -6756,12 +6746,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(
@@ -7328,9 +7314,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,
@@ -7695,129 +7679,6 @@ var ChakraPage = (0, import_react96.chakra)(
 );
 var ChakraPage_default = ChakraPage;
 
-// src/PdfReader/ScrollPage.tsx
-var import_react98 = __toESM(require("react"));
-var import_react_intersection_observer = require("react-intersection-observer");
-var Placeholder = ({ width, height, pageNumber }) => {
-  return /* @__PURE__ */ import_react98.default.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 } = (0, import_react_intersection_observer.useInView)({
-    threshold: 0,
-    triggerOnce: true
-  });
-  const { ref: visibilityRef, entry } = (0, import_react_intersection_observer.useInView)({
-    threshold: Array.from({ length: 11 }, (_, i) => i * 0.1),
-    triggerOnce: false
-  });
-  const setRefs = import_react98.default.useCallback(
-    (el) => {
-      if (typeof loadRef === "function") loadRef(el);
-      if (typeof visibilityRef === "function") visibilityRef(el);
-    },
-    [loadRef, visibilityRef]
-  );
-  const handleLoadSuccess = import_react98.default.useCallback(
-    (page) => {
-      onLoadSuccess(page);
-    },
-    [onLoadSuccess]
-  );
-  import_react98.default.useEffect(() => {
-    if (onInView && entry) {
-      onInView(pageNumber, entry.intersectionRatio || 0);
-    }
-  }, [entry, onInView, pageNumber]);
-  return /* @__PURE__ */ import_react98.default.createElement("div", { ref: setRefs }, loadInView ? /* @__PURE__ */ import_react98.default.createElement(
-    ChakraPage_default,
-    {
-      "data-page-number": pageNumber,
-      pageNumber,
-      scale,
-      width,
-      height,
-      onLoadSuccess: handleLoadSuccess,
-      fitMode,
-      rotate
-    }
-  ) : /* @__PURE__ */ import_react98.default.createElement(
-    Placeholder,
-    {
-      width: placeholderWidth,
-      height: placeholderHeight,
-      pageNumber
-    }
-  ));
-};
-var ScrollPage_default = ScrollPage;
-
-// src/PdfReader/useMeasure.tsx
-var React49 = __toESM(require("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
-var import_AnnotationLayer = require("react-pdf/dist/Page/AnnotationLayer.css");
-var import_TextLayer = require("react-pdf/dist/Page/TextLayer.css");
-
 // src/PdfReader/lib.ts
 var SCALE_STEP = 0.1;
 var START_QUERY = "start";
@@ -8049,6 +7910,116 @@ function isStartOfResource(pageNumber, resourceHref) {
   return pageNumber === (startPage != null ? startPage : 1);
 }
 
+// src/PdfReader/ScrollPage.tsx
+var import_react98 = __toESM(require("react"));
+var import_react_intersection_observer = require("react-intersection-observer");
+var Placeholder = ({ width, height, pageNumber }) => {
+  return /* @__PURE__ */ import_react98.default.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 } = (0, import_react_intersection_observer.useInView)({
+    threshold: 0,
+    triggerOnce: true
+  });
+  const { ref: visibilityRef, entry } = (0, import_react_intersection_observer.useInView)({
+    threshold: Array.from({ length: 11 }, (_, i) => i * 0.1),
+    triggerOnce: false
+  });
+  const setRefs = import_react98.default.useCallback(
+    (el) => {
+      if (typeof loadRef === "function") loadRef(el);
+      if (typeof visibilityRef === "function") visibilityRef(el);
+    },
+    [loadRef, visibilityRef]
+  );
+  const handleLoadSuccess = import_react98.default.useCallback(
+    (page) => {
+      onLoadSuccess(page);
+    },
+    [onLoadSuccess]
+  );
+  import_react98.default.useEffect(() => {
+    if (allowInView && onInView && entry) {
+      onInView(pageNumber, entry.intersectionRatio || 0);
+    }
+  }, [allowInView, entry, onInView, pageNumber]);
+  return /* @__PURE__ */ import_react98.default.createElement("div", { ref: setRefs }, loadInView ? /* @__PURE__ */ import_react98.default.createElement(
+    ChakraPage_default,
+    {
+      "data-page-number": pageNumber,
+      pageNumber,
+      scale,
+      width,
+      height,
+      onLoadSuccess: handleLoadSuccess,
+      fitMode,
+      rotate
+    }
+  ) : /* @__PURE__ */ import_react98.default.createElement(
+    Placeholder,
+    {
+      width: placeholderWidth,
+      height: placeholderHeight,
+      pageNumber
+    }
+  ));
+};
+var ScrollPage_default = ScrollPage;
+
+// src/PdfReader/useMeasure.tsx
+var React49 = __toESM(require("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;
@@ -8190,6 +8161,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}"]`
@@ -8234,29 +8209,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 });
         }
       }
@@ -8355,7 +8339,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