aboutsummaryrefslogtreecommitdiff
path: root/viewer/src
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src')
-rw-r--r--viewer/src/@types/gallery.d.ts9
-rw-r--r--viewer/src/assets/scss/global.scss1
-rw-r--r--viewer/src/components/LdPicture.vue18
-rw-r--r--viewer/src/components/LdThumbnail.vue24
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 {
33 description: string, 33 description: string,
34 tags: RawTag[], 34 tags: RawTag[],
35 path: string, 35 path: string,
36 thumbnail?: string, 36 thumbnail?: Thumbnail
37 properties: OtherProperties | PictureProperties | DirectoryProperties, 37 properties: OtherProperties | PictureProperties | DirectoryProperties,
38 } 38 }
39 interface OtherProperties { 39 interface OtherProperties {
@@ -47,6 +47,13 @@ declare namespace Gallery {
47 type: "directory", 47 type: "directory",
48 items: Item[] 48 items: Item[]
49 } 49 }
50 interface Thumbnail {
51 resource: string,
52 resolution: {
53 width: number,
54 height: number,
55 }
56 }
50 type RawTag = string; 57 type RawTag = string;
51 type ItemType = "other" | "picture" | "directory"; 58 type ItemType = "other" | "picture" | "directory";
52} \ No newline at end of file 59} \ 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 {
97// === Effect to apply on lazy-image loading 97// === Effect to apply on lazy-image loading
98 98
99img { 99img {
100 display: block;
100 &.v-lazy-image { 101 &.v-lazy-image {
101 opacity: 0; 102 opacity: 0;
102 transition: opacity 0.4s; 103 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 @@
29 :src="pictureSrc()" 29 :src="pictureSrc()"
30 :class="{'slow-loading': Boolean(slowLoadingStyle)}" 30 :class="{'slow-loading': Boolean(slowLoadingStyle)}"
31 :style="slowLoadingStyle" 31 :style="slowLoadingStyle"
32 @load="clearTimer" 32 @load="clearSlowLoading"
33 /> 33 />
34 <b-loading :active="Boolean(slowLoadingStyle)" :is-full-page="false" class="ld-picture-loader" /> 34 <b-loading :active="loader" :is-full-page="false" class="ld-picture-loader" />
35 </div> 35 </div>
36</template> 36</template>
37 37
@@ -46,20 +46,22 @@ export default class LdPicture extends Vue {
46 46
47 dragging: boolean = false; 47 dragging: boolean = false;
48 slowLoadingStyle: string | null = null; 48 slowLoadingStyle: string | null = null;
49 loader: boolean = false;
49 timer: NodeJS.Timeout | null = null; 50 timer: NodeJS.Timeout | null = null;
50 51
51 mounted() { 52 mounted() {
52 if (this.picture.thumbnail) this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS); 53 this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
53 } 54 }
54 55
55 destroyed() { 56 destroyed() {
56 this.clearTimer(); 57 this.clearSlowLoading();
57 } 58 }
58 59
59 clearTimer() { 60 clearSlowLoading() {
60 if (this.timer) clearTimeout(this.timer); 61 if (this.timer) clearTimeout(this.timer);
61 this.timer = null; 62 this.timer = null;
62 this.slowLoadingStyle = null; 63 this.slowLoadingStyle = null;
64 this.loader = false;
63 } 65 }
64 66
65 pictureSrc() { 67 pictureSrc() {
@@ -67,8 +69,10 @@ export default class LdPicture extends Vue {
67 } 69 }
68 70
69 generateSlowLoadingStyle() { 71 generateSlowLoadingStyle() {
70 this.clearTimer(); 72 this.clearSlowLoading();
71 this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail}');`; 73 this.loader = true;
74 if (this.picture.thumbnail)
75 this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`;
72 } 76 }
73 77
74 onClick() { 78 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 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div class="forcedsize" :class="{'preload': loading}"> 21 <div :class="{'preload': loading}">
22 <v-lazy-image 22 <v-lazy-image
23 v-if="item.thumbnail" 23 v-if="item.thumbnail"
24 class="thumbnail"
25 :src="pictureSrc()" 24 :src="pictureSrc()"
26 :title="item.path" 25 :style="pictureStyle()"
26 :title="item.title"
27 @intersect="loading=true" 27 @intersect="loading=true"
28 @load="loading=false" 28 @load="loading=false"
29 /> 29 />
@@ -45,7 +45,13 @@ export default class LdThumbnail extends Vue {
45 loading: boolean = false; 45 loading: boolean = false;
46 46
47 pictureSrc() { 47 pictureSrc() {
48 return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`; 48 const resource = this.item.thumbnail!.resource;
49 return `${process.env.VUE_APP_DATA_URL}${resource}`;
50 }
51
52 pictureStyle() {
53 const resolution = this.item.thumbnail!.resolution;
54 return { width: `${resolution.width}px`, height: `${resolution.height}px` };
49 } 55 }
50 56
51 getIcon() { 57 getIcon() {
@@ -57,10 +63,6 @@ export default class LdThumbnail extends Vue {
57<style lang="scss"> 63<style lang="scss">
58@import "@/assets/scss/theme.scss"; 64@import "@/assets/scss/theme.scss";
59 65
60.thumbnail {
61 max-width: 250px;
62 max-height: 250px;
63}
64.preload { 66.preload {
65 animation: preloadAnimation 1s infinite ease-in-out alternate; 67 animation: preloadAnimation 1s infinite ease-in-out alternate;
66} 68}
@@ -72,10 +74,4 @@ export default class LdThumbnail extends Vue {
72 background-color: $loader-color; 74 background-color: $loader-color;
73 } 75 }
74} 76}
75// Temporary size until we get the true thumbnail size
76.forcedsize {
77 width: 250px;
78 height: 250px;
79 text-align: center;
80}
81</style> 77</style>