aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdThumbnail.vue
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components/LdThumbnail.vue')
-rw-r--r--viewer/src/components/LdThumbnail.vue24
1 files changed, 10 insertions, 14 deletions
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index d9343dd..d5c0b3c 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -18,12 +18,12 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div class="forcedsize" :class="{'preload': loading}"> 21 <div :class="{'preload': loading}">
22 <v-lazy-image 22 <v-lazy-image
23 v-if="item.thumbnail" 23 v-if="item.thumbnail"
24 class="thumbnail"
25 :src="pictureSrc()" 24 :src="pictureSrc()"
26 :title="item.path" 25 :style="pictureStyle()"
26 :title="item.title"
27 @intersect="loading=true" 27 @intersect="loading=true"
28 @load="loading=false" 28 @load="loading=false"
29 /> 29 />
@@ -45,7 +45,13 @@ export default class LdThumbnail extends Vue {
45 loading: boolean = false; 45 loading: boolean = false;
46 46
47 pictureSrc() { 47 pictureSrc() {
48 if (this.item.thumbnail) return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail.resource}`; 48 const resource = this.item.thumbnail!.resource;
49 return `${process.env.VUE_APP_DATA_URL}${resource}`;
50 }
51
52 pictureStyle() {
53 const resolution = this.item.thumbnail!.resolution;
54 return { width: `${resolution.width}px`, height: `${resolution.height}px` };
49 } 55 }
50 56
51 getIcon() { 57 getIcon() {
@@ -57,10 +63,6 @@ export default class LdThumbnail extends Vue {
57<style lang="scss"> 63<style lang="scss">
58@import "@/assets/scss/theme.scss"; 64@import "@/assets/scss/theme.scss";
59 65
60.thumbnail {
61 max-width: 250px;
62 max-height: 250px;
63}
64.preload { 66.preload {
65 animation: preloadAnimation 1s infinite ease-in-out alternate; 67 animation: preloadAnimation 1s infinite ease-in-out alternate;
66} 68}
@@ -72,10 +74,4 @@ export default class LdThumbnail extends Vue {
72 background-color: $loader-color; 74 background-color: $loader-color;
73 } 75 }
74} 76}
75// Temporary size until we get the true thumbnail size
76.forcedsize {
77 width: 250px;
78 height: 250px;
79 text-align: center;
80}
81</style> 77</style>