Update all components

This commit is contained in:
Ciarán Ainsworth 2022-09-17 02:14:35 +00:00 committed by Kasper Seweryn
parent 592e53486f
commit ef757e1854
87 changed files with 2252 additions and 1310 deletions

View File

@ -13,7 +13,7 @@ const nodeinfo = computed(() => store.state.instance.nodeinfo)
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('About') title: t('components.About.title')
})) }))
const podName = computed(() => get(nodeinfo.value, 'metadata.nodeName') ?? 'Funkwhale') const podName = computed(() => get(nodeinfo.value, 'metadata.nodeName') ?? 'Funkwhale')
@ -67,10 +67,10 @@ const headerStyle = computed(() => {
<div class="column" /> <div class="column" />
</div> </div>
<h2 class="header"> <h2 class="header">
A social platform to enjoy and share music {{ $t('components.About.funkwhaleHeader') }}
</h2> </h2>
<p> <p>
Funkwhale is a community-driven project that lets you listen and share music and audio within a decentralized, open network. {{ $t('components.About.funkwhaleDescription') }}
</p> </p>
</div> </div>
</div> </div>
@ -84,14 +84,14 @@ const headerStyle = computed(() => {
class="signup-form content" class="signup-form content"
> >
<h3 class="header"> <h3 class="header">
Sign up {{ $t('components.About.signupHeader') }}
</h3> </h3>
<template v-if="openRegistrations"> <template v-if="openRegistrations">
<p> <p>
Sign up now to keep a track of your favorites, create playlists, discover new content and much more! {{ $t('components.About.signupDescription') }}
</p> </p>
<p v-if="defaultUploadQuota"> <p v-if="defaultUploadQuota">
Users on this pod also get %{ quota } of free storage to upload their own content! {{ $t('components.About.quotaDescription', {quota: defaultUploadQuota}) }}
</p> </p>
<signup-form <signup-form
button-classes="success" button-classes="success"
@ -100,7 +100,7 @@ const headerStyle = computed(() => {
</template> </template>
<div v-else> <div v-else>
<p> <p>
Registrations are closed on this pod. You can signup on another pod using the link below. {{ $t('components.About.registrationsClosedHelp') }}
</p> </p>
<a <a
@ -108,7 +108,7 @@ const headerStyle = computed(() => {
rel="noopener" rel="noopener"
href="https://funkwhale.audio/#get-started" href="https://funkwhale.audio/#get-started"
> >
Find another pod {{ $t('components.About.findOtherPod') }}
&nbsp;<i class="external alternate icon" /> &nbsp;<i class="external alternate icon" />
</a> </a>
</div> </div>
@ -118,13 +118,13 @@ const headerStyle = computed(() => {
class="signup-form content" class="signup-form content"
> >
<h3 class="header"> <h3 class="header">
Sign up {{ $t('components.About.signupHeader') }}
<div class="ui positive message"> <div class="ui positive message">
<div class="header"> <div class="header">
You're already signed in! {{ $t('components.About.alreadyLoggedIn') }}
</div> </div>
<p> <p>
Hello {{ $store.state.auth.username }} {{ $t('components.About.greetingMessage', {username: $store.state.auth.username}) }}
</p> </p>
</div> </div>
</h3> </h3>
@ -145,7 +145,7 @@ const headerStyle = computed(() => {
id="description" id="description"
class="ui header" class="ui header"
> >
About this pod {{ $t('components.About.aboutPodHeader') }}
</h3> </h3>
<div <div
v-if="shortDescription" v-if="shortDescription"
@ -154,7 +154,7 @@ const headerStyle = computed(() => {
{{ shortDescription }} {{ shortDescription }}
</div> </div>
<p v-else> <p v-else>
No description available. {{ $t('components.About.noDescription') }}
</p> </p>
<template v-if="stats"> <template v-if="stats">
@ -164,14 +164,14 @@ const headerStyle = computed(() => {
<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>
{{ $t('active user | active users', stats.users) }} {{ $t('components.About.activeUsers', {users: stats.users}) }}
</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>{{ stats.hours.toLocaleString($store.state.ui.momentLocale) }}</strong></span> <span class="ui big text"><strong>{{ stats.hours.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
<br> <br>
{{ $t('hour of music | hours of music', stats.hours) }} {{ $t('components.About.hoursOfMusic', {hours: stats.hours}) }}
</span> </span>
</div> </div>
</div> </div>
@ -182,7 +182,7 @@ const headerStyle = computed(() => {
to="/about/pod" to="/about/pod"
class="ui fluid basic secondary button" class="ui fluid basic secondary button"
> >
Learn More {{ $t('components.About.learnMoreLink') }}
</router-link> </router-link>
</div> </div>
</div> </div>
@ -201,10 +201,10 @@ const headerStyle = computed(() => {
id="description" id="description"
class="ui header" class="ui header"
> >
Browse public content {{ $t('components.About.publicContentHeader') }}
</h3> </h3>
<p> <p>
Listen to public albums and playlists shared on this pod. {{ $t('components.About.publicContentDescription') }}
</p> </p>
</div> </div>
</router-link> </router-link>
@ -218,11 +218,11 @@ const headerStyle = computed(() => {
id="description" id="description"
class="ui header" class="ui header"
> >
Find another pod {{ $t('components.About.findOtherPod') }}
&nbsp;<i class="external alternate icon" /> &nbsp;<i class="external alternate icon" />
</h3> </h3>
<p> <p>
Listen to public albums and playlists shared on this pod. {{ $t('components.About.publicContentDescription') }}
</p> </p>
</div> </div>
</a> </a>
@ -236,11 +236,11 @@ const headerStyle = computed(() => {
id="description" id="description"
class="ui header" class="ui header"
> >
Find an app {{ $t('components.About.findAppHeader') }}
&nbsp;<i class="external alternate icon" /> &nbsp;<i class="external alternate icon" />
</h3> </h3>
<p> <p>
Use Funkwhale on other devices with our apps. {{ $t('components.About.findAppDescription') }}
</p> </p>
</div> </div>
</a> </a>
@ -250,7 +250,7 @@ const headerStyle = computed(() => {
to="/about/pod" to="/about/pod"
class="ui right floated basic secondary button" class="ui right floated basic secondary button"
> >
About this pod {{ $t('components.About.aboutPodHeader') }}
<i class="icon arrow right" /> <i class="icon arrow right" />
</router-link> </router-link>
</div> </div>

View File

@ -21,7 +21,7 @@ fetchData()
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('About') title: t('components.AboutPod.title')
})) }))
const podName = computed(() => get(nodeinfo.value, 'metadata.nodeName') || 'Funkwhale') const podName = computed(() => get(nodeinfo.value, 'metadata.nodeName') || 'Funkwhale')
@ -99,32 +99,32 @@ const headerStyle = computed(() => {
to="/about/pod" to="/about/pod"
class="item" class="item"
> >
About this pod {{ $t('components.AboutPod.aboutPod') }}
</router-link> </router-link>
<router-link <router-link
to="/about/pod#rules" to="/about/pod#rules"
class="item" class="item"
> >
Rules {{ $t('components.AboutPod.rules') }}
</router-link> </router-link>
<router-link <router-link
to="/about/pod#terms" to="/about/pod#terms"
class="item" class="item"
> >
Terms and privacy policy {{ $t('components.AboutPod.termsAndPrivacy') }}
</router-link> </router-link>
<router-link <router-link
to="/about/pod#features" to="/about/pod#features"
class="item" class="item"
> >
Features {{ $t('components.AboutPod.features') }}
</router-link> </router-link>
<router-link <router-link
v-if="stats" v-if="stats"
to="/about/pod#statistics" to="/about/pod#statistics"
class="item" class="item"
> >
Statistics {{ $t('components.AboutPod.statistics') }}
</router-link> </router-link>
</div> </div>
</div> </div>
@ -134,49 +134,49 @@ const headerStyle = computed(() => {
id="description about-this-pod" id="description about-this-pod"
class="ui header" class="ui header"
> >
About this pod {{ $t('components.AboutPod.aboutPod') }}
</h2> </h2>
<sanitized-html <sanitized-html
v-if="longDescription" v-if="longDescription"
:html="longDescription" :html="longDescription"
/> />
<p v-else> <p v-else>
No description available. {{ $t('components.AboutPod.noDescription') }}
</p> </p>
<h3 <h3
id="rules" id="rules"
class="ui header" class="ui header"
> >
Rules {{ $t('components.AboutPod.rules') }}
</h3> </h3>
<sanitized-html <sanitized-html
v-if="rules" v-if="rules"
:html="rules" :html="rules"
/> />
<p v-else> <p v-else>
No rules available. {{ $t('components.AboutPod.noRules') }}
</p> </p>
<h3 <h3
id="terms" id="terms"
class="ui header" class="ui header"
> >
Terms and privacy policy {{ $t('components.AboutPod.termsAndPrivacy') }}
</h3> </h3>
<sanitized-html <sanitized-html
v-if="terms" v-if="terms"
:html="terms" :html="terms"
/> />
<p v-else> <p v-else>
No terms available. {{ $t('components.AboutPod.noTerms') }}
</p> </p>
<h3 <h3
id="features" id="features"
class="header" class="header"
> >
Features {{ $t('components.AboutPod.features') }}
</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">
@ -184,7 +184,7 @@ const headerStyle = computed(() => {
<tbody> <tbody>
<tr> <tr>
<td> <td>
Funkwhale version {{ $t('components.AboutPod.funkwhaleVersion') }}
</td> </td>
<td <td
v-if="version" v-if="version"
@ -199,13 +199,13 @@ const headerStyle = computed(() => {
class="right aligned" class="right aligned"
> >
<span class="features-status ui text"> <span class="features-status ui text">
N/A {{ $t('components.AboutPod.notApplicable') }}
</span> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Federation {{ $t('components.AboutPod.federation') }}
</td> </td>
<td <td
v-if="federationEnabled" v-if="federationEnabled"
@ -213,7 +213,7 @@ const headerStyle = computed(() => {
> >
<span class="features-status ui text"> <span class="features-status ui text">
<i class="check icon" /> <i class="check icon" />
Enabled {{ $t('components.AboutPod.enabled') }}
</span> </span>
</td> </td>
<td <td
@ -222,13 +222,13 @@ const headerStyle = computed(() => {
> >
<span class="features-status ui text"> <span class="features-status ui text">
<i class="x icon" /> <i class="x icon" />
Disabled {{ $t('components.AboutPod.disabled') }}
</span> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Allow-list {{ $t('components.AboutPod.allowList') }}
</td> </td>
<td <td
v-if="allowListEnabled" v-if="allowListEnabled"
@ -236,7 +236,7 @@ const headerStyle = computed(() => {
> >
<span class="features-status ui text"> <span class="features-status ui text">
<i class="check icon" /> <i class="check icon" />
Enabled {{ $t('components.AboutPod.enabled') }}
</span> </span>
</td> </td>
<td <td
@ -245,7 +245,7 @@ const headerStyle = computed(() => {
> >
<span class="features-status ui text"> <span class="features-status ui text">
<i class="x icon" /> <i class="x icon" />
Disabled {{ $t('components.AboutPod.disabled') }}
</span> </span>
</td> </td>
</tr> </tr>
@ -257,7 +257,7 @@ const headerStyle = computed(() => {
<tbody> <tbody>
<tr> <tr>
<td> <td>
Anonymous access {{ $t('components.AboutPod.anonymousAccess') }}
</td> </td>
<td <td
v-if="anonymousCanListen" v-if="anonymousCanListen"
@ -265,7 +265,7 @@ const headerStyle = computed(() => {
> >
<span class="features-status ui text"> <span class="features-status ui text">
<i class="check icon" /> <i class="check icon" />
Enabled {{ $t('components.AboutPod.enabled') }}
</span> </span>
</td> </td>
<td <td
@ -274,13 +274,13 @@ const headerStyle = computed(() => {
> >
<span class="features-status ui text"> <span class="features-status ui text">
<i class="x icon" /> <i class="x icon" />
Disabled {{ $t('components.AboutPod.disabled') }}
</span> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Registrations {{ $t('components.AboutPod.registrations') }}
</td> </td>
<td <td
v-if="openRegistrations" v-if="openRegistrations"
@ -288,7 +288,7 @@ const headerStyle = computed(() => {
> >
<span class="features-status ui text"> <span class="features-status ui text">
<i class="check icon" /> <i class="check icon" />
Open {{ $t('components.AboutPod.open') }}
</span> </span>
</td> </td>
<td <td
@ -297,13 +297,13 @@ const headerStyle = computed(() => {
> >
<span class="features-status ui text"> <span class="features-status ui text">
<i class="x icon" /> <i class="x icon" />
Closed {{ $t('components.AboutPod.closed') }}
</span> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Upload quota {{ $t('components.AboutPod.uploadQuota') }}
</td> </td>
<td <td
v-if="defaultUploadQuota" v-if="defaultUploadQuota"
@ -318,7 +318,7 @@ const headerStyle = computed(() => {
class="right aligned" class="right aligned"
> >
<span class="features-status ui text"> <span class="features-status ui text">
N/A {{ $t('components.AboutPod.notApplicable') }}
</span> </span>
</td> </td>
</tr> </tr>
@ -332,7 +332,7 @@ const headerStyle = computed(() => {
id="statistics" id="statistics"
class="header" class="header"
> >
Statistics {{ $t('components.AboutPod.statistics') }}
</h3> </h3>
<div class="statistics-container"> <div class="statistics-container">
<div <div
@ -342,7 +342,7 @@ const headerStyle = computed(() => {
<span class="statistics-figure ui text"> <span class="statistics-figure ui text">
<span class="ui big text"><strong>{{ stats.hours.toLocaleString($store.state.ui.momentLocale) }}</strong></span> <span class="ui big text"><strong>{{ stats.hours.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
<br> <br>
{{ $t('hour of music | hours of music', stats.hours) }} {{ $t('components.AboutPod.hoursOfMusic', {hours: stats.hours}) }}
</span> </span>
</div> </div>
<div <div
@ -352,7 +352,7 @@ const headerStyle = computed(() => {
<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>
{{ $t('artist | artists', stats.artists) }} {{ $t('components.AboutPod.artistsCount', {artists: stats.artists}) }}
</span> </span>
</div> </div>
<div <div
@ -362,7 +362,7 @@ const headerStyle = computed(() => {
<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>
{{ $t('album | albums', stats.albums) }} {{ $t('components.AboutPod.albumsCount', {albums: stats.albums}) }}
</span> </span>
</div> </div>
<div <div
@ -372,7 +372,7 @@ const headerStyle = computed(() => {
<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>
{{ $t('track | tracks', stats.tracks) }} {{ $t('components.AboutPod.tracksCount', {tracks: stats.tracks}) }}
</span> </span>
</div> </div>
<div <div
@ -382,7 +382,7 @@ const headerStyle = computed(() => {
<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>
{{ $t('active user | active users', stats.users) }} {{ $t('components.AboutPod.activeUsers', {users: stats.users}) }}
</span> </span>
</div> </div>
<div <div
@ -392,7 +392,7 @@ const headerStyle = computed(() => {
<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>
{{ $t('listening | listenings', stats.listenings) }} {{ $t('components.AboutPod.listeningsCount', {listenings: stats.listenings}) }}
</span> </span>
</div> </div>
</div> </div>
@ -403,13 +403,13 @@ const headerStyle = computed(() => {
id="contact" id="contact"
class="ui header" class="ui header"
> >
Contact {{ $t('components.AboutPod.contactHeader') }}
</h3> </h3>
<a <a
v-if="contactEmail" v-if="contactEmail"
:href="`mailto:${contactEmail}`" :href="`mailto:${contactEmail}`"
> >
{{ $t('Send us an email: %{ contactEmail }', { contactEmail }) }} {{ $t('components.AboutPod.contactEmail', {contactEmail: contactEmail}) }}
</a> </a>
</template> </template>
@ -420,7 +420,7 @@ const headerStyle = computed(() => {
class="ui left floated basic secondary button" class="ui left floated basic secondary button"
> >
<i class="icon arrow left" /> <i class="icon arrow left" />
Introduction {{ $t('components.AboutPod.introductionLink') }}
</router-link> </router-link>
</div> </div>
</div> </div>

View File

@ -14,7 +14,7 @@ import { useRouter } from 'vue-router'
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('Home') title: t('components.Home.title')
})) }))
const store = useStore() const store = useStore()
@ -71,7 +71,7 @@ whenever(() => store.state.auth.authenticated, () => {
<div class="segment-content"> <div class="segment-content">
<h1 class="ui center aligned large header"> <h1 class="ui center aligned large header">
<span> <span>
{{ $t('Welcome to %{ podName }!', { podName }) }} {{ $t('components.Home.welcomeMessage', {podName: podName}) }}
</span> </span>
<div <div
v-if="shortDescription" v-if="shortDescription"
@ -86,7 +86,7 @@ whenever(() => store.state.auth.authenticated, () => {
<div class="ui stackable grid"> <div class="ui stackable grid">
<div class="ten wide column"> <div class="ten wide column">
<h2 class="header"> <h2 class="header">
About this Funkwhale pod {{ $t('components.Home.aboutPod') }}
</h2> </h2>
<div <div
id="pod" id="pod"
@ -95,7 +95,7 @@ whenever(() => store.state.auth.authenticated, () => {
<div class="ui stackable grid"> <div class="ui stackable grid">
<div class="eight wide column"> <div class="eight wide column">
<p v-if="!longDescription"> <p v-if="!longDescription">
No description available. {{ $t('components.Home.noDescription') }}
</p> </p>
<template v-if="longDescription || rules"> <template v-if="longDescription || rules">
<sanitized-html <sanitized-html
@ -118,7 +118,7 @@ whenever(() => store.state.auth.authenticated, () => {
class="ui link" class="ui link"
:to="{name: 'about'}" :to="{name: 'about'}"
> >
Learn more {{ $t('components.Home.learnMore') }}
</router-link> </router-link>
</div> </div>
</div> </div>
@ -133,7 +133,7 @@ whenever(() => store.state.auth.authenticated, () => {
class="ui link" class="ui link"
:to="{name: 'about', hash: '#rules'}" :to="{name: 'about', hash: '#rules'}"
> >
Server rules {{ $t('components.Home.serverRules') }}
</router-link> </router-link>
</div> </div>
</div> </div>
@ -143,20 +143,20 @@ whenever(() => store.state.auth.authenticated, () => {
<div class="eight wide column"> <div class="eight wide column">
<template v-if="stats"> <template v-if="stats">
<h3 class="sub header"> <h3 class="sub header">
Statistics {{ $t('components.Home.statistics') }}
</h3> </h3>
<p> <p>
<i class="user icon" /> <i class="user icon" />
{{ $t('%{ users } active user | %{ users } active users', stats, stats.users) }} {{ $t('components.Home.activeUsers', {users: stats.users}) }}
</p> </p>
<p> <p>
<i class="music icon" /> <i class="music icon" />
{{ $t('%{ hours } hour of music | %{ hours } hours of music', stats, stats.hours) }} {{ $t('components.Home.hoursOfMusic', {hours: stats.hours}) }}
</p> </p>
</template> </template>
<template v-if="contactEmail"> <template v-if="contactEmail">
<h3 class="sub header"> <h3 class="sub header">
Contact {{ $t('components.Home.contactHeader') }}
</h3> </h3>
<i class="at icon" /> <i class="at icon" />
<a :href="`mailto:${contactEmail}`">{{ contactEmail }}</a> <a :href="`mailto:${contactEmail}`">{{ contactEmail }}</a>
@ -179,13 +179,13 @@ whenever(() => store.state.auth.authenticated, () => {
<div class="ui stackable grid"> <div class="ui stackable grid">
<div class="four wide column"> <div class="four wide column">
<h3 class="header"> <h3 class="header">
About Funkwhale {{ $t('components.Home.aboutFunkwhale') }}
</h3> </h3>
<p> <p>
This pod runs Funkwhale, a community-driven project that lets you listen and share music and audio within a decentralized, open network. {{ $t('components.Home.funkwhaleDescription') }}
</p> </p>
<p> <p>
Funkwhale is free and developed by a friendly community of volunteers. {{ $t('components.Home.funkwhaleAddendum') }}
</p> </p>
<a <a
target="_blank" target="_blank"
@ -193,12 +193,12 @@ whenever(() => store.state.auth.authenticated, () => {
href="https://funkwhale.audio" href="https://funkwhale.audio"
> >
<i class="external alternate icon" /> <i class="external alternate icon" />
Visit funkwhale.audio {{ $t('components.Home.websiteLink') }}
</a> </a>
</div> </div>
<div class="four wide column"> <div class="four wide column">
<h3 class="header"> <h3 class="header">
Log In {{ $t('components.Home.loginHeader') }}
</h3> </h3>
<login-form <login-form
button-classes="success" button-classes="success"
@ -208,14 +208,14 @@ whenever(() => store.state.auth.authenticated, () => {
</div> </div>
<div class="four wide column"> <div class="four wide column">
<h3 class="header"> <h3 class="header">
Sign up {{ $t('components.Home.signupHeader') }}
</h3> </h3>
<template v-if="openRegistrations"> <template v-if="openRegistrations">
<p> <p>
Sign up now to keep track of your favorites, create playlists, discover new content and much more! {{ $t('components.Home.signupDescription') }}
</p> </p>
<p v-if="defaultUploadQuota"> <p v-if="defaultUploadQuota">
{{ $t('Users on this pod also get %{ quota } of free storage to upload their own content!', { quota: humanSize(defaultUploadQuota * 1000 * 1000) }) }} {{ $t('components.Home.uploadQuota', { quota: humanSize(defaultUploadQuota * 1000 * 1000) }) }}
</p> </p>
<signup-form <signup-form
button-classes="success" button-classes="success"
@ -224,7 +224,7 @@ whenever(() => store.state.auth.authenticated, () => {
</template> </template>
<div v-else> <div v-else>
<p> <p>
Registrations are closed on this pod. You can signup on another pod using the link below. {{ $t('components.Home.registrationsClosed') }}
</p> </p>
<a <a
target="_blank" target="_blank"
@ -232,14 +232,14 @@ whenever(() => store.state.auth.authenticated, () => {
href="https://funkwhale.audio/#get-started" href="https://funkwhale.audio/#get-started"
> >
<i class="external alternate icon" /> <i class="external alternate icon" />
Find another pod {{ $t('components.Home.findOtherPod') }}
</a> </a>
</div> </div>
</div> </div>
<div class="four wide column"> <div class="four wide column">
<h3 class="header"> <h3 class="header">
Useful links {{ $t('components.Home.usefulLinks') }}
</h3> </h3>
<div class="ui relaxed list"> <div class="ui relaxed list">
<div class="item"> <div class="item">
@ -250,10 +250,10 @@ whenever(() => store.state.auth.authenticated, () => {
class="header" class="header"
to="/library" to="/library"
> >
Browse public content {{ $t('components.Home.browsePublicContent') }}
</router-link> </router-link>
<div class="description"> <div class="description">
Listen to public albums and playlists shared on this pod {{ $t('components.Home.publicContentDescription') }}
</div> </div>
</div> </div>
</div> </div>
@ -266,10 +266,10 @@ whenever(() => store.state.auth.authenticated, () => {
target="_blank" target="_blank"
rel="noopener" rel="noopener"
> >
Mobile apps {{ $t('components.Home.mobileApps') }}
</a> </a>
<div class="description"> <div class="description">
Use Funkwhale on other devices with our apps {{ $t('components.Home.mobileAppsDescription') }}
</div> </div>
</div> </div>
</div> </div>
@ -282,10 +282,10 @@ whenever(() => store.state.auth.authenticated, () => {
target="_blank" target="_blank"
rel="noopener" rel="noopener"
> >
User guides {{ $t('components.Home.userGuides') }}
</a> </a>
<div class="description"> <div class="description">
Discover everything you need to know about Funkwhale and its features {{ $t('components.Home.userGuidesDescription') }}
</div> </div>
</div> </div>
</div> </div>
@ -302,16 +302,16 @@ whenever(() => store.state.auth.authenticated, () => {
:limit="10" :limit="10"
> >
<template #title> <template #title>
Recently added albums {{ $t('components.Home.recentlyAddedLabel') }}
</template> </template>
<router-link to="/library"> <router-link to="/library">
View more {{ $t('components.Home.viewMore') }}
<div class="ui hidden divider" /> <div class="ui hidden divider" />
</router-link> </router-link>
</album-widget> </album-widget>
<div class="ui hidden section divider" /> <div class="ui hidden section divider" />
<h3 class="ui header"> <h3 class="ui header">
New channels {{ $t('components.Home.newChannelsLabel') }}
</h3> </h3>
<channels-widget <channels-widget
:show-modification-date="true" :show-modification-date="true"

View File

@ -6,7 +6,7 @@ const path = window.location.href
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('Page Not Found') title: t('components.PageNotFound.title')
})) }))
</script> </script>
@ -20,11 +20,11 @@ const labels = computed(() => ({
<h1 class="ui huge header"> <h1 class="ui huge header">
<i class="warning icon" /> <i class="warning icon" />
<div class="content"> <div class="content">
Page not found! {{ $t('components.PageNotFound.pageNotFound') }}
</div> </div>
</h1> </h1>
<p> <p>
Sorry, the page you asked for does not exist: {{ $t('components.PageNotFound.pageNotFoundMessage') }}
</p> </p>
<a :href="path">{{ path }}</a> <a :href="path">{{ path }}</a>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
@ -32,7 +32,7 @@ const labels = computed(() => ({
class="ui icon labeled right button" class="ui icon labeled right button"
to="/" to="/"
> >
Go to home page {{ $t('components.PageNotFound.homeLink') }}
<i class="right arrow icon" /> <i class="right arrow icon" />
</router-link> </router-link>
</div> </div>

View File

@ -55,19 +55,19 @@ const scrollLock = useScrollLock(document.body)
const store = useStore() const store = useStore()
const labels = computed(() => ({ const labels = computed(() => ({
queue: t('Queue'), queue: t('components.Queue.queue'),
populating: t('Fetching radio track'), populating: t('components.Queue.queue.populatingRadio'),
duration: t('Duration'), duration: t('components.Queue.duration'),
addArtistContentFilter: t('Hide content from this artist…'), addArtistContentFilter: t('components.Queue.addArtistContentFilter'),
restart: t('Restart track'), restart: t('components.Queue.restart'),
previous: t('Previous track'), previous: t('components.Queue.previous'),
next: t('Next track'), next: t('components.Queue.next'),
pause: t('Pause'), pause: t('components.Queue.pause'),
play: t('Play'), play: t('components.Queue.play'),
fullscreen: t('Fullscreen'), fullscreen: t('components.Queue.enterFullscreen'),
exitFullscreen: t('Exit fullscreen'), exitFullscreen: t('components.Queue.exitFullscreen'),
showCoverArt: t('Show cover art'), showCoverArt: t('components.Queue.showCoverArt'),
showVisualizer: t('Show visualizer') showVisualizer: t('components.Queue.showVisualizer')
})) }))
watchEffect(async () => { watchEffect(async () => {
@ -126,9 +126,9 @@ const queueItems = computed(() => queue.value.map((track, index) => ({
...track, ...track,
key: `${index}-${track.id}`, key: `${index}-${track.id}`,
labels: { labels: {
remove: t('Remove'), remove: t('components.Queue.remove'),
selectTrack: t('Select track'), selectTrack: t('components.Queue.selectTrack'),
favorite: t('Favorite track') favorite: t('components.Queue.favorite')
}, },
duration: time.durationFormatted(track.uploads[0]?.duration ?? 0) ?? '' duration: time.durationFormatted(track.uploads[0]?.duration ?? 0) ?? ''
}) as QueueItemSource)) }) as QueueItemSource))
@ -298,14 +298,14 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
class="ui small warning message" class="ui small warning message"
> >
<h3 class="header"> <h3 class="header">
The track cannot be loaded {{ $t('components.Queue.trackLoadFailure') }}
</h3> </h3>
<p v-if="hasNext && isPlaying"> <p v-if="hasNext && isPlaying">
The next track will play automatically in a few seconds {{ $t('components.Queue.automaticPlay') }}
<i class="loading spinner icon" /> <i class="loading spinner icon" />
</p> </p>
<p> <p>
You may have a connectivity issue. {{ $t('components.Queue.connectivityWarning') }}
</p> </p>
</div> </div>
<div <div
@ -404,22 +404,18 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
class="ui right floated basic button" class="ui right floated basic button"
@click="$store.commit('ui/queueFocused', null)" @click="$store.commit('ui/queueFocused', null)"
> >
Close {{ $t('components.Queue.closeButton') }}
</button> </button>
<button <button
class="ui right floated basic button danger" class="ui right floated basic button danger"
@click="clear" @click="clear"
> >
Clear {{ $t('components.Queue.clearButton') }}
</button> </button>
{{ labels.queue }} {{ labels.queue }}
<div class="sub header"> <div class="sub header">
<div> <div>
<translate {{ $t('components.Queue.queuePosition', {index: currentIndex +1, length: queue.length}) }}
:translate-params="{index: currentIndex + 1, length: queue.length}"
>
Track %{ index } of %{ length }
</translate>
<template v-if="!$store.state.radios.running"> <template v-if="!$store.state.radios.running">
- -
<span :title="labels.duration"> <span :title="labels.duration">
@ -465,16 +461,16 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
<div class="content"> <div class="content">
<h3 class="header"> <h3 class="header">
<i class="feed icon" /> <i class="feed icon" />
You have a radio playing {{ $t('components.Queue.radioPlaying') }}
</h3> </h3>
<p> <p>
New tracks will be appended here automatically. {{ $t('components.Queue.appendTracks') }}
</p> </p>
<button <button
class="ui basic primary button" class="ui basic primary button"
@click="$store.dispatch('radios/stop')" @click="$store.dispatch('radios/stop')"
> >
Stop radio {{ $t('components.Queue.stopRadio') }}
</button> </button>
</div> </div>
</div> </div>

View File

@ -40,14 +40,14 @@ const errors = ref([] as string[])
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: type.value === 'rss' title: type.value === 'rss'
? t('Subscribe to a podcast RSS feed') ? t('components.RemoteSearchForm.subscribeRss')
: t('Subscribe to a podcast hosted on the Fediverse'), : t('components.RemoteSearchForm.subscribeFediverse'),
fieldLabel: type.value === 'rss' fieldLabel: type.value === 'rss'
? t('RSS feed location') ? t('components.RemoteSearchForm.rssLocation')
: t('Fediverse object'), : t('components.RemoteSearchForm.fediverseObject'),
fieldPlaceholder: type.value === 'rss' fieldPlaceholder: type.value === 'rss'
? t('https://website.example.com/rss.xml') ? t('components.RemoteSearchForm.rssPlaceholder')
: t('@username@example.com') : t('components.RemoteSearchForm.fediversePlaceholder')
})) }))
const obj = ref() const obj = ref()
@ -117,7 +117,7 @@ const createFetch = async () => {
obj.value = response.data obj.value = response.data
if (response.data.status === 'errored' || response.data.status === 'skipped') { if (response.data.status === 'errored' || response.data.status === 'skipped') {
errors.value.push(t('This object cannot be retrieved')) errors.value.push(t('components.RemoteSearchForm.fetchFailureMessage'))
} }
} catch (error) { } catch (error) {
errors.value = (error as BackendError).backendErrors errors.value = (error as BackendError).backendErrors
@ -172,7 +172,7 @@ watch(() => props.initialId, () => {
@click.prevent="type = 'rss'" @click.prevent="type = 'rss'"
> >
<i class="feed icon" /> <i class="feed icon" />
RSS {{ $t('components.RemoteSearchForm.rss') }}
</button> </button>
<div class="or" /> <div class="or" />
<button <button
@ -180,7 +180,7 @@ watch(() => props.initialId, () => {
@click.prevent="type = 'artists'" @click.prevent="type = 'artists'"
> >
<i class="globe icon" /> <i class="globe icon" />
Fediverse {{ $t('components.RemoteSearchForm.fediverse') }}
</button> </button>
</div> </div>
<div v-else> <div v-else>
@ -195,7 +195,7 @@ watch(() => props.initialId, () => {
class="ui negative message" class="ui negative message"
> >
<h3 class="header"> <h3 class="header">
Error while fetching object {{ $t('components.RemoteSearchForm.objectFetchError') }}
</h3> </h3>
<ul class="list"> <ul class="list">
<li <li
@ -211,10 +211,10 @@ watch(() => props.initialId, () => {
{{ labels.fieldLabel }} {{ labels.fieldLabel }}
</label> </label>
<p v-if="type === 'rss'"> <p v-if="type === 'rss'">
Use this form to subscribe to an RSS feed from its URL. {{ $t('components.RemoteSearchForm.rssDescription') }}
</p> </p>
<p v-else-if="type === 'artists'"> <p v-else-if="type === 'artists'">
Use this form to subscribe to a channel hosted somewhere else on the Fediverse. {{ $t('components.RemoteSearchForm.fediverseDescription') }}
</p> </p>
<input <input
id="object-id" id="object-id"
@ -231,7 +231,7 @@ watch(() => props.initialId, () => {
:class="['ui', 'primary', {loading: isLoading}, 'button']" :class="['ui', 'primary', {loading: isLoading}, 'button']"
:disabled="isLoading || !id || id.length === 0" :disabled="isLoading || !id || id.length === 0"
> >
Search {{ $t('components.RemoteSearchForm.searchButton') }}
</button> </button>
</form> </form>
<div <div
@ -240,7 +240,7 @@ watch(() => props.initialId, () => {
class="ui warning message" class="ui warning message"
> >
<p> <p>
This kind of object isn't supported yet {{ $t('components.RemoteSearchForm.unsupportedObject') }}
</p> </p>
</div> </div>
</div> </div>

View File

@ -51,7 +51,7 @@ const checkAndSwitch = async (url: string) => {
show.value = false show.value = false
store.commit('ui/addMessage', { store.commit('ui/addMessage', {
content: t('You are now using the Funkwhale instance at %{ url }', { url: instanceUrl }), content: t('components.SetInstanceModal.currentUrl', { url: instanceUrl }),
date: new Date() date: new Date()
}) })
@ -71,7 +71,7 @@ const checkAndSwitch = async (url: string) => {
@update:show="isError = false" @update:show="isError = false"
> >
<h3 class="header"> <h3 class="header">
Choose your instance {{ $t('components.SetInstanceModal.chooseInstance') }}
</h3> </h3>
<div class="scrolling content"> <div class="scrolling content">
<div <div
@ -80,14 +80,14 @@ const checkAndSwitch = async (url: string) => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
It is not possible to connect to the given URL {{ $t('components.SetInstanceModal.connectionFailure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li> <li>
The server might be down {{ $t('components.SetInstanceModal.serverDown') }}
</li> </li>
<li> <li>
The given address is not a Funkwhale server {{ $t('components.SetInstanceModal.notFunkwhaleServer') }}
</li> </li>
</ul> </ul>
</div> </div>
@ -97,19 +97,15 @@ const checkAndSwitch = async (url: string) => {
> >
<p <p
v-if="$store.state.instance.instanceUrl" v-if="$store.state.instance.instanceUrl"
v-translate="{url: $store.state.instance.instanceUrl, hostname: $store.getters['instance/domain'] }"
class="description" class="description"
> >
You are currently connected to <a {{ $t('components.SetInstanceModal.currentConnection', {url: $store.state.instance.instanceUrl, hostname: $store.getters['instance/domain']}) }}
href="%{ url }"
target="_blank"
>%{ hostname }&nbsp;<i class="external icon" /></a>. If you continue, you will be disconnected from your current instance and all your local data will be deleted.
</p> </p>
<p v-else> <p v-else>
To continue, please select the Funkwhale instance you want to connect to. Enter the address directly, or select one of the suggested choices. {{ $t('components.SetInstanceModal.selectFunkwhalePod') }}
</p> </p>
<div class="field"> <div class="field">
<label for="instance-picker">Instance URL</label> <label for="instance-picker">{{ $t('components.SetInstanceModal.instanceUrl') }}</label>
<div class="ui action input"> <div class="ui action input">
<input <input
id="instance-picker" id="instance-picker"
@ -121,7 +117,7 @@ const checkAndSwitch = async (url: string) => {
type="submit" type="submit"
:class="['ui', 'icon', {loading: isLoading}, 'button']" :class="['ui', 'icon', {loading: isLoading}, 'button']"
> >
Submit {{ $t('components.SetInstanceModal.submitButton') }}
</button> </button>
</div> </div>
</div> </div>
@ -133,7 +129,7 @@ const checkAndSwitch = async (url: string) => {
> >
<div class="field"> <div class="field">
<h4> <h4>
Suggested choices {{ $t('components.SetInstanceModal.suggestions') }}
</h4> </h4>
<button <button
v-for="(url, key) in suggestedInstances" v-for="(url, key) in suggestedInstances"
@ -148,7 +144,7 @@ const checkAndSwitch = async (url: string) => {
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic cancel button"> <button class="ui basic cancel button">
Cancel {{ $t('components.SetInstanceModal.cancelButton') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

View File

@ -20,19 +20,19 @@ const showRef = useVModel(props, 'show', emit)
const { t } = useI18n() const { t } = useI18n()
const general = computed(() => [ const general = computed(() => [
{ {
title: t('General shortcuts'), title: t('components.ShortcutsModal.generalShortcuts'),
shortcuts: [ shortcuts: [
{ {
key: 'h', key: 'h',
summary: t('Show available keyboard shortcuts') summary: t('components.ShortcutsModal.showShortcuts')
}, },
{ {
key: 'shift + f', key: 'shift + f',
summary: t('Focus searchbar') summary: t('components.ShortcutsModal.focusSearch')
}, },
{ {
key: 'esc', key: 'esc',
summary: t('Unfocus searchbar') summary: t('components.ShortcutsModal.unfocusSearch')
} }
] ]
} }
@ -40,67 +40,67 @@ const general = computed(() => [
const player = computed(() => [ const player = computed(() => [
{ {
title: t('Audio player shortcuts'), title: t('components.ShortcutsModal.audioShortcuts'),
shortcuts: [ shortcuts: [
{ {
key: 'p', key: 'p',
summary: t('Pause/play the current track') summary: t('components.ShortcutsModal.playPause')
}, },
{ {
key: 'left', key: 'left',
summary: t('Seek backwards 5s') summary: t('components.ShortcutsModal.seekBack5')
}, },
{ {
key: 'right', key: 'right',
summary: t('Seek forwards 5s') summary: t('components.ShortcutsModal.seekForward5')
}, },
{ {
key: 'shift + left', key: 'shift + left',
summary: t('Seek backwards 30s') summary: t('components.ShortcutsModal.seekBack30')
}, },
{ {
key: 'shift + right', key: 'shift + right',
summary: t('Seek forwards 30s') summary: t('components.ShortcutsModal.seekForward30')
}, },
{ {
key: 'ctrl + shift + left', key: 'ctrl + shift + left',
summary: t('Play previous track') summary: t('components.ShortcutsModal.playPrevious')
}, },
{ {
key: 'ctrl + shift + right', key: 'ctrl + shift + right',
summary: t('Play next track') summary: t('components.ShortcutsModal.playNext')
}, },
{ {
key: 'shift + up', key: 'shift + up',
summary: t('Increase volume') summary: t('components.ShortcutsModal.increaseVolume')
}, },
{ {
key: 'shift + down', key: 'shift + down',
summary: t('Decrease volume') summary: t('components.ShortcutsModal.decreaseVolume')
}, },
{ {
key: 'm', key: 'm',
summary: t('Toggle mute') summary: t('components.ShortcutsModal.toggleMute')
}, },
{ {
key: 'e', key: 'e',
summary: t('Expand queue/player view') summary: t('components.ShortcutsModal.expandQueue')
}, },
{ {
key: 'l', key: 'l',
summary: t('Toggle queue looping') summary: t('components.ShortcutsModal.toggleLoop')
}, },
{ {
key: 's', key: 's',
summary: t('Shuffle queue') summary: t('components.ShortcutsModal.shuffleQueue')
}, },
{ {
key: 'q', key: 'q',
summary: t('Clear queue') summary: t('components.ShortcutsModal.clearQueue')
}, },
{ {
key: 'f', key: 'f',
summary: t('Toggle favorite') summary: t('components.ShortcutsModal.toggleFavorite')
} }
] ]
} }
@ -110,7 +110,7 @@ const player = computed(() => [
<template> <template>
<semantic-modal v-model:show="showRef"> <semantic-modal v-model:show="showRef">
<header class="header"> <header class="header">
Keyboard shortcuts {{ $t('components.ShortcutsModal.modalHeader') }}
</header> </header>
<section class="scrolling content"> <section class="scrolling content">
<div class="ui stackable two column grid"> <div class="ui stackable two column grid">
@ -154,7 +154,7 @@ const player = computed(() => [
</section> </section>
<footer class="actions"> <footer class="actions">
<button class="ui basic cancel button"> <button class="ui basic cancel button">
Close {{ $t('components.ShortcutsModal.closeButton') }}
</button> </button>
</footer> </footer>
</semantic-modal> </semantic-modal>

View File

@ -42,15 +42,15 @@ const additionalNotifications = computed(() => store.getters['ui/additionalNotif
const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index') const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index')
const labels = computed(() => ({ const labels = computed(() => ({
mainMenu: t('Main menu'), mainMenu: t('components.Sidebar.mainMenu'),
selectTrack: t('Play this track'), selectTrack: t('components.Sidebar.selectTrack'),
pendingFollows: t('Pending follow requests'), pendingFollows: t('components.Sidebar.pendingFollows'),
pendingReviewEdits: t('Pending review edits'), pendingReviewEdits: t('components.Sidebar.pendingReviewEdits'),
pendingReviewReports: t('Pending review reports'), pendingReviewReports: t('components.Sidebar.pendingReviewReports'),
language: t('Language'), language: t('components.Sidebar.language'),
theme: t('Theme'), theme: t('components.Sidebar.theme'),
addContent: t('Add content'), addContent: t('components.Sidebar.addContent'),
administration: t('Administration') administration: t('components.Sidebar.administration')
})) }))
type SidebarMenuTabs = 'explore' | 'myLibrary' type SidebarMenuTabs = 'explore' | 'myLibrary'
@ -129,7 +129,7 @@ onMounted(() => {
> >
<i class="logo bordered inverted vibrant big icon"> <i class="logo bordered inverted vibrant big icon">
<logo class="logo" /> <logo class="logo" />
<span class="visually-hidden">Home</span> <span class="visually-hidden">{{ $t('components.Sidebar.home') }}</span>
</i> </i>
</router-link> </router-link>
<nav class="top ui compact right aligned inverted text menu"> <nav class="top ui compact right aligned inverted text menu">
@ -149,7 +149,7 @@ onMounted(() => {
</div> </div>
<div class="menu"> <div class="menu">
<h3 class="header"> <h3 class="header">
Administration {{ $t('components.Sidebar.administration') }}
</h3> </h3>
<div class="divider" /> <div class="divider" />
<router-link <router-link
@ -164,7 +164,7 @@ onMounted(() => {
> >
{{ $store.state.ui.notifications.pendingReviewEdits }} {{ $store.state.ui.notifications.pendingReviewEdits }}
</div> </div>
Library {{ $t('components.Sidebar.library') }}
</router-link> </router-link>
<router-link <router-link
v-if="$store.state.auth.availablePermissions['moderation']" v-if="$store.state.auth.availablePermissions['moderation']"
@ -178,21 +178,21 @@ onMounted(() => {
> >
{{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }} {{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}
</div> </div>
Moderation {{ $t('components.Sidebar.moderation') }}
</router-link> </router-link>
<router-link <router-link
v-if="$store.state.auth.availablePermissions['settings']" v-if="$store.state.auth.availablePermissions['settings']"
class="item" class="item"
:to="{name: 'manage.users.users.list'}" :to="{name: 'manage.users.users.list'}"
> >
Users {{ $t('components.Sidebar.users') }}
</router-link> </router-link>
<router-link <router-link
v-if="$store.state.auth.availablePermissions['settings']" v-if="$store.state.auth.availablePermissions['settings']"
class="item" class="item"
:to="{path: '/manage/settings'}" :to="{path: '/manage/settings'}"
> >
Settings {{ $t('components.Sidebar.settings') }}
</router-link> </router-link>
</div> </div>
</div> </div>
@ -352,14 +352,14 @@ onMounted(() => {
class="ui fluid tiny primary button" class="ui fluid tiny primary button"
:to="{name: 'login'}" :to="{name: 'login'}"
> >
Login {{ $t('components.Sidebar.login') }}
</router-link> </router-link>
<div class="ui small hidden divider" /> <div class="ui small hidden divider" />
<router-link <router-link
class="ui fluid tiny button" class="ui fluid tiny button"
:to="{path: '/signup'}" :to="{path: '/signup'}"
> >
Create an account {{ $t('components.Sidebar.createAccount') }}
</router-link> </router-link>
</div> </div>
<nav <nav
@ -371,7 +371,7 @@ onMounted(() => {
id="navigation-label" id="navigation-label"
class="visually-hidden" class="visually-hidden"
> >
Main navigation {{ $t('components.Sidebar.mainNavigation') }}
</h1> </h1>
<div class="ui small hidden divider" /> <div class="ui small hidden divider" />
<section <section
@ -391,7 +391,7 @@ onMounted(() => {
@click="expanded = 'explore'" @click="expanded = 'explore'"
@focus="expanded = 'explore'" @focus="expanded = 'explore'"
> >
Explore {{ $t('components.Sidebar.explore') }}
<i <i
v-if="expanded !== 'explore'" v-if="expanded !== 'explore'"
class="angle right icon" class="angle right icon"
@ -402,44 +402,51 @@ onMounted(() => {
class="item" class="item"
:to="{name: 'search'}" :to="{name: 'search'}"
> >
<i class="search icon" /> Search <i class="search icon" />
{{ $t('components.Sidebar.search') }}
</router-link> </router-link>
<router-link <router-link
class="item" class="item"
:to="{name: 'library.index'}" :to="{name: 'library.index'}"
active-class="_active" active-class="_active"
> >
<i class="music icon" /> Browse <i class="music icon" />
{{ $t('components.Sidebar.browse') }}
</router-link> </router-link>
<router-link <router-link
class="item" class="item"
:to="{name: 'library.podcasts.browse'}" :to="{name: 'library.podcasts.browse'}"
> >
<i class="podcast icon" /> Podcasts <i class="podcast icon" />
{{ $t('components.Sidebar.podcasts') }}
</router-link> </router-link>
<router-link <router-link
class="item" class="item"
:to="{name: 'library.albums.browse'}" :to="{name: 'library.albums.browse'}"
> >
<i class="compact disc icon" /> Albums <i class="compact disc icon" />
{{ $t('components.Sidebar.albums') }}
</router-link> </router-link>
<router-link <router-link
class="item" class="item"
:to="{name: 'library.artists.browse'}" :to="{name: 'library.artists.browse'}"
> >
<i class="user icon" /> Artists <i class="user icon" />
{{ $t('components.Sidebar.artists') }}
</router-link> </router-link>
<router-link <router-link
class="item" class="item"
:to="{name: 'library.playlists.browse'}" :to="{name: 'library.playlists.browse'}"
> >
<i class="list icon" /> Playlists <i class="list icon" />
{{ $t('components.Sidebar.playlists') }}
</router-link> </router-link>
<router-link <router-link
class="item" class="item"
:to="{name: 'library.radios.browse'}" :to="{name: 'library.radios.browse'}"
> >
<i class="feed icon" /> Radios <i class="feed icon" />
{{ $t('components.Sidebar.radios') }}
</router-link> </router-link>
</div> </div>
</div> </div>
@ -454,7 +461,7 @@ onMounted(() => {
@click="expanded = 'myLibrary'" @click="expanded = 'myLibrary'"
@focus="expanded = 'myLibrary'" @focus="expanded = 'myLibrary'"
> >
My Library {{ $t('components.Sidebar.myLibrary') }}
<i <i
v-if="expanded !== 'myLibrary'" v-if="expanded !== 'myLibrary'"
class="angle right icon" class="angle right icon"
@ -465,37 +472,43 @@ onMounted(() => {
class="item" class="item"
:to="{name: 'library.me'}" :to="{name: 'library.me'}"
> >
<i class="music icon" /> Browse <i class="music icon" />
{{ $t('components.Sidebar.browse') }}
</router-link> </router-link>
<router-link <router-link
class="item" class="item"
:to="{name: 'library.albums.me'}" :to="{name: 'library.albums.me'}"
> >
<i class="compact disc icon" /> Albums <i class="compact disc icon" />
{{ $t('components.Sidebar.albums') }}
</router-link> </router-link>
<router-link <router-link
class="item" class="item"
:to="{name: 'library.artists.me'}" :to="{name: 'library.artists.me'}"
> >
<i class="user icon" /> Artists <i class="user icon" />
{{ $t('components.Sidebar.artists') }}
</router-link> </router-link>
<router-link <router-link
class="item" class="item"
:to="{name: 'library.playlists.me'}" :to="{name: 'library.playlists.me'}"
> >
<i class="list icon" /> Playlists <i class="list icon" />
{{ $t('components.Sidebar.playlists') }}
</router-link> </router-link>
<router-link <router-link
class="item" class="item"
:to="{name: 'library.radios.me'}" :to="{name: 'library.radios.me'}"
> >
<i class="feed icon" /> Radios <i class="feed icon" />
{{ $t('components.Sidebar.radios') }}
</router-link> </router-link>
<router-link <router-link
class="item" class="item"
:to="{name: 'favorites'}" :to="{name: 'favorites'}"
> >
<i class="heart icon" /> Favorites <i class="heart icon" />
{{ $t('components.Sidebar.favorites') }}
</router-link> </router-link>
</div> </div>
</div> </div>
@ -504,11 +517,11 @@ onMounted(() => {
class="header item" class="header item"
:to="{name: 'subscriptions'}" :to="{name: 'subscriptions'}"
> >
Channels {{ $t('components.Sidebar.channels') }}
</router-link> </router-link>
<div class="item"> <div class="item">
<h3 class="header"> <h3 class="header">
More {{ $t('components.Sidebar.more') }}
</h3> </h3>
<div class="menu"> <div class="menu">
<router-link <router-link
@ -516,7 +529,8 @@ onMounted(() => {
to="/about" to="/about"
active-class="router-link-exact-active active" active-class="router-link-exact-active active"
> >
<i class="info icon" /> About this pod <i class="info icon" />
{{ $t('components.Sidebar.aboutPod') }}
</router-link> </router-link>
</div> </div>
</div> </div>
@ -529,7 +543,7 @@ onMounted(() => {
href="" href=""
class="link item" class="link item"
@click.prevent="emit('show:set-instance-modal')" @click.prevent="emit('show:set-instance-modal')"
>Switch instance</a> >{{ $t('components.Sidebar.switchInstance') }}</a>
</div> </div>
</nav> </nav>
</section> </section>

View File

@ -75,7 +75,7 @@ const move = (idx: number, increment: number) => {
:class="[{active: isPreviewing}, 'item']" :class="[{active: isPreviewing}, 'item']"
@click.stop.prevent="isPreviewing = true" @click.stop.prevent="isPreviewing = true"
> >
{{ $t('components.admin.SignupFormBuilder.previewForm') }} {{ $t('components.admin.SignupFormBuilder.previewForm') }}
</button> </button>
</div> </div>
<div <div
@ -126,7 +126,7 @@ const move = (idx: number, increment: number) => {
<th> <th>
{{ $t('components.admin.SignupFormBuilder.requiredTableHeader') }} {{ $t('components.admin.SignupFormBuilder.requiredTableHeader') }}
</th> </th>
<th><span class="visually-hidden">Actions</span></th> <th><span class="visually-hidden">{{ $t('components.admin.SignupFormBuilder.actionsTableHeader') }}</span></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

View File

@ -68,12 +68,12 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
v-if="object.artist?.content_category === 'podcast'" v-if="object.artist?.content_category === 'podcast'"
class="meta ellipsis" class="meta ellipsis"
> >
{{ $t('components.audio.ChannelCard.episodeCount', object.artist.tracks_count) }} {{ $t('components.audio.ChannelCard.episodeCount', {episode_count: object.artist.tracks_count}) }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.audio.ChannelCard.trackCount', object.artist?.tracks_count) }} {{ $t('components.audio.ChannelCard.trackCount', {tracks_count: object.artist?.tracks_count}) }}
</span> </span>
<tags-list <tags-list
label-classes="tiny" label-classes="tiny"
@ -86,13 +86,11 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
</div> </div>
<div class="extra content"> <div class="extra content">
<time <time
v-translate="{ updatedAgo }"
:translate-params="{ updatedAgo }"
class="meta ellipsis" class="meta ellipsis"
:datetime="object.artist?.modification_date" :datetime="object.artist?.modification_date"
:title="updatedTitle" :title="updatedTitle"
> >
{{ $t('{ updatedAgo }') }} {{ updatedAgo }}
</time> </time>
<play-button <play-button
class="right floated basic icon" class="right floated basic icon"

View File

@ -300,7 +300,7 @@ const hideArtist = () => {
> >
<i class="stream icon" /> <i class="stream icon" />
<span> <span>
{{ $t('components.audio.Player.queuePosition', { index: currentIndex + 1 }, { length: queue.length }) }} {{ $t('components.audio.Player.queuePosition', { index: currentIndex + 1, length: queue.length }) }}
</span> </span>
</button> </button>
<button <button
@ -308,7 +308,9 @@ const hideArtist = () => {
@click.stop="switchTab" @click.stop="switchTab"
> >
<i class="stream icon" /> <i class="stream icon" />
{{ $t('components.audio.Player.queuePosition', { index: currentIndex + 1 }, { length: queue.length }) }} <span>
{{ $t('components.audio.Player.queuePosition', { index: currentIndex + 1, length: queue.length }) }}
</span>
</button> </button>
<button <button

View File

@ -159,7 +159,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
@submit.prevent="submit" @submit.prevent="submit"
> >
<h3> <h3>
{{ $t('components.auth.Authorize.appAccessHeader', app: application.name) }} {{ $t('components.auth.Authorize.appAccessHeader', {app_name: application.name}) }}
</h3> </h3>
<h4 <h4
@ -219,7 +219,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
<p <p
v-else v-else
> >
{{ $t('components.auth.Authorize.redirectHelp', url: redirectUri) }} {{ $t('components.auth.Authorize.redirectHelp', {url: redirectUri}) }}
</p> </p>
</form> </form>
<div v-else-if="code"> <div v-else-if="code">

View File

@ -69,7 +69,7 @@ const submitAndScan = async () => {
target="_blank" target="_blank"
> >
<i class="external icon" /> <i class="external icon" />
{{ $t('components.auth.Plugin.documentationLink') }} {{ $t('components.auth.Plugin.documentationLink') }}
</a> </a>
</template> </template>
<div class="ui clearing hidden divider" /> <div class="ui clearing hidden divider" />

View File

@ -573,7 +573,7 @@ fetchOwnedApps()
{{ $t('components.auth.Settings.permissionDeleteButton') }} {{ $t('components.auth.Settings.permissionDeleteButton') }}
<template #modal-header> <template #modal-header>
<p> <p>
{{ $t('components.auth.Settings.revokePermissionModalMessage', app: app.name) }} {{ $t('components.auth.Settings.revokePermissionModalMessage', {app: app.name}) }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
@ -665,9 +665,8 @@ fetchOwnedApps()
> >
{{ $t('components.auth.Settings.personalAppDeleteLink') }} {{ $t('components.auth.Settings.personalAppDeleteLink') }}
<template #modal-header> <template #modal-header>
<p> <p />
{{ $t('components.auth.Settings.deletePersonalAppModalMessage', app: app.name) }} {{ $t('components.auth.Settings.deletePersonalAppModalMessage', {app: app.name}) }}
</p>
</template> </template>
<template #modal-content> <template #modal-content>
<p> <p>
@ -688,7 +687,7 @@ fetchOwnedApps()
<template #title> <template #title>
{{ $t('components.auth.Settings.emptyPersonalAppMessage') }} {{ $t('components.auth.Settings.emptyPersonalAppMessage') }}
</template> </template>
{{ $t('components.auth.Settings.emptyPersonalAppHelp') }} {{ $t('components.auth.Settings.emptyPersonalAppHelp') }}
</empty-state> </empty-state>
</section> </section>
@ -758,7 +757,7 @@ fetchOwnedApps()
> >
</div> </div>
<div class="field"> <div class="field">
<label for="current-password-field-email">{{ $t('components.auth.Settings.currentPasswordLabel')} }}</label> <label for="current-password-field-email">{{ $t('components.auth.Settings.currentPasswordLabel') }}</label>
<password-input <password-input
v-model="emailPassword" v-model="emailPassword"
field-id="current-password-field-email" field-id="current-password-field-email"

View File

@ -195,7 +195,7 @@ fetchToken()
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<div> <div>
{{ $t('components.auth.SubsonicTokenForm.disableSubsonicAccessConfirm')}} {{ $t('components.auth.SubsonicTokenForm.disableSubsonicAccessConfirm') }}
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>

View File

@ -60,7 +60,7 @@ watch(() => props.channel, fetchData, { immediate: true })
class="ui search normal dropdown" class="ui search normal dropdown"
> >
<option value=""> <option value="">
None {{ $t('components.channels.AlbumSelect.noneLabel') }}
</option> </option>
<option <option
v-for="album in albums" v-for="album in albums"

View File

@ -185,7 +185,7 @@ const launchAction = async () => {
> >
<div class="ui inline fields"> <div class="ui inline fields">
<div class="field"> <div class="field">
<label for="actions-select">Actions</label> <label for="actions-select">{{ $t('components.common.ActionTable.actionsLabel') }}</label>
<select <select
id="actions-select" id="actions-select"
v-model="currentActionName" v-model="currentActionName"
@ -214,7 +214,7 @@ const launchAction = async () => {
<span <span
key="1" key="1"
> >
{{ $t('components.common.ActionTable.performActionConfirmation', {action: currentActionName}, {count: affectedObjectsCount} ) }} {{ $t('components.common.ActionTable.performActionConfirmation', {action: currentActionName, count: affectedObjectsCount} ) }}
</span> </span>
</p> </p>
</template> </template>
@ -250,12 +250,12 @@ const launchAction = async () => {
<span <span
v-if="selectAll" v-if="selectAll"
> >
{{ $t('components.common.ActionTable.allElementsSelectedMessage', {count: objectData.count}) }} {{ $t('components.common.ActionTable.allElementsSelectedMessage', {count: objectsData.count}) }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.common.ActionTable.elementsSelectedMessage', {count: checked.length }, {total: objectsData.count}) }} {{ $t('components.common.ActionTable.elementsSelectedMessage', {count: checked.length, total: objectsData.count}) }}
</span> </span>
<template v-if="currentAction?.allowAll && checkable.length > 0 && checkable.length === checked.length"> <template v-if="currentAction?.allowAll && checkable.length > 0 && checkable.length === checked.length">
<a <a
@ -303,9 +303,8 @@ const launchAction = async () => {
class="ui positive message" class="ui positive message"
> >
<p> <p>
<span <span>
> {{ $t('components.common.ActionTable.actionSuccessMessage', {action: result.action, count: result.updated}) }}
{{ $t('components.common.ActionTable.actionSuccessMessage', {action: result.action}, {count: result.updated}) }}
</span> </span>
</p> </p>

View File

@ -20,7 +20,7 @@ const duration = computed(() => {
<span> <span>
<span <span
v-if="duration.hours > 0" v-if="duration.hours > 0"
>{{ $t('components.common.Duration.hoursFormat', {hours: duration.hours}, {minutes: duration.minutes}) }}</span> >{{ $t('components.common.Duration.hoursFormat', {hours: duration.hours, minutes: duration.minutes}) }}</span>
<span <span
v-else v-else
>{{ $t('components.common.Duration.minutesFormat', {minutes: duration.minutes}) }}</span> >{{ $t('components.common.Duration.minutesFormat', {minutes: duration.minutes}) }}</span>

View File

@ -91,19 +91,19 @@ const submit = async () => {
href="" href=""
@click.stop.prevent="showMore = true" @click.stop.prevent="showMore = true"
> >
Show more {{ $t('components.common.RenderedDescription.showMore') }}
</a> </a>
<a <a
v-else v-else
href="" href=""
@click.stop.prevent="showMore = false" @click.stop.prevent="showMore = false"
> >
Show less {{ $t('components.common.RenderedDescription.showLess') }}
</a> </a>
</template> </template>
</template> </template>
<p v-else-if="!isUpdating"> <p v-else-if="!isUpdating">
No description available {{ $t('components.common.RenderedDescription.noDescription') }}
</p> </p>
<template v-if="!isUpdating && canUpdate && updateUrl"> <template v-if="!isUpdating && canUpdate && updateUrl">
<div class="ui hidden divider" /> <div class="ui hidden divider" />
@ -112,7 +112,7 @@ const submit = async () => {
@click="isUpdating = true" @click="isUpdating = true"
> >
<i class="pencil icon" /> <i class="pencil icon" />
Edit {{ $t('components.common.RenderedDescription.editButton') }}
</span> </span>
</template> </template>
<form <form
@ -126,7 +126,7 @@ const submit = async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
Error while updating description {{ $t('components.common.RenderedDescription.updateFailureHeader') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -145,14 +145,14 @@ const submit = async () => {
class="left floated" class="left floated"
@click.prevent="isUpdating = false" @click.prevent="isUpdating = false"
> >
Cancel {{ $t('components.common.RenderedDescription.cancelButton') }}
</a> </a>
<button <button
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']" :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
type="submit" type="submit"
:disabled="isLoading" :disabled="isLoading"
> >
Update description {{ $t('components.common.RenderedDescription.updateButton') }}
</button> </button>
<div class="ui clearing hidden divider" /> <div class="ui clearing hidden divider" />
</form> </form>

View File

@ -17,21 +17,21 @@ const themes = useThemeList()
const { theme } = useTheme() const { theme } = useTheme()
const labels = computed(() => ({ const labels = computed(() => ({
profile: t('Profile'), profile: t('components.common.UserMenu.profileLabel'),
settings: t('Settings'), settings: t('components.common.UserMenu.settingsLabel'),
logout: t('Log out'), logout: t('components.common.UserMenu.logoutLabel'),
about: t('About'), about: t('components.common.UserMenu.aboutLabel'),
shortcuts: t('Keyboard shortcuts'), shortcuts: t('components.common.UserMenu.shortcutsLabel'),
support: t('Help'), support: t('components.common.UserMenu.supportLabel'),
forum: t('Forum'), forum: t('components.common.UserMenu.forumLabel'),
docs: t('Documentation'), docs: t('components.common.UserMenu.docsLabel'),
language: t('Change language'), language: t('components.common.UserMenu.languageLabel'),
theme: t('Change theme'), theme: t('components.common.UserMenu.themeLabel'),
chat: t('Chat room'), chat: t('components.common.UserMenu.chatLabel'),
git: t('Issue tracker'), git: t('components.common.UserMenu.gitLabel'),
login: t('Log in'), login: t('components.common.UserMenu.loginLabel'),
signup: t('Sign up'), signup: t('components.common.UserMenu.signupLabel'),
notifications: t('Notifications') notifications: t('components.common.UserMenu.notificationsLabel')
})) }))
</script> </script>

View File

@ -26,24 +26,24 @@ const themes = useThemeList()
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
header: t('Options'), header: t('components.common.UserModal.optionsLabel'),
profile: t('Profile'), profile: t('components.common.UserModal.profileLabel'),
settings: t('Settings'), settings: t('components.common.UserModal.settingsLabel'),
logout: t('Log out'), logout: t('components.common.UserModal.logoutLabel'),
about: t('About'), about: t('components.common.UserModal.aboutLabel'),
shortcuts: t('Keyboard shortcuts'), shortcuts: t('components.common.UserModal.shortcutsLabel'),
support: t('Help'), support: t('components.common.UserModal.supportLabel'),
forum: t('Forum'), forum: t('components.common.UserModal.forumLabel'),
docs: t('Documentation'), docs: t('components.common.UserModal.docsLabel'),
help: t('Help'), help: t('components.common.UserModal.supportLabel'),
language: t('Language'), language: t('components.common.UserModal.languageLabel'),
theme: t('Theme'), theme: t('components.common.UserModal.themeLabel'),
chat: t('Chat room'), chat: t('components.common.UserModal.chatLabel'),
git: t('Issue tracker'), git: t('components.common.UserModal.gitLabel'),
login: t('Log in'), login: t('components.common.UserModal.loginLabel'),
signup: t('Sign up'), signup: t('components.common.UserModal.signupLabel'),
notifications: t('Notifications'), notifications: t('components.common.UserModal.notificationsLabel'),
useOtherInstance: t('Use another instance') useOtherInstance: t('components.common.UserModal.useOtherInstanceLabel')
})) }))
</script> </script>

View File

@ -98,7 +98,7 @@ onMounted(() => $('.ui.dropdown').dropdown())
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('Your Favorites') title: t('components.favorites.List.title')
})) }))
const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b))) const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b)))
@ -112,7 +112,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<section class="ui vertical center aligned stripe segment"> <section class="ui vertical center aligned stripe segment">
<div :class="['ui', { 'active': isLoading }, 'inverted', 'dimmer']"> <div :class="['ui', { 'active': isLoading }, 'inverted', 'dimmer']">
<div class="ui text loader"> <div class="ui text loader">
Loading your favorites {{ $t('components.favorites.List.loadingMessage') }}
</div> </div>
</div> </div>
<h2 <h2
@ -120,13 +120,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
class="ui center aligned icon header" class="ui center aligned icon header"
> >
<i class="circular inverted heart pink icon" /> <i class="circular inverted heart pink icon" />
<translate {{ $t('components.favorites.List.favoritesCount', {count: $store.state.favorites.count}) }}
translate-plural="%{ count } favorites"
:translate-n="$store.state.favorites.count"
:translate-params="{ count }"
>
%{ count } favorite
</translate>
</h2> </h2>
<radio-button <radio-button
v-if="$store.state.favorites.count > 0" v-if="$store.state.favorites.count > 0"
@ -141,7 +135,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<label for="favorites-ordering"> <label for="favorites-ordering">
Ordering {{ $t('components.favorites.List.favoritesOrderingLabel') }}
</label> </label>
<select <select
id="favorites-ordering" id="favorites-ordering"
@ -159,7 +153,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</div> </div>
<div class="field"> <div class="field">
<label for="favorites-ordering-direction"> <label for="favorites-ordering-direction">
Order {{ $t('components.favorites.List.favoritesOrderingDirectionLabel') }}
</label> </label>
<select <select
id="favorites-ordering-direction" id="favorites-ordering-direction"
@ -167,16 +161,16 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.favorites.List.orderingDirectionAscending') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.favorites.List.orderingDirectionDescending') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="favorites-results"> <label for="favorites-results">
Results per page {{ $t('components.favorites.List.favoritesResultsPerPageLabel') }}
</label> </label>
<select <select
id="favorites-results" id="favorites-results"
@ -215,14 +209,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="broken heart icon" /> <i class="broken heart icon" />
No tracks have been added to your favorites yet {{ $t('components.favorites.List.emptyState') }}
</div> </div>
<router-link <router-link
:to="'/library'" :to="'/library'"
class="ui success labeled icon button" class="ui success labeled icon button"
> >
<i class="headphones icon" /> <i class="headphones icon" />
Browse the library {{ $t('components.favorites.List.libraryLink') }}
</router-link> </router-link>
</div> </div>
</main> </main>

View File

@ -23,8 +23,8 @@ const store = useStore()
const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id)) const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id))
const title = computed(() => isFavorite.value const title = computed(() => isFavorite.value
? t('Remove from favorites') ? t('components.favorites.TrackFavoriteIcon.removeFromFavorites')
: t('Add to favorites') : t('components.favorites.TrackFavoriteIcon.addToFavorites')
) )
</script> </script>
@ -35,16 +35,16 @@ const title = computed(() => isFavorite.value
@click.stop="$store.dispatch('favorites/toggle', track.id)" @click.stop="$store.dispatch('favorites/toggle', track.id)"
> >
<i class="heart icon" /> <i class="heart icon" />
<translate <span
v-if="isFavorite" v-if="isFavorite"
> >
In favorites {{ $t('components.favorites.TrackFavoriteIcon.isFavorited') }}
</translate> </span>
<translate <span
v-else v-else
> >
Add to favorites {{ $t('components.favorites.TrackFavoriteIcon.addToFavorites') }}
</translate> </span>
</button> </button>
<button <button
v-else v-else

View File

@ -80,7 +80,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="small" class="small"
> >
<h3 class="header"> <h3 class="header">
Refreshing object from remote server {{ $t('components.federation.FetchButton.remoteRefreshHeader') }}
</h3> </h3>
<div class="scrolling content"> <div class="scrolling content">
<template v-if="data && data.status != 'pending'"> <template v-if="data && data.status != 'pending'">
@ -89,10 +89,10 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui message" class="ui message"
> >
<h4 class="header"> <h4 class="header">
Refresh was skipped {{ $t('components.federation.FetchButton.refreshSkippedHeader') }}
</h4> </h4>
<p> <p>
The remote server answered, but returned data was unsupported by Funkwhale. {{ $t('components.federation.FetchButton.unsupportedDataMessage') }}
</p> </p>
</div> </div>
<div <div
@ -100,10 +100,10 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui success message" class="ui success message"
> >
<h4 class="header"> <h4 class="header">
Refresh successful {{ $t('components.federation.FetchButton.refreshSuccessHeader') }}
</h4> </h4>
<p> <p>
Data was refreshed successfully from remote server. {{ $t('components.federation.FetchButton.refreshSuccessMessage') }}
</p> </p>
</div> </div>
<div <div
@ -111,16 +111,16 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui error message" class="ui error message"
> >
<h4 class="header"> <h4 class="header">
Refresh error {{ $t('components.federation.FetchButton.refreshFailureHeader') }}
</h4> </h4>
<p> <p>
An error occurred while trying to refresh data: {{ $t('components.federation.FetchButton.refreshFailureMessage') }}
</p> </p>
<table class="ui very basic collapsing celled table"> <table class="ui very basic collapsing celled table">
<tbody> <tbody>
<tr> <tr>
<td> <td>
Error type {{ $t('components.federation.FetchButton.errorTypeTableHeader') }}
</td> </td>
<td> <td>
{{ data.detail.error_code }} {{ data.detail.error_code }}
@ -128,50 +128,49 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
</tr> </tr>
<tr> <tr>
<td> <td>
Error detail {{ $t('components.federation.FetchButton.errorDetailTableRow') }}
</td> </td>
<td> <td>
<translate <span
v-if="data.detail.error_code === 'http' && data.detail.status_code" v-if="data.detail.error_code === 'http' && data.detail.status_code"
:translate-params="{status: data.detail.status_code}"
> >
The remote server answered with HTTP %{ status } {{ $t('components.federation.FetchButton.httpStatusMessage', {status: data.detail.status_code}) }}
</translate> </span>
<translate <span
v-else-if="['http', 'request'].indexOf(data.detail.error_code) > -1" v-else-if="['http', 'request'].indexOf(data.detail.error_code) > -1"
> >
An HTTP error occurred while contacting the remote server {{ $t('components.federation.FetchButton.httpErrorMessage') }}
</translate> </span>
<translate <span
v-else-if="data.detail.error_code === 'timeout'" v-else-if="data.detail.error_code === 'timeout'"
> >
The remote server didn't respond quickly enough {{ $t('components.federation.FetchButton.timeoutErrorMessage') }}
</translate> </span>
<translate <span
v-else-if="data.detail.error_code === 'connection'" v-else-if="data.detail.error_code === 'connection'"
> >
Impossible to connect to the remote server {{ $t('components.federation.FetchButton.connectionErrorMessage') }}
</translate> </span>
<translate <span
v-else-if="['invalid_json', 'invalid_jsonld', 'missing_jsonld_type'].indexOf(data.detail.error_code) > -1" v-else-if="['invalid_json', 'invalid_jsonld', 'missing_jsonld_type'].indexOf(data.detail.error_code) > -1"
> >
The remote server returned invalid JSON or JSON-LD data {{ $t('components.federation.FetchButton.invalidJsonErrorMessage') }}
</translate> </span>
<translate <span
v-else-if="data.detail.error_code === 'validation'" v-else-if="data.detail.error_code === 'validation'"
> >
Data returned by the remote server had invalid or missing attributes {{ $t('components.federation.FetchButton.invalidAttributesErrorMessage') }}
</translate> </span>
<translate <span
v-else-if="data.detail.error_code === 'unhandled'" v-else-if="data.detail.error_code === 'unhandled'"
> >
Unknown error {{ $t('components.federation.FetchButton.unknownErrorMessage') }}
</translate> </span>
<translate <span
v-else v-else
> >
Unknown error {{ $t('components.federation.FetchButton.unknownErrorMessage') }}
</translate> </span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -183,7 +182,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui active inverted dimmer" class="ui active inverted dimmer"
> >
<div class="ui text loader"> <div class="ui text loader">
Requesting a fetch {{ $t('components.federation.FetchButton.fetchRequestLoader') }}
</div> </div>
</div> </div>
<div <div
@ -191,7 +190,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui active inverted dimmer" class="ui active inverted dimmer"
> >
<div class="ui text loader"> <div class="ui text loader">
Waiting for result {{ $t('components.federation.FetchButton.awaitingResultLoader') }}
</div> </div>
</div> </div>
<div <div
@ -200,7 +199,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
Error while saving settings {{ $t('components.federation.FetchButton.loadingFailureMessage') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -217,23 +216,23 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui warning message" class="ui warning message"
> >
<h4 class="header"> <h4 class="header">
Refresh pending {{ $t('components.federation.FetchButton.pendingRefreshHeader') }}
</h4> </h4>
<p> <p>
The refresh request hasn't been processed in time by our server. It will be processed later. {{ $t('components.federation.FetchButton.pendingRefreshMessage') }}
</p> </p>
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic cancel button"> <button class="ui basic cancel button">
Close {{ $t('components.federation.FetchButton.closeButton') }}
</button> </button>
<button <button
v-if="data && data.status === 'finished'" v-if="data && data.status === 'finished'"
class="ui confirm success button" class="ui confirm success button"
@click.prevent="showModal = false; emit('refresh')" @click.prevent="showModal = false; emit('refresh')"
> >
Close and reload page {{ $t('components.federation.FetchButton.reloadButton') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

View File

@ -64,7 +64,7 @@ fetchData()
v-if="!isLoading && libraries.length === 0" v-if="!isLoading && libraries.length === 0"
class="ui subtitle" class="ui subtitle"
> >
No matching library. {{ $t('components.federation.LibraryWidget.noMatchMessage') }}
</p> </p>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<div class="ui cards"> <div class="ui cards">
@ -90,7 +90,7 @@ fetchData()
:class="['ui', 'basic', 'button']" :class="['ui', 'basic', 'button']"
@click="fetchData(nextPage)" @click="fetchData(nextPage)"
> >
Show more {{ $t('components.federation.LibraryWidget.showMoreButton') }}
</button> </button>
</template> </template>
</div> </div>

View File

@ -27,8 +27,8 @@ const showPassword = ref(props.defaultShow)
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('Show/hide password'), title: t('components.federation.PasswordInput.title'),
copy: t('Copy') copy: t('components.federation.PasswordInput.copyLabel')
})) }))
const passwordInputType = computed(() => showPassword.value ? 'text' : 'password') const passwordInputType = computed(() => showPassword.value ? 'text' : 'password')
@ -38,7 +38,7 @@ const { isSupported: canCopy, copy } = useClipboard({ source: value })
const copyPassword = () => { const copyPassword = () => {
copy() copy()
store.commit('ui/addMessage', { store.commit('ui/addMessage', {
content: t('Text copied to clipboard!'), content: t('components.federation.PasswordInput.copySuccessMessage'),
date: new Date() date: new Date()
}) })
} }

View File

@ -41,7 +41,7 @@ const publicLibraries = computed(() => libraries.value?.filter(library => librar
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('Album') title: t('components.library.AlbumBase.title')
})) }))
const isLoading = ref(false) const isLoading = ref(false)
@ -177,24 +177,16 @@ const remove = async () => {
/> />
<template v-if="totalTracks > 0"> <template v-if="totalTracks > 0">
<div class="ui hidden very small divider" /> <div class="ui hidden very small divider" />
<translate <span
v-if="isSerie" v-if="isSerie"
translate-plural="%{ count } episodes"
:translate-n="totalTracks"
:translate-params="{count: totalTracks}"
> >
%{ count } episode {{ $t('components.library.AlbumBase.episodeCount', {episode_count: totalTracks}) }}
</translate> </span>
<translate <span
v-else v-else
:translate-params="{count: totalTracks}"
:translate-n="totalTracks"
translate-plural="%{ count } tracks"
> >
%{ count } track {{ $t('components.library.AlbumBase.trackCount', {tracks_count: totalTracks}) }}
</translate> </span>
</template> </template>
<div class="ui small hidden divider" /> <div class="ui small hidden divider" />
<play-button <play-button
@ -263,26 +255,18 @@ const remove = async () => {
v-if="object.release_date || (totalTracks > 0)" v-if="object.release_date || (totalTracks > 0)"
class="ui small hidden divider" class="ui small hidden divider"
/> />
<span v-if="object.release_date">{{ momentFormat(new Date(object.release_date ?? '1970-01-01'), 'Y') }} · </span> <span v-if="object.release_date">{{ momentFormat(new Date(object.release_date ?? '1970-01-01'), 'Y') }} &middot; </span>
<template v-if="totalTracks > 0"> <template v-if="totalTracks > 0">
<translate <span
v-if="isSerie" v-if="isSerie"
translate-plural="%{ count } episodes"
:translate-n="totalTracks"
:translate-params="{count: totalTracks}"
> >
%{ count } episode {{ $t('components.library.AlbumBase.episodeCount', {episode_count: totalTracks}) }}
</translate> </span>
<translate <span
v-else v-else
:translate-params="{count: totalTracks}"
:translate-n="totalTracks"
translate-plural="%{ count } tracks"
> >
%{ count } track {{ $t('components.library.AlbumBase.trackCount', {tracks_count: totalTracks}) }}
</translate> · </span> ·
</template> </template>
<human-duration <human-duration
v-if="totalDuration > 0" v-if="totalDuration > 0"
@ -323,7 +307,7 @@ const remove = async () => {
:to="{name: 'library.albums.edit', params: {id: object.id }}" :to="{name: 'library.albums.edit', params: {id: object.id }}"
> >
<i class="pencil icon" /> <i class="pencil icon" />
Add a description {{ $t('components.library.AlbumBase.addDescription') }}
</router-link> </router-link>
</div> </div>
</div> </div>
@ -339,7 +323,7 @@ const remove = async () => {
:to="{name: 'library.albums.edit', params: {id: object.id }}" :to="{name: 'library.albums.edit', params: {id: object.id }}"
> >
<i class="pencil icon" /> <i class="pencil icon" />
Add a description {{ $t('components.library.AlbumBase.addDescription') }}
</router-link> </router-link>
</template> </template>
</div> </div>

View File

@ -60,16 +60,12 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
</div> </div>
<div v-else-if="object"> <div v-else-if="object">
<h2 class="ui header"> <h2 class="ui header">
<translate <span v-if="isSerie">
v-if="isSerie" {{ $t('components.library.AlbumDetail.episodesHeader') }}
> </span>
Episodes <span v-else>
</translate> {{ $t('components.library.AlbumDetail.tracksHeader') }}
<translate </span>
v-else
>
Tracks
</translate>
</h2> </h2>
<channel-entries <channel-entries
@ -91,12 +87,9 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
class="right floated mini inverted vibrant" class="right floated mini inverted vibrant"
:tracks="discs[index]" :tracks="discs[index]"
/> />
<translate <h3>
tag="h3" {{ $t('components.library.AlbumDetail.volumeNumber', {number: tracks[0].disc_number}) }}
:translate-params="{number: tracks[0]?.disc_number ?? index + 1}" </h3>
>
Volume %{ number }
</translate>
<track-table <track-table
:is-album="true" :is-album="true"
:tracks="tracks" :tracks="tracks"
@ -135,13 +128,13 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
<template v-if="!artist.channel && !isSerie"> <template v-if="!artist.channel && !isSerie">
<h2> <h2>
User libraries {{ $t('components.library.AlbumDetail.userLibraryHeader') }}
</h2> </h2>
<library-widget <library-widget
:url="'albums/' + object.id + '/libraries/'" :url="'albums/' + object.id + '/libraries/'"
@loaded="emit('libraries-loaded', $event)" @loaded="emit('libraries-loaded', $event)"
> >
This album is present in the following libraries: {{ $t('components.library.AlbumDetail.userLibraryDescription') }}
</library-widget> </library-widget>
</template> </template>
</div> </div>

View File

@ -35,7 +35,7 @@ const domain = computed(() => getDomain(props.object.fid))
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
more: t('More…') more: t('components.library.AlbumDropdown.moreLabel')
})) }))
const isEmbedable = computed(() => (props.isChannel && props.artist?.channel?.actor) || props.publicLibraries.length) const isEmbedable = computed(() => (props.isChannel && props.artist?.channel?.actor) || props.publicLibraries.length)
@ -53,7 +53,7 @@ const remove = () => emit('remove')
v-model:show="showEmbedModal" v-model:show="showEmbedModal"
> >
<h4 class="header"> <h4 class="header">
Embed this album on your website {{ $t('components.library.AlbumDropdown.embedModalHeader') }}
</h4> </h4>
<div class="scrolling content"> <div class="scrolling content">
<div class="description"> <div class="description">
@ -66,7 +66,7 @@ const remove = () => emit('remove')
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic deny button"> <button class="ui basic deny button">
Cancel {{ $t('components.channels.AlbumModal.cancelButton') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>
@ -84,9 +84,7 @@ const remove = () => emit('remove')
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
<translate {{ $t('components.library.AlbumDropdown.domainViewLink') }}
:translate-params="{domain: domain}"
>View on %{ domain }</translate>
</a> </a>
<div <div
@ -96,7 +94,7 @@ const remove = () => emit('remove')
@click="showEmbedModal = !showEmbedModal" @click="showEmbedModal = !showEmbedModal"
> >
<i class="code icon" /> <i class="code icon" />
Embed {{ $t('components.audio.EmbedWizard.copyButton') }}
</div> </div>
<a <a
v-if="isAlbum && musicbrainzUrl" v-if="isAlbum && musicbrainzUrl"
@ -106,7 +104,7 @@ const remove = () => emit('remove')
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
View on MusicBrainz {{ $t('components.library.AlbumDropdown.musicbrainzLink') }}
</a> </a>
<a <a
v-if="!isChannel && isAlbum" v-if="!isChannel && isAlbum"
@ -116,7 +114,7 @@ const remove = () => emit('remove')
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
Search on Discogs {{ $t('components.library.AlbumDropdown.discogsLink') }}
</a> </a>
<router-link <router-link
v-if="object.is_local" v-if="object.is_local"
@ -124,7 +122,7 @@ const remove = () => emit('remove')
class="basic item" class="basic item"
> >
<i class="edit icon" /> <i class="edit icon" />
Edit {{ $t('components.library.AlbumDropdown.editButton') }}
</router-link> </router-link>
<dangerous-button <dangerous-button
v-if="artist && $store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === $store.state.auth.fullUsername" v-if="artist && $store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === $store.state.auth.fullUsername"
@ -132,22 +130,22 @@ const remove = () => emit('remove')
@confirm="remove()" @confirm="remove()"
> >
<i class="ui trash icon" /> <i class="ui trash icon" />
Delete {{ $t('components.library.AlbumDropdown.deleteButton') }}
<template #modal-header> <template #modal-header>
<p> <p>
Delete this album? {{ $t('components.library.AlbumDropdown.deleteModalHeader') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<div> <div>
<p> <p>
The album will be deleted, as well as any related files and data. This action is irreversible. {{ $t('components.library.AlbumDropdown.deleteModalMessage') }}
</p> </p>
</div> </div>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<p> <p>
Delete {{ $t('components.library.AlbumDropdown.deleteButton') }}
</p> </p>
</template> </template>
</dangerous-button> </dangerous-button>
@ -168,7 +166,7 @@ const remove = () => emit('remove')
:to="{name: 'manage.library.albums.detail', params: {id: object.id}}" :to="{name: 'manage.library.albums.detail', params: {id: object.id}}"
> >
<i class="wrench icon" /> <i class="wrench icon" />
Open in moderation interface {{ $t('components.library.AlbumDropdown.moderationLink') }}
</router-link> </router-link>
<a <a
v-if="$store.state.auth.profile && $store.state.auth.profile?.is_superuser" v-if="$store.state.auth.profile && $store.state.auth.profile?.is_superuser"
@ -178,7 +176,7 @@ const remove = () => emit('remove')
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<i class="wrench icon" /> <i class="wrench icon" />
View in Django's admin&nbsp; {{ $t('components.library.AlbumDropdown.djangoLink') }}
</a> </a>
</div> </div>
</button> </button>

View File

@ -22,22 +22,22 @@ const canEdit = store.state.auth.availablePermissions.library
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<div class="ui text container"> <div class="ui text container">
<h2> <h2>
<translate <span
v-if="canEdit" v-if="canEdit"
> >
Edit this album {{ $t('components.library.AlbumEdit.editAlbumHeader') }}
</translate> </span>
<translate <span
v-else v-else
> >
Suggest an edit on this album {{ $t('components.library.AlbumEdit.suggestEditHeader') }}
</translate> </span>
</h2> </h2>
<div <div
v-if="!object.is_local" v-if="!object.is_local"
class="ui message" class="ui message"
> >
This object is managed by another server, you cannot edit it. {{ $t('components.library.AlbumEdit.remoteObjectWarning') }}
</div> </div>
<edit-form <edit-form
v-else v-else

View File

@ -110,8 +110,8 @@ onMounted(() => $('.ui.dropdown').dropdown())
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Enter album title…'), searchPlaceholder: t('components.library.Albums.searchPlaceholder'),
title: t('Albums') title: t('components.library.Albums.title')
})) }))
const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b))) const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b)))
@ -121,7 +121,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<main v-title="labels.title"> <main v-title="labels.title">
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<h2 class="ui header"> <h2 class="ui header">
Browsing albums {{ $t('components.library.Albums.albumBrowseHeader') }}
</h2> </h2>
<form <form
:class="['ui', {'loading': isLoading}, 'form']" :class="['ui', {'loading': isLoading}, 'form']"
@ -130,7 +130,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<label for="albums-search"> <label for="albums-search">
Search {{ $t('components.library.Albums.searchLabel') }}
</label> </label>
<div class="ui action input"> <div class="ui action input">
<input <input
@ -143,18 +143,18 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<button <button
class="ui icon button" class="ui icon button"
type="submit" type="submit"
:aria-label="t('Search')" :aria-label="t('components.library.Albums.searchLabel')"
> >
<i class="search icon" /> <i class="search icon" />
</button> </button>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="tags-search">Tags</label> <label for="tags-search">{{ $t('components.library.Albums.tagsLabel') }}</label>
<tags-selector v-model="tags" /> <tags-selector v-model="tags" />
</div> </div>
<div class="field"> <div class="field">
<label for="album-ordering">Ordering</label> <label for="album-ordering">{{ $t('components.library.Albums.orderingLabel') }}</label>
<select <select
id="album-ordering" id="album-ordering"
v-model="ordering" v-model="ordering"
@ -170,22 +170,22 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="album-ordering-direction">Ordering direction</label> <label for="album-ordering-direction">{{ $t('components.library.Albums.orderingDirectionLabel') }}</label>
<select <select
id="album-ordering-direction" id="album-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.library.Albums.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.library.Albums.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="album-results">Results per page</label> <label for="album-results">{{ $t('components.library.Albums.resultsPerPageLabel') }}</label>
<select <select
id="album-results" id="album-results"
v-model="paginateBy" v-model="paginateBy"
@ -228,7 +228,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="compact disc icon" /> <i class="compact disc icon" />
No results matching your query {{ $t('components.library.Albums.emptyStateMessage') }}
</div> </div>
<router-link <router-link
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
@ -236,7 +236,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
class="ui success button labeled icon" class="ui success button labeled icon"
> >
<i class="upload icon" /> <i class="upload icon" />
Add some music {{ $t('components.library.Albums.addMusicLink') }}
</router-link> </router-link>
</div> </div>
</div> </div>

View File

@ -59,7 +59,7 @@ const headerStyle = computed(() => cover.value?.urls.original
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('Artist') title: t('components.library.ArtistBase.title')
})) }))
const isLoading = ref(false) const isLoading = ref(false)
@ -117,15 +117,9 @@ watch(() => props.id, fetchData, { immediate: true })
v-if="albums" v-if="albums"
class="sub header" class="sub header"
> >
<translate <div>
{{ $t('components.library.ArtistBase.tracksCount', {count: totalTracks, albums: totalAlbums}) }}
tag="div" </div>
translate-plural="%{ count } tracks in %{ albumsCount } albums"
:translate-n="totalTracks"
:translate-params="{count: totalTracks, albumsCount: totalAlbums}"
>
%{ count } track in %{ albumsCount } albums
</translate>
</div> </div>
</div> </div>
</h2> </h2>
@ -147,7 +141,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="vibrant" class="vibrant"
:artist="object" :artist="object"
> >
Play all albums {{ $t('components.library.ArtistBase.playAllButton') }}
</play-button> </play-button>
</div> </div>
@ -156,7 +150,7 @@ watch(() => props.id, fetchData, { immediate: true })
v-model:show="showEmbedModal" v-model:show="showEmbedModal"
> >
<h4 class="header"> <h4 class="header">
Embed this artist work on your website {{ $t('components.library.ArtistBase.embedModalHeader') }}
</h4> </h4>
<div class="scrolling content"> <div class="scrolling content">
<div class="description"> <div class="description">
@ -168,7 +162,7 @@ watch(() => props.id, fetchData, { immediate: true })
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui deny button"> <button class="ui deny button">
Cancel {{ $t('components.library.ArtistBase.cancelButton') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>
@ -177,7 +171,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="ui button" class="ui button"
@click="dropdown.click()" @click="dropdown.click()"
> >
More {{ $t('components.library.ArtistBase.moreButton') }}
</button> </button>
<button <button
ref="dropdown" ref="dropdown"
@ -193,9 +187,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
<translate {{ $t('components.library.ArtistBase.domainViewLink', {domain: domain}) }}
:translate-params="{domain: domain}"
>View on %{ domain }</translate>
</a> </a>
<button <button
@ -205,7 +197,7 @@ watch(() => props.id, fetchData, { immediate: true })
@click.prevent="showEmbedModal = !showEmbedModal" @click.prevent="showEmbedModal = !showEmbedModal"
> >
<i class="code icon" /> <i class="code icon" />
Embed {{ $t('components.library.ArtistBase.embedButton') }}
</button> </button>
<a <a
:href="wikipediaUrl" :href="wikipediaUrl"
@ -214,7 +206,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="basic item" class="basic item"
> >
<i class="wikipedia w icon" /> <i class="wikipedia w icon" />
Search on Wikipedia {{ $t('components.library.ArtistBase.wikipediaLink') }}
</a> </a>
<a <a
v-if="musicbrainzUrl" v-if="musicbrainzUrl"
@ -224,7 +216,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
View on MusicBrainz {{ $t('components.library.ArtistBase.musicbrainzLink') }}
</a> </a>
<a <a
:href="discogsUrl" :href="discogsUrl"
@ -233,7 +225,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
Search on Discogs {{ $t('components.library.ArtistBase.discogsLink') }}
</a> </a>
<router-link <router-link
v-if="object.is_local" v-if="object.is_local"
@ -241,7 +233,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="basic item" class="basic item"
> >
<i class="edit icon" /> <i class="edit icon" />
Edit {{ $t('components.library.ArtistBase.editButton') }}
</router-link> </router-link>
<div class="divider" /> <div class="divider" />
<div <div
@ -261,7 +253,7 @@ watch(() => props.id, fetchData, { immediate: true })
:to="{name: 'manage.library.artists.detail', params: {id: object.id}}" :to="{name: 'manage.library.artists.detail', params: {id: object.id}}"
> >
<i class="wrench icon" /> <i class="wrench icon" />
Open in moderation interface {{ $t('components.library.ArtistBase.moderationLink') }}
</router-link> </router-link>
<a <a
v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser" v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
@ -271,7 +263,7 @@ watch(() => props.id, fetchData, { immediate: true })
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<i class="wrench icon" /> <i class="wrench icon" />
View in Django's admin&nbsp; {{ $t('components.library.ArtistBase.djangoLink') }}
</a> </a>
</div> </div>
</button> </button>

View File

@ -65,19 +65,19 @@ const loadMoreAlbums = async () => {
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<div class="ui message"> <div class="ui message">
<p> <p>
You are currently hiding content related to this artist. {{ $t('components.library.ArtistDetail.hiddenContentMessage') }}
</p> </p>
<router-link <router-link
class="right floated" class="right floated"
:to="{name: 'settings'}" :to="{name: 'settings'}"
> >
Review my filters {{ $t('components.library.ArtistDetail.reviewFiltersLink') }}
</router-link> </router-link>
<button <button
class="ui basic tiny button" class="ui basic tiny button"
@click="$store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)" @click="$store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)"
> >
Remove filter {{ $t('components.library.ArtistDetail.removeFilterButton') }}
</button> </button>
</div> </div>
</div> </div>
@ -92,7 +92,7 @@ const loadMoreAlbums = async () => {
class="ui vertical stripe segment" class="ui vertical stripe segment"
> >
<h2> <h2>
Albums by this artist {{ $t('components.library.ArtistDetail.artistAlbumsHeader') }}
</h2> </h2>
<div class="ui cards app-cards"> <div class="ui cards app-cards">
<album-card <album-card
@ -107,7 +107,7 @@ const loadMoreAlbums = async () => {
:class="['ui', {loading: isLoadingMoreAlbums}, 'button']" :class="['ui', {loading: isLoadingMoreAlbums}, 'button']"
@click="loadMoreAlbums()" @click="loadMoreAlbums()"
> >
Load more {{ $t('components.library.ArtistDetail.loadMoreButton') }}
</button> </button>
</section> </section>
<section <section
@ -122,7 +122,7 @@ const loadMoreAlbums = async () => {
> >
<template #header> <template #header>
<h2> <h2>
New tracks by this artist {{ $t('components.library.ArtistDetail.newTracksHeader') }}
</h2> </h2>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
</template> </template>
@ -130,13 +130,13 @@ const loadMoreAlbums = async () => {
</section> </section>
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<h2> <h2>
User libraries {{ $t('components.library.ArtistDetail.userLibraryHeader') }}
</h2> </h2>
<library-widget <library-widget
:url="'artists/' + object.id + '/libraries/'" :url="'artists/' + object.id + '/libraries/'"
@loaded="emit('libraries-loaded', $event)" @loaded="emit('libraries-loaded', $event)"
> >
This artist is present in the following libraries: {{ $t('components.library.ArtistDetail.userLibraryDescription') }}
</library-widget> </library-widget>
</section> </section>
</div> </div>

View File

@ -22,22 +22,22 @@ const canEdit = store.state.auth.availablePermissions.library
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<div class="ui text container"> <div class="ui text container">
<h2> <h2>
<translate <span
v-if="canEdit" v-if="canEdit"
> >
Edit this artist {{ $t('components.library.ArtistEdit.editArtistHeader') }}
</translate> </span>
<translate <span
v-else v-else
> >
Suggest an edit on this artist {{ $t('components.library.ArtistEdit.suggestEditHeader') }}
</translate> </span>
</h2> </h2>
<div <div
v-if="!object.is_local" v-if="!object.is_local"
class="ui message" class="ui message"
> >
This object is managed by another server, you cannot edit it. {{ $t('components.library.ArtistEdit.remoteObjectWarning') }}
</div> </div>
<edit-form <edit-form
v-else v-else

View File

@ -122,7 +122,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<main v-title="labels.title"> <main v-title="labels.title">
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<h2 class="ui header"> <h2 class="ui header">
Browsing artists {{ $t('components.library.Artists.artistBrowseHeader') }}
</h2> </h2>
<form <form
:class="['ui', {'loading': isLoading}, 'form']" :class="['ui', {'loading': isLoading}, 'form']"
@ -131,7 +131,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<label for="artist-search"> <label for="artist-search">
Artist name {{ $t('components.library.Artists.searchLabel') }}
</label> </label>
<div class="ui action input"> <div class="ui action input">
<input <input
@ -144,18 +144,18 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<button <button
class="ui icon button" class="ui icon button"
type="submit" type="submit"
:aria-label="t('Search')" :aria-label="t('components.library.Artists.searchButton')"
> >
<i class="search icon" /> <i class="search icon" />
</button> </button>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="tags-search">Tags</label> <label for="tags-search">{{ $t('components.library.Artists.tagsLabel') }}</label>
<tags-selector v-model="tags" /> <tags-selector v-model="tags" />
</div> </div>
<div class="field"> <div class="field">
<label for="artist-ordering">Ordering</label> <label for="artist-ordering">{{ $t('components.library.Artists.orderingLabel') }}</label>
<select <select
id="artist-ordering" id="artist-ordering"
v-model="ordering" v-model="ordering"
@ -171,22 +171,22 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="artist-ordering-direction">Ordering direction</label> <label for="artist-ordering-direction">{{ $t('components.library.Artists.orderingDirectionLabel') }}</label>
<select <select
id="artist-ordering-direction" id="artist-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.library.Artists.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.library.Artists.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="artist-results">Results per page</label> <label for="artist-results">{{ $t('components.library.Artists.resultsPerPageLabel') }}</label>
<select <select
id="artist-results" id="artist-results"
v-model="paginateBy" v-model="paginateBy"
@ -202,7 +202,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<span id="excludeHeader">Exclude Compilation Artists</span> <span id="excludeHeader">{{ $t('components.library.Artists.excludeCompilationArtistsLabel') }}</span>
<div <div
id="excludeCompilation" id="excludeCompilation"
class="ui toggle checkbox" class="ui toggle checkbox"
@ -217,7 +217,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<label <label
for="exclude-compilation" for="exclude-compilation"
class="visually-hidden" class="visually-hidden"
>Exclude Compilation Artists</label> >{{ $t('components.library.Artists.excludeCompilationArtistsLabel') }}</label>
</div> </div>
</div> </div>
</div> </div>
@ -246,7 +246,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="compact disc icon" /> <i class="compact disc icon" />
No results matching your query {{ $t('components.library.Artists.emptyStateMessage') }}
</div> </div>
<router-link <router-link
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
@ -254,7 +254,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
class="ui success button labeled icon" class="ui success button labeled icon"
> >
<i class="upload icon" /> <i class="upload icon" />
Add some music {{ $t('components.library.Artists.addMusicLink') }}
</router-link> </router-link>
</div> </div>
<div class="ui center aligned basic segment"> <div class="ui center aligned basic segment">

View File

@ -156,12 +156,7 @@ const approve = async (approved: boolean) => {
<div class="content"> <div class="content">
<h4 class="header"> <h4 class="header">
<router-link :to="detailUrl"> <router-link :to="detailUrl">
<translate {{ $t('components.library.EditCard.modificationHeader', {id: obj.uuid.substring(0, 8)}) }}
:translate-params="{id: obj.uuid.substring(0, 8)}"
>
Modification %{ id }
</translate>
</router-link> </router-link>
</h4> </h4>
<div class="meta"> <div class="meta">
@ -170,12 +165,7 @@ const approve = async (approved: boolean) => {
:to="{name: 'library.tracks.detail', params: {id: obj.target.id }}" :to="{name: 'library.tracks.detail', params: {id: obj.target.id }}"
> >
<i class="music icon" /> <i class="music icon" />
<translate {{ $t('components.library.EditCard.trackLink', {id: obj.target.id, name: obj.target.repr}) }}
:translate-params="{id: obj.target.id, name: obj.target.repr}"
>
Track #%{ id } - %{ name }
</translate>
</router-link> </router-link>
<br> <br>
<human-date <human-date
@ -186,19 +176,19 @@ const approve = async (approved: boolean) => {
<span class="right floated"> <span class="right floated">
<span v-if="obj.is_approved && obj.is_applied"> <span v-if="obj.is_approved && obj.is_applied">
<i class="success check icon" /> <i class="success check icon" />
Approved and applied {{ $t('components.library.EditCard.appliedStatus') }}
</span> </span>
<span v-else-if="obj.is_approved"> <span v-else-if="obj.is_approved">
<i class="success check icon" /> <i class="success check icon" />
Approved {{ $t('components.library.EditCard.approvedStatus') }}
</span> </span>
<span v-else-if="obj.is_approved === null"> <span v-else-if="obj.is_approved === null">
<i class="warning hourglass icon" /> <i class="warning hourglass icon" />
Pending review {{ $t('components.library.EditCard.pendingReviewStatus') }}
</span> </span>
<span v-else-if="obj.is_approved === false"> <span v-else-if="obj.is_approved === false">
<i class="danger x icon" /> <i class="danger x icon" />
Rejected {{ $t('components.library.EditCard.rejectedStatus') }}
</span> </span>
</span> </span>
</div> </div>
@ -217,13 +207,13 @@ const approve = async (approved: boolean) => {
<thead> <thead>
<tr> <tr>
<th> <th>
Field {{ $t('components.library.EditCard.fieldTableHeader') }}
</th> </th>
<th> <th>
Old value {{ $t('components.library.EditCard.oldValueTableHeader') }}
</th> </th>
<th> <th>
New value {{ $t('components.library.EditCard.newValueTableHeader') }}
</th> </th>
</tr> </tr>
</thead> </thead>
@ -253,7 +243,7 @@ const approve = async (approved: boolean) => {
</template> </template>
</td> </td>
<td v-else> <td v-else>
N/A {{ $t('components.library.EditCard.notApplicable') }}
</td> </td>
<td <td
@ -311,36 +301,36 @@ const approve = async (approved: boolean) => {
:class="['ui', {loading: isLoading}, 'success', 'basic', 'button']" :class="['ui', {loading: isLoading}, 'success', 'basic', 'button']"
@click="approve(true)" @click="approve(true)"
> >
Approve {{ $t('components.library.EditCard.approveButton') }}
</button> </button>
<button <button
v-if="canApprove && obj.is_approved === null" v-if="canApprove && obj.is_approved === null"
:class="['ui', {loading: isLoading}, 'warning', 'basic', 'button']" :class="['ui', {loading: isLoading}, 'warning', 'basic', 'button']"
@click="approve(false)" @click="approve(false)"
> >
Reject {{ $t('components.library.EditCard.rejectButton') }}
</button> </button>
<dangerous-button <dangerous-button
v-if="canDelete" v-if="canDelete"
:class="['ui', {loading: isLoading}, 'basic danger button']" :class="['ui', {loading: isLoading}, 'basic danger button']"
:action="remove" :action="remove"
> >
Delete {{ $t('components.library.EditCard.deleteButton') }}
<template #modal-header> <template #modal-header>
<p> <p>
Delete this suggestion? {{ $t('components.library.EditCard.deleteSuggestionModalHeader') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<div> <div>
<p> <p>
The suggestion will be completely removed, this action is irreversible. {{ $t('components.library.EditCard.deleteSuggestionModalMessage') }}
</p> </p>
</div> </div>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<p> <p>
Delete {{ $t('components.library.EditCard.deleteButton') }}
</p> </p>
</template> </template>
</dangerous-button> </dangerous-button>

View File

@ -46,7 +46,7 @@ const canEdit = computed(() => {
}) })
const labels = computed(() => ({ const labels = computed(() => ({
summaryPlaceholder: t('A short summary describing your changes.') summaryPlaceholder: t('components.library.EditForm.summaryPlaceholder')
})) }))
const mutationsUrl = computed(() => props.objectType === 'track' const mutationsUrl = computed(() => props.objectType === 'track'
@ -148,7 +148,7 @@ const resetField = (fieldId: string) => {
<div v-if="submittedMutation"> <div v-if="submittedMutation">
<div class="ui positive message"> <div class="ui positive message">
<h4 class="header"> <h4 class="header">
Your edit was successfully submitted. {{ $t('components.library.EditForm.submissionSuccessHeader') }}
</h4> </h4>
</div> </div>
<edit-card <edit-card
@ -159,7 +159,7 @@ const resetField = (fieldId: string) => {
class="ui button" class="ui button"
@click.prevent="submittedMutation = null" @click.prevent="submittedMutation = null"
> >
Submit another edit {{ $t('components.library.EditForm.newEditButton') }}
</button> </button>
</div> </div>
<div v-else> <div v-else>
@ -171,27 +171,27 @@ const resetField = (fieldId: string) => {
> >
<div> <div>
<template v-if="showPendingReview"> <template v-if="showPendingReview">
Recent edits awaiting review {{ $t('components.library.EditForm.editsAwaitingReview') }}
<button <button
class="ui tiny basic right floated button" class="ui tiny basic right floated button"
@click.prevent="showPendingReview = false" @click.prevent="showPendingReview = false"
> >
Show all edits {{ $t('components.library.EditForm.showEditsButton') }}
</button> </button>
</template> </template>
<template v-else> <template v-else>
Recent edits {{ $t('components.library.EditForm.recentEdits') }}
<button <button
class="ui tiny basic right floated button" class="ui tiny basic right floated button"
@click.prevent="showPendingReview = true" @click.prevent="showPendingReview = true"
> >
Restrict to unreviewed edits {{ $t('components.library.EditForm.onlyUnreviewed') }}
</button> </button>
</template> </template>
</div> </div>
<template #empty-state> <template #empty-state>
<empty-state> <empty-state>
Suggest a change using the form below. {{ $t('components.library.EditForm.emptyStateMessage') }}
</empty-state> </empty-state>
</template> </template>
</edit-list> </edit-list>
@ -206,7 +206,7 @@ const resetField = (fieldId: string) => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
Error while submitting edit {{ $t('components.library.EditForm.submissionFailureHeader') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -221,7 +221,7 @@ const resetField = (fieldId: string) => {
v-if="!canEdit" v-if="!canEdit"
class="ui message" class="ui message"
> >
You don't have the permission to edit this object, but you can suggest changes. Once submitted, suggestions will be reviewed before approval. {{ $t('components.library.EditForm.noPermissionWarning') }}
</div> </div>
<template v-if="values"> <template v-if="values">
<div <div
@ -250,7 +250,7 @@ const resetField = (fieldId: string) => {
class="ui fluid search dropdown" class="ui fluid search dropdown"
> >
<option :value="null"> <option :value="null">
N/A {{ $t('components.library.EditForm.notApplicable') }}
</option> </option>
<option <option
v-for="{ code, name } in licenses" v-for="{ code, name } in licenses"
@ -266,7 +266,7 @@ const resetField = (fieldId: string) => {
@click.prevent="values[fieldConfig.id] = null" @click.prevent="values[fieldConfig.id] = null"
> >
<i class="x icon" /> <i class="x icon" />
Clear {{ $t('components.library.EditForm.clearButton') }}
</button> </button>
</template> </template>
<template v-else-if="fieldConfig.type === 'content'"> <template v-else-if="fieldConfig.type === 'content'">
@ -303,7 +303,7 @@ const resetField = (fieldId: string) => {
@click.prevent="values[fieldConfig.id] = []" @click.prevent="values[fieldConfig.id] = []"
> >
<i class="x icon" /> <i class="x icon" />
Clear {{ $t('components.library.EditForm.clearButton') }}
</button> </button>
</template> </template>
<div v-if="fieldValuesChanged(fieldConfig.id)"> <div v-if="fieldValuesChanged(fieldConfig.id)">
@ -313,13 +313,13 @@ const resetField = (fieldId: string) => {
@click.prevent="resetField(fieldConfig.id)" @click.prevent="resetField(fieldConfig.id)"
> >
<i class="undo icon" /> <i class="undo icon" />
Reset to initial value {{ $t('components.library.EditForm.resetButton') }}
</button> </button>
</div> </div>
</div> </div>
</template> </template>
<div class="field"> <div class="field">
<label for="summary">Summary (optional)</label> <label for="summary">{{ $t('components.library.EditForm.summaryLabel') }}</label>
<textarea <textarea
id="change-summary" id="change-summary"
v-model="summary" v-model="summary"
@ -333,23 +333,23 @@ const resetField = (fieldId: string) => {
class="ui left floated button" class="ui left floated button"
:to="{name: 'library.tracks.detail', params: {id: object.id }}" :to="{name: 'library.tracks.detail', params: {id: object.id }}"
> >
Cancel {{ $t('components.library.EditForm.cancelButton') }}
</router-link> </router-link>
<button <button
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']" :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
type="submit" type="submit"
:disabled="isLoading || !mutationPayload" :disabled="isLoading || !mutationPayload"
> >
<translate <span
v-if="canEdit" v-if="canEdit"
> >
Submit and apply edit {{ $t('components.library.EditForm.submitEditButton') }}
</translate> </span>
<translate <span
v-else v-else
> >
Submit suggestion {{ $t('components.library.EditForm.submitSuggestionButton') }}
</translate> </span>
</button> </button>
</form> </form>
</div> </div>

View File

@ -43,13 +43,13 @@ const supportedExtensions = computed(() => store.state.ui.supportedExtensions)
const labels = computed(() => ({ const labels = computed(() => ({
tooltips: { tooltips: {
denied: t('Upload denied, ensure the file is not too big and that you have not reached your quota'), denied: t('components.library.FileUpload.deniedTooltip'),
server: t('Cannot upload this file, ensure it is not too big'), server: t('components.library.FileUpload.serverTooltip'),
network: t('A network error occurred while uploading this file'), network: t('components.library.FileUpload.networkTooltip'),
timeout: t('Upload timeout, please try again'), timeout: t('components.library.FileUpload.timeoutTooltip'),
retry: t('Retry'), retry: t('components.library.FileUpload.retryTooltip'),
extension: t( extension: t(
'Invalid file type, ensure you are uploading an audio file. Supported file extensions are %{ extensions }', 'components.library.FileUpload.extensionTooltip',
{ extensions: supportedExtensions.value.join(', ') } { extensions: supportedExtensions.value.join(', ') }
) )
} as Record<string, string> } as Record<string, string>
@ -282,7 +282,7 @@ const retry = (files: Omit<VueUploadItem, 'xhr'>[]) => {
useEventListener(window, 'beforeunload', (event) => { useEventListener(window, 'beforeunload', (event) => {
if (!hasActiveUploads.value) return null if (!hasActiveUploads.value) return null
event.preventDefault() event.preventDefault()
return (event.returnValue = t('This page is asking you to confirm that you want to leave - data you have entered may not be saved.')) return (event.returnValue = t('components.library.FileUpload.eventListenerMessage'))
}) })
</script> </script>
@ -294,12 +294,12 @@ useEventListener(window, 'beforeunload', (event) => {
:class="['item', {active: currentTab === 'uploads'}]" :class="['item', {active: currentTab === 'uploads'}]"
@click.prevent="currentTab = 'uploads'" @click.prevent="currentTab = 'uploads'"
> >
Uploading {{ $t('components.library.FileUpload.uploadingStatus') }}
<div <div
v-if="files.length === 0" v-if="files.length === 0"
class="ui label" class="ui label"
> >
0 {{ $t('components.library.FileUpload.noActionableFiles') }}
</div> </div>
<div <div
v-else-if="files.length > uploadedFilesCount + erroredFilesCount" v-else-if="files.length > uploadedFilesCount + erroredFilesCount"
@ -319,12 +319,12 @@ useEventListener(window, 'beforeunload', (event) => {
:class="['item', {active: currentTab === 'processing'}]" :class="['item', {active: currentTab === 'processing'}]"
@click.prevent="currentTab = 'processing'" @click.prevent="currentTab = 'processing'"
> >
Processing {{ $t('components.library.FileUpload.processingStatus') }}
<div <div
v-if="processableFiles === 0" v-if="processableFiles === 0"
class="ui label" class="ui label"
> >
0 {{ $t('components.library.FileUpload.noActionableFiles') }}
</div> </div>
<div <div
v-else-if="processableFiles > processedFilesCount" v-else-if="processableFiles > processedFilesCount"
@ -344,7 +344,7 @@ useEventListener(window, 'beforeunload', (event) => {
<div :class="['ui', {loading: isLoadingQuota}, 'container']"> <div :class="['ui', {loading: isLoadingQuota}, 'container']">
<div :class="['ui', {red: remainingSpace === 0}, {warning: remainingSpace > 0 && remainingSpace <= 50}, 'small', 'statistic']"> <div :class="['ui', {red: remainingSpace === 0}, {warning: remainingSpace > 0 && remainingSpace <= 50}, 'small', 'statistic']">
<div class="label"> <div class="label">
Remaining storage space {{ $t('components.library.FileUpload.storageSpaceLabel') }}
</div> </div>
<div class="value"> <div class="value">
{{ humanSize(remainingSpace * 1000 * 1000) }} {{ humanSize(remainingSpace * 1000 * 1000) }}
@ -352,25 +352,25 @@ useEventListener(window, 'beforeunload', (event) => {
</div> </div>
<div class="ui divider" /> <div class="ui divider" />
<h2 class="ui header"> <h2 class="ui header">
Upload music from '~/your local storage {{ $t('components.library.FileUpload.localUploadHeader') }}
</h2> </h2>
<div class="ui message"> <div class="ui message">
<p> <p>
You are about to upload music to your library. Before proceeding, please ensure that: {{ $t('components.library.FileUpload.localUploadMessage') }}
</p> </p>
<ul> <ul>
<li v-if="library.privacy_level != 'me'"> <li v-if="library.privacy_level != 'me'">
You are not uploading copyrighted content in a public library, otherwise you may be infringing the law {{ $t('components.library.FileUpload.localUploadCopyright') }}
</li> </li>
<li> <li>
The music files you are uploading are tagged properly.&nbsp; {{ $t('components.library.FileUpload.localUploadTag') }}
<a <a
href="http://picard.musicbrainz.org/" href="http://picard.musicbrainz.org/"
target="_blank" target="_blank"
>We recommend using Picard for that purpose.</a> >{{ $t('components.library.FileUpload.localUploadPicardLink') }}</a>
</li> </li>
<li> <li>
The music files you are uploading are in OGG, Flac, MP3 or AIFF format {{ $t('components.library.FileUpload.localUploadSupportedFormats') }}
</li> </li>
</ul> </ul>
</div> </div>
@ -388,16 +388,11 @@ useEventListener(window, 'beforeunload', (event) => {
@input-file="inputFile" @input-file="inputFile"
> >
<i class="upload icon" />&nbsp; <i class="upload icon" />&nbsp;
Click to select files to upload or drag and drop files or directories {{ $t('components.library.FileUpload.uploadWidgetLabel') }}
<br> <br>
<br> <br>
<i> <i>
<translate {{ $t('components.library.FileUpload.fileUploadSupportedFormats', {extensions: supportedExtensions.join(', ')}) }}
:translate-params="{extensions: supportedExtensions.join(', ')}"
>
Supported extensions: %{ extensions }
</translate>
</i> </i>
</file-upload-widget> </file-upload-widget>
</div> </div>
@ -410,16 +405,16 @@ useEventListener(window, 'beforeunload', (event) => {
<thead> <thead>
<tr> <tr>
<th class="ten wide"> <th class="ten wide">
Filename {{ $t('components.library.FileUpload.filenameTableHeader') }}
</th> </th>
<th> <th>
Size {{ $t('components.library.FileUpload.sizeTableHeader') }}
</th> </th>
<th> <th>
Status {{ $t('components.library.FileUpload.statusTableHeader') }}
</th> </th>
<th> <th>
Actions {{ $t('components.library.FileUpload.actionsTableHeader') }}
</th> </th>
</tr> </tr>
<tr v-if="retryableFiles.length > 1"> <tr v-if="retryableFiles.length > 1">
@ -431,7 +426,7 @@ useEventListener(window, 'beforeunload', (event) => {
class="ui right floated small basic button" class="ui right floated small basic button"
@click.prevent="retry(retryableFiles)" @click.prevent="retry(retryableFiles)"
> >
Retry failed uploads {{ $t('components.library.FileUpload.retryButton') }}
</button> </button>
</th> </th>
</tr> </tr>
@ -459,30 +454,30 @@ useEventListener(window, 'beforeunload', (event) => {
v-else-if="file.success" v-else-if="file.success"
class="ui success label" class="ui success label"
> >
<translate <span
key="1" key="1"
>Uploaded</translate> >{{ $t('components.library.FileUpload.uploadedStatusLabel') }}</span>
</span> </span>
<span <span
v-else-if="file.active" v-else-if="file.active"
class="ui warning label" class="ui warning label"
> >
<translate <span
key="2" key="2"
> >
Uploading {{ $t('components.library.FileUpload.uploadingStatusLabel') }}
</translate> </span>
({{ parseFloat(file.progress ?? '0.00') }}%) ({{ parseFloat(file.progress ?? '0.00') }}%)
</span> </span>
<span <span
v-else v-else
class="ui label" class="ui label"
> >
<translate <span
key="3" key="3"
> >
Pending {{ $t('components.library.FileUpload.pendingStatusLabel') }}
</translate> </span>
</span> </span>
</td> </td>
<td> <td>
@ -511,7 +506,7 @@ useEventListener(window, 'beforeunload', (event) => {
</div> </div>
<div class="ui divider" /> <div class="ui divider" />
<h2 class="ui header"> <h2 class="ui header">
Import music from your server {{ $t('components.library.FileUpload.serverUploadHeader') }}
</h2> </h2>
<div <div
v-if="fsErrors.length > 0" v-if="fsErrors.length > 0"
@ -519,7 +514,7 @@ useEventListener(window, 'beforeunload', (event) => {
class="ui negative message" class="ui negative message"
> >
<h3 class="header"> <h3 class="header">
Error while launching import {{ $t('components.library.FileUpload.uploadFailureHeader') }}
</h3> </h3>
<ul class="list"> <ul class="list">
<li <li
@ -538,13 +533,13 @@ useEventListener(window, 'beforeunload', (event) => {
/> />
<template v-if="fsStatus && fsStatus.import"> <template v-if="fsStatus && fsStatus.import">
<h3 class="ui header"> <h3 class="ui header">
Import status {{ $t('components.library.FileUpload.importStatusHeader') }}
</h3> </h3>
<p v-if="fsStatus.import.reference !== importReference"> <p v-if="fsStatus.import.reference !== importReference">
Results of your previous import: {{ $t('components.library.FileUpload.previousImportStatusMessage') }}
</p> </p>
<p v-else> <p v-else>
Results of your import: {{ $t('components.library.FileUpload.currentImportStatusMessage') }}
</p> </p>
<button <button
@ -552,7 +547,7 @@ useEventListener(window, 'beforeunload', (event) => {
class="ui button" class="ui button"
@click="cancelFsScan" @click="cancelFsScan"
> >
Cancel {{ $t('components.library.FileUpload.cancelButton') }}
</button> </button>
<fs-logs :data="fsStatus.import" /> <fs-logs :data="fsStatus.import" />
</template> </template>

View File

@ -42,7 +42,7 @@ const handleClick = (entry: FSEntry) => {
class="ui button" class="ui button"
@click.prevent="emit('import')" @click.prevent="emit('import')"
> >
Import {{ $t('components.library.FsBrowser.importButton') }}
</button> </button>
</div> </div>
<div class="ui list component-fs-browser"> <div class="ui list component-fs-browser">

View File

@ -15,7 +15,7 @@ defineProps<Props>()
class="ui active dimmer" class="ui active dimmer"
> >
<div class="ui text loader"> <div class="ui text loader">
Import hasn't started yet {{ $t('components.library.FsLogs.emptyStateMessage') }}
</div> </div>
</div> </div>
<template v-else> <template v-else>

View File

@ -26,7 +26,7 @@ const logger = useLogger()
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('Library') title: t('components.library.Home.title')
})) }))
const isLoading = ref(false) const isLoading = ref(false)
@ -67,7 +67,7 @@ fetchData()
:websocket-handlers="['Listen']" :websocket-handlers="['Listen']"
> >
<template #title> <template #title>
Recently listened {{ $t('components.library.Home.recentlyListenedLabel') }}
</template> </template>
</track-widget> </track-widget>
</div> </div>
@ -77,7 +77,7 @@ fetchData()
:filters="{scope: scope, ordering: '-creation_date'}" :filters="{scope: scope, ordering: '-creation_date'}"
> >
<template #title> <template #title>
Recently favorited {{ $t('components.library.Home.recentlyFavoritedLabel') }}
</template> </template>
</track-widget> </track-widget>
</div> </div>
@ -87,7 +87,7 @@ fetchData()
:filters="{scope: scope, playable: true, ordering: '-modification_date'}" :filters="{scope: scope, playable: true, ordering: '-modification_date'}"
> >
<template #title> <template #title>
Playlists {{ $t('components.library.Home.playlistsLabel') }}
</template> </template>
</playlist-widget> </playlist-widget>
</div> </div>
@ -97,14 +97,14 @@ fetchData()
<div class="column"> <div class="column">
<album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date'}"> <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date'}">
<template #title> <template #title>
Recently added {{ $t('components.library.Home.recentlyAddedLabel') }}
</template> </template>
</album-widget> </album-widget>
</div> </div>
</div> </div>
<template v-if="scope === 'all'"> <template v-if="scope === 'all'">
<h3 class="ui header"> <h3 class="ui header">
New channels {{ $t('components.library.Home.newChannelsLabel') }}
</h3> </h3>
<channels-widget <channels-widget
:show-modification-date="true" :show-modification-date="true"

View File

@ -58,11 +58,11 @@ const getErrorData = (upload: Upload) => {
supportUrl: 'https://forum.funkwhale.audio/t/support', supportUrl: 'https://forum.funkwhale.audio/t/support',
documentationUrl: `https://docs.funkwhale.audio/users/upload.html#${errorCode}`, documentationUrl: `https://docs.funkwhale.audio/users/upload.html#${errorCode}`,
label: errorCode === 'invalid_metadata' label: errorCode === 'invalid_metadata'
? t('Invalid metadata') ? t('components.library.ImportStatusModal.invalidMetadataLabel')
: t('Unknown error'), : t('components.library.ImportStatusModal.unknownErrorLabel'),
detail: errorCode === 'invalid_metadata' detail: errorCode === 'invalid_metadata'
? t('The metadata included in the file is invalid or some mandatory fields are missing.') ? t('components.library.ImportStatusModal.invalidMetadataMessage')
: t('An unknown error occurred'), : t('components.library.ImportStatusModal.unknownErrorMessage'),
errorRows: errorCode === 'invalid_metadata' errorRows: errorCode === 'invalid_metadata'
? getErrors(payload.detail ?? {}) ? getErrors(payload.detail ?? {})
: [], : [],
@ -77,7 +77,7 @@ const getErrorData = (upload: Upload) => {
<template> <template>
<semantic-modal v-model:show="show"> <semantic-modal v-model:show="show">
<h4 class="header"> <h4 class="header">
Import detail {{ $t('components.library.ImportStatusModal.importDetailHeader') }}
</h4> </h4>
<div <div
v-if="Object.keys(upload).length > 0" v-if="Object.keys(upload).length > 0"
@ -88,33 +88,33 @@ const getErrorData = (upload: Upload) => {
v-if="upload.import_status === 'pending'" v-if="upload.import_status === 'pending'"
class="ui message" class="ui message"
> >
Upload is still pending and will soon be processed by the server. {{ $t('components.library.ImportStatusModal.importDetailMessage') }}
</div> </div>
<div <div
v-if="upload.import_status === 'finished'" v-if="upload.import_status === 'finished'"
class="ui success message" class="ui success message"
> >
Upload was successfully processed by the server. {{ $t('components.library.ImportStatusModal.importSuccessMessage') }}
</div> </div>
<div <div
v-if="upload.import_status === 'skipped'" v-if="upload.import_status === 'skipped'"
role="alert" role="alert"
class="ui warning message" class="ui warning message"
> >
Upload was skipped because a similar one is already available in one of your libraries. {{ $t('components.library.ImportStatusModal.importSkippedWarning') }}
</div> </div>
<div <div
v-if="upload.import_status === 'errored'" v-if="upload.import_status === 'errored'"
class="ui error message" class="ui error message"
> >
An error occurred during upload processing. You will find more information below. {{ $t('components.library.ImportStatusModal.importFailureMessage') }}
</div> </div>
<template v-if="upload.import_status === 'errored'"> <template v-if="upload.import_status === 'errored'">
<table class="ui very basic collapsing celled table"> <table class="ui very basic collapsing celled table">
<tbody> <tbody>
<tr> <tr>
<td> <td>
Error type {{ $t('components.library.ImportStatusModal.errorType') }}
</td> </td>
<td> <td>
{{ getErrorData(upload).label }} {{ getErrorData(upload).label }}
@ -122,7 +122,7 @@ const getErrorData = (upload: Upload) => {
</tr> </tr>
<tr> <tr>
<td> <td>
Error detail {{ $t('components.library.ImportStatusModal.errorDetail') }}
</td> </td>
<td> <td>
{{ getErrorData(upload).detail }} {{ getErrorData(upload).detail }}
@ -138,7 +138,7 @@ const getErrorData = (upload: Upload) => {
</tr> </tr>
<tr> <tr>
<td> <td>
Getting help {{ $t('components.library.ImportStatusModal.gettingHelp') }}
</td> </td>
<td> <td>
<ul> <ul>
@ -147,7 +147,7 @@ const getErrorData = (upload: Upload) => {
:href="getErrorData(upload).documentationUrl" :href="getErrorData(upload).documentationUrl"
target="_blank" target="_blank"
> >
Read our documentation for this error {{ $t('components.library.ImportStatusModal.documentationLink') }}
</a> </a>
</li> </li>
<li> <li>
@ -155,7 +155,7 @@ const getErrorData = (upload: Upload) => {
:href="getErrorData(upload).supportUrl" :href="getErrorData(upload).supportUrl"
target="_blank" target="_blank"
> >
Open a support thread (include the debug information below in your message) {{ $t('components.library.ImportStatusModal.supportLink') }}
</a> </a>
</li> </li>
</ul> </ul>
@ -163,7 +163,7 @@ const getErrorData = (upload: Upload) => {
</tr> </tr>
<tr> <tr>
<td> <td>
Debug information {{ $t('components.library.ImportStatusModal.debugInformation') }}
</td> </td>
<td> <td>
<div class="ui form"> <div class="ui form">
@ -182,7 +182,7 @@ const getErrorData = (upload: Upload) => {
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui deny button"> <button class="ui deny button">
Close {{ $t('components.library.ImportStatusModal.closeButton') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

View File

@ -112,8 +112,8 @@ onMounted(() => $('.ui.dropdown').dropdown())
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search…'), searchPlaceholder: t('components.library.Podcasts.searchPlaceholder'),
title: t('Podcasts') title: t('components.library.Podcasts.title')
})) }))
const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b))) const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
@ -123,7 +123,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<main v-title="labels.title"> <main v-title="labels.title">
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<h2 class="ui header"> <h2 class="ui header">
Browsing podcasts {{ $t('components.library.Podcasts.podcastBrowseHeader') }}
</h2> </h2>
<form <form
:class="['ui', {'loading': isLoading}, 'form']" :class="['ui', {'loading': isLoading}, 'form']"
@ -132,7 +132,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<label for="artist-search"> <label for="artist-search">
Podcast title {{ $t('components.library.Podcasts.searchLabel') }}
</label> </label>
<div class="ui action input"> <div class="ui action input">
<input <input
@ -145,18 +145,18 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<button <button
class="ui icon button" class="ui icon button"
type="submit" type="submit"
:aria-label="t('Search')" :aria-label="t('components.library.Podcasts.searchButton')"
> >
<i class="search icon" /> <i class="search icon" />
</button> </button>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="tags-search">Tags</label> <label for="tags-search">{{ $t('components.library.Podcasts.tagsLabel') }}</label>
<tags-selector v-model="tags" /> <tags-selector v-model="tags" />
</div> </div>
<div class="field"> <div class="field">
<label for="artist-ordering">Ordering</label> <label for="artist-ordering">{{ $t('components.library.Podcasts.orderingLabel') }}</label>
<select <select
id="artist-ordering" id="artist-ordering"
v-model="ordering" v-model="ordering"
@ -172,22 +172,22 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="artist-ordering-direction">Ordering direction</label> <label for="artist-ordering-direction">{{ $t('components.library.Podcasts.orderingDirectionLabel') }}</label>
<select <select
id="artist-ordering-direction" id="artist-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.library.Podcasts.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.library.Podcasts.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="artist-results">Results per page</label> <label for="artist-results">{{ $t('components.library.Podcasts.resultsPerPageLabel') }}</label>
<select <select
id="artist-results" id="artist-results"
v-model="paginateBy" v-model="paginateBy"
@ -228,7 +228,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="podcast icon" /> <i class="podcast icon" />
No results matching your query {{ $t('components.library.Podcasts.emptyStateMessage') }}
</div> </div>
<router-link <router-link
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
@ -236,7 +236,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
class="ui success button labeled icon" class="ui success button labeled icon"
> >
<i class="upload icon" /> <i class="upload icon" />
Create a Channel {{ $t('components.library.Podcasts.addChannelLink') }}
</router-link> </router-link>
<h1 <h1
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
@ -245,7 +245,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<div class="actions"> <div class="actions">
<a @click.stop.prevent="showSubscribeModal = true"> <a @click.stop.prevent="showSubscribeModal = true">
<i class="plus icon" /> <i class="plus icon" />
Subscribe to feed {{ $t('components.library.Podcasts.subscribeLink') }}
</a> </a>
</div> </div>
</h1> </h1>
@ -265,7 +265,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
:fullscreen="false" :fullscreen="false"
> >
<h2 class="header"> <h2 class="header">
Subscription {{ $t('components.library.Podcasts.subscriptionModalHeader') }}
</h2> </h2>
<div <div
ref="modalContent" ref="modalContent"
@ -281,7 +281,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic deny button"> <button class="ui basic deny button">
Cancel {{ $t('components.library.Podcasts.cancelButton') }}
</button> </button>
<button <button
form="remote-search" form="remote-search"
@ -289,7 +289,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
class="ui primary button" class="ui primary button"
> >
<i class="bookmark icon" /> <i class="bookmark icon" />
Subscribe {{ $t('components.library.Podcasts.subscribeButton') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

View File

@ -101,8 +101,8 @@ onMounted(() => $('.ui.dropdown').dropdown())
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Enter a radio name…'), searchPlaceholder: t('components.library.Radios.searchPlaceholder'),
title: t('Radios') title: t('components.library.Podcasts.title')
})) }))
const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b))) const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b)))
@ -112,12 +112,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<main v-title="labels.title"> <main v-title="labels.title">
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<h2 class="ui header"> <h2 class="ui header">
Browsing radios {{ $t('components.library.Radios.radioBrowseHeader') }}
</h2> </h2>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<div class="ui row"> <div class="ui row">
<h3 class="ui header"> <h3 class="ui header">
Instance radios {{ $t('components.library.Radios.instanceRadioHeader') }}
</h3> </h3>
<div class="ui cards"> <div class="ui cards">
<radio-card <radio-card
@ -140,14 +140,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<h3 class="ui header"> <h3 class="ui header">
User radios {{ $t('components.library.Radios.userRadioHeader') }}
</h3> </h3>
<router-link <router-link
v-if="isAuthenticated" v-if="isAuthenticated"
class="ui success button" class="ui success button"
to="/library/radios/build" to="/library/radios/build"
> >
Create your own radio {{ $t('components.library.Radios.createRadioLink') }}
</router-link> </router-link>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<form <form
@ -156,7 +156,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
> >
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<label for="radios-search">Search</label> <label for="radios-search">{{ $t('components.library.Radios.searchLabel') }}</label>
<div class="ui action input"> <div class="ui action input">
<input <input
id="radios-search" id="radios-search"
@ -168,14 +168,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<button <button
class="ui icon button" class="ui icon button"
type="submit" type="submit"
:aria-label="t('Search')" :aria-label="t('components.library.Radios.searchButton')"
> >
<i class="search icon" /> <i class="search icon" />
</button> </button>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="radios-ordering">Ordering</label> <label for="radios-ordering">{{ $t('components.library.Radios.orderingLabel') }}</label>
<select <select
id="radios-ordering" id="radios-ordering"
v-model="ordering" v-model="ordering"
@ -191,22 +191,22 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="radios-ordering-direction">Order</label> <label for="radios-ordering-direction">{{ $t('components.library.Radios.orderingDirectionLabel') }}</label>
<select <select
id="radios-ordering-direction" id="radios-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.library.Radios.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.library.Radios.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="radios-results">Results per page</label> <label for="radios-results">{{ $t('components.library.Radios.resultsPerPageLabel') }}</label>
<select <select
id="radios-results" id="radios-results"
v-model="paginateBy" v-model="paginateBy"
@ -230,7 +230,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="feed icon" /> <i class="feed icon" />
No results matching your query {{ $t('components.library.Radios.emptyStateMessage') }}
</div> </div>
<router-link <router-link
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
@ -238,7 +238,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
class="ui success button labeled icon" class="ui success button labeled icon"
> >
<i class="rss icon" /> <i class="rss icon" />
Create a radio {{ $t('components.library.Radios.addRadioLink') }}
</router-link> </router-link>
</div> </div>
<div <div

View File

@ -36,7 +36,7 @@ const labels = computed(() => ({
:to="{name: 'manage.library.tags.detail', params: {id: id}}" :to="{name: 'manage.library.tags.detail', params: {id: id}}"
> >
<i class="wrench icon" /> <i class="wrench icon" />
Open in moderation interface {{ $t('components.library.TagDetail.moderationLink') }}
</router-link> </router-link>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
@ -48,14 +48,14 @@ const labels = computed(() => ({
> >
<template #title> <template #title>
<router-link :to="{name: 'library.artists.browse', query: {tag: id}}"> <router-link :to="{name: 'library.artists.browse', query: {tag: id}}">
Artists {{ $t('components.library.TagDetail.artistsLabel') }}
</router-link> </router-link>
</template> </template>
</artist-widget> </artist-widget>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<h3 class="ui header"> <h3 class="ui header">
Channels {{ $t('components.library.TagDetail.channelsLabel') }}
</h3> </h3>
<channels-widget <channels-widget
:key="'channels' + id" :key="'channels' + id"
@ -73,7 +73,7 @@ const labels = computed(() => ({
> >
<template #title> <template #title>
<router-link :to="{name: 'library.albums.browse', query: {tag: id}}"> <router-link :to="{name: 'library.albums.browse', query: {tag: id}}">
Albums {{ $t('components.library.TagDetail.albumsLabel') }}
</router-link> </router-link>
</template> </template>
</album-widget> </album-widget>
@ -89,7 +89,7 @@ const labels = computed(() => ({
:filters="{playable: true, ordering: '-creation_date', tag: id}" :filters="{playable: true, ordering: '-creation_date', tag: id}"
> >
<template #title> <template #title>
Tracks {{ $t('components.library.TagDetail.tracksLabel') }}
</template> </template>
</track-widget> </track-widget>
<div class="ui clearing hidden divider" /> <div class="ui clearing hidden divider" />

View File

@ -99,7 +99,7 @@ onMounted(async () => {
class="search" class="search"
> >
<div class="default text"> <div class="default text">
Search {{ $t('components.library.TagSelector.searchPlaceholder') }}
</div> </div>
</div> </div>
</template> </template>

View File

@ -89,9 +89,9 @@ const subtitle = computed(() => {
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('Track'), title: t('components.library.TrackBase.title'),
download: t('Download'), download: t('components.library.TrackBase.downloadLabel'),
more: t('More…') more: t('components.library.TrackBase.moreLabel')
})) }))
const isLoading = ref(false) const isLoading = ref(false)
@ -155,7 +155,7 @@ const remove = async () => {
class="vibrant" class="vibrant"
:track="track" :track="track"
> >
Play {{ $t('components.library.TrackBase.playButton') }}
</play-button> </play-button>
&nbsp; &nbsp;
<track-favorite-icon <track-favorite-icon
@ -185,7 +185,7 @@ const remove = async () => {
v-model:show="showEmbedModal" v-model:show="showEmbedModal"
> >
<h4 class="header"> <h4 class="header">
Embed this track on your website {{ $t('components.library.TrackBase.embedModalHeader') }}
</h4> </h4>
<div class="scrolling content"> <div class="scrolling content">
<div class="description"> <div class="description">
@ -197,7 +197,7 @@ const remove = async () => {
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic deny button"> <button class="ui basic deny button">
Cancel {{ $t('components.library.TrackBase.cancelButton') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>
@ -218,9 +218,7 @@ const remove = async () => {
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
<translate {{ $t('components.library.TrackBase.domainViewLink', {domain: domain}) }}
:translate-params="{domain: domain}"
>View on %{ domain }</translate>
</a> </a>
<div <div
v-if="isEmbedable" v-if="isEmbedable"
@ -229,7 +227,7 @@ const remove = async () => {
@click="showEmbedModal = !showEmbedModal" @click="showEmbedModal = !showEmbedModal"
> >
<i class="code icon" /> <i class="code icon" />
Embed {{ $t('components.library.TrackBase.embedButton') }}
</div> </div>
<a <a
:href="wikipediaUrl" :href="wikipediaUrl"
@ -238,7 +236,7 @@ const remove = async () => {
class="basic item" class="basic item"
> >
<i class="wikipedia w icon" /> <i class="wikipedia w icon" />
Search on Wikipedia {{ $t('components.library.TrackBase.wikipediaLink') }}
</a> </a>
<a <a
v-if="discogsUrl" v-if="discogsUrl"
@ -248,7 +246,7 @@ const remove = async () => {
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
Search on Discogs {{ $t('components.library.TrackBase.discogsLink') }}
</a> </a>
<router-link <router-link
v-if="track.is_local" v-if="track.is_local"
@ -256,7 +254,7 @@ const remove = async () => {
class="basic item" class="basic item"
> >
<i class="edit icon" /> <i class="edit icon" />
Edit {{ $t('components.library.TrackBase.editButton') }}
</router-link> </router-link>
<dangerous-button <dangerous-button
v-if="artist && $store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === $store.state.auth.fullUsername" v-if="artist && $store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === $store.state.auth.fullUsername"
@ -264,22 +262,22 @@ const remove = async () => {
@confirm="remove()" @confirm="remove()"
> >
<i class="ui trash icon" /> <i class="ui trash icon" />
Delete {{ $t('components.library.TrackBase.deleteButton') }}
<template #modal-header> <template #modal-header>
<p> <p>
Delete this track? {{ $t('components.library.TrackBase.deleteModalHeader') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<div> <div>
<p> <p>
The track will be deleted, as well as any related files and data. This action is irreversible. {{ $t('components.library.TrackBase.deleteModalMessage') }}
</p> </p>
</div> </div>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<p> <p>
Delete {{ $t('components.library.TrackBase.deleteButton') }}
</p> </p>
</template> </template>
</dangerous-button> </dangerous-button>
@ -300,7 +298,7 @@ const remove = async () => {
:to="{name: 'manage.library.tracks.detail', params: {id: track.id}}" :to="{name: 'manage.library.tracks.detail', params: {id: track.id}}"
> >
<i class="wrench icon" /> <i class="wrench icon" />
Open in moderation interface {{ $t('components.library.TrackBase.moderationLink') }}
</router-link> </router-link>
<a <a
v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser" v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
@ -310,7 +308,7 @@ const remove = async () => {
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<i class="wrench icon" /> <i class="wrench icon" />
View in Django's admin&nbsp; {{ $t('components.library.TrackBase.djangoLink') }}
</a> </a>
</div> </div>
</button> </button>

View File

@ -76,82 +76,82 @@ watchEffect(() => {
class="ui fluid image track-cover-image" class="ui fluid image track-cover-image"
> >
<h3 class="ui header"> <h3 class="ui header">
<translate <span
v-if="track.artist?.content_category === 'music'" v-if="track.artist?.content_category === 'music'"
> >
Track Details {{ $t('components.library.TrackDetail.trackDetails') }}
</translate> </span>
<translate <span
v-else v-else
> >
Episode Details {{ $t('components.library.TrackDetail.episodeDetails') }}
</translate> </span>
</h3> </h3>
<table class="ui basic table"> <table class="ui basic table">
<tbody> <tbody>
<tr> <tr>
<td> <td>
Duration {{ $t('components.library.TrackDetail.durationTableHeader') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<template v-if="upload.duration"> <template v-if="upload.duration">
{{ time.parse(upload.duration) }} {{ time.parse(upload.duration) }}
</template> </template>
<translate <span
v-else v-else
> >
N/A {{ $t('components.library.TrackDetail.notApplicable') }}
</translate> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Size {{ $t('components.library.TrackDetail.sizeTableLabel') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<template v-if="upload.size"> <template v-if="upload.size">
{{ humanSize(upload.size) }} {{ humanSize(upload.size) }}
</template> </template>
<translate <span
v-else v-else
> >
N/A {{ $t('components.library.TrackDetail.notApplicable') }}
</translate> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Codec {{ $t('components.library.TrackDetail.codecTableLabel') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<template v-if="upload.extension"> <template v-if="upload.extension">
{{ upload.extension }} {{ upload.extension }}
</template> </template>
<translate <span
v-else v-else
> >
N/A {{ $t('components.library.TrackDetail.notApplicable') }}
</translate> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Bitrate {{ $t('components.library.TrackDetail.bitrateTableLabel') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<template v-if="upload.bitrate"> <template v-if="upload.bitrate">
{{ humanSize(upload.bitrate) }}/s {{ $t('components.library.TrackDetail.uploadBitrateTableLabel', {bitrate: humanSize(upload.bitrate)}) }}
</template> </template>
<translate <span
v-else v-else
> >
N/A {{ $t('components.library.TrackDetail.notApplicable') }}
</translate> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Downloads {{ $t('components.library.TrackDetail.downloadsTableLabel') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
{{ track.downloads_count }} {{ track.downloads_count }}
@ -172,13 +172,13 @@ watchEffect(() => {
:can-update="false" :can-update="false"
/> />
<h2 class="ui header"> <h2 class="ui header">
Release Details {{ $t('components.library.TrackDetail.releaseDetailsHeader') }}
</h2> </h2>
<table class="ui basic table ellipsis-rows"> <table class="ui basic table ellipsis-rows">
<tbody> <tbody>
<tr> <tr>
<td> <td>
Artist {{ $t('components.library.TrackDetail.artistTableLabel') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<router-link :to="{name: 'library.artists.detail', params: {id: track.artist?.id}}"> <router-link :to="{name: 'library.artists.detail', params: {id: track.artist?.id}}">
@ -188,16 +188,16 @@ watchEffect(() => {
</tr> </tr>
<tr v-if="track.album"> <tr v-if="track.album">
<td> <td>
<translate <span
v-if="track.album.artist.content_category === 'music'" v-if="track.album.artist.content_category === 'music'"
> >
Album {{ $t('components.library.TrackDetail.albumTableLabel') }}
</translate> </span>
<translate <span
v-else v-else
> >
Serie {{ $t('components.library.TrackDetail.seriesTableLabel') }}
</translate> </span>
</td> </td>
<td class="right aligned"> <td class="right aligned">
<router-link :to="{name: 'library.albums.detail', params: {id: track.album.id}}"> <router-link :to="{name: 'library.albums.detail', params: {id: track.album.id}}">
@ -207,20 +207,20 @@ watchEffect(() => {
</tr> </tr>
<tr> <tr>
<td> <td>
Year {{ $t('components.library.TrackDetail.yearTableLabel') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<template v-if="track.album && track.album.release_date"> <template v-if="track.album && track.album.release_date">
{{ momentFormat(new Date(track.album.release_date), 'Y') }} {{ momentFormat(new Date(track.album.release_date), 'Y') }}
</template> </template>
<template v-else> <template v-else>
N/A {{ $t('components.library.TrackDetail.notApplicable') }}
</template> </template>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Copyright {{ $t('components.library.TrackDetail.copyrightTableLabel') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<span <span
@ -228,13 +228,13 @@ watchEffect(() => {
:title="track.copyright" :title="track.copyright"
>{{ truncate(track.copyright, 50) }}</span> >{{ truncate(track.copyright, 50) }}</span>
<template v-else> <template v-else>
N/A {{ $t('components.library.TrackDetail.notApplicable') }}
</template> </template>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
License {{ $t('components.library.TrackDetail.licenseTableLabel') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<a <a
@ -243,16 +243,16 @@ watchEffect(() => {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
>{{ license.name }}</a> >{{ license.name }}</a>
<translate <span
v-else v-else
> >
N/A {{ $t('components.library.TrackDetail.notApplicable') }}
</translate> </span>
</td> </td>
</tr> </tr>
<tr v-if="!track.is_local"> <tr v-if="!track.is_local">
<td> <td>
URL {{ $t('components.library.TrackDetail.urlTableLabel') }}
</td> </td>
<td :title="track.fid"> <td :title="track.fid">
<a <a
@ -273,10 +273,10 @@ watchEffect(() => {
rel="noreferrer noopener" rel="noreferrer noopener"
> >
<i class="external icon" /> <i class="external icon" />
View on MusicBrainz {{ $t('components.library.TrackDetail.musicbrainzLink') }}
</a> </a>
<h2 class="ui header"> <h2 class="ui header">
Related Playlists {{ $t('components.library.TrackDetail.relatedPlaylistsHeader') }}
</h2> </h2>
<playlist-widget <playlist-widget
:url="'playlists/'" :url="'playlists/'"
@ -284,13 +284,13 @@ watchEffect(() => {
/> />
<h2 class="ui header"> <h2 class="ui header">
Related Libraries {{ $t('components.library.TrackDetail.userLibraryHeader') }}
</h2> </h2>
<library-widget <library-widget
:url="`tracks/${track.id}/libraries/`" :url="`tracks/${track.id}/libraries/`"
@loaded="emit('libraries-loaded', $event)" @loaded="emit('libraries-loaded', $event)"
> >
This track is present in the following libraries: {{ $t('components.library.TrackDetail.userLibraryDescription') }}
</library-widget> </library-widget>
</div> </div>
</div> </div>

View File

@ -47,19 +47,19 @@ fetchLicenses()
<translate <translate
v-if="canEdit" v-if="canEdit"
> >
Edit this track {{ $t('components.library.TrackEdit.editTrackHeader') }}
</translate> </translate>
<translate <translate
key="2" key="2"
> >
Suggest an edit on this track {{ $t('components.library.TrackEdit.suggestEditHeader') }}
</translate> </translate>
</h2> </h2>
<div <div
v-if="!object.is_local" v-if="!object.is_local"
class="ui message" class="ui message"
> >
This object is managed by another server, you cannot edit it. {{ $t('components.library.TrackEdit.remoteObjectWarning') }}
</div> </div>
<edit-form <edit-form
v-else-if="!isLoadingLicenses" v-else-if="!isLoadingLicenses"

View File

@ -55,10 +55,10 @@ const { t } = useI18n()
const router = useRouter() const router = useRouter()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('Radio Builder'), title: t('components.library.radios.Builder.title'),
placeholder: { placeholder: {
description: t('My awesome description'), description: t('components.library.radios.Builder.descriptionPlaceholder'),
name: t('My awesome radio') name: t('components.library.radios.Builder.namePlaceholder')
} }
})) }))
@ -203,10 +203,10 @@ onMounted(() => {
<div> <div>
<section> <section>
<h2 class="ui header"> <h2 class="ui header">
Builder {{ $t('components.library.radios.Builder.builderHeader') }}
</h2> </h2>
<p> <p>
You can use this interface to build your own custom radio, which will play tracks according to your criteria. {{ $t('components.library.radios.Builder.builderDescription') }}
</p> </p>
<div class="ui form"> <div class="ui form">
<div <div
@ -215,16 +215,16 @@ onMounted(() => {
> >
<h4 class="header"> <h4 class="header">
<template v-if="radioName"> <template v-if="radioName">
Radio updated {{ $t('components.library.radios.Builder.radioUpdateSuccess') }}
</template> </template>
<template v-else> <template v-else>
Radio created {{ $t('components.library.radios.Builder.radioCreateSuccess') }}
</template> </template>
</h4> </h4>
</div> </div>
<div class=""> <div class="">
<div class="field"> <div class="field">
<label for="name">Radio name</label> <label for="name">{{ $t('components.library.radios.Builder.radioNameLabel') }}</label>
<input <input
id="name" id="name"
v-model="radioName" v-model="radioName"
@ -234,7 +234,7 @@ onMounted(() => {
> >
</div> </div>
<div class="field"> <div class="field">
<label for="description">Description</label> <label for="description">{{ $t('components.library.radios.Builder.radioDescriptionLabel') }}</label>
<textarea <textarea
id="description" id="description"
v-model="radioDesc" v-model="radioDesc"
@ -249,7 +249,7 @@ onMounted(() => {
v-model="isPublic" v-model="isPublic"
type="checkbox" type="checkbox"
> >
<label for="public">Display publicly</label> <label for="public">{{ $t('components.library.radios.Builder.publicLabel') }}</label>
</div> </div>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<button <button
@ -257,7 +257,7 @@ onMounted(() => {
:class="['ui', 'success', {loading: isLoading}, 'button']" :class="['ui', 'success', {loading: isLoading}, 'button']"
@click="save" @click="save"
> >
Save {{ $t('components.library.radios.Builder.saveButton') }}
</button> </button>
<radio-button <radio-button
v-if="id" v-if="id"
@ -271,14 +271,14 @@ onMounted(() => {
<label <label
id="radioFilterLabel" id="radioFilterLabel"
for="radio-filters" for="radio-filters"
>Add filters to customize your radio</label> >{{ $t('components.library.radios.Builder.addFiltersLabel') }}</label>
<select <select
id="radio-filters" id="radio-filters"
v-model="currentFilterType" v-model="currentFilterType"
class="ui dropdown" class="ui dropdown"
> >
<option value=""> <option value="">
Select a filter {{ $t('components.library.radios.Builder.selectFilterLabel') }}
</option> </option>
<option <option
v-for="f in availableFilters" v-for="f in availableFilters"
@ -294,7 +294,7 @@ onMounted(() => {
class="ui button" class="ui button"
@click="add" @click="add"
> >
Add filter {{ $t('components.library.radios.Builder.addFilterButton') }}
</button> </button>
</div> </div>
<p v-if="currentFilter"> <p v-if="currentFilter">
@ -305,19 +305,19 @@ onMounted(() => {
<thead> <thead>
<tr> <tr>
<th class="two wide"> <th class="two wide">
Filter name {{ $t('components.library.radios.Builder.filterNameTableHeader') }}
</th> </th>
<th class="one wide"> <th class="one wide">
Exclude {{ $t('components.library.radios.Builder.excludeTableHeader') }}
</th> </th>
<th class="six wide"> <th class="six wide">
Config {{ $t('components.library.radios.Builder.configTableHeader') }}
</th> </th>
<th class="five wide"> <th class="five wide">
Candidates {{ $t('components.library.radios.Builder.candidatesTableHeader') }}
</th> </th>
<th class="two wide"> <th class="two wide">
Actions {{ $t('components.library.radios.Builder.actionsTableHeader') }}
</th> </th>
</tr> </tr>
</thead> </thead>
@ -335,12 +335,9 @@ onMounted(() => {
</table> </table>
<template v-if="checkResult && checkResult.candidates && checkResult.candidates.count"> <template v-if="checkResult && checkResult.candidates && checkResult.candidates.count">
<h3 <h3
v-translate="{count: checkResult.candidates.count}"
class="ui header" class="ui header"
:translate-n="checkResult.candidates.count"
translate-plural="%{ count } tracks matching combined filters"
> >
%{ count } track matching combined filters {{ $t('components.library.radios.Builder.matchingTracks', {count: checkResult.candidates.count}) }}
</h3> </h3>
<track-table <track-table
v-if="checkResult.candidates.sample" v-if="checkResult.candidates.sample"

View File

@ -124,7 +124,7 @@ watch(exclude, fetchCandidates)
for="exclude-filter" for="exclude-filter"
class="visually-hidden" class="visually-hidden"
> >
Exclude {{ $t('components.library.radios.Filter.excludeLabel') }}
</label> </label>
</div> </div>
</td> </td>
@ -173,14 +173,14 @@ watch(exclude, fetchCandidates)
:class="['ui', {'success': checkResult.candidates.count > 10}, 'label']" :class="['ui', {'success': checkResult.candidates.count > 10}, 'label']"
@click.prevent="showCandidadesModal = !showCandidadesModal" @click.prevent="showCandidadesModal = !showCandidadesModal"
> >
{{ checkResult.candidates.count }} tracks matching filter {{ $t('components.library.radios.Filter.matchingTracks', {count: checkResult.candidates.count}) }}
</a> </a>
<semantic-modal <semantic-modal
v-if="checkResult" v-if="checkResult"
v-model:show="showCandidadesModal" v-model:show="showCandidadesModal"
> >
<h4 class="header"> <h4 class="header">
Tracks matching filter {{ $t('components.library.radios.Filter.matchingTracksModalHeader') }}
</h4> </h4>
<div class="content"> <div class="content">
<div class="description"> <div class="description">
@ -192,7 +192,7 @@ watch(exclude, fetchCandidates)
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui deny button"> <button class="ui deny button">
Cancel {{ $t('components.library.radios.Filter.cancelButton') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>
@ -202,7 +202,7 @@ watch(exclude, fetchCandidates)
class="ui danger button" class="ui danger button"
@click="$emit('delete', index)" @click="$emit('delete', index)"
> >
Remove {{ $t('components.library.radios.Filter.removeButton') }}
</button> </button>
</td> </td>
</tr> </tr>

View File

@ -82,8 +82,8 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search by domain, name, account…'), searchPlaceholder: t('components.manage.ChannelsTable.searchPlaceholder'),
openModeration: t('Open in moderation interface') openModeration: t('components.manage.ChannelsTable.openModeration')
})) }))
</script> </script>
@ -92,7 +92,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="channel-search">Search</label> <label for="channel-search">{{ $t('components.manage.ChannelsTable.searchLabel') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="channel-search" id="channel-search"
@ -105,7 +105,7 @@ const labels = computed(() => ({
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="channel-category">Category</label> <label for="channel-category">{{ $t('components.manage.ChannelsTable.categoryLabel') }}</label>
<select <select
id="channel-category" id="channel-category"
class="ui dropdown" class="ui dropdown"
@ -113,7 +113,7 @@ const labels = computed(() => ({
@change="addSearchToken('category', ($event.target as HTMLSelectElement).value)" @change="addSearchToken('category', ($event.target as HTMLSelectElement).value)"
> >
<option value=""> <option value="">
All {{ $t('components.manage.ChannelsTable.allOption') }}
</option> </option>
<option value="podcast"> <option value="podcast">
{{ sharedLabels.fields.content_category.choices.podcast }} {{ sharedLabels.fields.content_category.choices.podcast }}
@ -127,7 +127,7 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="channel-ordering">Ordering</label> <label for="channel-ordering">{{ $t('components.manage.ChannelsTable.orderingLabel') }}</label>
<select <select
id="channel-ordering" id="channel-ordering"
v-model="ordering" v-model="ordering"
@ -143,17 +143,17 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="channel-ordering-direction">Ordering direction</label> <label for="channel-ordering-direction">{{ $t('components.manage.ChannelsTable.orderingDirectionLabel') }}</label>
<select <select
id="channel-ordering-direction" id="channel-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.manage.ChannelsTable.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.manage.ChannelsTable.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
@ -176,22 +176,22 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
Name {{ $t('components.manage.ChannelsTable.nameTableHeader') }}
</th> </th>
<th> <th>
Account {{ $t('components.manage.ChannelsTable.accountTableHeader') }}
</th> </th>
<th> <th>
Domain {{ $t('components.manage.ChannelsTable.domainTableHeader') }}
</th> </th>
<th> <th>
Albums {{ $t('components.manage.ChannelsTable.albumsTableHeader') }}
</th> </th>
<th> <th>
Tracks {{ $t('components.manage.ChannelsTable.tracksTableHeader') }}
</th> </th>
<th> <th>
Creation date {{ $t('components.manage.ChannelsTable.creationDateTableHeader') }}
</th> </th>
</template> </template>
<template <template
@ -232,7 +232,7 @@ const labels = computed(() => ({
@click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)" @click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)"
> >
<i class="home icon" /> <i class="home icon" />
Local {{ $t('components.manage.ChannelsTable.localLink') }}
</a> </a>
</td> </td>
<td> <td>
@ -257,12 +257,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
<translate {{ $t('components.manage.ChannelsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
>
Showing results %{ start }-%{ end } on %{ total }
</translate>
</span> </span>
</div> </div>
</div> </div>

View File

@ -54,8 +54,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('Delete'), label: t('components.manage.library.AlbumsTable.deleteActionLabel'),
confirmationMessage: t('The selected albums will be removed, as well as associated tracks, uploads, favorites and listening history. This action is irreversible.'), confirmationMessage: t('components.manage.library.AlbumsTable.deleteActionConfirmation'),
isDangerous: true, isDangerous: true,
allowAll: false, allowAll: false,
confirmColor: 'danger' confirmColor: 'danger'
@ -94,8 +94,8 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search by domain, title, artist, MusicBrainz ID…'), searchPlaceholder: t('components.manage.library.AlbumsTable.searchPlaceholder'),
openModeration: t('Open in moderation interface') openModeration: t('components.manage.library.AlbumsTable.openModeration')
})) }))
</script> </script>
@ -104,7 +104,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="albums-search">Search</label> <label for="albums-search">{{ $t('components.manage.library.AlbumsTable.searchLabel') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="albums-search" id="albums-search"
@ -117,7 +117,7 @@ const labels = computed(() => ({
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="albums-ordering">Ordering</label> <label for="albums-ordering">{{ $t('components.manage.library.AlbumsTable.orderingLabel') }}</label>
<select <select
id="albums-ordering" id="albums-ordering"
v-model="ordering" v-model="ordering"
@ -133,16 +133,16 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="albums-ordering-direction">Ordering direction</label> <label for="albums-ordering-direction">{{ $t('components.manage.library.AlbumsTable.orderingDirectionLabel') }}</label>
<select <select
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.manage.library.AlbumsTable.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.manage.library.AlbumsTable.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
@ -165,22 +165,22 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
Title {{ $t('components.manage.library.AlbumsTable.nameTableHeader') }}
</th> </th>
<th> <th>
Artist {{ $t('components.manage.library.AlbumsTable.artistTableHeader') }}
</th> </th>
<th> <th>
Domain {{ $t('components.manage.library.AlbumsTable.domainTableHeader') }}
</th> </th>
<th> <th>
Tracks {{ $t('components.manage.library.AlbumsTable.tracksTableHeader') }}
</th> </th>
<th> <th>
Release date {{ $t('components.manage.library.AlbumsTable.releaseDateTableHeader') }}
</th> </th>
<th> <th>
Creation date {{ $t('components.manage.library.AlbumsTable.creationDateTableHeader') }}
</th> </th>
</template> </template>
<template <template
@ -222,7 +222,7 @@ const labels = computed(() => ({
@click.prevent="addSearchToken('domain', scope.obj.domain)" @click.prevent="addSearchToken('domain', scope.obj.domain)"
> >
<i class="home icon" /> <i class="home icon" />
Local {{ $t('components.manage.library.AlbumsTable.localLink') }}
</a> </a>
</td> </td>
<td> <td>
@ -233,11 +233,11 @@ const labels = computed(() => ({
v-if="scope.obj.release_date" v-if="scope.obj.release_date"
:date="scope.obj.release_date" :date="scope.obj.release_date"
/> />
<translate <span
v-else v-else
> >
N/A {{ $t('components.manage.library.AlbumsTable.notApplicable') }}
</translate> </span>
</td> </td>
<td> <td>
<human-date :date="scope.obj.creation_date" /> <human-date :date="scope.obj.creation_date" />
@ -255,12 +255,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
<translate {{ $t('components.manage.library.AlbumsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
>
Showing results %{ start }-%{ end } on %{ total }
</translate>
</span> </span>
</div> </div>
</div> </div>

View File

@ -52,8 +52,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('Delete'), label: t('components.manage.library.ArtistsTable.deleteActionLabel'),
confirmationMessage: t('The selected artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.'), confirmationMessage: t('components.manage.library.ArtistsTable.deleteActionConfirmation'),
isDangerous: true, isDangerous: true,
allowAll: false, allowAll: false,
confirmColor: 'danger' confirmColor: 'danger'
@ -93,7 +93,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search by domain, name, MusicBrainz ID…') searchPlaceholder: t('components.manage.library.ArtistsTable.searchPlaceholder')
})) }))
const getUrl = (artist: { channel?: number; id: number }) => { const getUrl = (artist: { channel?: number; id: number }) => {
@ -108,7 +108,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="artists-serarch">Search</label> <label for="artists-serarch">{{ $t('components.manage.library.ArtistsTable.searchLabel') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="artists-search" id="artists-search"
@ -121,7 +121,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="artists-category">Category</label> <label for="artists-category">{{ $t('components.manage.library.ArtistsTable.categoryLabel') }}</label>
<select <select
id="artists-category" id="artists-category"
class="ui dropdown" class="ui dropdown"
@ -129,7 +129,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
@change="addSearchToken('category', ($event.target as HTMLSelectElement).value)" @change="addSearchToken('category', ($event.target as HTMLSelectElement).value)"
> >
<option value=""> <option value="">
All {{ $t('components.manage.library.ArtistsTable.allOption') }}
</option> </option>
<option value="podcast"> <option value="podcast">
{{ sharedLabels.fields.content_category.choices.podcast }} {{ sharedLabels.fields.content_category.choices.podcast }}
@ -143,7 +143,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="artists-ordering">Ordering</label> <label for="artists-ordering">{{ $t('components.manage.library.ArtistsTable.orderingLabel') }}</label>
<select <select
id="artists-ordering" id="artists-ordering"
v-model="ordering" v-model="ordering"
@ -159,17 +159,17 @@ const getUrl = (artist: { channel?: number; id: number }) => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="artists-ordering-direction">Ordering direction</label> <label for="artists-ordering-direction">{{ $t('components.manage.library.ArtistsTable.orderingDirectionLabel') }}</label>
<select <select
id="artists-ordering-direction" id="artists-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.manage.library.ArtistsTable.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.manage.library.ArtistsTable.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
@ -192,19 +192,19 @@ const getUrl = (artist: { channel?: number; id: number }) => {
> >
<template #header-cells> <template #header-cells>
<th> <th>
Name {{ $t('components.manage.library.ArtistsTable.nameTableHeader') }}
</th> </th>
<th> <th>
Domain {{ $t('components.manage.library.ArtistsTable.domainTableHeader') }}
</th> </th>
<th> <th>
Albums {{ $t('components.manage.library.ArtistsTable.albumsTableHeader') }}
</th> </th>
<th> <th>
Tracks {{ $t('components.manage.library.ArtistsTable.tracksTableHeader') }}
</th> </th>
<th> <th>
Creation date {{ $t('components.manage.library.ArtistsTable.creationDateTableHeader') }}
</th> </th>
</template> </template>
<template <template
@ -234,7 +234,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
@click.prevent="addSearchToken('domain', scope.obj.domain)" @click.prevent="addSearchToken('domain', scope.obj.domain)"
> >
<i class="home icon" /> <i class="home icon" />
Local {{ $t('components.manage.library.ArtistsTable.localLink') }}
</a> </a>
</td> </td>
<td> <td>
@ -259,12 +259,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
<translate {{ $t('components.manage.library.ArtistsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
>
Showing results %{ start }-%{ end } on %{ total }
</translate>
</span> </span>
</div> </div>
</div> </div>

View File

@ -142,7 +142,7 @@ fetchData()
const { t } = useI18n() const { t } = useI18n()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search by account, summary, domain…') searchPlaceholder: t('components.manage.library.EditsCardList.searchPlaceholder')
})) }))
const handle = (type: 'delete' | 'approved', id: string, value: boolean) => { const handle = (type: 'delete' | 'approved', id: string, value: boolean) => {
@ -165,7 +165,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui field"> <div class="ui field">
<label for="search-edits">Search</label> <label for="search-edits">{{ $t('components.manage.library.EditsCardList.searchPlaceholder') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="search-edits" id="search-edits"
@ -178,7 +178,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="edit-status">Status</label> <label for="edit-status">{{ $t('components.manage.library.EditsCardList.statusLabel') }}</label>
<select <select
id="edit-status" id="edit-status"
class="ui dropdown" class="ui dropdown"
@ -186,21 +186,21 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
@change="addSearchToken('is_approved', ($event.target as HTMLSelectElement).value)" @change="addSearchToken('is_approved', ($event.target as HTMLSelectElement).value)"
> >
<option value=""> <option value="">
All {{ $t('components.manage.library.EditsCardList.allOption') }}
</option> </option>
<option value="null"> <option value="null">
Pending review {{ $t('components.manage.library.EditsCardList.pendingReviewLabel') }}
</option> </option>
<option value="yes"> <option value="yes">
Approved {{ $t('components.manage.library.EditsCardList.approvedLabel') }}
</option> </option>
<option value="no"> <option value="no">
Rejected {{ $t('components.manage.library.EditsCardList.rejectedLabel') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="edit-ordering">Ordering</label> <label for="edit-ordering">{{ $t('components.manage.library.EditsCardList.orderingLabel') }}</label>
<select <select
id="edit-ordering" id="edit-ordering"
v-model="ordering" v-model="ordering"
@ -216,17 +216,17 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="edit-ordering-direction">Order</label> <label for="edit-ordering-direction">{{ $t('components.manage.library.EditsCardList.orderingDirectionLabel') }}</label>
<select <select
id="edit-ordering-direction" id="edit-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.manage.library.EditsCardList.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.manage.library.EditsCardList.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
@ -266,12 +266,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
<translate {{ $t('components.manage.library.EditsCardList.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
>
Showing results %{ start }-%{ end } on %{ total }
</translate>
</span> </span>
</div> </div>
</div> </div>

View File

@ -54,8 +54,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('Delete'), label: t('components.manage.library.LibrariesTable.deleteActionLabel'),
confirmationMessage: t('The selected library will be removed, as well as associated uploads and follows. This action is irreversible.'), confirmationMessage: t('components.manage.library.LibrariesTable.deleteActionConfirmation'),
isDangerous: true, isDangerous: true,
allowAll: false, allowAll: false,
confirmColor: 'danger' confirmColor: 'danger'
@ -94,7 +94,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search by domain, actor, name, description…') searchPlaceholder: t('components.manage.library.LibrariesTable.searchPlaceholder')
})) }))
const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => { const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@ -107,7 +107,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="libraries-search">Search</label> <label for="libraries-search">{{ $t('components.manage.library.LibrariesTable.searchLabel') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="libraries-search" id="libraries-search"
@ -120,7 +120,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="libraries-visibility">Visibility</label> <label for="libraries-visibility">{{ $t('components.manage.library.LibrariesTable.visibilityLabel') }}</label>
<select <select
id="libraries-visibility" id="libraries-visibility"
class="ui dropdown" class="ui dropdown"
@ -128,7 +128,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@change="addSearchToken('privacy_level', ($event.target as HTMLSelectElement).value)" @change="addSearchToken('privacy_level', ($event.target as HTMLSelectElement).value)"
> >
<option value=""> <option value="">
All {{ $t('components.manage.library.LibrariesTable.allOption') }}
</option> </option>
<option value="me"> <option value="me">
{{ sharedLabels.fields.privacy_level.shortChoices.me }} {{ sharedLabels.fields.privacy_level.shortChoices.me }}
@ -142,7 +142,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="libraries-ordering">Ordering</label> <label for="libraries-ordering">{{ $t('components.manage.library.LibrariesTable.orderingLabel') }}</label>
<select <select
id="libraries-ordering" id="libraries-ordering"
v-model="ordering" v-model="ordering"
@ -158,17 +158,17 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="libraries-ordering-direction">Ordering direction</label> <label for="libraries-ordering-direction">{{ $t('components.manage.library.LibrariesTable.orderingDirectionLabel') }}</label>
<select <select
id="libraries-ordering-direction" id="libraries-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.manage.library.LibrariesTable.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.manage.library.LibrariesTable.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
@ -191,25 +191,25 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
> >
<template #header-cells> <template #header-cells>
<th> <th>
Name {{ $t('components.manage.library.LibrariesTable.nameTableHeader') }}
</th> </th>
<th> <th>
Account {{ $t('components.manage.library.LibrariesTable.accountTableHeader') }}
</th> </th>
<th> <th>
Domain {{ $t('components.manage.library.LibrariesTable.domainTableHeader') }}
</th> </th>
<th> <th>
Visibility {{ $t('components.manage.library.LibrariesTable.visibilityTableHeader') }}
</th> </th>
<th> <th>
Uploads {{ $t('components.manage.library.LibrariesTable.uploadsTableHeader') }}
</th> </th>
<th> <th>
Followers {{ $t('components.manage.library.LibrariesTable.followersTableHeader') }}
</th> </th>
<th> <th>
Creation date {{ $t('components.manage.library.LibrariesTable.creationDateTableHeader') }}
</th> </th>
</template> </template>
<template #row-cells="scope"> <template #row-cells="scope">
@ -248,7 +248,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@click.prevent="addSearchToken('domain', scope.obj.domain)" @click.prevent="addSearchToken('domain', scope.obj.domain)"
> >
<i class="home icon" /> <i class="home icon" />
Local {{ $t('components.manage.library.LibrariesTable.localLink') }}
</a> </a>
</td> </td>
<td> <td>
@ -283,12 +283,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
<translate {{ $t('components.manage.library.LibrariesTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
>
Showing results %{ start }-%{ end } on %{ total }
</translate>
</span> </span>
</div> </div>
</div> </div>

View File

@ -57,8 +57,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('Delete'), label: t('components.manage.library.TagsTable.deleteActionLabel'),
confirmationMessage: t('The selected tag will be removed and unlinked with existing content, if any. This action is irreversible.'), confirmationMessage: t('components.manage.library.TagsTable.deleteActionConfirmation'),
isDangerous: true, isDangerous: true,
allowAll: false, allowAll: false,
confirmColor: 'danger' confirmColor: 'danger'
@ -97,7 +97,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search by name') searchPlaceholder: t('components.manage.library.TagsTable.searchPlaceholder')
})) }))
const detailedUpload = ref() const detailedUpload = ref()
@ -109,7 +109,7 @@ const showUploadDetailModal = ref(false)
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="tags-search">Search</label> <label for="tags-search">{{ $t('components.manage.library.TagsTable.searchLabel') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="tags-search" id="tags-search"
@ -122,7 +122,7 @@ const showUploadDetailModal = ref(false)
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="tags-ordering">Ordering</label> <label for="tags-ordering">{{ $t('components.manage.library.TagsTable.orderingLabel') }}</label>
<select <select
id="tags-ordering" id="tags-ordering"
v-model="ordering" v-model="ordering"
@ -138,17 +138,17 @@ const showUploadDetailModal = ref(false)
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="tags-ordering-direction">Ordering direction</label> <label for="tags-ordering-direction">{{ $t('components.manage.library.TagsTable.orderingDirectionLabel') }}</label>
<select <select
id="tags-ordering-direction" id="tags-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.manage.library.TagsTable.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.manage.library.TagsTable.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
@ -177,19 +177,19 @@ const showUploadDetailModal = ref(false)
> >
<template #header-cells> <template #header-cells>
<th> <th>
Name {{ $t('components.manage.library.TagsTable.nameTableHeader') }}
</th> </th>
<th> <th>
Artists {{ $t('components.manage.library.TagsTable.artistsTableHeader') }}
</th> </th>
<th> <th>
Albums {{ $t('components.manage.library.TagsTable.albumsTableHeader') }}
</th> </th>
<th> <th>
Tracks {{ $t('components.manage.library.TagsTable.tracksTableHeader') }}
</th> </th>
<th> <th>
Creation date {{ $t('components.manage.library.TagsTable.creationDateTableHeader') }}
</th> </th>
</template> </template>
<template <template
@ -225,12 +225,7 @@ const showUploadDetailModal = ref(false)
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
<translate {{ $t('components.manage.library.TagsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
>
Showing results %{ start }-%{ end } on %{ total }
</translate>
</span> </span>
</div> </div>
</div> </div>

View File

@ -52,8 +52,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('Delete'), label: t('components.manage.library.TracksTable.deleteActionLabel'),
confirmationMessage: t('The selected tracks will be removed, as well as associated uploads, favorites and listening history. This action is irreversible.'), confirmationMessage: t('components.manage.library.TracksTable.deleteActionConfirmation'),
isDangerous: true, isDangerous: true,
allowAll: false, allowAll: false,
confirmColor: 'danger' confirmColor: 'danger'
@ -92,7 +92,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search by domain, title, artist, album, MusicBrainz ID…') searchPlaceholder: t('components.manage.library.TracksTable.searchPlaceholder')
})) }))
</script> </script>
@ -101,7 +101,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="tracks-search">Search</label> <label for="tracks-search">{{ $t('components.manage.library.TracksTable.searchLabel') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="tracks-search" id="tracks-search"
@ -114,7 +114,7 @@ const labels = computed(() => ({
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="tracks-ordering">Ordering</label> <label for="tracks-ordering">{{ $t('components.manage.library.TracksTable.orderingLabel') }}</label>
<select <select
id="tracks-ordering" id="tracks-ordering"
v-model="ordering" v-model="ordering"
@ -130,17 +130,17 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="tracks-ordering-direction">Ordering direction</label> <label for="tracks-ordering-direction">{{ $t('components.manage.library.TracksTable.orderingDirectionLabel') }}</label>
<select <select
id="tracks-ordering-direction" id="tracks-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.manage.library.TracksTable.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.manage.library.TracksTable.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
@ -163,22 +163,22 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
Title {{ $t('components.manage.library.TracksTable.titleTableHeader') }}
</th> </th>
<th> <th>
Album {{ $t('components.manage.library.TracksTable.albumTableHeader') }}
</th> </th>
<th> <th>
Artist {{ $t('components.manage.library.TracksTable.artistTableHeader') }}
</th> </th>
<th> <th>
Domain {{ $t('components.manage.library.TracksTable.domainTableHeader') }}
</th> </th>
<th> <th>
License {{ $t('components.manage.library.TracksTable.licenseTableHeader') }}
</th> </th>
<th> <th>
Creation date {{ $t('components.manage.library.TracksTable.creationDateTableHeader') }}
</th> </th>
</template> </template>
<template <template
@ -232,7 +232,7 @@ const labels = computed(() => ({
@click.prevent="addSearchToken('domain', scope.obj.domain)" @click.prevent="addSearchToken('domain', scope.obj.domain)"
> >
<i class="home icon" /> <i class="home icon" />
Local {{ $t('components.manage.library.TracksTable.localLink') }}
</a> </a>
</td> </td>
<td> <td>
@ -243,11 +243,11 @@ const labels = computed(() => ({
:title="scope.obj.license" :title="scope.obj.license"
@click.prevent="addSearchToken('license', scope.obj.license)" @click.prevent="addSearchToken('license', scope.obj.license)"
>{{ scope.obj.license }}</a> >{{ scope.obj.license }}</a>
<translate <span
v-else v-else
> >
N/A {{ $t('components.manage.library.TracksTable.notApplicable') }}
</translate> </span>
</td> </td>
<td> <td>
<human-date :date="scope.obj.creation_date" /> <human-date :date="scope.obj.creation_date" />
@ -265,12 +265,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
<translate {{ $t('components.manage.library.TracksTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
>
Showing results %{ start }-%{ end } on %{ total }
</translate>
</span> </span>
</div> </div>
</div> </div>

View File

@ -59,8 +59,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('Delete'), label: t('components.manage.library.UploadsTable.deleteActionLabel'),
confirmationMessage: t('The selected upload will be removed. This action is irreversible.'), confirmationMessage: t('components.manage.library.UploadsTable.deleteActionConfirmation'),
isDangerous: true, isDangerous: true,
allowAll: false, allowAll: false,
confirmColor: 'danger' confirmColor: 'danger'
@ -99,7 +99,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search by domain, actor, name, reference, source…') searchPlaceholder: t('components.manage.library.UploadsTable.searchPlaceholder')
})) }))
const displayName = (upload: Upload): string => { const displayName = (upload: Upload): string => {
@ -123,7 +123,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="uploads-search">Search</label> <label for="uploads-search">{{ $t('components.manage.library.UploadsTable.searchLabel') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="uploads-search" id="uploads-search"
@ -136,7 +136,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="uploads-visibility">Visibility</label> <label for="uploads-visibility">{{ $t('components.manage.library.UploadsTable.visibilityLabel') }}</label>
<select <select
id="uploads-visibility" id="uploads-visibility"
class="ui dropdown" class="ui dropdown"
@ -144,7 +144,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@change="addSearchToken('privacy_level', ($event.target as HTMLSelectElement).value)" @change="addSearchToken('privacy_level', ($event.target as HTMLSelectElement).value)"
> >
<option value=""> <option value="">
All {{ $t('components.manage.library.UploadsTable.allOption') }}
</option> </option>
<option value="me"> <option value="me">
{{ sharedLabels.fields.privacy_level.shortChoices.me }} {{ sharedLabels.fields.privacy_level.shortChoices.me }}
@ -158,7 +158,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="uploads-status">Import status</label> <label for="uploads-status">{{ $t('components.manage.library.UploadsTable.importStatusLabel') }}</label>
<select <select
id="uploads-status" id="uploads-status"
class="ui dropdown" class="ui dropdown"
@ -166,24 +166,24 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@change="addSearchToken('status', ($event.target as HTMLSelectElement).value)" @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
> >
<option value=""> <option value="">
All {{ $t('components.manage.library.UploadsTable.allOption') }}
</option> </option>
<option value="pending"> <option value="pending">
Pending {{ $t('components.manage.library.UploadsTable.pendingStatus') }}
</option> </option>
<option value="skipped"> <option value="skipped">
Skipped {{ $t('components.manage.library.UploadsTable.skippedStatus') }}
</option> </option>
<option value="errored"> <option value="errored">
Failed {{ $t('components.manage.library.UploadsTable.failedStatus') }}
</option> </option>
<option value="finished"> <option value="finished">
Finished {{ $t('components.manage.library.UploadsTable.finishedStatus') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="uploads-ordering">Ordering</label> <label for="uploads-ordering">{{ $t('components.manage.library.UploadsTable.orderingLabel') }}</label>
<select <select
id="uploads-ordering" id="uploads-ordering"
v-model="ordering" v-model="ordering"
@ -199,17 +199,17 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="uploads-ordering-direction">Ordering direction</label> <label for="uploads-ordering-direction">{{ $t('components.manage.library.UploadsTable.orderingDirectionLabel') }}</label>
<select <select
id="uploads-ordering-direction" id="uploads-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.manage.library.UploadsTable.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.manage.library.UploadsTable.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
@ -238,31 +238,31 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
> >
<template #header-cells> <template #header-cells>
<th> <th>
Name {{ $t('components.manage.library.UploadsTable.nameTableHeader') }}
</th> </th>
<th> <th>
Library {{ $t('components.manage.library.UploadsTable.libraryTableHeader') }}
</th> </th>
<th> <th>
Account {{ $t('components.manage.library.UploadsTable.accountTableHeader') }}
</th> </th>
<th> <th>
Domain {{ $t('components.manage.library.UploadsTable.domainTableHeader') }}
</th> </th>
<th> <th>
Visibility {{ $t('components.manage.library.UploadsTable.visibilityTableHeader') }}
</th> </th>
<th> <th>
Import status {{ $t('components.manage.library.UploadsTable.importStatusTableHeader') }}
</th> </th>
<th> <th>
Size {{ $t('components.manage.library.UploadsTable.sizeTableHeader') }}
</th> </th>
<th> <th>
Creation date {{ $t('components.manage.library.UploadsTable.creationDateTableHeader') }}
</th> </th>
<th> <th>
Accessed date {{ $t('components.manage.library.UploadsTable.creationDateTableHeader') }}
</th> </th>
</template> </template>
<template #row-cells="scope"> <template #row-cells="scope">
@ -312,7 +312,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@click.prevent="addSearchToken('domain', scope.obj.domain)" @click.prevent="addSearchToken('domain', scope.obj.domain)"
> >
<i class="home icon" /> <i class="home icon" />
Local {{ $t('components.manage.library.UploadsTable.localLink') }}
</a> </a>
</td> </td>
<td> <td>
@ -347,7 +347,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
<translate <translate
v-else v-else
> >
N/A {{ $t('components.manage.library.UploadsTable.notApplicable') }}
</translate> </translate>
</td> </td>
<td> <td>
@ -361,7 +361,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
<translate <translate
v-else v-else
> >
N/A {{ $t('components.manage.library.UploadsTable.notApplicable') }}
</translate> </translate>
</td> </td>
</template> </template>
@ -377,12 +377,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
<translate {{ $t('components.manage.library.UploadsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
>
Showing results %{ start }-%{ end } on %{ total }
</translate>
</span> </span>
</div> </div>
</div> </div>

View File

@ -56,7 +56,7 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'purge', name: 'purge',
label: t('Purge'), label: t('components.manage.moderation.AccountsTable.purgeLabel'),
isDangerous: true isDangerous: true
} }
]) ])
@ -93,7 +93,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search by domain, username, bio…') searchPlaceholder: t('components.manage.moderation.AccountsTable.searchPlaceholder')
})) }))
</script> </script>
@ -102,7 +102,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="accounts-search">Search</label> <label for="accounts-search">{{ $t('components.manage.moderation.AccountsTable.searchLabel') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="accounts-search" id="accounts-search"
@ -115,7 +115,7 @@ const labels = computed(() => ({
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="accounts-ordering">Ordering</label> <label for="accounts-ordering">{{ $t('components.manage.moderation.AccountsTable.orderingLabel') }}</label>
<select <select
id="accounts-ordering" id="accounts-ordering"
v-model="ordering" v-model="ordering"
@ -131,17 +131,17 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="accounts-ordering-direction">Ordering direction</label> <label for="accounts-ordering-direction">{{ $t('components.manage.moderation.AccountsTable.orderingDirectionLabel') }}</label>
<select <select
id="accounts-ordering-direction" id="accounts-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.manage.moderation.AccountsTable.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.manage.moderation.AccountsTable.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
@ -164,22 +164,22 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
Name {{ $t('components.manage.moderation.AccountsTable.nameTableHeader') }}
</th> </th>
<th> <th>
Domain {{ $t('components.manage.moderation.AccountsTable.domainTableHeader') }}
</th> </th>
<th> <th>
Uploads {{ $t('components.manage.moderation.AccountsTable.uploadsTableHeader') }}
</th> </th>
<th> <th>
First seen {{ $t('components.manage.moderation.AccountsTable.firstSeenTableHeader') }}
</th> </th>
<th> <th>
Last seen {{ $t('components.manage.moderation.AccountsTable.lastSeenTableHeader') }}
</th> </th>
<th> <th>
Under moderation rule {{ $t('components.manage.moderation.AccountsTable.moderationRuleTableHeader') }}
</th> </th>
</template> </template>
<template <template
@ -209,7 +209,7 @@ const labels = computed(() => ({
@click.prevent="addSearchToken('domain', scope.obj.domain)" @click.prevent="addSearchToken('domain', scope.obj.domain)"
> >
<i class="home icon" /> <i class="home icon" />
Local account {{ $t('components.manage.moderation.AccountsTable.localLink') }}
</a> </a>
</td> </td>
<td> <td>
@ -225,7 +225,7 @@ const labels = computed(() => ({
/> />
</td> </td>
<td> <td>
<span v-if="scope.obj.instance_policy"><i class="shield icon" /> Yes</span> <span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ $t('components.manage.moderation.AccountsTable.moderationRuleStatus') }}</span>
</td> </td>
</template> </template>
</action-table> </action-table>
@ -240,12 +240,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
<translate {{ $t('components.manage.moderation.AccountsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
>
Showing results %{ start }-%{ end } on %{ total }
</translate>
</span> </span>
</div> </div>
</div> </div>

View File

@ -50,19 +50,19 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'purge', name: 'purge',
label: t('Purge'), label: t('components.manage.moderation.DomainsTable.purgeLabel'),
isDangerous: true isDangerous: true
}, },
{ {
name: 'allow_list_add', name: 'allow_list_add',
label: t('Add to allow-list'), label: t('components.manage.moderation.DomainsTable.allowListAddLabel'),
filterCheckable: (obj: { allowed: boolean }) => { filterCheckable: (obj: { allowed: boolean }) => {
return !obj.allowed return !obj.allowed
} }
}, },
{ {
name: 'allow_list_remove', name: 'allow_list_remove',
label: t('Remove from allow-list'), label: t('components.manage.moderation.DomainsTable.allowListRemoveLabel'),
filterCheckable: (obj: { allowed: boolean }) => { filterCheckable: (obj: { allowed: boolean }) => {
return obj.allowed return obj.allowed
} }
@ -108,8 +108,8 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search by name…'), searchPlaceholder: t('components.manage.moderation.DomainsTable.searchPlaceholder'),
allowListTitle: t('This domain is present in your allow-list') allowListTitle: t('components.manage.moderation.DomainsTable.allowListTitle')
})) }))
</script> </script>
@ -118,7 +118,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui field"> <div class="ui field">
<label for="domains-search">Search</label> <label for="domains-search">{{ $t('components.manage.moderation.DomainsTable.searchLabel') }}</label>
<input <input
id="domains-search" id="domains-search"
v-model="query" v-model="query"
@ -131,25 +131,25 @@ const labels = computed(() => ({
v-if="allowListEnabled" v-if="allowListEnabled"
class="field" class="field"
> >
<label for="domains-allow-list">Is present on allow-list</label> <label for="domains-allow-list">{{ $t('components.manage.moderation.DomainsTable.inAllowListLabel') }}</label>
<select <select
id="domains-allow-list" id="domains-allow-list"
v-model="allowed" v-model="allowed"
class="ui dropdown" class="ui dropdown"
> >
<option :value="null"> <option :value="null">
All {{ $t('components.manage.moderation.DomainsTable.allOption') }}
</option> </option>
<option :value="true"> <option :value="true">
Yes {{ $t('components.manage.moderation.DomainsTable.positiveOption') }}
</option> </option>
<option :value="false"> <option :value="false">
No {{ $t('components.manage.moderation.DomainsTable.negativeOption') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="domains-ordering">Ordering</label> <label for="domains-ordering">{{ $t('components.manage.moderation.DomainsTable.orderingLabel') }}</label>
<select <select
id="domains-ordering" id="domains-ordering"
v-model="ordering" v-model="ordering"
@ -165,17 +165,17 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="domains-ordering-direction">Ordering direction</label> <label for="domains-ordering-direction">{{ $t('components.manage.moderation.DomainsTable.orderingDirectionLabel') }}</label>
<select <select
id="domains-ordering-direction" id="domains-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.manage.moderation.DomainsTable.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.manage.moderation.DomainsTable.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
@ -199,19 +199,19 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
Name {{ $t('components.manage.moderation.DomainsTable.nameTableHeader') }}
</th> </th>
<th> <th>
Users {{ $t('components.manage.moderation.DomainsTable.usersTableHeader') }}
</th> </th>
<th> <th>
Received messages {{ $t('components.manage.moderation.DomainsTable.receivedMessagesTableHeader') }}
</th> </th>
<th> <th>
First seen {{ $t('components.manage.moderation.DomainsTable.firstSeenTableHeader') }}
</th> </th>
<th> <th>
Under moderation rule {{ $t('components.manage.moderation.DomainsTable.moderationRuleTableHeader') }}
</th> </th>
</template> </template>
<template <template
@ -237,7 +237,7 @@ const labels = computed(() => ({
<human-date :date="scope.obj.creation_date" /> <human-date :date="scope.obj.creation_date" />
</td> </td>
<td> <td>
<span v-if="scope.obj.instance_policy"><i class="shield icon" /> Yes</span> <span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ $t('components.manage.moderation.DomainsTable.moderationRuleStatus') }}</span>
</td> </td>
</template> </template>
</action-table> </action-table>
@ -247,7 +247,7 @@ const labels = computed(() => ({
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="server icon" /> <i class="server icon" />
No other pods found {{ $t('components.manage.moderation.DomainsTable.emptyState') }}
</div> </div>
</div> </div>
</div> </div>
@ -261,12 +261,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
<translate {{ $t('components.manage.moderation.DomainsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
>
Showing results %{ start }-%{ end } on %{ total }
</translate>
</span> </span>
</div> </div>
</div> </div>

View File

@ -25,18 +25,18 @@ const summary = useMarkdown(() => props.object.summary)
<i class="user icon" />{{ object.actor }} &nbsp; <i class="user icon" />{{ object.actor }} &nbsp;
<template v-if="object.is_active"> <template v-if="object.is_active">
<i class="play icon" /> <i class="play icon" />
Enabled {{ $t('components.manage.moderation.InstancePolicyCard.enabledStatus') }}
</template> </template>
<template v-if="!object.is_active"> <template v-if="!object.is_active">
<i class="pause icon" /> <i class="pause icon" />
Paused {{ $t('components.manage.moderation.InstancePolicyCard.pausedStatus') }}
</template> </template>
</p> </p>
<div> <div>
<p><strong>Rule</strong></p> <p><strong>{{ $t('components.manage.moderation.InstancePolicyCard.ruleHeader') }}</strong></p>
<p v-if="object.block_all"> <p v-if="object.block_all">
<i class="ban icon" /> <i class="ban icon" />
Block everything {{ $t('components.manage.moderation.InstancePolicyCard.blockAllRule') }}
</p> </p>
<div <div
v-else v-else
@ -48,7 +48,7 @@ const summary = useMarkdown(() => props.object.summary)
> >
<i class="feed icon" /> <i class="feed icon" />
<div class="content"> <div class="content">
Mute activity {{ $t('components.manage.moderation.InstancePolicyCard.muteActivityRule') }}
</div> </div>
</div> </div>
<div <div
@ -57,7 +57,7 @@ const summary = useMarkdown(() => props.object.summary)
> >
<i class="bell icon" /> <i class="bell icon" />
<div class="content"> <div class="content">
Mute notifications {{ $t('components.manage.moderation.InstancePolicyCard.muteNotificationsRule') }}
</div> </div>
</div> </div>
<div <div
@ -66,14 +66,14 @@ const summary = useMarkdown(() => props.object.summary)
> >
<i class="file icon" /> <i class="file icon" />
<div class="content"> <div class="content">
Reject media {{ $t('components.manage.moderation.InstancePolicyCard.rejectMediaRule') }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="summary"> <div v-if="summary">
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<p><strong>Reason</strong></p> <p><strong>{{ $t('components.manage.moderation.InstancePolicyCard.ruleReason') }}</strong></p>
<sanitized-html :html="summary" /> <sanitized-html :html="summary" />
</div> </div>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
@ -82,7 +82,7 @@ const summary = useMarkdown(() => props.object.summary)
@click="emit('update')" @click="emit('update')"
> >
<i class="edit icon" /> <i class="edit icon" />
Edit {{ $t('components.manage.moderation.InstancePolicyCard.editButton') }}
</button> </button>
</div> </div>
</template> </template>

View File

@ -27,20 +27,20 @@ const props = withDefaults(defineProps<Props>(), {
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
summaryHelp: t("Explain why you're applying this policy: this will help you remember why you added this rule. Depending on your pod configuration, this may be displayed publicly to help users understand the moderation rules in place."), summaryHelp: t('components.manage.moderation.InstancePolicyForm.summaryHelp'),
isActiveHelp: t('Use this setting to temporarily enable/disable the policy without completely removing it.'), isActiveHelp: t('components.manage.moderation.InstancePolicyForm.isActiveHelp'),
blockAllHelp: t('Block everything from this account or domain. This will prevent any interaction with the entity, and purge related content (uploads, libraries, follows, etc.)'), blockAllHelp: t('components.manage.moderation.InstancePolicyForm.blockAllHelp'),
silenceActivity: { silenceActivity: {
help: t('Hide account or domain content, except from followers.'), help: t('components.manage.moderation.InstancePolicyForm.silenceActivityHelp'),
label: t('Mute activity') label: t('components.manage.moderation.InstancePolicyForm.silenceActivityLabel')
}, },
silenceNotifications: { silenceNotifications: {
help: t('Prevent account or domain from triggering notifications, except from followers.'), help: t('components.manage.moderation.InstancePolicyForm.silenceNotificationsHelp'),
label: t('Mute notifications') label: t('components.manage.moderation.InstancePolicyForm.silenceNotificationsLabel')
}, },
rejectMedia: { rejectMedia: {
help: t('Do not download any media file (audio, album cover, account avatar…) from this account or domain. This will purge existing content as well.'), help: t('components.manage.moderation.InstancePolicyForm.rejectMediaHelp'),
label: t('Reject media') label: t('components.manage.moderation.InstancePolicyForm.rejectMediaLabel')
} }
})) }))
@ -122,16 +122,16 @@ const remove = async () => {
@submit.prevent="createOrUpdate" @submit.prevent="createOrUpdate"
> >
<h3 class="ui header"> <h3 class="ui header">
<translate <span
v-if="object" v-if="object"
> >
Edit moderation rule {{ $t('components.manage.moderation.InstancePolicyForm.editRuleHeader') }}
</translate> </span>
<translate <span
v-else v-else
> >
Add a new moderation rule {{ $t('components.manage.moderation.InstancePolicyForm.addRuleHeader') }}
</translate> </span>
</h3> </h3>
<div <div
v-if="errors && errors.length > 0" v-if="errors && errors.length > 0"
@ -139,7 +139,7 @@ const remove = async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
Error while creating rule {{ $t('components.manage.moderation.InstancePolicyForm.createRuleFailureHeader') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -162,19 +162,19 @@ const remove = async () => {
type="checkbox" type="checkbox"
> >
<label for="policy-is-active"> <label for="policy-is-active">
<translate <span
v-if="current.isActive" v-if="current.isActive"
>Enabled</translate> >{{ $t('components.manage.moderation.InstancePolicyForm.policyEnabled') }}</span>
<translate <span
v-else v-else
>Disabled</translate> >{{ $t('components.manage.moderation.InstancePolicyForm.policyDisabled') }}</span>
<tooltip :content="labels.isActiveHelp" /> <tooltip :content="labels.isActiveHelp" />
</label> </label>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="policy-summary"> <label for="policy-summary">
Reason {{ $t('components.manage.moderation.InstancePolicyForm.policyReasonLabel') }}
<tooltip :content="labels.summaryHelp" /> <tooltip :content="labels.summaryHelp" />
</label> </label>
<textarea <textarea
@ -192,13 +192,13 @@ const remove = async () => {
type="checkbox" type="checkbox"
> >
<label for="policy-is-active"> <label for="policy-is-active">
Block everything {{ $t('components.manage.moderation.InstancePolicyForm.blockAllLabel') }}
<tooltip :content="labels.blockAllHelp" /> <tooltip :content="labels.blockAllHelp" />
</label> </label>
</div> </div>
</div> </div>
<div class="ui horizontal divider"> <div class="ui horizontal divider">
Or customize your rule {{ $t('components.manage.moderation.InstancePolicyForm.customizeRuleMessage') }}
</div> </div>
<div <div
v-for="(config, key) in fieldConfig" v-for="(config, key) in fieldConfig"
@ -223,42 +223,42 @@ const remove = async () => {
class="ui basic left floated button" class="ui basic left floated button"
@click.prevent="emit('cancel')" @click.prevent="emit('cancel')"
> >
Cancel {{ $t('components.manage.moderation.InstancePolicyForm.cancelButton') }}
</button> </button>
<button <button
:class="['ui', 'right', 'floated', 'success', {'disabled loading': isLoading}, 'button']" :class="['ui', 'right', 'floated', 'success', {'disabled loading': isLoading}, 'button']"
:disabled="isLoading" :disabled="isLoading"
> >
<translate <span
v-if="object" v-if="object"
> >
Update {{ $t('components.manage.moderation.InstancePolicyForm.updateButton') }}
</translate> </span>
<translate <span
v-else v-else
> >
Create {{ $t('components.manage.moderation.InstancePolicyForm.createButton') }}
</translate> </span>
</button> </button>
<dangerous-button <dangerous-button
v-if="object" v-if="object"
class="ui right floated basic danger button" class="ui right floated basic danger button"
@confirm="remove" @confirm="remove"
> >
Delete {{ $t('components.manage.moderation.InstancePolicyForm.deleteButton') }}
<template #modal-header> <template #modal-header>
<p> <p>
Delete this moderation rule? {{ $t('components.manage.moderation.InstancePolicyForm.deleteRuleModalHeader') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<p> <p>
This action is irreversible. {{ $t('components.manage.moderation.InstancePolicyForm.deleteRuleModalMessage') }}
</p> </p>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<div> <div>
Delete moderation rule {{ $t('components.manage.moderation.InstancePolicyForm.deleteRuleModalConfirm') }}
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>

View File

@ -62,18 +62,14 @@ const fetchData = async () => {
> >
<i class="shield icon" />&nbsp; <i class="shield icon" />&nbsp;
<slot> <slot>
Moderation rules {{ $t('components.manage.moderation.InstancePolicyModal.moderationRulesHeader') }}
</slot> </slot>
<semantic-modal <semantic-modal
v-model:show="show" v-model:show="show"
@show="fetchData" @show="fetchData"
> >
<h4 class="header"> <h4 class="header">
<translate {{ $t('components.manage.moderation.InstancePolicyModal.manageRulesHeader', {obj: target}) }}
:translate-params="{obj: target}"
>
Manage moderation rules for %{ obj }
</translate>
</h4> </h4>
<div class="content"> <div class="content">
<div class="description"> <div class="description">
@ -88,7 +84,7 @@ const fetchData = async () => {
> >
<header class="ui header"> <header class="ui header">
<h3> <h3>
This entity is subject to specific moderation rules {{ $t('components.manage.moderation.InstancePolicyModal.manageRulesHeader', {obj: target}) }}
</h3> </h3>
</header> </header>
</instance-policy-card> </instance-policy-card>
@ -107,7 +103,7 @@ const fetchData = async () => {
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui deny button"> <button class="ui deny button">
Close {{ $t('components.manage.moderation.InstancePolicyModal.closeButton') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

View File

@ -18,7 +18,7 @@ const props = defineProps<Props>()
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
summaryPlaceholder: t('Describe what actions have been taken, or any other related updates…') summaryPlaceholder: t('components.manage.moderation.NoteForm.summaryPlaceholder')
})) }))
const summary = ref('') const summary = ref('')
@ -56,7 +56,7 @@ const submit = async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
Error while submitting note {{ $t('components.manage.moderation.NoteForm.submissionFailureHeader') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -81,7 +81,7 @@ const submit = async () => {
type="submit" type="submit"
:disabled="isLoading" :disabled="isLoading"
> >
Add note {{ $t('components.manage.moderation.NoteForm.addNoteButton') }}
</button> </button>
</form> </form>
</template> </template>

View File

@ -64,22 +64,22 @@ const remove = async (note: Note) => {
@confirm="remove(note)" @confirm="remove(note)"
> >
<i class="trash icon" /> <i class="trash icon" />
Delete {{ $t('components.manage.moderation.NotesThread.deleteButton') }}
<template #modal-header> <template #modal-header>
<p> <p>
Delete this note? {{ $t('components.manage.moderation.NotesThread.deleteModalHeader') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<div> <div>
<p> <p>
The note will be removed. This action is irreversible. {{ $t('components.manage.moderation.NotesThread.deleteModalMessage') }}
</p> </p>
</div> </div>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<p> <p>
Delete {{ $t('components.manage.moderation.NotesThread.deleteButton') }}
</p> </p>
</template> </template>
</dangerous-button> </dangerous-button>

View File

@ -66,10 +66,10 @@ const actions = computed(() => {
const deleteUrl = typeConfig.getDeleteUrl?.(target.value) const deleteUrl = typeConfig.getDeleteUrl?.(target.value)
return deleteUrl return deleteUrl
? [{ ? [{
label: t('Delete reported object'), label: t('components.manage.moderation.ReportCard.deleteLabel'),
modalHeader: t('Delete reported object?'), modalHeader: t('components.manage.moderation.ReportCard.deleteModalHeader'),
modalContent: t('This will delete the object associated with this report and mark the report as resolved. The deletion is irreversible.'), modalContent: t('components.manage.moderation.ReportCard.deleteModalMessage'),
modalConfirmLabel: t('Delete'), modalConfirmLabel: t('components.manage.moderation.ReportCard.deleteConfirmLabel'),
icon: 'x', icon: 'x',
iconColor: 'danger', iconColor: 'danger',
show: (obj: Report) => { return !!obj.target }, show: (obj: Report) => { return !!obj.target },
@ -141,12 +141,7 @@ const handleRemovedNote = (uuid: string) => {
<div class="content"> <div class="content">
<h4 class="header"> <h4 class="header">
<router-link :to="{name: 'manage.moderation.reports.detail', params: {id: obj.uuid}}"> <router-link :to="{name: 'manage.moderation.reports.detail', params: {id: obj.uuid}}">
<translate {{ $t('components.manage.moderation.ReportCard.reportHeader', {id: obj.uuid.substring(0, 8)}) }}
:translate-params="{id: obj.uuid.substring(0, 8)}"
>
Report %{ id }
</translate>
</router-link> </router-link>
<collapse-link <collapse-link
v-model="isCollapsed" v-model="isCollapsed"
@ -161,7 +156,7 @@ const handleRemovedNote = (uuid: string) => {
<tbody> <tbody>
<tr> <tr>
<td> <td>
Submitted by {{ $t('components.manage.moderation.ReportCard.submittedByLabel') }}
</td> </td>
<td> <td>
<div v-if="obj.submitter"> <div v-if="obj.submitter">
@ -177,7 +172,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr> <tr>
<td> <td>
Category {{ $t('components.manage.moderation.ReportCard.categoryLabel') }}
</td> </td>
<td> <td>
<report-category-dropdown <report-category-dropdown
@ -191,7 +186,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr> <tr>
<td> <td>
Creation date {{ $t('components.manage.moderation.ReportCard.creationDateLabel') }}
</td> </td>
<td> <td>
<human-date <human-date
@ -208,22 +203,22 @@ const handleRemovedNote = (uuid: string) => {
<tbody> <tbody>
<tr> <tr>
<td> <td>
Status {{ $t('components.manage.moderation.ReportCard.statusLabel') }}
</td> </td>
<td v-if="obj.is_handled"> <td v-if="obj.is_handled">
<span v-if="obj.is_handled"> <span v-if="obj.is_handled">
<i class="success check icon" /> <i class="success check icon" />
Resolved {{ $t('components.manage.moderation.ReportCard.resolvedStatus') }}
</span> </span>
</td> </td>
<td v-else> <td v-else>
<i class="danger x icon" /> <i class="danger x icon" />
Unresolved {{ $t('components.manage.moderation.ReportCard.unresolvedStatus') }}
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Assigned to {{ $t('components.manage.moderation.ReportCard.assignedToLabel') }}
</td> </td>
<td> <td>
<div v-if="obj.assigned_to"> <div v-if="obj.assigned_to">
@ -232,16 +227,16 @@ const handleRemovedNote = (uuid: string) => {
:actor="obj.assigned_to" :actor="obj.assigned_to"
/> />
</div> </div>
<translate <span
v-else v-else
> >
N/A {{ $t('components.manage.moderation.ReportCard.notApplicable') }}
</translate> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Resolution date {{ $t('components.manage.moderation.ReportCard.resolutionDateLabel') }}
</td> </td>
<td> <td>
<human-date <human-date
@ -249,16 +244,16 @@ const handleRemovedNote = (uuid: string) => {
:date="obj.handled_date" :date="obj.handled_date"
:icon="true" :icon="true"
/> />
<translate <span
v-else v-else
> >
N/A {{ $t('components.manage.moderation.ReportCard.notApplicable') }}
</translate> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Internal notes {{ $t('components.manage.moderation.ReportCard.internalNotesLabel') }}
</td> </td>
<td> <td>
<i class="comment icon" /> <i class="comment icon" />
@ -278,7 +273,7 @@ const handleRemovedNote = (uuid: string) => {
<div class="ui stackable two column grid"> <div class="ui stackable two column grid">
<div class="column"> <div class="column">
<h3> <h3>
Message {{ $t('components.manage.moderation.ReportCard.messageHeader') }}
</h3> </h3>
<expandable-div <expandable-div
v-if="summary" v-if="summary"
@ -290,14 +285,14 @@ const handleRemovedNote = (uuid: string) => {
</div> </div>
<aside class="column"> <aside class="column">
<h3> <h3>
Reported object {{ $t('components.manage.moderation.ReportCard.reportedObjectHeader') }}
</h3> </h3>
<div <div
v-if="!obj.target" v-if="!obj.target"
role="alert" role="alert"
class="ui warning message" class="ui warning message"
> >
The object associated with this report was deleted. {{ $t('components.manage.moderation.ReportCard.objectDeletedWarning') }}
</div> </div>
<router-link <router-link
v-if="target && configs[target.type].urls.getDetail" v-if="target && configs[target.type].urls.getDetail"
@ -305,7 +300,7 @@ const handleRemovedNote = (uuid: string) => {
:to="configs[target.type].urls.getDetail?.(obj.target_state) ?? '/'" :to="configs[target.type].urls.getDetail?.(obj.target_state) ?? '/'"
> >
<i class="eye icon" /> <i class="eye icon" />
View public page {{ $t('components.manage.moderation.ReportCard.publicPageLink') }}
</router-link> </router-link>
<router-link <router-link
v-if="target && configs[target.type].urls.getAdminDetail" v-if="target && configs[target.type].urls.getAdminDetail"
@ -313,13 +308,13 @@ const handleRemovedNote = (uuid: string) => {
:to="configs[target.type].urls.getAdminDetail?.(obj.target_state) ?? '/'" :to="configs[target.type].urls.getAdminDetail?.(obj.target_state) ?? '/'"
> >
<i class="wrench icon" /> <i class="wrench icon" />
Open in moderation interface {{ $t('components.manage.moderation.ReportCard.moderationLink') }}
</router-link> </router-link>
<table class="ui very basic unstackable table"> <table class="ui very basic unstackable table">
<tbody> <tbody>
<tr v-if="target"> <tr v-if="target">
<td> <td>
Type {{ $t('components.manage.moderation.ReportCard.objectTypeLabel') }}
</td> </td>
<td colspan="2"> <td colspan="2">
<i :class="[configs[target.type].icon, 'icon']" /> <i :class="[configs[target.type].icon, 'icon']" />
@ -328,7 +323,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr v-if="obj.target_owner && (!target || target.type !== 'account')"> <tr v-if="obj.target_owner && (!target || target.type !== 'account')">
<td> <td>
Owner {{ $t('components.manage.moderation.ReportCard.objectOwnerLabel') }}
</td> </td>
<td> <td>
<actor-link <actor-link
@ -347,7 +342,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr v-if="target && target.type === 'account'"> <tr v-if="target && target.type === 'account'">
<td> <td>
Account {{ $t('components.manage.moderation.ReportCard.accountLabel') }}
</td> </td>
<td> <td>
<actor-link <actor-link
@ -366,17 +361,17 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr v-if="obj.target_state.is_local"> <tr v-if="obj.target_state.is_local">
<td> <td>
Domain {{ $t('components.manage.moderation.ReportCard.domainLabel') }}
</td> </td>
<td colspan="2"> <td colspan="2">
<i class="home icon" /> <i class="home icon" />
Local {{ $t('components.manage.moderation.ReportCard.localLabel') }}
</td> </td>
</tr> </tr>
<tr v-else-if="obj.target_state.domain"> <tr v-else-if="obj.target_state.domain">
<td> <td>
<router-link :to="{name: 'manage.moderation.domains.detail', params: { id: obj.target_state.domain }}"> <router-link :to="{name: 'manage.moderation.domains.detail', params: { id: obj.target_state.domain }}">
Domain {{ $t('components.manage.moderation.ReportCard.domainLabel') }}
</router-link> </router-link>
</td> </td>
<td> <td>
@ -405,7 +400,7 @@ const handleRemovedNote = (uuid: string) => {
v-else v-else
colspan="2" colspan="2"
> >
N/A {{ $t('components.manage.moderation.ReportCard.notApplicable') }}
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -415,7 +410,7 @@ const handleRemovedNote = (uuid: string) => {
<div class="ui stackable two column grid"> <div class="ui stackable two column grid">
<div class="column"> <div class="column">
<h3> <h3>
Internal notes {{ $t('components.manage.moderation.ReportCard.internalNotesLabel') }}
</h3> </h3>
<notes-thread <notes-thread
:notes="obj.notes" :notes="obj.notes"
@ -428,7 +423,7 @@ const handleRemovedNote = (uuid: string) => {
</div> </div>
<div class="column"> <div class="column">
<h3> <h3>
Actions {{ $t('components.manage.moderation.ReportCard.actionsLabel') }}
</h3> </h3>
<div class="ui labelled icon basic buttons"> <div class="ui labelled icon basic buttons">
<button <button
@ -437,7 +432,7 @@ const handleRemovedNote = (uuid: string) => {
@click="resolveReport(true)" @click="resolveReport(true)"
> >
<i class="success check icon" />&nbsp; <i class="success check icon" />&nbsp;
Resolve {{ $t('components.manage.moderation.ReportCard.resolveLabel') }}
</button> </button>
<button <button
v-if="obj.is_handled === true" v-if="obj.is_handled === true"
@ -445,7 +440,7 @@ const handleRemovedNote = (uuid: string) => {
@click="resolveReport(false)" @click="resolveReport(false)"
> >
<i class="warning redo icon" />&nbsp; <i class="warning redo icon" />&nbsp;
Unresolve {{ $t('components.manage.moderation.ReportCard.unresolveLabel') }}
</button> </button>
<template <template
v-for="action in actions" v-for="action in actions"

View File

@ -67,12 +67,7 @@ const handleRemovedNote = (uuid: string) => {
<div class="content"> <div class="content">
<h4 class="header"> <h4 class="header">
<router-link :to="{name: 'manage.moderation.requests.detail', params: {id: obj.uuid}}"> <router-link :to="{name: 'manage.moderation.requests.detail', params: {id: obj.uuid}}">
<translate {{ $t('components.manage.moderation.UserRequestCard.requestHeader', {id: obj.uuid.substring(0, 8)}) }}
:translate-params="{id: obj.uuid.substring(0, 8)}"
>
Request %{ id }
</translate>
</router-link> </router-link>
<collapse-link <collapse-link
v-model="isCollapsed" v-model="isCollapsed"
@ -87,7 +82,7 @@ const handleRemovedNote = (uuid: string) => {
<tbody> <tbody>
<tr> <tr>
<td> <td>
Submitted by {{ $t('components.manage.moderation.UserRequestCard.submittedByLabel') }}
</td> </td>
<td> <td>
<actor-link <actor-link
@ -98,7 +93,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr> <tr>
<td> <td>
Creation date {{ $t('components.manage.moderation.UserRequestCard.creationDateLabel') }}
</td> </td>
<td> <td>
<human-date <human-date
@ -115,26 +110,26 @@ const handleRemovedNote = (uuid: string) => {
<tbody> <tbody>
<tr> <tr>
<td> <td>
Status {{ $t('components.manage.moderation.UserRequestCard.statusLabel') }}
</td> </td>
<td> <td>
<template v-if="obj.status === 'pending'"> <template v-if="obj.status === 'pending'">
<i class="warning hourglass icon" /> <i class="warning hourglass icon" />
Pending {{ $t('components.manage.moderation.UserRequestCard.pendingStatus') }}
</template> </template>
<template v-else-if="obj.status === 'refused'"> <template v-else-if="obj.status === 'refused'">
<i class="danger x icon" /> <i class="danger x icon" />
Refused {{ $t('components.manage.moderation.UserRequestCard.refusedStatus') }}
</template> </template>
<template v-else-if="obj.status === 'approved'"> <template v-else-if="obj.status === 'approved'">
<i class="success check icon" /> <i class="success check icon" />
Approved {{ $t('components.manage.moderation.UserRequestCard.approvedStatus') }}
</template> </template>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Assigned to {{ $t('components.manage.moderation.UserRequestCard.assignedToLabel') }}
</td> </td>
<td> <td>
<div v-if="obj.assigned_to"> <div v-if="obj.assigned_to">
@ -143,16 +138,16 @@ const handleRemovedNote = (uuid: string) => {
:actor="obj.assigned_to" :actor="obj.assigned_to"
/> />
</div> </div>
<translate <span
v-else v-else
> >
N/A {{ $t('components.manage.moderation.UserRequestCard.notApplicable') }}
</translate> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Resolution date {{ $t('components.manage.moderation.UserRequestCard.resolutionDateLabel') }}
</td> </td>
<td> <td>
<human-date <human-date
@ -160,16 +155,16 @@ const handleRemovedNote = (uuid: string) => {
:date="obj.handled_date" :date="obj.handled_date"
:icon="true" :icon="true"
/> />
<translate <span
v-else v-else
> >
N/A {{ $t('components.manage.moderation.UserRequestCard.notApplicable') }}
</translate> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
Internal notes {{ $t('components.manage.moderation.UserRequestCard.internalNotesLabel') }}
</td> </td>
<td> <td>
<i class="comment icon" /> <i class="comment icon" />
@ -189,10 +184,10 @@ const handleRemovedNote = (uuid: string) => {
<div class="ui stackable two column grid"> <div class="ui stackable two column grid">
<div class="column"> <div class="column">
<h3> <h3>
Message {{ $t('components.manage.moderation.UserRequestCard.messageHeader') }}
</h3> </h3>
<p> <p>
This user wants to sign-up on your pod. {{ $t('components.manage.moderation.UserRequestCard.messageBody') }}
</p> </p>
<template v-if="obj.metadata"> <template v-if="obj.metadata">
<div class="ui hidden divider" /> <div class="ui hidden divider" />
@ -204,11 +199,11 @@ const handleRemovedNote = (uuid: string) => {
<p v-if="value"> <p v-if="value">
{{ value }} {{ value }}
</p> </p>
<translate <span
v-else v-else
> >
N/A {{ $t('components.manage.moderation.UserRequestCard.notApplicable') }}
</translate> </span>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
</div> </div>
</template> </template>
@ -216,7 +211,7 @@ const handleRemovedNote = (uuid: string) => {
<aside class="column"> <aside class="column">
<div v-if="obj.status != 'approved'"> <div v-if="obj.status != 'approved'">
<h3> <h3>
Actions {{ $t('components.manage.moderation.UserRequestCard.actionsHeader') }}
</h3> </h3>
<div class="ui labelled icon basic buttons"> <div class="ui labelled icon basic buttons">
<button <button
@ -225,7 +220,7 @@ const handleRemovedNote = (uuid: string) => {
@click="approve(true)" @click="approve(true)"
> >
<i class="success check icon" />&nbsp; <i class="success check icon" />&nbsp;
Approve {{ $t('components.manage.moderation.UserRequestCard.approveButton') }}
</button> </button>
<button <button
v-if="obj.status === 'pending'" v-if="obj.status === 'pending'"
@ -233,12 +228,12 @@ const handleRemovedNote = (uuid: string) => {
@click="approve(false)" @click="approve(false)"
> >
<i class="danger x icon" />&nbsp; <i class="danger x icon" />&nbsp;
Refuse {{ $t('components.manage.moderation.UserRequestCard.rejectButton') }}
</button> </button>
</div> </div>
</div> </div>
<h3> <h3>
Internal notes {{ $t('components.manage.moderation.UserRequestCard.internalNotesLabel') }}
</h3> </h3>
<notes-thread <notes-thread
:notes="obj.notes" :notes="obj.notes"

View File

@ -17,7 +17,7 @@ const router = useRouter()
const store = useStore() const store = useStore()
const labels = computed(() => ({ const labels = computed(() => ({
placeholder: t('Leave empty for a random code') placeholder: t('components.manage.users.InvitationForm.placeholder')
})) }))
const invitations = reactive([] as Invitation[]) const invitations = reactive([] as Invitation[])
@ -56,7 +56,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
Error while creating invitation {{ $t('components.manage.users.InvitationForm.inviteCreateFailureHeader') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -69,7 +69,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
</div> </div>
<div class="inline fields"> <div class="inline fields">
<div class="ui field"> <div class="ui field">
<label for="invitation-code">Invitation code</label> <label for="invitation-code">{{ $t('components.manage.users.InvitationForm.invitationCodeLabel') }}</label>
<input <input
v-model="code" v-model="code"
for="invitation-code" for="invitation-code"
@ -84,7 +84,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
:disabled="isLoading" :disabled="isLoading"
type="submit" type="submit"
> >
Get a new invitation {{ $t('components.manage.users.InvitationForm.newInviteCodeButton') }}
</button> </button>
</div> </div>
</div> </div>
@ -95,10 +95,10 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
<thead> <thead>
<tr> <tr>
<th> <th>
Code {{ $t('components.manage.users.InvitationForm.codeLabel') }}
</th> </th>
<th> <th>
Share link {{ $t('components.manage.users.InvitationForm.shareLinkLabel') }}
</th> </th>
</tr> </tr>
</thead> </thead>
@ -121,7 +121,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
class="ui basic button" class="ui basic button"
@click="invitations = []" @click="invitations = []"
> >
Clear {{ $t('components.manage.users.InvitationForm.clearButton') }}
</button> </button>
</div> </div>
</div> </div>

View File

@ -48,7 +48,7 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('Delete'), label: t('components.manage.users.InvitationsTable.deleteLabel'),
filterCheckable: (obj: { users: unknown[], expiration_date: Date }) => { filterCheckable: (obj: { users: unknown[], expiration_date: Date }) => {
return obj.users.length === 0 && moment().isBefore(obj.expiration_date) return obj.users.length === 0 && moment().isBefore(obj.expiration_date)
} }
@ -89,7 +89,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search by username, e-mail address, code…') searchPlaceholder: t('components.manage.users.InvitationsTable.searchPlaceholder')
})) }))
</script> </script>
@ -98,7 +98,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui field"> <div class="ui field">
<label for="invitations-search">Search</label> <label for="invitations-search">{{ $t('components.manage.users.InvitationsTable.searchLabel') }}</label>
<input <input
id="invitations-search" id="invitations-search"
v-model="query" v-model="query"
@ -108,7 +108,7 @@ const labels = computed(() => ({
> >
</div> </div>
<div class="field"> <div class="field">
<label for="invitations-ordering">Ordering</label> <label for="invitations-ordering">{{ $t('components.manage.users.InvitationsTable.orderingLabel') }}</label>
<select <select
id="invitations-ordering" id="invitations-ordering"
v-model="ordering" v-model="ordering"
@ -124,20 +124,20 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="invitations-status">Status</label> <label for="invitations-status">{{ $t('components.manage.users.InvitationsTable.statusLabel') }}</label>
<select <select
id="invitations-status" id="invitations-status"
v-model="isOpen" v-model="isOpen"
class="ui dropdown" class="ui dropdown"
> >
<option :value="null"> <option :value="null">
All {{ $t('components.manage.users.InvitationsTable.allOption') }}
</option> </option>
<option :value="true"> <option :value="true">
Open {{ $t('components.manage.users.InvitationsTable.openStatus') }}
</option> </option>
<option :value="false"> <option :value="false">
Expired/used {{ $t('components.manage.users.InvitationsTable.expiredStatus') }}
</option> </option>
</select> </select>
</div> </div>
@ -160,22 +160,22 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
Owner {{ $t('components.manage.users.InvitationsTable.ownerTableHeader') }}
</th> </th>
<th> <th>
User {{ $t('components.manage.users.InvitationsTable.userTableHeader') }}
</th> </th>
<th> <th>
Status {{ $t('components.manage.users.InvitationsTable.statusTableHeader') }}
</th> </th>
<th> <th>
Creation date {{ $t('components.manage.users.InvitationsTable.creationDateTableHeader') }}
</th> </th>
<th> <th>
Expiration date {{ $t('components.manage.users.InvitationsTable.expirationDateTableHeader') }}
</th> </th>
<th> <th>
Code {{ $t('components.manage.users.InvitationsTable.codeTableHeader') }}
</th> </th>
</template> </template>
<template <template
@ -195,15 +195,15 @@ const labels = computed(() => ({
<span <span
v-if="scope.obj.users.length > 0" v-if="scope.obj.users.length > 0"
class="ui success basic label" class="ui success basic label"
>Used</span> >{{ $t('components.manage.users.InvitationsTable.usedStatusLabel') }}</span>
<span <span
v-else-if="moment().isAfter(scope.obj.expiration_date)" v-else-if="moment().isAfter(scope.obj.expiration_date)"
class="ui danger basic label" class="ui danger basic label"
>Expired</span> >{{ $t('components.manage.users.InvitationsTable.expiredStatusLabel') }}</span>
<span <span
v-else v-else
class="ui basic label" class="ui basic label"
>Not used</span> >{{ $t('components.manage.users.InvitationsTable.unusedStatusLabel') }}</span>
</td> </td>
<td> <td>
<human-date :date="scope.obj.creation_date" /> <human-date :date="scope.obj.creation_date" />
@ -227,14 +227,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
<translate {{ $t('components.manage.users.InvitationsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
translate-plural="Showing results %{ start } to %{ end } from %{ total }"
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
:translate-n="result.count"
>
Showing one result
</translate>
</span> </span>
</div> </div>
</div> </div>

View File

@ -44,15 +44,15 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
const permissions = computed(() => [ const permissions = computed(() => [
{ {
code: 'library', code: 'library',
label: t('Library') label: t('components.manage.users.UsersTable.libraryLabel')
}, },
{ {
code: 'moderation', code: 'moderation',
label: t('Moderation') label: t('components.manage.users.UsersTable.moderationLabel')
}, },
{ {
code: 'settings', code: 'settings',
label: t('Settings') label: t('components.manage.users.UsersTable.settingsLabel')
} }
]) ])
@ -91,7 +91,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('Search by username, e-mail address, name…') searchPlaceholder: t('components.manage.users.UsersTable.searchPlaceholder')
})) }))
</script> </script>
@ -100,7 +100,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui field"> <div class="ui field">
<label for="users-search">Search</label> <label for="users-search">{{ $t('components.manage.users.UsersTable.searchLabel') }}</label>
<input <input
id="users-search" id="users-search"
v-model="query" v-model="query"
@ -110,7 +110,7 @@ const labels = computed(() => ({
> >
</div> </div>
<div class="field"> <div class="field">
<label for="users-ordering">Ordering</label> <label for="users-ordering">{{ $t('components.manage.users.UsersTable.orderingLabel') }}</label>
<select <select
id="users-ordering" id="users-ordering"
v-model="ordering" v-model="ordering"
@ -126,17 +126,17 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="users-ordering-direction">Order</label> <label for="users-ordering-direction">{{ $t('components.manage.users.UsersTable.orderingDirectionLabel') }}</label>
<select <select
id="users-ordering-direction" id="users-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
Ascending {{ $t('components.manage.users.UsersTable.ascendingOrdering') }}
</option> </option>
<option value="-"> <option value="-">
Descending {{ $t('components.manage.users.UsersTable.descendingOrdering') }}
</option> </option>
</select> </select>
</div> </div>
@ -159,25 +159,25 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
Username {{ $t('components.manage.users.UsersTable.usernameTableHeader') }}
</th> </th>
<th> <th>
Email {{ $t('components.manage.users.UsersTable.emailTableHeader') }}
</th> </th>
<th> <th>
Account status {{ $t('components.manage.users.UsersTable.accountStatusTableHeader') }}
</th> </th>
<th> <th>
Sign-up {{ $t('components.manage.users.UsersTable.signupTableHeader') }}
</th> </th>
<th> <th>
Last activity {{ $t('components.manage.users.UsersTable.lastActivityTableHeader') }}
</th> </th>
<th> <th>
Permissions {{ $t('components.manage.users.UsersTable.permissionsTableHeader') }}
</th> </th>
<th> <th>
Status {{ $t('components.manage.users.UsersTable.statusTableHeader') }}
</th> </th>
</template> </template>
<template <template
@ -204,11 +204,11 @@ const labels = computed(() => ({
<span <span
v-if="scope.obj.is_active" v-if="scope.obj.is_active"
class="ui basic success label" class="ui basic success label"
>Active</span> >{{ $t('components.manage.users.UsersTable.activeStatus') }}</span>
<span <span
v-else v-else
class="ui basic label" class="ui basic label"
>Inactive</span> >{{ $t('components.manage.users.UsersTable.inactiveStatus') }}</span>
</td> </td>
<td> <td>
<human-date :date="scope.obj.date_joined" /> <human-date :date="scope.obj.date_joined" />
@ -219,7 +219,7 @@ const labels = computed(() => ({
:date="scope.obj.last_activity" :date="scope.obj.last_activity"
/> />
<template v-else> <template v-else>
N/A {{ $t('components.manage.users.UsersTable.notApplicable') }}
</template> </template>
</td> </td>
<td> <td>
@ -237,15 +237,15 @@ const labels = computed(() => ({
<span <span
v-if="scope.obj.is_superuser" v-if="scope.obj.is_superuser"
class="ui pink label" class="ui pink label"
>Admin</span> >{{ $t('components.manage.users.UsersTable.adminPermission') }}</span>
<span <span
v-else-if="scope.obj.is_staff" v-else-if="scope.obj.is_staff"
class="ui purple label" class="ui purple label"
>Staff member</span> >{{ $t('components.manage.users.UsersTable.staffPermission') }}</span>
<span <span
v-else v-else
class="ui basic label" class="ui basic label"
>Regular user</span> >{{ $t('components.manage.users.UsersTable.regularPermission') }}</span>
</td> </td>
</template> </template>
</action-table> </action-table>
@ -260,14 +260,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
<translate {{ $t('components.manage.users.UsersTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
translate-plural="Showing results %{ start } to %{ end } from %{ total }"
:translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}"
:translate-n="result.count"
>
Showing one result
</translate>
</span> </span>
</div> </div>
</div> </div>

View File

@ -45,7 +45,7 @@ const hide = async () => {
store.state.moderation.lastUpdate = new Date() store.state.moderation.lastUpdate = new Date()
store.commit('moderation/contentFilter', response.data) store.commit('moderation/contentFilter', response.data)
store.commit('ui/addMessage', { store.commit('ui/addMessage', {
content: t('Content filter successfully added'), content: t('components.moderation.FilterModal.contentSuccessMessage'),
date: new Date() date: new Date()
}) })
} catch (error) { } catch (error) {
@ -59,14 +59,11 @@ const hide = async () => {
<template> <template>
<semantic-modal v-model:show="show"> <semantic-modal v-model:show="show">
<h4 class="header"> <h4
<translate v-if="type === 'artist'"
v-if="type === 'artist'" class="header"
>
:translate-params="{name: target?.name}" {{ $t('components.moderation.FilterModal.hideContentHeader', {name: target?.name}) }}
>
Do you want to hide content from artist "%{ name }"?
</translate>
</h4> </h4>
<div class="scrolling content"> <div class="scrolling content">
<div class="description"> <div class="description">
@ -76,7 +73,7 @@ const hide = async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
Error while creating filter {{ $t('components.moderation.FilterModal.filterCreateFailureHeader') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -89,37 +86,37 @@ const hide = async () => {
</div> </div>
<template v-if="type === 'artist'"> <template v-if="type === 'artist'">
<p> <p>
You will not see tracks, albums and user activity linked to this artist any more: {{ $t('components.moderation.FilterModal.filterCreateWarning') }}
</p> </p>
<ul> <ul>
<li> <li>
In other users favorites and listening history {{ $t('components.moderation.FilterModal.filterWarningList1') }}
</li> </li>
<li> <li>
In "Recently added" widget {{ $t('components.moderation.FilterModal.filterWarningList2') }}
</li> </li>
<li> <li>
In artists and album listings {{ $t('components.moderation.FilterModal.filterWarningList3') }}
</li> </li>
<li> <li>
In radio suggestions {{ $t('components.moderation.FilterModal.filterWarningList4') }}
</li> </li>
</ul> </ul>
<p> <p>
You can manage and update your filters any time from your account settings. {{ $t('components.moderation.FilterModal.filterCreateHelp') }}
</p> </p>
</template> </template>
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic cancel button"> <button class="ui basic cancel button">
Cancel {{ $t('components.moderation.FilterModal.cancelButton') }}
</button> </button>
<button <button
:class="['ui', 'success', {loading: isLoading}, 'button']" :class="['ui', 'success', {loading: isLoading}, 'button']"
@click="hide" @click="hide"
> >
Hide content {{ $t('components.moderation.FilterModal.hideContentButton') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

View File

@ -35,7 +35,7 @@ const sharedChoices = sharedLabels.fields.report_type.choices
const allCategories = computed(() => { const allCategories = computed(() => {
const res = [] const res = []
if (props.all) { if (props.all) {
res.push({ value: '', label: t('All') }) res.push({ value: '', label: t('components.moderation.ReportCategoryDropdown.allOption') })
} }
const choices = props.restrictTo.length === 0 const choices = props.restrictTo.length === 0
@ -59,7 +59,7 @@ const allCategories = computed(() => {
<template> <template>
<div> <div>
<label v-if="label">Category</label> <label v-if="label">{{ $t('components.moderation.ReportCategoryDropdown.categoryLabel') }}</label>
<select <select
v-model="value" v-model="value"
class="ui dropdown" class="ui dropdown"

View File

@ -84,7 +84,7 @@ const submit = async () => {
store.commit('moderation/contentFilter', response.data) store.commit('moderation/contentFilter', response.data)
store.commit('ui/addMessage', { store.commit('ui/addMessage', {
content: t('Report successfully submitted, thank you'), content: t('components.moderation.ReportModal.reportSubmitSuccessMessage'),
date: new Date() date: new Date()
}) })
@ -110,7 +110,7 @@ watchEffect(async () => {
reportTypes.value = response.data.metadata.reportTypes ?? [] reportTypes.value = response.data.metadata.reportTypes ?? []
} catch (error) { } catch (error) {
store.commit('ui/addMessage', { store.commit('ui/addMessage', {
content: t('Cannot fetch Node Info: %{ error }', { error: `${error}` }), content: t('components.moderation.ReportModal.nodeinfoFetchFailure', { error: `${error}` }),
date: new Date() date: new Date()
}) })
} }
@ -125,7 +125,7 @@ watchEffect(async () => {
v-if="target" v-if="target"
class="ui header" class="ui header"
> >
Do you want to report this object? {{ $t('components.moderation.ReportModal.reportModalHeader') }}
<div class="ui sub header"> <div class="ui sub header">
{{ target.typeLabel }} - {{ target.label }} {{ target.typeLabel }} - {{ target.label }}
</div> </div>
@ -138,7 +138,7 @@ watchEffect(async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
Error while submitting report {{ $t('components.moderation.ReportModal.submissionFailureHeader') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -151,7 +151,7 @@ watchEffect(async () => {
</div> </div>
</div> </div>
<p> <p>
Use this form to submit a report to our moderation team. {{ $t('components.moderation.ReportModal.reportModalDescription') }}
</p> </p>
<form <form
v-if="canSubmit" v-if="canSubmit"
@ -173,7 +173,7 @@ watchEffect(async () => {
class="ui eight wide required field" class="ui eight wide required field"
> >
<label for="report-submitter-email"> <label for="report-submitter-email">
Email {{ $t('components.moderation.ReportModal.emailLabel') }}
</label> </label>
<input <input
id="report-submitter-email" id="report-submitter-email"
@ -183,16 +183,16 @@ watchEffect(async () => {
required required
> >
<p> <p>
We'll use this e-mail address if we need to contact you regarding this report. {{ $t('components.moderation.ReportModal.emailDescription') }}
</p> </p>
</div> </div>
</div> </div>
<div class="ui field"> <div class="ui field">
<label for="report-summary"> <label for="report-summary">
Message {{ $t('components.moderation.ReportModal.messageLabel') }}
</label> </label>
<p> <p>
Use this field to provide additional context to the moderator that will handle your report. {{ $t('components.moderation.ReportModal.messageDescription') }}
</p> </p>
<content-form <content-form
v-model="summary" v-model="summary"
@ -212,12 +212,10 @@ watchEffect(async () => {
> >
<label for="report-forward"> <label for="report-forward">
<strong> <strong>
<translate {{ $t('components.moderation.ReportModal.forwardToDomainLabel', {domain: targetDomain}) }}
:translate-params="{domain: targetDomain}"
>Forward to %{ domain} </translate>
</strong> </strong>
<p> <p>
Forward an anonymized copy of your report to the server hosting this element. {{ $t('components.moderation.ReportModal.forwardToDomainDescription') }}
</p> </p>
</label> </label>
</div> </div>
@ -234,13 +232,13 @@ watchEffect(async () => {
class="ui warning message" class="ui warning message"
> >
<h4 class="header"> <h4 class="header">
Anonymous reports are disabled, please sign-in to submit a report. {{ $t('components.moderation.ReportModal.anonymousReportsDisabled') }}
</h4> </h4>
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic cancel button"> <button class="ui basic cancel button">
Cancel {{ $t('components.moderation.ReportModal.cancelButton') }}
</button> </button>
<button <button
v-if="canSubmit" v-if="canSubmit"
@ -248,7 +246,7 @@ watchEffect(async () => {
type="submit" type="submit"
form="report-form" form="report-form"
> >
Submit report {{ $t('components.moderation.ReportModal.submitReportButton') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

View File

@ -17,12 +17,8 @@ const { t } = useI18n()
const store = useStore() const store = useStore()
const labels = computed(() => ({ const labels = computed(() => ({
libraryFollowMessage: t('%{ username } followed your library "%{ library }"'), markRead: t('components.notifications.NotificationRow.markRead'),
libraryAcceptFollowMessage: t('%{ username } accepted your follow on library "%{ library }"'), markUnread: t('components.notifications.NotificationRow.markUnread')
libraryRejectMessage: t('You rejected %{ username }&#39;s request to follow "%{ library }"'),
libraryPendingFollowMessage: t('%{ username } wants to follow your library "%{ library }"'),
markRead: t('Mark as read'),
markUnread: t('Mark as unread')
})) }))
const item = ref(props.initialItem) const item = ref(props.initialItem)
@ -39,30 +35,30 @@ const notificationData = computed(() => {
if (activity.related_object?.approved === null) { if (activity.related_object?.approved === null) {
return { return {
detailUrl, detailUrl,
message: t(labels.value.libraryPendingFollowMessage, { username: username.value, library: activity.object.name }), message: t('components.notifications.NotificationRow.libraryPendingFollowMessage', { username: username.value, library: activity.object.name }),
acceptFollow: { acceptFollow: {
buttonClass: 'success', buttonClass: 'success',
icon: 'check', icon: 'check',
label: t('Approve'), label: t('components.notifications.NotificationRow.approve'),
handler: () => approveLibraryFollow(activity.related_object) handler: () => approveLibraryFollow(activity.related_object)
}, },
rejectFollow: { rejectFollow: {
buttonClass: 'danger', buttonClass: 'danger',
icon: 'x', icon: 'x',
label: t('Reject'), label: t('components.notifications.NotificationRow.reject'),
handler: () => rejectLibraryFollow(activity.related_object) handler: () => rejectLibraryFollow(activity.related_object)
} }
} }
} else if (activity.related_object?.approved) { } else if (activity.related_object?.approved) {
return { return {
detailUrl, detailUrl,
message: t(labels.value.libraryFollowMessage, { username: username.value, library: activity.object.name }) message: t('components.notifications.NotificationRow.libraryFollowMessage', { username: username.value, library: activity.object.name })
} }
} }
return { return {
detailUrl, detailUrl,
message: t(labels.value.libraryRejectMessage, { username: username.value, library: activity.object.name }) message: t('components.notifications.NotificationRow.libraryRejectMessage', { username: username.value, library: activity.object.name })
} }
} }
} }
@ -71,7 +67,7 @@ const notificationData = computed(() => {
if (activity.object?.type === 'federation.LibraryFollow') { if (activity.object?.type === 'federation.LibraryFollow') {
return { return {
detailUrl: { name: 'content.remote.index' }, detailUrl: { name: 'content.remote.index' },
message: t(labels.value.libraryAcceptFollowMessage, { username: username.value, library: activity.related_object.name }) message: t('components.notifications.NotificationRow.libraryAcceptFollowMessage', { username: username.value, library: activity.related_object.name })
} }
} }
} }

View File

@ -61,14 +61,7 @@ const images = computed(() => {
</div> </div>
</div> </div>
<div class="extra content"> <div class="extra content">
<translate {{ $t('components.playlists.Card.trackCount', {tracks_count: playlist.tracks_count}) }}
:translate-params="{count: playlist.tracks_count}"
:translate-n="playlist.tracks_count"
translate-plural="%{ count } tracks"
>
%{ count } track
</translate>
<play-button <play-button
class="right floated basic icon" class="right floated basic icon"
:dropdown-only="true" :dropdown-only="true"

View File

@ -51,7 +51,7 @@ const tracks = computed({
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
copyTitle: t('Copy the current queue to this playlist') copyTitle: t('components.playlists.Editor.copyTitle')
})) }))
const isLoading = ref(false) const isLoading = ref(false)
@ -167,16 +167,16 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
:title="undefined" :title="undefined"
/> />
<h3 class="ui top attached header"> <h3 class="ui top attached header">
Playlist editor {{ $t('components.playlists.Editor.editorHeader') }}
</h3> </h3>
<div class="ui attached segment"> <div class="ui attached segment">
<template v-if="status === 'loading'"> <template v-if="status === 'loading'">
<div class="ui active tiny inline loader" /> <div class="ui active tiny inline loader" />
Syncing changes to server {{ $t('components.playlists.Editor.syncingChangesMessage') }}
</template> </template>
<template v-else-if="status === 'errored'"> <template v-else-if="status === 'errored'">
<i class="dangerclose icon" /> <i class="dangerclose icon" />
An error occurred while saving your changes {{ $t('components.playlists.Editor.syncingChangesFailureMessage') }}
<div <div
v-if="errors.length > 0" v-if="errors.length > 0"
role="alert" role="alert"
@ -197,10 +197,8 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
role="alert" role="alert"
class="ui warning message" class="ui warning message"
> >
<p <p>
v-translate="{playlist: playlist?.name}" {{ $t('components.playlists.Editor.tracksExistWarning') }}
>
Some tracks in your queue are already in this playlist:
</p> </p>
<ul class="ui relaxed divided list duplicate-tracks-list"> <ul class="ui relaxed divided list duplicate-tracks-list">
<li <li
@ -215,11 +213,12 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
class="ui small success button" class="ui small success button"
@click="insertMany(queueTracks, true)" @click="insertMany(queueTracks, true)"
> >
Add anyways {{ $t('components.playlists.Editor.addAnywayButton') }}
</button> </button>
</div> </div>
<template v-else-if="status === 'saved'"> <template v-else-if="status === 'saved'">
<i class="success check icon" /> Changes synced with server <i class="success check icon" />
{{ $t('components.playlists.Editor.syncedStatus') }}
</template> </template>
</div> </div>
<div class="ui bottom attached segment"> <div class="ui bottom attached segment">
@ -230,14 +229,7 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
@click="insertMany(queueTracks, false)" @click="insertMany(queueTracks, false)"
> >
<i class="plus icon" /> <i class="plus icon" />
<translate {{ $t('components.playlists.Editor.insertCount', {count: queueTracks.length}) }}
translate-plural="Insert from queue (%{ count } tracks)"
:translate-n="queueTracks.length"
:translate-params="{count: queueTracks.length}"
>
Insert from queue (%{ count } track)
</translate>
</button> </button>
<dangerous-button <dangerous-button
@ -245,31 +237,28 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
class="ui labeled right floated danger icon button" class="ui labeled right floated danger icon button"
:action="clearPlaylist" :action="clearPlaylist"
> >
<i class="eraser icon" /> Clear playlist <i class="eraser icon" />
{{ $t('components.playlists.Editor.clearPlaylistButton') }}
<template #modal-header> <template #modal-header>
<p <p>
v-translate="{playlist: playlist?.name}" {{ $t('components.playlists.Editor.clearPlaylistModalHeader', {playlist: playlist?.name}) }}
:translate-params="{playlist: playlist?.name}"
>
Do you want to clear the playlist "%{ playlist }"?
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<p> <p>
This will remove all tracks from this playlist and cannot be undone. {{ $t('components.playlists.Editor.clearPlaylistModalContent') }}
</p> </p>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<div> <div>
Clear playlist {{ $t('components.playlists.Editor.clearPlaylistButton') }}
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<template v-if="tracks.length > 0"> <template v-if="tracks.length > 0">
<p> <p>
Drag and drop rows to reorder tracks in the playlist {{ $t('components.playlists.Editor.reorderTracks') }}
</p> </p>
<div class="table-wrapper"> <div class="table-wrapper">
<table class="ui compact very basic unstackable table"> <table class="ui compact very basic unstackable table">

View File

@ -42,7 +42,7 @@ const privacyLevel = ref(playlist.value?.privacy_level ?? store.state.auth.profi
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
placeholder: t('My awesome playlist') placeholder: t('components.playlists.Form.placeholder')
})) }))
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
@ -111,7 +111,7 @@ const submit = async () => {
v-if="title" v-if="title"
class="ui header" class="ui header"
> >
Create a new playlist {{ $t('components.playlists.Form.createPlaylistHeader') }}
</h4> </h4>
<div <div
v-if="success" v-if="success"
@ -119,10 +119,10 @@ const submit = async () => {
> >
<h4 class="header"> <h4 class="header">
<template v-if="playlist"> <template v-if="playlist">
Playlist updated {{ $t('components.playlists.Form.updateSuccessHeader') }}
</template> </template>
<template v-else> <template v-else>
Playlist created {{ $t('components.playlists.Form.createSuccessHeader') }}
</template> </template>
</h4> </h4>
</div> </div>
@ -132,7 +132,7 @@ const submit = async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
The playlist could not be created {{ $t('components.playlists.Form.createFailureHeader') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -145,7 +145,7 @@ const submit = async () => {
</div> </div>
<div class="three fields"> <div class="three fields">
<div class="field"> <div class="field">
<label for="playlist-name">Playlist name</label> <label for="playlist-name">{{ $t('components.playlists.Form.playlistNameLabel') }}</label>
<input <input
id="playlist-name" id="playlist-name"
v-model="name" v-model="name"
@ -156,7 +156,7 @@ const submit = async () => {
> >
</div> </div>
<div class="field"> <div class="field">
<label for="playlist-visibility">Playlist visibility</label> <label for="playlist-visibility">{{ $t('components.playlists.Form.playlistVisibilityLabel') }}</label>
<select <select
id="playlist-visibility" id="playlist-visibility"
v-model="privacyLevel" v-model="privacyLevel"
@ -178,10 +178,10 @@ const submit = async () => {
type="submit" type="submit"
> >
<template v-if="playlist"> <template v-if="playlist">
Update playlist {{ $t('components.playlists.Form.updatePlaylistButton') }}
</template> </template>
<template v-else> <template v-else>
Create playlist {{ $t('components.playlists.Form.createPlaylistButton') }}
</template> </template>
</button> </button>
</div> </div>

View File

@ -27,8 +27,8 @@ const track = computed(() => store.state.playlists.modalTrack)
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
addToPlaylist: t('Add to this playlist'), addToPlaylist: t('components.playlists.PlaylistModal.addToPlaylist'),
filterPlaylistField: t('Enter playlist name') filterPlaylistField: t('components.playlists.PlaylistModal.filterPlaylistField')
})) }))
const playlistNameFilter = ref('') const playlistNameFilter = ref('')
@ -85,21 +85,18 @@ store.dispatch('playlists/fetchOwn')
<h4 class="header"> <h4 class="header">
<template v-if="track"> <template v-if="track">
<h2 class="ui header"> <h2 class="ui header">
Add to playlist {{ $t('components.playlists.PlaylistModal.addToPlaylistHeader') }}
<div <div
v-translate="{artist: track.artist?.name, title: track.title}"
class="ui sub header" class="ui sub header"
:translate-params="{artist: track.artist?.name, title: track.title}"
> >
"%{ title }", by %{ artist } {{ $t('components.playlists.PlaylistModal.trackTitle', {artist: track.artist?.name, title: track.title}) }}
</div> </div>
</h2> </h2>
</template> </template>
<translate <translate
v-else v-else
> >
Manage playlists {{ $t('components.playlists.PlaylistModal.managePlaylistsHeader') }}
</translate> </translate>
</h4> </h4>
<div class="scrolling content"> <div class="scrolling content">
@ -114,24 +111,20 @@ store.dispatch('playlists/fetchOwn')
role="alert" role="alert"
class="ui warning message" class="ui warning message"
> >
<p <p>
v-translate="{track: track?.title, playlist: duplicateTrackAddInfo.playlist_name}" {{ $t('components.playlists.PlaylistModal.trackAlreadyInPlaylist', {track: track?.title, playlist: duplicateTrackAddInfo.playlist_name}) }}
:translate-params="{track: track?.title, playlist: duplicateTrackAddInfo.playlist_name}"
>
<strong>%{ track }</strong> is already in <strong>%{ playlist }</strong>.
</p> </p>
<button <button
class="ui small basic cancel button" class="ui small basic cancel button"
@click="showDuplicateTrackAddConfirmation = false" @click="showDuplicateTrackAddConfirmation = false"
> >
Cancel {{ $t('components.playlists.PlaylistModal.cancelButton') }}
</button> </button>
<button <button
class="ui small success button" class="ui small success button"
@click="addToPlaylist(lastSelectedPlaylist, true)" @click="addToPlaylist(lastSelectedPlaylist, true)"
> >
Add anyways {{ $t('components.playlists.PlaylistModal.addAnywayButton') }}
</button> </button>
</div> </div>
<div <div
@ -140,7 +133,7 @@ store.dispatch('playlists/fetchOwn')
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
The track can't be added to a playlist {{ $t('components.playlists.PlaylistModal.trackAddFailureHeader') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -152,12 +145,12 @@ store.dispatch('playlists/fetchOwn')
</ul> </ul>
</div> </div>
<h4 class="ui header"> <h4 class="ui header">
Available playlists {{ $t('components.playlists.PlaylistModal.availablePlaylistsHeader') }}
</h4> </h4>
<div class="ui form"> <div class="ui form">
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<label for="playlist-name-filter">Filter</label> <label for="playlist-name-filter">{{ $t('components.playlists.PlaylistModal.filterLabel') }}</label>
<input <input
id="playlist-name-filter" id="playlist-name-filter"
v-model="playlistNameFilter" v-model="playlistNameFilter"
@ -174,15 +167,15 @@ store.dispatch('playlists/fetchOwn')
> >
<thead> <thead>
<tr> <tr>
<th><span class="visually-hidden">Edit</span></th> <th><span class="visually-hidden">{{ $t('components.playlists.PlaylistModal.editTableHeader') }}</span></th>
<th> <th>
Name {{ $t('components.playlists.PlaylistModal.nameTableHeader') }}
</th> </th>
<th class="sorted descending"> <th class="sorted descending">
Last modification {{ $t('components.playlists.PlaylistModal.lastModificationTableHeader') }}
</th> </th>
<th> <th>
Tracks {{ $t('components.playlists.PlaylistModal.tracksTableHeader') }}
</th> </th>
</tr> </tr>
</thead> </thead>
@ -197,7 +190,7 @@ store.dispatch('playlists/fetchOwn')
:to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}" :to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"
> >
<i class="ui pencil icon" /> <i class="ui pencil icon" />
<span class="visually-hidden">Edit</span> <span class="visually-hidden">{{ $t('components.playlists.PlaylistModal.editTableHeader') }}</span>
</router-link> </router-link>
</td> </td>
<td> <td>
@ -217,7 +210,8 @@ store.dispatch('playlists/fetchOwn')
:title="labels.addToPlaylist" :title="labels.addToPlaylist"
@click.prevent="addToPlaylist(playlist.id, false)" @click.prevent="addToPlaylist(playlist.id, false)"
> >
<i class="plus icon" /> Add track <i class="plus icon" />
{{ $t('components.playlists.PlaylistModal.addTrackButton') }}
</button> </button>
</td> </td>
</tr> </tr>
@ -226,7 +220,7 @@ store.dispatch('playlists/fetchOwn')
<template v-else> <template v-else>
<div class="ui small placeholder segment component-placeholder"> <div class="ui small placeholder segment component-placeholder">
<h4 class="ui header"> <h4 class="ui header">
No results matching your filter {{ $t('components.playlists.PlaylistModal.emptyStateMessage') }}
</h4> </h4>
</div> </div>
</template> </template>
@ -237,13 +231,13 @@ store.dispatch('playlists/fetchOwn')
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="list icon" /> <i class="list icon" />
No playlists have been created yet {{ $t('components.playlists.PlaylistModal.noPlaylistsMessage') }}
</div> </div>
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic cancel button"> <button class="ui basic cancel button">
Cancel {{ $t('components.playlists.PlaylistModal.cancelButton') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

View File

@ -20,7 +20,7 @@ withDefaults(defineProps<Props>(), {
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
addToPlaylist: t('Add to playlist…') addToPlaylist: t('components.playlists.TrackPlaylistIcon.addToPlaylist')
})) }))
</script> </script>
@ -31,7 +31,7 @@ const labels = computed(() => ({
@click.stop="$store.commit('playlists/chooseTrack', track)" @click.stop="$store.commit('playlists/chooseTrack', track)"
> >
<i class="list icon" /> <i class="list icon" />
Add to playlist {{ $t('components.playlists.TrackPlaylistIcon.addToPlaylist') }}
</button> </button>
<button <button
v-else v-else

View File

@ -78,7 +78,7 @@ watch(
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="list icon" /> <i class="list icon" />
No playlists have been created yet {{ $t('components.playlists.Widget.noPlaylistsMessage') }}
</div> </div>
<button <button
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
@ -86,7 +86,7 @@ watch(
@click="$store.commit('playlists/chooseTrack', null)" @click="$store.commit('playlists/chooseTrack', null)"
> >
<i class="list icon" /> <i class="list icon" />
Create Playlist {{ $t('components.playlists.Widget.createPlaylistButton') }}
</button> </button>
</div> </div>
<template v-if="nextPage"> <template v-if="nextPage">
@ -96,7 +96,7 @@ watch(
:class="['ui', 'basic', 'button']" :class="['ui', 'basic', 'button']"
@click="fetchData(nextPage)" @click="fetchData(nextPage)"
> >
Show more {{ $t('components.playlists.Widget.showMore') }}
</button> </button>
</template> </template>
</div> </div>

View File

@ -41,20 +41,20 @@ const buttonLabel = computed(() => {
switch (props.radioConfig?.type) { switch (props.radioConfig?.type) {
case 'tag': case 'tag':
return running.value return running.value
? t('Stop tags radio') ? t('components.radios.Button.stopTagsRadio')
: t('Start tags radio') : t('components.radios.Button.startTagsRadio')
case 'artist': case 'artist':
return running.value return running.value
? t('Stop artists radio') ? t('components.radios.Button.stopArtistsRadio')
: t('Start artists radio') : t('components.radios.Button.startArtistsRadio')
case 'playlist': case 'playlist':
return running.value return running.value
? t('Stop playlists radio') ? t('components.radios.Button.stopPlaylistsRadio')
: t('Start playlists radio') : t('components.radios.Button.startPlaylistsRadio')
default: default:
return running.value return running.value
? t('Stop radio') ? t('components.radios.Button.stopRadio')
: t('Play radio') : t('components.radios.Button.startRadio')
} }
}) })

View File

@ -70,7 +70,7 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
class="ui success button right floated" class="ui success button right floated"
:to="{name: 'library.radios.edit', params: {id: customRadioId }}" :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
> >
Edit {{ $t('components.radios.Card.editButton') }}
</router-link> </router-link>
</div> </div>
</div> </div>

View File

@ -46,14 +46,7 @@ const tags = computed(() => {
class="ui circular inverted accent label" class="ui circular inverted accent label"
@click.prevent="honorLimit = false" @click.prevent="honorLimit = false"
> >
<translate {{ $t('components.tags.List.showMoreTags', {count: props.tags.length - tags.length}) }}
:translate-params="{ count: props.tags.length - tags.length }"
:translate-n="props.tags.length - tags.length"
translate-plural="Show %{ count } more tags"
>
Show 1 more tag
</translate>
</div> </div>
</div> </div>
</template> </template>

View File

@ -63,9 +63,9 @@ const setPage = (page: number) => {
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
pagination: t('Pagination'), pagination: t('components.vui.Pagination.pagination'),
previousPage: t('Previous Page'), previousPage: t('components.vui.Pagination.previousPage'),
nextPage: t('Next Page') nextPage: t('components.vui.Pagination.nextPage')
})) }))
</script> </script>

File diff suppressed because it is too large Load Diff