Verified Commit 5936dfc2 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Merge branch 'develop' of dev.funkwhale.audio:funkwhale/funkwhale into develop

parents ef50927f 1fec0809
Redesign of the landing and about pages (#872)
......@@ -62,6 +62,39 @@ For more information about this feature, please check out our documentation:
- `User documentation <https://docs.funkwhale.audio/users/account.html>`_
Landing and about page redesign [Manual action suggested]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
In this release, we've completely redesigned the landing and about page, by making it more useful and adapted to your pod
configuration. Among other things, the landing page will now include:
- your pod and an excerpt from your pod's description
- your pod banner image, if any
- your contact email, if any
- the login form
- the signup form (if registrations are open on your pod)
- some basic statistics about your pod
- a widget including recently uploaded albums, if anonymous access is enabled
The landing page will still include some information about Funkwhale, but in a less intrusive and proeminent way than before.
Additionally, the about page now includes:
- your pod name, description, rules and terms
- your pod banner image, if any
- your contact email, if any
- comprehensive statistics about your pod
- some info about your pod configuration, such as registration and federation status or the default upload quota for new users
With this redesign, we've added a handful of additional pod settings:
- Pod banner image
- Contact email
- Rules
- Terms of service
We recommend taking a few moments to fill these accordingly to your needs, by visiting ``/manage/settings``.
Allow-list to restrict federation to trusted domains
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
......
......@@ -62,13 +62,12 @@ export default {
data () {
return {
bridge: null,
nodeinfo: null,
instanceUrl: null,
showShortcutsModal: false,
showSetInstanceModal: false,
}
},
created () {
async created () {
this.openWebsocket()
let self = this
if (!this.$store.state.ui.selectedLanguage) {
......@@ -78,7 +77,12 @@ export default {
// used to redraw ago dates every minute
self.$store.commit('ui/computeLastDate')
}, 1000 * 60)
if (!this.$store.state.instance.instanceUrl) {
const urlParams = new URLSearchParams(window.location.search);
const serverUrl = urlParams.get('_server')
if (serverUrl) {
this.$store.commit('instance/instanceUrl', serverUrl)
}
else if (!this.$store.state.instance.instanceUrl) {
// we have several way to guess the API server url. By order of precedence:
// 1. use the url provided in settings.json, if any
// 2. use the url specified when building via VUE_APP_INSTANCE_URL
......@@ -89,9 +93,9 @@ export default {
// needed to trigger initialization of axios
this.$store.commit('instance/instanceUrl', this.$store.state.instance.instanceUrl)
}
await this.fetchNodeInfo()
this.$store.dispatch('auth/check')
this.$store.dispatch('instance/fetchSettings')
this.fetchNodeInfo()
this.$store.commit('ui/addWebsocketEventHandler', {
eventName: 'inbox.item_added',
id: 'sidebarCount',
......@@ -152,14 +156,11 @@ export default {
this.$store.commit('ui/incrementNotifications', {type: 'pendingReviewEdits', value: event.pending_review_count})
},
incrementPendingReviewReportsCountInSidebar (event) {
console.log('HELLO', event)
this.$store.commit('ui/incrementNotifications', {type: 'pendingReviewReports', value: event.unresolved_count})
},
fetchNodeInfo () {
let self = this
axios.get('instance/nodeinfo/2.0/').then(response => {
self.nodeinfo = response.data
})
async fetchNodeInfo () {
let response = await axios.get('instance/nodeinfo/2.0/')
this.$store.commit('instance/nodeinfo', response.data)
},
autodetectLanguage () {
let userLanguage = navigator.language || navigator.userLanguage
......@@ -235,7 +236,8 @@ export default {
},
computed: {
...mapState({
messages: state => state.ui.messages
messages: state => state.ui.messages,
nodeinfo: state => state.instance.nodeinfo,
}),
...mapGetters({
currentTrack: 'queue/currentTrack'
......
<template>
<main class="main pusher" v-title="labels.title">
<section class="ui vertical center aligned stripe segment">
<div class="ui text container">
<h1 class="ui huge header">
<span v-translate="{instance: instance.name.value}" translate-context="Content/About/Title/Short, Noun" v-if="instance.name.value" :translate-params="{instance: instance.name.value}">
About %{ instance }
</span>
<translate translate-context="Content/About/Title" v-else>About this instance</translate>
<main class="main pusher">
<section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
<div class="segment-content">
<h1 class="ui center aligned large header">
<translate translate-context="Content/Home/Header"
:translate-params="{podName: podName}">
About %{ podName }
</translate>
<div v-if="shortDescription" class="sub header">
{{ shortDescription }}
</div>
</h1>
<stats></stats>
</div>
</section>
<section class="ui vertical stripe segment">
<div
class="ui middle aligned stackable text container">
<p
v-if="!instance.short_description.value && !instance.long_description.value"><translate translate-context="Content/About/Paragraph">Unfortunately, the owners of this instance did not yet take the time to complete this page.</translate></p>
<router-link
class="ui button"
v-if="$store.state.auth.availablePermissions['settings']"
:to="{path: '/manage/settings', hash: 'instance'}">
<i class="pencil icon"></i><translate translate-context="Content/Settings/Button.Label/Verb">Edit instance info</translate>
</router-link>
<div class="ui hidden divider"></div>
</div>
<div
v-if="instance.short_description.value"
class="ui middle aligned stackable text container">
<p>{{ instance.short_description.value }}</p>
</div>
<div
v-if="markdown && instance.long_description.value"
class="ui middle aligned stackable text container"
v-html="markdown.makeHtml(instance.long_description.value)">
<div class="ui container">
<div class="ui mobile reversed stackable grid">
<div class="ten wide column">
<div class="ui text container">
<h3 class="ui header" id="description">
<translate translate-context="Content/About/Header">About this pod</translate>
</h3>
<div v-html="markdown.makeHtml(longDescription)" v-if="longDescription"></div>
<p v-else>
<translate translate-context="Content/Home/Paragraph">No description available.</translate>
</p>
<h3 class="ui header" id="rules">
<translate translate-context="Content/About/Header">Rules</translate>
</h3>
<div v-html="markdown.makeHtml(rules)" v-if="rules"></div>
<p v-else>
<translate translate-context="Content/Home/Paragraph">No rules available.</translate>
</p>
<h3 class="ui header" id="terms">
<translate translate-context="Content/About/Header">Terms and privacy policy</translate>
</h3>
<div v-html="markdown.makeHtml(terms)" v-if="terms"></div>
<p v-else>
<translate translate-context="Content/Home/Paragraph">No terms available.</translate>
</p>
</div>
</div>
<div class="six wide column">
<div class="ui raised segment">
<h3 class="ui header">
<translate translate-context="Content/About/Header">Contents</translate>
</h3>
<div class="ui list">
<div class="ui item">
<a href="#description">
<translate translate-context="Content/About/Header">About this pod</translate>
</a>
</div>
<div class="ui item">
<a href="#rules">
<translate translate-context="Content/About/Header">Rules</translate>
</a>
</div>
<div class="ui item">
<a href="#terms">
<translate translate-context="Content/About/Header">Terms and privacy policy</translate>
</a>
</div>
</div>
<template v-if="contactEmail">
<h3 class="header">
<translate translate-context="Content/Home/Header/Name">Contact</translate>
</h3>
<a :href="`mailto:${contactEmail}`">{{ contactEmail }}</a>
</template>
<h3 class="header">
<translate translate-context="Content/About/Header/Name">Pod configuration</translate>
</h3>
<table class="ui very basic table">
<tbody>
<tr v-if="version">
<td>
<translate translate-context="*/*/*">Funkwhale version</translate>
</td>
<td>
{{ version }}
</td>
</tr>
<tr>
<td>
<translate translate-context="*/*/*">Registrations</translate>
</td>
<td v-if="openRegistrations">
<i class="check icon"></i>
<translate translate-context="*/*/*/State of registrations">Open</translate>
</td>
<td v-else>
<i class="x icon"></i>
<translate translate-context="*/*/*/State of registrations">Closed</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="*/*/*">Upload quota</translate>
</td>
<td v-if="defaultUploadQuota">
{{ defaultUploadQuota * 1000 * 1000 | humanSize }}
</td>
<td v-else>
<translate translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="*/*/*">Federation</translate>
</td>
<td v-if="federationEnabled">
<i class="check icon"></i>
<translate translate-context="*/*/*/State of feature">Enabled</translate>
</td>
<td v-else>
<i class="x icon"></i>
<translate translate-context="*/*/*/State of feature">Disabled</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="*/*/*">Anonymous access</translate>
</td>
<td v-if="anonymousCanListen">
<i class="check icon"></i>
<translate translate-context="*/*/*/State of feature">Enabled</translate>
</td>
<td v-else>
<i class="x icon"></i>
<translate translate-context="*/*/*/State of feature">Disabled</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="*/*/*">Allow-list</translate>
</td>
<td v-if="allowListEnabled">
<i class="check icon"></i>
<translate translate-context="*/*/*/State of feature">Enabled</translate>
</td>
<td v-else>
<i class="x icon"></i>
<translate translate-context="*/*/*/State of feature">Disabled</translate>
</td>
</tr>
<tr v-if="allowListDomains">
<td>
<translate translate-context="*/*/*">Allowed domains</translate>
</td>
<td>
<translate :translate-n="allowListDomains.length" translate-plural="%{ count } allowed domains" :translate-params="{count: allowListDomains.length}" translate-context="*/*/*">%{ count } allowed domains</translate>
<br>
<a @click.prevent="showAllowedDomains = !showAllowedDomains">
<translate v-if="showAllowedDomains" key="1" translate-context="*/*/*/Verb">Hide</translate>
<translate v-else key="2" translate-context="*/*/*/Verb">Show</translate>
</a>
<ul class="ui list" v-if="showAllowedDomains">
<li v-for="domain in allowListDomains" :key="domain">
<a :href="`https://${domain}`" target="_blank" rel="noopener">{{ domain }}</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<template v-if="stats">
<h3 class="header">
<translate translate-context="Content/Home/Header">Statistics</translate>
</h3>
<p>
<i class="user grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
</p>
<p>
<i class="music grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
</p>
<p v-if="stats.artists">
<i class="users grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.artists.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.artists" translate-plural="%{ count } artists">%{ count } artists</translate>
</p>
<p v-if="stats.albums">
<i class="headphones grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.albums.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.albums" translate-plural="%{ count } albums">%{ count } albums</translate>
</p>
<p v-if="stats.tracks">
<i class="file grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.tracks.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.tracks" translate-plural="%{ count } tracks">%{ count } tracks</translate>
</p>
<p v-if="stats.listenings">
<i class="play grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.listenings.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.listenings" translate-plural="%{ count } listenings">%{ count } listenings</translate>
</p>
</template>
</div>
</div>
</div>
</div>
</section>
</main>
......@@ -40,37 +199,122 @@
<script>
import { mapState } from "vuex"
import Stats from "@/components/instance/Stats"
import _ from '@/lodash'
import showdown from 'showdown'
export default {
components: {
Stats
},
data () {
return {
markdown: null
markdown: new showdown.Converter(),
showAllowedDomains: false,
}
},
created () {
this.$store.dispatch("instance/fetchSettings")
let self = this
import('showdown').then(module => {
self.markdown = new module.default.Converter()
})
},
computed: {
...mapState({
instance: state => state.instance.settings.instance
...mapState({
nodeinfo: state => state.instance.nodeinfo,
}),
labels() {
return {
title: this.$pgettext('Content/About/Title', "About this instance")
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 () {
let 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 _.get(this.nodeinfo, 'metadata.defaultUploadQuota')
},
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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.ui.list .list.icon {
padding: 0;
}
h1.header, h1 .sub.header {
text-shadow: 0 2px 0 rgba(0,0,0,.8);
color: #fff !important;
}
h1.ui.header {
font-size: 3em;
}
h1.ui.header .sub.header {
font-size: 0.8em;
}
.main.pusher {
margin-top: 0;
min-height: 10em;
}
section.segment.head {
padding: 8em 3em;
background: linear-gradient(90deg, rgba(40,88,125,1) 0%, rgba(64,130,180,1) 100%);
background-repeat: no-repeat;
background-size: cover;
}
#pod {
font-size: 110%;
display: block;
}
</style>
<template>
<main class="main pusher" v-title="labels.title">
<section class="ui vertical center aligned stripe segment">
<div class="ui text container">
<h1 class="ui huge header">
<translate translate-context="Content/Home/Title/Verb">Welcome to Funkwhale</translate>
<section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
<div class="segment-content">
<h1 class="ui center aligned large header">
<translate translate-context="Content/Home/Header"
:translate-params="{podName: podName}">
Welcome to %{ podName }!
</translate>
<div v-if="shortDescription" class="sub header">
{{ shortDescription }}
</div>
</h1>
<p><translate translate-context="Content/Home/Title">We think listening to music should be simple.</translate></p>
<router-link class="ui icon button" to="/about">
<i class="info icon"></i>
<translate translate-context="Content/Home/Button.Label/Verb">Learn more about this instance</translate>
</router-link>
<router-link class="ui icon teal button" to="/library">
<translate translate-context="Content/Home/Button.Label/Verb">Get me to the library</translate>
<i class="right arrow icon"></i>
</router-link>
</div>
</section>
<section class="ui vertical stripe segment">
<div class="ui middle aligned stackable text container">
<div class="ui grid">
<div class="row">
<div class="eight wide left floated column">
<h2 class="ui header">
<translate translate-context="Content/Home/Title">Why funkwhale?</translate>
</h2>
<p><translate translate-context="Content/Home/Paragraph">That's simple: we loved Grooveshark and we want to build something even better.</translate></p>
</div>
<div class="four wide left floated column">
<img class="ui medium image" src="../assets/logo/logo.png" />
<div class="ui stackable grid">
<div class="ten wide column">
<h3 class="header">
<translate translate-context="Content/Home/Header">About this Funkwhale pod</translate>
</h3>
<div class="ui raised segment" id="pod">
<div class="ui stackable grid">
<div class="eight wide column">
<p v-if="!truncatedDescription">
<translate translate-context="Content/Home/Paragraph">No description available.</translate>
</p>
<template v-if="truncatedDescription || rules">
<div v-if="truncatedDescription" v-html="truncatedDescription"></div>
<div v-if="truncatedDescription" class="ui hidden divider"></div>
<div class="ui relaxed list">
<div class="item" v-if="truncatedDescription">
<i class="arrow right grey icon"></i>
<div class="content">
<router-link class="ui link" :to="{name: 'about'}">
<translate translate-context="Content/Home/Link">Learn more</translate>
</router-link>
</div>
</div>
<div class="item" v-if="rules">
<i class="book open grey icon"></i>
<div class="content">
<router-link class="ui link" v-if="rules" :to="{name: 'about', hash: '#rules'}">
<translate translate-context="Content/Home/Link">Server rules</translate>
</router-link>
</div>
</div>
</div>
</template>
</div>
<div class="eight wide column">
<template v-if="stats">
<h3 class="sub header">
<translate translate-context="Content/Home/Header">Statistics</translate>
</h3>
<p>
<i class="user grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
</p>
<p>
<i class="music grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
</p>
</template>
<template v-if="contactEmail">
<h3 class="sub header">
<translate translate-context="Content/Home/Header/Name">Contact</translate>
</h3>
<i class="at grey icon"></i>
<a :href="`mailto:${contactEmail}`">{{ contactEmail }}</a>
</template>
</div>
</div>
</div>
</div>
</div>
<div class="ui middle aligned stackable text container">
<div class="ui hidden divider"></div>
<h2 class="ui header">
<translate translate-context="Content/Home/Title">Unlimited music</translate>
</h2>
<p><translate translate-context="Content/Home/Paragraph">Funkwhale is designed to make it easy to listen to music you like, or to discover new artists.</translate></p>
<div class="ui list">
<div class="item">
<i class="sound icon"></i>
<div class="content">
<translate translate-context="Content/Home/List item/Verb">Click once, listen for hours using built-in radios</translate>
</div>
</div>
<div class="item">
<i class="heart icon"></i>
<div class="content">
<translate translate-context="Content/Home/List item/Verb">Keep track of your favorite songs</translate>
</div>
</div>
<div class="item">
<i class="list icon"></i>
<div class="content">
<translate translate-context="Content/Home/List item">Playlists? We've got them</translate>
</div>
</div>
<div class="six wide column">