Updated viewer to receive all the image URLs and apply selected size

src/app.d.ts

@@ -25,6 +25,13 @@ declare global {
     interface EntityNamesMap {
       profiles: MaintenanceProfile;
     }
+
+    interface ImageURIs {
+      full: string;
+      large: string;
+      medium: string;
+      small: string;
+    }
   }
 }
 

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';
 }

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);
   }
 
   /**

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
- */