diff options
Diffstat (limited to 'viewer/src')
-rw-r--r-- | viewer/src/@types/gallery.d.ts | 9 | ||||
-rw-r--r-- | viewer/src/components/LdPicture.vue | 18 | ||||
-rw-r--r-- | viewer/src/components/LdThumbnail.vue | 2 |
3 files changed, 20 insertions, 9 deletions
diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts index b112b6d..1987416 100644 --- a/viewer/src/@types/gallery.d.ts +++ b/viewer/src/@types/gallery.d.ts | |||
@@ -33,7 +33,7 @@ declare namespace Gallery { | |||
33 | description: string, | 33 | description: string, |
34 | tags: RawTag[], | 34 | tags: RawTag[], |
35 | path: string, | 35 | path: string, |
36 | thumbnail?: string, | 36 | thumbnail?: Thumbnail |
37 | properties: OtherProperties | PictureProperties | DirectoryProperties, | 37 | properties: OtherProperties | PictureProperties | DirectoryProperties, |
38 | } | 38 | } |
39 | interface OtherProperties { | 39 | interface OtherProperties { |
@@ -47,6 +47,13 @@ declare namespace Gallery { | |||
47 | type: "directory", | 47 | type: "directory", |
48 | items: Item[] | 48 | items: Item[] |
49 | } | 49 | } |
50 | interface Thumbnail { | ||
51 | resource: string, | ||
52 | resolution: { | ||
53 | width: number, | ||
54 | height: number, | ||
55 | } | ||
56 | } | ||
50 | type RawTag = string; | 57 | type RawTag = string; |
51 | type ItemType = "other" | "picture" | "directory"; | 58 | type ItemType = "other" | "picture" | "directory"; |
52 | } \ No newline at end of file | 59 | } \ No newline at end of file |
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() { |