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" >
2020-07-07 01:02:59 +02:00
< h1 class = "title" >
{ { name } }
< / h1 >
< h2 class = "subtitle" >
Serving { { files ? files . length : 0 } } files
< / h2 >
< a
v - if = "downloadLink"
2018-09-18 08:34:00 +02:00
: 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" >
2020-07-07 01:02:59 +02:00
< Grid
v - if = "files && files.length"
2020-06-29 19:02:47 +02:00
: files = "files"
2020-12-24 15:45:16 +01:00
: is - public = "true"
2020-06-29 19:02:47 +02:00
: width = "200"
2020-12-24 15:45:16 +01:00
: enable - search = "false"
: enable - toolbar = "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" >
2020-07-07 01:02:59 +02:00
< 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 >
import axios from 'axios' ;
2020-07-07 01:02:59 +02:00
import Grid from '~/components/grid/Grid.vue' ;
2018-09-17 09:38:25 +02:00
export default {
2019-03-28 16:35:58 +01:00
components : { Grid } ,
data ( ) {
return { } ;
} ,
computed : {
config ( ) {
return this . $store . state . config ;
2020-12-24 09:40:50 +01:00
}
2019-03-28 16:35:58 +01:00
} ,
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 ,
2020-12-24 09:40:50 +01: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' } ` } ,
2020-12-24 09:40:50 +01:00
{ 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-18 09:21:48 +02:00
} ;
}
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' } ,
2020-12-25 12:45:22 +01:00
{ vmid : 'twitter:title' , name : 'twitter:title' , content : 'chibisafe' } ,
2018-09-19 09:45:50 +02:00
{ 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 } ` } ,
2020-12-25 12:45:22 +01:00
{ vmid : 'og:title' , property : 'og:title' , content : 'chibisafe' } ,
2020-12-24 09:40:50 +01:00
{ 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-19 09:45:50 +02:00
} ;
2020-12-24 09:40:50 +01:00
}
2018-09-17 09:38:25 +02:00
} ;
< / script >