diff --git a/front/src/components/About.vue b/front/src/components/About.vue
index 050cc17fa78064c362a71550d20d91086dea227e..b5c2ec01e352d28596a3395827f9b83f01d48905 100644
--- a/front/src/components/About.vue
+++ b/front/src/components/About.vue
@@ -1,12 +1,15 @@
<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 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>
+ <div class="column" />
<div class="ten wide column">
<div class="ui vertically fitted basic segment">
<router-link to="/">
@@ -14,68 +17,115 @@
</router-link>
</div>
</div>
- <div class="column"></div>
+ <div class="column" />
</div>
<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>
<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>
</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 two stackable cards">
<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">
- <translate translate-context="*/Signup/Title">Sign up</translate>
+ <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>
+ <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>
+ <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"></signup-form>
+ <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>
+ <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>
- <i class="external alternate icon margin-left"></i>
+ <i class="external alternate icon margin-left" />
</a>
</div>
</div>
- <div class="signup-form content" v-else>
+ <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>
+ <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>
+ <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"></i>
- {{ podName }}
- </h1>
+ <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 class="ui header" id="description">
- <translate translate-context="Content/About/Header">About this pod</translate>
+ <h3
+ id="description"
+ class="ui header"
+ >
+ <translate translate-context="Content/About/Header">
+ About this pod
+ </translate>
</h3>
- <div v-if="shortDescription" class="sub header">
+ <div
+ v-if="shortDescription"
+ class="sub header"
+ >
{{ shortDescription }}
</div>
<p v-else>
- <translate translate-context="Content/About/Paragraph">No description available.</translate>
+ <translate translate-context="Content/About/Paragraph">
+ No description available.
+ </translate>
</p>
<template v-if="stats">
@@ -84,54 +134,89 @@
<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>
+ <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>
+ <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
+ 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">
+ <router-link
+ to="/"
+ class="ui card"
+ >
<div class="content">
- <h3 class="ui header" id="description">
- <translate translate-context="Content/About/Header">Browse public content</translate>
+ <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>
+ <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">
+ <a
+ href="https://funkwhale.audio/#get-started"
+ class="ui card"
+ >
<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>
- <i class="external alternate icon margin-left"></i>
+ <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">
+ <a
+ href="https://funkwhale.audio/apps"
+ class="ui card"
+ >
<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>
- <i class="external alternate icon margin-left"></i>
+ <i class="external alternate icon margin-left" />
</h3>
<p>
<translate translate-context="Content/About/Paragraph">Use Funkwhale on other devices with our apps.</translate>
@@ -140,9 +225,14 @@
</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"></i>
+ <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>
@@ -152,37 +242,37 @@
</template>
<script>
-import { mapState } from "vuex"
+import { mapState } from 'vuex'
import _ from '@/lodash'
import showdown from 'showdown'
-import {humanSize} from '@/filters'
+import { humanSize } from '@/filters'
-import SignupForm from "@/components/auth/SignupForm"
-import LogoText from "@/components/LogoText"
+import SignupForm from '@/components/auth/SignupForm'
+import LogoText from '@/components/LogoText'
export default {
components: {
SignupForm,
- LogoText,
+ LogoText
},
data () {
return {
markdown: new showdown.Converter(),
- showAllowedDomains: false,
+ showAllowedDomains: false
}
},
computed: {
- ...mapState({
- nodeinfo: state => state.instance.nodeinfo,
+ ...mapState({
+ nodeinfo: state => state.instance.nodeinfo
}),
- labels() {
+ labels () {
return {
- title: this.$pgettext('Head/About/Title', "About")
+ title: this.$pgettext('Head/About/Title', 'About')
}
},
- podName() {
- return _.get(this.nodeinfo, 'metadata.nodeName') || "Funkwhale"
+ podName () {
+ return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
},
banner () {
return _.get(this.nodeinfo, 'metadata.banner')
@@ -200,13 +290,13 @@ export default {
return _.get(this.nodeinfo, 'metadata.terms')
},
stats () {
- let data = {
+ 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),
+ listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null)
}
if (data.users === null || data.artists === null) {
return
@@ -237,16 +327,16 @@ export default {
federationEnabled () {
return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
},
- headerStyle() {
+ headerStyle () {
if (!this.banner) {
- return ""
+ return ''
}
return (
- "background-image: url(" +
- this.$store.getters["instance/absoluteUrl"](this.banner) +
- ")"
+ 'background-image: url(' +
+ this.$store.getters['instance/absoluteUrl'](this.banner) +
+ ')'
)
- },
+ }
}
}
</script>
diff --git a/front/src/components/AboutPod.vue b/front/src/components/AboutPod.vue
index ecc3ec76ea43c0f31908374bb72c6697b6b1924a..085212e26fac046d11165c239d5e74a17f031a9e 100644
--- a/front/src/components/AboutPod.vue
+++ b/front/src/components/AboutPod.vue
@@ -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>
<main
v-title="labels.title"
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 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>
- <i class="music icon"></i>
+ <i class="music icon" />
{{ podName }}
</h1>
</section>
@@ -18,51 +27,112 @@
<div class="about-pod-info-container">
<div class="about-pod-info-toc">
<div class="ui vertical pointing secondary menu">
- <router-link to="/about/pod" class="item">
- <translate translate-context="Content/About/Header">About this pod</translate>
+ <router-link
+ to="/about/pod"
+ class="item"
+ >
+ <translate translate-context="Content/About/Header">
+ About this pod
+ </translate>
</router-link>
- <router-link to="/about/pod#rules" class="item">
- <translate translate-context="Content/About/Header">Rules</translate>
+ <router-link
+ to="/about/pod#rules"
+ class="item"
+ >
+ <translate translate-context="Content/About/Header">
+ Rules
+ </translate>
</router-link>
- <router-link to="/about/pod#terms" class="item">
- <translate translate-context="Content/About/Header">Terms and privacy policy</translate>
+ <router-link
+ to="/about/pod#terms"
+ class="item"
+ >
+ <translate translate-context="Content/About/Header">
+ Terms and privacy policy
+ </translate>
</router-link>
- <router-link to="/about/pod#features" class="item">
- <translate translate-context="Content/About/Header">Features</translate>
+ <router-link
+ to="/about/pod#features"
+ class="item"
+ >
+ <translate translate-context="Content/About/Header">
+ Features
+ </translate>
</router-link>
- <router-link v-if="stats" to="/about/pod#statistics" class="item">
- <translate translate-context="Content/About/Header">Statistics</translate>
+ <router-link
+ v-if="stats"
+ to="/about/pod#statistics"
+ class="item"
+ >
+ <translate translate-context="Content/About/Header">
+ Statistics
+ </translate>
</router-link>
</div>
</div>
<div class="about-pod-info">
- <h2 class="ui header" id="description about-this-pod">
- <translate translate-context="Content/About/Header">About this pod</translate>
+ <h2
+ id="description about-this-pod"
+ class="ui header"
+ >
+ <translate translate-context="Content/About/Header">
+ About this pod
+ </translate>
</h2>
- <div v-html="markdown.makeHtml(longDescription)" v-if="longDescription"></div>
+ <div
+ v-if="longDescription"
+ v-html="markdown.makeHtml(longDescription)"
+ />
<p v-else>
- <translate translate-context="Content/About/Paragraph">No description available.</translate>
+ <translate translate-context="Content/About/Paragraph">
+ No description available.
+ </translate>
</p>
- <h3 class="ui header" id="rules">
- <translate translate-context="Content/About/Header">Rules</translate>
+ <h3
+ id="rules"
+ class="ui header"
+ >
+ <translate translate-context="Content/About/Header">
+ Rules
+ </translate>
</h3>
- <div v-html="markdown.makeHtml(rules)" v-if="rules"></div>
+ <div
+ v-if="rules"
+ v-html="markdown.makeHtml(rules)"
+ />
<p v-else>
- <translate translate-context="Content/About/Paragraph">No rules available.</translate>
+ <translate translate-context="Content/About/Paragraph">
+ No rules available.
+ </translate>
</p>
- <h3 class="ui header" id="terms">
- <translate translate-context="Content/About/Header">Terms and privacy policy</translate>
+ <h3
+ id="terms"
+ class="ui header"
+ >
+ <translate translate-context="Content/About/Header">
+ Terms and privacy policy
+ </translate>
</h3>
- <div v-html="markdown.makeHtml(terms)" v-if="terms"></div>
+ <div
+ v-if="terms"
+ v-html="markdown.makeHtml(terms)"
+ />
<p v-else>
- <translate translate-context="Content/About/Paragraph">No terms available.</translate>
+ <translate translate-context="Content/About/Paragraph">
+ No terms available.
+ </translate>
</p>
- <h3 class="header" id="features">
- <translate translate-context="Content/About/Header/Name">Features</translate>
+ <h3
+ id="features"
+ class="header"
+ >
+ <translate translate-context="Content/About/Header/Name">
+ Features
+ </translate>
</h3>
<div class="features-container ui two column stackable grid">
<div class="column">
@@ -70,14 +140,22 @@
<tbody>
<tr>
<td>
- <translate translate-context="*/*/*">Funkwhale version</translate>
+ <translate translate-context="*/*/*">
+ Funkwhale version
+ </translate>
</td>
- <td v-if="version" class="right aligned">
+ <td
+ v-if="version"
+ class="right aligned"
+ >
<span class="features-status ui text">
{{ version }}
</span>
</td>
- <td v-else class="right aligned">
+ <td
+ v-else
+ class="right aligned"
+ >
<span class="features-status ui text">
<translate translate-context="*/*/*">N/A</translate>
</span>
@@ -85,34 +163,50 @@
</tr>
<tr>
<td>
- <translate translate-context="*/*/*">Federation</translate>
+ <translate translate-context="*/*/*">
+ Federation
+ </translate>
</td>
- <td v-if="federationEnabled" class="right aligned">
+ <td
+ v-if="federationEnabled"
+ class="right aligned"
+ >
<span class="features-status ui text">
- <i class="check icon"></i>
+ <i class="check icon" />
<translate translate-context="*/*/*/State of feature">Enabled</translate>
</span>
</td>
- <td v-else class="right aligned">
+ <td
+ v-else
+ class="right aligned"
+ >
<span class="features-status ui text">
- <i class="x icon"></i>
+ <i class="x icon" />
<translate translate-context="*/*/*/State of feature">Disabled</translate>
</span>
</td>
</tr>
<tr>
<td>
- <translate translate-context="*/*/*">Allow-list</translate>
+ <translate translate-context="*/*/*">
+ Allow-list
+ </translate>
</td>
- <td v-if="allowListEnabled" class="right aligned">
+ <td
+ v-if="allowListEnabled"
+ class="right aligned"
+ >
<span class="features-status ui text">
- <i class="check icon"></i>
+ <i class="check icon" />
<translate translate-context="*/*/*/State of feature">Enabled</translate>
</span>
</td>
- <td v-else class="right aligned">
+ <td
+ v-else
+ class="right aligned"
+ >
<span class="features-status ui text">
- <i class="x icon"></i>
+ <i class="x icon" />
<translate translate-context="*/*/*/State of feature">Disabled</translate>
</span>
</td>
@@ -125,48 +219,72 @@
<tbody>
<tr>
<td>
- <translate translate-context="*/*/*">Anonymous access</translate>
+ <translate translate-context="*/*/*">
+ Anonymous access
+ </translate>
</td>
- <td v-if="anonymousCanListen" class="right aligned">
+ <td
+ v-if="anonymousCanListen"
+ class="right aligned"
+ >
<span class="features-status ui text">
- <i class="check icon"></i>
+ <i class="check icon" />
<translate translate-context="*/*/*/State of feature">Enabled</translate>
</span>
</td>
- <td v-else class="right aligned">
+ <td
+ v-else
+ class="right aligned"
+ >
<span class="features-status ui text">
- <i class="x icon"></i>
+ <i class="x icon" />
<translate translate-context="*/*/*/State of feature">Disabled</translate>
</span>
</td>
</tr>
<tr>
<td>
- <translate translate-context="*/*/*">Registrations</translate>
+ <translate translate-context="*/*/*">
+ Registrations
+ </translate>
</td>
- <td v-if="openRegistrations" class="right aligned">
+ <td
+ v-if="openRegistrations"
+ class="right aligned"
+ >
<span class="features-status ui text">
- <i class="check icon"></i>
+ <i class="check icon" />
<translate translate-context="*/*/*/State of registrations">Open</translate>
</span>
</td>
- <td v-else class="right aligned">
+ <td
+ v-else
+ class="right aligned"
+ >
<span class="features-status ui text">
- <i class="x icon"></i>
+ <i class="x icon" />
<translate translate-context="*/*/*/State of registrations">Closed</translate>
</span>
</td>
</tr>
<tr>
<td>
- <translate translate-context="*/*/*">Upload quota</translate>
+ <translate translate-context="*/*/*">
+ Upload quota
+ </translate>
</td>
- <td v-if="defaultUploadQuota" class="right aligned">
+ <td
+ v-if="defaultUploadQuota"
+ class="right aligned"
+ >
<span class="features-status ui text">
{{ defaultUploadQuota * 1000 * 1000 | humanSize }}
</span>
</td>
- <td v-else class="right aligned">
+ <td
+ v-else
+ class="right aligned"
+ >
<span class="features-status ui text">
<translate translate-context="*/*/*">N/A</translate>
</span>
@@ -178,69 +296,132 @@
</div>
<template v-if="stats">
- <h3 class="header" id="statistics">
- <translate translate-context="Content/About/Header">Statistics</translate>
+ <h3
+ id="statistics"
+ class="header"
+ >
+ <translate translate-context="Content/About/Header">
+ Statistics
+ </translate>
</h3>
<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="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>
+ <br>
+ <translate
+ translate-context="Content/About/*"
+ :translate-n="parseInt(stats.hours)"
+ translate-plural="hours of music"
+ >hour of music</translate>
</span>
</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="ui big text"><strong>{{ stats.artists.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
- <br />
- <translate translate-context="Content/About/*" :translate-n="stats.artists" translate-plural="artists">artist</translate>
+ <br>
+ <translate
+ translate-context="Content/About/*"
+ :translate-n="stats.artists"
+ translate-plural="artists"
+ >artist</translate>
</span>
</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="ui big text"><strong>{{ stats.albums.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
- <br />
- <translate translate-context="Content/About/*" :translate-n="stats.albums" translate-plural="albums">album</translate>
+ <br>
+ <translate
+ translate-context="Content/About/*"
+ :translate-n="stats.albums"
+ translate-plural="albums"
+ >album</translate>
</span>
</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="ui big text"><strong>{{ stats.tracks.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
- <br />
- <translate translate-context="Content/About/*" :translate-n="stats.tracks" translate-plural="tracks">track</translate>
+ <br>
+ <translate
+ translate-context="Content/About/*"
+ :translate-n="stats.tracks"
+ translate-plural="tracks"
+ >track</translate>
</span>
</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="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>
+ <br>
+ <translate
+ translate-context="Content/About/*"
+ :translate-n="stats.users"
+ translate-plural="active users"
+ >active user</translate>
</span>
</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="ui big text"><strong>{{ stats.listenings.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
- <br />
- <translate translate-context="Content/About/*" :translate-n="stats.listenings" translate-plural="listenings">listening</translate>
+ <br>
+ <translate
+ translate-context="Content/About/*"
+ :translate-n="stats.listenings"
+ translate-plural="listenings"
+ >listening</translate>
</span>
</div>
</div>
</template>
<template v-if="contactEmail">
- <h3 class="ui header" id="contact">
- <translate translate-context="Content/About/Header">Contact</translate>
+ <h3
+ id="contact"
+ class="ui header"
+ >
+ <translate translate-context="Content/About/Header">
+ Contact
+ </translate>
</h3>
- <a v-if="contactEmail" :href="`mailto:${contactEmail}`">
- <translate translate-context="Content/About/Email" :translate-params="{ email: contactEmail }">Send us an email: {{ contactEmail }}</translate>
+ <a
+ v-if="contactEmail"
+ :href="`mailto:${contactEmail}`"
+ >
+ <translate
+ translate-context="Content/About/Email"
+ :translate-params="{ email: contactEmail }"
+ >Send us an email: {{ contactEmail }}</translate>
</a>
</template>
- <div class="ui hidden divider"></div>
+ <div class="ui hidden divider" />
<div class="ui fluid horizontally fitted basic clearing segment container">
- <router-link to="/about" class="ui left floated basic secondary button">
- <i class="icon arrow left"></i>
- <translate translate-context="Content/About/Paragraph">Introduction</translate>
+ <router-link
+ to="/about"
+ class="ui left floated basic secondary button"
+ >
+ <i class="icon arrow left" />
+ <translate translate-context="Content/About/Paragraph">
+ Introduction
+ </translate>
</router-link>
</div>
</div>
@@ -252,34 +433,29 @@
</template>
<script>
-import { mapState } from "vuex"
+import { mapState } from 'vuex'
import _ from '@/lodash'
import showdown from 'showdown'
-import SignupForm from "@/components/auth/SignupForm"
-
export default {
- components: {
- SignupForm,
- },
data () {
return {
markdown: new showdown.Converter(),
- showAllowedDomains: false,
+ showAllowedDomains: false
}
},
computed: {
- ...mapState({
- nodeinfo: state => state.instance.nodeinfo,
+ ...mapState({
+ nodeinfo: state => state.instance.nodeinfo
}),
- labels() {
+ labels () {
return {
- title: this.$pgettext('Head/About/Title', "About")
+ title: this.$pgettext('Head/About/Title', 'About')
}
},
- podName() {
- return _.get(this.nodeinfo, 'metadata.nodeName') || "Funkwhale"
+ podName () {
+ return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
},
banner () {
return _.get(this.nodeinfo, 'metadata.banner')
@@ -297,13 +473,13 @@ export default {
return _.get(this.nodeinfo, 'metadata.terms')
},
stats () {
- let data = {
+ 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),
+ listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null)
}
if (data.users === null || data.artists === null) {
return
@@ -334,19 +510,19 @@ export default {
federationEnabled () {
return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
},
- headerStyle() {
+ headerStyle () {
if (!this.banner) {
- return ""
+ return ''
}
return (
- "background-image: url(" +
- this.$store.getters["instance/absoluteUrl"](this.banner) +
- ")"
+ 'background-image: url(' +
+ this.$store.getters['instance/absoluteUrl'](this.banner) +
+ ')'
)
},
onDesktop () {
- if(window.innerWidth > 800) return true;
- return false;
+ if (window.innerWidth > 800) return true
+ return false
}
}
}