viewer: implemented config.json

Note: The DevServer needs to know when the file is from the App, or from the FileSystem.
We use a tilde to make this separation. The tilde URL is declared in '.env.development'
GitHub: Resolves #32

8 files changed, 40 insertions, 16 deletions

diff --git a/viewer/.env b/viewer/.env
index 959477b..0914292 100644
--- a/viewer/.env
+++ b/viewer/.env
@@ -1,5 +1,5 @@
+# Override with .env.development.local and .env.production.local
+
 VUE_APP_I18N_LOCALE=en
 VUE_APP_I18N_FALLBACK_LOCALE=en
-VUE_APP_EXAMPLE_PROJECT=../example/out/
-VUE_APP_DATA_URL=gallery/
-VUE_APP_DEVSERVER_PORT=8085
+VUE_APP_DATA_URL=./
diff --git a/viewer/.env.development b/viewer/.env.development
new file mode 100644
index 0000000..0d87cf4
--- /dev/null
+++ b/viewer/.env.development
@@ -0,0 +1,3 @@
+VUE_APP_DEVSERVER_PORT=8085
+VUE_APP_DEVSERVER_CONFIG_PATH=../example/
+VUE_APP_DATA_URL=~/
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 @@
 */
 
 declare namespace Gallery {
+    interface Config {
+        generationTimestamp: number,
+        galleryRoot: string,
+    }
+
     interface Other extends Item {
         properties: OtherProperties,
     }
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 @@
     @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
   >
     <v-lazy-image
-      :src="pictureSrc()"
+      :src="pictureSrc(picture.properties.resource)"
       :class="{'slow-loading': Boolean(slowLoadingStyle)}"
       :style="slowLoadingStyle"
       @load="clearSlowLoading"
@@ -67,15 +67,17 @@ export default class LdPicture extends Vue {
     this.loader = false;
   }
 
-  pictureSrc() {
-    return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`;
+  pictureSrc(resource: string) {
+    return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`;
   }
 
   generateSlowLoadingStyle() {
     this.clearSlowLoading();
     this.loader = true;
-    if (this.picture.thumbnail)
-      this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`;
+    if (this.picture.thumbnail) {
+      const url = this.pictureSrc(this.picture.thumbnail.resource);
+      this.slowLoadingStyle = `background-image: url('${url}');`;
+    }
   }
 }
 </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 @@
   <div :class="{'preload': loading}">
     <v-lazy-image
       v-if="item.thumbnail"
-      :src="pictureSrc()"
+      :src="pictureSrc(item.thumbnail.resource)"
       :style="pictureStyle()"
       :title="item.title"
       @intersect="loading=true"
@@ -44,9 +44,8 @@ export default class LdThumbnail extends Vue {
 
   loading: boolean = false;
 
-  pictureSrc() {
-    const resource = this.item.thumbnail!.resource;
-    return `${process.env.VUE_APP_DATA_URL}${resource}`;
+  pictureSrc(resource: string) {
+    return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`;
   }
 
   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({
 
 export default class GalleryStore extends VuexModule {
 
+    config: Gallery.Config | null = null;
     galleryItemsRoot: Gallery.Item | null = null;
     tags: Tag.Index = {};
     currentPath: string = "/";
 
     // ---
 
+    @mutation setConfig(config: Gallery.Config) {
+        this.config = config;
+    }
+
     @mutation setGalleryItemsRoot(galleryItemsRoot: Gallery.Item) {
         this.galleryItemsRoot = galleryItemsRoot;
     }
@@ -59,9 +64,18 @@ export default class GalleryStore extends VuexModule {
 
     // ---
 
+    // Fetches the gallery's JSON config
+    @action async fetchConfig() {
+        return fetch(`${process.env.VUE_APP_DATA_URL}config.json`)
+            .then(config => config.json())
+            .then(this.setConfig);
+    }
+
     // Fetches the gallery's JSON metadata
-    @action async fetchGalleryItems(url: string) {
-        return fetch(url)
+    @action async fetchGalleryItems() {
+        const root = this.config?.galleryRoot ?? '';
+        const timestamp = this.config?.generationTimestamp ?? 0;
+        return fetch(`${process.env.VUE_APP_DATA_URL}${root}index.json?${timestamp}`)
             .then(response => response.json())
             .then(this.setGalleryItemsRoot)
             .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 {
   fetchGalleryItems() {
     this.isLoading = true;
     this.$galleryStore
-      .fetchGalleryItems(`${process.env.VUE_APP_DATA_URL}index.json`)
+      .fetchConfig()
+      .then(this.$galleryStore.fetchGalleryItems)
       .finally(() => (this.isLoading = false))
       .catch(this.displayError);
   }
diff --git a/viewer/vue.config.js b/viewer/vue.config.js
index 9d885bd..9b92dc2 100644
--- a/viewer/vue.config.js
+++ b/viewer/vue.config.js
@@ -43,7 +43,7 @@ module.exports = {
         const url = req.url.slice(process.env.VUE_APP_DATA_URL.length);
         const paramIdx = url.indexOf('?');
         const filepath = paramIdx < 0 ? url : url.substring(0, paramIdx);
-        const fullpath = `${process.env.VUE_APP_EXAMPLE_PROJECT}${decodeURIComponent(filepath)}`;
+        const fullpath = `${process.env.VUE_APP_DEVSERVER_CONFIG_PATH}${decodeURIComponent(filepath)}`;
         const file = fs.readFileSync(fullpath);
         res.end(file);
       });