aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components
diff options
context:
space:
mode:
authorZero~Informatique2020-01-31 13:22:52 +0100
committerZero~Informatique2020-01-31 13:32:28 +0100
commit2d48a8f15970d7af8092e9450057a05b4d3f9333 (patch)
treedff162c5928b31677fd57da61ecbfa3daa70d422 /viewer/src/components
parent9ea63a39883c63bdc0200e66caed6fa82f83bf7e (diff)
downloadldgallery-2d48a8f15970d7af8092e9450057a05b4d3f9333.tar.gz
viewer: when loading a picture, displays a preview based on the thumbnail on slow connections
This works on Chrome, but FireFox presents some issues: - the picture background is sometimes white instead of transparent, hidding the background - image-orientation doesn't work for background pictures or for negative values
Diffstat (limited to 'viewer/src/components')
-rw-r--r--viewer/src/components/LdPicture.vue49
1 files changed, 47 insertions, 2 deletions
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;