From 0697693934c700f50bcc45ad58ab0b8f0370561c Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Sun, 2 Feb 2020 05:01:17 +0100 Subject: viewer: adaptation to the thumbnail's new structure --- viewer/src/components/LdPicture.vue | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) (limited to 'viewer/src/components/LdPicture.vue') 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" /> - + @@ -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() { -- cgit v1.2.3