Add 360 photos description

This commit is contained in:
2020-10-03 20:20:29 +03:00
parent b5a9aa9b0c
commit d8a6850417
4 changed files with 25 additions and 4 deletions

View File

@@ -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"]}]

View File

@@ -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'

View File

@@ -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!`));
}
});

View File

@@ -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 {