samvera-labs / clover-iiif Goto Github PK

It seems like the primary color palette is not being distilled to openseadragon icon backgrounds. In this example, the color of these should be light.

Hi, does clover-iif supports collections?

I tested my manifest (https://cms.rahvaroivad.ee/wp-json/iiif/manifest/gallery/172) on your demo page and it did not work.
Same manifest with Mirador works : https://projectmirador.org/embed/?iiif-content=https://cms.rahvaroivad.ee/wp-json/iiif/manifest/gallery/172

All the best
hembo

Hello,
I would like to set "Show captions" by default on init.
Is there any option that I'm missing?
Thanks in advance!

Hello,

I'm wondering if Clover could have a couple more configurable options via options or customTheme.

First, I'd like to be able to customize the height of the image viewer beyond 450px.

This line defines the max height of the PlayerWrapper as 450px:

This line defines the height of Wrapper as 450px:

I'm not sure which is the culprit, but I'd love it if this was customizable through the JSX rather than needing to be handled via CSS.

Additionally, I'd love to be able to modify the options or custom theme to allow the OpenSeaDragon background to be something besides black.

Let me know if you need more clarification or better details.

I have a use case where I have single images served via Image API manifests, but there is no Presentation API manifest associated. It looks like, internally, this is handled via the ImageViewer component. But that doesn't seem to be exported from the library if I understand correctly.

Any recommendations on how to deal with such an Image-API-only scenario? I'd really love to use the Clover component rather than OpenSeadragon directly, due to the polished styling.

Hello, my institution uses CONTENTdm, which only provides v2.1 presentation manifests. I've been able to use your previous project with some success, but in the interest of future me, I am curious how difficult it would be for me to attempt to patch in support for the older 2.1 version into Clover? I'll happily give it a go, but thought I'd ask if it is a foolhardy thing to attempt. Thank you!

I noticed when switching tabs on the information panel, the components for the previous tab and the next tab are both mounted. Is this a bug or a feature? I would expect that only the components for the new tab should be mounted. Is there a reason why the previous tab is also mounted?

Here's the branch where I added some console.logs https://github.com/wykhuh/clover-iiif/tree/bug/dup-tab

Avalon Media System manifests use the Choice construct described in Cookbook recipe 33 to provide users with quality options. Currently this is an unsupported feature in Clover that prevents Avalon manifests from loading properly:

Clover currently requests the manifest and loads the object metadata but fails to parse the Body to request the actual .m3u8 file(s).

Even if there is no desire to provide full support for this, would it be possible to implement minimum handling to parse the Choice construct and request the first item in the list?

To set up for PRs, community contributions, forks, etc. we should define some ESLint config to communicate Clover's code quality preferences, and eliminate noise in PRs.

Currently, Clover works great for captions and subtitles where there are multiple caption files as long as the caption files are individual Text Web Annotations on the Canvas at annotation[0].items like below:

{
     "annotations": [
        {
          "id": "https:\/\/digital.lib.utk.edu\/assemble\/manifest\/rfta\/165\/canvas\/0\/page\/annotation\/rfta%3A165",
          "type": "AnnotationPage",
          "items": [
            {
              "id": "https:\/\/digital.lib.utk.edu\/assemble\/manifest\/rfta\/165\/canvas\/0\/page\/annotation\/rfta%3A165\/62656cfd60e87",
              "type": "Annotation",
              "motivation": "supplementing",
              "body": {
                "id": "https:\/\/digital.lib.utk.edu\/collections\/islandora\/object\/rfta%3A165\/datastream\/TRANSCRIPT",
                "type": "Text",
                "format": "text\/vtt",
                "label": {
                  "en": [
                    "Captions in English"
                  ]
                },
                "language": "en"
              },
              "target": "https:\/\/digital.lib.utk.edu\/assemble\/manifest\/rfta\/165\/canvas\/0"
            },
            {
              "id": "https:\/\/digital.lib.utk.edu\/assemble\/manifest\/rfta\/165\/canvas\/0\/page\/annotation\/rfta%3A165\/62656cfd60e91",
              "type": "Annotation",
              "motivation": "supplementing",
              "body": {
                "id": "https:\/\/digital.lib.utk.edu\/collections\/islandora\/object\/rfta%3A165\/datastream\/TRANSCRIPT-ES",
                "type": "Text",
                "format": "text\/vtt",
                "label": {
                  "es": [
                    "Subt\u00edtulos en espa\u00f1ol"
                  ]
                },
                "language": "es"
              },
              "target": "https:\/\/digital.lib.utk.edu\/assemble\/manifest\/rfta\/165\/canvas\/0"
            }
          ]
        }
      ]
}

That being said, Recipe 74: Using Caption and Subtitle Files in Multiple Languages with Video Content suggests that in the case that there are multiple caption files the Annotation should be modeled as Choice ( See full fixture here ):

{
      "annotations": [
        {
          "id": "https:\/\/digital.lib.utk.edu\/assemble\/manifest\/rfta\/165\/canvas\/0\/page\/annotation\/rfta%3A165",
          "type": "AnnotationPage",
          "items": [
            {
              "id": "https:\/\/digital.lib.utk.edu\/assemble\/manifest\/rfta\/165\/canvas\/0\/page\/annotation\/rfta%3A165\/62656cfd60e87",
              "type": "Annotation",
              "motivation": "supplementing",
              "body": {
                "type": "Choice",
                "items": [
                  {
                    "id": "https:\/\/digital.lib.utk.edu\/collections\/islandora\/object\/rfta%3A165\/datastream\/TRANSCRIPT",
                    "type": "Text",
                    "format": "text\/vtt",
                    "label": {
                      "en": [
                        "Captions in English"
                      ]
                    },
                    "language": "en"
                  },
                  {
                    "id": "https:\/\/digital.lib.utk.edu\/collections\/islandora\/object\/rfta%3A165\/datastream\/TRANSCRIPT-ES",
                    "type": "Text",
                    "format": "text\/vtt",
                    "label": {
                      "es": [
                        "Subt\u00edtulos en espa\u00f1ol"
                      ]
                    },
                    "language": "es"
                  }
                ]
              },
              "target": "https:\/\/digital.lib.utk.edu\/assemble\/manifest\/rfta\/165\/canvas\/0"
            }
          ]
        }
      ]
}

Is it possible for Clover to support this model?

@tpendragon noted that when clicking the a link to download an entry represented in the rendering property, the referenced link is vault://567ed56c rather than the resource id of the external web resource.

Clover OSD controls do not function if multiple Clover OSD instances are rendered to the same window. This is occuring due to a hardcoded OSD instance id. Let's make these unique.

See https://canopy-iiif.vercel.app/about/example where the second Clover instance controls do not function.

To aid consuming apps in further styling the Viewer component (beyond default theming), define some helper CSS classes on the bigger structural HTML elements of the Viewer. A consuming app can define their own CSS styles targeting these Clover provided classes

Done looks like

• A user is able to use their own CSS to style the bundled Viewer
• Verify in a few test React app environments, that a consuming app's CSS styles will be applied in the host application

What is the current recommendation for adding an SVG overlay to the viewer? (such as: https://github.com/openseadragon/svg-overlay)

I create two new apps using both Next.js and React + Vite.js, and installed Clover 2.8.1. In both cases, the tiled image is not working. It shows a small thumbnail, but we can't zoom the image.

I then uninstalled Clover, and installed previous versions of clover. version 2.5 works in both apps, which is before adding the image viewer component.

Nextjs repo https://github.com/wykhuh/clover-nextjs-demo

import dynamic from "next/dynamic";

const Viewer = dynamic(
  () => import("@samvera/clover-iiif").then((Clover) => Clover.Viewer),
  {
    ssr: false,
  },
);

export default function Home() {
  const iiifContent =
    "https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif";

  return <Viewer iiifContent={iiifContent} />;
}

React repo https://github.com/wykhuh/clover-react

import Viewer from "@samvera/clover-iiif/viewer";

function App() {
   const iiifContent =
    "https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif";

  return <Viewer iiifContent={iiifContent} />;
}

export default App

Hi,

It's said in the documentation, that Openseadragon config options can be passed with the options object.
Checking the source code, after it didn't work for me, it seems that this part is not implemented yet, OSD config is pre-defined:

Would you need some help implementing this, or are you working on it now?
The same question goes for the FullScreen option.

Thank you for your amazing work on this!

Hello,

First, thanks for building out such a great viewer! I'm trying to use it on a project, and it runs fine locally but when we go to deploy with gatsby build, we get several SSR related errors and the build fails

error Generating SSR bundle failed

Reading from "node:buffer" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
error Generating SSR bundle failed

Reading from "node:fs" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

and many more similar errors. I've tried several webpack workarounds, installing past versions of Clover, upgrading React, to no avail. I'm thinking that there might be incompatible node versions, but I've had a hard time finding what's required for Clover.

My project:

"dependencies": {
    "@samvera/clover-iiif": "^2.3.2",
    "algoliasearch": "^4.10.5",
    "assets": "file:src/assets",
    "atoms": "file:src/components/atoms",
    "caniuse-api": "^3.0.0",
    "classnames": "^2.3.1",
    "detect-browser": "^5.3.0",
    "embla-carousel-react": "^8.0.0-rc18",
    "gatsby": "3.14.5",
    "gatsby-plugin-algolia": "^0.25.0",
    "gatsby-plugin-google-tagmanager": "^3.14.0",
    "gatsby-plugin-image": "2.6.0",
    "gatsby-plugin-manifest": "^3.14.0",
    "gatsby-plugin-react-helmet": "^4.14.0",
    "gatsby-plugin-robots-txt": "^1.7.0",
    "gatsby-plugin-s3": "^0.3.8",
    "gatsby-plugin-sass": "^4.14.0",
    "gatsby-plugin-sharp": "^3.14.0",
    "gatsby-plugin-sitemap": "^4.10.0",
    "gatsby-source-filesystem": "^3.14.0",
    "gatsby-source-graphql": "^3.14.0",
    "gatsby-transformer-sharp": "^3.14.0",
    "gsap": "^3.10.4",
    "interweave": "^12.9.0",
    "jest-junit": "^12.2.0",
    "molecules": "file:src/components/molecules",
    "moment": "^2.29.4",
    "moment-duration-format": "^2.3.2",
    "npm": "^6.14.15",
    "organisms": "file:src/components/organisms",
    "react": "^17.0.2",
    "react-autosuggest": "^10.1.0",
    "react-compare-image": "^3.1.0",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-instantsearch-dom": "^6.12.1",
    "react-modal": "^3.14.3",
    "sass": "^1.39.0",
  },

Node 14.18.3 
NPM 6.14.18

Do you know if my node version is incompatible, or maybe of another way to resolve this error? Thanks for the help!

Hello,

Can the control buttons be shown when on full-screen?

From what I gathered, since you are using custom controls, it may not be straightforward.
I found this post that gives some insight into how Mirado did it.
I have made a simple proof of concept that overrides the behavior of the full-screen button to call requestFullscreen on the ImageViewer that also contain the controls.

I have a use case for Clover as a Canvas selector UI. It would be helpful if I could instantiate Clover and set the active Canvas based on ID. For instance, if the last time the user looked at the particular Manifest they were on the third Canvas, I'd like to be able to create a new Clover instance in the same state.

I'm getting the same error described in #69, but I'm using React 17 and the latest version of clover-iiif.

I was able to reproduce in the sandbox: https://codesandbox.io/s/clover-react-v18-strict-mode-forked-r5qttq

In my console on my project I get two "invalid hook call" errors (possibly duplicated due to strict mode) followed by:

Uncaught TypeError: dispatcher is null
    useReducer React
    Or viewer-context.tsx:90
    React 12
    unstable_runWithPriority scheduler.development.js:468
    React 17
    tsx index.tsx:9
    factory react refresh:6
    Webpack 3
[react.development.js:1626](http://localhost:3000/Users/camden/Documents/code/[project name hidden]/client/node_modules/@samvera/clover-iiif/node_modules/react/cjs/react.development.js)
    useReducer React
    Or viewer-context.tsx:90
    React 11
    performSyncWorkOnRoot self-hosted:1406
    flushSyncCallbackQueueImpl React
    unstable_runWithPriority scheduler.development.js:468
    React 6
    bind_applyFunctionN self-hosted:1683
    dispatchDiscreteEvent self-hosted:1640
    React 4
    forEach self-hosted:4909
    React 7
    tsx index.tsx:9
    factory react refresh:6

In the sandbox I'm using React 17.0.2 and clover-iiif 1.13.0, but the issue also appears with older versions of clover-iiif.

Update: Upgrading my project to React 18 seems to have fixed the bug. So I think this a backward-compatibility issue for older versions of React.

In OSD component, a new openseadragron viewer instance is created when that component is created.

1. Is a new viewer instance needed every time OSD loads? Or is it better to have just one instance of openseadragron viewer that is passed a new image url?

2. is the openseadragon viewer destroyed when the component is dismounted? Or should clover manually destroy the viewer using openseadragon destroy viewer.destroy(); viewer = null?

Investigating

This looks like a wonderful viewer! Would love to experiment with it for projects at https://github.com/umd-mith/. Do you have a license in mind for the code?

The following IIIF v3 manifest loads correctly, but it doesn't show any (full-sized) images.

Manifest: https://labs.deutsche-digitale-bibliothek.de/iiif/presentation/3/UT7QCBPP626TE3HTJDMJN7HVJ22IUEEO

Clover: https://samvera-labs.github.io/clover-iiif/?iiif-content=https%3A%2F%2Flabs.deutsche-digitale-bibliothek.de%2Fiiif%2Fpresentation%2F3%2FUT7QCBPP626TE3HTJDMJN7HVJ22IUEEO

I don't see any problems within the manifest, and I guess this is a problem of the viewer.

I'm not sure if this is a bug, but I thought I'd report just in case you think it is.

If you have a multi-canvased manifest and the canvases don't have labels, there are no thumbnails directly under Viewer to aid in navigation. In the spirit of presentation 3, it seems like the viewer should generate these if missing.

I cloned this repo, installed the packages, and started the development server. The server is continuously hot reloading, which causes the browser to also continuously reload.

If I change server.js .on("all" to .on("change" , then the server only reloads if I make a change to a file. Is there a reason to use .on("all" ?

Hello,

I have noticed that the audio visualizer disappears when a page change occurs and is only working on the first load of the first page.
Here is an example manifest.

We have an immediate need for a table of contents for organizing audio tracks on a playlist, but if we wanted to use Clover for books we'd definitely need a table of contents for navigating different sections.

In UV it looks like this:

Hello,

Today while experimenting with A/V in Canopy, I noticed a problem that seems to be coming from Clover Sliders. Whenever a thumbnail in a Clover Slider represents an A/V work, it attempts to fetch the id of the body of the Canvas.

Here is an example where you can see this (just look at the Network tab on the main page or any work page):

https://rfta-fall-2023.vercel.app/

You can also see it here:

https://dc.library.northwestern.edu/items/46394d80-6862-479a-bac1-e5486bc86723

Expanding on this comment:

I think there are two major improvements that can be made to the configuration immediately and relatively easily.

The first is to make all properties of the ViewerConfigOptions type required, and create a second ViewerConstructorOptions that includes the optional and overloaded versions. As an example, ViewerConfigOptions would have:

{
  informationPanel: {
    vtt: {
      autoScroll: AutoScrollOptions
    }
  }
}

while ViewerConstructorOptions would have:

{
  informationPanel?: {
    vtt?: {
      autoScroll?: AutoScrollOptions | AutoScrollSettings | boolean
    }
  }
}

That would preserve the overloaded behavior offered to the consumer, while removing the need for a massive amount of ?. chaining and typecasting throughout the rest of the code. The Constructor version would be coerced into the standard Config version on init, and it would always reliably be there.

The other thing, which goes hand in hand with that one, would be to take any configuration provided by the consumer and deep merge it with the default configuration instead of relying on the consumer to pass in a full config or making every piece of a code that uses a particular option have its own guards.

These two changes would greatly simplify the project as a whole, and make type checking more reliable for both internal components and consumers.

It appears Clover is not localizable.

See here and here.

There aren't a ton of strings in the library. If we had time to add support for localized strings, would you consider a PR?

Hi, tried the the version 2.7.1 and 2.7.2 in a Nextra app and got this error when building:

./node_modules/@samvera/clover-iiif/dist/scroll/index.mjs
Attempted import error: 'Document' is not exported from 'flexsearch' (imported as 'Q').

Import trace for requested module:
./node_modules/@samvera/clover-iiif/dist/scroll/index.mjs
./node_modules/@samvera/clover-iiif/dist/index.mjs
./components/work.tsx

The components is basically the demo component.

Description

Provide full screen mode option (via OpenSeadragon)

Done looks like

• User can enter full screen mode

Currently the "audio visualizer" UI will display for non-streaming audio files (as seen below), but doesn't render for streaming (HLS) files.

Related to: https://github.com/nulib/repodev_planning_and_docs/issues/4372

Done Looks Like

• Audio visualizer displays for both streaming and regular audio mime types.

How to Test

See PR #157

Hi!
I am trying to reduce Cumulative Layout Shift (CLS) in a Nextjs v13 app router app. I see that https://dc.library.northwestern.edu/ have some quick CLS when navigating to a item page and mounting Clover.

Do you have any thoughts on how to mitigate this? Adding a loading state in the next/dynamic config does not really fix this. The clover-iiif loading state takes over after the Next loading state is remove, and it has with no height set.

const CloverIIIF = dynamic(() => import('@samvera/clover-iiif'), {
  ssr: false,
  loading: () => <div className='h-[650px] bg-slate-500'>Blæ...</div>
})

I might have missed something, but do you have some advice on this topic?

Hi @mathewjordan!

At tiju.ca I am trying to make clover-iiif work with nextra and biiif

I got it working locally within a markdown document:

However, something breaks the build process at Vercel:

[22:35:29.342] Cloning github.com/buccalon/tijuca (Branch: main, Commit: 4283112)
[22:35:29.906] Cloning completed: 563.775ms
[22:35:30.470] Looking up build cache...
[22:35:32.777] Build cache downloaded [46.01 MB]: 1961.975ms
[22:35:32.824] Running "vercel build"
[22:35:33.328] Vercel CLI 28.2.2
[22:35:33.692] Installing dependencies...
[22:35:34.245] Lockfile is up-to-date, resolution step is skipped
[22:35:34.272] Progress: resolved 1, reused 0, downloaded 0, added 0
[22:35:34.362] Packages: +90
[22:35:34.362] ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
[22:35:35.273] Progress: resolved 90, reused 0, downloaded 31, added 35
[22:35:36.274] Progress: resolved 90, reused 0, downloaded 75, added 86
[22:35:36.750] 
[22:35:36.750] dependencies:
[22:35:36.750] + @samvera/clover-iiif 1.10.3
[22:35:36.750] 
[22:35:37.274] Progress: resolved 90, reused 0, downloaded 79, added 90, done
[22:35:37.293] Detected Next.js version: 12.3.0
[22:35:37.300] Running "pnpm run build"
[22:35:37.783] 
[22:35:37.783] > [email protected] build /vercel/path0
[22:35:37.783] > next build
[22:35:37.783] 
[22:35:38.346] info  - Linting and checking validity of types...
[22:35:38.555] info  - Creating an optimized production build...
[22:35:40.094] [nextra] The repository is shallow cloned, so the latest modified time will not be presented. Set the VERCEL_DEEP_CLONE=true environment variable to enable deep cloning.
[22:35:47.703] 
[22:35:47.704] �[1m�[33mwarn�[39m�[22m - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
[22:35:47.705] �[1m�[33mwarn�[39m�[22m - https://tailwindcss.com/docs/content-configuration
[22:35:58.888] info  - Compiled successfully
[22:35:58.888] info  - Collecting page data...
[22:35:59.481] ReferenceError: document is not defined
[22:35:59.481]     at /vercel/path0/node_modules/.pnpm/[email protected]/node_modules/openseadragon/build/openseadragon/openseadragon.js:945:29
[22:35:59.482]     at /vercel/path0/node_modules/.pnpm/[email protected]/node_modules/openseadragon/build/openseadragon/openseadragon.js:948:6
[22:35:59.482]     at Object.<anonymous> (/vercel/path0/node_modules/.pnpm/[email protected]/node_modules/openseadragon/build/openseadragon/openseadragon.js:1046:2)
[22:35:59.482]     at Module._compile (node:internal/modules/cjs/loader:1105:14)
[22:35:59.482]     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
[22:35:59.482]     at Module.load (node:internal/modules/cjs/loader:981:32)
[22:35:59.482]     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
[22:35:59.483]     at Module.require (node:internal/modules/cjs/loader:1005:19)
[22:35:59.483]     at require (node:internal/modules/cjs/helpers:102:18)
[22:35:59.483]     at Object.<anonymous> (/vercel/path0/node_modules/.pnpm/@[email protected]/node_modules/@samvera/clover-iiif/dist/index.cjs.js:1:80661)
[22:35:59.483] 
[22:35:59.484] > Build error occurred
[22:35:59.485] Error: Failed to collect page data for /item/1891-relatorio-archer
[22:35:59.486]     at /vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/utils.js:771:15
[22:35:59.486]     at processTicksAndRejections (node:internal/process/task_queues:96:5) {
[22:35:59.486]   type: 'Error'
[22:35:59.486] }
[22:35:59.512]  ELIFECYCLE  Command failed with exit code 1.
[22:35:59.522] Error: Command "pnpm run build" exited with 1

Do you have any suggestions on how should I proceed?

Thanks again :)

Description

Clover Viewer should support this via the use of accompanyingCanvas in a IIIF Manifest's Canvas. The use case might be for displaying an image for an audio file.

Done looks like

• includes an accompanyingCanvas property, similar to this IIIF Cookbook Recipe

Description

Clover should support locales for hardcoded language strings in the User Interface.

Support should include:

• Any UI items (About, More Information, etc...)
• Alt, title, and aria attributes on UI elements (Icon titles for SVGs, arias for Item thumbnails)

Locales should be modeled in a way to be set from a high level property on the Clover component. Some default locales likely en or en-us would be used.

Done looks like

• Clover is more mature, not an English-only application
• UI items and alt, title, and aria-* attributes are derived from locale set constants
• System created for setting preferred locales
• Docs demonstrate how contributors can submit new locales

Mind swapping out the relative path here, and anywhere we come across them?

Originally posted by @adamjarling in #72 (comment)

On larger manifests with many items, rendering/loading is slow as offscreen item thumbnails are rendered and images are requested. Should we build in some lazyloading mechanism using interaction-observer to only render the visible (or nearly visible) items?

Note: Trey Pendragon noticed this slowness when rendering a very large in items length manifest.

Hello,

When an accompanyingCanvas is used with an audio file, the visualizer is shown under the canvas. Here is an example manifest.
Ideally, the visualizer background should be transparent and shown above the canvas.

When using React 18 there is an „Invalid hook call“ showing up in the console.

https://reactjs.org/warnings/invalid-hook-call-warning.html

If you change the version in your sandbox example you can see it as well.

I'm eager to use Clover for a new web project. However, I'm finding a fetch error in cases where a Manifest's @id URI points to a permalink server which in turn returns an HTTP redirect back to the original Manifest.

Example: passing this Manifest to the Viewer component:

<Viewer iiifContent="https://www.digitalcommonwealth.org/search/commonwealth:x346gm94s/manifest" />

The Manifest's @id points to an ARK permalink at https://ark.digitalcommonwealth.org/ark:/50959/x346gm94s/manifest

Sending a GET request to that ARK permalink returns a 302 Found HTTP response with the Location back to the original at https://digitalcommonwealth.org/search/commonwealth:x346gm94s/manifest

Trying either of these URIs — the original Manifest or the ARK permalink ID — in other IIIF viewers (e.g., Universal Viewer or TIFY) works just fine, so it's not a CORS problem.

@regisrob Noted in IIIF #technical slack chance that:

... I have made a sample manifest and tested it into the JSON-LD playground, and it seems to be valid 👍
But right now I am noticing that only Mirador and Annona are able to handle it properly. UV and Clover seem to ignore the image service and request the resource['@id'] that is the full/max image!

It seems like clover is ignoring the service altogether and opting to render to OpenSeadragon the @id of the resource.

Using fixture:
https://api.npoint.io/3d15bb9bb3a45387635a

{
  "@id": "https://api.nakala.fr/iiif/10.34847/nkl.a928576r/04ec695c9663bf147d6abff86b1245ccd319a769/full/max/0/default.jpg",
  "@type": "dctypes:Image",
  "format": "image/jpeg",
  "height": 5494,
  "service": {
    "id": "https://api.nakala.fr/iiif/10.34847/nkl.a928576r/04ec695c9663bf147d6abff86b1245ccd319a769",
    "type": "ImageService3",
    "profile": "level2",
    "@context": "http://iiif.io/api/image/3/context.json"
  }
}

Hello,

Would it be possible to add the next/previous buttons that appear in the Media controls to the controls of the ImageViewer?
This is related to the full-screen issue #181 I created where I would want to be able to navigate several pages from a full-screen view.

We embed viewers via iFrames, so we rely on viewers filling the container they're in. It looks like clover doesn't have a containing div that expands to fill, and instead you can pass the height of the canvas (which may vary.) I've chatted about this a little with y'all, but thought it'd be good to record a ticket.

We noticed that if we append parameters (we add an authorization token sometimes) to the .m3u8 that it doesn't render, because it only loads HLS if it ends with an extension rather than going off the "format." Would that be a big lift? Or at least making it so either or would work?

Description

Noted by @wykhuh

One issue I noticed is there is a intermittent bug where the image shown in the image viewer sometimes does not change when the canvas is updated using updateActiveCanvas

      dispatch({
        type: "updateActiveCanvas",
        canvasId: canvasId,
      });

For instance, I was on the third image, and I clicked on the second thumbnail, but the image viewer still shows the third image while the thumbnail bar shows the second image as being active. This bug only happens sometimes.

Done Looks Like

• Clover reliably updates active canvas

Description

Make a list of YES/NOs or Clover https://iiif.io/api/cookbook/recipe/matrix/ and work these into testing and/or docs as a fixtures. Then fix any easy ones.

Done Looks Like

• Recipes are tested against Clover
• Our docs somehow showcase Clover's capabilities against recipes

Notes

Basic Recipes

• 0001 Simplest Manifest - Single Image Files View in Clover
• 0002 Simplest Manifest - Audio View in Clover
• 0003 Simplest Manifest - Video View in Clover
• 0005 Support Deep Viewing with Basic Use of a IIIF Image Service View in Clover
• 0009 Simple Manifest - Book View in Clover

IIIF Properties

• 0007 Embedding HTML in descriptive properties View in Clover
• 0008 Rights statement (rights, requiredStatement) View in Clover
• 0029 Metadata on any Resource (metadata) View in Clover PARTIAL
• 0053 Linking to Structured Metadata (seeAlso) View in Clover
• 0117 Image Thumbnail for Manifest (thumbnail) View in Clover

Image Recipes

• 0001 Simplest Manifest - Single Image Files View in Clover
• 0005 Support Deep Viewing with Basic Use of a IIIF Image Service View in Clover
• 0009 Simple Manifest - Book View in Clover

Audio/Visual Recipes

• 0002 Simplest Manifest - Audio View in Clover
• 0003 Simplest Manifest - Video View in Clover
• 0219 Using Caption and Subtitle Files with Video Content View in Clover

See:
IIIF/cookbook-recipes#356

Background to this issue here: ArchiveLabs/iiif.archivelab.org#108

It looks like Clover can't play this video manifest from the Internet Archive:

https://samvera-labs.github.io/clover-iiif/?iiif-content=https://iiif.archive.org/iiif/3/youtube-7w8F2Xi3vFw/manifest.json

Manifest: https://iiif.archive.org/iiif/3/youtube-7w8F2Xi3vFw/manifest.json

and complains about a CORS error. Through testing in 108 it looks like the other viewers can play this resource so it might be a Clover issue. If it is a IA setup issue please let us know and we can try and get them to fix it.