Add 360 photos description
This commit is contained in:
@@ -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"]}]
|
||||
@@ -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'
|
||||
|
||||
@@ -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!`));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user