Lint all changes files
This commit is contained in:
Georg Krause
parent
625a9b3dd3
commit
87c5283ead
|
|
@ -1,12 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<main class="main pusher page-about" v-title="labels.title">
|
<main
|
||||||
|
v-title="labels.title"
|
||||||
|
class="main pusher page-about"
|
||||||
|
>
|
||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
<div class="ui horizontally fitted basic stripe segment">
|
<div class="ui horizontally fitted basic stripe segment">
|
||||||
<div class="ui horizontally fitted basic very padded segment">
|
<div class="ui horizontally fitted basic very padded segment">
|
||||||
<div class="ui center aligned text container">
|
<div class="ui center aligned text container">
|
||||||
<div class="ui text container">
|
<div class="ui text container">
|
||||||
<div class="ui equal width compact stackable grid">
|
<div class="ui equal width compact stackable grid">
|
||||||
<div class="column"></div>
|
<div class="column" />
|
||||||
<div class="ten wide column">
|
<div class="ten wide column">
|
||||||
<div class="ui vertically fitted basic segment">
|
<div class="ui vertically fitted basic segment">
|
||||||
<router-link to="/">
|
<router-link to="/">
|
||||||
|
|
@ -14,68 +17,115 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column"></div>
|
<div class="column" />
|
||||||
</div>
|
</div>
|
||||||
<h2 class="header">
|
<h2 class="header">
|
||||||
<translate translate-context="Content/About/Heading">A social platform to enjoy and share music</translate>
|
<translate translate-context="Content/About/Heading">
|
||||||
|
A social platform to enjoy and share music
|
||||||
|
</translate>
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
<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>
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui hidden divider"></div>
|
<div class="ui hidden divider" />
|
||||||
<div class="ui vertically fitted basic stripe segment">
|
<div class="ui vertically fitted basic stripe segment">
|
||||||
<div class="ui two stackable cards">
|
<div class="ui two stackable cards">
|
||||||
<div class="ui card">
|
<div class="ui card">
|
||||||
<div class="signup-form content" v-if="!$store.state.auth.authenticated">
|
<div
|
||||||
|
v-if="!$store.state.auth.authenticated"
|
||||||
|
class="signup-form content"
|
||||||
|
>
|
||||||
<h3 class="header">
|
<h3 class="header">
|
||||||
<translate translate-context="*/Signup/Title">Sign up</translate>
|
<translate translate-context="*/Signup/Title">
|
||||||
|
Sign up
|
||||||
|
</translate>
|
||||||
</h3>
|
</h3>
|
||||||
<template v-if="openRegistrations">
|
<template v-if="openRegistrations">
|
||||||
<p>
|
<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>
|
<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>
|
||||||
<p v-if="defaultUploadQuota">
|
<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>
|
<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>
|
</p>
|
||||||
<signup-form button-classes="success" :show-login="false"></signup-form>
|
<signup-form
|
||||||
|
button-classes="success"
|
||||||
|
:show-login="false"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<div v-else>
|
<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>
|
<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">
|
<a
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
href="https://funkwhale.audio/#get-started"
|
||||||
|
>
|
||||||
<translate translate-context="Content/About/Link">Find another pod</translate>
|
<translate translate-context="Content/About/Link">Find another pod</translate>
|
||||||
<i class="external alternate icon margin-left"></i>
|
<i class="external alternate icon margin-left" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="signup-form content" v-else>
|
<div
|
||||||
|
v-else
|
||||||
|
class="signup-form content"
|
||||||
|
>
|
||||||
<div class="ui positive message">
|
<div class="ui positive message">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<translate translate-context="Content/About/Message">You're already signed in!</translate>
|
<translate translate-context="Content/About/Message">
|
||||||
|
You're already signed in!
|
||||||
|
</translate>
|
||||||
</div>
|
</div>
|
||||||
<p><translate translate-contect="Content/About/Hello">Hello</translate> {{ $store.state.auth.username }}</p>
|
<p>
|
||||||
|
<translate translate-contect="Content/About/Hello">
|
||||||
|
Hello
|
||||||
|
</translate> {{ $store.state.auth.username }}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui card">
|
<div class="ui card">
|
||||||
<section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
|
<section
|
||||||
|
:class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
|
||||||
|
:style="headerStyle"
|
||||||
|
>
|
||||||
<h1>
|
<h1>
|
||||||
<i class="music icon"></i>
|
<i class="music icon" />
|
||||||
{{ podName }}
|
{{ podName }}
|
||||||
</h1>
|
</h1>
|
||||||
</section>
|
</section>
|
||||||
<div class="content padding-top padding-bottom">
|
<div class="content padding-top padding-bottom">
|
||||||
<h3 class="ui header" id="description">
|
<h3
|
||||||
<translate translate-context="Content/About/Header">About this pod</translate>
|
id="description"
|
||||||
|
class="ui header"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header">
|
||||||
|
About this pod
|
||||||
|
</translate>
|
||||||
</h3>
|
</h3>
|
||||||
<div v-if="shortDescription" class="sub header">
|
<div
|
||||||
|
v-if="shortDescription"
|
||||||
|
class="sub header"
|
||||||
|
>
|
||||||
{{ shortDescription }}
|
{{ shortDescription }}
|
||||||
</div>
|
</div>
|
||||||
<p v-else>
|
<p v-else>
|
||||||
<translate translate-context="Content/About/Paragraph">No description available.</translate>
|
<translate translate-context="Content/About/Paragraph">
|
||||||
|
No description available.
|
||||||
|
</translate>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<template v-if="stats">
|
<template v-if="stats">
|
||||||
|
|
@ -84,54 +134,89 @@
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<span class="statistics-figure ui text">
|
<span class="statistics-figure ui text">
|
||||||
<span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
<span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||||
<br />
|
<br>
|
||||||
<translate translate-context="Content/About/*" :translate-n="stats.users" translate-plural="active users">active user</translate>
|
<translate
|
||||||
|
translate-context="Content/About/*"
|
||||||
|
:translate-n="stats.users"
|
||||||
|
translate-plural="active users"
|
||||||
|
>active user</translate>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<span class="statistics-figure ui text">
|
<span class="statistics-figure ui text">
|
||||||
<span class="ui big text"><strong>{{ parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
<span class="ui big text"><strong>{{ parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||||
<br />
|
<br>
|
||||||
<translate translate-context="Content/About/*" :translate-n="parseInt(stats.hours)" translate-plural="hours of music">hour of music</translate>
|
<translate
|
||||||
|
translate-context="Content/About/*"
|
||||||
|
:translate-n="parseInt(stats.hours)"
|
||||||
|
translate-plural="hours of music"
|
||||||
|
>hour of music</translate>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<router-link to="/about/pod" class="ui fluid basic secondary button">
|
<router-link
|
||||||
<translate translate-context="Content/About/Paragraph">Learn More</translate>
|
to="/about/pod"
|
||||||
|
class="ui fluid basic secondary button"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Paragraph">
|
||||||
|
Learn More
|
||||||
|
</translate>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui three stackable cards">
|
<div class="ui three stackable cards">
|
||||||
<router-link to="/" class="ui card">
|
<router-link
|
||||||
|
to="/"
|
||||||
|
class="ui card"
|
||||||
|
>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h3 class="ui header" id="description">
|
<h3
|
||||||
<translate translate-context="Content/About/Header">Browse public content</translate>
|
id="description"
|
||||||
|
class="ui header"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header">
|
||||||
|
Browse public content
|
||||||
|
</translate>
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
<translate translate-context="Content/About/Paragraph">Listen to public albums and playlists shared on this pod.</translate>
|
<translate translate-context="Content/About/Paragraph">
|
||||||
|
Listen to public albums and playlists shared on this pod.
|
||||||
|
</translate>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</router-link>
|
</router-link>
|
||||||
<a href="https://funkwhale.audio/#get-started" class="ui card">
|
<a
|
||||||
|
href="https://funkwhale.audio/#get-started"
|
||||||
|
class="ui card"
|
||||||
|
>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h3 class="ui header" id="description">
|
<h3
|
||||||
|
id="description"
|
||||||
|
class="ui header"
|
||||||
|
>
|
||||||
<translate translate-context="Content/About/Header">Find another pod</translate>
|
<translate translate-context="Content/About/Header">Find another pod</translate>
|
||||||
<i class="external alternate icon margin-left"></i>
|
<i class="external alternate icon margin-left" />
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
<translate translate-context="Content/About/Paragraph">Listen to public albums and playlists shared on this pod.</translate>
|
<translate translate-context="Content/About/Paragraph">Listen to public albums and playlists shared on this pod.</translate>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://funkwhale.audio/apps" class="ui card">
|
<a
|
||||||
|
href="https://funkwhale.audio/apps"
|
||||||
|
class="ui card"
|
||||||
|
>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h3 class="ui header" id="description">
|
<h3
|
||||||
|
id="description"
|
||||||
|
class="ui header"
|
||||||
|
>
|
||||||
<translate translate-context="Content/About/Header">Find an app</translate>
|
<translate translate-context="Content/About/Header">Find an app</translate>
|
||||||
<i class="external alternate icon margin-left"></i>
|
<i class="external alternate icon margin-left" />
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
<translate translate-context="Content/About/Paragraph">Use Funkwhale on other devices with our apps.</translate>
|
<translate translate-context="Content/About/Paragraph">Use Funkwhale on other devices with our apps.</translate>
|
||||||
|
|
@ -140,9 +225,14 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui fluid horizontally fitted basic clearing segment container">
|
<div class="ui fluid horizontally fitted basic clearing segment container">
|
||||||
<router-link to="/about/pod" class="ui right floated basic secondary button">
|
<router-link
|
||||||
<translate translate-context="Content/About/Paragraph">About this pod</translate>
|
to="/about/pod"
|
||||||
<i class="icon arrow right"></i>
|
class="ui right floated basic secondary button"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Paragraph">
|
||||||
|
About this pod
|
||||||
|
</translate>
|
||||||
|
<i class="icon arrow right" />
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -152,37 +242,37 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from "vuex"
|
import { mapState } from 'vuex'
|
||||||
import _ from '@/lodash'
|
import _ from '@/lodash'
|
||||||
import showdown from 'showdown'
|
import showdown from 'showdown'
|
||||||
import {humanSize} from '@/filters'
|
import { humanSize } from '@/filters'
|
||||||
|
|
||||||
import SignupForm from "@/components/auth/SignupForm"
|
import SignupForm from '@/components/auth/SignupForm'
|
||||||
import LogoText from "@/components/LogoText"
|
import LogoText from '@/components/LogoText'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
SignupForm,
|
SignupForm,
|
||||||
LogoText,
|
LogoText
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
markdown: new showdown.Converter(),
|
markdown: new showdown.Converter(),
|
||||||
showAllowedDomains: false,
|
showAllowedDomains: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
...mapState({
|
...mapState({
|
||||||
nodeinfo: state => state.instance.nodeinfo,
|
nodeinfo: state => state.instance.nodeinfo
|
||||||
}),
|
}),
|
||||||
labels() {
|
labels () {
|
||||||
return {
|
return {
|
||||||
title: this.$pgettext('Head/About/Title', "About")
|
title: this.$pgettext('Head/About/Title', 'About')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
podName() {
|
podName () {
|
||||||
return _.get(this.nodeinfo, 'metadata.nodeName') || "Funkwhale"
|
return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
|
||||||
},
|
},
|
||||||
banner () {
|
banner () {
|
||||||
return _.get(this.nodeinfo, 'metadata.banner')
|
return _.get(this.nodeinfo, 'metadata.banner')
|
||||||
|
|
@ -200,13 +290,13 @@ export default {
|
||||||
return _.get(this.nodeinfo, 'metadata.terms')
|
return _.get(this.nodeinfo, 'metadata.terms')
|
||||||
},
|
},
|
||||||
stats () {
|
stats () {
|
||||||
let data = {
|
const data = {
|
||||||
users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
|
users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
|
||||||
hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null),
|
hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null),
|
||||||
artists: _.get(this.nodeinfo, 'metadata.library.artists.total', null),
|
artists: _.get(this.nodeinfo, 'metadata.library.artists.total', null),
|
||||||
albums: _.get(this.nodeinfo, 'metadata.library.albums.total', null),
|
albums: _.get(this.nodeinfo, 'metadata.library.albums.total', null),
|
||||||
tracks: _.get(this.nodeinfo, 'metadata.library.tracks.total', null),
|
tracks: _.get(this.nodeinfo, 'metadata.library.tracks.total', null),
|
||||||
listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null),
|
listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null)
|
||||||
}
|
}
|
||||||
if (data.users === null || data.artists === null) {
|
if (data.users === null || data.artists === null) {
|
||||||
return
|
return
|
||||||
|
|
@ -237,16 +327,16 @@ export default {
|
||||||
federationEnabled () {
|
federationEnabled () {
|
||||||
return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
|
return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
|
||||||
},
|
},
|
||||||
headerStyle() {
|
headerStyle () {
|
||||||
if (!this.banner) {
|
if (!this.banner) {
|
||||||
return ""
|
return ''
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
"background-image: url(" +
|
'background-image: url(' +
|
||||||
this.$store.getters["instance/absoluteUrl"](this.banner) +
|
this.$store.getters['instance/absoluteUrl'](this.banner) +
|
||||||
")"
|
')'
|
||||||
)
|
)
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,23 @@
|
||||||
|
<!-- eslint-disable vue/no-v-html
|
||||||
|
We render some markdown to html here, the content is set by the admin so we should be save
|
||||||
|
-->
|
||||||
<template>
|
<template>
|
||||||
<main
|
<main
|
||||||
v-title="labels.title"
|
v-title="labels.title"
|
||||||
class="main pusher page-about"
|
class="main pusher page-about"
|
||||||
>
|
>
|
||||||
<div class="ui" :class="{ container: onDesktop}">
|
<div
|
||||||
|
class="ui"
|
||||||
|
:class="{ container: onDesktop}"
|
||||||
|
>
|
||||||
<div class="ui horizontally fitted stripe basic segment">
|
<div class="ui horizontally fitted stripe basic segment">
|
||||||
<div class="ui basic vertically fitted stripe segment content">
|
<div class="ui basic vertically fitted stripe segment content">
|
||||||
<section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
|
<section
|
||||||
|
:class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
|
||||||
|
:style="headerStyle"
|
||||||
|
>
|
||||||
<h1>
|
<h1>
|
||||||
<i class="music icon"></i>
|
<i class="music icon" />
|
||||||
{{ podName }}
|
{{ podName }}
|
||||||
</h1>
|
</h1>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -18,51 +27,112 @@
|
||||||
<div class="about-pod-info-container">
|
<div class="about-pod-info-container">
|
||||||
<div class="about-pod-info-toc">
|
<div class="about-pod-info-toc">
|
||||||
<div class="ui vertical pointing secondary menu">
|
<div class="ui vertical pointing secondary menu">
|
||||||
<router-link to="/about/pod" class="item">
|
<router-link
|
||||||
<translate translate-context="Content/About/Header">About this pod</translate>
|
to="/about/pod"
|
||||||
|
class="item"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header">
|
||||||
|
About this pod
|
||||||
|
</translate>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link to="/about/pod#rules" class="item">
|
<router-link
|
||||||
<translate translate-context="Content/About/Header">Rules</translate>
|
to="/about/pod#rules"
|
||||||
|
class="item"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header">
|
||||||
|
Rules
|
||||||
|
</translate>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link to="/about/pod#terms" class="item">
|
<router-link
|
||||||
<translate translate-context="Content/About/Header">Terms and privacy policy</translate>
|
to="/about/pod#terms"
|
||||||
|
class="item"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header">
|
||||||
|
Terms and privacy policy
|
||||||
|
</translate>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link to="/about/pod#features" class="item">
|
<router-link
|
||||||
<translate translate-context="Content/About/Header">Features</translate>
|
to="/about/pod#features"
|
||||||
|
class="item"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header">
|
||||||
|
Features
|
||||||
|
</translate>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link v-if="stats" to="/about/pod#statistics" class="item">
|
<router-link
|
||||||
<translate translate-context="Content/About/Header">Statistics</translate>
|
v-if="stats"
|
||||||
|
to="/about/pod#statistics"
|
||||||
|
class="item"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header">
|
||||||
|
Statistics
|
||||||
|
</translate>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="about-pod-info">
|
<div class="about-pod-info">
|
||||||
<h2 class="ui header" id="description about-this-pod">
|
<h2
|
||||||
<translate translate-context="Content/About/Header">About this pod</translate>
|
id="description about-this-pod"
|
||||||
|
class="ui header"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header">
|
||||||
|
About this pod
|
||||||
|
</translate>
|
||||||
</h2>
|
</h2>
|
||||||
<div v-html="markdown.makeHtml(longDescription)" v-if="longDescription"></div>
|
<div
|
||||||
|
v-if="longDescription"
|
||||||
|
v-html="markdown.makeHtml(longDescription)"
|
||||||
|
/>
|
||||||
<p v-else>
|
<p v-else>
|
||||||
<translate translate-context="Content/About/Paragraph">No description available.</translate>
|
<translate translate-context="Content/About/Paragraph">
|
||||||
|
No description available.
|
||||||
|
</translate>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3 class="ui header" id="rules">
|
<h3
|
||||||
<translate translate-context="Content/About/Header">Rules</translate>
|
id="rules"
|
||||||
|
class="ui header"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header">
|
||||||
|
Rules
|
||||||
|
</translate>
|
||||||
</h3>
|
</h3>
|
||||||
<div v-html="markdown.makeHtml(rules)" v-if="rules"></div>
|
<div
|
||||||
|
v-if="rules"
|
||||||
|
v-html="markdown.makeHtml(rules)"
|
||||||
|
/>
|
||||||
<p v-else>
|
<p v-else>
|
||||||
<translate translate-context="Content/About/Paragraph">No rules available.</translate>
|
<translate translate-context="Content/About/Paragraph">
|
||||||
|
No rules available.
|
||||||
|
</translate>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3 class="ui header" id="terms">
|
<h3
|
||||||
<translate translate-context="Content/About/Header">Terms and privacy policy</translate>
|
id="terms"
|
||||||
|
class="ui header"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header">
|
||||||
|
Terms and privacy policy
|
||||||
|
</translate>
|
||||||
</h3>
|
</h3>
|
||||||
<div v-html="markdown.makeHtml(terms)" v-if="terms"></div>
|
<div
|
||||||
|
v-if="terms"
|
||||||
|
v-html="markdown.makeHtml(terms)"
|
||||||
|
/>
|
||||||
<p v-else>
|
<p v-else>
|
||||||
<translate translate-context="Content/About/Paragraph">No terms available.</translate>
|
<translate translate-context="Content/About/Paragraph">
|
||||||
|
No terms available.
|
||||||
|
</translate>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3 class="header" id="features">
|
<h3
|
||||||
<translate translate-context="Content/About/Header/Name">Features</translate>
|
id="features"
|
||||||
|
class="header"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header/Name">
|
||||||
|
Features
|
||||||
|
</translate>
|
||||||
</h3>
|
</h3>
|
||||||
<div class="features-container ui two column stackable grid">
|
<div class="features-container ui two column stackable grid">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
|
|
@ -70,14 +140,22 @@
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<translate translate-context="*/*/*">Funkwhale version</translate>
|
<translate translate-context="*/*/*">
|
||||||
|
Funkwhale version
|
||||||
|
</translate>
|
||||||
</td>
|
</td>
|
||||||
<td v-if="version" class="right aligned">
|
<td
|
||||||
|
v-if="version"
|
||||||
|
class="right aligned"
|
||||||
|
>
|
||||||
<span class="features-status ui text">
|
<span class="features-status ui text">
|
||||||
{{ version }}
|
{{ version }}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td v-else class="right aligned">
|
<td
|
||||||
|
v-else
|
||||||
|
class="right aligned"
|
||||||
|
>
|
||||||
<span class="features-status ui text">
|
<span class="features-status ui text">
|
||||||
<translate translate-context="*/*/*">N/A</translate>
|
<translate translate-context="*/*/*">N/A</translate>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -85,34 +163,50 @@
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<translate translate-context="*/*/*">Federation</translate>
|
<translate translate-context="*/*/*">
|
||||||
|
Federation
|
||||||
|
</translate>
|
||||||
</td>
|
</td>
|
||||||
<td v-if="federationEnabled" class="right aligned">
|
<td
|
||||||
|
v-if="federationEnabled"
|
||||||
|
class="right aligned"
|
||||||
|
>
|
||||||
<span class="features-status ui text">
|
<span class="features-status ui text">
|
||||||
<i class="check icon"></i>
|
<i class="check icon" />
|
||||||
<translate translate-context="*/*/*/State of feature">Enabled</translate>
|
<translate translate-context="*/*/*/State of feature">Enabled</translate>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td v-else class="right aligned">
|
<td
|
||||||
|
v-else
|
||||||
|
class="right aligned"
|
||||||
|
>
|
||||||
<span class="features-status ui text">
|
<span class="features-status ui text">
|
||||||
<i class="x icon"></i>
|
<i class="x icon" />
|
||||||
<translate translate-context="*/*/*/State of feature">Disabled</translate>
|
<translate translate-context="*/*/*/State of feature">Disabled</translate>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<translate translate-context="*/*/*">Allow-list</translate>
|
<translate translate-context="*/*/*">
|
||||||
|
Allow-list
|
||||||
|
</translate>
|
||||||
</td>
|
</td>
|
||||||
<td v-if="allowListEnabled" class="right aligned">
|
<td
|
||||||
|
v-if="allowListEnabled"
|
||||||
|
class="right aligned"
|
||||||
|
>
|
||||||
<span class="features-status ui text">
|
<span class="features-status ui text">
|
||||||
<i class="check icon"></i>
|
<i class="check icon" />
|
||||||
<translate translate-context="*/*/*/State of feature">Enabled</translate>
|
<translate translate-context="*/*/*/State of feature">Enabled</translate>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td v-else class="right aligned">
|
<td
|
||||||
|
v-else
|
||||||
|
class="right aligned"
|
||||||
|
>
|
||||||
<span class="features-status ui text">
|
<span class="features-status ui text">
|
||||||
<i class="x icon"></i>
|
<i class="x icon" />
|
||||||
<translate translate-context="*/*/*/State of feature">Disabled</translate>
|
<translate translate-context="*/*/*/State of feature">Disabled</translate>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
|
|
@ -125,48 +219,72 @@
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<translate translate-context="*/*/*">Anonymous access</translate>
|
<translate translate-context="*/*/*">
|
||||||
|
Anonymous access
|
||||||
|
</translate>
|
||||||
</td>
|
</td>
|
||||||
<td v-if="anonymousCanListen" class="right aligned">
|
<td
|
||||||
|
v-if="anonymousCanListen"
|
||||||
|
class="right aligned"
|
||||||
|
>
|
||||||
<span class="features-status ui text">
|
<span class="features-status ui text">
|
||||||
<i class="check icon"></i>
|
<i class="check icon" />
|
||||||
<translate translate-context="*/*/*/State of feature">Enabled</translate>
|
<translate translate-context="*/*/*/State of feature">Enabled</translate>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td v-else class="right aligned">
|
<td
|
||||||
|
v-else
|
||||||
|
class="right aligned"
|
||||||
|
>
|
||||||
<span class="features-status ui text">
|
<span class="features-status ui text">
|
||||||
<i class="x icon"></i>
|
<i class="x icon" />
|
||||||
<translate translate-context="*/*/*/State of feature">Disabled</translate>
|
<translate translate-context="*/*/*/State of feature">Disabled</translate>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<translate translate-context="*/*/*">Registrations</translate>
|
<translate translate-context="*/*/*">
|
||||||
|
Registrations
|
||||||
|
</translate>
|
||||||
</td>
|
</td>
|
||||||
<td v-if="openRegistrations" class="right aligned">
|
<td
|
||||||
|
v-if="openRegistrations"
|
||||||
|
class="right aligned"
|
||||||
|
>
|
||||||
<span class="features-status ui text">
|
<span class="features-status ui text">
|
||||||
<i class="check icon"></i>
|
<i class="check icon" />
|
||||||
<translate translate-context="*/*/*/State of registrations">Open</translate>
|
<translate translate-context="*/*/*/State of registrations">Open</translate>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td v-else class="right aligned">
|
<td
|
||||||
|
v-else
|
||||||
|
class="right aligned"
|
||||||
|
>
|
||||||
<span class="features-status ui text">
|
<span class="features-status ui text">
|
||||||
<i class="x icon"></i>
|
<i class="x icon" />
|
||||||
<translate translate-context="*/*/*/State of registrations">Closed</translate>
|
<translate translate-context="*/*/*/State of registrations">Closed</translate>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<translate translate-context="*/*/*">Upload quota</translate>
|
<translate translate-context="*/*/*">
|
||||||
|
Upload quota
|
||||||
|
</translate>
|
||||||
</td>
|
</td>
|
||||||
<td v-if="defaultUploadQuota" class="right aligned">
|
<td
|
||||||
|
v-if="defaultUploadQuota"
|
||||||
|
class="right aligned"
|
||||||
|
>
|
||||||
<span class="features-status ui text">
|
<span class="features-status ui text">
|
||||||
{{ defaultUploadQuota * 1000 * 1000 | humanSize }}
|
{{ defaultUploadQuota * 1000 * 1000 | humanSize }}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td v-else class="right aligned">
|
<td
|
||||||
|
v-else
|
||||||
|
class="right aligned"
|
||||||
|
>
|
||||||
<span class="features-status ui text">
|
<span class="features-status ui text">
|
||||||
<translate translate-context="*/*/*">N/A</translate>
|
<translate translate-context="*/*/*">N/A</translate>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -178,69 +296,132 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-if="stats">
|
<template v-if="stats">
|
||||||
<h3 class="header" id="statistics">
|
<h3
|
||||||
<translate translate-context="Content/About/Header">Statistics</translate>
|
id="statistics"
|
||||||
|
class="header"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header">
|
||||||
|
Statistics
|
||||||
|
</translate>
|
||||||
</h3>
|
</h3>
|
||||||
<div class="statistics-container">
|
<div class="statistics-container">
|
||||||
<div class="statistics-statistic" v-if="stats.hours">
|
<div
|
||||||
|
v-if="stats.hours"
|
||||||
|
class="statistics-statistic"
|
||||||
|
>
|
||||||
<span class="statistics-figure ui text">
|
<span class="statistics-figure ui text">
|
||||||
<span class="ui big text"><strong>{{ parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
<span class="ui big text"><strong>{{ parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||||
<br />
|
<br>
|
||||||
<translate translate-context="Content/About/*" :translate-n="parseInt(stats.hours)" translate-plural="hours of music">hour of music</translate>
|
<translate
|
||||||
|
translate-context="Content/About/*"
|
||||||
|
:translate-n="parseInt(stats.hours)"
|
||||||
|
translate-plural="hours of music"
|
||||||
|
>hour of music</translate>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="statistics-statistic" v-if="stats.artists">
|
<div
|
||||||
|
v-if="stats.artists"
|
||||||
|
class="statistics-statistic"
|
||||||
|
>
|
||||||
<span class="statistics-figure ui text">
|
<span class="statistics-figure ui text">
|
||||||
<span class="ui big text"><strong>{{ stats.artists.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
<span class="ui big text"><strong>{{ stats.artists.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||||
<br />
|
<br>
|
||||||
<translate translate-context="Content/About/*" :translate-n="stats.artists" translate-plural="artists">artist</translate>
|
<translate
|
||||||
|
translate-context="Content/About/*"
|
||||||
|
:translate-n="stats.artists"
|
||||||
|
translate-plural="artists"
|
||||||
|
>artist</translate>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="statistics-statistic" v-if="stats.albums">
|
<div
|
||||||
|
v-if="stats.albums"
|
||||||
|
class="statistics-statistic"
|
||||||
|
>
|
||||||
<span class="statistics-figure ui text">
|
<span class="statistics-figure ui text">
|
||||||
<span class="ui big text"><strong>{{ stats.albums.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
<span class="ui big text"><strong>{{ stats.albums.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||||
<br />
|
<br>
|
||||||
<translate translate-context="Content/About/*" :translate-n="stats.albums" translate-plural="albums">album</translate>
|
<translate
|
||||||
|
translate-context="Content/About/*"
|
||||||
|
:translate-n="stats.albums"
|
||||||
|
translate-plural="albums"
|
||||||
|
>album</translate>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="statistics-statistic" v-if="stats.tracks">
|
<div
|
||||||
|
v-if="stats.tracks"
|
||||||
|
class="statistics-statistic"
|
||||||
|
>
|
||||||
<span class="statistics-figure ui text">
|
<span class="statistics-figure ui text">
|
||||||
<span class="ui big text"><strong>{{ stats.tracks.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
<span class="ui big text"><strong>{{ stats.tracks.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||||
<br />
|
<br>
|
||||||
<translate translate-context="Content/About/*" :translate-n="stats.tracks" translate-plural="tracks">track</translate>
|
<translate
|
||||||
|
translate-context="Content/About/*"
|
||||||
|
:translate-n="stats.tracks"
|
||||||
|
translate-plural="tracks"
|
||||||
|
>track</translate>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="statistics-statistic" v-if="stats.users">
|
<div
|
||||||
|
v-if="stats.users"
|
||||||
|
class="statistics-statistic"
|
||||||
|
>
|
||||||
<span class="statistics-figure ui text">
|
<span class="statistics-figure ui text">
|
||||||
<span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
<span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||||
<br />
|
<br>
|
||||||
<translate translate-context="Content/About/*" :translate-n="stats.users" translate-plural="active users">active user</translate>
|
<translate
|
||||||
|
translate-context="Content/About/*"
|
||||||
|
:translate-n="stats.users"
|
||||||
|
translate-plural="active users"
|
||||||
|
>active user</translate>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="statistics-statistic" v-if="stats.listenings">
|
<div
|
||||||
|
v-if="stats.listenings"
|
||||||
|
class="statistics-statistic"
|
||||||
|
>
|
||||||
<span class="statistics-figure ui text">
|
<span class="statistics-figure ui text">
|
||||||
<span class="ui big text"><strong>{{ stats.listenings.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
<span class="ui big text"><strong>{{ stats.listenings.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||||
<br />
|
<br>
|
||||||
<translate translate-context="Content/About/*" :translate-n="stats.listenings" translate-plural="listenings">listening</translate>
|
<translate
|
||||||
|
translate-context="Content/About/*"
|
||||||
|
:translate-n="stats.listenings"
|
||||||
|
translate-plural="listenings"
|
||||||
|
>listening</translate>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="contactEmail">
|
<template v-if="contactEmail">
|
||||||
<h3 class="ui header" id="contact">
|
<h3
|
||||||
<translate translate-context="Content/About/Header">Contact</translate>
|
id="contact"
|
||||||
|
class="ui header"
|
||||||
|
>
|
||||||
|
<translate translate-context="Content/About/Header">
|
||||||
|
Contact
|
||||||
|
</translate>
|
||||||
</h3>
|
</h3>
|
||||||
<a v-if="contactEmail" :href="`mailto:${contactEmail}`">
|
<a
|
||||||
<translate translate-context="Content/About/Email" :translate-params="{ email: contactEmail }">Send us an email: {{ contactEmail }}</translate>
|
v-if="contactEmail"
|
||||||
|
:href="`mailto:${contactEmail}`"
|
||||||
|
>
|
||||||
|
<translate
|
||||||
|
translate-context="Content/About/Email"
|
||||||
|
:translate-params="{ email: contactEmail }"
|
||||||
|
>Send us an email: {{ contactEmail }}</translate>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div class="ui hidden divider"></div>
|
<div class="ui hidden divider" />
|
||||||
<div class="ui fluid horizontally fitted basic clearing segment container">
|
<div class="ui fluid horizontally fitted basic clearing segment container">
|
||||||
<router-link to="/about" class="ui left floated basic secondary button">
|
<router-link
|
||||||
<i class="icon arrow left"></i>
|
to="/about"
|
||||||
<translate translate-context="Content/About/Paragraph">Introduction</translate>
|
class="ui left floated basic secondary button"
|
||||||
|
>
|
||||||
|
<i class="icon arrow left" />
|
||||||
|
<translate translate-context="Content/About/Paragraph">
|
||||||
|
Introduction
|
||||||
|
</translate>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -252,34 +433,29 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from "vuex"
|
import { mapState } from 'vuex'
|
||||||
import _ from '@/lodash'
|
import _ from '@/lodash'
|
||||||
import showdown from 'showdown'
|
import showdown from 'showdown'
|
||||||
|
|
||||||
import SignupForm from "@/components/auth/SignupForm"
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
|
||||||
SignupForm,
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
markdown: new showdown.Converter(),
|
markdown: new showdown.Converter(),
|
||||||
showAllowedDomains: false,
|
showAllowedDomains: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
...mapState({
|
...mapState({
|
||||||
nodeinfo: state => state.instance.nodeinfo,
|
nodeinfo: state => state.instance.nodeinfo
|
||||||
}),
|
}),
|
||||||
labels() {
|
labels () {
|
||||||
return {
|
return {
|
||||||
title: this.$pgettext('Head/About/Title', "About")
|
title: this.$pgettext('Head/About/Title', 'About')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
podName() {
|
podName () {
|
||||||
return _.get(this.nodeinfo, 'metadata.nodeName') || "Funkwhale"
|
return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
|
||||||
},
|
},
|
||||||
banner () {
|
banner () {
|
||||||
return _.get(this.nodeinfo, 'metadata.banner')
|
return _.get(this.nodeinfo, 'metadata.banner')
|
||||||
|
|
@ -297,13 +473,13 @@ export default {
|
||||||
return _.get(this.nodeinfo, 'metadata.terms')
|
return _.get(this.nodeinfo, 'metadata.terms')
|
||||||
},
|
},
|
||||||
stats () {
|
stats () {
|
||||||
let data = {
|
const data = {
|
||||||
users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
|
users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
|
||||||
hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null),
|
hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null),
|
||||||
artists: _.get(this.nodeinfo, 'metadata.library.artists.total', null),
|
artists: _.get(this.nodeinfo, 'metadata.library.artists.total', null),
|
||||||
albums: _.get(this.nodeinfo, 'metadata.library.albums.total', null),
|
albums: _.get(this.nodeinfo, 'metadata.library.albums.total', null),
|
||||||
tracks: _.get(this.nodeinfo, 'metadata.library.tracks.total', null),
|
tracks: _.get(this.nodeinfo, 'metadata.library.tracks.total', null),
|
||||||
listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null),
|
listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null)
|
||||||
}
|
}
|
||||||
if (data.users === null || data.artists === null) {
|
if (data.users === null || data.artists === null) {
|
||||||
return
|
return
|
||||||
|
|
@ -334,19 +510,19 @@ export default {
|
||||||
federationEnabled () {
|
federationEnabled () {
|
||||||
return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
|
return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
|
||||||
},
|
},
|
||||||
headerStyle() {
|
headerStyle () {
|
||||||
if (!this.banner) {
|
if (!this.banner) {
|
||||||
return ""
|
return ''
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
"background-image: url(" +
|
'background-image: url(' +
|
||||||
this.$store.getters["instance/absoluteUrl"](this.banner) +
|
this.$store.getters['instance/absoluteUrl'](this.banner) +
|
||||||
")"
|
')'
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
onDesktop () {
|
onDesktop () {
|
||||||
if(window.innerWidth > 800) return true;
|
if (window.innerWidth > 800) return true
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue