From cd6dde000a6ce89e7f8493f90d2e23b2c3b57987 Mon Sep 17 00:00:00 2001 From: toxiapo Date: Fri, 4 Apr 2025 12:00:34 -0400 Subject: [PATCH 1/2] Refactor the return type of the getContent function on PdfReader to match the `file` props used for rendering the pdf --- example/index.tsx | 51 +++++++++++++++++++++++++++++++++++++++++ src/PdfReader/index.tsx | 2 +- src/PdfReader/lib.ts | 6 ++--- src/PdfReader/types.ts | 7 +++--- src/types.ts | 9 +++++--- 5 files changed, 65 insertions(+), 10 deletions(-) diff --git a/example/index.tsx b/example/index.tsx index 660c1ece..a1af3b2a 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -107,6 +107,9 @@ const PdfReaders = () => { + + + { ); }; +/** + * 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( + '/samples/pdf/single-resource-short.json', + async (url: string) => { + const response = await fetch(url); + const manifest = await response.json(); + console.log(manifest); + const syntheticUrl = URL.createObjectURL( + new Blob([JSON.stringify(manifest)]) + ); + return syntheticUrl; + }, + { + revalidateOnFocus: false, + } + ); + + if (isLoading || !modifiedManifestUrl) return
Loading...
; + + /** + * Use the URL string as the source for the file props + */ + const fetchAsUrl = async ( + resourceUrl: string, + proxyUrl?: string + ): Promise => { + return proxyUrl + ? `${proxyUrl}${encodeURIComponent(resourceUrl)}` + : resourceUrl; + }; + + return ( + + ); +}; + const HtmlReaders = () => { return ( @@ -408,6 +456,9 @@ const HomePage = () => { Single-PDF Webpub + + Fetch PDF URL - Webpub + usePdfReader hook diff --git a/src/PdfReader/index.tsx b/src/PdfReader/index.tsx index 6b7f4b6d..48b90473 100644 --- a/src/PdfReader/index.tsx +++ b/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, }); }); }; diff --git a/src/PdfReader/lib.ts b/src/PdfReader/lib.ts index e11e070a..a561b45e 100644 --- a/src/PdfReader/lib.ts +++ b/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 => { +): Promise => { // 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 }; }; /** diff --git a/src/PdfReader/types.ts b/src/PdfReader/types.ts index 33dc0cb6..9a46e731 100644 --- a/src/PdfReader/types.ts +++ b/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 + | ActiveReaderArguments | 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 } diff --git a/src/types.ts b/src/types.ts index d6ef458f..9cefc2a1 100644 --- a/src/types.ts +++ b/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 = ( +export type GetContent = ( href: string, proxyUrl?: string ) => Promise; @@ -96,7 +99,7 @@ export type ReaderManagerArguments = { headerLeft?: JSX.Element; // Top-left header section }; -export type UseWebReaderArguments = { +export type UseWebReaderArguments = { webpubManifestUrl: string; proxyUrl?: string; getContent?: GetContent; @@ -141,7 +144,7 @@ export type UseWebReaderArguments = { }; export type ActiveReaderArguments< - T extends string | Uint8Array + T extends Uint8Array | PdfFileType > = UseWebReaderArguments & { manifest: WebpubManifest; }; From eaaf7bbee730ca3f7f3a0ac799aabbc5ccb26edd Mon Sep 17 00:00:00 2001 From: toxiapo Date: Wed, 9 Apr 2025 13:36:34 -0400 Subject: [PATCH 2/2] remove comment --- example/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/example/index.tsx b/example/index.tsx index a1af3b2a..a10b8cd3 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -241,7 +241,6 @@ const LoadPdfWithUrl = () => { async (url: string) => { const response = await fetch(url); const manifest = await response.json(); - console.log(manifest); const syntheticUrl = URL.createObjectURL( new Blob([JSON.stringify(manifest)]) );