Feature request: embed IIIF viewer

[MonikaBarget]

In the longer term, it would be good to be able to embed viewers for original digitised sources, especially when the narrative is mostly text-driven. Most early modern prints that I am working with are very large volumes, so it isn't an option to directly store the PDFs in Github, and external storage providers like Surf often block automated access even when you assign a document a public URL, so embedding them is difficult.

One solution can be to rely on IIIF, which is a standard that most archives use for image transmission on the web. The large Moser volume I am working with, for instance, is hosted by Digitale Sammlungen in Germany, who make use of IIIF and the Mirador viewer on their on website:

https://www.digitale-sammlungen.de/en/view/bsb11224455?page=,1

The work can be re-used and displayed free of charge for academic and educational purposes, which is why the collection also includes a so-called IIIF manifest: https://api.digitale-sammlungen.de/iiif/presentation/v2/bsb11224455/manifest

The manifest is what allows you to re-integrate the image content into other applications: https://iiif.io/guides/using_iiif_resources/

The Mirador viewer itself is also open source and quite popular in academic and heritage institutions, but it is overkill for StoryScript. A more simplified viewer is Universal Viewer.

They allow testing on their website, which gives me this for the Moser IIIF manifest:

Test-embedding is officially possible via the following code structure, but when I tried in one of my HTML files in StoryScipt, I only got a black box with a spinning loading circles that never actually resolved:

<center><iframe src="https://universalviewer.io/uv.html?manifest=https://api.digitale-sammlungen.de/iiif/presentation/v2/bsb11224455/manifest" width="800" height="600" frameborder="0" allowfullscreen="allowfullscreen"></iframe></center>

Maybe we can explore this further at some point. I will now create a work-around, embedding some individual pages using iframe.

[MonikaBarget]

PS: I found a different way to embed the test viewer and have put it into the map story to see if it works:

This is exactly what I need for making the text-based story, but I am not sure how reliable it is to use the viewer via the UV demo app. The code I have now embedded is this:

<iframe src="https://uv-v4.netlify.app/uv.html#?manifest=https%3A%2F%2Fapi.digitale-sammlungen.de%2Fiiif%2Fpresentation%2Fv2%2Fbsb11224455%2Fmanifest&c=0&m=0&cv=1&config=&locales=en-GB%3AEnglish+%28GB%29%2Ccy-GB%3ACymraeg%2Cfr-FR%3AFran%C3%A7ais+%28FR%29%2Cpl-PL%3APolski%2Csv-SE%3ASvenska&xywh=-724%2C0%2C5247%2C2483&r=0" width="640" height="480" allowfullscreen frameborder="0" title="Moser, Johann Jacob: Von der Teutschen Crays-Verfassung"></iframe>

When it comes to sustainability, I am not worried about the IIF manifests at all because these are created to be unique and stable, so it is highly unlikely that public archives will retract them. The only weak link at present is the externally hosted viewer app, but it is good enough for demonstration purposes.

[MonikaBarget]

PS @RutgerSchurgers : For now, I am using the viewer as part of the "view" pop-up box for "backpack" items, which works fine if I still make the box a bit bigger:

Going forward, it might also be nice to display a reader like this in a separate container once a "read" action is triggered, but this is not urgent now.

I also thought about placing the combinations box below the location text and displaying the reader dynamically next to the buttons when a certain action is triggered, but this does not work because the combinations box excepts strings as return values, so I cannot feed it full HTML.

[RutgerSchurgers]

@MonikaBarget , the Conversations component now displays HTML if you pass that to it. You can put HTML in string values in your TS components, but it works better to include .html files in your TS file as you include the descriptions for your locations, e.g.:

import description from './Start.html?raw';

You can then use the import name as string value to use in your combination result.