@nypl/web-reader 1.0.0 → 1.1.0-2

package/dist/types/HtmlReader/lib.d.ts

@@ -0,0 +1,112 @@
+import { Injectable } from '../Readium/Injectable';
+import { Locator } from '../Readium/Locator';
+import { WebpubManifest, ColorMode, FontFamily } from '../types';
+import { ReadiumLink } from '../WebpubManifestTypes/ReadiumLink';
+import { ActiveState } from './types';
+/**
+ * Constants
+ */
+export declare const FONT_SIZE_STEP = 4;
+/**
+ * If we provide injectables that are not found, the app won't load at all.
+ * Therefore we will not provide any default injectables.
+ * @todo - this is not true in our custom renderer. We should provide default injectables.
+ */
+export declare const defaultInjectables: Injectable[];
+export declare const defaultInjectablesFixed: Injectable[];
+/**
+ * Creates an element for an injectable so it can be injected into the iframe.
+ */
+export declare function makeInjectableElement(document: Document, injectable: Injectable): HTMLElement | undefined;
+/**
+ * gets the index of the current location href
+ */
+export declare function getCurrentIndex(manifest: WebpubManifest, state: ActiveState, baseUrl: string): number;
+/**
+ * Find a link in the reading order from a passed in href.
+ */
+export declare function getFromReadingOrder(href: string, manifest: WebpubManifest, baseUrl: string): {
+    link: ReadiumLink;
+    index: number;
+} | undefined;
+/**
+ * Check if two hrefs share the same pathname. They can be absolute
+ * or relative. This will ignore hash and query params.
+ */
+export declare function isSameResource(href1: string, href2: string, baseUrl: string): boolean;
+/**
+ * Converts a ReadiumLink to a Locator
+ */
+export declare function linkToLocator(link: ReadiumLink, baseUrl: string, locations?: Locator['locations']): Locator;
+declare type CalculatedPosition = {
+    isHorizontalPaginated: boolean;
+    containerSize: number;
+    containerWidth: number;
+    containerHeight: number;
+    pageSize: number;
+    resourceSize: number;
+    scrollPosition: number;
+    totalPages: number;
+    progression: number;
+    currentPage: number;
+    currentPageFloor: number;
+    isAtEnd: boolean;
+    isAtStart: boolean;
+};
+/**
+ * Calculate current position information
+ */
+export declare function calcPosition(iframe: HTMLIFrameElement, isScrolling: boolean): CalculatedPosition;
+/**
+ * Gets scroll position of an element
+ */
+export declare function getScrollPosition(element: HTMLElement | undefined | null): {
+    x: number;
+    y: number;
+};
+/**
+ * Fetches a resource as text
+ */
+export declare function fetchAsTxt(url: string): Promise<string>;
+/**
+ * Inject some raw JS into the iframe document
+ */
+export declare function injectJS(document: Document): void;
+export declare function getMaybeIframeHtml(iframe: HTMLIFrameElement): HTMLElement | undefined;
+/**
+ * Get the HTML element of the iframe
+ */
+export declare function getIframeHTML(iframe: HTMLIFrameElement): HTMLElement;
+/**
+ * Sets a CSS var on the html element in the iframe. Used to set
+ * ReadiumCSS settings like scrolling and color mode and font
+ * size.
+ */
+export declare function setCSSProperty(html: HTMLElement, name: string, val: string): void;
+/**
+ * Translates the readium scroll css var into a boolean
+ */
+export declare function getPagination(isPaginated: boolean): 'readium-scroll-on' | 'readium-scroll-off';
+/**
+ * Translates the internal color mode value into a Readium
+ * color mode value.
+ */
+export declare function getColorModeValue(mode: ColorMode): 'readium-default-on' | 'readium-night-on' | 'readium-sepia-on';
+/**
+ * Translates the readium color mode value into an internal
+ * color mode value
+ */
+export declare function getColorMode(d2Mode: string): ColorMode;
+/**
+ * Gets the Readium font-override setting based on the given font family.
+ */
+export declare function getFontOverride(fontFamily: FontFamily): 'readium-font-off' | 'readium-font-on';
+/**
+ * Translates the internal font family to a readium css font family value.
+ */
+export declare const familyToReadiumFamily: Record<FontFamily, string>;
+/**
+ * Translates a readium css font family to an internal font family.
+ */
+export declare const r2FamilyToFamily: Record<string, FontFamily | undefined>;
+export {};

