WIP embed mirador viewer

app/assets/stylesheets/application.scss

@@ -19,6 +19,7 @@ $brand: $primary;
 $brand_text: $white;
 
 @import "arclight"; // includes bootstrap, blacklight, and arclight base styles
+@import "mirador";
 @import "font-awesome";
 @import "font-awesome-pro";
 @import "font-awesome-pro/light";

app/components/acfa/viewers/mirador_component.html.erb

@@ -1,13 +1,12 @@
 <div id="embed" class="mb-2">
   <h2 class="al-show-sub-heading"><%= t('arclight.views.show.embedded_content') %></h2>
+  <% if embed_iiif_manifest %>
+    <div class="position-relative"><%= mirador_container(class: %w(container-fluid px-0)) %></div>
+  <% end %>
   <% embeddable_resources.each do |resource| -%>
     <div class="al-digital-object media breadcrumb-item breadcrumb-item-<%= depth + 6 %>">
       <%= link_to(resource.label, resource.href) %>
     </div>
-    <div class="position-relative">
-      <div id="mirador" class="container-fluid px-0" data-manifest="<%= manifest_for(resource) %>">
-      </div>
-    </div>
   <% end -%>
   <% linked_resources.each do |resource| %>
     <div class="al-digital-object media breadcrumb-item breadcrumb-item-<%= depth + 6 %>">

app/components/acfa/viewers/mirador_component.rb

@@ -11,6 +11,28 @@ def embeddable?(object)
       end
     end
 
