From f86ad5307fdbe83f3ac7ea372a50283a3b8d2f20 Mon Sep 17 00:00:00 2001 From: Adam Joseph Arling Date: Sun, 22 Oct 2023 11:17:16 +0200 Subject: [PATCH] Support custom canvas displays --- .gitignore | 5 +- docs/components/CustomDisplays/PDFViewer.tsx | 33 ++ docs/components/DynamicImports/Viewer.tsx | 8 +- package.json | 1 + pages/docs/viewer.mdx | 92 ++++ pages/docs/viewer/demo.mdx | 2 - pnpm-lock.yaml | 12 + .../custom-displays/pdf-no-placeholder.json | 428 +++++++++++++++++ public/manifest/custom-displays/pdf.json | 454 ++++++++++++++++++ public/media/pdf/file-sample_150kB.pdf | Bin 0 -> 142786 bytes .../pdf/file-sample_150kB_pdf_thumbnail.png | Bin 0 -> 171477 bytes .../Viewer/Painting/Painting.test.tsx | 424 ++++++++++++++++ src/components/Viewer/Painting/Painting.tsx | 70 ++- src/components/Viewer/Painting/Toggle.tsx | 1 + src/components/Viewer/Player/Player.test.tsx | 2 + src/components/Viewer/index.tsx | 4 + src/context/viewer-context.tsx | 13 + .../viewer/custom-display/manifest-complex.ts | 411 ++++++++++++++++ src/fixtures/viewer/manifest-image.ts | 192 ++++++++ src/fixtures/viewer/manifest-video.ts | 340 +++++++++++++ src/setupTests.ts | 11 + 21 files changed, 2480 insertions(+), 23 deletions(-) create mode 100644 docs/components/CustomDisplays/PDFViewer.tsx create mode 100644 public/manifest/custom-displays/pdf-no-placeholder.json create mode 100644 public/manifest/custom-displays/pdf.json create mode 100644 public/media/pdf/file-sample_150kB.pdf create mode 100644 public/media/pdf/file-sample_150kB_pdf_thumbnail.png create mode 100644 src/components/Viewer/Painting/Painting.test.tsx create mode 100644 src/fixtures/viewer/custom-display/manifest-complex.ts create mode 100644 src/fixtures/viewer/manifest-image.ts create mode 100644 src/fixtures/viewer/manifest-video.ts diff --git a/.gitignore b/.gitignore index bb1e409e..9d83a839 100644 --- a/.gitignore +++ b/.gitignore @@ -12,4 +12,7 @@ coverage/ html/ # OS -.DS_Store \ No newline at end of file +.DS_Store + +# VSCode +.vscode/ \ No newline at end of file diff --git a/docs/components/CustomDisplays/PDFViewer.tsx b/docs/components/CustomDisplays/PDFViewer.tsx new file mode 100644 index 00000000..40cb102d --- /dev/null +++ b/docs/components/CustomDisplays/PDFViewer.tsx @@ -0,0 +1,33 @@ +/** + * Example of a custom component which accepts a Canvas id from + * a Manifest. It then renders expected PDF content by wrapping + * in a simple iFrame (uses browser's default PDF renderer). + * + * One could make this as complex as they like, for flexible implementations. + */ + +import { LabeledIIIFExternalWebResource } from "src/types/presentation-3"; + +const PDFViewer = ({ + id, + annotationBody, + ...restProps +}: { + id: string; + annotationBody: LabeledIIIFExternalWebResource; + restProps: { + [key: string]: unknown; + }; +}) => { + return ( + <> +

CustomProps:

+
{JSON.stringify(restProps)}
+
+