Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for a custom loading component #246

Merged
merged 4 commits into from
Feb 6, 2025
Merged

Add support for a custom loading component #246

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9fb46a6
Add support for a custom loading component
joseph-bayer Jan 30, 2025
d29ff59
Update documentation
joseph-bayer Jan 30, 2025
f451cda
Add section to viewer.mdx docs with a simple example of the custom lo…
joseph-bayer Feb 6, 2025
97ee7e6
Update pages/docs/viewer.mdx
mathewjordan Feb 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 37 additions & 21 deletions pages/docs/viewer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,27 +142,28 @@ const MyCustomViewer = () => {

`Viewer` can configured through an `options` prop, which will serve as a object for common options.

| Prop | Type | Required | Default |
| ------------------------------- | --------------------------------------------------------------------------- | -------- | ---------------------------------------- |
| `iiifContent` | `string` | Yes | |
| `iiifContentSearchQuery` | [See Content Search](#content-search) | No | |
| `canvasIdCallback` | `function` | No | |
| `customDisplays` | [See Custom Displays](#custom-displays) | No | |
| `customTheme` | `object` | No | |
| `plugins` | [See Plugins](#plugins) | No | |
| `options` | `object` | No | |
| `options.background` | `string` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/background) | No | `transparent` |
| `options.canvasBackgroundColor` | `string` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/background) | No | `#1a1d1e` |
| `options.canvasHeight` | `string` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/height) | No | `500px` |
| `options.ignoreCaptionLabels` | `string[]` | No | [] |
| `options.openSeadragon` | `OpenSeadragon.Options` | No | |
| `options.informationPanel` | [See Information Panel](#information-panel) | No | |
| `options.requestHeaders` | `IncomingHttpHeaders` | No | `{ "Content-Type": "application/json" }` |
| `options.showDownload` | `boolean` | No | true |
| `options.showIIIFBadge` | `boolean` | No | true |
| `options.showTitle` | `boolean` | No | true |
| `options.withCredentials` | `boolean` | No | false |
| `options.contentSearch` | [See Content Search](#content-search) | No | |
| Prop | Type | Required | Default |
| -------------------------------- | --------------------------------------------------------------------------- | -------- | ---------------------------------------- |
| `iiifContent` | `string` | Yes | |
| `iiifContentSearchQuery` | [See Content Search](#content-search) | No | |
| `canvasIdCallback` | `function` | No | |
| `customDisplays` | [See Custom Displays](#custom-displays) | No | |
| `customTheme` | `object` | No | |
| `plugins` | [See Plugins](#plugins) | No | |
| `options` | `object` | No | |
| `options.background` | `string` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/background) | No | `transparent` |
| `options.canvasBackgroundColor` | `string` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/background) | No | `#1a1d1e` |
| `options.canvasHeight` | `string` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/height) | No | `500px` |
| `options.ignoreCaptionLabels` | `string[]` | No | [] |
| `options.openSeadragon` | `OpenSeadragon.Options` | No | |
| `options.informationPanel` | [See Information Panel](#information-panel) | No | |
| `options.requestHeaders` | `IncomingHttpHeaders` | No | `{ "Content-Type": "application/json" }` |
| `options.showDownload` | `boolean` | No | true |
| `options.showIIIFBadge` | `boolean` | No | true |
| `options.showTitle` | `boolean` | No | true |
| `options.customLoadingComponent` | `React.ComponentType` | No | |
| `options.withCredentials` | `boolean` | No | false |
| `options.contentSearch` | [See Content Search](#content-search) | No | |

- Options `canvasBackgroundColor` and `canvasHeight` will apply to both `<video>` elements and the OpenseaDragon canvas.
- Option `withCredentials` being set as `true` will inform IIIF resource requests to be made [using credentials](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials) such as cookies, authorization headers or TLS client certificates.
Expand Down Expand Up @@ -491,6 +492,21 @@ return (

---

### Custom Loading Component

You may choose to override the default loading component that displays while the manifest is fetched and loaded into state.

```jsx
<Viewer
iiifContent="https://example.com/manifest/1"
options={{
customLoadingComponent: () => <>My custom loading component</>,
}}
/>
```

---

### Custom canvas displays

Clients may wish to use their own display components instead of Clover Viewer's default displays ([OpenSeadragon](https://openseadragon.github.io/) for images and [HTML Video Player](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) for audio/video). The `Viewer` component allows a client to target individual `canvas` items in a IIIF Manifest by either direct reference to a canvas `id` or `format` (ie. `video/ogg`). See the Type Definition below for `CustomDisplay`, and an example implementation.
Expand Down
9 changes: 8 additions & 1 deletion src/components/Viewer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,14 @@ const RenderViewer: React.FC<CloverViewerProps> = ({
* loaded into React.Context as `vault`. Upon completion
* (error or not) isLoaded will be set to true.
*/
if (!isLoaded) return <>Loading</>;
if (!isLoaded) {
if (options?.customLoadingComponent) {
const CustomLoadingComponent = options.customLoadingComponent;
return <CustomLoadingComponent />;
} else {
return <>Loading</>;
}
}

/**
* If an error occurs during manifest fetch process used by
Expand Down
1 change: 1 addition & 0 deletions src/context/viewer-context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export type ViewerConfigOptions = {
showDownload?: boolean;
showIIIFBadge?: boolean;
showTitle?: boolean;
customLoadingComponent?: React.ComponentType;
withCredentials?: boolean;
localeText?: {
contentSearch?: {
Expand Down