Add 360 photos description

public/generated_albums_config.json

@@ -1 +1 @@
-[{"name":"Album 1 name","description":"Album 2 description","protected":false,"coverFileName":"IMG_20200811_060850.jpg","photoDescription":{"IMG_20200811_060850.jpg":"Description 1","IMG_20200811_074445.jpg":"Description 2"},"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":["360-Video-Featured-StudioBinder-Compressed.jpg","photo.jpg"]}]
+[{"name":"Album 1 name","description":"Album 2 description","protected":false,"coverFileName":"IMG_20200811_060850.jpg","photoDescription":{"IMG_20200811_060850.jpg":"Description 1","IMG_20200811_074445.jpg":"Description 2","photo.jpg":"Description 360"},"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":["360-Video-Featured-StudioBinder-Compressed.jpg","photo.jpg"]}]

public/pictures/albums/album_1/album.yml

@@ -1,5 +1,5 @@
-name: Album 1 name
+name: 'Album 1 name'
-description: Album 2 description
+description: 'Album 2 description'
 protected: false
 
 coverFileName: 'IMG_20200811_060850.jpg'
@@ -7,3 +7,4 @@ coverFileName: 'IMG_20200811_060850.jpg'
 photoDescription:
   IMG_20200811_060850.jpg: 'Description 1'
   IMG_20200811_074445.jpg: 'Description 2'
+  photo.jpg: 'Description 360'

scripts/collect-static-data.ts

@@ -69,7 +69,7 @@ function processAlbum(folderName: string) {
 
       if (parsedData['photoDescription']) {
         Object.keys(parsedData['photoDescription']).forEach(item => {
-          if (!photos.includes(item)) {
+          if (!photos.includes(item) && !photos360.includes(item)) {
             console.warn(yellow(`Warning: Description for ${albumPath}/photos/${item} , but it doesn't exist!`));
           }
         });

src/views/Album.vue

@@ -28,6 +28,7 @@
       <div class="pano-button pano-prev" @click="prev360">‹</div>
       <div class="pano-button pano-next" @click="next360">›</div>
       <div class="pano-button pano-close" @click="index360 = null">×</div>
+      <div class="pano-description">{{ panoDescription }}</div>
     </div>
   </div>
 </template>
@@ -146,6 +147,14 @@ export default class AlbumPage extends Vue {
     return `/pictures/albums/${this.album!.folderName}/360_photos/${filename}`;
   }
 
+  get panoDescription() {
+    if (this.index360 === null)
+      return '';
+
+    const filename = this.album!.files_360[this.index360];
+    return this.album!.photoDescription[filename] || '';
+  }
+
   next360() {
     const newIndex = this.index360! + 1;
 
@@ -196,11 +205,22 @@ export default class AlbumPage extends Vue {
   height: 85%;
 }
 
+.pano-description {
+  position: fixed;
+
+  margin-top: 0.5em;
+
+  width: 100%;
+  text-align: center;
+  color: white;
+}
+
 .pano-button {
   position: fixed;
 
   padding: 1em;
   color: white;
+  cursor: pointer;
 }
 
 .pano-prev {