package/dist/types/HtmlReader/reducer.d.ts

@@ -0,0 +1,8 @@
+import { ReaderArguments } from '../types';
+import { HtmlAction, HtmlState, InactiveState } from './types';
+/**
+ * A higher order function that makes it easy to access arguments in the reducer
+ * without passing them in to every `dispatch` call.
+ */
+export default function makeHtmlReducer(args: ReaderArguments): (state: HtmlState, action: HtmlAction) => HtmlState;
+export declare const inactiveState: InactiveState;

package/dist/types/HtmlReader/types.d.ts

@@ -0,0 +1,109 @@
+import { Locator } from '../Readium/Locator';
+import { ColorMode, FontFamily, HtmlReaderState, ReaderArguments, ReaderState } from '../types';
+/**
+ * Html Reader States
+ *  - Can be broken into distinct states that we create a union from.
+ *    This helps us avoid invalid states.
+ *  - We include a `state` property so that it is easy to narrow the type
+ *    of a given HtmlState to a specific state in the union.
+ */
+export declare type HtmlState = InactiveState | ActiveState;
+export declare type ActiveState = FetchingResourceState | ResourceFetchErrorState | RenderingIframeState | LoadingIframeState | NavigatingState | ReadyState;
+export declare type InactiveState = ReaderState & {
+    state: 'INACTIVE';
+    location: undefined;
+    iframe: null;
+    resource: undefined;
+    resourceFetchError: undefined;
+};
+export declare type FetchingResourceState = HtmlReaderState & {
+    state: 'FETCHING_RESOURCE';
+    location: Locator;
+    iframe: null;
+    resource: undefined;
+    resourceFetchError: undefined;
+};
+export declare type ResourceFetchErrorState = HtmlReaderState & {
+    state: 'RESOURCE_FETCH_ERROR';
+    location: Locator;
+    iframe: null;
+    resource: undefined;
+    resourceFetchError: Error;
+};
+export declare type RenderingIframeState = HtmlReaderState & {
+    state: 'RENDERING_IFRAME';
+    location: Locator;
+    iframe: null;
+    resource: string;
+    resourceFetchError: undefined;
+};
+export declare type LoadingIframeState = HtmlReaderState & {
+    state: 'LOADING_IFRAME';
+    location: Locator;
+    iframe: HTMLIFrameElement;
+    resource: string;
+    resourceFetchError: undefined;
+};
+export declare type NavigatingState = HtmlReaderState & {
+    state: 'NAVIGATING';
+    location: Locator;
+    iframe: HTMLIFrameElement;
+    resource: string;
+    resourceFetchError: undefined;
+};
+export declare type ReadyState = HtmlReaderState & {
+    state: 'READY';
+    location: Locator;
+    iframe: HTMLIFrameElement;
+    resource: string;
+    resourceFetchError: undefined;
+};
+export declare type CSSState = Pick<HtmlState, 'isScrolling' | 'colorMode' | 'fontFamily' | 'fontSize'>;
+export declare type HtmlAction = {
+    type: 'ARGS_CHANGED';
+    args: ReaderArguments;
+} | {
+    type: 'IFRAME_LOADED';
+} | {
+    type: 'NAV_PREVIOUS_RESOURCE';
+} | {
+    type: 'NAV_NEXT_RESOURCE';
+} | {
+    type: 'GO_TO_HREF';
+    href: string;
+} | {
+    type: 'GO_TO_LOCATION';
+    location: Locator;
+} | {
+    type: 'GO_FORWARD';
+} | {
+    type: 'GO_BACKWARD';
+} | {
+    type: 'WINDOW_RESIZED';
+} | {
+    type: 'NAV_COMPLETE';
+} | {
+    type: 'SET_COLOR_MODE';
+    mode: ColorMode;
+} | {
+    type: 'SET_SCROLL';
+    isScrolling: boolean;
+} | {
+    type: 'INCREASE_FONT_SIZE';
+} | {
+    type: 'DECREASE_FONT_SIZE';
+} | {
+    type: 'SET_FONT_FAMILY';
+    family: FontFamily;
+} | {
+    type: 'USER_SCROLLED';
+} | {
+    type: 'SET_IFRAME';
+    iframe: HTMLIFrameElement | null;
+} | {
+    type: 'RESOURCE_FETCH_SUCCESS';
+    resource: string;
+} | {
+    type: 'RESOURCE_FETCH_ERROR';
+    error: Error;
+};

