106 lines
3.5 KiB
Vue
106 lines
3.5 KiB
Vue
|
<style lang="scss" scoped>
|
||
|
|
@import '../styles/colors.scss';
|
||
|
|
section { background-color: $backgroundLight1 !important; }
|
||
|
|
|
||
|
|
section.hero div.hero-body.align-top {
|
||
|
|
align-items: baseline;
|
||
|
|
flex-grow: 0;
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.loading-container {
|
||
|
|
justify-content: center;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss">
|
||
|
|
@import '../styles/colors.scss';
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<section class="hero is-fullheight">
|
||
|
|
<template v-if="files.length">
|
||
|
|
<div class="hero-body align-top">
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="title">{{ name }}</h1>
|
||
|
|
<h2 class="subtitle">Serving {{ files.length }} files</h2>
|
||
|
|
<hr>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="hero-body">
|
||
|
|
<div class="container">
|
||
|
|
<Grid v-if="files.length"
|
||
|
|
:files="files"
|
||
|
|
:isPublic="true"
|
||
|
|
:width="200"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<div class="hero-body">
|
||
|
|
<div class="container loading-container">
|
||
|
|
<Loading class="square"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Grid from '../components/grid/Grid.vue';
|
||
|
|
import Loading from '../components/loading/CubeShadow.vue';
|
||
|
|
import axios from 'axios';
|
||
|
|
import config from '../config.js';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: { Grid, Loading },
|
||
|
|
async getInitialData({ route, store }) {
|
||
|
|
try {
|
||
|
|
const res = await axios.get(`${config.baseURL}/album/${route.params.identifier}`);
|
||
|
|
return {
|
||
|
|
name: res.data.name,
|
||
|
|
downloadEnabled: res.data.downloadEnabled,
|
||
|
|
files: res.data.files
|
||
|
|
};
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error);
|
||
|
|
return {
|
||
|
|
name: null,
|
||
|
|
downloadEnabled: false,
|
||
|
|
files: []
|
||
|
|
};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
metaInfo() {
|
||
|
|
return {
|
||
|
|
title: `${this.name ? this.name : ''}`,
|
||
|
|
meta: [
|
||
|
|
{ vmid: 'theme-color', name: 'theme-color', content: '#30a9ed' },
|
||
|
|
{ vmid: 'twitter:card', name: 'twitter:card', content: 'summary' },
|
||
|
|
{ vmid: 'twitter:title', name: 'twitter:title', content: `Album: ${this.name} | Files: ${this.files.length}` },
|
||
|
|
{ vmid: 'twitter:description', name: 'twitter:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
|
||
|
|
{ vmid: 'twitter:image', name: 'twitter:image', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
|
||
|
|
{ vmid: 'twitter:image:src', name: 'twitter:image:src', value: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
|
||
|
|
|
||
|
|
{ vmid: 'og:url', property: 'og:url', content: `${config.URL}/a/${this.$route.params.identifier}` },
|
||
|
|
{ vmid: 'og:title', property: 'og:title', content: `Album: ${this.name} | Files: ${this.files.length}` },
|
||
|
|
{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
|
||
|
|
{ vmid: 'og:image', property: 'og:image', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
|
||
|
|
{ vmid: 'og:image:secure_url', property: 'og:image:secure_url', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` }
|
||
|
|
]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.$ga.page({
|
||
|
|
page: `/a/${this.$route.params.identifier}`,
|
||
|
|
title: `Album | ${this.name}`,
|
||
|
|
location: window.location.href
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {}
|
||
|
|
};
|
||
|
|
</script>
|