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/components/LdPicture.vue18
-rw-r--r--viewer/src/components/LdThumbnail.vue2
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 {
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/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..d9343dd 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -45,7 +45,7 @@ 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 if (this.item.thumbnail) return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail.resource}`;
49 } 49 }
50 50
51 getIcon() { 51 getIcon() {