361 lines
12 KiB
Vue
361 lines
12 KiB
Vue
<template>
|
|
<main
|
|
v-title="labels.title"
|
|
class="main pusher page-about"
|
|
>
|
|
<div class="ui container">
|
|
<div class="ui horizontally fitted basic stripe segment">
|
|
<div class="ui horizontally fitted basic very padded segment">
|
|
<div class="ui center aligned text container">
|
|
<div class="ui text container">
|
|
<div class="ui equal width compact stackable grid">
|
|
<div class="column" />
|
|
<div class="ten wide column">
|
|
<div class="ui vertically fitted basic segment">
|
|
<router-link to="/">
|
|
<logo-text />
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
<div class="column" />
|
|
</div>
|
|
<h2 class="header">
|
|
<translate translate-context="Content/About/Heading">
|
|
A social platform to enjoy and share music
|
|
</translate>
|
|
</h2>
|
|
<p>
|
|
<translate translate-context="Content/About/Paragraph">
|
|
Funkwhale is a community-driven project that lets you listen and share music and audio within a decentralized, open network.
|
|
</translate>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui hidden divider" />
|
|
<div class="ui vertically fitted basic stripe segment">
|
|
<div class="ui two stackable cards">
|
|
<div class="ui card">
|
|
<div
|
|
v-if="!$store.state.auth.authenticated"
|
|
class="signup-form content"
|
|
>
|
|
<h3 class="header">
|
|
<translate translate-context="*/Signup/Title">
|
|
Sign up
|
|
</translate>
|
|
</h3>
|
|
<template v-if="openRegistrations">
|
|
<p>
|
|
<translate translate-context="Content/About/Paragraph">
|
|
Sign up now to keep a track of your favorites, create playlists, discover new content and much more!
|
|
</translate>
|
|
</p>
|
|
<p v-if="defaultUploadQuota">
|
|
<translate
|
|
translate-context="Content/About/Paragraph"
|
|
:translate-params="{quota: defaultUploadQuota}"
|
|
>
|
|
Users on this pod also get %{ quota } of free storage to upload their own content!
|
|
</translate>
|
|
</p>
|
|
<signup-form
|
|
button-classes="success"
|
|
:show-login="false"
|
|
/>
|
|
</template>
|
|
<div v-else>
|
|
<p translate-context="Content/About/Paragraph">
|
|
Registrations are closed on this pod. You can signup on another pod using the link below.
|
|
</p>
|
|
|
|
<a
|
|
target="_blank"
|
|
rel="noopener"
|
|
href="https://funkwhale.audio/#get-started"
|
|
>
|
|
<translate translate-context="Content/About/Link">Find another pod</translate>
|
|
<i class="external alternate icon margin-left" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="signup-form content"
|
|
>
|
|
<div class="ui positive message">
|
|
<div class="header">
|
|
<translate translate-context="Content/About/Message">
|
|
You're already signed in!
|
|
</translate>
|
|
</div>
|
|
<p>
|
|
<translate translate-contect="Content/About/Hello">
|
|
Hello
|
|
</translate> {{ $store.state.auth.username }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui card">
|
|
<section
|
|
:class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
|
|
:style="headerStyle"
|
|
>
|
|
<h1>
|
|
<i class="music icon" />
|
|
{{ podName }}
|
|
</h1>
|
|
</section>
|
|
<div class="content padding-top padding-bottom">
|
|
<h3
|
|
id="description"
|
|
class="ui header"
|
|
>
|
|
<translate translate-context="Content/About/Header">
|
|
About this pod
|
|
</translate>
|
|
</h3>
|
|
<div
|
|
v-if="shortDescription"
|
|
class="sub header"
|
|
>
|
|
{{ shortDescription }}
|
|
</div>
|
|
<p v-else>
|
|
<translate translate-context="Content/About/Paragraph">
|
|
No description available.
|
|
</translate>
|
|
</p>
|
|
|
|
<template v-if="stats">
|
|
<div class="statistics-container ui doubling grid">
|
|
<div class="two column row">
|
|
<div class="column">
|
|
<span class="statistics-figure ui text">
|
|
<span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
|
<br>
|
|
<translate
|
|
translate-context="Content/About/*"
|
|
:translate-n="stats.users"
|
|
translate-plural="active users"
|
|
>active user</translate>
|
|
</span>
|
|
</div>
|
|
<div class="column">
|
|
<span class="statistics-figure ui text">
|
|
<span class="ui big text"><strong>{{ parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
|
<br>
|
|
<translate
|
|
translate-context="Content/About/*"
|
|
:translate-n="parseInt(stats.hours)"
|
|
translate-plural="hours of music"
|
|
>hour of music</translate>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<router-link
|
|
to="/about/pod"
|
|
class="ui fluid basic secondary button"
|
|
>
|
|
<translate translate-context="Content/About/Paragraph">
|
|
Learn More
|
|
</translate>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui three stackable cards">
|
|
<router-link
|
|
to="/"
|
|
class="ui card"
|
|
>
|
|
<div class="content">
|
|
<h3
|
|
id="description"
|
|
class="ui header"
|
|
>
|
|
<translate translate-context="Content/About/Header">
|
|
Browse public content
|
|
</translate>
|
|
</h3>
|
|
<p>
|
|
<translate translate-context="Content/About/Paragraph">
|
|
Listen to public albums and playlists shared on this pod.
|
|
</translate>
|
|
</p>
|
|
</div>
|
|
</router-link>
|
|
<a
|
|
href="https://funkwhale.audio/#get-started"
|
|
class="ui card"
|
|
>
|
|
<div class="content">
|
|
<h3
|
|
id="description"
|
|
class="ui header"
|
|
>
|
|
<translate translate-context="Content/About/Header">Find another pod</translate>
|
|
<i class="external alternate icon margin-left" />
|
|
</h3>
|
|
<p>
|
|
<translate translate-context="Content/About/Paragraph">Listen to public albums and playlists shared on this pod.</translate>
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="https://funkwhale.audio/apps"
|
|
class="ui card"
|
|
>
|
|
<div class="content">
|
|
<h3
|
|
id="description"
|
|
class="ui header"
|
|
>
|
|
<translate translate-context="Content/About/Header">Find an app</translate>
|
|
<i class="external alternate icon margin-left" />
|
|
</h3>
|
|
<p>
|
|
<translate translate-context="Content/About/Paragraph">Use Funkwhale on other devices with our apps.</translate>
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="ui fluid horizontally fitted basic clearing segment container">
|
|
<router-link
|
|
to="/about/pod"
|
|
class="ui right floated basic secondary button"
|
|
>
|
|
<translate translate-context="Content/About/Paragraph">
|
|
About this pod
|
|
</translate>
|
|
<i class="icon arrow right" />
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
import _ from '@/lodash'
|
|
import showdown from 'showdown'
|
|
import { humanSize } from '@/filters'
|
|
|
|
import SignupForm from '@/components/auth/SignupForm'
|
|
import LogoText from '@/components/LogoText'
|
|
|
|
export default {
|
|
components: {
|
|
SignupForm,
|
|
LogoText
|
|
},
|
|
data () {
|
|
return {
|
|
markdown: new showdown.Converter(),
|
|
showAllowedDomains: false
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
...mapState({
|
|
nodeinfo: state => state.instance.nodeinfo
|
|
}),
|
|
labels () {
|
|
return {
|
|
title: this.$pgettext('Head/About/Title', 'About')
|
|
}
|
|
},
|
|
podName () {
|
|
return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
|
|
},
|
|
banner () {
|
|
return _.get(this.nodeinfo, 'metadata.banner')
|
|
},
|
|
shortDescription () {
|
|
return _.get(this.nodeinfo, 'metadata.shortDescription')
|
|
},
|
|
longDescription () {
|
|
return _.get(this.nodeinfo, 'metadata.longDescription')
|
|
},
|
|
rules () {
|
|
return _.get(this.nodeinfo, 'metadata.rules')
|
|
},
|
|
terms () {
|
|
return _.get(this.nodeinfo, 'metadata.terms')
|
|
},
|
|
stats () {
|
|
const data = {
|
|
users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
|
|
hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null),
|
|
artists: _.get(this.nodeinfo, 'metadata.library.artists.total', null),
|
|
albums: _.get(this.nodeinfo, 'metadata.library.albums.total', null),
|
|
tracks: _.get(this.nodeinfo, 'metadata.library.tracks.total', null),
|
|
listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null)
|
|
}
|
|
if (data.users === null || data.artists === null) {
|
|
return
|
|
}
|
|
return data
|
|
},
|
|
contactEmail () {
|
|
return _.get(this.nodeinfo, 'metadata.contactEmail')
|
|
},
|
|
anonymousCanListen () {
|
|
return _.get(this.nodeinfo, 'metadata.library.anonymousCanListen')
|
|
},
|
|
allowListEnabled () {
|
|
return _.get(this.nodeinfo, 'metadata.allowList.enabled')
|
|
},
|
|
allowListDomains () {
|
|
return _.get(this.nodeinfo, 'metadata.allowList.domains')
|
|
},
|
|
version () {
|
|
return _.get(this.nodeinfo, 'software.version')
|
|
},
|
|
openRegistrations () {
|
|
return _.get(this.nodeinfo, 'openRegistrations')
|
|
},
|
|
defaultUploadQuota () {
|
|
return humanSize(_.get(this.nodeinfo, 'metadata.defaultUploadQuota') * 1000 * 1000)
|
|
},
|
|
federationEnabled () {
|
|
return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
|
|
},
|
|
headerStyle () {
|
|
if (!this.banner) {
|
|
return ''
|
|
}
|
|
return (
|
|
'background-image: url(' +
|
|
this.$store.getters['instance/absoluteUrl'](this.banner) +
|
|
')'
|
|
)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.margin-left {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.padding-top {
|
|
padding-top: 20px !important;
|
|
}
|
|
|
|
.padding-bottom {
|
|
padding-bottom: 20px !important;
|
|
}
|
|
h3 i {
|
|
display: inline !important;
|
|
font-size: 14px !important;
|
|
}
|
|
</style>
|