Public albums wooo!

1 files changed, 105 insertions, 0 deletions

diff --git a/src/site/views/PublicAlbum.vue b/src/site/views/PublicAlbum.vue
new file mode 100644
index 0000000..534c185
--- /dev/null
+++ b/src/site/views/PublicAlbum.vue
@@ -0,0 +1,105 @@
+<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>