aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components')
-rw-r--r--viewer/src/components/LdPicture.vue18
-rw-r--r--viewer/src/components/LdThumbnail.vue2
2 files changed, 12 insertions, 8 deletions
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() {