aboutsummaryrefslogtreecommitdiff
path: root/viewer/src
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src')
-rw-r--r--viewer/src/assets/scss/global.scss14
-rw-r--r--viewer/src/components/LdPicture.vue49
2 files changed, 55 insertions, 8 deletions
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index b418911..5de5946 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -96,10 +96,12 @@ img {
96 96
97// === Effect to apply on lazy-image loading 97// === Effect to apply on lazy-image loading
98 98
99.v-lazy-image { 99img {
100 opacity: 0; 100 &.v-lazy-image {
101 transition: opacity 0.4s; 101 opacity: 0;
102} 102 transition: opacity 0.4s;
103.v-lazy-image-loaded { 103 }
104 opacity: 1; 104 &.v-lazy-image-loaded {
105 opacity: 1;
106 }
105} 107}
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index b6a719f..5425a00 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -25,7 +25,13 @@
25 @click="onClick" 25 @click="onClick"
26 @dragscrollstart="dragging=true" 26 @dragscrollstart="dragging=true"
27 > 27 >
28 <v-lazy-image :src="pictureSrc" /> 28 <v-lazy-image
29 :src="pictureSrc()"
30 :class="{'slow-loading': Boolean(slowLoadingStyle)}"
31 :style="slowLoadingStyle"
32 @load="clearTimer"
33 />
34 <b-loading :active="Boolean(slowLoadingStyle)" :is-full-page="false" class="ld-picture-loader" />
29 </div> 35 </div>
30</template> 36</template>
31 37
@@ -36,12 +42,35 @@ import { Component, Vue, Prop } from "vue-property-decorator";
36export default class LdPicture extends Vue { 42export default class LdPicture extends Vue {
37 @Prop({ required: true }) readonly picture!: Gallery.Picture; 43 @Prop({ required: true }) readonly picture!: Gallery.Picture;
38 44
45 readonly SLOW_LOADING_TIMEOUT_MS: number = 1500;
46
39 dragging: boolean = false; 47 dragging: boolean = false;
48 slowLoadingStyle: string | null = null;
49 timer: NodeJS.Timeout | null = null;
50
51 mounted() {
52 if (this.picture.thumbnail) this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
53 }
54
55 destroyed() {
56 this.clearTimer();
57 }
58
59 clearTimer() {
60 if (this.timer) clearTimeout(this.timer);
61 this.timer = null;
62 this.slowLoadingStyle = null;
63 }
40 64
41 get pictureSrc() { 65 pictureSrc() {
42 return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`; 66 return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`;
43 } 67 }
44 68
69 generateSlowLoadingStyle() {
70 this.clearTimer();
71 this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail}');`;
72 }
73
45 onClick() { 74 onClick() {
46 if (!this.dragging) this.$uiStore.toggleFullscreen(); 75 if (!this.dragging) this.$uiStore.toggleFullscreen();
47 this.dragging = false; 76 this.dragging = false;
@@ -50,6 +79,22 @@ export default class LdPicture extends Vue {
50</script> 79</script>
51 80
52<style lang="scss"> 81<style lang="scss">
82@import "@/assets/scss/theme.scss";
83
84.ld-picture-loader {
85 position: relative;
86 & .loading-background {
87 background: none !important;
88 }
89}
90img.slow-loading {
91 background-repeat: no-repeat;
92 background-position: center;
93 background-size: contain;
94 background-color: $content-bgcolor;
95 background-blend-mode: soft-light;
96 opacity: 1 !important;
97}
53.fit-to-screen { 98.fit-to-screen {
54 display: flex; 99 display: flex;
55 justify-content: space-around; 100 justify-content: space-around;