samvera-labs / clover-iiif Goto Github PK
View Code? Open in Web Editor NEWExtensible IIIF front-end toolkit and Manifest viewer. Accessible. Composable. Open Source.
Home Page: https://samvera-labs.github.io/clover-iiif/
License: Other
Extensible IIIF front-end toolkit and Manifest viewer. Accessible. Composable. Open Source.
Home Page: https://samvera-labs.github.io/clover-iiif/
License: Other
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?
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?
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.
@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.
Hello,
I would like to set "Show captions" by default on init.
Is there any option that I'm missing?
Thanks in advance!
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,
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.
Mind swapping out the relative path here, and anywhere we come across them?
Originally posted by @adamjarling in #72 (comment)
In OSD component, a new openseadragron viewer instance is created when that component is created.
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?
is the openseadragon viewer destroyed when the component is dismounted? Or should clover manually destroy the viewer using openseadragon destroy viewer.destroy(); viewer = null
?
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?
Investigating
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.
accompanyingCanvas
property, similar to this IIIF Cookbook RecipeTo 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
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.
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.
Provide full screen mode option (via OpenSeadragon)
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
Background to this issue here: ArchiveLabs/iiif.archivelab.org#108
It looks like Clover can't play this video manifest from the Internet Archive:
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.
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
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
I don't see any problems within the manifest, and I guess this is a problem of the viewer.
What is the current recommendation for adding an SVG overlay to the viewer? (such as: https://github.com/openseadragon/svg-overlay)
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.
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:
clover-iiif/src/components/ImageViewer/OSD.tsx
Lines 27 to 43 in 6eaebba
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!
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
mime type
s.See PR #157
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 :)
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"
?
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.
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.
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.
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
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.
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.
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
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.
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.
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?
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.
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!
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.
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?
Clover should support locales for hardcoded language strings in the User Interface.
Support should include:
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.
alt
, title
, and aria-*
attributes are derived from locale set constantsOn 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.
@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,
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.
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!
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.