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

package/dist/index.d.ts

@@ -36,11 +36,14 @@ interface Locations {
 declare const ReadiumWebpubContext = "http://readium.org/webpub/default.jsonld";
 declare const IS_DEV: boolean;
 declare const HEADER_HEIGHT = 48;
-declare const FOOTER_HEIGHT = 48;
-declare const CHROME_HEIGHT: number;
-declare const DEFAULT_HEIGHT: string;
+declare const CHROME_HEIGHT = 48;
+declare const DEFAULT_HEIGHT = "calc(100vh - 48px)";
 declare const DEFAULT_SHOULD_GROW_WHEN_SCROLLING = true;
+declare const READER_MARGIN = 16;
 declare const DEFAULT_SETTINGS: ReaderSettings;
+declare const DEFAULT_FIT_MODE = "height";
+declare const DEFAULT_FONT_HEIGHT = 100;
+declare const DEFAULT_FONT_WIDTH = 250;
 declare const FONT_DETAILS: {
     publisher: {
         heading: string;
@@ -73,7 +76,7 @@ declare const MAIN_CONTENT_ID = "mainContent";
 
 declare const WebpubPdfConformsTo = "http://librarysimplified.org/terms/profiles/pdf";
 declare const EpubConformsTo = "https://readium.org/webpub-manifest/profiles/epub";
-declare type ConformsTo = typeof WebpubPdfConformsTo | typeof EpubConformsTo;
+type ConformsTo = typeof WebpubPdfConformsTo | typeof EpubConformsTo;
 
 interface EPUBExtensionLinkProperties {
     /**
@@ -282,9 +285,9 @@ interface ContributorObject {
     links?: ReadiumLink[];
     [k: string]: unknown;
 }
-declare type Contributor = string | (string | ContributorObject)[] | ContributorObject;
+type Contributor = string | (string | ContributorObject)[] | ContributorObject;
 
-declare type LanguageMap = string | {
+type LanguageMap = string | {
     [k: string]: string;
 };
 
@@ -302,7 +305,7 @@ interface SubjectObject {
     links?: ReadiumLink[];
     [k: string]: unknown;
 }
-declare type Subject = string | (string | SubjectObject)[] | SubjectObject;
+type Subject = string | (string | SubjectObject)[] | SubjectObject;
 
 interface Metadata extends Contributors, EPUBExtensionMetadata {
     identifier?: string;
@@ -360,26 +363,30 @@ interface WebpubManifest {
     toc?: ReadiumLink[];
 }
 
-declare type ColorMode = 'night' | 'sepia' | 'day';
-declare type FontFamily = 'publisher' | 'serif' | 'sans-serif' | 'open-dyslexic';
-declare type Navigator = {
+type ColorMode = 'night' | 'sepia' | 'day';
+type FontFamily = 'publisher' | 'serif' | 'sans-serif' | 'open-dyslexic';
+type FitMode = 'width' | 'height';
+type Navigator = {
     goForward: () => void;
     goBackward: () => void;
     setScroll: (val: 'scrolling' | 'paginated') => Promise<void>;
     goToPage: (href: string) => void;
+    goToPageNumber: (pageNumber: number) => void;
+    setFitMode: (mode: FitMode) => void;
 };
-declare type PdfNavigator = Navigator & {
+type PdfNavigator = Navigator & {
     zoomIn: () => Promise<void>;
     zoomOut: () => Promise<void>;
+    rotateCounterClockwise: () => void;
 };
-declare type HtmlNavigator = Navigator & {
+type HtmlNavigator = Navigator & {
     increaseFontSize: () => Promise<void>;
     decreaseFontSize: () => Promise<void>;
-    resetSettings: () => Promise<void>;
     setFontFamily: (family: FontFamily) => Promise<void>;
     setColorMode: (mode: ColorMode) => Promise<void>;
+    resetSettings: () => Promise<void>;
 };
-declare type ReaderSettings = {
+type ReaderSettings = {
     colorMode: ColorMode;
     isScrolling: boolean;
     fontSize: number;
@@ -391,14 +398,16 @@ declare type ReaderSettings = {
  * reader (pdf/html) has its own internal state with
  * more details necessary for rendering
  */
-declare type ReaderState = {
+type ReaderState = {
     atStart: boolean;
     atEnd: boolean;
     location?: Locator;
     settings: ReaderSettings | undefined;
+    fitMode: FitMode;
+    rotation?: number;
 };
-declare type InactiveReader = null;
-declare type LoadingReader = {
+type InactiveReader = null;
+type LoadingReader = {
     isLoading: true;
     content: JSX.Element;
     navigator: null;
@@ -406,31 +415,31 @@ declare type LoadingReader = {
     manifest: null;
     type: null;
 };
-declare type CommonReader = {
+type CommonReader = {
     isLoading: false;
     content: JSX.Element;
     manifest: WebpubManifest;
+    currentPage: number;
+    totalPages: number;
+    toggleFullScreen?: () => void;
 };
-declare type PDFActiveReader = CommonReader & {
+type PDFActiveReader = CommonReader & {
     state: ReaderState;
     navigator: PdfNavigator;
     type: 'PDF';
 };
-declare type HTMLActiveReader = CommonReader & {
+type HTMLActiveReader = CommonReader & {
     state: ReaderState;
     navigator: HtmlNavigator;
     type: 'HTML';
 };
-declare type ActiveReader = PDFActiveReader | HTMLActiveReader;
-declare type ReaderReturn = InactiveReader | LoadingReader | ActiveReader;
-declare type GetContent = (href: string) => Promise<string>;
-declare type ReaderManagerArguments = {
-    headerLeft?: JSX.Element;
-};
-declare type UseWebReaderArguments = {
+type ActiveReader = PDFActiveReader | HTMLActiveReader;
+type ReaderReturn = InactiveReader | LoadingReader | ActiveReader;
+type GetContent<T extends string | Uint8Array> = (href: string, proxyUrl?: string) => Promise<T>;
+type UseWebReaderArguments<T extends string | Uint8Array> = {
     webpubManifestUrl: string;
     proxyUrl?: string;
-    getContent?: GetContent;
+    getContent?: GetContent<T>;
     pdfWorkerSrc?: string;
     injectablesReflowable?: Injectable[];
     injectablesFixed?: Injectable[];
@@ -469,21 +478,21 @@ declare type UseWebReaderArguments = {
      * Default: `true`
      */
     persistSettings?: boolean;
+    /**
+     * Optional callback to expand the reader to full viewport.
+     */
+    toggleFullScreen?: () => void;
 };
-declare type ActiveReaderArguments = UseWebReaderArguments & {
+type ActiveReaderArguments<T extends string | Uint8Array> = UseWebReaderArguments<T> & {
     manifest: WebpubManifest;
 };
-declare type InactiveReaderArguments = undefined;
-declare type ReaderArguments = ActiveReaderArguments | InactiveReaderArguments;
+type InactiveReaderArguments = undefined;
 
-/**
- * The React hook that exposes the main API into the reader. It
- * will determine the type of the webpub, and then use the correct reader
- * for that type.
- */
-declare function useWebReader(args: UseWebReaderArguments): HTMLActiveReader | PDFActiveReader | LoadingReader;
+type HtmlReaderArguments = ActiveReaderArguments<string> | InactiveReaderArguments;
 
-declare function useHtmlReader(args: ReaderArguments): ReaderReturn;
+declare function useHtmlReader(args: HtmlReaderArguments): ReaderReturn;
+
+type PdfReaderArguments = ActiveReaderArguments<Uint8Array> | InactiveReaderArguments;
 
 /**
  * The PDF reader
@@ -494,9 +503,21 @@ declare function useHtmlReader(args: ReaderArguments): ReaderReturn;
  * @param args T
  * @returns
  */
-declare function usePdfReader(args: ReaderArguments): ReaderReturn;
+declare function usePdfReader(args: PdfReaderArguments): ReaderReturn;
 
-declare type Dict<T = any> = Record<string, T>;
+/**
+ * Adds TOC data to Webpub Manifest from single-resource PDF using PDF.js
+ * @param manifest
+ * @param getResource - a function to get the resource. This allows the caller
+ * to decide how to get the resource, for example through a proxy if necessary.
+ * @param pdfWorkerSrc - the path to the pdfjs worker file. Necessary to use pdfjs.
+ * @returns {WebpubManifest} manifest object
+ */
+declare function addTocToManifest(manifest: WebpubManifest, getResource: (url: string) => Promise<Uint8Array>, pdfWorkerSrc: string): Promise<WebpubManifest>;
+
+declare const useColorModeValue: (light: string, dark: string, sepia: string) => string;
+
+type Dict<T = any> = Record<string, T>;
 
 /**
  * See Chakra default theme for shape of theme object:
@@ -509,25 +530,20 @@ declare type Dict<T = any> = Record<string, T>;
  */
 declare function getTheme(colorMode?: ColorMode): Dict<unknown>;
 
-declare const useColorModeValue: (light: string, dark: string, sepia: string) => string;
-
-declare function clearWebReaderLocalStorage(): void;
-
 /**
- * Adds TOC data to Webpub Manifest from single-resource PDF using PDF.js
- * @param manifest
- * @param getResource - a function to get the resource. This allows the caller
- * to decide how to get the resource, for example through a proxy if necessary.
- * @param pdfWorkerSrc - the path to the pdfjs worker file. Necessary to use pdfjs.
- * @returns {WebpubManifest} manifest object
+ * The React hook that exposes the main API into the reader. It
+ * will determine the type of the webpub, and then use the correct reader
+ * for that type.
  */
-declare function addTocToManifest(manifest: WebpubManifest, getResource: (url: string) => Promise<Uint8Array>, pdfWorkerSrc: string): Promise<WebpubManifest>;
+declare function useWebReader(args: UseWebReaderArguments<string | Uint8Array>): HTMLActiveReader | PDFActiveReader | LoadingReader;
+
+declare function clearWebReaderLocalStorage(): void;
 
 /**
  * The main React component export.
  */
-declare type WebReaderProps = UseWebReaderArguments & ReaderManagerArguments;
+type WebReaderProps = UseWebReaderArguments<string | Uint8Array>;
 declare const WebReaderWithoutBoundary: FC<WebReaderProps>;
 declare const WebReader: FC<WebReaderProps>;
 
-export { CHROME_HEIGHT, DEFAULT_HEIGHT, DEFAULT_SETTINGS, DEFAULT_SHOULD_GROW_WHEN_SCROLLING, FONT_DETAILS, FOOTER_HEIGHT, HEADER_HEIGHT, IS_DEV, LOCAL_STORAGE_LOCATIONS_KEY, LOCAL_STORAGE_SETTINGS_KEY, MAIN_CONTENT_ID, ReadiumLink, ReadiumWebpubContext, WebReaderProps, WebReaderWithoutBoundary, 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, 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 };