From 16597ab0f8590cade4abdd2ef18d07ef0ad2d3d2 Mon Sep 17 00:00:00 2001
From: Richard Doe <richard.doe@rwdit.net>
Date: Wed, 27 Nov 2024 13:18:54 +0000
Subject: [PATCH] feat: thumbnail fallback

for non-viewable media, e.g. PDFs, isShownAt, TIFFs

and use same for viewable images without IIIF service until the
thumbnail is interacted with
---
 .../components/item/ItemMediaPresentation.vue | 81 ++++++++-----------
 .../components/item/ItemMediaThumbnail.vue    |  8 +-
 .../components/item/ItemMediaThumbnails.vue   |  2 +-
 .../src/components/media/MediaCardImage.vue   | 17 +++-
 .../src/components/media/MediaImageViewer.vue | 68 +++-------------
 packages/portal/src/composables/thumbnails.js |  0
 packages/portal/src/pages/item/_.vue          |  4 +-
 .../src/plugins/europeana/edm/WebResource.js  | 30 ++-----
 .../portal/src/plugins/europeana/thumbnail.js | 13 ++-
 9 files changed, 83 insertions(+), 140 deletions(-)
 create mode 100644 packages/portal/src/composables/thumbnails.js

diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
index 357f4e11eb..95c628435c 100644
--- a/packages/portal/src/components/item/ItemMediaPresentation.vue
+++ b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -43,14 +43,13 @@
             :provider-url="providerUrl"
           />
           <MediaImageViewer
-            v-else-if="imageTypeResource"
+            v-else-if="viewableImageResource && !displayThumbnail"
             :url="resource.id"
             :item-id="itemId"
             :width="resource.width"
             :height="resource.height"
             :format="resource.format"
             :service="resource.service"
-            :thumbnail="thumbnail"
             @error="handleImageError"
           >
             <MediaImageViewerControls
@@ -58,51 +57,27 @@
               @toggleFullscreen="toggleFullscreen"
             />
           </MediaImageViewer>
-          <MediaPDFViewer
-            v-else-if="resource?.format === 'application/pdf'"
-            :url="resource.id"
-            :item-id="itemId"
-            class="media-viewer-content"
-          />
           <MediaAudioVisualPlayer
-            v-else-if="resource?.edm.isPlayableMedia"
+            v-else-if="resource?.edm?.isPlayableMedia"
             :url="resource.id"
             :format="resource.format"
             :item-id="itemId"
             class="media-viewer-content"
           />
           <EmbedOEmbed
-            v-else-if="resource?.edm.isOEmbed"
+            v-else-if="resource?.edm?.isOEmbed"
             :url="resource.id"
             class="media-viewer-content"
           />
-          <MediaImageViewer
-            v-else-if="resource?.edm?.preview"
-            :url="resource.edm.preview.about"
-            :item-id="itemId"
-            :width="resource.edm.preview.ebucoreWidth"
-            :height="resource.edm.preview.ebucoreHeight"
-            :thumbnail="thumbnail"
-          />
-          <MediaImageViewer
-            v-else-if="thumbnail"
-            :url="resource.edm.about"
-            :item-id="itemId"
-            :annotation="activeAnnotation"
-            :width="resource.edm.ebucoreWidth"
-            :height="resource.edm.ebucoreHeight"
-            :thumbnail="thumbnail"
+          <MediaCardImage
+            v-else-if="resource?.edm"
+            :media="resource.edm"
+            :lazy="false"
+            :edm-type="edmType"
+            :linkable="false"
+            thumbnail-size="large"
+            @click.native="() => thumbnailInteractedWith = true"
           />
-          <code
-            v-else
-            class="media-viewer-content h-50 w-100 p-5"
-          >
-            <pre
-              :style="{ color: 'white', 'overflow-wrap': 'break-word' }"
-            ><!--
-            -->{{ JSON.stringify(resource?.edm, null, 2) }}
-            </pre>
-          </code>
         </template>
       </div>
       <div
