SFR-2592: Update <Document> type to support File type from react-pdf

example/index.tsx

@@ -107,6 +107,9 @@ const PdfReaders = () => {
       <Route path={`/pdf/single-resource-short`}>
         <SingleResourcePdf />
       </Route>
+      <Route path={`/pdf/fetch-url`}>
+        <LoadPdfWithUrl />
+      </Route>
       <Route path={`/pdf/use-pdf-reader-hook`}>
         <UsePdfReader
           webpubManifestUrl="/samples/pdf/single-resource-short.json"
@@ -228,6 +231,50 @@ const SingleResourcePdf = () => {
   );
 };
 
+/**
+ * This is an example for passing in a custom getContent callback function to the webreader hook
+ * where the pdf `file` type accepts an `url` string instead of the default BinaryData
+ */
+const LoadPdfWithUrl = () => {
+  const { data: modifiedManifestUrl, isLoading } = useSWR<string>(
+    '/samples/pdf/single-resource-short.json',
+    async (url: string) => {
+      const response = await fetch(url);
+      const manifest = await response.json();
+      const syntheticUrl = URL.createObjectURL(
+        new Blob([JSON.stringify(manifest)])
+      );
+      return syntheticUrl;
+    },
+    {
+      revalidateOnFocus: false,
+    }
+  );
+
+  if (isLoading || !modifiedManifestUrl) return <div>Loading...</div>;
+
+  /**
+   * Use the URL string as the source for the <Document /> file props
+   */
+  const fetchAsUrl = async (
+    resourceUrl: string,
+    proxyUrl?: string
+  ): Promise<string> => {
+    return proxyUrl
+      ? `${proxyUrl}${encodeURIComponent(resourceUrl)}`
+      : resourceUrl;
+  };
+
+  return (
+    <WebReader
+      webpubManifestUrl={modifiedManifestUrl}
+      proxyUrl={pdfProxyUrl}
+      pdfWorkerSrc={`${origin}/pdf-worker/pdf.worker.min.js`}
+      getContent={fetchAsUrl}
+    />
+  );
+};
+
 const HtmlReaders = () => {
   return (
     <Switch>
@@ -408,6 +455,9 @@ const HomePage = () => {
             <ListItem>
               <Link to="/pdf/single-resource-short">Single-PDF Webpub</Link>
             </ListItem>
+            <ListItem>
+              <Link to="/pdf/fetch-url">Fetch PDF URL - Webpub</Link>
+            </ListItem>
             <ListItem>
               <Link to="/pdf/use-pdf-reader-hook">usePdfReader hook</Link>
             </ListItem>

src/PdfReader/index.tsx

@@ -114,7 +114,7 @@ export default function usePdfReader(args: PdfReaderArguments): ReaderReturn {
       getContent(currentResource, proxyUrl).then((data) => {
         dispatch({
           type: 'RESOURCE_FETCH_SUCCESS',
-          resource: { data },
+          resource: data,
         });
       });
     };

src/PdfReader/lib.ts

@@ -1,4 +1,4 @@
-import { WebpubManifest } from '../types';
+import { PdfFileType, WebpubManifest } from '../types';
 import { ReadiumLink } from '../WebpubManifestTypes/ReadiumLink';
 
 export const SCALE_STEP = 0.1;
@@ -19,7 +19,7 @@ export const getResourceUrl = (
 export const fetchAsUint8Array = async (
   resourceUrl: string,
   proxyUrl?: string
-): Promise<Uint8Array> => {
+): Promise<PdfFileType> => {
   // Generate the resource URL using the proxy
   const url: string = proxyUrl
     ? `${proxyUrl}${encodeURIComponent(resourceUrl)}`
@@ -30,7 +30,7 @@ export const fetchAsUint8Array = async (
   if (!response.ok) {
     throw new Error('Response not Ok for URL: ' + url);
   }
-  return array;
+  return { data: array };
 };
 
 /**

src/PdfReader/types.ts

@@ -1,13 +1,14 @@
 import {
   ActiveReaderArguments,
   InactiveReaderArguments,
+  PdfFileType,
   ReaderSettings,
   ReaderState,
 } from '../types';
 
 export type InternalState = {
   resourceIndex: number;
-  resource: { data: Uint8Array } | null;
+  resource: PdfFileType;
   // we only know the numPages once the resource has been parsed
   numPages: number | null;
   // if pageNumber is -1, we will navigate to the end of the
@@ -37,7 +38,7 @@ export type ErrorState = ReaderState &
 export type PdfState = InactiveState | ActiveState | ErrorState;
 
 export type PdfReaderArguments =
-  | ActiveReaderArguments<Uint8Array>
+  | ActiveReaderArguments<PdfFileType>
   | InactiveReaderArguments;
 
 export type PdfReaderAction =
@@ -48,7 +49,7 @@ export type PdfReaderAction =
   | { type: 'GO_FORWARD' }
   | { type: 'GO_BACKWARD' }
   | { type: 'GO_TO_HREF'; href: string }
-  | { type: 'RESOURCE_FETCH_SUCCESS'; resource: { data: Uint8Array } }
+  | { type: 'RESOURCE_FETCH_SUCCESS'; resource: PdfFileType }
   | { type: 'PDF_PARSED'; numPages: number }
   | { type: 'PDF_LOAD_ERROR'; error: Error }
   | { type: 'SET_SCALE'; scale: number }

src/types.ts

@@ -1,9 +1,12 @@
 import { Injectable } from './Readium/Injectable';
 import { Locator } from './Readium/Locator';
 import { WebpubManifest } from './WebpubManifestTypes/WebpubManifest';
+import { File as PdfFileType } from 'react-pdf/dist/cjs/shared/types';
 
 export { WebpubManifest };
 
+export { PdfFileType };
+
 // the MimeType for a packaged epub
 export const EpubMimeType = 'application/epub';
 // the Mimetype for a generic webpub
@@ -87,7 +90,7 @@ export type ActiveReader = PDFActiveReader | HTMLActiveReader;
 export type ReaderReturn = InactiveReader | LoadingReader | ActiveReader;
 
 // should fetch and decrypt a resource
-export type GetContent<T extends string | Uint8Array> = (
+export type GetContent<T extends Uint8Array | PdfFileType> = (
   href: string,
   proxyUrl?: string
 ) => Promise<T>;
@@ -96,7 +99,7 @@ export type ReaderManagerArguments = {
   headerLeft?: JSX.Element; // Top-left header section
 };
 
-export type UseWebReaderArguments<T extends string | Uint8Array> = {
+export type UseWebReaderArguments<T extends Uint8Array | PdfFileType> = {
   webpubManifestUrl: string;
   proxyUrl?: string;
   getContent?: GetContent<T>;
@@ -141,7 +144,7 @@ export type UseWebReaderArguments<T extends string | Uint8Array> = {
 };
 
 export type ActiveReaderArguments<
-  T extends string | Uint8Array
+  T extends Uint8Array | PdfFileType
 > = UseWebReaderArguments<T> & {
   manifest: WebpubManifest;
 };