SFR-1969: Implement getContent in the pdf reader (#162)

* add getContent to pdf reader

* add param to usePdfReader

* update default function name

* update getContent in PDFReader and type definitions

* rename loadResource function

src/HtmlReader/index.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  ColorMode,
-  ReaderReturn,
-  ReaderArguments,
-  FontFamily,
-  HtmlNavigator,
-} from '../types';
+import { ColorMode, ReaderReturn, FontFamily, HtmlNavigator } from '../types';
 import LoadingSkeleton from '../ui/LoadingSkeleton';
 import {
   DEFAULT_HEIGHT,
@@ -28,8 +22,9 @@ import { useUpdateScroll } from './useUpdateScroll';
 import useUpdateCSS from './useUpdateCSS';
 import useIframeLinkClick from './useIframeLinkClick';
 import useUpdateLocalStorage from '../utils/localstorage';
+import { HtmlReaderArguments } from './types';
 
-export default function useHtmlReader(args: ReaderArguments): ReaderReturn {
+export default function useHtmlReader(args: HtmlReaderArguments): ReaderReturn {
   const {
     webpubManifestUrl,
     manifest,

src/HtmlReader/reducer.ts

@@ -2,7 +2,6 @@ import {
   getLocalStorageLocation,
   getLocalStorageSettings,
 } from '../utils/localstorage';
-import { ReaderArguments } from '../types';
 import {
   getCurrentIndex,
   linkToLocator,
@@ -21,6 +20,7 @@ import {
   RenderingIframeState,
   ResourceFetchErrorState,
   InactiveState,
+  HtmlReaderArguments,
 } from './types';
 import { getLocationQuery } from './useLocationQuery';
 import { DEFAULT_SETTINGS } from '../constants';
@@ -30,7 +30,7 @@ import { DEFAULT_SETTINGS } from '../constants';
  * without passing them in to every `dispatch` call.
  */
 export default function makeHtmlReducer(
-  args: ReaderArguments
+  args: HtmlReaderArguments
 ): (state: HtmlState, action: HtmlAction) => HtmlState {
   /**
    * If there are no args, it's an inactive hook, or you are pre-first render.

src/HtmlReader/types.ts

@@ -1,8 +1,9 @@
 import { Locator } from '../Readium/Locator';
 import {
+  ActiveReaderArguments,
   ColorMode,
   FontFamily,
-  ReaderArguments,
+  InactiveReaderArguments,
   ReaderSettings,
   ReaderState,
 } from '../types';
@@ -86,8 +87,12 @@ export type ReadyState = ReaderState & {
   settings: ReaderSettings;
 };
 
+export type HtmlReaderArguments =
+  | ActiveReaderArguments<string>
+  | InactiveReaderArguments;
+
 export type HtmlAction =
-  | { type: 'ARGS_CHANGED'; args: ReaderArguments }
+  | { type: 'ARGS_CHANGED'; args: HtmlReaderArguments }
   | { type: 'IFRAME_LOADED' }
   | { type: 'NAV_PREVIOUS_RESOURCE' }
   | { type: 'NAV_NEXT_RESOURCE' }

src/PdfReader/index.tsx

@@ -1,6 +1,6 @@
 import { Document, PageProps, pdfjs } from 'react-pdf';
 import * as React from 'react';
-import { ReaderArguments, ReaderReturn } from '../types';
+import { ReaderReturn } from '../types';
 import { Flex } from '@chakra-ui/react';
 import useMeasure from './useMeasure';
 import ChakraPage from './ChakraPage';
@@ -13,8 +13,9 @@ import {
   DEFAULT_SHOULD_GROW_WHEN_SCROLLING,
 } from '../constants';
 import LoadingSkeleton from '../ui/LoadingSkeleton';
-import { getResourceUrl, loadResource, SCALE_STEP } from './lib';
+import { fetchAsUint8Array, getResourceUrl, SCALE_STEP } from './lib';
 import { makePdfReducer } from './reducer';
+import { PdfReaderArguments } from './types';
 
 /**
  * The PDF reader
@@ -25,7 +26,7 @@ import { makePdfReducer } from './reducer';
  * @param args T
  * @returns
  */
-export default function usePdfReader(args: ReaderArguments): ReaderReturn {
+export default function usePdfReader(args: PdfReaderArguments): ReaderReturn {
   // use a passed in src for the pdf worker
   if (args?.pdfWorkerSrc) {
     pdfjs.GlobalWorkerOptions.workerSrc = args.pdfWorkerSrc;
@@ -35,7 +36,7 @@ export default function usePdfReader(args: ReaderArguments): ReaderReturn {
     webpubManifestUrl,
     manifest,
     proxyUrl,
-    getContent,
+    getContent = fetchAsUint8Array,
     injectablesReflowable,
     injectablesFixed,
     height = DEFAULT_HEIGHT,
@@ -104,17 +105,23 @@ export default function usePdfReader(args: ReaderArguments): ReaderReturn {
       throw new Error('Manifest has no Reading Order');
     }
 
-    const resourceUrl = getResourceUrl(
+    const currentResource = getResourceUrl(
       state.resourceIndex,
       manifest.readingOrder
     );
-    loadResource(resourceUrl, proxyUrl).then((data) => {
-      dispatch({
-        type: 'RESOURCE_FETCH_SUCCESS',
-        resource: { data },
+
+    const fetchResource = async () => {
+      getContent(currentResource, proxyUrl).then((data) => {
+        dispatch({
+          type: 'RESOURCE_FETCH_SUCCESS',
+          resource: { data },
+        });
       });
-    });
-  }, [state.resourceIndex, manifest, proxyUrl]);
+    };
+    if (manifest.readingOrder && manifest.readingOrder.length) {
+      fetchResource();
+    }
+  }, [state.resourceIndex, manifest, proxyUrl, getContent]);
 
   /**
    * calculate the height or width of the pdf page in paginated mode.

src/PdfReader/lib.ts

@@ -16,7 +16,7 @@ export const getResourceUrl = (
   return readingOrder[index].href;
 };
 
-export const loadResource = async (
+export const fetchAsUint8Array = async (
   resourceUrl: string,
   proxyUrl?: string
 ): Promise<Uint8Array> => {

src/PdfReader/reducer.ts

@@ -1,14 +1,13 @@
 import { DEFAULT_SETTINGS } from '../constants';
-import { ReaderArguments } from '../types';
 import {
   getIndexFromHref,
   getStartPageFromHref,
   getPageNumberFromHref,
 } from './lib';
-import { PdfState, PdfReaderAction } from './types';
+import { PdfState, PdfReaderAction, PdfReaderArguments } from './types';
 
 export function makePdfReducer(
-  args: ReaderArguments
+  args: PdfReaderArguments
 ): (state: PdfState, action: PdfReaderAction) => PdfState {
   /**
    * If there are no args, it's an inactive hook, or you are pre-first render.

src/PdfReader/types.ts

@@ -1,4 +1,9 @@
-import { ReaderArguments, ReaderSettings, ReaderState } from '../types';
+import {
+  ActiveReaderArguments,
+  InactiveReaderArguments,
+  ReaderSettings,
+  ReaderState,
+} from '../types';
 
 export type InternalState = {
   resourceIndex: number;
@@ -31,10 +36,14 @@ export type ErrorState = ReaderState &
 
 export type PdfState = InactiveState | ActiveState | ErrorState;
 
+export type PdfReaderArguments =
+  | ActiveReaderArguments<Uint8Array>
+  | InactiveReaderArguments;
+
 export type PdfReaderAction =
   | {
       type: 'ARGS_CHANGED';
-      args: ReaderArguments;
+      args: PdfReaderArguments;
     }
   | { type: 'GO_FORWARD' }
   | { type: 'GO_BACKWARD' }

src/index.tsx

@@ -8,7 +8,8 @@ import useWebReader from './useWebReader';
  * The main React component export.
  */
 
-export type WebReaderProps = UseWebReaderArguments & ReaderManagerArguments;
+export type WebReaderProps = UseWebReaderArguments<string | Uint8Array> &
+  ReaderManagerArguments;
 
 export const WebReaderWithoutBoundary: FC<WebReaderProps> = ({
   webpubManifestUrl,

src/types.ts

@@ -87,16 +87,19 @@ export type ActiveReader = PDFActiveReader | HTMLActiveReader;
 export type ReaderReturn = InactiveReader | LoadingReader | ActiveReader;
 
 // should fetch and decrypt a resource
-export type GetContent = (href: string) => Promise<string>;
+export type GetContent<T extends string | Uint8Array> = (
+  href: string,
+  proxyUrl?: string
+) => Promise<T>;
 
 export type ReaderManagerArguments = {
   headerLeft?: JSX.Element; // Top-left header section
 };
 
-export type UseWebReaderArguments = {
+export type UseWebReaderArguments<T extends string | Uint8Array> = {
   webpubManifestUrl: string;
   proxyUrl?: string;
-  getContent?: GetContent;
+  getContent?: GetContent<T>;
   pdfWorkerSrc?: string;
   injectablesReflowable?: Injectable[];
   injectablesFixed?: Injectable[];
@@ -137,12 +140,12 @@ export type UseWebReaderArguments = {
   persistSettings?: boolean;
 };
 
-export type ActiveReaderArguments = UseWebReaderArguments & {
+export type ActiveReaderArguments<
+  T extends string | Uint8Array
+> = UseWebReaderArguments<T> & {
   manifest: WebpubManifest;
 };
 
 export type InactiveReaderArguments = undefined;
 
-export type ReaderArguments = ActiveReaderArguments | InactiveReaderArguments;
-
 export type GetColor = (light: string, dark: string, sepia: string) => string;

src/useWebReader.tsx

@@ -8,6 +8,7 @@ import {
   LoadingReader,
   PDFActiveReader,
   WebpubManifest,
+  GetContent,
 } from './types';
 import {
   EpubConformsTo,
@@ -42,7 +43,7 @@ function getReaderType(conformsTo: ConformsTo | null | undefined) {
  * for that type.
  */
 export default function useWebReader(
-  args: UseWebReaderArguments
+  args: UseWebReaderArguments<string | Uint8Array>
 ): HTMLActiveReader | PDFActiveReader | LoadingReader {
   const {
     webpubManifestUrl,
@@ -67,6 +68,8 @@ export default function useWebReader(
   const readerType = getReaderType(
     manifest ? manifest.metadata.conformsTo : null
   );
+  const getContentHtml = getContent as GetContent<string> | undefined;
+  const getContentPdf = getContent as GetContent<Uint8Array> | undefined;
   /**
    * Our HTML reader and PDf Reader. Note that we cannot conditionally
    * call a React hook, so we must _always_ call the hook, but allow for the
@@ -78,7 +81,7 @@ export default function useWebReader(
       ? {
           webpubManifestUrl,
           manifest,
-          getContent,
+          getContent: getContentHtml,
           injectablesReflowable,
           injectablesFixed,
           height,
@@ -94,6 +97,7 @@ export default function useWebReader(
       ? {
           webpubManifestUrl,
           manifest,
+          getContent: getContentPdf,
           proxyUrl,
           pdfWorkerSrc,
           height,

src/utils/localstorage.ts

@@ -3,9 +3,9 @@ import {
   LOCAL_STORAGE_LOCATIONS_KEY,
   LOCAL_STORAGE_SETTINGS_KEY,
 } from '../constants';
-import { HtmlState } from '../HtmlReader/types';
+import { HtmlReaderArguments, HtmlState } from '../HtmlReader/types';
 import { Locator } from '../Readium/Locator';
-import { ReaderArguments, ReaderSettings } from '../types';
+import { ReaderSettings } from '../types';
 
 export type LSLocation = {
   location: Locator;
@@ -22,7 +22,7 @@ export type LSLocationsRecord = Record<string, LSLocation>;
  */
 export function getLocalStorageLocation(
   identifier: string,
-  args: ReaderArguments
+  args: HtmlReaderArguments
 ): LSLocation | undefined {
   if (!args?.persistLastLocation) return undefined;
   const item = localStorage.getItem(LOCAL_STORAGE_LOCATIONS_KEY);
@@ -35,7 +35,7 @@ export function getLocalStorageLocation(
 }
 
 export function getLocalStorageSettings(
-  args: ReaderArguments
+  args: HtmlReaderArguments
 ): ReaderSettings | undefined {
   if (!args?.persistSettings) return undefined;
   const item = localStorage.getItem(LOCAL_STORAGE_SETTINGS_KEY);
@@ -49,7 +49,7 @@ export function getLocalStorageSettings(
 export default function useUpdateLocalStorage(
   identifier: string | null,
   state: HtmlState,
-  args: ReaderArguments
+  args: HtmlReaderArguments
 ): void {
   /**
    * Keep location up to date as the state changes