From 3d1e0d6f06fa139c08765dff9f7482623c9535c4 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Mon, 30 Dec 2024 22:40:58 +0400
Subject: [PATCH] Updated viewer to receive all the image URLs and apply
 selected size

---
 src/app.d.ts                                  |  7 +++
 src/lib/components/FullscreenViewer.js        | 43 ++++++++++++++++++-
 .../components/ImageShowFullscreenButton.js   |  2 +-
 src/lib/components/MediaBoxWrapper.js         |  9 +---
 4 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index 3735081..d28bfe2 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -25,6 +25,13 @@ declare global {
     interface EntityNamesMap {
       profiles: MaintenanceProfile;
     }
+
+    interface ImageURIs {
+      full: string;
+      large: string;
+      medium: string;
+      small: string;
+    }
   }
 }
 
diff --git a/src/lib/components/FullscreenViewer.js b/src/lib/components/FullscreenViewer.js
index 6fa0a29..faa3551 100644
--- a/src/lib/components/FullscreenViewer.js
+++ b/src/lib/components/FullscreenViewer.js
@@ -16,6 +16,7 @@ export class FullscreenViewer extends BaseComponent {
   #startY = null;
   /** @type {boolean|null} */
   #isClosingSwipeStarted = null;
+  #isSizeFetched = false;
 
   /**
    * @protected
@@ -187,6 +188,9 @@ export class FullscreenViewer extends BaseComponent {
    */
   #onSizeResolved(size) {
     this.#sizeSelectorElement.value = size;
+    this.#isSizeFetched = true;
+
+    this.emit('size-loaded');
   }
 
   #watchForSizeSelectionChanges() {
@@ -227,9 +231,42 @@ export class FullscreenViewer extends BaseComponent {
   }
 
   /**
-   * @param {string} url
+   * @param {App.ImageURIs} imageUris
+   * @return {Promise<string|null>}
    */
-  show(url) {
+  async #resolveCurrentSelectedSizeUrl(imageUris) {
+    if (!this.#isSizeFetched) {
+      await new Promise(resolve => this.on('size-loaded', resolve))
+    }
+
+    let targetSize = this.#sizeSelectorElement.value;
+
+    if (!imageUris.hasOwnProperty(targetSize)) {
+      targetSize = FullscreenViewer.#fallbackSize;
+    }
+
+    if (!imageUris.hasOwnProperty(targetSize)) {
+      targetSize = Object.keys(imageUris)[0];
+    }
+
+    if (!targetSize) {
+      return null;
+    }
+
+    return imageUris[targetSize];
+  }
+
+  /**
+   * @param {App.ImageURIs} imageUris
+   */
+  async show(imageUris) {
+    const url = await this.#resolveCurrentSelectedSizeUrl(imageUris);
+
+    if (!url) {
+      console.warn('Failed to resolve media for the viewer!');
+      return;
+    }
+
     this.container.classList.add('loading');
 
     requestAnimationFrame(() => {
@@ -283,4 +320,6 @@ export class FullscreenViewer extends BaseComponent {
     medium: 'Medium',
     small: 'Small'
   }
+
+  static #fallbackSize = 'large';
 }
diff --git a/src/lib/components/ImageShowFullscreenButton.js b/src/lib/components/ImageShowFullscreenButton.js
index f0cd8c7..1970504 100644
--- a/src/lib/components/ImageShowFullscreenButton.js
+++ b/src/lib/components/ImageShowFullscreenButton.js
@@ -47,7 +47,7 @@ export class ImageShowFullscreenButton extends BaseComponent {
   #onButtonClicked() {
     ImageShowFullscreenButton
       .#resolveViewer()
-      .show(this.#mediaBoxTools.mediaBox.imageLinks.large);
+      .show(this.#mediaBoxTools.mediaBox.imageLinks);
   }
 
   /**
diff --git a/src/lib/components/MediaBoxWrapper.js b/src/lib/components/MediaBoxWrapper.js
index cc4c6a2..5fb1a3f 100644
--- a/src/lib/components/MediaBoxWrapper.js
+++ b/src/lib/components/MediaBoxWrapper.js
@@ -56,7 +56,7 @@ export class MediaBoxWrapper extends BaseComponent {
   }
 
   /**
-   * @return {ImageURIs}
+   * @return {App.ImageURIs}
    */
   get imageLinks() {
     return JSON.parse(this.#thumbnailContainer.dataset.uris);
@@ -100,10 +100,3 @@ export function calculateMediaBoxesPositions(mediaBoxesList) {
     }
   })
 }
-
-/**
- * @typedef {Object} ImageURIs
- * @property {string} full
- * @property {string} large
- * @property {string} small
- */