Dev/nop 21/static images

.github/workflows/ci.yml

@@ -10,7 +10,8 @@ jobs:
   cypress:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+    - uses: actions/checkout@v4
+    - run: cksum src/components/DLViewer.vue
     - uses: actions/setup-node@v3
       with:
         node-version: 16
@@ -24,7 +25,7 @@ jobs:
     # needs: cypress
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version: 16
@@ -51,6 +52,8 @@ jobs:
           fi
       - run: npm install && npm run build
         if: env.DESTINATION_DIR
+      - run: ls -R dist
+        if: env.DESTINATION_DIR
       - name: deploy
         if: env.DESTINATION_DIR
         uses: jakejarvis/s3-sync-action@be0c4ab89158cac4278689ebedd8407dd5f35a83

cypress/integration/collection.spec.js

@@ -1,5 +1,5 @@
 describe('A IIIF Collection', () => {
-  const URL_PARAMETERS = '#?manifest=https%3A%2F%2Ftest.iiif.library.ucla.edu%2Fcollections%2Fark%253A%252F21198%252Fz11c574k';
+  const URL_PARAMETERS = '#?manifest=https%3A%2F%2Fiiif.library.ucla.edu%2Fcollections%2Fark%253A%252F21198%252Fz11c574k';
 
     it('loads Universal Viewer in an iframe', () => {
       cy.visit('/' + URL_PARAMETERS)

src/components/DLViewer.vue

@@ -9,10 +9,12 @@
 
 import axios from "axios";
 import { defineAsyncComponent } from "vue";
+import _get from "lodash/get"
 
 export default {
   name: "DLViewer",
   components: {
+    ImageTag: defineAsyncComponent(() => import("./ImageTag.vue")),
     Mirador: defineAsyncComponent(() => import("./Mirador.vue")),
     MiradorPalimpsest: defineAsyncComponent(() => import("./MiradorPalimpsest.vue")),
     VideoJS: defineAsyncComponent(() => import("./VideoJS.vue")),
@@ -49,14 +51,19 @@ export default {
     firstItemTypeFromChoice() {
       return this.isChoice && this.iiif_manifest.items[0].items[0].items[0].body.items[0].type
     },
+    getIiifService() {
+      const iiifServicePath = this.isV3Manifest ?
+        "iiif_manifest.items[0].items[0].items[0].body.service" :
+        "iiif_manifest.sequences[0].canvases[0].images[0].resource.service"
+      console.log(_get(this, iiifServicePath), !!_get(this, iiifServicePath))
+      return !!_get(this, iiifServicePath)
+    },
     isChoice() {
       return (this.firstItemType == "Choice")
     },
     isCollection() {
-      return (
-        this.iiif_manifest &&
-        this.iiif_manifest.type &&
-        this.iiif_manifest.type == "Collection")
+      // Have seen "'@type': 'sc:Collection'" and "'type': 'Collection'"
+      return _get(this, "iiif_manifest.@type", _get(this, "iiif_manifest.type", "")).includes("Collection")
     },
     isImage() {
       return (this.firstItemType == "Image")
@@ -95,6 +102,13 @@ export default {
             { src: source.id, type: source.format} // HLS for Safari
           )),
         }
+      } else if (this.viewer == "ImageTag") {
+        return {
+          src: _get(this, "iiif_manifest.items[0].items[0].items[0].body.id"),
+          height: _get(this, "iiif_manifest.items[0].items[0].items[0].body.height"),
+          width: _get(this, "iiif_manifest.items[0].items[0].items[0].body.width"),
+          alt: _get(this, "iiif_manifest.label.none[0]", ""),
+        }
       } else {
         return {
           iiif_manifest: this.iiif_manifest,
@@ -104,7 +118,6 @@ export default {
       }
     },
     isAppleOrIOS(){
-      console.log("user agent info", navigator.userAgent)
       return /(Apple|iOS)/.test(navigator.userAgent)
     },
     videoSources() {
@@ -123,7 +136,8 @@ export default {
         this.isCollection ? "UniversalViewer" :
         this.isVideo ? "VideoJS" :
         this.isSound ? "UniversalViewer3" :
-        this.isImage ? "UniversalViewer" :
+        this.isImage && this.hasIiifService ? "UniversalViewer" :
+        this.isImage && !this.hasIiifService ? "ImageTag" :
         "UniversalViewer"
       )
     },

src/components/ImageTag.vue

@@ -0,0 +1,25 @@
+<template>
+  <img v-bind="options" class="image-tag" />
+</template>
+
+<script>
+export default {
+  name: "ImageTag",
+  props: {
+    options: {
+      // { src: [...] }
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style>
+.image-tag {
+  width: 100%;
+  height: 100%;
+
+  object-fit: contain;
+}
+</style>