package/dist/types/HtmlReader/useIframeLinkClick.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { HtmlAction } from './types';
+export default function useIframeLinkClick(dispatch: React.Dispatch<HtmlAction>): void;

package/dist/types/HtmlReader/useLocationQuery.d.ts

@@ -0,0 +1,8 @@
+import { Locator } from '../Readium/Locator';
+import { HtmlState } from './types';
+/**
+ * Keep the Location state in the browser's url bar.
+ * Dispatch location changed when the url changes.
+ */
+export default function useLocationQuery(state: HtmlState): void;
+export declare function getLocationQuery(): Locator | undefined;

package/dist/types/HtmlReader/useResource.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Injectable } from '../Readium/Injectable';
+import { HtmlState, HtmlAction } from './types';
+/**
+ * Fetches a resource whenever the url changes and dispatches
+ * actions to keep the reducer up to date. Works similar to
+ * useSWR, but storing the resource in the reducer state, not
+ * separately.
+ *
+ * Also performs some modifications on the resource to add initial
+ * css variables and injectables.
+ */
+export default function useResource(state: HtmlState, getContent: (url: string) => Promise<string>, injectables: Injectable[], dispatch: React.Dispatch<HtmlAction>): void;

package/dist/types/HtmlReader/useUpdateCSS.d.ts

@@ -0,0 +1,7 @@
+import { WebpubManifest } from '../types';
+import { HtmlState } from './types';
+/**
+ * Set CSS variables when user state changes.
+ * @todo - narrow down the dependencies so this doesn't run on _every_ state change.
+ */
+export default function useUpdateCSS(state: HtmlState, manifest: WebpubManifest | undefined): void;

package/dist/types/HtmlReader/useUpdateScroll.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { HtmlAction, HtmlState } from './types';
+/**
+ * Dispatch a USER_SCROLLED event after some delay
+ */
+export declare function useUpdateScroll(state: HtmlState, dispatch: React.Dispatch<HtmlAction>): void;

package/dist/types/HtmlReader/useWindowResize.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { HtmlAction } from './types';
+/**
+ * Simply dispatches an action when the window is resized.
+ */
+export default function useWindowResize(dispatch: React.Dispatch<HtmlAction>): void;

package/dist/types/Readium/Injectable.d.ts

@@ -0,0 +1,11 @@
+export interface Injectable {
+    type: string;
+    url?: string;
+    r2after?: boolean;
+    r2before?: boolean;
+    r2default?: boolean;
+    fontFamily?: string;
+    systemFont?: boolean;
+    appearance?: string;
+    async?: boolean;
+}

package/dist/types/Readium/Locator.d.ts

@@ -0,0 +1,20 @@
+export interface Locator {
+    href: string;
+    type?: string;
+    title?: string;
+    locations: Locations;
+    text?: LocatorText;
+}
+export interface LocatorText {
+    after?: string;
+    before?: string;
+    highlight?: string;
+}
+export interface Locations {
+    fragment?: string;
+    progression?: number;
+    position?: number;
+    totalProgression?: number;
+    remainingPositions?: number;
+    totalRemainingPositions?: number;
+}

package/dist/types/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const ReadiumWebpubContext = "http://readium.org/webpub/default.jsonld";
 export declare const IS_DEV: boolean;
+export declare const IS_SERVER: boolean;
 export declare const HEADER_HEIGHT = 48;
 export declare const FOOTER_HEIGHT = 48;
 export declare const CHROME_HEIGHT: number;