@@ -140,6 +115,7 @@
 
 <script>
   import LoadingSpinner from '../generic/LoadingSpinner.vue';
+  import MediaCardImage from '../media/MediaCardImage.vue';
   import useItemMediaPresentation from '@/composables/itemMediaPresentation.js';
 
   export class ItemMediaPresentationError extends Error {
@@ -161,9 +137,9 @@
       ItemMediaThumbnails: () => import('./ItemMediaThumbnails.vue'),
       LoadingSpinner,
       MediaAudioVisualPlayer: () => import('../media/MediaAudioVisualPlayer.vue'),
+      MediaCardImage,
       MediaImageViewer: () => import('../media/MediaImageViewer.vue'),
-      MediaImageViewerControls: () => import('../media/MediaImageViewerControls.vue'),
-      MediaPDFViewer: () => import('../media/MediaPDFViewer.vue')
+      MediaImageViewerControls: () => import('../media/MediaImageViewerControls.vue')
     },
 
     props: {
@@ -221,7 +197,8 @@
       return {
         fullscreen: false,
         showPages: true,
-        showSidebar: !!this.$route.hash
+        showSidebar: !!this.$route.hash,
+        thumbnailInteractedWith: false
       };
     },
 
@@ -259,6 +236,14 @@
     },
 
     computed: {
+      displayThumbnail() {
+        return !((
+          (this.viewableImageResource && (this.service || this.thumbnailInteractedWith)) ||
+          this.resource?.edm?.isPlayableMedia ||
+          this.resource?.edm?.isOEmbed
+        ));
+      },
+
       hasManifest() {
         return !!this.uri;
       },
@@ -271,20 +256,16 @@
         return this.resourceCount >= 2;
       },
 
-      thumbnail() {
-        return this.resource?.edm.thumbnails?.(this.$nuxt.context)?.large;
-      },
-
-      imageTypeResource() {
-        return this.resource?.edm.isHTMLImage;
+      viewableImageResource() {
+        return this.resource?.edm?.isHTMLImage;
       },
 
       addPaginationToolbarMaxWidth() {
-        return !this.imageTypeResource && this.multiplePages;
+        return !this.viewableImageResource && this.multiplePages;
       },
 
       addSidebarToggleMaxWidth() {
-        return !this.imageTypeResource && this.sidebarHasContent;
+        return !this.viewableImageResource && this.sidebarHasContent;
       }
     },
 
@@ -299,6 +280,12 @@
       }
     },
 
