2018-09-17 09:38:25 +02:00
< style lang = "scss" scoped >
2018-09-19 09:45:50 +02:00
@ import '~/assets/styles/_colors.scss' ;
2018-09-17 09:38:25 +02:00
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" >
2018-09-19 09:45:50 +02:00
@ import '~/assets/styles/_colors.scss' ;
2018-09-17 09:38:25 +02:00
< / style >
< template >
2020-06-29 19:02:47 +02:00
< section class = "section is-fullheight" >
2018-09-18 08:52:49 +02:00
< template v-if ="files && files.length" >
2020-06-29 19:02:47 +02:00
< div class = "align-top" >
2018-09-17 09:38:25 +02:00
< div class = "container" >
< h1 class = "title" > { { name } } < / h1 >
2018-09-18 09:21:48 +02:00
< h2 class = "subtitle" > Serving { { files ? files . length : 0 } } files < / h2 >
2018-09-18 08:34:00 +02:00
< a v -if = " downloadLink "
: href = "downloadLink" > Download Album < / a >
2018-09-17 09:38:25 +02:00
< hr >
< / div >
< / div >
2020-06-29 19:02:47 +02:00
< div class = "container" >
< Grid v -if = " files & & files.length "
: files = "files"
: isPublic = "true"
: width = "200"
: enableSearch = "false"
: enableToolbar = "false" / >
2018-09-17 09:38:25 +02:00
< / div >
< / template >
< template v-else >
2020-06-29 19:02:47 +02:00
< div class = "container" >
< h1 class = "title" > : ( < / h1 >
< h2 class = "subtitle" > This album seems to be empty < / h2 >
2018-09-17 09:38:25 +02:00
< / div >
< / template >
< / section >
< / template >
< script >
2018-09-19 09:45:50 +02:00
import Grid from '~/components/grid/Grid.vue' ;
2018-09-17 09:38:25 +02:00
import axios from 'axios' ;
export default {
2019-03-28 16:35:58 +01:00
components : { Grid } ,
data ( ) {
return { } ;
} ,
computed : {
config ( ) {
return this . $store . state . config ;
}
} ,
2019-02-21 16:12:51 +01:00
async asyncData ( { app , params , error } ) {
2018-09-17 09:38:25 +02:00
try {
2019-09-30 09:06:22 +02:00
const { data } = await axios . get ( ` ${ app . store . state . config . baseURL } /album/ ${ params . identifier } ` ) ;
2019-03-28 16:35:58 +01:00
const downloadLink = data . downloadEnabled ? ` ${ app . store . state . config . baseURL } /album/ ${ params . identifier } /zip ` : null ;
2018-09-17 09:38:25 +02:00
return {
2019-03-28 16:35:58 +01:00
name : data . name ,
downloadEnabled : data . downloadEnabled ,
files : data . files ,
2018-09-18 08:34:00 +02:00
downloadLink
2018-09-17 09:38:25 +02:00
} ;
2018-09-19 09:45:50 +02:00
} catch ( err ) {
2019-09-30 09:06:22 +02:00
console . log ( 'Error when retrieving album' , err ) ;
2020-06-24 19:05:48 +02:00
error ( { statusCode : 404 , message : 'Album not found' } ) ;
2018-09-17 09:38:25 +02:00
}
} ,
metaInfo ( ) {
2018-09-19 09:45:50 +02:00
if ( this . files ) {
2018-09-18 09:21:48 +02:00
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' } ` } ,
2018-09-17 09:38:25 +02:00
2020-06-24 19:05:48 +02:00
{ vmid : 'og:url' , property : 'og:url' , content : ` ${ this . config . URL } /a/ ${ this . $route . params . identifier } ` } ,
2018-09-18 09:21:48 +02:00
{ 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' } ` }
]
} ;
}
2018-09-19 09:45:50 +02:00
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 : 'lolisafe' } ,
{ 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.' } ,
2020-06-24 19:05:48 +02:00
{ vmid : 'og:url' , property : 'og:url' , content : ` ${ this . config . URL } /a/ ${ this . $route . params . identifier } ` } ,
2018-09-19 09:45:50 +02:00
{ vmid : 'og:title' , property : 'og:title' , content : 'lolisafe' } ,
{ 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.' }
]
} ;
2018-09-18 08:34:00 +02:00
}
2018-09-17 09:38:25 +02:00
} ;
< / script >