@nypl/web-reader 0.2.0-alpha.1 → 0.2.0-alpha.6

package/dist/esm/index.js

@@ -36371,35 +36371,17 @@ var ToggleGroup_default = ToggleGroup;
 
 // src/ui/PdfSettings.tsx
 function PdfSettings(props) {
-  const { navigator: navigator2, readerState, paginationValue } = props;
-  const { fontFamily } = readerState;
-  const {
-    setFontFamily,
-    decreaseFontSize,
-    increaseFontSize,
-    setScroll
-  } = navigator2;
-  return /* @__PURE__ */ createElement29(Fragment4, null, /* @__PURE__ */ createElement29(ToggleGroup_default, {
-    value: fontFamily,
-    label: "text font options",
-    onChange: setFontFamily
-  }, /* @__PURE__ */ createElement29(ToggleButton_default, {
-    value: "publisher"
-  }, "Publisher"), /* @__PURE__ */ createElement29(ToggleButton_default, {
-    value: "serif"
-  }, "Serif"), /* @__PURE__ */ createElement29(ToggleButton_default, {
-    value: "sans-serif"
-  }, "Sans-Serif"), /* @__PURE__ */ createElement29(ToggleButton_default, {
-    value: "open-dyslexic"
-  }, "Dyslexia-Friendly")), /* @__PURE__ */ createElement29(ButtonGroup, {
+  const { navigator: navigator2, paginationValue } = props;
+  const { zoomOut, zoomIn, setScroll } = navigator2;
+  return /* @__PURE__ */ createElement29(Fragment4, null, /* @__PURE__ */ createElement29(ButtonGroup, {
     d: "flex",
     spacing: 0
   }, /* @__PURE__ */ createElement29(Button_default, {
     flexGrow: 1,
-    "aria-label": "Zoom In",
-    onClick: decreaseFontSize,
+    "aria-label": "Zoom Out",
+    onClick: zoomOut,
     variant: "toggle"
-  }, "Zoom", /* @__PURE__ */ createElement29(Circle, {
+  }, "Zoom Out", /* @__PURE__ */ createElement29(Circle, {
     border: "1px solid",
     p: 1,
     ml: 1,
@@ -36409,12 +36391,12 @@ function PdfSettings(props) {
     decorative: true,
     name: import_design_system_react_components2.IconNames.minus,
     modifiers: ["small"]
-  }), " ")), /* @__PURE__ */ createElement29(Button_default, {
+  }))), /* @__PURE__ */ createElement29(Button_default, {
     flexGrow: 1,
-    "aria-label": "Zoom Out",
-    onClick: increaseFontSize,
+    "aria-label": "Zoom In",
+    onClick: zoomIn,
     variant: "toggle"
-  }, "Zoom", /* @__PURE__ */ createElement29(Circle, {
+  }, "Zoom In", /* @__PURE__ */ createElement29(Circle, {
     border: "1px solid",
     p: 1,
     ml: 1,
@@ -36424,7 +36406,7 @@ function PdfSettings(props) {
     decorative: true,
     name: import_design_system_react_components2.IconNames.plus,
     modifiers: ["small"]
-  }), " "))), /* @__PURE__ */ createElement29(ToggleGroup_default, {
+  })))), /* @__PURE__ */ createElement29(ToggleGroup_default, {
     onChange: setScroll,
     value: paginationValue,
     label: "pagination options"
@@ -36507,11 +36489,11 @@ function HtmlSettings(props) {
 
 // src/ui/SettingsButton.tsx
 function SettingsCard(props) {
+  var _a;
   const [isOpen, setIsOpen] = useState16(false);
   const open = () => setIsOpen(!isOpen);
   const close = () => setIsOpen(false);
-  const { navigator: navigator2, state, type } = props;
-  const paginationValue = (state == null ? void 0 : state.isScrolling) ? "scrolling" : "paginated";
+  const paginationValue = ((_a = props.state) == null ? void 0 : _a.isScrolling) ? "scrolling" : "paginated";
   const contentBgColor = useColorModeValue_default("ui.white", "ui.black", "ui.white");
   return /* @__PURE__ */ createElement31(Fragment6, null, /* @__PURE__ */ createElement31(Popover, {
     placement: "bottom",
@@ -36534,13 +36516,13 @@ function SettingsCard(props) {
   }, /* @__PURE__ */ createElement31(PopoverBody, {
     p: 0,
     maxWidth: "95vw"
-  }, type === "PDF" && /* @__PURE__ */ createElement31(PdfSettings, {
-    navigator: navigator2,
-    readerState: state,
+  }, props.type === "PDF" && /* @__PURE__ */ createElement31(PdfSettings, {
+    navigator: props.navigator,
+    readerState: props.state,
     paginationValue
-  }), type === "HTML" && /* @__PURE__ */ createElement31(HtmlSettings, {
-    navigator: navigator2,
-    readerState: state,
+  }), props.type === "HTML" && /* @__PURE__ */ createElement31(HtmlSettings, {
+    navigator: props.navigator,
+    readerState: props.state,
     paginationValue
   })))));
 }
@@ -36646,15 +36628,29 @@ function TableOfContent({
 }
 
 // src/ui/Header.tsx
+var DefaultHeaderLeft = () => {
+  const linkColor = useColorModeValue_default("gray.700", "gray.100", "gray.700");
+  return /* @__PURE__ */ React50.createElement(Link, {
+    href: "/",
+    "aria-label": "Return to Homepage",
+    tabIndex: 0,
+    fontSize: 0,
+    py: 1,
+    textTransform: "uppercase",
+    d: "flex",
+    color: linkColor,
+    height: "100%",
+    alignItems: "center",
+    _hover: {
+      textDecoration: "none"
+    }
+  }, /* @__PURE__ */ React50.createElement(Text, {
+    variant: "headerNav"
+  }, "Back to Homepage"));
+};
 function Header(props) {
   const { headerLeft, state, navigator: navigator2, manifest } = props;
-  const linkColor = useColorModeValue_default("gray.700", "gray.100", "gray.700");
   const mainBgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
-  const ChakraIcon = chakra(import_design_system_react_components5.Icon, {
-    baseStyle: {
-      height: "100%"
-    }
-  });
   return /* @__PURE__ */ React50.createElement(Flex, {
     as: "header",
     position: "sticky",
@@ -36669,27 +36665,7 @@ function Header(props) {
     borderBottom: "1px solid",
     borderColor: "gray.100",
     bgColor: mainBgColor
-  }, headerLeft ? headerLeft : /* @__PURE__ */ React50.createElement(Link, {
-    href: "https://www.nypl.org",
-    "aria-label": "Return to NYPL",
-    tabIndex: 0,
-    fontSize: 0,
-    py: 1,
-    textTransform: "uppercase",
-    d: "flex",
-    color: linkColor,
-    height: "100%",
-    alignItems: "center",
-    _hover: {
-      textDecoration: "none"
-    }
-  }, /* @__PURE__ */ React50.createElement(ChakraIcon, {
-    decorative: true,
-    name: import_design_system_react_components5.LogoNames.logo_nypl,
-    modifiers: ["xlarge"]
-  }), /* @__PURE__ */ React50.createElement(Text, {
-    variant: "headerNav"
-  }, "Return to NYPL")), /* @__PURE__ */ React50.createElement(HStack, {
+  }, headerLeft != null ? headerLeft : /* @__PURE__ */ React50.createElement(DefaultHeaderLeft, null), /* @__PURE__ */ React50.createElement(HStack, {
     ml: "auto",
     spacing: 1
   }, /* @__PURE__ */ React50.createElement(TableOfContent, {
@@ -36741,14 +36717,22 @@ var ManagerUI = (props) => {
   }, /* @__PURE__ */ createElement32(WebReaderContent, __spreadValues({}, props)));
 };
 var WebReaderContent = (_a) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  var _b = _a, {
+    children,
+    headerLeft
+  } = _b, props = __objRest(_b, [
+    "children",
+    "headerLeft"
+  ]);
   var _a2, _b2;
   const bgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
   return /* @__PURE__ */ createElement32(Flex, {
     flexDir: "column",
     minHeight: "100vh",
     w: "100vw"
-  }, !props.isLoading && /* @__PURE__ */ createElement32(Header, __spreadValues({}, props)), /* @__PURE__ */ createElement32(PageButton_default, {
+  }, !props.isLoading && /* @__PURE__ */ createElement32(Header, __spreadValues({
+    headerLeft
+  }, props)), /* @__PURE__ */ createElement32(PageButton_default, {
     onClick: (_a2 = props.navigator) == null ? void 0 : _a2.goBackward,
     left: 0,
     pr: 2,
@@ -36759,7 +36743,6 @@ var WebReaderContent = (_a) => {
     modifiers: ["small"],
     iconRotation: import_design_system_react_components6.IconRotationTypes.rotate90
   })), /* @__PURE__ */ createElement32(Flex, {
-    width: "100vw",
     bg: bgColor,
     px: { sm: 10, md: "5vw" },
     flexDir: "column",
@@ -39796,7 +39779,6 @@ function useMeasure() {
 }
 
 // src/PdfReader/index.tsx
-pdfjs4.GlobalWorkerOptions.workerSrc = `pdf.worker.min.js`;
 var IFRAME_WRAPPER_ID = "iframe-wrapper";
 function pdfReducer(state, action) {
   switch (action.type) {
@@ -39820,10 +39802,6 @@ function pdfReducer(state, action) {
       return __spreadProps(__spreadValues({}, state), {
         pageNumber: action.pageNum
       });
-    case "SET_COLOR_MODE":
-      return __spreadProps(__spreadValues({}, state), {
-        colorMode: action.mode
-      });
     case "SET_SCROLL":
       return __spreadProps(__spreadValues({}, state), {
         isScrolling: action.isScrolling
@@ -39862,6 +39840,9 @@ var loadResource = (resourceUrl, proxyUrl) => __async(void 0, null, function* ()
   return array;
 });
 function usePdfReader(args) {
+  if (args == null ? void 0 : args.pdfWorkerSrc) {
+    pdfjs4.GlobalWorkerOptions.workerSrc = args.pdfWorkerSrc;
+  }
   const { webpubManifestUrl, manifest, proxyUrl } = args != null ? args : {};
   const [state, dispatch] = useReducer(pdfReducer, {
     colorMode: "day",
@@ -39970,28 +39951,22 @@ function usePdfReader(args) {
     state.pageNumber,
     state.resourceIndex
   ]);
-  const setColorMode = useCallback19(() => __async(this, null, function* () {
-    console.log("unimplemented");
-  }), []);
   const setScroll = useCallback19((val) => __async(this, null, function* () {
     const isScrolling = val === "scrolling";
     dispatch({ type: "SET_SCROLL", isScrolling });
   }), []);
-  const increaseFontSize = useCallback19(() => __async(this, null, function* () {
+  const zoomIn = useCallback19(() => __async(this, null, function* () {
     dispatch({
       type: "SET_SCALE",
       scale: state.scale + 0.1
     });
   }), [state.scale]);
-  const decreaseFontSize = useCallback19(() => __async(this, null, function* () {
+  const zoomOut = useCallback19(() => __async(this, null, function* () {
     dispatch({
       type: "SET_SCALE",
       scale: state.scale - 0.1
     });
   }), [state.scale]);
-  const setFontFamily = useCallback19(() => __async(this, null, function* () {
-    console.log("unimplemented");
-  }), []);
   const goToPage = useCallback19((href) => __async(this, null, function* () {
     const getIndexFromHref = (href2) => {
       var _a;
@@ -40029,10 +40004,8 @@ function usePdfReader(args) {
       navigator: {
         goForward,
         goBackward,
-        increaseFontSize,
-        decreaseFontSize,
-        setFontFamily,
-        setColorMode,
+        zoomIn,
+        zoomOut,
         setScroll,
         goToPage
       }
@@ -40089,11 +40062,9 @@ function usePdfReader(args) {
     navigator: {
       goForward,
       goBackward,
-      setColorMode,
       setScroll,
-      increaseFontSize,
-      decreaseFontSize,
-      setFontFamily,
+      zoomIn,
+      zoomOut,
       goToPage
     }
   };
@@ -88520,6 +88491,9 @@ function useHtmlReader(args) {
         navHeight: HEADER_HEIGHT,
         margin: 0
       },
+      rights: {
+        autoGeneratePositions: false
+      },
       api: {
         getContent
       }
@@ -88651,7 +88625,7 @@ var r2FamilyToFamily = {
 };
 
 // src/WebpubManifestTypes/ConformsTo.ts
-var WebpubPdfConformsTo = "https://librarysimplified.org/terms/profiles/pdf";
+var WebpubPdfConformsTo = "http://librarysimplified.org/terms/profiles/pdf";
 var AxisNowEpubConformsTo = "stub/webpub+axisnow";
 
 // src/useWebReader.tsx
@@ -88668,7 +88642,7 @@ function getReaderType(conformsTo) {
   }
 }
 function useWebReader(args) {
-  const { webpubManifestUrl, getContent, proxyUrl } = args;
+  const { webpubManifestUrl, getContent, proxyUrl, pdfWorkerSrc } = args;
   const [manifest, setManifest] = React67.useState(null);
   const readerType = getReaderType(manifest ? manifest.metadata.conformsTo : null);
   const htmlReader = useHtmlReader(readerType === "HTML" && manifest ? {
@@ -88679,7 +88653,8 @@ function useWebReader(args) {
   const pdfReader = usePdfReader(readerType === "PDF" && manifest ? {
     webpubManifestUrl,
     manifest,
-    proxyUrl
+    proxyUrl,
+    pdfWorkerSrc
   } : void 0);
   React67.useEffect(() => {
     fetchJson(webpubManifestUrl).then(setManifest);
@@ -88704,18 +88679,27 @@ function useWebReader(args) {
 }
 
 // src/index.tsx
-var WebReader = ({
-  webpubManifestUrl,
-  proxyUrl,
-  getContent
-}) => {
-  const webReader = useWebReader({
+var WebReader = (_a) => {
+  var _b = _a, {
+    webpubManifestUrl,
+    proxyUrl,
+    getContent,
+    headerLeft
+  } = _b, props = __objRest(_b, [
+    "webpubManifestUrl",
+    "proxyUrl",
+    "getContent",
+    "headerLeft"
+  ]);
+  const webReader = useWebReader(__spreadValues({
     webpubManifestUrl,
     proxyUrl,
     getContent
-  });
+  }, props));
   const { content } = webReader;
-  return /* @__PURE__ */ React68.createElement(manager_default, __spreadValues({}, webReader), content);
+  return /* @__PURE__ */ React68.createElement(manager_default, __spreadValues({
+    headerLeft
+  }, webReader), content);
 };
 var src_default2 = WebReader;
 export {