From d8a68504174f2f9fa1e4f7378e9f4eee22d87f92 Mon Sep 17 00:00:00 2001
From: kurbezz <kurbanovbul@gmail.com>
Date: Sat, 3 Oct 2020 20:20:29 +0300
Subject: [PATCH] Add 360 photos description

---
 public/generated_albums_config.json      |  2 +-
 public/pictures/albums/album_1/album.yml |  5 +++--
 scripts/collect-static-data.ts           |  2 +-
 src/views/Album.vue                      | 20 ++++++++++++++++++++
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/public/generated_albums_config.json b/public/generated_albums_config.json
index 87bb101..fd91636 100644
--- a/public/generated_albums_config.json
+++ b/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"]}]
\ No newline at end of file
+[{"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"]}]
\ No newline at end of file
diff --git a/public/pictures/albums/album_1/album.yml b/public/pictures/albums/album_1/album.yml
index 70a0c41..d5de040 100644
--- a/public/pictures/albums/album_1/album.yml
+++ b/public/pictures/albums/album_1/album.yml
@@ -1,5 +1,5 @@
-name: Album 1 name
-description: Album 2 description
+name: 'Album 1 name'
+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'
diff --git a/scripts/collect-static-data.ts b/scripts/collect-static-data.ts
index 437da99..bccd265 100644
--- a/scripts/collect-static-data.ts
+++ b/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!`));
           }
         });
diff --git a/src/views/Album.vue b/src/views/Album.vue
index 57ac24a..0458faa 100644
--- a/src/views/Album.vue
+++ b/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 {