feat: configurable IIIF Presentation plugin (#2387)

* feat: configurable IIIF viewer

* Default is Mirador
* Switch to media swiper, without bundling Mirador code, with:
  `BUILD_IIIF_VIEWER=swiper`

* refactor: change env var; rename plugins; list props as alt

"list-props" IIIF Presentation plugin simply lists its props.

Enable (non-production) with: `IIIF_PRESENTATION_PLUGIN=list-props`

* chore: bump size limit

packages/mirador/package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "build": "npx webpack --config webpack.config.cjs"
   },
+  "type": "module",
   "dependencies": {
     "mirador": "^3.3.0",
     "react": "^16.13.1",

packages/portal/.env.example

@@ -195,3 +195,10 @@ OAUTH_CLIENT="YOUR_CLIENT"
 # ensure the key has a translation at least in /src/lang/en.js
 # at notificationBanner.text.[KEY]
 # APP_NOTIFICATION_BANNER=key
+
+
+# Build-time options.
+
+# Plugin to use for handling IIIF Presentation manifests.
+# Options: mirador (default); list-props
+# IIIF_PRESENTATION_PLUGIN=swiper

packages/portal/nuxt.config.js

@@ -305,7 +305,8 @@ export default {
     '~/plugins/vue-announcer.client',
     '~/plugins/vue-masonry.client',
     '~/plugins/vue-scrollto.client',
-    '~/plugins/features'
+    '~/plugins/features',
+    `~/plugins/iiif/presentation/${process.env.IIIF_PRESENTATION_PLUGIN || 'mirador'}`
   ],
 
   buildModules: [

packages/portal/src/components/iiif/IIIFListProps.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="d-flex flex-column align-items-center"
+  >
+    <h2>IIIF</h2>
+    <dl>
+      <dt>uri</dt>
+      <dd>{{ uri }}</dd>
+      <dt>itemId</dt>
+      <dd>{{ itemId }}</dd>
+      <dt>searchQuery</dt>
+      <dd>{{ searchQuery }}</dd>
+      <dt>providerUrl</dt>
+      <dd>{{ providerUrl }}</dd>
+    </dl>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'IIIFListProps',
+
+    props: {
+      uri: {
+        type: String,
+        required: true
+      },
+
+      itemId: {
+        type: String,
+        default: null
+      },
+
+      searchQuery: {
+        type: String,
+        default: null
+      },
+
+      providerUrl: {
+        type: String,
+        default: null
+      }
+    }
+  };
+</script>

packages/portal/src/components/iiif/IIIFViewer.vue → packages/portal/src/components/iiif/IIIFMiradorViewer.vue

@@ -27,7 +27,7 @@
   import upperFirst from 'lodash/upperFirst';
 
   export default {
-    name: 'IIIFViewer',
+    name: 'IIIFMiradorViewer',
 
     components: {
       IIIFErrorMessage: () => import('./IIIFErrorMessage.vue')

packages/portal/src/components/item/ItemHero.vue

@@ -5,12 +5,13 @@
       class="iiif-viewer-wrapper d-flex flex-column"
     >
       <slot name="item-language-selector" />
-      <IIIFViewer
+      <IIIFPresentation
         :uri="iiifPresentationManifest"
         :search-query="fulltextSearchQuery"
         :aria-label="$t('actions.viewDocument')"
         :item-id="identifier"
         :provider-url="providerUrl"
+        @select="selectMedia"
       />
     </div>
     <ItemMediaSwiper
@@ -104,8 +105,7 @@
       ShareButton,
       ShareSocialModal,
       UserButtons: () => import('../user/UserButtons'),
-      ItemTranscribeButton: () => import('./ItemTranscribeButton.vue'),
-      IIIFViewer: () => import('../iiif/IIIFViewer.vue')
+      ItemTranscribeButton: () => import('./ItemTranscribeButton.vue')
     },
 
     mixins: [

packages/portal/src/plugins/iiif/presentation/list-props.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import IIIFListProps from '@/components/iiif/IIIFListProps.vue';
+
+const plugin = {
+  install(vue) {
+    vue.component('IIIFPresentation', IIIFListProps);
+  }
+};
+
+export default () => {
+  Vue.use(plugin);
+};

packages/portal/src/plugins/iiif/presentation/mirador.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import IIIFMiradorViewer from '@/components/iiif/IIIFMiradorViewer.vue';
+
+const plugin = {
+  install(vue) {
+    vue.component('IIIFPresentation', IIIFMiradorViewer);
+  }
+};
+
+export default () => {
+  Vue.use(plugin);
+};

packages/portal/tests/size/.size-limit.json

@@ -2,7 +2,7 @@
   {
     "name": "portal.js client",
     "running": false,
-    "limit": "1680 KB",
+    "limit": "1685 KB",
     "path": [
       ".nuxt/dist/client/*.js",
       "!.nuxt/dist/client/*.modern.js"
@@ -11,7 +11,7 @@
   {
     "name": "portal.js modern",
     "running": false,
-    "limit": "1625 KB",
+    "limit": "1630 KB",
     "path": [
       ".nuxt/dist/client/*.modern.js"
     ]

packages/portal/tests/unit/components/iiif/IIIFViewer.spec.js → packages/portal/tests/unit/components/iiif/IIIFMiradorViewer.spec.js

@@ -5,7 +5,7 @@ import nock from 'nock';
 import sinon from 'sinon';
 import VueI18n from 'vue-i18n';
 
-import IIIFViewer from '@/components/iiif/IIIFViewer.vue';
+import IIIFMiradorViewer from '@/components/iiif/IIIFMiradorViewer.vue';
 
 const localVue = createLocalVue();
 localVue.use(VueI18n);
@@ -36,7 +36,7 @@ const mockMiradorModule = {
   theme: {}
 };
 
-const factory = ({ propsData = {}, data = {} } = {}) => shallowMountNuxt(IIIFViewer, {
+const factory = ({ propsData = {}, data = {} } = {}) => shallowMountNuxt(IIIFMiradorViewer, {
   localVue,
   propsData: {
     uri: 'http://example.org/iiif/manifest.json',
@@ -60,7 +60,7 @@ const factory = ({ propsData = {}, data = {} } = {}) => shallowMountNuxt(IIIFVie
   }
 });
 
-describe('components/iiif/IIIFViewer.vue', () => {
+describe('components/iiif/IIIFMiradorViewer.vue', () => {
   beforeAll(() => {
     window.Mirador = mockMiradorModule.default;
     window.MiradorTheme = mockMiradorModule.theme;