Update albums config

package.json

@@ -4,9 +4,11 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "collect": "ts-node --skip-project ./scripts/collect-static-data.ts"
   },
   "dependencies": {
+    "colors": "^1.4.0",
     "core-js": "^3.6.5",
     "lottie-vuejs": "^0.3.7",
     "vue": "^2.6.11",
@@ -14,9 +16,11 @@
     "vue-gallery": "^2.0.1",
     "vue-property-decorator": "^8.4.2",
     "vue-router": "^3.2.0",
+    "vuejs-vr": "^1.1.0",
     "vuescroll": "^4.16.1",
     "vuex": "^3.5.1",
-    "vuex-smart-module": "^0.4.5"
+    "vuex-smart-module": "^0.4.5",
+    "yaml": "^1.10.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

public/generated_albums_config.json

@@ -0,0 +1 @@
+[{"name":"Album 1 name","description":"Album 2 description","protected":false,"coverFileName":"IMG_20200811_060850.jpg","folderName":"album_1","files":["IMG_20200811_060850.jpg","IMG_20200811_074445.jpg","IMG_20200811_080037.jpg","IMG_20200811_081746.jpg","IMG_20200811_084017.jpg"],"files_360":["photo.jpg"]}]

public/pictures/albums/album_1/album.yml

@@ -0,0 +1,5 @@
+name: Album 1 name
+description: Album 2 description
+protected: false
+
+coverFileName: 'IMG_20200811_060850.jpg'

scripts/collect-static-data.ts

@@ -0,0 +1,80 @@
+import { readdirSync, readFileSync, writeFileSync } from 'fs';
+import { parse } from 'yaml';
+import { yellow, red } from 'colors';
+
+const albumsPath = "./public/pictures/albums";
+
+
+function getDirectories(path: string) {
+  return readdirSync(path, { withFileTypes: true })
+    .filter(item => item.isDirectory()).map(item => item.name);
+}
+
+
+function getFiles(path: string) {
+  return readdirSync(path, { withFileTypes: true })
+    .filter(item => !item.isDirectory()).map(item => item.name);
+}
+
+
+function processAlbum(folderName: string) {
+  let config = {};
+
+  const albumPath = `${albumsPath}/${folderName}`;
+
+  const directories = getDirectories(albumPath);
+  const files = getFiles(albumPath);
+
+  let photos = [];
+
+  if (directories.includes('photos')) {
+    photos = getFiles(`${albumPath}/photos`);
+  } else {
+    console.warn(yellow(`Warning: Folder ${albumPath}/photos does not exist!`));
+  }
+
+  let photos360 = [];
+
+  if (directories.includes('360_photos')) {
+    photos360 = getFiles(`${albumPath}/360_photos`);
+  } else {
+    console.warn(yellow(`Warning: Folder ${albumPath}/360_photos does not exist!`));
+  }
+
+  if (files.includes('album.yml')) {
+    const configData = readFileSync(`${albumPath}/album.yml`, 'utf-8');
+
+    let parsedData: object | null = null;
+
+    try {
+      parsedData = parse(configData);
+    } catch (YAMLSemanticError) {
+      console.error(red(`Error: ${albumsPath}/album.yml parse error!`));
+    }
+
+    if (parsedData !== null) {
+      ['name', 'description', 'protected', 'coverFileName'].forEach(item => {
+        if (parsedData[item] !== undefined) {
+          config[item] = parsedData[item];
+        } else {
+          console.error(red(`Error: File ${albumPath}/album.yml does not contains "${item}" key!`));
+        }
+      })
+    }
+  } else {
+    console.error(red(`Error: File ${albumPath}/album.yml does not exists!`));
+  }
+
+  config['folderName'] = folderName;
+
+  config['files'] = photos;
+
+  config['files_360'] = photos360;
+
+  return config;
+}
+
+
+const albumsConfig = getDirectories(albumsPath).map(item => processAlbum(item));
+
+writeFileSync('./public/generated_albums_config.json', JSON.stringify(albumsConfig));

src/components/Album.vue

@@ -14,7 +14,7 @@
           <transition name="fade" v-for="file in data.files" :key="file.id">
             <div v-show="!showCover && file === data.files[currentPhotoNumber]" 
                 class="w-100 h-100 cover" 
-                :style="{'background-image': `url('pictures/albums/${data.folderName}/${file}')`,}"></div>
+                :style="{'background-image': `url('pictures/albums/${data.folderName}/photos/${file}')`,}"></div>
           </transition>
           <div :style="cacheBlockStyle"></div>
         </div>
@@ -60,14 +60,14 @@ export default class Album extends Vue {
 
   get coverStyle() {
     return {
-      'background-image': `url('pictures/albums/${this.data.folderName}/${this.data.coverFileName}')`,
+      'background-image': `url('pictures/albums/${this.data.folderName}/photos/${this.data.coverFileName}')`,
     };
   }
 
   get cacheBlockStyle() {
-    const chacheImageNumber = (this.currentPhotoNumber + 1) % this.data.files.length;
+    const chacheImageNumber = this.currentPhotoNumber % this.data.files.length;
     return {
-      'background-image': `url('pictures/albums/${this.data.folderName}/${this.data.files[chacheImageNumber]}')`,
+      'background-image': `url('pictures/albums/${this.data.folderName}/photos/${this.data.files[chacheImageNumber]}')`,
     }
   }
 
@@ -92,7 +92,7 @@ export default class Album extends Vue {
 
   changePhoto() {
     if (!this.showCover)
-      this.currentPhotoNumber = (this.currentPhotoNumber + 1) % this.data.files.length;
+      this.currentPhotoNumber = this.currentPhotoNumber % this.data.files.length;
   }
 
   onClick() {

src/components/Photo.vue

@@ -46,7 +46,7 @@ export default class Photo extends Vue {
 
   get photoStyle() {
     return {
-      'background-image': `url('/pictures/albums/${this.album.folderName}/${this.file}')`
+      'background-image': `url('/pictures/albums/${this.album.folderName}/photos/${this.file}')`
     }
   }
 

src/store/albums/actions.ts

@@ -3,6 +3,8 @@ import AlbumsState, { IAlbum } from './state';
 import AlbumsGetters from './getters';
 import AlbumsMutations from './mutations';
 
+import axios from 'axios';
+
 export default class AlbumsActions extends Actions<
   AlbumsState,
   AlbumsGetters,
@@ -10,55 +12,9 @@ export default class AlbumsActions extends Actions<
   AlbumsActions
 > {
   $init() {
-    const albums: IAlbum[] = [
-      {
-        name: 'Test',
-        description: 'Test description',
-        protected: false,
-        coverFileName: 'p (1).jpg',
-  
-        folderName: 'test',
-        files: [
-          'p (1).jpg',
-          'p (2).jpg',
-          'p (3).jpg',
-          'p (4).jpg',
-          'p (5).jpg',
-          'p (6).jpg',
-        ]
-      },
-      {
-        name: 'Test 2',
-        description: 'Test 2 description',
-        protected: false,
-        coverFileName: 'p (1).jpg',
-  
-        folderName: 'test2',
-        files: [
-          'p (1).jpg',
-          'p (2).jpg',
-          'p (3).jpg',
-          'p (4).jpg',
-          'p (5).jpg',
-        ]
-      },
-      {
-        name: 'Test 3',
-        description: 'Test 3 description',
-        protected: false,
-        coverFileName: 'p (1).jpg',
-  
-        folderName: 'test3',
-        files: [
-          'p (1).jpg',
-          'p (2).jpg',
-          'p (3).jpg',
-          'p (4).jpg',
-          'p (5).jpg',
-        ]
-      }
-    ];
-  
-    setTimeout(() => this.commit('updateAlbums', albums), 500);
+    axios.get('generated_albums_config.json')
+      .then(response => {
+        setTimeout(() => this.commit('updateAlbums', response.data), 500);
+      }).catch(error => console.log(error));
   }
 }

src/types/vue-gallery.d.ts

@@ -0,0 +1 @@
+declare module 'vue-gallery';

src/views/Album.vue

@@ -76,12 +76,12 @@ export default class AlbumPage extends Vue {
   get picture(): string {
     if (this.album === null)
       return '';
-    return `/pictures/albums/${this.album.folderName}/${this.album.coverFileName}`;
+    return `/pictures/albums/${this.album.folderName}/photos/${this.album.coverFileName}`;
   }
 
   get images() {
     return this.album!.files
-      .map(item => `/pictures/albums/${this.album!.folderName}/${item}`);
+      .map(item => `/pictures/albums/${this.album!.folderName}/photos/${item}`);
   }
 
   updateFiles() {