Merge pull request #74 from pacien/feature-thumbnail-resolution-index

Add thumbnail size to index

4 files changed, 30 insertions, 22 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/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 5de5946..1a5761e 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -97,6 +97,7 @@ img {
 // === Effect to apply on lazy-image loading
 
 img {
+  display: block;
   &.v-lazy-image {
     opacity: 0;
     transition: opacity 0.4s;
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..d5c0b3c 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -18,12 +18,12 @@
 -->
 
 <template>
-  <div class="forcedsize" :class="{'preload': loading}">
+  <div :class="{'preload': loading}">
     <v-lazy-image
       v-if="item.thumbnail"
-      class="thumbnail"
       :src="pictureSrc()"
-      :title="item.path"
+      :style="pictureStyle()"
+      :title="item.title"
       @intersect="loading=true"
       @load="loading=false"
     />
@@ -45,7 +45,13 @@ export default class LdThumbnail extends Vue {
   loading: boolean = false;
 
   pictureSrc() {
-    return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
+    const resource = this.item.thumbnail!.resource;
+    return `${process.env.VUE_APP_DATA_URL}${resource}`;
+  }
+
+  pictureStyle() {
+    const resolution = this.item.thumbnail!.resolution;
+    return { width: `${resolution.width}px`, height: `${resolution.height}px` };
   }
 
   getIcon() {
@@ -57,10 +63,6 @@ export default class LdThumbnail extends Vue {
 <style lang="scss">
 @import "@/assets/scss/theme.scss";
 
-.thumbnail {
-  max-width: 250px;
-  max-height: 250px;
-}
 .preload {
   animation: preloadAnimation 1s infinite ease-in-out alternate;
 }
@@ -72,10 +74,4 @@ export default class LdThumbnail extends Vue {
     background-color: $loader-color;
   }
 }
-// Temporary size until we get the true thumbnail size
-.forcedsize {
-  width: 250px;
-  height: 250px;
-  text-align: center;
-}
 </style>