+    mounted() {
+      console.log('IMP resource', this.resource);
+      console.log('IMP resource.edm', this.resource?.edm);
+      console.log('IMP resource.edm.preview', this.resource?.edm?.preview);
+    },
+
     methods: {
       handleImageError(error) {
         this.$fetchState.error = error;
diff --git a/packages/portal/src/components/item/ItemMediaThumbnail.vue b/packages/portal/src/components/item/ItemMediaThumbnail.vue
index d201ae81c8..c946b015fa 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnail.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnail.vue
@@ -4,7 +4,7 @@
     class="item-media-thumbnail text-lowercase text-decoration-none"
   >
     <MediaCardImage
-      :media="resource.edm"
+      :media="resource"
       :lazy="lazy"
       :offset="offset"
       :edm-type="edmType"
@@ -23,7 +23,7 @@
 
 <script>
   import MediaCardImage from '../media/MediaCardImage.vue';
-  import EuropeanaMediaResource from '@/utils/europeana/media/Resource.js';
+  import WebResource from '@/plugins/europeana/edm/WebResource.js';
 
   export default {
     name: 'ItemMediaThumbnail',
@@ -33,7 +33,7 @@
     },
     props: {
       resource: {
-        type: EuropeanaMediaResource,
+        type: WebResource,
         required: true
       },
       offset: {
@@ -62,7 +62,7 @@
         return this.offset + 1;
       },
       mediaTypeIconClass() {
-        const mediaType = this.resource.edm.edmType || this.edmType;
+        const mediaType = this.resource.edmType || this.edmType;
         return mediaType ? `icon-${mediaType.toLowerCase()}-bold` : '';
       },
       label() {
diff --git a/packages/portal/src/components/item/ItemMediaThumbnails.vue b/packages/portal/src/components/item/ItemMediaThumbnails.vue
index 38198f94d7..0b4304e5bb 100644
--- a/packages/portal/src/components/item/ItemMediaThumbnails.vue
+++ b/packages/portal/src/components/item/ItemMediaThumbnails.vue
@@ -35,7 +35,7 @@
             :offset="firstRenderedResourceIndex + index"
             class="d-flex-inline mr-3 mr-lg-auto"
             :class="{ 'selected': index === selectedIndex }"
-            :resource="resource"
+            :resource="resource.edm"
             :edm-type="edmType"
             :lazy="true"
           />
diff --git a/packages/portal/src/components/media/MediaCardImage.vue b/packages/portal/src/components/media/MediaCardImage.vue
index 1e1ae26216..4566aa459e 100644
--- a/packages/portal/src/components/media/MediaCardImage.vue
+++ b/packages/portal/src/components/media/MediaCardImage.vue
@@ -55,6 +55,10 @@
 
 <script>
   import WebResource from '@/plugins/europeana/edm/WebResource.js';
+  import {
+    LARGE_WIDTH as LARGE_THUMBNAIL_WIDTH,
+    SMALL_WIDTH as SMALL_THUMBNAIL_WIDTH
+  } from '@/plugins/europeana/thumbnail.js';
 
   export default {
     name: 'MediaCardImage',
@@ -107,7 +111,16 @@
         return this.$apis.record.mediaProxyUrl(this.media.about, this.europeanaIdentifier, { disposition: 'inline' });
       },
       thumbnails() {
-        return this.media.thumbnails(this.$nuxt.context);
+        if (this.media.svcsHasService) {
+          // TODO: assess impact of this outside of new ItemMediaPresentation component
+          const serviceId = this.media.svcsHasService.id || this.media.svcsHasService.about || this.media.svcsHasService;
+          return {
+            large: `${serviceId}/full/${LARGE_THUMBNAIL_WIDTH},/0/default.jpg`,
+            small: `${serviceId}/full/${SMALL_THUMBNAIL_WIDTH},/0/default.jpg`
+          };
+        } else {
+          return this.$apis.thumbnail.forWebResource(this.media);
+        }
       },
       thumbnailSrc() {
         return this.thumbnails[this.thumbnailSize];
@@ -116,7 +129,7 @@
         if (!this.media.ebucoreWidth) {
           return null;
         }
-        const thumbnailMaxSize = this.thumbnailSize === 'large' ? 400 : 200;
+        const thumbnailMaxSize = this.thumbnailSize === 'large' ? LARGE_THUMBNAIL_WIDTH : SMALL_THUMBNAIL_WIDTH;
         if (this.media.ebucoreWidth < thumbnailMaxSize) {
           return this.media.ebucoreWidth;
         }
diff --git a/packages/portal/src/components/media/MediaImageViewer.vue b/packages/portal/src/components/media/MediaImageViewer.vue
index e24bbdeb09..2c9645a473 100644
--- a/packages/portal/src/components/media/MediaImageViewer.vue
+++ b/packages/portal/src/components/media/MediaImageViewer.vue
@@ -64,6 +64,7 @@
     },
 
     props: {
+      // FIXME: this isn't used; rm
       format: {
         type: String,
         default: null
@@ -80,10 +81,6 @@
         type: EuropeanaMediaService,
         default: null
       },
-      thumbnail: {
-        type: String,
-        default: null
-      },
       url: {
         type: String,
         required: true
@@ -170,9 +167,10 @@
     },
 
     methods: {
+      // FIXME: restore functionality; move up to IMP component?
       handleKeyboardToggleKeydown(event) {
         if (['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', '-', '+'].includes(event.key)) {
-          this.fullImageRendered || this.renderFullImage();
+          this.fullImageRendered || null; // this.renderFullImage();
         }
       },
 
@@ -236,11 +234,7 @@
         }
       },
 
-      async highlightAnnotation() {
-        if (!this.fullImageRendered) {
-          await this.renderFullImage();
-        }
-
+      highlightAnnotation() {
         this.initOlAnnotationLayer();
 
         const layer = this.olMap.getLayers().item(1);
@@ -304,47 +298,6 @@
         this.configureZoomLevels();
       },
 
-      async renderThumbnail() {
-        if (!this.thumbnail) {
-          this.renderFullImage();
-          return;
-        }
-
-        let mapOptions;
-
-        const thumbWidth = 400;
-        const thumbHeight = (this.height / this.width) * thumbWidth;
-
-        mapOptions = await this.initOlImageLayerStatic(this.thumbnail, thumbWidth, thumbHeight);
-
-        this.initOlMap(mapOptions);
-        this.olMap.getInteractions().forEach((interaction) => interaction.setActive(false));
-
-        this.olMap.on('click', this.renderFullImage);
-        this.olMap.getView().on('change:resolution', this.renderFullImageOnFirstZoomIn);
-        this.fullImageRendered = false;
-      },
-
-      renderFullImageOnFirstZoomIn(event) {
-        // check if zoom in, not out
-        if (event.oldValue < 1) {
-          this.renderFullImage();
-        }
-      },
-
-      async renderFullImage() {
-        if (this.olMap) {
-          this.olMap.un('click', this.renderFullImage);
-          this.olMap.getView().un('change:resolution', this.renderFullImageOnFirstZoomIn);
-          this.olMap.getInteractions().forEach((interaction) => interaction.setActive(true));
-        }
-
-        // TODO: should we always be using the media proxy for static images?
-        const url = this.$apis.record.mediaProxyUrl(this.url, this.itemId, { disposition: 'inline' });
-        const mapOptions = await this.initOlImageLayerStatic(url, this.width, this.height);
-        this.initMapWithFullImage(mapOptions);
-      },
-
       // IIIF Image API
       // https://openlayers.org/en/latest/examples/iiif.html
       initOlImageLayerIIIF() {
@@ -392,17 +345,14 @@
 
         if (this.source === 'IIIF') {
           const mapOptions = this.initOlImageLayerIIIF();
-          this.initMapWithFullImage(mapOptions);
-        } else if (this.activeAnnotation) {
-          this.renderFullImage();
+          this.initOlMap(mapOptions);
         } else {
-          this.renderThumbnail();
+          // TODO: should we always be using the media proxy for static images?
+          const url = this.$apis.record.mediaProxyUrl(this.url, this.itemId, { disposition: 'inline' });
+          const mapOptions = await this.initOlImageLayerStatic(url, this.width, this.height);
+          this.initOlMap(mapOptions);
         }
-      },
 
-      initMapWithFullImage(mapOptions) {
-        this.initOlMap(mapOptions);
-        this.fullImageRendered = true;
         this.highlightAnnotation();
       },
 
diff --git a/packages/portal/src/composables/thumbnails.js b/packages/portal/src/composables/thumbnails.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/portal/src/pages/item/_.vue b/packages/portal/src/pages/item/_.vue
index 3bbd385cd6..83e90190b6 100644
--- a/packages/portal/src/pages/item/_.vue
+++ b/packages/portal/src/pages/item/_.vue
@@ -394,7 +394,9 @@
         this.iiifPresentationManifest = item.iiifPresentationManifest;
         this.isShownAt = item.providerAggregation.edmIsShownAt;
 
-        this.ogImage = new WebResource(item.providerAggregation.displayableWebResources[0], this.identifier)?.thumbnails(this.$nuxt.context)?.large;
+        this.ogImage = this.$apis.thumbnail.forWebResource(
+          new WebResource(item.providerAggregation.displayableWebResources[0], this.identifier)
+        ).large;
 
         // don't store the web resources when using iiif as the manifest will be used
         if (!this.iiifPresentationManifest) {
diff --git a/packages/portal/src/plugins/europeana/edm/WebResource.js b/packages/portal/src/plugins/europeana/edm/WebResource.js
index 45fbea66d9..0b6a51200f 100644
--- a/packages/portal/src/plugins/europeana/edm/WebResource.js
+++ b/packages/portal/src/plugins/europeana/edm/WebResource.js
@@ -73,37 +73,13 @@ export default class WebResource extends Base {
   }
 
   get hasTextMediaType() {
-    return this.mediaType?.startsWith(`${MEDIA_TYPE_TEXT}/`) || (this.mediaType === MEDIA_TYPE_APPLICATION_PDF);
+    return this.mediaType?.startsWith(`${MEDIA_TYPE_TEXT}/`) || this.isPDF;
   }
 
   get mediaType() {
     return this.ebucoreHasMimeType;
   }
 
-  // TODO: refactor as a getter, not requiring passing Nuxt context,
-  //       or move out into Nuxt mixin?
-  // TODO: use IIIF Image service if present
-  thumbnails(context) {
-    const uri = this.preview?.about || this.about;
-
-    const smallWidth = 200;
-    const largeWidth = 400;
-
-    if (this.svcsHasService) {
-      // TODO: assess impact of this outside of new ItemMediaPresentation component
-      const serviceId = this.svcsHasService.id || this.svcsHasService.about || this.svcsHasService;
-      return {
-        large: `${serviceId}/full/${largeWidth},/0/default.jpg`,
-        small: `${serviceId}/full/${smallWidth},/0/default.jpg`
-      };
-    } else {
-      return {
-        small: context.$apis.thumbnail.media(uri, { size: smallWidth }),
-        large: context.$apis.thumbnail.media(uri, { size: largeWidth })
-      };
-    }
-  }
-
   get codecName() {
     return this.edmCodecName;
   }
@@ -142,6 +118,10 @@ export default class WebResource extends Base {
     return oEmbeddable(this.id);
   }
 
+  get isPDF() {
+    return this.mediaType === MEDIA_TYPE_APPLICATION_PDF;
+  }
+
   get isPlayableMedia() {
     return (
       this.isHTMLAudio || this.isHTMLVideo ||
diff --git a/packages/portal/src/plugins/europeana/thumbnail.js b/packages/portal/src/plugins/europeana/thumbnail.js
index 53f64ff476..d5fe11d8ad 100644
--- a/packages/portal/src/plugins/europeana/thumbnail.js
+++ b/packages/portal/src/plugins/europeana/thumbnail.js
@@ -2,6 +2,9 @@ import md5 from 'md5';
 
 import EuropeanaApi from './apis/base.js';
 
+export const LARGE_WIDTH = 400;
+export const SMALL_WIDTH = 200;
+
 export default class EuropeanaThumbnailApi extends EuropeanaApi {
   static ID = 'thumbnail';
   static BASE_URL = 'https://api.europeana.eu/thumbnail/v3';
@@ -15,7 +18,7 @@ export default class EuropeanaThumbnailApi extends EuropeanaApi {
 
   media(uri, { hash, size } = {}) {
     if (!size) {
-      size = 200;
+      size = SMALL_WIDTH;
     }
 
     if (!hash && uri) {
@@ -54,4 +57,12 @@ export default class EuropeanaThumbnailApi extends EuropeanaApi {
 
     return (edmPreviewUrl.pathname.includes('/v3/') ? v3() : v2());
   }
+
+  forWebResource(webResource) {
+    const uri = webResource.preview?.about || webResource.about;
+    return {
+      small: this.media(uri, { size: SMALL_WIDTH }),
+      large: this.media(uri, { size: LARGE_WIDTH })
+    };
+  }
 }