diff options
Diffstat (limited to 'viewer/src')
-rw-r--r-- | viewer/src/@types/gallery.d.ts | 5 | ||||
-rw-r--r-- | viewer/src/components/LdPicture.vue | 12 | ||||
-rw-r--r-- | viewer/src/components/LdThumbnail.vue | 7 | ||||
-rw-r--r-- | viewer/src/store/galleryStore.ts | 18 | ||||
-rw-r--r-- | viewer/src/views/MainLayout.vue | 3 |
5 files changed, 33 insertions, 12 deletions
diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts index 1987416..865f621 100644 --- a/viewer/src/@types/gallery.d.ts +++ b/viewer/src/@types/gallery.d.ts | |||
@@ -18,6 +18,11 @@ | |||
18 | */ | 18 | */ |
19 | 19 | ||
20 | declare namespace Gallery { | 20 | declare namespace Gallery { |
21 | interface Config { | ||
22 | generationTimestamp: number, | ||
23 | galleryRoot: string, | ||
24 | } | ||
25 | |||
21 | interface Other extends Item { | 26 | interface Other extends Item { |
22 | properties: OtherProperties, | 27 | properties: OtherProperties, |
23 | } | 28 | } |
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue index 8a9a08e..a5faeb3 100644 --- a/viewer/src/components/LdPicture.vue +++ b/viewer/src/components/LdPicture.vue | |||
@@ -28,7 +28,7 @@ | |||
28 | @dragscrollend="dragScrollClickFix.onDragScrollEnd()" | 28 | @dragscrollend="dragScrollClickFix.onDragScrollEnd()" |
29 | > | 29 | > |
30 | <v-lazy-image | 30 | <v-lazy-image |
31 | :src="pictureSrc()" | 31 | :src="pictureSrc(picture.properties.resource)" |
32 | :class="{'slow-loading': Boolean(slowLoadingStyle)}" | 32 | :class="{'slow-loading': Boolean(slowLoadingStyle)}" |
33 | :style="slowLoadingStyle" | 33 | :style="slowLoadingStyle" |
34 | @load="clearSlowLoading" | 34 | @load="clearSlowLoading" |
@@ -67,15 +67,17 @@ export default class LdPicture extends Vue { | |||
67 | this.loader = false; | 67 | this.loader = false; |
68 | } | 68 | } |
69 | 69 | ||
70 | pictureSrc() { | 70 | pictureSrc(resource: string) { |
71 | return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`; | 71 | return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`; |
72 | } | 72 | } |
73 | 73 | ||
74 | generateSlowLoadingStyle() { | 74 | generateSlowLoadingStyle() { |
75 | this.clearSlowLoading(); | 75 | this.clearSlowLoading(); |
76 | this.loader = true; | 76 | this.loader = true; |
77 | if (this.picture.thumbnail) | 77 | if (this.picture.thumbnail) { |
78 | this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`; | 78 | const url = this.pictureSrc(this.picture.thumbnail.resource); |
79 | this.slowLoadingStyle = `background-image: url('${url}');`; | ||
80 | } | ||
79 | } | 81 | } |
80 | } | 82 | } |
81 | </script> | 83 | </script> |
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue index 17c7659..13468e1 100644 --- a/viewer/src/components/LdThumbnail.vue +++ b/viewer/src/components/LdThumbnail.vue | |||
@@ -21,7 +21,7 @@ | |||
21 | <div :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 | :src="pictureSrc()" | 24 | :src="pictureSrc(item.thumbnail.resource)" |
25 | :style="pictureStyle()" | 25 | :style="pictureStyle()" |
26 | :title="item.title" | 26 | :title="item.title" |
27 | @intersect="loading=true" | 27 | @intersect="loading=true" |
@@ -44,9 +44,8 @@ export default class LdThumbnail extends Vue { | |||
44 | 44 | ||
45 | loading: boolean = false; | 45 | loading: boolean = false; |
46 | 46 | ||
47 | pictureSrc() { | 47 | pictureSrc(resource: string) { |
48 | const resource = this.item.thumbnail!.resource; | 48 | return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`; |
49 | return `${process.env.VUE_APP_DATA_URL}${resource}`; | ||
50 | } | 49 | } |
51 | 50 | ||
52 | pictureStyle() { | 51 | pictureStyle() { |
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts index 1c95fe7..bcd4bc9 100644 --- a/viewer/src/store/galleryStore.ts +++ b/viewer/src/store/galleryStore.ts | |||
@@ -27,12 +27,17 @@ const VuexModule = createModule({ | |||
27 | 27 | ||
28 | export default class GalleryStore extends VuexModule { | 28 | export default class GalleryStore extends VuexModule { |
29 | 29 | ||
30 | config: Gallery.Config | null = null; | ||
30 | galleryItemsRoot: Gallery.Item | null = null; | 31 | galleryItemsRoot: Gallery.Item | null = null; |
31 | tags: Tag.Index = {}; | 32 | tags: Tag.Index = {}; |
32 | currentPath: string = "/"; | 33 | currentPath: string = "/"; |
33 | 34 | ||
34 | // --- | 35 | // --- |
35 | 36 | ||
37 | @mutation setConfig(config: Gallery.Config) { | ||
38 | this.config = config; | ||
39 | } | ||
40 | |||
36 | @mutation setGalleryItemsRoot(galleryItemsRoot: Gallery.Item) { | 41 | @mutation setGalleryItemsRoot(galleryItemsRoot: Gallery.Item) { |
37 | this.galleryItemsRoot = galleryItemsRoot; | 42 | this.galleryItemsRoot = galleryItemsRoot; |
38 | } | 43 | } |
@@ -59,9 +64,18 @@ export default class GalleryStore extends VuexModule { | |||
59 | 64 | ||
60 | // --- | 65 | // --- |
61 | 66 | ||
67 | // Fetches the gallery's JSON config | ||
68 | @action async fetchConfig() { | ||
69 | return fetch(`${process.env.VUE_APP_DATA_URL}config.json`) | ||
70 | .then(config => config.json()) | ||
71 | .then(this.setConfig); | ||
72 | } | ||
73 | |||
62 | // Fetches the gallery's JSON metadata | 74 | // Fetches the gallery's JSON metadata |
63 | @action async fetchGalleryItems(url: string) { | 75 | @action async fetchGalleryItems() { |
64 | return fetch(url) | 76 | const root = this.config?.galleryRoot ?? ''; |
77 | const timestamp = this.config?.generationTimestamp ?? 0; | ||
78 | return fetch(`${process.env.VUE_APP_DATA_URL}${root}index.json?${timestamp}`) | ||
65 | .then(response => response.json()) | 79 | .then(response => response.json()) |
66 | .then(this.setGalleryItemsRoot) | 80 | .then(this.setGalleryItemsRoot) |
67 | .then(this.indexTags); | 81 | .then(this.indexTags); |
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue index 12388a9..63a1b83 100644 --- a/viewer/src/views/MainLayout.vue +++ b/viewer/src/views/MainLayout.vue | |||
@@ -60,7 +60,8 @@ export default class MainLayout extends Vue { | |||
60 | fetchGalleryItems() { | 60 | fetchGalleryItems() { |
61 | this.isLoading = true; | 61 | this.isLoading = true; |
62 | this.$galleryStore | 62 | this.$galleryStore |
63 | .fetchGalleryItems(`${process.env.VUE_APP_DATA_URL}index.json`) | 63 | .fetchConfig() |
64 | .then(this.$galleryStore.fetchGalleryItems) | ||
64 | .finally(() => (this.isLoading = false)) | 65 | .finally(() => (this.isLoading = false)) |
65 | .catch(this.displayError); | 66 | .catch(this.displayError); |
66 | } | 67 | } |