+    def embed_iiif_manifest
+      return helpers.iiif_collection_url(solr_document_id: @document.id, format: 'json') if embeddable_resources_iiif_manifests[1]
+      embeddable_resources_iiif_manifests.first
+    end
+
+    def embeddable_resources_iiif_manifests
+      @embeddable_resources_iiif_manifests ||= embeddable_resources.map { |r| manifest_for(r) }.compact
+    end
+
+    def mirador_container(**attrs)
+      html_attrs = attrs.dup
+      data_attrs = (html_attrs.delete(:data) || {}).merge({ manifest: embed_iiif_manifest, :"use-folders" => use_iiif_folders? })
+      if embed_iiif_manifest
+        return content_tag(:div, {}, id: 'mirador', data: data_attrs, **html_attrs)
+      end
+    end
+
+    def use_iiif_folders?
+      # TODO: how do we determine when to use the folder UI from the solr data?
+      false
+    end
+
     def include_patterns
       [/\/(10\.7916\/[A-Za-z0-9\-\.]+)/, /\/\/archive\.org\/details\//]
     end
@@ -28,7 +50,7 @@ def doi_manifest(href)
     def ia_manifest(href)
       ia_id = href.split("archive.org/details/").last&.split('/')
       ia_id = ia_id&.first
-      "https://iiif.archive.org/iiif/2/#{ia_id}/manifest.json" if ia_id
+      "https://iiif.archive.org/iiif/3/#{ia_id}/manifest.json" if ia_id
     end
   end
 end

app/javascript/entrypoints/application.jsx

@@ -5,5 +5,7 @@ import 'blacklight-frontend';
 
 import '../autocomplete-setup';
 import '../request-cart-setup';
-import '../mirador-setup';
 import '../blacklight-range-limit';
+import loadMirador from '../src/mirador';
+
+document.addEventListener('turbo:load', loadMirador);

app/javascript/src/mirador.js

@@ -0,0 +1,101 @@
+import Mirador from '@columbia-libraries/mirador/dist/es/src';
+import miradorDownloadPlugins from '@columbia-libraries/mirador/dist/es/src/culPlugins/mirador-downloaddialog';
+import canvasRelatedLinksPlugin from '@columbia-libraries/mirador/dist/es/src/culPlugins/mirador-canvasRelatedLinks';
+import citationSidebar from '@columbia-libraries/mirador/dist/es/src/culPlugins/mirador-citations';
+import hintingSidebar from '@columbia-libraries/mirador/dist/es/src/culPlugins/mirador-hinting-sidebar';
+import videoJSPlugin from '@columbia-libraries/mirador/dist/es/src/culPlugins/mirador-videojs';
+import viewerNavigation from '@columbia-libraries/mirador/dist/es/src/culPlugins/mirador-pageIconViewerNavigation';
+import viewXmlPlugin from '@columbia-libraries/mirador/dist/es/src/culPlugins/mirador-viewXml';
+import collectionFoldersPlugin from
+  '@columbia-libraries/mirador/dist/es/src/culPlugins/mirador-selectCollectionFolders';
+
+const flattenPluginConfigs = (...plugins) => plugins.reduce((acc, curr) => acc.concat([...curr]), []);
+
+function loadMirador() {
+  const miradorDiv = document.getElementById('mirador');
+  if (!miradorDiv) return;
+
+  const manifestUrl = miradorDiv.dataset.manifest;
+  if (manifestUrl) {
+    const numChildren = miradorDiv.dataset['num-children'] || 1;
+
+    const getStartCanvas = (queryParams) => {
+      if (queryParams.get('canvas')) {
+        const canvases = queryParams.get('canvas').split(',');
+        const canvas = canvases[0];
+        return canvas.startsWith('../') ? manifestUrl.replace('/manifest', canvas.slice(2)) : canvas;
+      }
+      return null;
+    };
+    const startCanvas = getStartCanvas(new URL(document.location).searchParams);
+    const viewConfig = {};
+    if (numChildren && numChildren === 1) {
+      viewConfig.views = [{ key: 'single' }];
+      viewConfig.defaultView = 'single';
+    }
+    const culMiradorPlugins = flattenPluginConfigs(
+      canvasRelatedLinksPlugin,
+      citationSidebar,
+      hintingSidebar,
+      miradorDownloadPlugins,
+      videoJSPlugin,
+      viewerNavigation,
+      viewXmlPlugin,
+    );
+    const foldersAttValue = miradorDiv.dataset['use-folders'];
+    const useFolders = (Boolean(foldersAttValue) && !String.toString(foldersAttValue).match(/false/i));
+    if (useFolders) {
+      culMiradorPlugins.push(...collectionFoldersPlugin);
+      viewConfig.allowTopCollectionButton = true;
+      viewConfig.sideBarOpen = true;
+    }
+
+    Mirador.viewer(
+      {
+        id: 'mirador',
+        window: {
+          allowClose: false,
+          allowFullscreen: true,
+          allowMaximize: false,
+          panels: {
+            info: true,
+            canvas: true,
+          },
+          canvasLink: {
+            active: true,
+            enabled: true,
+            singleCanvasOnly: false,
+            providers: [],
+            getCanvasLink: (manifestId, canvases) => {
+              const baseUri = window.location.href.replace(window.location.search, '');
+              const isManifest = (canvas) => canvas.id.startsWith(manifestId.replace('/manifest', ''));
+              const canvasIndices = canvases.map(
+                (canvas) => (isManifest(canvas) ? `../canvas/${canvas.id.split('/').slice(-2).join('/')}` : canvas.id),
+              );
+              return `${baseUri}?canvas=${canvasIndices.join(',')}`;
+            },
+          },
+          ...viewConfig,
+        },
+        windows: [
+          { manifestId: manifestUrl, canvasId: startCanvas },
+        ],
+        workspace: {
+          showZoomControls: true,
+        },
+        workspaceControlPanel: {
+          enabled: false,
+        },
+        miradorDownloadPlugin: {
+          restrictDownloadOnSizeDefinition: true,
+        },
+        translations: {
+          en: { openCompanionWindow_citation: 'Citation' },
+        },
+      },
+      culMiradorPlugins,
+    );
+  }
+}
+
+export default loadMirador;

package.json

@@ -22,10 +22,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@columbia-libraries/mirador": "3.3.1-3789.10",
+    "@columbia-libraries/mirador": "3.3.1-3789.14",
     "@github/auto-complete-element": "^3.6.2",
     "@hotwired/turbo-rails": "^8.0.4",
-    "@mui/system": "^5.13.5",
+    "@mui/material": "5.14.15",
+    "@mui/styles": "5.14.15",
+    "@mui/system": "5.14.15",
     "@popperjs/core": "^2.11.8",
     "@vitejs/plugin-basic-ssl": "^1.1.0",
     "arclight": "^1.1.4",

spec/components/acfa/viewers/mirador_component_spec.rb

@@ -0,0 +1,37 @@
+require 'rails_helper'
+
+describe Acfa::Viewers::MiradorComponent, type: :component do
+  subject(:component) { described_class.new(document: document, presenter: document_presenter) }
+
+  let(:document) { instance_double(SolrDocument, digital_objects: []) }
+  let(:document_presenter) { instance_double(Arclight::ShowPresenter, fields_to_render: [double]) }
+
+
+  include_context "renderable view components"
+  it "does not render" do
+    expect(component.render?).to be false
+  end
+  context "has one embeddable resource" do
+    let(:label) { 'resource label' }
+    let(:href) { 'https://doi.org/10.7916/d8-3tyk-ew60' }
+    let(:iiif_object) { instance_double(Arclight::DigitalObject, label: label, href: href) }
+    let(:document) { instance_double(SolrDocument, digital_objects: [iiif_object], parents: []) }
+    it "renders" do
+      expect(rendered_node).to have_selector 'div#mirador'
+    end
+  end
+  context "has multiple embeddable resources" do
+    let(:label1) { 'resource label 1' }
+    let(:href1) { 'https://doi.org/10.7916/d8-3tyk-ew60' }
+    let(:iiif_object1) { instance_double(Arclight::DigitalObject, label: label1, href: href1) }
+
+    let(:label2) { 'resource label 2' }
+    let(:href2) { 'https://doi.org/10.7916/d8-3tyk-ew61' }
+    let(:iiif_object2) { instance_double(Arclight::DigitalObject, label: label2, href: href2) }
+
+    let(:document) { instance_double(SolrDocument, digital_objects: [iiif_object1, iiif_object2], parents: []) }
+    it "renders" do
+      expect(rendered_node).to have_selector 'div#mirador'
+    end
+  end
+end