viewer: adaptation to the thumbnail's new structure

3 files changed, 20 insertions, 9 deletions

diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts
index b112b6d..1987416 100644
--- a/viewer/src/@types/gallery.d.ts
+++ b/viewer/src/@types/gallery.d.ts
@@ -33,7 +33,7 @@ declare namespace Gallery {
         description: string,
         tags: RawTag[],
         path: string,
-        thumbnail?: string,
+        thumbnail?: Thumbnail
         properties: OtherProperties | PictureProperties | DirectoryProperties,
     }
     interface OtherProperties {
@@ -47,6 +47,13 @@ declare namespace Gallery {
         type: "directory",
         items: Item[]
     }
+    interface Thumbnail {
+        resource: string,
+        resolution: {
+            width: number,
+            height: number,
+        }
+    }
     type RawTag = string;
     type ItemType = "other" | "picture" | "directory";
 }
\ No newline at end of file
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 5425a00..154c4bd 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -29,9 +29,9 @@
       :src="pictureSrc()"
       :class="{'slow-loading': Boolean(slowLoadingStyle)}"
       :style="slowLoadingStyle"
-      @load="clearTimer"
+      @load="clearSlowLoading"
     />
-    <b-loading :active="Boolean(slowLoadingStyle)" :is-full-page="false" class="ld-picture-loader" />
+    <b-loading :active="loader" :is-full-page="false" class="ld-picture-loader" />
   </div>
 </template>
 
@@ -46,20 +46,22 @@ export default class LdPicture extends Vue {
 
   dragging: boolean = false;
   slowLoadingStyle: string | null = null;
+  loader: boolean = false;
   timer: NodeJS.Timeout | null = null;
 
   mounted() {
-    if (this.picture.thumbnail) this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
+    this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
   }
 
   destroyed() {
-    this.clearTimer();
+    this.clearSlowLoading();
   }
 
-  clearTimer() {
+  clearSlowLoading() {
     if (this.timer) clearTimeout(this.timer);
     this.timer = null;
     this.slowLoadingStyle = null;
+    this.loader = false;
   }
 
   pictureSrc() {
@@ -67,8 +69,10 @@ export default class LdPicture extends Vue {
   }
 
   generateSlowLoadingStyle() {
-    this.clearTimer();
-    this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail}');`;
+    this.clearSlowLoading();
+    this.loader = true;
+    if (this.picture.thumbnail)
+      this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`;
   }
 
   onClick() {
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 44a4c00..d9343dd 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -45,7 +45,7 @@ export default class LdThumbnail extends Vue {
   loading: boolean = false;
 
   pictureSrc() {
-    return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
+    if (this.item.thumbnail) return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail.resource}`;
   }
 
   getIcon() {