package/dist/types/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { Injectable } from '@d-i-t-a/reader/dist/types/navigator/IFrameNavigator';
+import { Injectable } from './Readium/Injectable';
+import { Locator } from './Readium/Locator';
 import { WebpubManifest } from './WebpubManifestTypes/WebpubManifest';
 export { WebpubManifest };
 export declare const EpubMimeType = "application/epub";
@@ -33,6 +34,7 @@ export declare type ReaderState = {
     currentTocUrl: string | null;
     atStart: boolean;
     atEnd: boolean;
+    location?: Locator;
 };
 export declare type PdfReaderState = ReaderState;
 export declare type HtmlReaderState = ReaderState;
@@ -73,8 +75,26 @@ export declare type UseWebReaderArguments = {
     pdfWorkerSrc?: string;
     injectables?: Injectable[];
     injectablesFixed?: Injectable[];
+    /**
+     * CSS string to set the height of the reader in paginated mode, and also
+     * in scrolling mode if `growWhenScrolling` is `false`.
+     *
+     * eg: "800px" or `calc(100vh-${CHROME_HEIGHT})`
+     *
+     * Default: `calc(100vh-${CHROME_HEIGHT})`
+     */
     height?: string;
+    /**
+     * Tells the renderer if it should grow to fit content in scrolling mode, or if should
+     * remain the same height and instead show an internal scroll bar. Set to `true` by
+     * default, as this should be used in a full-page reader, the most common use case.
+     *
+     * Default: `true`
+     */
     growWhenScrolling?: boolean;
+    /**
+     * Initial user settings for the reader
+     */
     readerSettings?: ReaderSettings;
 };
 export declare type ActiveReaderArguments = UseWebReaderArguments & {

package/dist/types/ui/LoadingSkeleton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function LoadingSkeleton({ height, }: {
+    height: string;
+}): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/web-reader",
-  "version": "1.0.0",
+  "version": "1.1.0-2",
   "license": "MIT",
   "repository": "https://github.com/NYPL-Simplified/web-reader",
   "homepage": "https://github.com/NYPL-Simplified/web-reader",
@@ -87,7 +87,7 @@
     "@storybook/addon-storyshots": "^6.3.1",
     "@storybook/addons": "^6.3.1",
     "@storybook/react": "^6.3.1",
-    "@testing-library/cypress": "^8.0.1",
+    "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
@@ -104,7 +104,7 @@
     "@typescript-eslint/parser": "^4.29.2",
     "babel-jest": "^27.0.5",
     "babel-loader": "^8.2.2",
-    "cypress": "^8.6.0",
+    "cypress": "^9.5.1",
     "debounce": "^1.2.1",
     "esbuild": "^0.14.13",
     "esbuild-jest": "^0.5.0",
@@ -122,7 +122,7 @@
     "jest-axe": "^5.0.1",
     "jest-watch-typeahead": "^0.5.0",
     "lint-staged": "^11.1.2",
-    "parcel": "^2.0.0-rc.0",
+    "parcel": "^2.0.1",
     "parcel-config-precache-manifest": "^0.0.4",
     "parcel-plugin-static-files-copy": "^2.6.0",
     "parcel-reporter-static-files-copy": "^1.3.0",
@@ -145,7 +145,6 @@
   },
   "dependencies": {
     "@chakra-ui/react": "1.6.9",
-    "@d-i-t-a/reader": "2.0.0-beta.6",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "comlink": "^4.3.1",
@@ -154,6 +153,8 @@
     "react-icons": "^4.3.1",
     "react-intersection-observer": "^8.32.2",
     "react-pdf": "^5.3.2",
+    "react-resize-observer": "^1.1.1",
+    "swr": "^1.0.1",
     "workbox-expiration": "^6.2.4",
     "workbox-precaching": "^6.2.4",
     "workbox-routing": "^6.3.0",

package/dist/types/HtmlReader/HtmlReaderContent.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-declare const HtmlReaderContent: React.FC<{
-    height: string;
-    isScrolling: boolean;
-    growsWhenScrolling: boolean;
-}>;
-export default HtmlReaderContent;