consistent use of i18n for translations, replace , and global variables with local definitions
This commit is contained in:
ArneBo
upsiflu
parent
4d78c2143c
commit
edad84b0b6
|
|
@ -47,8 +47,8 @@ const labels = computed(() => ({
|
|||
:::{tab-item} Template
|
||||
|
||||
```html
|
||||
<h2>{{ $t('components.About.header.funkwhale') }}</h2>
|
||||
<button>{{ $t('components.About.button.cancel') }}</button>
|
||||
<h2>{{ t('components.About.header.funkwhale') }}</h2>
|
||||
<button>{{ t('components.About.button.cancel') }}</button>
|
||||
```
|
||||
|
||||
:::
|
||||
|
|
@ -84,11 +84,11 @@ Some strings change depending on whether they are plural or not. You can create
|
|||
v-if="object.artist?.content_category === 'podcast'"
|
||||
class="meta ellipsis"
|
||||
>
|
||||
{{ $t('components.audio.ChannelCard.meta.episodes', {episode_count:
|
||||
{{ t('components.audio.ChannelCard.meta.episodes', {episode_count:
|
||||
object.artist.tracks_count}) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.audio.ChannelCard.meta.tracks', {tracks_count:
|
||||
{{ t('components.audio.ChannelCard.meta.tracks', {tracks_count:
|
||||
object.artist?.tracks_count}) }}
|
||||
</span>
|
||||
<tags-list
|
||||
|
|
|
|||
|
|
@ -4,9 +4,13 @@ import { computed, ref, defineAsyncComponent, nextTick, onMounted } from 'vue'
|
|||
|
||||
import { useQueue } from '~/composables/audio/queue'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const ChannelUploadModal = defineAsyncComponent(() => import('~/components/channels/UploadModal.vue'))
|
||||
const PlaylistModal = defineAsyncComponent(() => import('~/components/playlists/PlaylistModal.vue'))
|
||||
const FilterModal = defineAsyncComponent(() => import('~/components/moderation/FilterModal.vue'))
|
||||
|
|
@ -85,7 +89,7 @@ const showSetInstanceModal = ref(false)
|
|||
<component :is="Component" />
|
||||
<template #fallback>
|
||||
<!-- TODO (wvffle): Add loader -->
|
||||
{{ $t('App.loading') }}
|
||||
{{ t('App.loading') }}
|
||||
</template>
|
||||
</Suspense>
|
||||
</keep-alive>
|
||||
|
|
|
|||
|
|
@ -67,10 +67,10 @@ const headerStyle = computed(() => {
|
|||
<div class="column" />
|
||||
</div>
|
||||
<h2 class="header">
|
||||
{{ $t('components.About.header.funkwhale') }}
|
||||
{{ t('components.About.header.funkwhale') }}
|
||||
</h2>
|
||||
<p>
|
||||
{{ $t('components.About.description.funkwhale') }}
|
||||
{{ t('components.About.description.funkwhale') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,14 +84,14 @@ const headerStyle = computed(() => {
|
|||
class="signup-form content"
|
||||
>
|
||||
<h3 class="header">
|
||||
{{ $t('components.About.header.signup') }}
|
||||
{{ t('components.About.header.signup') }}
|
||||
</h3>
|
||||
<template v-if="openRegistrations">
|
||||
<p>
|
||||
{{ $t('components.About.description.signup') }}
|
||||
{{ t('components.About.description.signup') }}
|
||||
</p>
|
||||
<p v-if="defaultUploadQuota">
|
||||
{{ $t('components.About.description.quota', {quota: defaultUploadQuota}) }}
|
||||
{{ t('components.About.description.quota', {quota: defaultUploadQuota}) }}
|
||||
</p>
|
||||
<signup-form
|
||||
button-classes="success"
|
||||
|
|
@ -100,7 +100,7 @@ const headerStyle = computed(() => {
|
|||
</template>
|
||||
<div v-else>
|
||||
<p>
|
||||
{{ $t('components.About.help.closedRegistrations') }}
|
||||
{{ t('components.About.help.closedRegistrations') }}
|
||||
</p>
|
||||
|
||||
<a
|
||||
|
|
@ -108,7 +108,7 @@ const headerStyle = computed(() => {
|
|||
rel="noopener"
|
||||
href="https://funkwhale.audio/#get-started"
|
||||
>
|
||||
{{ $t('components.About.link.findOtherPod') }}
|
||||
{{ t('components.About.link.findOtherPod') }}
|
||||
<i class="external alternate icon" />
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -118,13 +118,13 @@ const headerStyle = computed(() => {
|
|||
class="signup-form content"
|
||||
>
|
||||
<h3 class="header">
|
||||
{{ $t('components.About.header.signup') }}
|
||||
{{ t('components.About.header.signup') }}
|
||||
<div class="ui positive message">
|
||||
<div class="header">
|
||||
{{ $t('components.About.message.loggedIn') }}
|
||||
{{ t('components.About.message.loggedIn') }}
|
||||
</div>
|
||||
<p>
|
||||
{{ $t('components.About.message.greeting', {username: $store.state.auth.username}) }}
|
||||
{{ t('components.About.message.greeting', {username: $store.state.auth.username}) }}
|
||||
</p>
|
||||
</div>
|
||||
</h3>
|
||||
|
|
@ -145,7 +145,7 @@ const headerStyle = computed(() => {
|
|||
id="description"
|
||||
class="ui header"
|
||||
>
|
||||
{{ $t('components.About.header.aboutPod') }}
|
||||
{{ t('components.About.header.aboutPod') }}
|
||||
</h3>
|
||||
<div
|
||||
v-if="shortDescription"
|
||||
|
|
@ -154,7 +154,7 @@ const headerStyle = computed(() => {
|
|||
{{ shortDescription }}
|
||||
</div>
|
||||
<p v-else>
|
||||
{{ $t('components.About.placeholder.noDescription') }}
|
||||
{{ t('components.About.placeholder.noDescription') }}
|
||||
</p>
|
||||
|
||||
<template v-if="stats">
|
||||
|
|
@ -164,14 +164,14 @@ const headerStyle = computed(() => {
|
|||
<span class="statistics-figure ui text">
|
||||
<span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||
<br>
|
||||
{{ $t('components.About.stat.activeUsers', stats.users) }}
|
||||
{{ t('components.About.stat.activeUsers', stats.users) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span class="statistics-figure ui text">
|
||||
<span class="ui big text"><strong>{{ stats.hours.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||
<br>
|
||||
{{ $t('components.About.stat.hoursOfMusic', stats.hours) }}
|
||||
{{ t('components.About.stat.hoursOfMusic', stats.hours) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -182,7 +182,7 @@ const headerStyle = computed(() => {
|
|||
to="/about/pod"
|
||||
class="ui fluid basic secondary button"
|
||||
>
|
||||
{{ $t('components.About.link.learnMore') }}
|
||||
{{ t('components.About.link.learnMore') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -201,10 +201,10 @@ const headerStyle = computed(() => {
|
|||
id="description"
|
||||
class="ui header"
|
||||
>
|
||||
{{ $t('components.About.header.publicContent') }}
|
||||
{{ t('components.About.header.publicContent') }}
|
||||
</h3>
|
||||
<p>
|
||||
{{ $t('components.About.description.publicContent') }}
|
||||
{{ t('components.About.description.publicContent') }}
|
||||
</p>
|
||||
</div>
|
||||
</router-link>
|
||||
|
|
@ -218,11 +218,11 @@ const headerStyle = computed(() => {
|
|||
id="description"
|
||||
class="ui header"
|
||||
>
|
||||
{{ $t('components.About.link.findOtherPod') }}
|
||||
{{ t('components.About.link.findOtherPod') }}
|
||||
<i class="external alternate icon" />
|
||||
</h3>
|
||||
<p>
|
||||
{{ $t('components.About.description.publicContent') }}
|
||||
{{ t('components.About.description.publicContent') }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -236,11 +236,11 @@ const headerStyle = computed(() => {
|
|||
id="description"
|
||||
class="ui header"
|
||||
>
|
||||
{{ $t('components.About.header.findApp') }}
|
||||
{{ t('components.About.header.findApp') }}
|
||||
<i class="external alternate icon" />
|
||||
</h3>
|
||||
<p>
|
||||
{{ $t('components.About.description.findApp') }}
|
||||
{{ t('components.About.description.findApp') }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -250,7 +250,7 @@ const headerStyle = computed(() => {
|
|||
to="/about/pod"
|
||||
class="ui right floated basic secondary button"
|
||||
>
|
||||
{{ $t('components.About.header.aboutPod') }}
|
||||
{{ t('components.About.header.aboutPod') }}
|
||||
<i class="icon arrow right" />
|
||||
</router-link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -99,32 +99,32 @@ const headerStyle = computed(() => {
|
|||
to="/about/pod"
|
||||
class="item"
|
||||
>
|
||||
{{ $t('components.AboutPod.link.about') }}
|
||||
{{ t('components.AboutPod.link.about') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
to="/about/pod#rules"
|
||||
class="item"
|
||||
>
|
||||
{{ $t('components.AboutPod.link.rules') }}
|
||||
{{ t('components.AboutPod.link.rules') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
to="/about/pod#terms"
|
||||
class="item"
|
||||
>
|
||||
{{ $t('components.AboutPod.link.terms') }}
|
||||
{{ t('components.AboutPod.link.terms') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
to="/about/pod#features"
|
||||
class="item"
|
||||
>
|
||||
{{ $t('components.AboutPod.link.features') }}
|
||||
{{ t('components.AboutPod.link.features') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="stats"
|
||||
to="/about/pod#statistics"
|
||||
class="item"
|
||||
>
|
||||
{{ $t('components.AboutPod.link.statistics') }}
|
||||
{{ t('components.AboutPod.link.statistics') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -134,49 +134,49 @@ const headerStyle = computed(() => {
|
|||
id="description about-this-pod"
|
||||
class="ui header"
|
||||
>
|
||||
{{ $t('components.AboutPod.header.about') }}
|
||||
{{ t('components.AboutPod.header.about') }}
|
||||
</h2>
|
||||
<sanitized-html
|
||||
v-if="longDescription"
|
||||
:html="longDescription"
|
||||
/>
|
||||
<p v-else>
|
||||
{{ $t('components.AboutPod.placeholder.noDescription') }}
|
||||
{{ t('components.AboutPod.placeholder.noDescription') }}
|
||||
</p>
|
||||
|
||||
<h3
|
||||
id="rules"
|
||||
class="ui header"
|
||||
>
|
||||
{{ $t('components.AboutPod.header.rules') }}
|
||||
{{ t('components.AboutPod.header.rules') }}
|
||||
</h3>
|
||||
<sanitized-html
|
||||
v-if="rules"
|
||||
:html="rules"
|
||||
/>
|
||||
<p v-else>
|
||||
{{ $t('components.AboutPod.placeholder.noRules') }}
|
||||
{{ t('components.AboutPod.placeholder.noRules') }}
|
||||
</p>
|
||||
|
||||
<h3
|
||||
id="terms"
|
||||
class="ui header"
|
||||
>
|
||||
{{ $t('components.AboutPod.header.terms') }}
|
||||
{{ t('components.AboutPod.header.terms') }}
|
||||
</h3>
|
||||
<sanitized-html
|
||||
v-if="terms"
|
||||
:html="terms"
|
||||
/>
|
||||
<p v-else>
|
||||
{{ $t('components.AboutPod.placeholder.noTerms') }}
|
||||
{{ t('components.AboutPod.placeholder.noTerms') }}
|
||||
</p>
|
||||
|
||||
<h3
|
||||
id="features"
|
||||
class="header"
|
||||
>
|
||||
{{ $t('components.AboutPod.header.features') }}
|
||||
{{ t('components.AboutPod.header.features') }}
|
||||
</h3>
|
||||
<div class="features-container ui two column stackable grid">
|
||||
<div class="column">
|
||||
|
|
@ -184,7 +184,7 @@ const headerStyle = computed(() => {
|
|||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.AboutPod.feature.version') }}
|
||||
{{ t('components.AboutPod.feature.version') }}
|
||||
</td>
|
||||
<td
|
||||
v-if="version"
|
||||
|
|
@ -199,13 +199,13 @@ const headerStyle = computed(() => {
|
|||
class="right aligned"
|
||||
>
|
||||
<span class="features-status ui text">
|
||||
{{ $t('components.AboutPod.notApplicable') }}
|
||||
{{ t('components.AboutPod.notApplicable') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.AboutPod.feature.federation') }}
|
||||
{{ t('components.AboutPod.feature.federation') }}
|
||||
</td>
|
||||
<td
|
||||
v-if="federationEnabled"
|
||||
|
|
@ -213,7 +213,7 @@ const headerStyle = computed(() => {
|
|||
>
|
||||
<span class="features-status ui text">
|
||||
<i class="check icon" />
|
||||
{{ $t('components.AboutPod.feature.status.enabled') }}
|
||||
{{ t('components.AboutPod.feature.status.enabled') }}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
|
|
@ -222,13 +222,13 @@ const headerStyle = computed(() => {
|
|||
>
|
||||
<span class="features-status ui text">
|
||||
<i class="x icon" />
|
||||
{{ $t('components.AboutPod.feature.status.disabled') }}
|
||||
{{ t('components.AboutPod.feature.status.disabled') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.AboutPod.feature.allowList') }}
|
||||
{{ t('components.AboutPod.feature.allowList') }}
|
||||
</td>
|
||||
<td
|
||||
v-if="allowListEnabled"
|
||||
|
|
@ -236,7 +236,7 @@ const headerStyle = computed(() => {
|
|||
>
|
||||
<span class="features-status ui text">
|
||||
<i class="check icon" />
|
||||
{{ $t('components.AboutPod.feature.status.enabled') }}
|
||||
{{ t('components.AboutPod.feature.status.enabled') }}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
|
|
@ -245,7 +245,7 @@ const headerStyle = computed(() => {
|
|||
>
|
||||
<span class="features-status ui text">
|
||||
<i class="x icon" />
|
||||
{{ $t('components.AboutPod.feature.status.disabled') }}
|
||||
{{ t('components.AboutPod.feature.status.disabled') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -257,7 +257,7 @@ const headerStyle = computed(() => {
|
|||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.AboutPod.feature.anonymousAccess') }}
|
||||
{{ t('components.AboutPod.feature.anonymousAccess') }}
|
||||
</td>
|
||||
<td
|
||||
v-if="anonymousCanListen"
|
||||
|
|
@ -265,7 +265,7 @@ const headerStyle = computed(() => {
|
|||
>
|
||||
<span class="features-status ui text">
|
||||
<i class="check icon" />
|
||||
{{ $t('components.AboutPod.feature.status.enabled') }}
|
||||
{{ t('components.AboutPod.feature.status.enabled') }}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
|
|
@ -274,13 +274,13 @@ const headerStyle = computed(() => {
|
|||
>
|
||||
<span class="features-status ui text">
|
||||
<i class="x icon" />
|
||||
{{ $t('components.AboutPod.feature.status.disabled') }}
|
||||
{{ t('components.AboutPod.feature.status.disabled') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.AboutPod.feature.registrations') }}
|
||||
{{ t('components.AboutPod.feature.registrations') }}
|
||||
</td>
|
||||
<td
|
||||
v-if="openRegistrations"
|
||||
|
|
@ -288,7 +288,7 @@ const headerStyle = computed(() => {
|
|||
>
|
||||
<span class="features-status ui text">
|
||||
<i class="check icon" />
|
||||
{{ $t('components.AboutPod.feature.status.open') }}
|
||||
{{ t('components.AboutPod.feature.status.open') }}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
|
|
@ -297,13 +297,13 @@ const headerStyle = computed(() => {
|
|||
>
|
||||
<span class="features-status ui text">
|
||||
<i class="x icon" />
|
||||
{{ $t('components.AboutPod.feature.status.closed') }}
|
||||
{{ t('components.AboutPod.feature.status.closed') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.AboutPod.feature.quota') }}
|
||||
{{ t('components.AboutPod.feature.quota') }}
|
||||
</td>
|
||||
<td
|
||||
v-if="defaultUploadQuota"
|
||||
|
|
@ -318,7 +318,7 @@ const headerStyle = computed(() => {
|
|||
class="right aligned"
|
||||
>
|
||||
<span class="features-status ui text">
|
||||
{{ $t('components.AboutPod.notApplicable') }}
|
||||
{{ t('components.AboutPod.notApplicable') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -332,7 +332,7 @@ const headerStyle = computed(() => {
|
|||
id="statistics"
|
||||
class="header"
|
||||
>
|
||||
{{ $t('components.AboutPod.header.statistics') }}
|
||||
{{ t('components.AboutPod.header.statistics') }}
|
||||
</h3>
|
||||
<div class="statistics-container">
|
||||
<div
|
||||
|
|
@ -342,7 +342,7 @@ const headerStyle = computed(() => {
|
|||
<span class="statistics-figure ui text">
|
||||
<span class="ui big text"><strong>{{ stats.hours.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||
<br>
|
||||
{{ $t('components.AboutPod.stat.hoursOfMusic', stats.hours) }}
|
||||
{{ t('components.AboutPod.stat.hoursOfMusic', stats.hours) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -352,7 +352,7 @@ const headerStyle = computed(() => {
|
|||
<span class="statistics-figure ui text">
|
||||
<span class="ui big text"><strong>{{ stats.artists.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||
<br>
|
||||
{{ $t('components.AboutPod.stat.artistsCount', stats.artists) }}
|
||||
{{ t('components.AboutPod.stat.artistsCount', stats.artists) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -362,7 +362,7 @@ const headerStyle = computed(() => {
|
|||
<span class="statistics-figure ui text">
|
||||
<span class="ui big text"><strong>{{ stats.albums.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||
<br>
|
||||
{{ $t('components.AboutPod.stat.albumsCount', stats.albums) }}
|
||||
{{ t('components.AboutPod.stat.albumsCount', stats.albums) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -372,7 +372,7 @@ const headerStyle = computed(() => {
|
|||
<span class="statistics-figure ui text">
|
||||
<span class="ui big text"><strong>{{ stats.tracks.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||
<br>
|
||||
{{ $t('components.AboutPod.stat.tracksCount', stats.tracks) }}
|
||||
{{ t('components.AboutPod.stat.tracksCount', stats.tracks) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -382,7 +382,7 @@ const headerStyle = computed(() => {
|
|||
<span class="statistics-figure ui text">
|
||||
<span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||
<br>
|
||||
{{ $t('components.AboutPod.stat.activeUsers', stats.users) }}
|
||||
{{ t('components.AboutPod.stat.activeUsers', stats.users) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -392,7 +392,7 @@ const headerStyle = computed(() => {
|
|||
<span class="statistics-figure ui text">
|
||||
<span class="ui big text"><strong>{{ stats.listenings.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
|
||||
<br>
|
||||
{{ $t('components.AboutPod.stat.listeningsCount', stats.listenings) }}
|
||||
{{ t('components.AboutPod.stat.listeningsCount', stats.listenings) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -403,13 +403,13 @@ const headerStyle = computed(() => {
|
|||
id="contact"
|
||||
class="ui header"
|
||||
>
|
||||
{{ $t('components.AboutPod.header.contact') }}
|
||||
{{ t('components.AboutPod.header.contact') }}
|
||||
</h3>
|
||||
<a
|
||||
v-if="contactEmail"
|
||||
:href="`mailto:${contactEmail}`"
|
||||
>
|
||||
{{ $t('components.AboutPod.message.contact', { contactEmail }) }}
|
||||
{{ t('components.AboutPod.message.contact', { contactEmail }) }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
|
|
@ -420,7 +420,7 @@ const headerStyle = computed(() => {
|
|||
class="ui left floated basic secondary button"
|
||||
>
|
||||
<i class="icon arrow left" />
|
||||
{{ $t('components.AboutPod.link.introduction') }}
|
||||
{{ t('components.AboutPod.link.introduction') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
<div class="segment-content">
|
||||
<h1 class="ui center aligned large header">
|
||||
<span>
|
||||
{{ $t('components.Home.header.welcome', {podName: podName}) }}
|
||||
{{ t('components.Home.header.welcome', {podName: podName}) }}
|
||||
</span>
|
||||
<div
|
||||
v-if="shortDescription"
|
||||
|
|
@ -88,7 +88,7 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
<div class="ui stackable grid">
|
||||
<div class="ten wide column">
|
||||
<h2 class="header">
|
||||
{{ $t('components.Home.header.about') }}
|
||||
{{ t('components.Home.header.about') }}
|
||||
</h2>
|
||||
<div
|
||||
id="pod"
|
||||
|
|
@ -97,7 +97,7 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
<div class="ui stackable grid">
|
||||
<div class="eight wide column">
|
||||
<p v-if="!longDescription">
|
||||
{{ $t('components.Home.placeholder.noDescription') }}
|
||||
{{ t('components.Home.placeholder.noDescription') }}
|
||||
</p>
|
||||
<template v-if="longDescription || rules">
|
||||
<sanitized-html
|
||||
|
|
@ -120,7 +120,7 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
class="ui link"
|
||||
:to="{name: 'about'}"
|
||||
>
|
||||
{{ $t('components.Home.link.learnMore') }}
|
||||
{{ t('components.Home.link.learnMore') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -135,7 +135,7 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
class="ui link"
|
||||
:to="{name: 'about', hash: '#rules'}"
|
||||
>
|
||||
{{ $t('components.Home.link.rules') }}
|
||||
{{ t('components.Home.link.rules') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -145,20 +145,20 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
<div class="eight wide column">
|
||||
<template v-if="stats">
|
||||
<h3 class="sub header">
|
||||
{{ $t('components.Home.header.statistics') }}
|
||||
{{ t('components.Home.header.statistics') }}
|
||||
</h3>
|
||||
<p>
|
||||
<i class="user icon" />
|
||||
{{ $t('components.Home.stat.activeUsers', stats.users) }}
|
||||
{{ t('components.Home.stat.activeUsers', stats.users) }}
|
||||
</p>
|
||||
<p>
|
||||
<i class="music icon" />
|
||||
{{ $t('components.Home.stat.hoursOfMusic', stats.hours) }}
|
||||
{{ t('components.Home.stat.hoursOfMusic', stats.hours) }}
|
||||
</p>
|
||||
</template>
|
||||
<template v-if="contactEmail">
|
||||
<h3 class="sub header">
|
||||
{{ $t('components.Home.header.contact') }}
|
||||
{{ t('components.Home.header.contact') }}
|
||||
</h3>
|
||||
<i class="at icon" />
|
||||
<a :href="`mailto:${contactEmail}`">{{ contactEmail }}</a>
|
||||
|
|
@ -181,13 +181,13 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
<div class="ui stackable grid">
|
||||
<div class="four wide column">
|
||||
<h3 class="header">
|
||||
{{ $t('components.Home.header.aboutFunkwhale') }}
|
||||
{{ t('components.Home.header.aboutFunkwhale') }}
|
||||
</h3>
|
||||
<p>
|
||||
{{ $t('components.Home.description.funkwhale.paragraph1') }}
|
||||
{{ t('components.Home.description.funkwhale.paragraph1') }}
|
||||
</p>
|
||||
<p>
|
||||
{{ $t('components.Home.description.funkwhale.paragraph2') }}
|
||||
{{ t('components.Home.description.funkwhale.paragraph2') }}
|
||||
</p>
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
@ -195,12 +195,12 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
href="https://funkwhale.audio"
|
||||
>
|
||||
<i class="external alternate icon" />
|
||||
{{ $t('components.Home.link.funkwhale') }}
|
||||
{{ t('components.Home.link.funkwhale') }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="four wide column">
|
||||
<h3 class="header">
|
||||
{{ $t('components.Home.header.login') }}
|
||||
{{ t('components.Home.header.login') }}
|
||||
</h3>
|
||||
<login-form
|
||||
button-classes="success"
|
||||
|
|
@ -210,14 +210,14 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
</div>
|
||||
<div class="four wide column">
|
||||
<h3 class="header">
|
||||
{{ $t('components.Home.header.signup') }}
|
||||
{{ t('components.Home.header.signup') }}
|
||||
</h3>
|
||||
<template v-if="openRegistrations">
|
||||
<p>
|
||||
{{ $t('components.Home.description.signup') }}
|
||||
{{ t('components.Home.description.signup') }}
|
||||
</p>
|
||||
<p v-if="defaultUploadQuota">
|
||||
{{ $t('components.Home.description.quota', { quota: humanSize(defaultUploadQuota * 1000 * 1000) }) }}
|
||||
{{ t('components.Home.description.quota', { quota: humanSize(defaultUploadQuota * 1000 * 1000) }) }}
|
||||
</p>
|
||||
<signup-form
|
||||
button-classes="success"
|
||||
|
|
@ -226,7 +226,7 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
</template>
|
||||
<div v-else>
|
||||
<p>
|
||||
{{ $t('components.Home.help.registrationsClosed') }}
|
||||
{{ t('components.Home.help.registrationsClosed') }}
|
||||
</p>
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
@ -234,14 +234,14 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
href="https://funkwhale.audio/#get-started"
|
||||
>
|
||||
<i class="external alternate icon" />
|
||||
{{ $t('components.Home.link.findOtherPod') }}
|
||||
{{ t('components.Home.link.findOtherPod') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="four wide column">
|
||||
<h3 class="header">
|
||||
{{ $t('components.Home.header.links') }}
|
||||
{{ t('components.Home.header.links') }}
|
||||
</h3>
|
||||
<div class="ui relaxed list">
|
||||
<div class="item">
|
||||
|
|
@ -252,10 +252,10 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
class="header"
|
||||
to="/library"
|
||||
>
|
||||
{{ $t('components.Home.link.publicContent.label') }}
|
||||
{{ t('components.Home.link.publicContent.label') }}
|
||||
</router-link>
|
||||
<div class="description">
|
||||
{{ $t('components.Home.link.publicContent.description') }}
|
||||
{{ t('components.Home.link.publicContent.description') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -268,10 +268,10 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{{ $t('components.Home.link.mobileApps.label') }}
|
||||
{{ t('components.Home.link.mobileApps.label') }}
|
||||
</a>
|
||||
<div class="description">
|
||||
{{ $t('components.Home.link.mobileApps.description') }}
|
||||
{{ t('components.Home.link.mobileApps.description') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -284,10 +284,10 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{{ $t('components.Home.link.userGuides.label') }}
|
||||
{{ t('components.Home.link.userGuides.label') }}
|
||||
</a>
|
||||
<div class="description">
|
||||
{{ $t('components.Home.link.userGuides.description') }}
|
||||
{{ t('components.Home.link.userGuides.description') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -304,16 +304,16 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
:limit="10"
|
||||
>
|
||||
<template #title>
|
||||
{{ $t('components.Home.header.newAlbums') }}
|
||||
{{ t('components.Home.header.newAlbums') }}
|
||||
</template>
|
||||
<router-link to="/library">
|
||||
{{ $t('components.Home.link.viewMore') }}
|
||||
{{ t('components.Home.link.viewMore') }}
|
||||
<div class="ui hidden divider" />
|
||||
</router-link>
|
||||
</album-widget>
|
||||
<div class="ui hidden section divider" />
|
||||
<h3 class="ui header">
|
||||
{{ $t('components.Home.header.newChannels') }}
|
||||
{{ t('components.Home.header.newChannels') }}
|
||||
</h3>
|
||||
<channels-widget
|
||||
:show-modification-date="true"
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@ const labels = computed(() => ({
|
|||
<h1 class="ui huge header">
|
||||
<i class="warning icon" />
|
||||
<div class="content">
|
||||
{{ $t('components.PageNotFound.header.pageNotFound') }}
|
||||
{{ t('components.PageNotFound.header.pageNotFound') }}
|
||||
</div>
|
||||
</h1>
|
||||
<p>
|
||||
{{ $t('components.PageNotFound.message.pageNotFound') }}
|
||||
{{ t('components.PageNotFound.message.pageNotFound') }}
|
||||
</p>
|
||||
<a :href="path">{{ path }}</a>
|
||||
<div class="ui hidden divider" />
|
||||
|
|
@ -32,7 +32,7 @@ const labels = computed(() => ({
|
|||
class="ui icon labeled right button"
|
||||
to="/"
|
||||
>
|
||||
{{ $t('components.PageNotFound.link.home') }}
|
||||
{{ t('components.PageNotFound.link.home') }}
|
||||
<i class="right arrow icon" />
|
||||
</router-link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { whenever, watchDebounced, useCurrentElement, useScrollLock, useFullscre
|
|||
import { nextTick, ref, computed, watchEffect, defineAsyncComponent } from 'vue'
|
||||
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
import { usePlayer } from '~/composables/audio/player'
|
||||
|
|
@ -14,6 +13,8 @@ import { useQueue } from '~/composables/audio/queue'
|
|||
|
||||
import time from '~/utils/time'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
|
||||
import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
|
||||
import PlayerControls from '~/components/audio/PlayerControls.vue'
|
||||
|
|
@ -21,6 +22,8 @@ import PlayerControls from '~/components/audio/PlayerControls.vue'
|
|||
import VirtualList from '~/components/vui/list/VirtualList.vue'
|
||||
import QueueItem from '~/components/QueueItem.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const MilkDrop = defineAsyncComponent(() => import('~/components/audio/visualizer/MilkDrop.vue'))
|
||||
|
||||
const {
|
||||
|
|
@ -194,12 +197,12 @@ if (!isWebGLSupported) {
|
|||
<img
|
||||
v-if="fullscreen"
|
||||
class="cover-shadow"
|
||||
:src="$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
|
||||
:src="store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
|
||||
>
|
||||
<img
|
||||
ref="cover"
|
||||
alt=""
|
||||
:src="$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
|
||||
:src="store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
|
||||
>
|
||||
</template>
|
||||
<milk-drop
|
||||
|
|
@ -212,7 +215,7 @@ if (!isWebGLSupported) {
|
|||
v-if="!fullscreen || !idle"
|
||||
class="cover-buttons"
|
||||
>
|
||||
<tooltip :content="!isWebGLSupported && $t('components.Queue.message.webglUnsupported')">
|
||||
<tooltip :content="!isWebGLSupported && t('components.Queue.message.webglUnsupported')">
|
||||
<button
|
||||
v-if="coverType === CoverType.COVER_ART"
|
||||
class="ui secondary button"
|
||||
|
|
@ -267,11 +270,11 @@ if (!isWebGLSupported) {
|
|||
v-for="ac in currentTrack.artistCredit"
|
||||
:key="ac.artist.id"
|
||||
>
|
||||
{{ ac.credit ?? $t('components.Queue.meta.unknownArtist') }}
|
||||
{{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
|
||||
<span>{{ ac.joinphrase }}</span>
|
||||
</div>
|
||||
<span class="symbol hyphen middle" />
|
||||
{{ currentTrack.albumTitle ?? $t('components.Queue.meta.unknownAlbum') }}
|
||||
{{ currentTrack.albumTitle ?? t('components.Queue.meta.unknownAlbum') }}
|
||||
</h2>
|
||||
</div>
|
||||
</Transition>
|
||||
|
|
@ -296,7 +299,7 @@ if (!isWebGLSupported) {
|
|||
:to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
|
||||
@click.stop.prevent=""
|
||||
>
|
||||
{{ ac.credit ?? $t('components.Queue.meta.unknownArtist') }}
|
||||
{{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
|
||||
</router-link>
|
||||
<span>{{ ac.joinphrase }}</span>
|
||||
</template>
|
||||
|
|
@ -307,7 +310,7 @@ if (!isWebGLSupported) {
|
|||
class="discrete link album"
|
||||
:to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
|
||||
>
|
||||
{{ currentTrack.albumTitle ?? $t('components.Queue.meta.unknownAlbum') }}
|
||||
{{ currentTrack.albumTitle ?? t('components.Queue.meta.unknownAlbum') }}
|
||||
</router-link>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -318,14 +321,14 @@ if (!isWebGLSupported) {
|
|||
class="ui small warning message"
|
||||
>
|
||||
<h3 class="header">
|
||||
{{ $t('components.Queue.header.failure') }}
|
||||
{{ t('components.Queue.header.failure') }}
|
||||
</h3>
|
||||
<p v-if="hasNext && isPlaying">
|
||||
{{ $t('components.Queue.message.automaticPlay') }}
|
||||
{{ t('components.Queue.message.automaticPlay') }}
|
||||
<i class="loading spinner icon" />
|
||||
</p>
|
||||
<p>
|
||||
{{ $t('components.Queue.warning.connectivity') }}
|
||||
{{ t('components.Queue.warning.connectivity') }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -333,24 +336,24 @@ if (!isWebGLSupported) {
|
|||
class="ui small warning message"
|
||||
>
|
||||
<h3 class="header">
|
||||
{{ $t('components.Queue.header.noSources') }}
|
||||
{{ t('components.Queue.header.noSources') }}
|
||||
</h3>
|
||||
<p v-if="hasNext && isPlaying">
|
||||
{{ $t('components.Queue.message.automaticPlay') }}
|
||||
{{ t('components.Queue.message.automaticPlay') }}
|
||||
<i class="loading spinner icon" />
|
||||
</p>
|
||||
</div>
|
||||
<div class="additional-controls desktop-and-below">
|
||||
<track-favorite-icon
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
:track="currentTrack"
|
||||
/>
|
||||
<track-playlist-icon
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
:track="currentTrack"
|
||||
/>
|
||||
<button
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
:class="['ui', 'really', 'basic', 'circular', 'icon', 'button']"
|
||||
:aria-label="labels.addArtistContentFilter"
|
||||
:title="labels.addArtistContentFilter"
|
||||
|
|
@ -386,8 +389,8 @@ if (!isWebGLSupported) {
|
|||
<span class="right floated timer total">{{ time.parse(Math.round(duration)) }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="left floated timer">{{ $t('components.Queue.meta.startTime') }}</span>
|
||||
<span class="right floated timer">{{ $t('components.Queue.meta.startTime') }}</span>
|
||||
<span class="left floated timer">{{ t('components.Queue.meta.startTime') }}</span>
|
||||
<span class="right floated timer">{{ t('components.Queue.meta.startTime') }}</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -401,7 +404,7 @@ if (!isWebGLSupported) {
|
|||
<button
|
||||
v-t="'components.Queue.button.close'"
|
||||
class="ui right floated basic button"
|
||||
@click="$store.commit('ui/queueFocused', null)"
|
||||
@click="store.commit('ui/queueFocused', null)"
|
||||
/>
|
||||
<button
|
||||
v-t="'components.Queue.button.clear'"
|
||||
|
|
@ -451,29 +454,29 @@ if (!isWebGLSupported) {
|
|||
</template>
|
||||
<template #footer>
|
||||
<div
|
||||
v-if="$store.state.radios.populating"
|
||||
v-if="store.state.radios.populating"
|
||||
class="radio-populating"
|
||||
>
|
||||
<i class="loading spinner icon" />
|
||||
{{ labels.populating }}
|
||||
</div>
|
||||
<div
|
||||
v-if="$store.state.radios.running"
|
||||
v-if="store.state.radios.running"
|
||||
class="ui info message radio-message"
|
||||
>
|
||||
<div class="content">
|
||||
<h3 class="header">
|
||||
<i class="feed icon" />
|
||||
{{ $t('components.Queue.header.radio') }}
|
||||
{{ t('components.Queue.header.radio') }}
|
||||
</h3>
|
||||
<p>
|
||||
{{ $t('components.Queue.message.radio') }}
|
||||
{{ t('components.Queue.message.radio') }}
|
||||
</p>
|
||||
<button
|
||||
class="ui basic primary button"
|
||||
@click="$store.dispatch('radios/stop')"
|
||||
@click="store.dispatch('radios/stop')"
|
||||
>
|
||||
{{ $t('components.Queue.button.stopRadio') }}
|
||||
{{ t('components.Queue.button.stopRadio') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ import type { QueueItemSource } from '~/types'
|
|||
|
||||
import time from '~/utils/time'
|
||||
import { generateTrackCreditStringFromQueue } from '~/utils/utils'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
interface Events {
|
||||
(e: 'play', index: number): void
|
||||
|
|
@ -55,14 +58,14 @@ defineProps<Props>()
|
|||
</div>
|
||||
<div class="controls">
|
||||
<button
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
:aria-label="source.labels.favorite"
|
||||
:title="source.labels.favorite"
|
||||
class="ui really basic circular icon button"
|
||||
@click.stop="$store.dispatch('favorites/toggle', source.id)"
|
||||
@click.stop="store.dispatch('favorites/toggle', source.id)"
|
||||
>
|
||||
<i
|
||||
:class="$store.getters['favorites/isFavorite'](source.id) ? 'pink' : ''"
|
||||
:class="store.getters['favorites/isFavorite'](source.id) ? 'pink' : ''"
|
||||
class="heart icon"
|
||||
/>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -174,7 +174,7 @@ watch(() => props.initialId, () => {
|
|||
@click.prevent="type = 'rss'"
|
||||
>
|
||||
<i class="feed icon" />
|
||||
{{ $t('components.RemoteSearchForm.button.rss') }}
|
||||
{{ t('components.RemoteSearchForm.button.rss') }}
|
||||
</button>
|
||||
<div class="or" />
|
||||
<button
|
||||
|
|
@ -182,7 +182,7 @@ watch(() => props.initialId, () => {
|
|||
@click.prevent="type = 'artists'"
|
||||
>
|
||||
<i class="globe icon" />
|
||||
{{ $t('components.RemoteSearchForm.button.fediverse') }}
|
||||
{{ t('components.RemoteSearchForm.button.fediverse') }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
|
|
@ -197,7 +197,7 @@ watch(() => props.initialId, () => {
|
|||
class="ui negative message"
|
||||
>
|
||||
<h3 class="header">
|
||||
{{ $t('components.RemoteSearchForm.header.fetchFailed') }}
|
||||
{{ t('components.RemoteSearchForm.header.fetchFailed') }}
|
||||
</h3>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -213,10 +213,10 @@ watch(() => props.initialId, () => {
|
|||
{{ labels.fieldLabel }}
|
||||
</label>
|
||||
<p v-if="type === 'rss'">
|
||||
{{ $t('components.RemoteSearchForm.description.rss') }}
|
||||
{{ t('components.RemoteSearchForm.description.rss') }}
|
||||
</p>
|
||||
<p v-else-if="type === 'artists'">
|
||||
{{ $t('components.RemoteSearchForm.description.fediverse') }}
|
||||
{{ t('components.RemoteSearchForm.description.fediverse') }}
|
||||
</p>
|
||||
<input
|
||||
id="object-id"
|
||||
|
|
@ -233,7 +233,7 @@ watch(() => props.initialId, () => {
|
|||
:class="['ui', 'primary', {loading: isLoading}, 'button']"
|
||||
:disabled="isLoading || !id || id.length === 0"
|
||||
>
|
||||
{{ $t('components.RemoteSearchForm.button.search') }}
|
||||
{{ t('components.RemoteSearchForm.button.search') }}
|
||||
</button>
|
||||
</form>
|
||||
<div
|
||||
|
|
@ -242,7 +242,7 @@ watch(() => props.initialId, () => {
|
|||
class="ui warning message"
|
||||
>
|
||||
<p>
|
||||
{{ $t('components.RemoteSearchForm.warning.unsupported') }}
|
||||
{{ t('components.RemoteSearchForm.warning.unsupported') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
import { useStore } from '~/store'
|
||||
|
||||
const store = useStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ui toast-container">
|
||||
<message
|
||||
v-for="message in $store.state.ui.messages"
|
||||
v-for="message in store.state.ui.messages"
|
||||
:key="message.key"
|
||||
:message="message"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ const player = computed(() => [
|
|||
<template>
|
||||
<semantic-modal v-model:show="showRef">
|
||||
<header class="header">
|
||||
{{ $t('components.ShortcutsModal.header.modal') }}
|
||||
{{ t('components.ShortcutsModal.header.modal') }}
|
||||
</header>
|
||||
<section class="scrolling content">
|
||||
<div class="ui stackable two column grid">
|
||||
|
|
@ -154,7 +154,7 @@ const player = computed(() => [
|
|||
</section>
|
||||
<footer class="actions">
|
||||
<button class="ui basic cancel button">
|
||||
{{ $t('components.ShortcutsModal.button.close') }}
|
||||
{{ t('components.ShortcutsModal.button.close') }}
|
||||
</button>
|
||||
</footer>
|
||||
</semantic-modal>
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ onMounted(() => {
|
|||
>
|
||||
<i class="logo bordered inverted vibrant big icon">
|
||||
<logo class="logo" />
|
||||
<span class="visually-hidden">{{ $t('components.Sidebar.link.home') }}</span>
|
||||
<span class="visually-hidden">{{ t('components.Sidebar.link.home') }}</span>
|
||||
</i>
|
||||
</router-link>
|
||||
<nav class="top ui compact right aligned inverted text menu">
|
||||
|
|
@ -152,7 +152,7 @@ onMounted(() => {
|
|||
</div>
|
||||
<div class="menu">
|
||||
<h3 class="header">
|
||||
{{ $t('components.Sidebar.header.administration') }}
|
||||
{{ t('components.Sidebar.header.administration') }}
|
||||
</h3>
|
||||
<div class="divider" />
|
||||
<router-link
|
||||
|
|
@ -167,7 +167,7 @@ onMounted(() => {
|
|||
>
|
||||
{{ $store.state.ui.notifications.pendingReviewEdits }}
|
||||
</div>
|
||||
{{ $t('components.Sidebar.link.library') }}
|
||||
{{ t('components.Sidebar.link.library') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="$store.state.auth.availablePermissions['moderation']"
|
||||
|
|
@ -181,21 +181,21 @@ onMounted(() => {
|
|||
>
|
||||
{{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}
|
||||
</div>
|
||||
{{ $t('components.Sidebar.link.moderation') }}
|
||||
{{ t('components.Sidebar.link.moderation') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="$store.state.auth.availablePermissions['settings']"
|
||||
class="item"
|
||||
:to="{name: 'manage.users.users.list'}"
|
||||
>
|
||||
{{ $t('components.Sidebar.link.users') }}
|
||||
{{ t('components.Sidebar.link.users') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="$store.state.auth.availablePermissions['settings']"
|
||||
class="item"
|
||||
:to="{path: '/manage/settings'}"
|
||||
>
|
||||
{{ $t('components.Sidebar.link.settings') }}
|
||||
{{ t('components.Sidebar.link.settings') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -355,14 +355,14 @@ onMounted(() => {
|
|||
class="ui fluid tiny primary button"
|
||||
:to="{name: 'login'}"
|
||||
>
|
||||
{{ $t('components.Sidebar.link.login') }}
|
||||
{{ t('components.Sidebar.link.login') }}
|
||||
</router-link>
|
||||
<div class="ui small hidden divider" />
|
||||
<router-link
|
||||
class="ui fluid tiny button"
|
||||
:to="{path: '/signup'}"
|
||||
>
|
||||
{{ $t('components.Sidebar.link.createAccount') }}
|
||||
{{ t('components.Sidebar.link.createAccount') }}
|
||||
</router-link>
|
||||
</div>
|
||||
<nav
|
||||
|
|
@ -374,7 +374,7 @@ onMounted(() => {
|
|||
id="navigation-label"
|
||||
class="visually-hidden"
|
||||
>
|
||||
{{ $t('components.Sidebar.header.main') }}
|
||||
{{ t('components.Sidebar.header.main') }}
|
||||
</h1>
|
||||
<div class="ui small hidden divider" />
|
||||
<section
|
||||
|
|
@ -394,7 +394,7 @@ onMounted(() => {
|
|||
@click="expanded = 'explore'"
|
||||
@focus="expanded = 'explore'"
|
||||
>
|
||||
{{ $t('components.Sidebar.header.explore') }}
|
||||
{{ t('components.Sidebar.header.explore') }}
|
||||
<i
|
||||
v-if="expanded !== 'explore'"
|
||||
class="angle right icon"
|
||||
|
|
@ -406,7 +406,7 @@ onMounted(() => {
|
|||
:to="{name: 'search'}"
|
||||
>
|
||||
<i class="search icon" />
|
||||
{{ $t('components.Sidebar.link.search') }}
|
||||
{{ t('components.Sidebar.link.search') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="item"
|
||||
|
|
@ -414,42 +414,42 @@ onMounted(() => {
|
|||
active-class="_active"
|
||||
>
|
||||
<i class="music icon" />
|
||||
{{ $t('components.Sidebar.link.browse') }}
|
||||
{{ t('components.Sidebar.link.browse') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="item"
|
||||
:to="{name: 'library.podcasts.browse'}"
|
||||
>
|
||||
<i class="podcast icon" />
|
||||
{{ $t('components.Sidebar.link.podcasts') }}
|
||||
{{ t('components.Sidebar.link.podcasts') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="item"
|
||||
:to="{name: 'library.albums.browse'}"
|
||||
>
|
||||
<i class="compact disc icon" />
|
||||
{{ $t('components.Sidebar.link.albums') }}
|
||||
{{ t('components.Sidebar.link.albums') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="item"
|
||||
:to="{name: 'library.artists.browse'}"
|
||||
>
|
||||
<i class="user icon" />
|
||||
{{ $t('components.Sidebar.link.artists') }}
|
||||
{{ t('components.Sidebar.link.artists') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="item"
|
||||
:to="{name: 'library.playlists.browse'}"
|
||||
>
|
||||
<i class="list icon" />
|
||||
{{ $t('components.Sidebar.link.playlists') }}
|
||||
{{ t('components.Sidebar.link.playlists') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="item"
|
||||
:to="{name: 'library.radios.browse'}"
|
||||
>
|
||||
<i class="feed icon" />
|
||||
{{ $t('components.Sidebar.link.radios') }}
|
||||
{{ t('components.Sidebar.link.radios') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -464,7 +464,7 @@ onMounted(() => {
|
|||
@click="expanded = 'myLibrary'"
|
||||
@focus="expanded = 'myLibrary'"
|
||||
>
|
||||
{{ $t('components.Sidebar.header.library') }}
|
||||
{{ t('components.Sidebar.header.library') }}
|
||||
<i
|
||||
v-if="expanded !== 'myLibrary'"
|
||||
class="angle right icon"
|
||||
|
|
@ -476,42 +476,42 @@ onMounted(() => {
|
|||
:to="{name: 'library.me'}"
|
||||
>
|
||||
<i class="music icon" />
|
||||
{{ $t('components.Sidebar.link.browse') }}
|
||||
{{ t('components.Sidebar.link.browse') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="item"
|
||||
:to="{name: 'library.albums.me'}"
|
||||
>
|
||||
<i class="compact disc icon" />
|
||||
{{ $t('components.Sidebar.link.albums') }}
|
||||
{{ t('components.Sidebar.link.albums') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="item"
|
||||
:to="{name: 'library.artists.me'}"
|
||||
>
|
||||
<i class="user icon" />
|
||||
{{ $t('components.Sidebar.link.artists') }}
|
||||
{{ t('components.Sidebar.link.artists') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="item"
|
||||
:to="{name: 'library.playlists.me'}"
|
||||
>
|
||||
<i class="list icon" />
|
||||
{{ $t('components.Sidebar.link.playlists') }}
|
||||
{{ t('components.Sidebar.link.playlists') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="item"
|
||||
:to="{name: 'library.radios.me'}"
|
||||
>
|
||||
<i class="feed icon" />
|
||||
{{ $t('components.Sidebar.link.radios') }}
|
||||
{{ t('components.Sidebar.link.radios') }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="item"
|
||||
:to="{name: 'favorites'}"
|
||||
>
|
||||
<i class="heart icon" />
|
||||
{{ $t('components.Sidebar.link.favorites') }}
|
||||
{{ t('components.Sidebar.link.favorites') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -520,11 +520,11 @@ onMounted(() => {
|
|||
class="header item"
|
||||
:to="{name: 'subscriptions'}"
|
||||
>
|
||||
{{ $t('components.Sidebar.link.channels') }}
|
||||
{{ t('components.Sidebar.link.channels') }}
|
||||
</router-link>
|
||||
<div class="item">
|
||||
<h3 class="header">
|
||||
{{ $t('components.Sidebar.header.more') }}
|
||||
{{ t('components.Sidebar.header.more') }}
|
||||
</h3>
|
||||
<div class="menu">
|
||||
<router-link
|
||||
|
|
@ -533,7 +533,7 @@ onMounted(() => {
|
|||
active-class="router-link-exact-active active"
|
||||
>
|
||||
<i class="info icon" />
|
||||
{{ $t('components.Sidebar.link.about') }}
|
||||
{{ t('components.Sidebar.link.about') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -545,7 +545,7 @@ onMounted(() => {
|
|||
to="/instance-chooser"
|
||||
class="link item"
|
||||
>
|
||||
{{ $t('components.Sidebar.link.switchInstance') }}
|
||||
{{ t('components.Sidebar.link.switchInstance') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@ import useFormData from '~/composables/useFormData'
|
|||
import { ref, computed, reactive } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import useLogger from '~/composables/useLogger'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Props {
|
||||
group: SettingsGroup
|
||||
|
|
@ -111,7 +114,7 @@ const save = async () => {
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.admin.SettingsGroup.header.error') }}
|
||||
{{ t('components.admin.SettingsGroup.header.error') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -126,7 +129,7 @@ const save = async () => {
|
|||
v-if="result"
|
||||
class="ui positive message"
|
||||
>
|
||||
{{ $t('components.admin.SettingsGroup.message.success') }}
|
||||
{{ t('components.admin.SettingsGroup.message.success') }}
|
||||
</div>
|
||||
<div
|
||||
v-for="(setting, key) in settings"
|
||||
|
|
@ -240,13 +243,13 @@ const save = async () => {
|
|||
<div v-if="values[setting.identifier]">
|
||||
<div class="ui hidden divider" />
|
||||
<h3 class="ui header">
|
||||
{{ $t('components.admin.SettingsGroup.header.image') }}
|
||||
{{ t('components.admin.SettingsGroup.header.image') }}
|
||||
</h3>
|
||||
<img
|
||||
v-if="values[setting.identifier]"
|
||||
class="ui image"
|
||||
alt=""
|
||||
:src="$store.getters['instance/absoluteUrl'](values[setting.identifier])"
|
||||
:src="store.getters['instance/absoluteUrl'](values[setting.identifier])"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -255,7 +258,7 @@ const save = async () => {
|
|||
type="submit"
|
||||
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
|
||||
>
|
||||
{{ $t('components.admin.SettingsGroup.button.save') }}
|
||||
{{ t('components.admin.SettingsGroup.button.save') }}
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -69,13 +69,13 @@ const move = (idx: number, increment: number) => {
|
|||
:class="[{active: !isPreviewing}, 'item']"
|
||||
@click.stop.prevent="isPreviewing = false"
|
||||
>
|
||||
{{ $t('components.admin.SignupFormBuilder.button.edit') }}
|
||||
{{ t('components.admin.SignupFormBuilder.button.edit') }}
|
||||
</button>
|
||||
<button
|
||||
:class="[{active: isPreviewing}, 'item']"
|
||||
@click.stop.prevent="isPreviewing = true"
|
||||
>
|
||||
{{ $t('components.admin.SignupFormBuilder.button.preview') }}
|
||||
{{ t('components.admin.SignupFormBuilder.button.preview') }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -95,10 +95,10 @@ const move = (idx: number, increment: number) => {
|
|||
>
|
||||
<div class="field">
|
||||
<label for="help-text">
|
||||
{{ $t('components.admin.SignupFormBuilder.label.helpText') }}
|
||||
{{ t('components.admin.SignupFormBuilder.label.helpText') }}
|
||||
</label>
|
||||
<p>
|
||||
{{ $t('components.admin.SignupFormBuilder.help.helpText') }}
|
||||
{{ t('components.admin.SignupFormBuilder.help.helpText') }}
|
||||
</p>
|
||||
<content-form
|
||||
v-if="value.help_text"
|
||||
|
|
@ -109,24 +109,24 @@ const move = (idx: number, increment: number) => {
|
|||
</div>
|
||||
<div class="field">
|
||||
<label>
|
||||
{{ $t('components.admin.SignupFormBuilder.label.additionalFields') }}
|
||||
{{ t('components.admin.SignupFormBuilder.label.additionalFields') }}
|
||||
</label>
|
||||
<p>
|
||||
{{ $t('components.admin.SignupFormBuilder.help.additionalFields') }}
|
||||
{{ t('components.admin.SignupFormBuilder.help.additionalFields') }}
|
||||
</p>
|
||||
<table v-if="value.fields?.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.header.label') }}
|
||||
{{ t('components.admin.SignupFormBuilder.table.additionalFields.header.label') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.header.type') }}
|
||||
{{ t('components.admin.SignupFormBuilder.table.additionalFields.header.type') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.header.required') }}
|
||||
{{ t('components.admin.SignupFormBuilder.table.additionalFields.header.required') }}
|
||||
</th>
|
||||
<th><span class="visually-hidden">{{ $t('components.admin.SignupFormBuilder.table.additionalFields.header.actions') }}</span></th>
|
||||
<th><span class="visually-hidden">{{ t('components.admin.SignupFormBuilder.table.additionalFields.header.actions') }}</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -144,20 +144,20 @@ const move = (idx: number, increment: number) => {
|
|||
<td>
|
||||
<select v-model="field.input_type">
|
||||
<option value="short_text">
|
||||
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.type.short') }}
|
||||
{{ t('components.admin.SignupFormBuilder.table.additionalFields.type.short') }}
|
||||
</option>
|
||||
<option value="long_text">
|
||||
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.type.long') }}
|
||||
{{ t('components.admin.SignupFormBuilder.table.additionalFields.type.long') }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<select v-model="field.required">
|
||||
<option :value="true">
|
||||
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.required.true') }}
|
||||
{{ t('components.admin.SignupFormBuilder.table.additionalFields.required.true') }}
|
||||
</option>
|
||||
<option :value="false">
|
||||
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.required.false') }}
|
||||
{{ t('components.admin.SignupFormBuilder.table.additionalFields.required.false') }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
|
|
@ -192,7 +192,7 @@ const move = (idx: number, increment: number) => {
|
|||
class="ui basic button"
|
||||
@click.stop.prevent="addField"
|
||||
>
|
||||
{{ $t('components.admin.SignupFormBuilder.button.add') }}
|
||||
{{ t('components.admin.SignupFormBuilder.button.add') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
import type { Album } from '~/types'
|
||||
|
||||
|
|
@ -9,6 +11,8 @@ interface Props {
|
|||
album: Album;
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const { album } = props
|
||||
|
|
@ -37,7 +41,7 @@ if (import.meta.env.PROD) {
|
|||
class="funkwhale link"
|
||||
@click.stop="navigate('artist')"
|
||||
>
|
||||
{{ ac.credit ?? $t('components.Queue.meta.unknownArtist') }}
|
||||
{{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
|
||||
{{ ac.joinphrase }}
|
||||
</a>
|
||||
|
||||
|
|
@ -57,7 +61,7 @@ if (import.meta.env.PROD) {
|
|||
</router-link>
|
||||
|
||||
<template #footer>
|
||||
{{ $t('components.audio.album.Card.meta.tracks', album.tracks?.length || 0) }}
|
||||
{{ t('components.audio.album.Card.meta.tracks', album.tracks?.length || 0) }}
|
||||
<fw-options-button />
|
||||
</template>
|
||||
</fw-card>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import type { Album } from '~/types'
|
|||
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
|
|
@ -10,6 +12,8 @@ import AlbumCard from '~/components/album/Card.vue'
|
|||
|
||||
import useErrorHandler from '~/composables/useErrorHandler'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Props {
|
||||
filters: Record<string, string | boolean>
|
||||
showCount?: boolean
|
||||
|
|
@ -112,7 +116,7 @@ watch(
|
|||
:class="['ui', 'basic', 'button']"
|
||||
@click="fetchData(nextPage)"
|
||||
>
|
||||
{{ $t('components.audio.album.Widget.button.more') }}
|
||||
{{ t('components.audio.album.Widget.button.more') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
import { useRouter } from 'vue-router'
|
||||
import { computed } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
import type { Artist } from '~/types'
|
||||
|
||||
|
|
@ -11,6 +13,8 @@ interface Props {
|
|||
artist: Artist;
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const { artist } = props
|
||||
|
|
@ -56,10 +60,10 @@ const imageUrl = computed(() => cover.value?.urls.original
|
|||
|
||||
<template #footer>
|
||||
<span v-if="artist.content_category === 'music'">
|
||||
{{ $t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
|
||||
{{ t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
|
||||
{{ t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import type { Artist } from '~/types'
|
|||
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
|
|
@ -10,6 +12,8 @@ import ArtistCard from '~/components/artist/Card.vue'
|
|||
|
||||
import useErrorHandler from '~/composables/useErrorHandler'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Props {
|
||||
filters: Record<string, string | boolean>
|
||||
search?: boolean
|
||||
|
|
@ -108,7 +112,7 @@ watch(
|
|||
:class="['ui', 'basic', 'button']"
|
||||
@click="fetchData(nextPage)"
|
||||
>
|
||||
{{ $t('components.audio.artist.Widget.button.more') }}
|
||||
{{ t('components.audio.artist.Widget.button.more') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import type { ArtistCredit } from '~/types'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
interface Props {
|
||||
artistCredit: ArtistCredit[]
|
||||
|
|
@ -28,7 +31,7 @@ const getRoute = (ac: ArtistCredit) => {
|
|||
>
|
||||
<img
|
||||
v-if="ac.index === 0 && ac.artist.cover && ac.artist.cover.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](ac.artist.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](ac.artist.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
:class="[{circular: ac.artist.content_category != 'podcast'}]"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
import type { Artist } from '~/types'
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
interface Props {
|
||||
artist: Artist
|
||||
|
|
@ -22,7 +25,7 @@ const route = computed(() => props.artist.channel
|
|||
>
|
||||
<img
|
||||
v-if="artist.cover && artist.cover.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](artist.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](artist.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
:class="[{circular: artist.content_category != 'podcast'}]"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { momentFormat } from '~/utils/filters'
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import moment from 'moment'
|
||||
|
||||
|
|
@ -17,6 +18,7 @@ interface Props {
|
|||
|
||||
const props = defineProps<Props>()
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
|
||||
const imageUrl = computed(() => props.object.artist?.cover
|
||||
? store.getters['instance/absoluteUrl'](props.object.artist.cover.urls.medium_square_crop)
|
||||
|
|
@ -45,7 +47,7 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
|
|||
<div
|
||||
v-lazy:background-image="imageUrl"
|
||||
:class="['ui', 'head-image', {'circular': object.artist?.content_category != 'podcast'}, {'padded': object.artist?.content_category === 'podcast'}, 'image', {'default-cover': !object.artist?.cover}]"
|
||||
@click="$router.push({name: 'channels.detail', params: {id: urlId}})"
|
||||
@click="router.push({name: 'channels.detail', params: {id: urlId}})"
|
||||
>
|
||||
<play-button
|
||||
:icon-only="true"
|
||||
|
|
@ -68,10 +70,10 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
|
|||
v-if="object.artist?.content_category === 'podcast'"
|
||||
class="meta ellipsis"
|
||||
>
|
||||
{{ $t('components.audio.ChannelCard.meta.episodes', object.artist.tracks_count) }}
|
||||
{{ t('components.audio.ChannelCard.meta.episodes', object.artist.tracks_count) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.audio.ChannelCard.meta.tracks', object.artist?.tracks_count ?? 0) }}
|
||||
{{ t('components.audio.ChannelCard.meta.tracks', object.artist?.tracks_count ?? 0) }}
|
||||
</span>
|
||||
<tags-list
|
||||
label-classes="tiny"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import type { Cover, Track, BackendResponse, BackendError } from '~/types'
|
|||
|
||||
import { clone } from 'lodash-es'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import axios from 'axios'
|
||||
import PodcastTable from '~/components/audio/podcast/Table.vue'
|
||||
|
|
@ -18,6 +19,7 @@ interface Props {
|
|||
defaultCover: Cover | null
|
||||
isPodcast: boolean
|
||||
}
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
|
@ -103,7 +105,7 @@ watch(page, fetchData, { immediate: true })
|
|||
@refresh="fetchData()"
|
||||
>
|
||||
<p>
|
||||
{{ $t('components.audio.ChannelEntries.help.subscribe') }}
|
||||
{{ t('components.audio.ChannelEntries.help.subscribe') }}
|
||||
</p>
|
||||
</empty-state>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,16 @@ import { computed } from 'vue'
|
|||
|
||||
import { usePlayer } from '~/composables/audio/player'
|
||||
import { useQueue } from '~/composables/audio/queue'
|
||||
import { useStore } from '~/store'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
|
||||
import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
|
||||
import PlayButton from '~/components/audio/PlayButton.vue'
|
||||
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
|
||||
interface Props {
|
||||
entry: Track
|
||||
defaultCover: Cover
|
||||
|
|
@ -37,30 +43,30 @@ const duration = computed(() => props.entry.uploads.find(upload => upload.durati
|
|||
</div>
|
||||
<img
|
||||
v-if="cover && cover.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="channel-image image"
|
||||
@click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
|
||||
@click="router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
|
||||
>
|
||||
<img
|
||||
v-else-if="entry.artist_credit?.[0].artist.content_category === 'podcast' && defaultCover != undefined"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
|
||||
class="channel-image image"
|
||||
@click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
|
||||
@click="router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
|
||||
>
|
||||
<img
|
||||
v-else-if="entry.album && entry.album.cover && entry.album.cover.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](entry.album.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](entry.album.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="channel-image image"
|
||||
@click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
|
||||
@click="router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
alt=""
|
||||
class="channel-image image"
|
||||
src="../../assets/audio/default-cover.png"
|
||||
@click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
|
||||
@click="router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
|
||||
>
|
||||
<div class="ellipsis content">
|
||||
<strong>
|
||||
|
|
@ -78,7 +84,7 @@ const duration = computed(() => props.entry.uploads.find(upload => upload.durati
|
|||
/>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<template v-if="$store.state.auth.authenticated && $store.getters['favorites/isFavorite'](entry.id)">
|
||||
<template v-if="store.state.auth.authenticated && store.getters['favorites/isFavorite'](entry.id)">
|
||||
<track-favorite-icon
|
||||
class="tiny"
|
||||
:track="entry"
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@ defineExpose({
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.audio.ChannelForm.header.error') }}
|
||||
{{ t('components.audio.ChannelForm.header.error') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -182,7 +182,7 @@ defineExpose({
|
|||
class="ui grouped channel-type required field"
|
||||
>
|
||||
<legend>
|
||||
{{ $t('components.audio.ChannelForm.legend.purpose') }}
|
||||
{{ t('components.audio.ChannelForm.legend.purpose') }}
|
||||
</legend>
|
||||
<div class="ui hidden divider" />
|
||||
<div class="field">
|
||||
|
|
@ -210,7 +210,7 @@ defineExpose({
|
|||
<template v-if="!creating || step === 2">
|
||||
<div class="ui required field">
|
||||
<label for="channel-name">
|
||||
{{ $t('components.audio.ChannelForm.label.name') }}
|
||||
{{ t('components.audio.ChannelForm.label.name') }}
|
||||
</label>
|
||||
<input
|
||||
v-model="newValues.name"
|
||||
|
|
@ -221,7 +221,7 @@ defineExpose({
|
|||
</div>
|
||||
<div class="ui required field">
|
||||
<label for="channel-username">
|
||||
{{ $t('components.audio.ChannelForm.label.username') }}
|
||||
{{ t('components.audio.ChannelForm.label.username') }}
|
||||
</label>
|
||||
<div class="ui left labeled input">
|
||||
<div class="ui basic label">
|
||||
|
|
@ -238,7 +238,7 @@ defineExpose({
|
|||
<template v-if="creating">
|
||||
<div class="ui small hidden divider" />
|
||||
<p>
|
||||
{{ $t('components.audio.ChannelForm.help.username') }}
|
||||
{{ t('components.audio.ChannelForm.help.username') }}
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -248,7 +248,7 @@ defineExpose({
|
|||
:image-class="newValues.content_category === 'podcast' ? '' : 'circular'"
|
||||
@delete="newValues.cover = null"
|
||||
>
|
||||
{{ $t('components.audio.ChannelForm.label.image') }}
|
||||
{{ t('components.audio.ChannelForm.label.image') }}
|
||||
</attachment-input>
|
||||
</div>
|
||||
<div class="ui small hidden divider" />
|
||||
|
|
@ -256,7 +256,7 @@ defineExpose({
|
|||
<div class="ten wide column">
|
||||
<div class="ui field">
|
||||
<label for="channel-tags">
|
||||
{{ $t('components.audio.ChannelForm.label.tags') }}
|
||||
{{ t('components.audio.ChannelForm.label.tags') }}
|
||||
</label>
|
||||
<tags-selector
|
||||
id="channel-tags"
|
||||
|
|
@ -271,7 +271,7 @@ defineExpose({
|
|||
>
|
||||
<div class="ui required field">
|
||||
<label for="channel-language">
|
||||
{{ $t('components.audio.ChannelForm.label.language') }}
|
||||
{{ t('components.audio.ChannelForm.label.language') }}
|
||||
</label>
|
||||
<select
|
||||
id="channel-language"
|
||||
|
|
@ -294,7 +294,7 @@ defineExpose({
|
|||
<div class="ui small hidden divider" />
|
||||
<div class="ui field">
|
||||
<label for="channel-name">
|
||||
{{ $t('components.audio.ChannelForm.label.description') }}
|
||||
{{ t('components.audio.ChannelForm.label.description') }}
|
||||
</label>
|
||||
<content-form v-model="newValues.description" />
|
||||
</div>
|
||||
|
|
@ -304,7 +304,7 @@ defineExpose({
|
|||
>
|
||||
<div class="ui required field">
|
||||
<label for="channel-itunes-category">
|
||||
{{ $t('components.audio.ChannelForm.label.category') }}
|
||||
{{ t('components.audio.ChannelForm.label.category') }}
|
||||
</label>
|
||||
<select
|
||||
id="itunes-category"
|
||||
|
|
@ -324,7 +324,7 @@ defineExpose({
|
|||
</div>
|
||||
<div class="ui field">
|
||||
<label for="channel-itunes-category">
|
||||
{{ $t('components.audio.ChannelForm.label.subcategory') }}
|
||||
{{ t('components.audio.ChannelForm.label.subcategory') }}
|
||||
</label>
|
||||
<select
|
||||
id="itunes-category"
|
||||
|
|
@ -349,7 +349,7 @@ defineExpose({
|
|||
>
|
||||
<div class="ui field">
|
||||
<label for="channel-itunes-email">
|
||||
{{ $t('components.audio.ChannelForm.label.email') }}
|
||||
{{ t('components.audio.ChannelForm.label.email') }}
|
||||
</label>
|
||||
<input
|
||||
id="channel-itunes-email"
|
||||
|
|
@ -360,7 +360,7 @@ defineExpose({
|
|||
</div>
|
||||
<div class="ui field">
|
||||
<label for="channel-itunes-name">
|
||||
{{ $t('components.audio.ChannelForm.label.owner') }}
|
||||
{{ t('components.audio.ChannelForm.label.owner') }}
|
||||
</label>
|
||||
<input
|
||||
id="channel-itunes-name"
|
||||
|
|
@ -371,7 +371,7 @@ defineExpose({
|
|||
</div>
|
||||
</div>
|
||||
<p>
|
||||
{{ $t('components.audio.ChannelForm.help.podcastFields') }}
|
||||
{{ t('components.audio.ChannelForm.help.podcastFields') }}
|
||||
</p>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -380,7 +380,7 @@ defineExpose({
|
|||
class="ui active inverted dimmer"
|
||||
>
|
||||
<div class="ui text loader">
|
||||
{{ $t('components.audio.ChannelForm.loader.loading') }}
|
||||
{{ t('components.audio.ChannelForm.loader.loading') }}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,13 @@ import type { Album } from '~/types'
|
|||
|
||||
import PlayButton from '~/components/audio/PlayButton.vue'
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
|
||||
interface Props {
|
||||
serie: Album
|
||||
|
|
@ -18,31 +25,31 @@ const cover = computed(() => props.serie?.cover ?? null)
|
|||
<div class="two-images">
|
||||
<img
|
||||
v-if="cover && cover.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="channel-image"
|
||||
@click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})"
|
||||
@click="router.push({name: 'library.albums.detail', params: {id: serie.id}})"
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
alt=""
|
||||
class="channel-image"
|
||||
src="../../assets/audio/default-cover.png"
|
||||
@click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})"
|
||||
@click="router.push({name: 'library.albums.detail', params: {id: serie.id}})"
|
||||
>
|
||||
<img
|
||||
v-if="cover && cover.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="channel-image"
|
||||
@click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})"
|
||||
@click="router.push({name: 'library.albums.detail', params: {id: serie.id}})"
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
alt=""
|
||||
class="channel-image"
|
||||
src="../../assets/audio/default-cover.png"
|
||||
@click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})"
|
||||
@click="router.push({name: 'library.albums.detail', params: {id: serie.id}})"
|
||||
>
|
||||
</div>
|
||||
<div class="content ellipsis">
|
||||
|
|
@ -56,7 +63,7 @@ const cover = computed(() => props.serie?.cover ?? null)
|
|||
</strong>
|
||||
<div class="description">
|
||||
<span>
|
||||
{{ $t('components.audio.ChannelSerieCard.meta.episodes', serie.tracks_count) }}
|
||||
{{ t('components.audio.ChannelSerieCard.meta.episodes', serie.tracks_count) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import type { BackendError, Album } from '~/types'
|
|||
|
||||
import { clone } from 'lodash-es'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import axios from 'axios'
|
||||
import ChannelSerieCard from '~/components/audio/ChannelSerieCard.vue'
|
||||
|
|
@ -14,6 +15,8 @@ interface Props {
|
|||
limit?: number
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isPodcast: true,
|
||||
limit: 5
|
||||
|
|
@ -84,7 +87,7 @@ fetchData()
|
|||
:class="['ui', 'basic', 'button']"
|
||||
@click="fetchData(nextPage)"
|
||||
>
|
||||
{{ $t('components.audio.ChannelSeries.button.showMore') }}
|
||||
{{ t('components.audio.ChannelSeries.button.showMore') }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-if="!isLoading && albums.length === 0">
|
||||
|
|
@ -93,7 +96,7 @@ fetchData()
|
|||
@refresh="fetchData()"
|
||||
>
|
||||
<p>
|
||||
{{ $t('components.audio.ChannelSeries.help.subscribe') }}
|
||||
{{ t('components.audio.ChannelSeries.help.subscribe') }}
|
||||
</p>
|
||||
</empty-state>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import type { BackendError, BackendResponse, Channel } from '~/types'
|
|||
|
||||
import { ref, reactive } from 'vue'
|
||||
import { clone } from 'lodash-es'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
|
|
@ -17,6 +18,8 @@ interface Props {
|
|||
limit?: number
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
limit: 5
|
||||
|
|
@ -77,7 +80,7 @@ fetchData()
|
|||
:class="['ui', 'basic', 'button']"
|
||||
@click="fetchData(nextPage)"
|
||||
>
|
||||
{{ $t('components.audio.ChannelsWidget.button.showMore') }}
|
||||
{{ t('components.audio.ChannelsWidget.button.showMore') }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-if="!isLoading && channels.length === 0">
|
||||
|
|
|
|||
|
|
@ -3,12 +3,15 @@ import { get } from 'lodash-es'
|
|||
import { ref, computed } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Props {
|
||||
type: string
|
||||
id: number
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const width = ref(null)
|
||||
const height = ref(150)
|
||||
|
|
@ -51,20 +54,20 @@ const { copy, copied } = useClipboard({ source: embedCode })
|
|||
>
|
||||
<p>
|
||||
<strong>
|
||||
{{ $t('components.audio.EmbedWizard.warning.anonymous') }}
|
||||
{{ t('components.audio.EmbedWizard.warning.anonymous') }}
|
||||
</strong>
|
||||
</p>
|
||||
<p>
|
||||
{{ $t('components.audio.EmbedWizard.help.anonymous') }}
|
||||
{{ t('components.audio.EmbedWizard.help.anonymous') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="ui form">
|
||||
<div class="two fields">
|
||||
<div class="field">
|
||||
<div class="field">
|
||||
<label for="embed-width">{{ $t('components.audio.EmbedWizard.label.width') }}</label>
|
||||
<label for="embed-width">{{ t('components.audio.EmbedWizard.label.width') }}</label>
|
||||
<p>
|
||||
{{ $t('components.audio.EmbedWizard.help.width') }}
|
||||
{{ t('components.audio.EmbedWizard.help.width') }}
|
||||
</p>
|
||||
<input
|
||||
id="embed-width"
|
||||
|
|
@ -77,7 +80,7 @@ const { copy, copied } = useClipboard({ source: embedCode })
|
|||
<template v-if="type != 'track'">
|
||||
<br>
|
||||
<div class="field">
|
||||
<label for="embed-height">{{ $t('components.audio.EmbedWizard.label.height') }}</label>
|
||||
<label for="embed-height">{{ t('components.audio.EmbedWizard.label.height') }}</label>
|
||||
<input
|
||||
id="embed-height"
|
||||
v-model="height"
|
||||
|
|
@ -95,11 +98,11 @@ const { copy, copied } = useClipboard({ source: embedCode })
|
|||
@click="copy()"
|
||||
>
|
||||
<i class="copy icon" />
|
||||
{{ $t('components.audio.EmbedWizard.button.copy') }}
|
||||
{{ t('components.audio.EmbedWizard.button.copy') }}
|
||||
</button>
|
||||
<label for="embed-width">{{ $t('components.audio.EmbedWizard.label.embed') }}</label>
|
||||
<label for="embed-width">{{ t('components.audio.EmbedWizard.label.embed') }}</label>
|
||||
<p>
|
||||
{{ $t('components.audio.EmbedWizard.help.embed') }}
|
||||
{{ t('components.audio.EmbedWizard.help.embed') }}
|
||||
</p>
|
||||
<textarea
|
||||
v-model="embedCode"
|
||||
|
|
@ -111,7 +114,7 @@ const { copy, copied } = useClipboard({ source: embedCode })
|
|||
v-if="copied"
|
||||
class="message"
|
||||
>
|
||||
{{ $t('components.audio.EmbedWizard.message.copy') }}
|
||||
{{ t('components.audio.EmbedWizard.message.copy') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -123,7 +126,7 @@ const { copy, copied } = useClipboard({ source: embedCode })
|
|||
:href="iframeSrc"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t('components.audio.EmbedWizard.header.preview') }}
|
||||
{{ t('components.audio.EmbedWizard.header.preview') }}
|
||||
</a>
|
||||
</h3>
|
||||
<iframe
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import type { Library } from '~/types'
|
|||
|
||||
import { computed } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Events {
|
||||
(e: 'unfollowed'): void
|
||||
|
|
@ -13,6 +14,7 @@ interface Props {
|
|||
library: Library
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
const emit = defineEmits<Events>()
|
||||
const props = defineProps<Props>()
|
||||
|
||||
|
|
@ -39,13 +41,13 @@ const toggle = () => {
|
|||
>
|
||||
<i class="heart icon" />
|
||||
<span v-if="isApproved">
|
||||
{{ $t('components.audio.LibraryFollowButton.button.unfollow') }}
|
||||
{{ t('components.audio.LibraryFollowButton.button.unfollow') }}
|
||||
</span>
|
||||
<span v-else-if="isPending">
|
||||
{{ $t('components.audio.LibraryFollowButton.button.cancel') }}
|
||||
{{ t('components.audio.LibraryFollowButton.button.cancel') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.audio.LibraryFollowButton.button.follow') }}
|
||||
{{ t('components.audio.LibraryFollowButton.button.follow') }}
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ import usePlayOptions from '~/composables/audio/usePlayOptions'
|
|||
import useReport from '~/composables/moderation/useReport'
|
||||
import { useCurrentElement } from '@vueuse/core'
|
||||
import { setupDropdown } from '~/utils/fomantic'
|
||||
import { useStore } from '~/store'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
|
||||
|
||||
interface Props extends PlayOptionsProps {
|
||||
dropdownIconClasses?: string[]
|
||||
|
|
@ -64,6 +67,10 @@ const {
|
|||
const { report, getReportableObjects } = useReport()
|
||||
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const labels = computed(() => ({
|
||||
playNow: t('components.audio.PlayButton.button.playNow'),
|
||||
addToQueue: t('components.audio.PlayButton.button.addToQueue'),
|
||||
|
|
@ -139,7 +146,7 @@ const openMenu = () => {
|
|||
v-else
|
||||
:class="[playIconClass, 'icon']"
|
||||
/>
|
||||
<template v-if="!discrete && !iconOnly"> <slot>{{ $t('components.audio.PlayButton.button.discretePlay') }}</slot></template>
|
||||
<template v-if="!discrete && !iconOnly"> <slot>{{ t('components.audio.PlayButton.button.discretePlay') }}</slot></template>
|
||||
</button>
|
||||
<button
|
||||
v-if="!discrete && !iconOnly"
|
||||
|
|
@ -180,7 +187,7 @@ const openMenu = () => {
|
|||
class="item basic"
|
||||
:disabled="!playable"
|
||||
:title="labels.startRadio"
|
||||
@click.stop.prevent="$store.dispatch('radios/start', {type: 'similar', objectId: track?.id})"
|
||||
@click.stop.prevent="store.dispatch('radios/start', {type: 'similar', objectId: track?.id})"
|
||||
>
|
||||
<i class="feed icon" />{{ labels.startRadio }}
|
||||
</button>
|
||||
|
|
@ -188,22 +195,22 @@ const openMenu = () => {
|
|||
v-if="track"
|
||||
class="item basic"
|
||||
:disabled="!playable"
|
||||
@click.stop="$store.commit('playlists/chooseTrack', track)"
|
||||
@click.stop="store.commit('playlists/chooseTrack', track)"
|
||||
>
|
||||
<i class="list icon" />
|
||||
{{ labels.addToPlaylist }}
|
||||
</button>
|
||||
<button
|
||||
v-if="track && $route.name !== 'library.tracks.detail'"
|
||||
v-if="track && route.name !== 'library.tracks.detail'"
|
||||
class="item basic"
|
||||
@click.stop.prevent="$router.push(`/library/tracks/${track?.id}/`)"
|
||||
@click.stop.prevent="router.push(`/library/tracks/${track?.id}/`)"
|
||||
>
|
||||
<i class="info icon" />
|
||||
<span v-if="track.artist_credit?.some(ac => ac.artist.content_category === 'podcast')">
|
||||
{{ $t('components.audio.PlayButton.button.episodeDetails') }}
|
||||
{{ t('components.audio.PlayButton.button.episodeDetails') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.audio.PlayButton.button.trackDetails') }}
|
||||
{{ t('components.audio.PlayButton.button.trackDetails') }}
|
||||
</span>
|
||||
</button>
|
||||
<div class="divider" />
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { useMouse, useWindowSize } from '@vueuse/core'
|
|||
import { computed, ref } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
|
||||
import time from '~/utils/time'
|
||||
|
|
@ -43,6 +44,7 @@ const {
|
|||
} = useQueue()
|
||||
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
|
||||
const toggleMobilePlayer = () => {
|
||||
|
|
@ -156,12 +158,12 @@ const hideArtist = () => {
|
|||
<div class="controls track-controls queue-not-focused desktop-and-up">
|
||||
<div
|
||||
class="ui tiny image"
|
||||
@click.stop.prevent="$router.push({name: 'library.tracks.detail', params: {id: currentTrack.id }})"
|
||||
@click.stop.prevent="router.push({name: 'library.tracks.detail', params: {id: currentTrack.id }})"
|
||||
>
|
||||
<img
|
||||
ref="cover"
|
||||
alt=""
|
||||
:src="$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
|
||||
:src="store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -188,7 +190,7 @@ const hideArtist = () => {
|
|||
:to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
|
||||
@click.stop.prevent=""
|
||||
>
|
||||
{{ ac.credit ?? $t('components.audio.Player.meta.unknownArtist') }}
|
||||
{{ ac.credit ?? t('components.audio.Player.meta.unknownArtist') }}
|
||||
</router-link>
|
||||
<span>{{ ac.joinphrase }}</span>
|
||||
</template>
|
||||
|
|
@ -200,7 +202,7 @@ const hideArtist = () => {
|
|||
:to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
|
||||
@click.stop.prevent=""
|
||||
>
|
||||
{{ currentTrack.albumTitle ?? $t('components.audio.Player.meta.unknownAlbum') }}
|
||||
{{ currentTrack.albumTitle ?? t('components.audio.Player.meta.unknownAlbum') }}
|
||||
</router-link>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -211,7 +213,7 @@ const hideArtist = () => {
|
|||
<img
|
||||
ref="cover"
|
||||
alt=""
|
||||
:src="$store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
|
||||
:src="store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
|
||||
>
|
||||
</div>
|
||||
<div class="middle aligned content ellipsis">
|
||||
|
|
@ -223,18 +225,18 @@ const hideArtist = () => {
|
|||
v-for="ac in currentTrack.artistCredit"
|
||||
:key="ac.artist.id"
|
||||
>
|
||||
{{ ac.credit ?? $t('components.audio.Player.meta.unknownArtist') }}
|
||||
{{ ac.credit ?? t('components.audio.Player.meta.unknownArtist') }}
|
||||
<span>{{ ac.joinphrase }}</span>
|
||||
</div>
|
||||
<template v-if="currentTrack.albumId !== -1">
|
||||
<span class="middle slash symbol" />
|
||||
{{ currentTrack.albumTitle ?? $t('components.audio.Player.meta.unknownAlbum') }}
|
||||
{{ currentTrack.albumTitle ?? t('components.audio.Player.meta.unknownAlbum') }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
class="controls desktop-and-up fluid align-right"
|
||||
>
|
||||
<track-favorite-icon
|
||||
|
|
@ -340,7 +342,7 @@ const hideArtist = () => {
|
|||
</button>
|
||||
|
||||
<button
|
||||
v-if="$store.state.ui.queueFocused"
|
||||
v-if="store.state.ui.queueFocused"
|
||||
class="circular control button close-control desktop-and-up"
|
||||
@click.stop="toggleMobilePlayer"
|
||||
>
|
||||
|
|
@ -354,14 +356,14 @@ const hideArtist = () => {
|
|||
<i class="large up angle icon" />
|
||||
</button>
|
||||
<button
|
||||
v-if="$store.state.ui.queueFocused === 'player'"
|
||||
v-if="store.state.ui.queueFocused === 'player'"
|
||||
class="circular control button close-control desktop-and-below"
|
||||
@click.stop="switchTab"
|
||||
>
|
||||
<i class="large up angle icon" />
|
||||
</button>
|
||||
<button
|
||||
v-if="$store.state.ui.queueFocused === 'queue'"
|
||||
v-if="store.state.ui.queueFocused === 'queue'"
|
||||
class="circular control button desktop-and-below"
|
||||
@click.stop="switchTab"
|
||||
>
|
||||
|
|
@ -370,7 +372,7 @@ const hideArtist = () => {
|
|||
</div>
|
||||
<button
|
||||
class="circular control button close-control desktop-and-below"
|
||||
@click.stop="$store.commit('ui/queueFocused', null)"
|
||||
@click.stop="store.commit('ui/queueFocused', null)"
|
||||
>
|
||||
<i class="x icon" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ const labels = computed(() => ({
|
|||
<div>
|
||||
/front/src/components/audio/Search.vue
|
||||
<h2>
|
||||
{{ $t('components.audio.Search.header.search') }}
|
||||
{{ t('components.audio.Search.header.search') }}
|
||||
</h2>
|
||||
<div :class="['ui', {'loading': isLoading }, 'search']">
|
||||
<div class="ui icon big input">
|
||||
|
|
@ -90,7 +90,7 @@ const labels = computed(() => ({
|
|||
</div>
|
||||
<template v-if="query.length > 0">
|
||||
<h3 class="ui title">
|
||||
{{ $t('components.audio.Search.header.artists') }}
|
||||
{{ t('components.audio.Search.header.artists') }}
|
||||
</h3>
|
||||
<div v-if="results.artists.length > 0">
|
||||
<div class="ui cards">
|
||||
|
|
@ -102,12 +102,12 @@ const labels = computed(() => ({
|
|||
</div>
|
||||
</div>
|
||||
<p v-else>
|
||||
{{ $t('components.audio.Search.empty.noArtists') }}
|
||||
{{ t('components.audio.Search.empty.noArtists') }}
|
||||
</p>
|
||||
</template>
|
||||
<template v-if="query.length > 0">
|
||||
<h3 class="ui title">
|
||||
{{ $t('components.audio.Search.header.albums') }}
|
||||
{{ t('components.audio.Search.header.albums') }}
|
||||
</h3>
|
||||
<div
|
||||
v-if="results.albums.length > 0"
|
||||
|
|
@ -125,7 +125,7 @@ const labels = computed(() => ({
|
|||
</div>
|
||||
</div>
|
||||
<p v-else>
|
||||
{{ $t('components.audio.Search.empty.noAlbums') }}
|
||||
{{ t('components.audio.Search.empty.noAlbums') }}
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,14 @@ import TagsList from '~/components/tags/List.vue'
|
|||
import { computed } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { truncate } from '~/utils/filters'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Props {
|
||||
artist: Artist
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const cover = computed(() => !props.artist.cover?.urls.original
|
||||
|
|
@ -63,10 +66,10 @@ const imageUrl = computed(() => cover.value?.urls.original
|
|||
</div>
|
||||
<div class="extra content">
|
||||
<span v-if="artist.content_category === 'music'">
|
||||
{{ $t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
|
||||
{{ t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
|
||||
{{ t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
|
||||
</span>
|
||||
<play-button
|
||||
class="right floated basic icon"
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { useI18n } from 'vue-i18n'
|
|||
|
||||
import { usePlayer } from '~/composables/audio/player'
|
||||
import { useQueue } from '~/composables/audio/queue'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
|
||||
import usePlayOptions from '~/composables/audio/usePlayOptions'
|
||||
|
||||
|
|
@ -54,6 +56,8 @@ const { isPlaying } = usePlayer()
|
|||
const { activateTrack } = usePlayOptions(props)
|
||||
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
|
||||
const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.button.actions'))
|
||||
</script>
|
||||
|
||||
|
|
@ -71,13 +75,13 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
|
|||
>
|
||||
<img
|
||||
v-if="track.album?.cover?.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="ui artist-track mini image"
|
||||
>
|
||||
<img
|
||||
v-else-if="track.cover"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="ui artist-track mini image"
|
||||
>
|
||||
|
|
@ -136,7 +140,7 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
|
|||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="$store.state.auth.authenticated && track.artist_credit?.[0].artist.content_category !== 'podcast'"
|
||||
v-if="store.state.auth.authenticated && track.artist_credit?.[0].artist.content_category !== 'podcast'"
|
||||
:class="[
|
||||
'meta',
|
||||
'right',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
|
|||
// import type { Track } from '~/types'
|
||||
|
||||
import { useStore } from '~/store'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import SemanticModal from '~/components/semantic/Modal.vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
|
@ -55,11 +56,13 @@ const show = useVModel(props, 'show', emit)
|
|||
|
||||
const { report, getReportableObjects } = useReport()
|
||||
const { enqueue, enqueueNext } = usePlayOptions(props)
|
||||
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
|
||||
const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id))
|
||||
|
||||
const { t } = useI18n()
|
||||
const favoriteButton = computed(() => isFavorite.value
|
||||
? t('components.audio.podcast.Modal.button.removeFromFavorites')
|
||||
: t('components.audio.podcast.Modal.button.addToFavorites')
|
||||
|
|
@ -101,7 +104,7 @@ const labels = computed(() => ({
|
|||
<img
|
||||
v-if="track.album && track.album.cover && track.album.cover.urls.original"
|
||||
v-lazy="
|
||||
$store.getters['instance/absoluteUrl'](
|
||||
store.getters['instance/absoluteUrl'](
|
||||
track.album.cover.urls.medium_square_crop
|
||||
)
|
||||
"
|
||||
|
|
@ -111,7 +114,7 @@ const labels = computed(() => ({
|
|||
<img
|
||||
v-else-if="track.cover"
|
||||
v-lazy="
|
||||
$store.getters['instance/absoluteUrl'](
|
||||
store.getters['instance/absoluteUrl'](
|
||||
track.cover.urls.medium_square_crop
|
||||
)
|
||||
"
|
||||
|
|
@ -144,7 +147,7 @@ const labels = computed(() => ({
|
|||
<div class="content">
|
||||
<div class="ui one column unstackable grid">
|
||||
<div
|
||||
v-if="$store.state.auth.authenticated && track.artist_credit?.[0].artist?.content_category !== 'podcast'"
|
||||
v-if="store.state.auth.authenticated && track.artist_credit?.[0].artist?.content_category !== 'podcast'"
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
|
|
@ -152,7 +155,7 @@ const labels = computed(() => ({
|
|||
class="column"
|
||||
role="button"
|
||||
:aria-label="favoriteButton"
|
||||
@click.stop="$store.dispatch('favorites/toggle', track.id)"
|
||||
@click.stop="store.dispatch('favorites/toggle', track.id)"
|
||||
>
|
||||
<i
|
||||
:class="[
|
||||
|
|
@ -202,7 +205,7 @@ const labels = computed(() => ({
|
|||
role="button"
|
||||
:aria-label="labels.startRadio"
|
||||
@click.stop.prevent="
|
||||
$store.dispatch('radios/start', {
|
||||
store.dispatch('radios/start', {
|
||||
type: 'similar',
|
||||
objectId: track.id,
|
||||
});
|
||||
|
|
@ -218,7 +221,7 @@ const labels = computed(() => ({
|
|||
class="column"
|
||||
role="button"
|
||||
:aria-label="labels.addToPlaylist"
|
||||
@click.stop="$store.commit('playlists/chooseTrack', track)"
|
||||
@click.stop="store.commit('playlists/chooseTrack', track)"
|
||||
>
|
||||
<i class="list icon track-modal list-icon" />
|
||||
<span class="track-modal list-item">{{
|
||||
|
|
@ -236,7 +239,7 @@ const labels = computed(() => ({
|
|||
role="button"
|
||||
:aria-label="albumDetailsButton"
|
||||
@click.prevent.exact="
|
||||
$router.push({
|
||||
router.push({
|
||||
name: 'library.albums.detail',
|
||||
params: { id: track.album?.id },
|
||||
})
|
||||
|
|
@ -258,7 +261,7 @@ const labels = computed(() => ({
|
|||
class="column"
|
||||
role="button"
|
||||
:aria-label="artistDetailsButton"
|
||||
@click.prevent.exact="$router.push({ name: 'library.artists.detail', params: { id: ac.artist.id } })"
|
||||
@click.prevent.exact="router.push({ name: 'library.artists.detail', params: { id: ac.artist.id } })"
|
||||
>
|
||||
<i class="user icon track-modal list-icon" />
|
||||
<span class="track-modal list-item">{{ ac.artist.name }}</span>
|
||||
|
|
@ -271,7 +274,7 @@ const labels = computed(() => ({
|
|||
role="button"
|
||||
:aria-label="trackDetailsButton"
|
||||
@click.prevent.exact="
|
||||
$router.push({
|
||||
router.push({
|
||||
name: 'library.tracks.detail',
|
||||
params: { id: track.id },
|
||||
})
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
|
|||
import { ref } from 'vue'
|
||||
|
||||
import { useQueue } from '~/composables/audio/queue'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
|
|
@ -48,6 +49,8 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
account: null
|
||||
})
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const description = ref('')
|
||||
const renderedDescription = useMarkdown(description)
|
||||
|
||||
|
|
@ -83,13 +86,13 @@ await fetchData()
|
|||
>
|
||||
<img
|
||||
v-if="track.cover?.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="ui artist-track mini image"
|
||||
>
|
||||
<img
|
||||
v-else-if="defaultCover"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="ui artist-track mini image"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { useI18n } from 'vue-i18n'
|
|||
|
||||
import { usePlayer } from '~/composables/audio/player'
|
||||
import { useQueue } from '~/composables/audio/queue'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
|
||||
import usePlayOptions from '~/composables/audio/usePlayOptions'
|
||||
|
||||
|
|
@ -54,6 +56,8 @@ const { isPlaying } = usePlayer()
|
|||
const { activateTrack } = usePlayOptions(props)
|
||||
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
|
||||
const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.button.actions'))
|
||||
</script>
|
||||
|
||||
|
|
@ -71,13 +75,13 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
|
|||
>
|
||||
<img
|
||||
v-if="track.album?.cover?.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="ui artist-track mini image"
|
||||
>
|
||||
<img
|
||||
v-else-if="track.cover"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="ui artist-track mini image"
|
||||
>
|
||||
|
|
@ -119,7 +123,7 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
|
|||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
:class="[
|
||||
'meta',
|
||||
'right',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
|
|||
// import type { Track } from '~/types'
|
||||
|
||||
import { useStore } from '~/store'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import SemanticModal from '~/components/semantic/Modal.vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
|
@ -59,6 +60,8 @@ const store = useStore()
|
|||
const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id))
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
const favoriteButton = computed(() => isFavorite.value
|
||||
? t('components.audio.track.Modal.button.removeFromFavorites')
|
||||
: t('components.audio.track.Modal.button.addToFavorites')
|
||||
|
|
@ -99,13 +102,13 @@ const labels = computed(() => ({
|
|||
<div class="ui large centered rounded image">
|
||||
<img
|
||||
v-if="track.album?.cover?.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="ui centered image"
|
||||
>
|
||||
<img
|
||||
v-else-if="track.cover"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="ui centered image"
|
||||
>
|
||||
|
|
@ -133,7 +136,7 @@ const labels = computed(() => ({
|
|||
<div class="content">
|
||||
<div class="ui one column unstackable grid">
|
||||
<div
|
||||
v-if="$store.state.auth.authenticated && track.artist_credit?.[0].artist.content_category !== 'podcast'"
|
||||
v-if="store.state.auth.authenticated && track.artist_credit?.[0].artist.content_category !== 'podcast'"
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
|
|
@ -141,7 +144,7 @@ const labels = computed(() => ({
|
|||
class="column"
|
||||
role="button"
|
||||
:aria-label="favoriteButton"
|
||||
@click.stop="$store.dispatch('favorites/toggle', track.id)"
|
||||
@click.stop="store.dispatch('favorites/toggle', track.id)"
|
||||
>
|
||||
<i :class="[ 'heart', 'favorite-icon', { favorited: isFavorite, pink: isFavorite }, 'icon', 'track-modal', 'list-icon' ]" />
|
||||
<span class="track-modal list-item">{{ favoriteButton }}</span>
|
||||
|
|
@ -174,7 +177,7 @@ const labels = computed(() => ({
|
|||
class="column"
|
||||
role="button"
|
||||
:aria-label="labels.startRadio"
|
||||
@click.stop.prevent="() => { $store.dispatch('radios/start', { type: 'similar', objectId: track.id }); modal.closeModal() }"
|
||||
@click.stop.prevent="() => { store.dispatch('radios/start', { type: 'similar', objectId: track.id }); modal.closeModal() }"
|
||||
>
|
||||
<i class="rss icon track-modal list-icon" />
|
||||
<span class="track-modal list-item">{{ labels.startRadio }}</span>
|
||||
|
|
@ -185,7 +188,7 @@ const labels = computed(() => ({
|
|||
class="column"
|
||||
role="button"
|
||||
:aria-label="labels.addToPlaylist"
|
||||
@click.stop="$store.commit('playlists/chooseTrack', track)"
|
||||
@click.stop="store.commit('playlists/chooseTrack', track)"
|
||||
>
|
||||
<i class="list icon track-modal list-icon" />
|
||||
<span class="track-modal list-item">
|
||||
|
|
@ -202,7 +205,7 @@ const labels = computed(() => ({
|
|||
class="column"
|
||||
role="button"
|
||||
:aria-label="albumDetailsButton"
|
||||
@click.prevent.exact="$router.push({ name: 'library.albums.detail', params: { id: track.album?.id } })"
|
||||
@click.prevent.exact="router.push({ name: 'library.albums.detail', params: { id: track.album?.id } })"
|
||||
>
|
||||
<i class="compact disc icon track-modal list-icon" />
|
||||
<span class="track-modal list-item">{{ albumDetailsButton }}</span>
|
||||
|
|
@ -218,7 +221,7 @@ const labels = computed(() => ({
|
|||
class="column"
|
||||
role="button"
|
||||
:aria-label="artistDetailsButton"
|
||||
@click.prevent.exact="$router.push({ name: 'library.artists.detail', params: { id: ac.artist.id } })"
|
||||
@click.prevent.exact="router.push({ name: 'library.artists.detail', params: { id: ac.artist.id } })"
|
||||
>
|
||||
<i class="user icon track-modal list-icon" />
|
||||
<span class="track-modal list-item">{{ ac.credit }}</span>
|
||||
|
|
@ -230,7 +233,7 @@ const labels = computed(() => ({
|
|||
class="column"
|
||||
role="button"
|
||||
:aria-label="trackDetailsButton"
|
||||
@click.prevent.exact="$router.push({ name: 'library.tracks.detail', params: { id: track.id } })"
|
||||
@click.prevent.exact="router.push({ name: 'library.tracks.detail', params: { id: track.id } })"
|
||||
>
|
||||
<i class="info icon track-modal list-icon" />
|
||||
<span class="track-modal list-item">{{ trackDetailsButton }}</span>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@ import PlayIndicator from '~/components/audio/track/PlayIndicator.vue'
|
|||
import PlayButton from '~/components/audio/PlayButton.vue'
|
||||
import { usePlayer } from '~/composables/audio/player'
|
||||
import { useQueue } from '~/composables/audio/queue'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
|
||||
const store = useStore()
|
||||
|
||||
interface Props extends PlayOptionsProps {
|
||||
track: Track
|
||||
|
|
@ -119,19 +123,19 @@ const hover = ref(false)
|
|||
>
|
||||
<img
|
||||
v-if="track.album?.cover?.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="ui artist-track mini image"
|
||||
>
|
||||
<img
|
||||
v-else-if="track.cover?.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="ui artist-track mini image"
|
||||
>
|
||||
<img
|
||||
v-else-if="track.artist_credit?.length && track.artist_credit[0].artist.cover?.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.artist_credit[0].artist.cover.urls.medium_square_crop) "
|
||||
v-lazy="store.getters['instance/absoluteUrl'](track.artist_credit[0].artist.cover.urls.medium_square_crop) "
|
||||
alt=""
|
||||
class="ui artist-track mini image"
|
||||
>
|
||||
|
|
@ -183,7 +187,7 @@ const hover = ref(false)
|
|||
</template>
|
||||
</div>
|
||||
<div
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
class="meta right floated column"
|
||||
>
|
||||
<track-favorite-icon
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import type { Track } from '~/types'
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import { clone, uniqBy } from 'lodash-es'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
|
|
@ -84,6 +86,8 @@ const allTracks = computed(() => {
|
|||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
|
||||
const labels = computed(() => ({
|
||||
title: t('components.audio.track.Table.table.header.title'),
|
||||
album: t('components.audio.track.Table.table.header.album'),
|
||||
|
|
@ -202,7 +206,7 @@ const updatePage = (page: number) => {
|
|||
<b>{{ labels.artist }}</b>
|
||||
</div>
|
||||
<div
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
class="meta right floated column"
|
||||
/>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import type { Track, Listening } from '~/types'
|
|||
import { ref, reactive, watch } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { clone } from 'lodash-es'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
|
|
@ -39,6 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
})
|
||||
|
||||
const store = useStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const objects = reactive([] as Listening[])
|
||||
const count = ref(0)
|
||||
|
|
@ -110,12 +112,12 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
|
|||
<div class="ui tiny image">
|
||||
<img
|
||||
v-if="object.track.album && object.track.album.cover"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
>
|
||||
<img
|
||||
v-else-if="object.track.cover"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
>
|
||||
<img
|
||||
|
|
@ -206,7 +208,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
|
|||
>
|
||||
<div class="ui icon header">
|
||||
<i class="music icon" />
|
||||
{{ $t('components.audio.track.Widget.empty.noResults') }}
|
||||
{{ t('components.audio.track.Widget.empty.noResults') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
|
|
@ -221,7 +223,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
|
|||
:class="['ui', 'basic', 'button']"
|
||||
@click="fetchData(nextPage as string)"
|
||||
>
|
||||
{{ $t('components.audio.track.Widget.button.more') }}
|
||||
{{ t('components.audio.track.Widget.button.more') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -72,17 +72,17 @@ store.state.auth.applicationSecret = undefined
|
|||
</div>
|
||||
<template v-else>
|
||||
<router-link :to="{name: 'settings'}">
|
||||
{{ $t('components.auth.ApplicationEdit.link.settings') }}
|
||||
{{ t('components.auth.ApplicationEdit.link.settings') }}
|
||||
</router-link>
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.auth.ApplicationEdit.header.appDetails') }}
|
||||
{{ t('components.auth.ApplicationEdit.header.appDetails') }}
|
||||
</h2>
|
||||
<div class="ui form">
|
||||
<p>
|
||||
{{ $t('components.auth.ApplicationEdit.help.appDetails') }}
|
||||
{{ t('components.auth.ApplicationEdit.help.appDetails') }}
|
||||
</p>
|
||||
<div class="field">
|
||||
<label for="copy-id">{{ $t('components.auth.ApplicationEdit.label.appId') }}</label>
|
||||
<label for="copy-id">{{ t('components.auth.ApplicationEdit.label.appId') }}</label>
|
||||
<copy-input
|
||||
id="copy-id"
|
||||
:value="application.client_id"
|
||||
|
|
@ -94,14 +94,14 @@ store.state.auth.applicationSecret = undefined
|
|||
>
|
||||
<div class="ui small warning message">
|
||||
<h3 class="header">
|
||||
{{ $t('components.auth.ApplicationEdit.header.appSecretWarning') }}
|
||||
{{ t('components.auth.ApplicationEdit.header.appSecretWarning') }}
|
||||
</h3>
|
||||
<p>
|
||||
{{ $t('components.auth.ApplicationEdit.message.appSecretWarning') }}
|
||||
{{ t('components.auth.ApplicationEdit.message.appSecretWarning') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label for="copy-secret">{{ $t('components.auth.ApplicationEdit.label.appSecret') }}</label>
|
||||
<label for="copy-secret">{{ t('components.auth.ApplicationEdit.label.appSecret') }}</label>
|
||||
<copy-input
|
||||
id="copy-secret"
|
||||
:value="secret"
|
||||
|
|
@ -111,7 +111,7 @@ store.state.auth.applicationSecret = undefined
|
|||
v-if="application.token != undefined"
|
||||
class="field"
|
||||
>
|
||||
<label for="copy-secret">{{ $t('components.auth.ApplicationEdit.label.accessToken') }}</label>
|
||||
<label for="copy-secret">{{ t('components.auth.ApplicationEdit.label.accessToken') }}</label>
|
||||
<copy-input
|
||||
id="copy-secret"
|
||||
:value="application.token"
|
||||
|
|
@ -121,12 +121,12 @@ store.state.auth.applicationSecret = undefined
|
|||
@click.prevent="refreshToken"
|
||||
>
|
||||
<i class="refresh icon" />
|
||||
{{ $t('components.auth.ApplicationEdit.button.regenerateToken') }}
|
||||
{{ t('components.auth.ApplicationEdit.button.regenerateToken') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.auth.ApplicationEdit.header.editApp') }}
|
||||
{{ t('components.auth.ApplicationEdit.header.editApp') }}
|
||||
</h2>
|
||||
<application-form
|
||||
:app="application"
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ const allScopes = computed(() => {
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.auth.ApplicationForm.header.failure') }}
|
||||
{{ t('components.auth.ApplicationForm.header.failure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -132,7 +132,7 @@ const allScopes = computed(() => {
|
|||
</ul>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<label for="application-name">{{ $t('components.auth.ApplicationForm.label.name') }}</label>
|
||||
<label for="application-name">{{ t('components.auth.ApplicationForm.label.name') }}</label>
|
||||
<input
|
||||
id="application-name"
|
||||
v-model="fields.name"
|
||||
|
|
@ -142,7 +142,7 @@ const allScopes = computed(() => {
|
|||
>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<label for="redirect-uris">{{ $t('components.auth.ApplicationForm.label.redirectUri') }}</label>
|
||||
<label for="redirect-uris">{{ t('components.auth.ApplicationForm.label.redirectUri') }}</label>
|
||||
<input
|
||||
id="redirect-uris"
|
||||
v-model="fields.redirect_uris"
|
||||
|
|
@ -150,13 +150,13 @@ const allScopes = computed(() => {
|
|||
type="text"
|
||||
>
|
||||
<p class="help">
|
||||
{{ $t('components.auth.ApplicationForm.help.redirectUri') }}
|
||||
{{ t('components.auth.ApplicationForm.help.redirectUri') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<label>{{ $t('components.auth.ApplicationForm.label.scopes.label') }}</label>
|
||||
<label>{{ t('components.auth.ApplicationForm.label.scopes.label') }}</label>
|
||||
<p>
|
||||
{{ $t('components.auth.ApplicationForm.label.scopes.description') }}
|
||||
{{ t('components.auth.ApplicationForm.label.scopes.description') }}
|
||||
</p>
|
||||
<div class="ui stackable two column grid">
|
||||
<div
|
||||
|
|
@ -203,10 +203,10 @@ const allScopes = computed(() => {
|
|||
type="submit"
|
||||
>
|
||||
<span v-if="app !== null">
|
||||
{{ $t('components.auth.ApplicationForm.button.update') }}
|
||||
{{ t('components.auth.ApplicationForm.button.update') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.auth.ApplicationForm.button.create') }}
|
||||
{{ t('components.auth.ApplicationForm.button.create') }}
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ const created = (application: Application) => {
|
|||
<div class="ui vertical stripe segment">
|
||||
<section class="ui text container">
|
||||
<router-link :to="{name: 'settings'}">
|
||||
{{ $t('components.auth.ApplicationNew.link.settings') }}
|
||||
{{ t('components.auth.ApplicationNew.link.settings') }}
|
||||
</router-link>
|
||||
<h2 class="ui header">
|
||||
{{ labels.title }}
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
|
|||
<section class="ui vertical stripe segment">
|
||||
<div class="ui small text container">
|
||||
<h2>
|
||||
<i class="lock open icon" />{{ $t('components.auth.Authorize.header.authorize') }}
|
||||
<i class="lock open icon" />{{ t('components.auth.Authorize.header.authorize') }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="errors.length > 0"
|
||||
|
|
@ -130,13 +130,13 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
|
|||
v-if="application"
|
||||
class="header"
|
||||
>
|
||||
{{ $t('components.auth.Authorize.header.authorizeFailure') }}
|
||||
{{ t('components.auth.Authorize.header.authorizeFailure') }}
|
||||
</h4>
|
||||
<h4
|
||||
v-else
|
||||
class="header"
|
||||
>
|
||||
{{ $t('components.auth.Authorize.header.fetchFailure') }}
|
||||
{{ t('components.auth.Authorize.header.fetchFailure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -159,7 +159,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
|
|||
@submit.prevent="submit"
|
||||
>
|
||||
<h3>
|
||||
{{ $t('components.auth.Authorize.header.access', {app_name: application.name}) }}
|
||||
{{ t('components.auth.Authorize.header.access', {app_name: application.name}) }}
|
||||
</h3>
|
||||
|
||||
<h4
|
||||
|
|
@ -172,20 +172,20 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
|
|||
:class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
|
||||
>
|
||||
<i class="pencil icon" />
|
||||
{{ $t('components.auth.Authorize.header.writeOnly') }}
|
||||
{{ t('components.auth.Authorize.header.writeOnly') }}
|
||||
</span>
|
||||
<span
|
||||
v-else-if="!topic.write && topic.read"
|
||||
:class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
|
||||
>
|
||||
{{ $t('components.auth.Authorize.header.readOnly') }}
|
||||
{{ t('components.auth.Authorize.header.readOnly') }}
|
||||
</span>
|
||||
<span
|
||||
v-else-if="topic.write && topic.read"
|
||||
:class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
|
||||
>
|
||||
<i class="pencil icon" />
|
||||
{{ $t('components.auth.Authorize.header.allScopes') }}
|
||||
{{ t('components.auth.Authorize.header.allScopes') }}
|
||||
</span>
|
||||
<i :class="[topic.icon, 'icon']" />
|
||||
<div class="content">
|
||||
|
|
@ -196,7 +196,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
|
|||
</div>
|
||||
</h4>
|
||||
<div v-if="unknownRequestedScopes.length > 0">
|
||||
<p><strong>{{ $t('components.auth.Authorize.message.unknownPermissions') }}</strong></p>
|
||||
<p><strong>{{ t('components.auth.Authorize.message.unknownPermissions') }}</strong></p>
|
||||
<ul
|
||||
v-for="(unknownscope, key) in unknownRequestedScopes"
|
||||
:key="key"
|
||||
|
|
@ -209,12 +209,12 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
|
|||
type="submit"
|
||||
>
|
||||
<i class="lock open icon" />
|
||||
{{ $t('components.auth.Authorize.button.authorize', { app: application.name }) }}
|
||||
{{ t('components.auth.Authorize.button.authorize', { app: application.name }) }}
|
||||
</button>
|
||||
<p
|
||||
v-if="redirectUri === 'urn:ietf:wg:oauth:2.0:oob'"
|
||||
>
|
||||
{{ $t('components.auth.Authorize.help.copyCode') }}
|
||||
{{ t('components.auth.Authorize.help.copyCode') }}
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
|
|
@ -225,7 +225,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
|
|||
</p>
|
||||
</form>
|
||||
<div v-else-if="code">
|
||||
<p><strong>{{ $t('components.auth.Authorize.help.pasteCode') }}</strong></p>
|
||||
<p><strong>{{ t('components.auth.Authorize.help.pasteCode') }}</strong></p>
|
||||
<copy-input :value="code" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -87,16 +87,16 @@ const submit = async () => {
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.auth.LoginForm.header.loginFailure') }}
|
||||
{{ t('components.auth.LoginForm.header.loginFailure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
v-if="errors[0] == 'invalid_credentials' && $store.state.instance.settings.moderation.signup_approval_enabled.value"
|
||||
>
|
||||
{{ $t('components.auth.LoginForm.help.approvalRequired') }}
|
||||
{{ t('components.auth.LoginForm.help.approvalRequired') }}
|
||||
</li>
|
||||
<li v-else-if="errors[0] == 'invalid_credentials'">
|
||||
{{ $t('components.auth.LoginForm.help.invalidCredentials') }}
|
||||
{{ t('components.auth.LoginForm.help.invalidCredentials') }}
|
||||
</li>
|
||||
<li v-else>
|
||||
{{ errors[0] }}
|
||||
|
|
@ -106,11 +106,11 @@ const submit = async () => {
|
|||
<template v-if="domain === $store.getters['instance/domain']">
|
||||
<div class="field">
|
||||
<label for="username-field">
|
||||
{{ $t('components.auth.LoginForm.label.username') }}
|
||||
{{ t('components.auth.LoginForm.label.username') }}
|
||||
<template v-if="showSignup">
|
||||
<span class="middle pipe symbol" />
|
||||
<router-link :to="{ path: '/signup' }">
|
||||
{{ $t('components.auth.LoginForm.link.createAccount') }}
|
||||
{{ t('components.auth.LoginForm.link.createAccount') }}
|
||||
</router-link>
|
||||
</template>
|
||||
</label>
|
||||
|
|
@ -127,13 +127,13 @@ const submit = async () => {
|
|||
</div>
|
||||
<div class="field">
|
||||
<label for="password-field">
|
||||
{{ $t('components.auth.LoginForm.label.password') }}
|
||||
{{ t('components.auth.LoginForm.label.password') }}
|
||||
<span class="middle pipe symbol" />
|
||||
<router-link
|
||||
tabindex="1"
|
||||
:to="{ name: 'auth.password-reset', query: { email: credentials.username } }"
|
||||
>
|
||||
{{ $t('components.auth.LoginForm.link.resetPassword') }}
|
||||
{{ t('components.auth.LoginForm.link.resetPassword') }}
|
||||
</router-link>
|
||||
</label>
|
||||
<password-input
|
||||
|
|
@ -145,14 +145,14 @@ const submit = async () => {
|
|||
</template>
|
||||
<template v-else>
|
||||
<p>
|
||||
{{ $t('components.auth.LoginForm.message.redirect', { domain: $store.getters['instance/domain'] }) }}
|
||||
{{ t('components.auth.LoginForm.message.redirect', { domain: $store.getters['instance/domain'] }) }}
|
||||
</p>
|
||||
</template>
|
||||
<button
|
||||
:class="['ui', { 'loading': isLoading }, 'right', 'floated', buttonClasses, 'button']"
|
||||
type="submit"
|
||||
>
|
||||
{{ $t('components.auth.LoginForm.button.login') }}
|
||||
{{ t('components.auth.LoginForm.button.login') }}
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
const store = useStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const labels = computed(() => ({
|
||||
title: t('components.auth.Logout.title')
|
||||
}))
|
||||
|
|
@ -15,20 +18,20 @@ const labels = computed(() => ({
|
|||
>
|
||||
<section class="ui vertical stripe segment">
|
||||
<div
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
class="ui small text container"
|
||||
>
|
||||
<h2>
|
||||
{{ $t('components.auth.Logout.header.confirm') }}
|
||||
{{ t('components.auth.Logout.header.confirm') }}
|
||||
</h2>
|
||||
<p>
|
||||
{{ $t('components.auth.Logout.message.loggedIn', { username: $store.state.auth.username }) }}
|
||||
{{ t('components.auth.Logout.message.loggedIn', { username: store.state.auth.username }) }}
|
||||
</p>
|
||||
<button
|
||||
class="ui button"
|
||||
@click="$store.dispatch('auth/logout')"
|
||||
@click="store.dispatch('auth/logout')"
|
||||
>
|
||||
{{ $t('components.auth.Logout.button.logout') }}
|
||||
{{ t('components.auth.Logout.button.logout') }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -36,13 +39,13 @@ const labels = computed(() => ({
|
|||
class="ui small text container"
|
||||
>
|
||||
<h2>
|
||||
{{ $t('components.auth.Logout.header.unauthenticated') }}
|
||||
{{ t('components.auth.Logout.header.unauthenticated') }}
|
||||
</h2>
|
||||
<router-link
|
||||
to="/login"
|
||||
class="ui button"
|
||||
>
|
||||
{{ $t('components.auth.Logout.link.login') }}
|
||||
{{ t('components.auth.Logout.link.login') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,15 @@ import axios from 'axios'
|
|||
import { clone } from 'lodash-es'
|
||||
import useMarkdown, { useMarkdownRaw } from '~/composables/useMarkdown'
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Props {
|
||||
plugin: Plugin
|
||||
libraries: Library[]
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const description = useMarkdown(() => props.plugin.description ?? '')
|
||||
|
|
@ -69,7 +72,7 @@ const submitAndScan = async () => {
|
|||
target="_blank"
|
||||
>
|
||||
<i class="external icon" />
|
||||
{{ $t('components.auth.Plugin.link.documentation') }}
|
||||
{{ t('components.auth.Plugin.link.documentation') }}
|
||||
</a>
|
||||
</template>
|
||||
<div class="ui clearing hidden divider" />
|
||||
|
|
@ -79,7 +82,7 @@ const submitAndScan = async () => {
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.auth.Plugin.header.failure') }}
|
||||
{{ t('components.auth.Plugin.header.failure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -97,7 +100,7 @@ const submitAndScan = async () => {
|
|||
v-model="enabled"
|
||||
type="checkbox"
|
||||
>
|
||||
<label :for="`${plugin.name}-enabled`">{{ $t('components.auth.Plugin.label.pluginEnabled') }}</label>
|
||||
<label :for="`${plugin.name}-enabled`">{{ t('components.auth.Plugin.label.pluginEnabled') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui clearing hidden divider" />
|
||||
|
|
@ -105,7 +108,7 @@ const submitAndScan = async () => {
|
|||
v-if="plugin.source"
|
||||
class="field"
|
||||
>
|
||||
<label for="plugin-library">{{ $t('components.auth.Plugin.label.library') }}</label>
|
||||
<label for="plugin-library">{{ t('components.auth.Plugin.label.library') }}</label>
|
||||
<select
|
||||
id="plugin-library"
|
||||
v-model="values['library']"
|
||||
|
|
@ -119,7 +122,7 @@ const submitAndScan = async () => {
|
|||
</option>
|
||||
</select>
|
||||
<div>
|
||||
{{ $t('components.auth.Plugin.description.library') }}
|
||||
{{ t('components.auth.Plugin.description.library') }}
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="(plugin.conf?.length ?? 0) > 0">
|
||||
|
|
@ -207,14 +210,14 @@ const submitAndScan = async () => {
|
|||
type="submit"
|
||||
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
|
||||
>
|
||||
{{ $t('components.auth.Plugin.button.save') }}
|
||||
{{ t('components.auth.Plugin.button.save') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="plugin.source"
|
||||
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
|
||||
@click.prevent="submitAndScan"
|
||||
>
|
||||
{{ $t('components.auth.Plugin.button.scan') }}
|
||||
{{ t('components.auth.Plugin.button.scan') }}
|
||||
</button>
|
||||
<div class="ui clearing hidden divider" />
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -276,7 +276,7 @@ fetchOwnedApps()
|
|||
<div class="ui vertical stripe segment">
|
||||
<section class="ui text container">
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.auth.Settings.header.accountSettings') }}
|
||||
{{ t('components.auth.Settings.header.accountSettings') }}
|
||||
</h2>
|
||||
<form
|
||||
class="ui form"
|
||||
|
|
@ -287,7 +287,7 @@ fetchOwnedApps()
|
|||
class="ui positive message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.auth.Settings.header.settingsUpdated') }}
|
||||
{{ t('components.auth.Settings.header.settingsUpdated') }}
|
||||
</h4>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -296,7 +296,7 @@ fetchOwnedApps()
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.auth.Settings.header.updateFailure') }}
|
||||
{{ t('components.auth.Settings.header.updateFailure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -340,14 +340,14 @@ fetchOwnedApps()
|
|||
:class="['ui', { loading: isLoading }, 'button']"
|
||||
type="submit"
|
||||
>
|
||||
{{ $t('components.auth.Settings.button.updateSettings') }}
|
||||
{{ t('components.auth.Settings.button.updateSettings') }}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
<section class="ui text container">
|
||||
<div class="ui hidden divider" />
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.auth.Settings.header.avatar') }}
|
||||
{{ t('components.auth.Settings.header.avatar') }}
|
||||
</h2>
|
||||
<div class="ui form">
|
||||
<div
|
||||
|
|
@ -356,7 +356,7 @@ fetchOwnedApps()
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.auth.Settings.header.avatarFailure') }}
|
||||
{{ t('components.auth.Settings.header.avatarFailure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -373,7 +373,7 @@ fetchOwnedApps()
|
|||
@update:model-value="submitAvatar($event)"
|
||||
@delete="avatar = {uuid: null}"
|
||||
>
|
||||
{{ $t('components.auth.Settings.label.avatar') }}
|
||||
{{ t('components.auth.Settings.label.avatar') }}
|
||||
</attachment-input>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -381,10 +381,10 @@ fetchOwnedApps()
|
|||
<section class="ui text container">
|
||||
<div class="ui hidden divider" />
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.auth.Settings.header.changePassword') }}
|
||||
{{ t('components.auth.Settings.header.changePassword') }}
|
||||
</h2>
|
||||
<div class="ui message">
|
||||
{{ $t('components.auth.Settings.description.changePassword.paragraph1') }} {{ $t('components.auth.Settings.description.changePassword.paragraph2') }}
|
||||
{{ t('components.auth.Settings.description.changePassword.paragraph1') }} {{ t('components.auth.Settings.description.changePassword.paragraph2') }}
|
||||
</div>
|
||||
<form
|
||||
class="ui form"
|
||||
|
|
@ -396,16 +396,16 @@ fetchOwnedApps()
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.auth.Settings.header.passwordFailure') }}
|
||||
{{ t('components.auth.Settings.header.passwordFailure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li v-if="passwordError == 'invalid_credentials'">
|
||||
{{ $t('components.auth.Settings.help.changePassword') }}
|
||||
{{ t('components.auth.Settings.help.changePassword') }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="old-password-field">{{ $t('components.auth.Settings.label.currentPassword') }}</label>
|
||||
<label for="old-password-field">{{ t('components.auth.Settings.label.currentPassword') }}</label>
|
||||
<password-input
|
||||
v-model="credentials.oldPassword"
|
||||
field-id="old-password-field"
|
||||
|
|
@ -413,7 +413,7 @@ fetchOwnedApps()
|
|||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="new-password-field">{{ $t('components.auth.Settings.label.newPassword') }}</label>
|
||||
<label for="new-password-field">{{ t('components.auth.Settings.label.newPassword') }}</label>
|
||||
<password-input
|
||||
v-model="credentials.newPassword"
|
||||
field-id="new-password-field"
|
||||
|
|
@ -424,30 +424,30 @@ fetchOwnedApps()
|
|||
:class="['ui', {'loading': isLoadingPassword}, {disabled: !credentials.newPassword || !credentials.oldPassword}, 'warning', 'button']"
|
||||
:action="submitPassword"
|
||||
>
|
||||
{{ $t('components.auth.Settings.button.password') }}
|
||||
{{ t('components.auth.Settings.button.password') }}
|
||||
<template #modal-header>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.modal.changePassword.header') }}
|
||||
{{ t('components.auth.Settings.modal.changePassword.header') }}
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-content>
|
||||
<div>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.modal.changePassword.content.warning') }}
|
||||
{{ t('components.auth.Settings.modal.changePassword.content.warning') }}
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
{{ $t('components.auth.Settings.modal.changePassword.content.logout') }}
|
||||
{{ t('components.auth.Settings.modal.changePassword.content.logout') }}
|
||||
</li>
|
||||
<li>
|
||||
{{ $t('components.auth.Settings.modal.changePassword.content.subsonic') }}
|
||||
{{ t('components.auth.Settings.modal.changePassword.content.subsonic') }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<template #modal-confirm>
|
||||
<div>
|
||||
{{ $t('components.auth.Settings.button.disableSubsonic') }}
|
||||
{{ t('components.auth.Settings.button.disableSubsonic') }}
|
||||
</div>
|
||||
</template>
|
||||
</dangerous-button>
|
||||
|
|
@ -464,11 +464,11 @@ fetchOwnedApps()
|
|||
<h2 class="ui header">
|
||||
<i class="eye slash outline icon" />
|
||||
<div class="content">
|
||||
{{ $t('components.auth.Settings.header.contentFilters') }}
|
||||
{{ t('components.auth.Settings.header.contentFilters') }}
|
||||
</div>
|
||||
</h2>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.description.contentFilters') }}
|
||||
{{ t('components.auth.Settings.description.contentFilters') }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
|
|
@ -476,19 +476,19 @@ fetchOwnedApps()
|
|||
@click="$store.dispatch('moderation/fetchContentFilters')"
|
||||
>
|
||||
<i class="refresh icon" />
|
||||
{{ $t('components.auth.Settings.button.refresh') }}
|
||||
{{ t('components.auth.Settings.button.refresh') }}
|
||||
</button>
|
||||
<h3 class="ui header">
|
||||
{{ $t('components.auth.Settings.header.hiddenArtists') }}
|
||||
{{ t('components.auth.Settings.header.hiddenArtists') }}
|
||||
</h3>
|
||||
<table class="ui compact very basic unstackable table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
{{ $t('components.auth.Settings.table.artists.header.name') }}
|
||||
{{ t('components.auth.Settings.table.artists.header.name') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('components.auth.Settings.table.artists.header.creationDate') }}
|
||||
{{ t('components.auth.Settings.table.artists.header.creationDate') }}
|
||||
</th>
|
||||
<th />
|
||||
</tr>
|
||||
|
|
@ -511,7 +511,7 @@ fetchOwnedApps()
|
|||
class="ui basic tiny button"
|
||||
@click="$store.dispatch('moderation/deleteContentFilter', filter.uuid)"
|
||||
>
|
||||
{{ $t('components.auth.Settings.button.delete') }}
|
||||
{{ t('components.auth.Settings.button.delete') }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -526,18 +526,18 @@ fetchOwnedApps()
|
|||
<h2 class="ui header">
|
||||
<i class="open lock icon" />
|
||||
<div class="content">
|
||||
{{ $t('components.auth.Settings.header.authorizedApps') }}
|
||||
{{ t('components.auth.Settings.header.authorizedApps') }}
|
||||
</div>
|
||||
</h2>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.description.authorizedApps') }}
|
||||
{{ t('components.auth.Settings.description.authorizedApps') }}
|
||||
</p>
|
||||
<button
|
||||
:class="['ui', 'icon', { loading: isLoadingApps }, 'button']"
|
||||
@click="fetchApps()"
|
||||
>
|
||||
<i class="refresh icon" />
|
||||
{{ $t('components.auth.Settings.button.refresh') }}
|
||||
{{ t('components.auth.Settings.button.refresh') }}
|
||||
</button>
|
||||
<table
|
||||
v-if="apps.length > 0"
|
||||
|
|
@ -546,10 +546,10 @@ fetchOwnedApps()
|
|||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
{{ $t('components.auth.Settings.table.authorizedApps.header.application') }}
|
||||
{{ t('components.auth.Settings.table.authorizedApps.header.application') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('components.auth.Settings.table.authorizedApps.header.permissions') }}
|
||||
{{ t('components.auth.Settings.table.authorizedApps.header.permissions') }}
|
||||
</th>
|
||||
<th />
|
||||
</tr>
|
||||
|
|
@ -570,20 +570,20 @@ fetchOwnedApps()
|
|||
:class="['ui', 'tiny', 'danger', { loading: isRevoking.has(app.client_id) }, 'button']"
|
||||
@confirm="revokeApp(app.client_id)"
|
||||
>
|
||||
{{ $t('components.auth.Settings.button.revoke') }}
|
||||
{{ t('components.auth.Settings.button.revoke') }}
|
||||
<template #modal-header>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.modal.revokeApp.header', {app: app.name}) }}
|
||||
{{ t('components.auth.Settings.modal.revokeApp.header', {app: app.name}) }}
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-content>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.modal.revokeApp.content.warning') }}
|
||||
{{ t('components.auth.Settings.modal.revokeApp.content.warning') }}
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-confirm>
|
||||
<div>
|
||||
{{ $t('components.auth.Settings.button.revokeAccess') }}
|
||||
{{ t('components.auth.Settings.button.revokeAccess') }}
|
||||
</div>
|
||||
</template>
|
||||
</dangerous-button>
|
||||
|
|
@ -593,9 +593,9 @@ fetchOwnedApps()
|
|||
</table>
|
||||
<empty-state v-else>
|
||||
<template #title>
|
||||
{{ $t('components.auth.Settings.header.noApps') }}
|
||||
{{ t('components.auth.Settings.header.noApps') }}
|
||||
</template>
|
||||
{{ $t('components.auth.Settings.help.noApps') }}
|
||||
{{ t('components.auth.Settings.help.noApps') }}
|
||||
</empty-state>
|
||||
</section>
|
||||
<section
|
||||
|
|
@ -606,17 +606,17 @@ fetchOwnedApps()
|
|||
<h2 class="ui header">
|
||||
<i class="code icon" />
|
||||
<div class="content">
|
||||
{{ $t('components.auth.Settings.header.yourApps') }}
|
||||
{{ t('components.auth.Settings.header.yourApps') }}
|
||||
</div>
|
||||
</h2>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.description.yourApps') }}
|
||||
{{ t('components.auth.Settings.description.yourApps') }}
|
||||
</p>
|
||||
<router-link
|
||||
class="ui success button"
|
||||
:to="{name: 'settings.applications.new'}"
|
||||
>
|
||||
{{ $t('components.auth.Settings.link.newApp') }}
|
||||
{{ t('components.auth.Settings.link.newApp') }}
|
||||
</router-link>
|
||||
<table
|
||||
v-if="ownedApps.length > 0"
|
||||
|
|
@ -625,13 +625,13 @@ fetchOwnedApps()
|
|||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
{{ $t('components.auth.Settings.table.yourApps.header.application') }}
|
||||
{{ t('components.auth.Settings.table.yourApps.header.application') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('components.auth.Settings.table.yourApps.header.scopes') }}
|
||||
{{ t('components.auth.Settings.table.yourApps.header.scopes') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('components.auth.Settings.table.yourApps.header.creationDate') }}
|
||||
{{ t('components.auth.Settings.table.yourApps.header.creationDate') }}
|
||||
</th>
|
||||
<th />
|
||||
</tr>
|
||||
|
|
@ -657,26 +657,26 @@ fetchOwnedApps()
|
|||
class="ui tiny success button"
|
||||
:to="{name: 'settings.applications.edit', params: {id: app.client_id}}"
|
||||
>
|
||||
{{ $t('components.auth.Settings.button.edit') }}
|
||||
{{ t('components.auth.Settings.button.edit') }}
|
||||
</router-link>
|
||||
<dangerous-button
|
||||
:class="['ui', 'tiny', 'danger', { loading: isDeleting.has(app.client_id) }, 'button']"
|
||||
@confirm="deleteApp(app.client_id)"
|
||||
>
|
||||
{{ $t('components.auth.Settings.button.remove') }}
|
||||
{{ t('components.auth.Settings.button.remove') }}
|
||||
<template #modal-header>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.modal.deleteApp.header', {app: app.name}) }}
|
||||
{{ t('components.auth.Settings.modal.deleteApp.header', {app: app.name}) }}
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-content>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.modal.deleteApp.content.warning') }}
|
||||
{{ t('components.auth.Settings.modal.deleteApp.content.warning') }}
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-confirm>
|
||||
<div>
|
||||
{{ $t('components.auth.Settings.button.removeApp') }}
|
||||
{{ t('components.auth.Settings.button.removeApp') }}
|
||||
</div>
|
||||
</template>
|
||||
</dangerous-button>
|
||||
|
|
@ -686,9 +686,9 @@ fetchOwnedApps()
|
|||
</table>
|
||||
<empty-state v-else>
|
||||
<template #title>
|
||||
{{ $t('components.auth.Settings.header.noPersonalApps') }}
|
||||
{{ t('components.auth.Settings.header.noPersonalApps') }}
|
||||
</template>
|
||||
{{ $t('components.auth.Settings.help.noPersonalApps') }}
|
||||
{{ t('components.auth.Settings.help.noPersonalApps') }}
|
||||
</empty-state>
|
||||
</section>
|
||||
|
||||
|
|
@ -700,17 +700,17 @@ fetchOwnedApps()
|
|||
<h2 class="ui header">
|
||||
<i class="code icon" />
|
||||
<div class="content">
|
||||
{{ $t('components.auth.Settings.header.plugins') }}
|
||||
{{ t('components.auth.Settings.header.plugins') }}
|
||||
</div>
|
||||
</h2>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.description.plugins') }}
|
||||
{{ t('components.auth.Settings.description.plugins') }}
|
||||
</p>
|
||||
<router-link
|
||||
class="ui success button"
|
||||
:to="{name: 'settings.plugins'}"
|
||||
>
|
||||
{{ $t('components.auth.Settings.link.managePlugins') }}
|
||||
{{ t('components.auth.Settings.link.managePlugins') }}
|
||||
</router-link>
|
||||
</section>
|
||||
<section class="ui text container">
|
||||
|
|
@ -718,14 +718,14 @@ fetchOwnedApps()
|
|||
<h2 class="ui header">
|
||||
<i class="comment icon" />
|
||||
<div class="content">
|
||||
{{ $t('components.auth.Settings.header.changeEmail') }}
|
||||
{{ t('components.auth.Settings.header.changeEmail') }}
|
||||
</div>
|
||||
</h2>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.description.changeEmail') }}
|
||||
{{ t('components.auth.Settings.description.changeEmail') }}
|
||||
</p>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.message.currentEmail', { email: $store.state.auth.profile?.email }) }}
|
||||
{{ t('components.auth.Settings.message.currentEmail', { email: $store.state.auth.profile?.email }) }}
|
||||
</p>
|
||||
<form
|
||||
class="ui form"
|
||||
|
|
@ -737,7 +737,7 @@ fetchOwnedApps()
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.auth.Settings.header.emailFailure') }}
|
||||
{{ t('components.auth.Settings.header.emailFailure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -749,7 +749,7 @@ fetchOwnedApps()
|
|||
</ul>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="new-email">{{ $t('components.auth.Settings.label.newEmail') }}</label>
|
||||
<label for="new-email">{{ t('components.auth.Settings.label.newEmail') }}</label>
|
||||
<input
|
||||
id="new-email"
|
||||
v-model="newEmail"
|
||||
|
|
@ -758,7 +758,7 @@ fetchOwnedApps()
|
|||
>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="current-password-field-email">{{ $t('components.auth.Settings.label.password') }}</label>
|
||||
<label for="current-password-field-email">{{ t('components.auth.Settings.label.password') }}</label>
|
||||
<password-input
|
||||
v-model="emailPassword"
|
||||
field-id="current-password-field-email"
|
||||
|
|
@ -769,7 +769,7 @@ fetchOwnedApps()
|
|||
type="submit"
|
||||
class="ui button"
|
||||
>
|
||||
{{ $t('components.auth.Settings.button.update') }}
|
||||
{{ t('components.auth.Settings.button.update') }}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
|
@ -778,17 +778,17 @@ fetchOwnedApps()
|
|||
<h2 class="ui header">
|
||||
<i class="trash icon" />
|
||||
<div class="content">
|
||||
{{ $t('components.auth.Settings.header.deleteAccount') }}
|
||||
{{ t('components.auth.Settings.header.deleteAccount') }}
|
||||
</div>
|
||||
</h2>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.description.deleteAccount') }}
|
||||
{{ t('components.auth.Settings.description.deleteAccount') }}
|
||||
</p>
|
||||
<div
|
||||
role="alert"
|
||||
class="ui warning message"
|
||||
>
|
||||
{{ $t('components.auth.Settings.warning.deleteAccount') }}
|
||||
{{ t('components.auth.Settings.warning.deleteAccount') }}
|
||||
</div>
|
||||
<div class="ui form">
|
||||
<div
|
||||
|
|
@ -797,7 +797,7 @@ fetchOwnedApps()
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.auth.Settings.header.accountFailure') }}
|
||||
{{ t('components.auth.Settings.header.accountFailure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -809,7 +809,7 @@ fetchOwnedApps()
|
|||
</ul>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="current-password-field">{{ $t('components.auth.Settings.label.currentPassword') }}</label>
|
||||
<label for="current-password-field">{{ t('components.auth.Settings.label.currentPassword') }}</label>
|
||||
<password-input
|
||||
v-model="deleteAccountPassword"
|
||||
field-id="current-password-field"
|
||||
|
|
@ -820,22 +820,22 @@ fetchOwnedApps()
|
|||
:class="['ui', {'loading': isDeletingAccount}, {disabled: !deleteAccountPassword}, {danger: deleteAccountPassword}, 'button']"
|
||||
:action="deleteAccount"
|
||||
>
|
||||
{{ $t('components.auth.Settings.button.deleteAccount') }}
|
||||
{{ t('components.auth.Settings.button.deleteAccount') }}
|
||||
<template #modal-header>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.modal.deleteAccount.header') }}
|
||||
{{ t('components.auth.Settings.modal.deleteAccount.header') }}
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-content>
|
||||
<div>
|
||||
<p>
|
||||
{{ $t('components.auth.Settings.modal.deleteAccount.content.warning') }}
|
||||
{{ t('components.auth.Settings.modal.deleteAccount.content.warning') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #modal-confirm>
|
||||
<div>
|
||||
{{ $t('components.auth.Settings.button.deleteAccountConfirm') }}
|
||||
{{ t('components.auth.Settings.button.deleteAccountConfirm') }}
|
||||
</div>
|
||||
</template>
|
||||
</dangerous-button>
|
||||
|
|
|
|||
|
|
@ -88,14 +88,14 @@ fetchInstanceSettings()
|
|||
<div v-if="submitted">
|
||||
<div class="ui success message">
|
||||
<p v-if="signupRequiresApproval">
|
||||
{{ $t('components.auth.SignupForm.message.awaitingReview') }}
|
||||
{{ t('components.auth.SignupForm.message.awaitingReview') }}
|
||||
</p>
|
||||
<p v-else>
|
||||
{{ $t('components.auth.SignupForm.message.accountCreated') }}
|
||||
{{ t('components.auth.SignupForm.message.accountCreated') }}
|
||||
</p>
|
||||
</div>
|
||||
<h2>
|
||||
{{ $t('components.auth.SignupForm.header.login') }}
|
||||
{{ t('components.auth.SignupForm.header.login') }}
|
||||
</h2>
|
||||
<login-form
|
||||
button-classes="basic success"
|
||||
|
|
@ -111,13 +111,13 @@ fetchInstanceSettings()
|
|||
v-if="!$store.state.instance.settings.users.registration_enabled.value"
|
||||
class="ui message"
|
||||
>
|
||||
{{ $t('components.auth.SignupForm.message.registrationClosed') }}
|
||||
{{ t('components.auth.SignupForm.message.registrationClosed') }}
|
||||
</p>
|
||||
<p
|
||||
v-else-if="signupRequiresApproval"
|
||||
class="ui message"
|
||||
>
|
||||
{{ $t('components.auth.SignupForm.message.requiresReview') }}
|
||||
{{ t('components.auth.SignupForm.message.requiresReview') }}
|
||||
</p>
|
||||
<template v-if="formCustomization?.help_text">
|
||||
<rendered-description
|
||||
|
|
@ -133,7 +133,7 @@ fetchInstanceSettings()
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.auth.SignupForm.header.signupFailure') }}
|
||||
{{ t('components.auth.SignupForm.header.signupFailure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -145,7 +145,7 @@ fetchInstanceSettings()
|
|||
</ul>
|
||||
</div>
|
||||
<div class="required field">
|
||||
<label for="username-field">{{ $t('components.auth.SignupForm.label.username') }}</label>
|
||||
<label for="username-field">{{ t('components.auth.SignupForm.label.username') }}</label>
|
||||
<input
|
||||
id="username-field"
|
||||
ref="username"
|
||||
|
|
@ -158,7 +158,7 @@ fetchInstanceSettings()
|
|||
>
|
||||
</div>
|
||||
<div class="required field">
|
||||
<label for="email-field">{{ $t('components.auth.SignupForm.label.email') }}</label>
|
||||
<label for="email-field">{{ t('components.auth.SignupForm.label.email') }}</label>
|
||||
<input
|
||||
id="email-field"
|
||||
ref="email"
|
||||
|
|
@ -170,7 +170,7 @@ fetchInstanceSettings()
|
|||
>
|
||||
</div>
|
||||
<div class="required field">
|
||||
<label for="password-field">{{ $t('components.auth.SignupForm.label.password') }}</label>
|
||||
<label for="password-field">{{ t('components.auth.SignupForm.label.password') }}</label>
|
||||
<password-input
|
||||
v-model="payload.password1"
|
||||
field-id="password-field"
|
||||
|
|
@ -180,7 +180,7 @@ fetchInstanceSettings()
|
|||
v-if="!$store.state.instance.settings.users.registration_enabled.value"
|
||||
class="required field"
|
||||
>
|
||||
<label for="invitation-code">{{ $t('components.auth.SignupForm.label.invitation') }}</label>
|
||||
<label for="invitation-code">{{ t('components.auth.SignupForm.label.invitation') }}</label>
|
||||
<input
|
||||
id="invitation-code"
|
||||
v-model="payload.invitation"
|
||||
|
|
@ -217,7 +217,7 @@ fetchInstanceSettings()
|
|||
:class="['ui', buttonClasses, {'loading': isLoading}, ' right floated button']"
|
||||
type="submit"
|
||||
>
|
||||
{{ $t('components.auth.SignupForm.button.create') }}
|
||||
{{ t('components.auth.SignupForm.button.create') }}
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -82,26 +82,26 @@ fetchToken()
|
|||
@submit.prevent="requestNewToken()"
|
||||
>
|
||||
<h2>
|
||||
{{ $t('components.auth.SubsonicTokenForm.header.subsonic') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.header.subsonic') }}
|
||||
</h2>
|
||||
<p
|
||||
v-if="!subsonicEnabled"
|
||||
class="ui message"
|
||||
>
|
||||
{{ $t('components.auth.SubsonicTokenForm.message.unavailable') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.message.unavailable') }}
|
||||
</p>
|
||||
<p>
|
||||
{{ $t('components.auth.SubsonicTokenForm.description.subsonic.paragraph1') }} {{ $t('components.auth.SubsonicTokenForm.description.subsonic.paragraph2') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.description.subsonic.paragraph1') }} {{ t('components.auth.SubsonicTokenForm.description.subsonic.paragraph2') }}
|
||||
</p>
|
||||
<p>
|
||||
{{ $t('components.auth.SubsonicTokenForm.description.subsonic.paragraph3') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.description.subsonic.paragraph3') }}
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
href="https://docs.funkwhale.audio/users/apps.html#subsonic-compatible-clients"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t('components.auth.SubsonicTokenForm.link.apps') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.link.apps') }}
|
||||
</a>
|
||||
</p>
|
||||
<div
|
||||
|
|
@ -118,7 +118,7 @@ fetchToken()
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.auth.SubsonicTokenForm.header.error') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.header.error') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -152,20 +152,20 @@ fetchToken()
|
|||
:class="['ui', {'loading': isLoading}, 'button']"
|
||||
:action="requestNewToken"
|
||||
>
|
||||
{{ $t('components.auth.SubsonicTokenForm.button.newPassword') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.button.newPassword') }}
|
||||
<template #modal-header>
|
||||
<p>
|
||||
{{ $t('components.auth.SubsonicTokenForm.modal.newPassword.header') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.modal.newPassword.header') }}
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-content>
|
||||
<p>
|
||||
{{ $t('components.auth.SubsonicTokenForm.modal.newPassword.content.warning') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.modal.newPassword.content.warning') }}
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-confirm>
|
||||
<div>
|
||||
{{ $t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
|
||||
</div>
|
||||
</template>
|
||||
</dangerous-button>
|
||||
|
|
@ -175,27 +175,27 @@ fetchToken()
|
|||
:class="['ui', {'loading': isLoading}, 'button']"
|
||||
@click="requestNewToken"
|
||||
>
|
||||
{{ $t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
|
||||
</button>
|
||||
<dangerous-button
|
||||
v-if="token"
|
||||
:class="['ui', {'loading': isLoading}, 'warning', 'button']"
|
||||
:action="disable"
|
||||
>
|
||||
{{ $t('components.auth.SubsonicTokenForm.button.disable') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.button.disable') }}
|
||||
<template #modal-header>
|
||||
<p>
|
||||
{{ $t('components.auth.SubsonicTokenForm.modal.disableSubsonic.header') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.modal.disableSubsonic.header') }}
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-content>
|
||||
<p>
|
||||
{{ $t('components.auth.SubsonicTokenForm.modal.disableSubsonic.content.warning') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.modal.disableSubsonic.content.warning') }}
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-confirm>
|
||||
<div>
|
||||
{{ $t('components.auth.SubsonicTokenForm.button.confirmDisable') }}
|
||||
{{ t('components.auth.SubsonicTokenForm.button.confirmDisable') }}
|
||||
</div>
|
||||
</template>
|
||||
</dangerous-button>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import type { BackendError, Channel } from '~/types'
|
||||
|
||||
import { computed, watch, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import axios from 'axios'
|
||||
|
||||
interface Events {
|
||||
|
|
@ -14,6 +15,8 @@ interface Props {
|
|||
channel: Channel
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = defineProps<Props>()
|
||||
|
||||
|
|
@ -59,7 +62,7 @@ defineExpose({
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.channels.AlbumForm.header.error') }}
|
||||
{{ t('components.channels.AlbumForm.header.error') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -72,7 +75,7 @@ defineExpose({
|
|||
</div>
|
||||
<div class="ui required field">
|
||||
<label for="album-title">
|
||||
{{ $t('components.channels.AlbumForm.label.albumTitle') }}
|
||||
{{ t('components.channels.AlbumForm.label.albumTitle') }}
|
||||
</label>
|
||||
<input
|
||||
v-model="title"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import type { Channel } from '~/types'
|
|||
import SemanticModal from '~/components/semantic/Modal.vue'
|
||||
import ChannelAlbumForm from '~/components/channels/AlbumForm.vue'
|
||||
import { watch, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Events {
|
||||
(e: 'created'): void
|
||||
|
|
@ -12,6 +13,8 @@ interface Props {
|
|||
channel: Channel
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
defineProps<Props>()
|
||||
|
||||
|
|
@ -37,10 +40,10 @@ defineExpose({
|
|||
>
|
||||
<h4 class="header">
|
||||
<span v-if="channel.content_category === 'podcast'">
|
||||
{{ $t('components.channels.AlbumModal.header.newSeries') }}
|
||||
{{ t('components.channels.AlbumModal.header.newSeries') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.channels.AlbumModal.header.newAlbum') }}
|
||||
{{ t('components.channels.AlbumModal.header.newAlbum') }}
|
||||
</span>
|
||||
</h4>
|
||||
<div class="scrolling content">
|
||||
|
|
@ -54,14 +57,14 @@ defineExpose({
|
|||
</div>
|
||||
<div class="actions">
|
||||
<button class="ui basic cancel button">
|
||||
{{ $t('components.channels.AlbumModal.button.cancel') }}
|
||||
{{ t('components.channels.AlbumModal.button.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
:class="['ui', 'primary', {loading: isLoading}, 'button']"
|
||||
:disabled="!submittable"
|
||||
@click.stop.prevent="albumForm.submit()"
|
||||
>
|
||||
{{ $t('components.channels.AlbumModal.button.create') }}
|
||||
{{ t('components.channels.AlbumModal.button.create') }}
|
||||
</button>
|
||||
</div>
|
||||
</semantic-modal>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import type { Album, Channel } from '~/types'
|
|||
import axios from 'axios'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Events {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
|
|
@ -14,6 +15,8 @@ interface Props {
|
|||
channel: Channel | null
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: null,
|
||||
|
|
@ -48,10 +51,10 @@ watch(() => props.channel, fetchData, { immediate: true })
|
|||
<div>
|
||||
<label for="album-dropdown">
|
||||
<span v-if="channel && channel.artist && channel.artist.content_category === 'podcast'">
|
||||
{{ $t('components.channels.AlbumSelect.label.series') }}
|
||||
{{ t('components.channels.AlbumSelect.label.series') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.channels.AlbumSelect.label.album') }}
|
||||
{{ t('components.channels.AlbumSelect.label.album') }}
|
||||
</span>
|
||||
</label>
|
||||
<select
|
||||
|
|
@ -60,7 +63,7 @@ watch(() => props.channel, fetchData, { immediate: true })
|
|||
class="ui search normal dropdown"
|
||||
>
|
||||
<option value="">
|
||||
{{ $t('components.channels.AlbumSelect.option.none') }}
|
||||
{{ t('components.channels.AlbumSelect.option.none') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="album in albums"
|
||||
|
|
@ -69,7 +72,7 @@ watch(() => props.channel, fetchData, { immediate: true })
|
|||
>
|
||||
{{ album.title }}
|
||||
<span>
|
||||
{{ $t('components.channels.AlbumSelect.meta.tracks', album.tracks_count) }}
|
||||
{{ t('components.channels.AlbumSelect.meta.tracks', album.tracks_count) }}
|
||||
</span>
|
||||
</option>
|
||||
</select>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import type { License } from '~/types'
|
|||
import { computed, reactive, ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Events {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
|
|
@ -13,6 +14,8 @@ interface Props {
|
|||
modelValue: string | null
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: null
|
||||
|
|
@ -55,7 +58,7 @@ fetchLicenses()
|
|||
<template>
|
||||
<div>
|
||||
<label for="license-dropdown">
|
||||
{{ $t('components.channels.LicenseSelect.label.license') }}
|
||||
{{ t('components.channels.LicenseSelect.label.license') }}
|
||||
</label>
|
||||
<select
|
||||
id="license-dropdown"
|
||||
|
|
@ -63,7 +66,7 @@ fetchLicenses()
|
|||
class="ui search normal dropdown"
|
||||
>
|
||||
<option value="">
|
||||
{{ $t('components.channels.LicenseSelect.option.none') }}
|
||||
{{ t('components.channels.LicenseSelect.option.none') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="l in featuredLicenses"
|
||||
|
|
@ -84,7 +87,7 @@ fetchLicenses()
|
|||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
{{ $t('components.channels.LicenseSelect.link.license') }}
|
||||
{{ t('components.channels.LicenseSelect.link.license') }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ import type { Channel } from '~/types'
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
import LoginModal from '~/components/common/LoginModal.vue'
|
||||
|
||||
|
|
@ -44,7 +47,7 @@ const loginModal = ref()
|
|||
|
||||
<template>
|
||||
<button
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
:class="['ui', 'pink', {'inverted': isSubscribed}, {'favorited': isSubscribed}, 'icon', 'labeled', 'button']"
|
||||
@click.stop="toggle"
|
||||
>
|
||||
|
|
@ -61,7 +64,7 @@ const loginModal = ref()
|
|||
<login-modal
|
||||
ref="loginModal"
|
||||
class="small"
|
||||
:next-route="$route.fullPath"
|
||||
:next-route="route.fullPath"
|
||||
:message="message.authMessage"
|
||||
:cover="channel.artist?.cover!"
|
||||
@created="loginModal.show = false"
|
||||
|
|
|
|||
|
|
@ -440,7 +440,7 @@ defineExpose({
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.channels.UploadForm.header.error') }}
|
||||
{{ t('components.channels.UploadForm.header.error') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -453,7 +453,7 @@ defineExpose({
|
|||
</div>
|
||||
<div :class="['ui', 'required', {hidden: step > 1}, 'field']">
|
||||
<label for="channel-dropdown">
|
||||
{{ $t('components.channels.UploadForm.label.channel') }}
|
||||
{{ t('components.channels.UploadForm.label.channel') }}
|
||||
</label>
|
||||
<div
|
||||
id="channel-dropdown"
|
||||
|
|
@ -476,7 +476,7 @@ defineExpose({
|
|||
<div class="content">
|
||||
<p>
|
||||
<i class="copyright icon" />
|
||||
{{ $t('components.channels.UploadForm.help.license') }}
|
||||
{{ t('components.channels.UploadForm.help.license') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -489,7 +489,7 @@ defineExpose({
|
|||
<div class="content">
|
||||
<p>
|
||||
<i class="warning icon" />
|
||||
{{ $t('components.channels.UploadForm.warning.quota') }}
|
||||
{{ t('components.channels.UploadForm.warning.quota') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -500,19 +500,19 @@ defineExpose({
|
|||
>
|
||||
<p>
|
||||
<i class="redo icon" />
|
||||
{{ $t('components.channels.UploadForm.message.pending') }}
|
||||
{{ t('components.channels.UploadForm.message.pending') }}
|
||||
</p>
|
||||
<button
|
||||
class="ui basic button"
|
||||
@click.stop.prevent="includeDraftUploads = false"
|
||||
>
|
||||
{{ $t('components.channels.UploadForm.button.ignore') }}
|
||||
{{ t('components.channels.UploadForm.button.ignore') }}
|
||||
</button>
|
||||
<button
|
||||
class="ui basic button"
|
||||
@click.stop.prevent="includeDraftUploads = true"
|
||||
>
|
||||
{{ $t('components.channels.UploadForm.button.resume') }}
|
||||
{{ t('components.channels.UploadForm.button.resume') }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -564,13 +564,13 @@ defineExpose({
|
|||
</template>
|
||||
<template v-else>
|
||||
<span v-if="file.active">
|
||||
{{ $t('components.channels.UploadForm.status.uploading') }}
|
||||
{{ t('components.channels.UploadForm.status.uploading') }}
|
||||
</span>
|
||||
<span v-else-if="file.error">
|
||||
{{ $t('components.channels.UploadForm.status.errored') }}
|
||||
{{ t('components.channels.UploadForm.status.errored') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.channels.UploadForm.status.pending') }}
|
||||
{{ t('components.channels.UploadForm.status.pending') }}
|
||||
</span>
|
||||
<span class="middle middledot symbol" />
|
||||
{{ humanSize(file.size ?? 0) }}
|
||||
|
|
@ -580,12 +580,12 @@ defineExpose({
|
|||
</template>
|
||||
<span class="middle middledot symbol" />
|
||||
<a @click.stop.prevent="remove(file)">
|
||||
{{ $t('components.channels.UploadForm.button.remove') }}
|
||||
{{ t('components.channels.UploadForm.button.remove') }}
|
||||
</a>
|
||||
<template v-if="file.error">
|
||||
<span class="middle middledot symbol" />
|
||||
<a @click.stop.prevent="retry(file)">
|
||||
{{ $t('components.channels.UploadForm.button.retry') }}
|
||||
{{ t('components.channels.UploadForm.button.retry') }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -604,7 +604,7 @@ defineExpose({
|
|||
<div class="content">
|
||||
<p>
|
||||
<i class="info icon" />
|
||||
{{ $t('components.channels.UploadForm.description.extensions', {extensions: $store.state.ui.supportedExtensions.join(', ')}) }}
|
||||
{{ t('components.channels.UploadForm.description.extensions', {extensions: $store.state.ui.supportedExtensions.join(', ')}) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -617,11 +617,11 @@ defineExpose({
|
|||
>
|
||||
<div>
|
||||
<i class="upload icon" />
|
||||
{{ $t('components.channels.UploadForm.message.dragAndDrop') }}
|
||||
{{ t('components.channels.UploadForm.message.dragAndDrop') }}
|
||||
</div>
|
||||
<div class="ui very small divider" />
|
||||
<div>
|
||||
{{ $t('components.channels.UploadForm.label.openBrowser') }}
|
||||
{{ t('components.channels.UploadForm.label.openBrowser') }}
|
||||
</div>
|
||||
</file-upload-widget>
|
||||
<div class="ui hidden divider" />
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import type { Upload, Track } from '~/types'
|
||||
|
||||
import { reactive, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import TagsSelector from '~/components/library/TagsSelector.vue'
|
||||
import AttachmentInput from '~/components/common/AttachmentInput.vue'
|
||||
|
|
@ -16,6 +17,8 @@ interface Props {
|
|||
values: Partial<Values> | null
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
values: null
|
||||
|
|
@ -37,7 +40,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
|
|||
<div :class="['ui', {loading: isLoading}, 'form']">
|
||||
<div class="ui required field">
|
||||
<label for="upload-title">
|
||||
{{ $t('components.channels.UploadMetadataForm.label.title') }}
|
||||
{{ t('components.channels.UploadMetadataForm.label.title') }}
|
||||
</label>
|
||||
<input
|
||||
v-model="newValues.title"
|
||||
|
|
@ -48,13 +51,13 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
|
|||
v-model="newValues.cover"
|
||||
@delete="newValues.cover = ''"
|
||||
>
|
||||
{{ $t('components.channels.UploadMetadataForm.label.image') }}
|
||||
{{ t('components.channels.UploadMetadataForm.label.image') }}
|
||||
</attachment-input>
|
||||
<div class="ui small hidden divider" />
|
||||
<div class="ui two fields">
|
||||
<div class="ui field">
|
||||
<label for="upload-tags">
|
||||
{{ $t('components.channels.UploadMetadataForm.label.tags') }}
|
||||
{{ t('components.channels.UploadMetadataForm.label.tags') }}
|
||||
</label>
|
||||
<tags-selector
|
||||
id="upload-tags"
|
||||
|
|
@ -64,7 +67,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
|
|||
</div>
|
||||
<div class="ui field">
|
||||
<label for="upload-position">
|
||||
{{ $t('components.channels.UploadMetadataForm.label.position') }}
|
||||
{{ t('components.channels.UploadMetadataForm.label.position') }}
|
||||
</label>
|
||||
<input
|
||||
v-model="newValues.position"
|
||||
|
|
@ -76,7 +79,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
|
|||
</div>
|
||||
<div class="ui field">
|
||||
<label for="upload-description">
|
||||
{{ $t('components.channels.UploadMetadataForm.label.description') }}
|
||||
{{ t('components.channels.UploadMetadataForm.label.description') }}
|
||||
</label>
|
||||
<content-form
|
||||
v-model="newValues.description"
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const statusInfo = computed(() => {
|
|||
const step = ref(1)
|
||||
const isLoading = ref(false)
|
||||
|
||||
const dropdownOpen = ref(false)
|
||||
const open = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -59,16 +59,16 @@ const dropdownOpen = ref(false)
|
|||
>
|
||||
<h4 class="header">
|
||||
<span v-if="step === 1">
|
||||
{{ $t('components.channels.UploadModal.header.publish') }}
|
||||
{{ t('components.channels.UploadModal.header.publish') }}
|
||||
</span>
|
||||
<span v-else-if="step === 2">
|
||||
{{ $t('components.channels.UploadModal.header.uploadFiles') }}
|
||||
{{ t('components.channels.UploadModal.header.uploadFiles') }}
|
||||
</span>
|
||||
<span v-else-if="step === 3">
|
||||
{{ $t('components.channels.UploadModal.header.uploadDetails') }}
|
||||
{{ t('components.channels.UploadModal.header.uploadDetails') }}
|
||||
</span>
|
||||
<span v-else-if="step === 4">
|
||||
{{ $t('components.channels.UploadModal.header.processing') }}
|
||||
{{ t('components.channels.UploadModal.header.processing') }}
|
||||
</span>
|
||||
</h4>
|
||||
<div class="scrolling content">
|
||||
|
|
@ -87,7 +87,7 @@ const dropdownOpen = ref(false)
|
|||
</template>
|
||||
<div class="ui very small hidden divider" />
|
||||
<template v-if="statusData && statusData.quotaStatus">
|
||||
{{ $t('components.channels.UploadModal.meta.quota', humanSize((statusData.quotaStatus.remaining - statusData.uploadedSize) * 1000 * 1000)) }}
|
||||
{{ t('components.channels.UploadModal.meta.quota', humanSize((statusData.quotaStatus.remaining - statusData.uploadedSize) * 1000 * 1000)) }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="ui hidden clearing divider mobile-only" />
|
||||
|
|
@ -97,7 +97,7 @@ const dropdownOpen = ref(false)
|
|||
variant="outline"
|
||||
@click="update(false)"
|
||||
>
|
||||
{{ $t('components.channels.UploadModal.button.cancel') }}
|
||||
{{ t('components.channels.UploadModal.button.cancel') }}
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="step < 3"
|
||||
|
|
@ -105,21 +105,21 @@ const dropdownOpen = ref(false)
|
|||
variant="outline"
|
||||
@click.stop.prevent="uploadForm.step -= 1"
|
||||
>
|
||||
{{ $t('components.channels.UploadModal.button.previous') }}
|
||||
{{ t('components.channels.UploadModal.button.previous') }}
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="step === 3"
|
||||
color="secondary"
|
||||
@click.stop.prevent="uploadForm.step -= 1"
|
||||
>
|
||||
{{ $t('components.channels.UploadModal.button.update') }}
|
||||
{{ t('components.channels.UploadModal.button.update') }}
|
||||
</Button>
|
||||
<Button
|
||||
v-if="step === 1"
|
||||
color="secondary"
|
||||
@click.stop.prevent="uploadForm.step += 1"
|
||||
>
|
||||
{{ $t('components.channels.UploadModal.button.next') }}
|
||||
{{ t('components.channels.UploadModal.button.next') }}
|
||||
</Button>
|
||||
<div class="ui primary buttons">
|
||||
<Button
|
||||
|
|
@ -128,10 +128,10 @@ const dropdownOpen = ref(false)
|
|||
:disabled="!statusData?.canSubmit"
|
||||
@click.prevent.stop="uploadForm.publish"
|
||||
>
|
||||
{{ $t('components.channels.UploadModal.button.publish') }}
|
||||
{{ t('components.channels.UploadModal.button.publish') }}
|
||||
</Button>
|
||||
|
||||
<Popover v-model:open="dropdownOpen">
|
||||
<Popover v-model:open="open">
|
||||
<template #default="{ toggleOpen }">
|
||||
<Button
|
||||
color="primary"
|
||||
|
|
@ -142,7 +142,7 @@ const dropdownOpen = ref(false)
|
|||
</template>
|
||||
<template #items>
|
||||
<PopoverItem @click="update(false)">
|
||||
{{ $t('components.channels.UploadModal.button.finishLater') }}
|
||||
{{ t('components.channels.UploadModal.button.finishLater') }}
|
||||
</PopoverItem>
|
||||
</template>
|
||||
</Popover>
|
||||
|
|
@ -153,7 +153,7 @@ const dropdownOpen = ref(false)
|
|||
color="secondary"
|
||||
@click="update(false)"
|
||||
>
|
||||
{{ $t('components.channels.UploadModal.button.close') }}
|
||||
{{ t('components.channels.UploadModal.button.close') }}
|
||||
</Button>
|
||||
</div>
|
||||
</semantic-modal>
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ const launchAction = async () => {
|
|||
class="right floated"
|
||||
>
|
||||
<span v-if="needsRefresh">
|
||||
{{ $t('components.common.ActionTable.message.needsRefresh') }}
|
||||
{{ t('components.common.ActionTable.message.needsRefresh') }}
|
||||
</span>
|
||||
<button
|
||||
class="ui basic icon button"
|
||||
|
|
@ -185,7 +185,7 @@ const launchAction = async () => {
|
|||
>
|
||||
<div class="ui inline fields">
|
||||
<div class="field">
|
||||
<label for="actions-select">{{ $t('components.common.ActionTable.label.actions') }}</label>
|
||||
<label for="actions-select">{{ t('components.common.ActionTable.label.actions') }}</label>
|
||||
<select
|
||||
id="actions-select"
|
||||
v-model="currentActionName"
|
||||
|
|
@ -208,11 +208,11 @@ const launchAction = async () => {
|
|||
:aria-label="labels.performAction"
|
||||
@confirm="launchAction"
|
||||
>
|
||||
{{ $t('components.common.ActionTable.button.go') }}
|
||||
{{ t('components.common.ActionTable.button.go') }}
|
||||
<template #modal-header>
|
||||
<p>
|
||||
<span key="1">
|
||||
{{ $t('components.common.ActionTable.modal.performAction.header', { action: currentActionName }, affectedObjectsCount) }}
|
||||
{{ t('components.common.ActionTable.modal.performAction.header', { action: currentActionName }, affectedObjectsCount) }}
|
||||
</span>
|
||||
</p>
|
||||
</template>
|
||||
|
|
@ -222,13 +222,13 @@ const launchAction = async () => {
|
|||
{{ currentAction?.confirmationMessage }}
|
||||
</template>
|
||||
<span v-else>
|
||||
{{ $t('components.common.ActionTable.modal.performAction.content.warning') }}
|
||||
{{ t('components.common.ActionTable.modal.performAction.content.warning') }}
|
||||
</span>
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-confirm>
|
||||
<div :aria-label="labels.performAction">
|
||||
{{ $t('components.common.ActionTable.button.launch') }}
|
||||
{{ t('components.common.ActionTable.button.launch') }}
|
||||
</div>
|
||||
</template>
|
||||
</dangerous-button>
|
||||
|
|
@ -239,15 +239,15 @@ const launchAction = async () => {
|
|||
:class="['ui', {disabled: checked.length === 0}, {'loading': isLoading}, 'button']"
|
||||
@click="launchAction"
|
||||
>
|
||||
{{ $t('components.common.ActionTable.button.go') }}
|
||||
{{ t('components.common.ActionTable.button.go') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="count field">
|
||||
<span v-if="selectAll">
|
||||
{{ $t('components.common.ActionTable.button.allSelected', objectsData.count) }}
|
||||
{{ t('components.common.ActionTable.button.allSelected', objectsData.count) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.common.ActionTable.button.selected', { total: objectsData.count }, checked.length) }}
|
||||
{{ t('components.common.ActionTable.button.selected', { total: objectsData.count }, checked.length) }}
|
||||
</span>
|
||||
<template v-if="currentAction?.allowAll && checkable.length > 0 && checkable.length === checked.length">
|
||||
<a
|
||||
|
|
@ -256,7 +256,7 @@ const launchAction = async () => {
|
|||
@click.prevent="selectAll = true"
|
||||
>
|
||||
<span key="3">
|
||||
{{ $t('components.common.ActionTable.button.selectElement', objectsData.count) }}
|
||||
{{ t('components.common.ActionTable.button.selectElement', objectsData.count) }}
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
|
|
@ -265,7 +265,7 @@ const launchAction = async () => {
|
|||
@click.prevent="selectAll = false"
|
||||
>
|
||||
<span key="4">
|
||||
{{ $t('components.common.ActionTable.button.selectCurrentPage') }}
|
||||
{{ t('components.common.ActionTable.button.selectCurrentPage') }}
|
||||
</span>
|
||||
</a>
|
||||
</template>
|
||||
|
|
@ -277,7 +277,7 @@ const launchAction = async () => {
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.common.ActionTable.header.error') }}
|
||||
{{ t('components.common.ActionTable.header.error') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -294,7 +294,7 @@ const launchAction = async () => {
|
|||
>
|
||||
<p>
|
||||
<span>
|
||||
{{ $t('components.common.ActionTable.message.success', { action: result.action }, result.updated) }}
|
||||
{{ t('components.common.ActionTable.message.success', { action: result.action }, result.updated) }}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import axios from 'axios'
|
|||
import { useVModel } from '@vueuse/core'
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import useFormData from '~/composables/useFormData'
|
||||
|
||||
interface Events {
|
||||
|
|
@ -20,6 +21,8 @@ interface Props {
|
|||
initialValue?: string | undefined
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
imageClass: '',
|
||||
|
|
@ -107,7 +110,7 @@ const getAttachmentUrl = (uuid: string) => {
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.common.AttachmentInput.header.failure') }}
|
||||
{{ t('components.common.AttachmentInput.header.failure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -144,7 +147,7 @@ const getAttachmentUrl = (uuid: string) => {
|
|||
<div class="eleven wide column">
|
||||
<div class="file-input">
|
||||
<label :for="attachmentId">
|
||||
{{ $t('components.common.AttachmentInput.label.upload') }}
|
||||
{{ t('components.common.AttachmentInput.label.upload') }}
|
||||
</label>
|
||||
<input
|
||||
:id="attachmentId"
|
||||
|
|
@ -159,21 +162,21 @@ const getAttachmentUrl = (uuid: string) => {
|
|||
</div>
|
||||
<div class="ui very small hidden divider" />
|
||||
<p>
|
||||
{{ $t('components.common.AttachmentInput.help.upload') }}
|
||||
{{ t('components.common.AttachmentInput.help.upload') }}
|
||||
</p>
|
||||
<button
|
||||
v-if="value"
|
||||
class="ui basic tiny button"
|
||||
@click.stop.prevent="remove(value as string)"
|
||||
>
|
||||
{{ $t('components.common.AttachmentInput.button.remove') }}
|
||||
{{ t('components.common.AttachmentInput.button.remove') }}
|
||||
</button>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="ui active inverted dimmer"
|
||||
>
|
||||
<div class="ui indeterminate text loader">
|
||||
{{ $t('components.common.AttachmentInput.loader.uploading') }}
|
||||
{{ t('components.common.AttachmentInput.loader.uploading') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Events {
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
|
|
@ -9,6 +10,8 @@ interface Props {
|
|||
modelValue: boolean
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = defineProps<Props>()
|
||||
const value = useVModel(props, 'modelValue', emit)
|
||||
|
|
@ -21,10 +24,10 @@ const value = useVModel(props, 'modelValue', emit)
|
|||
@click.prevent="value = !value"
|
||||
>
|
||||
<span v-if="value">
|
||||
{{ $t('components.common.CollapseLink.button.expand') }}
|
||||
{{ t('components.common.CollapseLink.button.expand') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.common.CollapseLink.button.collapse') }}
|
||||
{{ t('components.common.CollapseLink.button.collapse') }}
|
||||
</span>
|
||||
<i :class="[{ down: !value, right: value }, 'angle', 'icon']" />
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -90,13 +90,13 @@ onMounted(async () => {
|
|||
:class="[{active: !isPreviewing}, 'item']"
|
||||
@click.prevent="isPreviewing = false"
|
||||
>
|
||||
{{ $t('components.common.ContentForm.button.write') }}
|
||||
{{ t('components.common.ContentForm.button.write') }}
|
||||
</button>
|
||||
<button
|
||||
:class="[{active: isPreviewing}, 'item']"
|
||||
@click.prevent="isPreviewing = true"
|
||||
>
|
||||
{{ $t('components.common.ContentForm.button.preview') }}
|
||||
{{ t('components.common.ContentForm.button.preview') }}
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="isPreviewing">
|
||||
|
|
@ -112,7 +112,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
<p v-else-if="!preview">
|
||||
{{ $t('components.common.ContentForm.empty.noContent') }}
|
||||
{{ t('components.common.ContentForm.empty.noContent') }}
|
||||
</p>
|
||||
<sanitized-html
|
||||
v-else
|
||||
|
|
@ -139,7 +139,7 @@ onMounted(async () => {
|
|||
{{ remainingChars }}
|
||||
</span>
|
||||
<p>
|
||||
{{ $t('components.common.ContentForm.help.markdown') }}
|
||||
{{ t('components.common.ContentForm.help.markdown') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { toRefs, useClipboard } from '@vueuse/core'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Props {
|
||||
value: string
|
||||
|
|
@ -12,6 +13,8 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
id: 'copy-input'
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const { value } = toRefs(props)
|
||||
const { copy, isSupported: canCopy, copied } = useClipboard({ source: value, copiedDuring: 5000 })
|
||||
</script>
|
||||
|
|
@ -22,7 +25,7 @@ const { copy, isSupported: canCopy, copied } = useClipboard({ source: value, cop
|
|||
v-if="copied"
|
||||
class="message"
|
||||
>
|
||||
{{ $t('components.common.CopyInput.message.success') }}
|
||||
{{ t('components.common.CopyInput.message.success') }}
|
||||
</p>
|
||||
<input
|
||||
:id="id"
|
||||
|
|
@ -37,7 +40,7 @@ const { copy, isSupported: canCopy, copied } = useClipboard({ source: value, cop
|
|||
@click="copy()"
|
||||
>
|
||||
<i class="copy icon" />
|
||||
{{ $t('components.common.CopyInput.button.copy') }}
|
||||
{{ t('components.common.CopyInput.button.copy') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import SemanticModal from '~/components/semantic/Modal.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Events {
|
||||
(e: 'confirm'): void
|
||||
|
|
@ -13,6 +14,8 @@ interface Props {
|
|||
confirmColor?: 'destructive' | 'primary'
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
action: () => undefined,
|
||||
|
|
@ -44,7 +47,7 @@ const confirm = () => {
|
|||
>
|
||||
<h4 class="header">
|
||||
<slot name="modal-header">
|
||||
{{ $t('components.common.DangerousButton.header.confirm') }}
|
||||
{{ t('components.common.DangerousButton.header.confirm') }}
|
||||
</slot>
|
||||
</h4>
|
||||
<div class="scrolling content">
|
||||
|
|
@ -58,17 +61,17 @@ const confirm = () => {
|
|||
variant="outline"
|
||||
@click="showModal = false"
|
||||
>
|
||||
{{ $t('components.common.DangerousButton.button.cancel') }}
|
||||
{{ t('components.common.DangerousButton.button.cancel') }}
|
||||
</Button>
|
||||
<Button
|
||||
:color="confirmColor"
|
||||
@click="confirm"
|
||||
>
|
||||
<slot name="modal-confirm">
|
||||
{{ $t('components.common.DangerousButton.button.confirm') }}
|
||||
{{ t('components.common.DangerousButton.button.confirm') }}
|
||||
</slot>
|
||||
</Button>
|
||||
</div>
|
||||
</semantic-modal>
|
||||
</button>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import moment from 'moment'
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Props {
|
||||
seconds?: number
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
seconds: 0
|
||||
})
|
||||
|
|
@ -19,10 +22,10 @@ const duration = computed(() => {
|
|||
<template>
|
||||
<span>
|
||||
<span v-if="duration.hours > 0">
|
||||
{{ $t('components.common.Duration.meta.hours', duration) }}
|
||||
{{ t('components.common.Duration.meta.hours', duration) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.common.Duration.meta.minutes', duration) }}
|
||||
{{ t('components.common.Duration.meta.minutes', duration) }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
interface Events {
|
||||
(e: 'refresh'): void
|
||||
}
|
||||
|
|
@ -7,6 +10,8 @@ interface Props {
|
|||
refresh?: boolean
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
withDefaults(defineProps<Props>(), {
|
||||
refresh: false
|
||||
|
|
@ -19,7 +24,7 @@ withDefaults(defineProps<Props>(), {
|
|||
<div class="content">
|
||||
<slot name="title">
|
||||
<i class="search icon" />
|
||||
{{ $t('components.common.EmptyState.header.noResults') }}
|
||||
{{ t('components.common.EmptyState.header.noResults') }}
|
||||
</slot>
|
||||
</div>
|
||||
</h4>
|
||||
|
|
@ -30,7 +35,7 @@ withDefaults(defineProps<Props>(), {
|
|||
class="ui button"
|
||||
@click="emit('refresh')"
|
||||
>
|
||||
{{ $t('components.common.EmptyState.button.refresh') }}
|
||||
{{ t('components.common.EmptyState.button.refresh') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useToggle } from '@vueuse/core'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Props {
|
||||
content: string
|
||||
|
|
@ -11,6 +12,8 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
length: 150
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const [expanded, toggleExpanded] = useToggle(false)
|
||||
const truncated = computed(() => props.content.slice(0, props.length))
|
||||
</script>
|
||||
|
|
@ -27,10 +30,10 @@ const truncated = computed(() => props.content.slice(0, props.length))
|
|||
>
|
||||
<br>
|
||||
<span v-if="expanded">
|
||||
{{ $t('components.common.ExpandableDiv.button.less') }}
|
||||
{{ t('components.common.ExpandableDiv.button.less') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.common.ExpandableDiv.button.more') }}
|
||||
{{ t('components.common.ExpandableDiv.button.more') }}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ const search = () => {
|
|||
for="search-query"
|
||||
class="hidden"
|
||||
>
|
||||
{{ $t('components.common.InlineSearchBar.label.search') }}
|
||||
{{ t('components.common.InlineSearchBar.label.search') }}
|
||||
</label>
|
||||
<input
|
||||
id="search-query"
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import type { Cover } from '~/types'
|
|||
import SemanticModal from '~/components/semantic/Modal.vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
interface Props {
|
||||
nextRoute: RouteLocationRaw
|
||||
|
|
@ -14,6 +15,8 @@ interface Props {
|
|||
|
||||
defineProps<Props>()
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const show = ref(false)
|
||||
|
||||
const { t } = useI18n()
|
||||
|
|
@ -66,7 +69,7 @@ const labels = computed(() => ({
|
|||
{{ labels.login }}
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="$store.state.instance.settings.users.registration_enabled.value"
|
||||
v-if="store.state.instance.settings.users.registration_enabled.value"
|
||||
:to="{path: '/signup'}"
|
||||
class="ui labeled icon button"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import type { BackendError } from '~/types'
|
|||
|
||||
import { ref, computed } from 'vue'
|
||||
import { whenever } from '@vueuse/core'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import axios from 'axios'
|
||||
import clip from 'text-clipper'
|
||||
|
|
@ -21,6 +22,8 @@ interface Props {
|
|||
truncateLength?: number
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
content: null,
|
||||
|
|
@ -91,19 +94,19 @@ const submit = async () => {
|
|||
href=""
|
||||
@click.stop.prevent="showMore = true"
|
||||
>
|
||||
{{ $t('components.common.RenderedDescription.button.more') }}
|
||||
{{ t('components.common.RenderedDescription.button.more') }}
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
href=""
|
||||
@click.stop.prevent="showMore = false"
|
||||
>
|
||||
{{ $t('components.common.RenderedDescription.button.less') }}
|
||||
{{ t('components.common.RenderedDescription.button.less') }}
|
||||
</a>
|
||||
</template>
|
||||
</template>
|
||||
<p v-else-if="!isUpdating">
|
||||
{{ $t('components.common.RenderedDescription.empty.noDescription') }}
|
||||
{{ t('components.common.RenderedDescription.empty.noDescription') }}
|
||||
</p>
|
||||
<template v-if="!isUpdating && canUpdate && updateUrl">
|
||||
<div class="ui hidden divider" />
|
||||
|
|
@ -112,7 +115,7 @@ const submit = async () => {
|
|||
@click="isUpdating = true"
|
||||
>
|
||||
<i class="pencil icon" />
|
||||
{{ $t('components.common.RenderedDescription.button.edit') }}
|
||||
{{ t('components.common.RenderedDescription.button.edit') }}
|
||||
</span>
|
||||
</template>
|
||||
<form
|
||||
|
|
@ -126,7 +129,7 @@ const submit = async () => {
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.common.RenderedDescription.header.failure') }}
|
||||
{{ t('components.common.RenderedDescription.header.failure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -145,14 +148,14 @@ const submit = async () => {
|
|||
class="left floated"
|
||||
@click.prevent="isUpdating = false"
|
||||
>
|
||||
{{ $t('components.common.RenderedDescription.button.cancel') }}
|
||||
{{ t('components.common.RenderedDescription.button.cancel') }}
|
||||
</a>
|
||||
<button
|
||||
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
|
||||
type="submit"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
{{ $t('components.common.RenderedDescription.button.update') }}
|
||||
{{ t('components.common.RenderedDescription.button.update') }}
|
||||
</button>
|
||||
<div class="ui clearing hidden divider" />
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,17 @@ import type { User } from '~/types'
|
|||
|
||||
import { hashCode, intToRGB } from '~/utils/color'
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
interface Props {
|
||||
user: User
|
||||
avatar?: boolean
|
||||
}
|
||||
|
||||
const store = useStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
avatar: true
|
||||
})
|
||||
|
|
@ -22,7 +27,7 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
|
|||
<template v-if="avatar">
|
||||
<img
|
||||
v-if="user.avatar && user.avatar.urls.medium_square_crop"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](user.avatar.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](user.avatar.urls.medium_square_crop)"
|
||||
class="ui tiny circular avatar"
|
||||
alt=""
|
||||
>
|
||||
|
|
@ -33,6 +38,6 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
|
|||
>{{ user.username[0] }}</span>
|
||||
|
||||
</template>
|
||||
{{ $t('components.common.UserLink.link.username', {username: user.username}) }}
|
||||
{{ t('components.common.UserLink.link.username', {username: user.username}) }}
|
||||
</span>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
import { SUPPORTED_LOCALES, setI18nLanguage } from '~/init/locale'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { computed } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import useThemeList from '~/composables/useThemeList'
|
||||
import useTheme from '~/composables/useTheme'
|
||||
|
|
@ -10,9 +12,13 @@ interface Events {
|
|||
(e: 'show:shortcuts-modal'): void
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
const themes = useThemeList()
|
||||
const { theme } = useTheme()
|
||||
|
||||
|
|
@ -48,7 +54,7 @@ const labels = computed(() => ({
|
|||
<a
|
||||
v-for="(language, key) in SUPPORTED_LOCALES"
|
||||
:key="key"
|
||||
:class="[{'active': $i18n.locale === key},'item']"
|
||||
:class="[{'active': locale === key},'item']"
|
||||
:value="key"
|
||||
@click="setI18nLanguage(key)"
|
||||
>{{ language }}</a>
|
||||
|
|
@ -74,27 +80,27 @@ const labels = computed(() => ({
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="$store.state.auth.authenticated">
|
||||
<template v-if="store.state.auth.authenticated">
|
||||
<div class="divider" />
|
||||
<router-link
|
||||
class="item"
|
||||
:to="{name: 'profile.overview', params: { username: $store.state.auth.username },}"
|
||||
:to="{name: 'profile.overview', params: { username: store.state.auth.username },}"
|
||||
>
|
||||
<i class="user icon" />
|
||||
{{ labels.profile }}
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
class="item"
|
||||
:to="{name: 'notifications'}"
|
||||
>
|
||||
<i class="bell icon" />
|
||||
<div
|
||||
v-if="$store.state.ui.notifications.inbox > 0"
|
||||
v-if="store.state.ui.notifications.inbox > 0"
|
||||
:title="labels.notifications"
|
||||
:class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
|
||||
>
|
||||
{{ $store.state.ui.notifications.inbox }}
|
||||
{{ store.state.ui.notifications.inbox }}
|
||||
</div>
|
||||
{{ labels.notifications }}
|
||||
</router-link>
|
||||
|
|
@ -155,14 +161,14 @@ const labels = computed(() => ({
|
|||
{{ labels.shortcuts }}
|
||||
</a>
|
||||
<router-link
|
||||
v-if="$route.path != '/about'"
|
||||
v-if="route.path != '/about'"
|
||||
class="item"
|
||||
:to="{ name: 'about' }"
|
||||
>
|
||||
<i class="question circle outline icon" />
|
||||
{{ labels.about }}
|
||||
</router-link>
|
||||
<template v-if="$store.state.auth.authenticated && $route.path != '/logout'">
|
||||
<template v-if="store.state.auth.authenticated && route.path != '/logout'">
|
||||
<div class="divider" />
|
||||
<router-link
|
||||
class="item"
|
||||
|
|
@ -173,7 +179,7 @@ const labels = computed(() => ({
|
|||
{{ labels.logout }}
|
||||
</router-link>
|
||||
</template>
|
||||
<template v-if="!$store.state.auth.authenticated">
|
||||
<template v-if="!store.state.auth.authenticated">
|
||||
<div class="divider" />
|
||||
<router-link
|
||||
class="item"
|
||||
|
|
@ -183,7 +189,7 @@ const labels = computed(() => ({
|
|||
{{ labels.login }}
|
||||
</router-link>
|
||||
</template>
|
||||
<template v-if="!$store.state.auth.authenticated && $store.state.instance.settings.users.registration_enabled.value">
|
||||
<template v-if="!store.state.auth.authenticated && store.state.instance.settings.users.registration_enabled.value">
|
||||
<router-link
|
||||
class="item"
|
||||
:to="{ name: 'signup' }"
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import useTheme from '~/composables/useTheme'
|
|||
import { useVModel } from '@vueuse/core'
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { SUPPORTED_LOCALES } from '~/init/locale'
|
||||
|
||||
|
|
@ -21,6 +23,9 @@ interface Props {
|
|||
show: boolean
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = defineProps<Props>()
|
||||
|
||||
|
|
@ -62,18 +67,18 @@ const locale = computed(() => SUPPORTED_LOCALES[i18nLocale.value as SupportedLan
|
|||
:fullscreen="false"
|
||||
>
|
||||
<div
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
class="header"
|
||||
>
|
||||
<img
|
||||
v-if="$store.state.auth.profile?.avatar && $store.state.auth.profile?.avatar.urls.medium_square_crop"
|
||||
v-lazy="$store.getters['instance/absoluteUrl']($store.state.auth.profile?.avatar.urls.medium_square_crop)"
|
||||
v-if="store.state.auth.profile?.avatar && store.state.auth.profile?.avatar.urls.medium_square_crop"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="ui centered small circular image"
|
||||
>
|
||||
<actor-avatar
|
||||
v-else
|
||||
:actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username,}"
|
||||
:actor="{preferred_username: store.state.auth.username, full_username: store.state.auth.username,}"
|
||||
/>
|
||||
<h3 class="user-modal title">
|
||||
{{ labels.header }}
|
||||
|
|
@ -124,12 +129,12 @@ const locale = computed(() => SUPPORTED_LOCALES[i18nLocale.value as SupportedLan
|
|||
</div>
|
||||
</div>
|
||||
<div class="ui divider" />
|
||||
<template v-if="$store.state.auth.authenticated">
|
||||
<template v-if="store.state.auth.authenticated">
|
||||
<div class="row">
|
||||
<div
|
||||
class="column"
|
||||
role="button"
|
||||
@click.prevent.exact="$router.push({name: 'profile.overview', params: { username: $store.state.auth.username }})"
|
||||
@click.prevent.exact="router.push({name: 'profile.overview', params: { username: store.state.auth.username }})"
|
||||
>
|
||||
<i class="user icon user-modal list-icon" />
|
||||
<span class="user-modal list-item">{{ labels.profile }}</span>
|
||||
|
|
@ -137,7 +142,7 @@ const locale = computed(() => SUPPORTED_LOCALES[i18nLocale.value as SupportedLan
|
|||
</div>
|
||||
<div class="row">
|
||||
<router-link
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
v-slot="{ navigate }"
|
||||
custom
|
||||
:to="{ name: 'notifications' }"
|
||||
|
|
@ -212,7 +217,7 @@ const locale = computed(() => SUPPORTED_LOCALES[i18nLocale.value as SupportedLan
|
|||
<div class="ui divider" />
|
||||
|
||||
<router-link
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
v-slot="{ navigate }"
|
||||
custom
|
||||
:to="{ name: 'logout' }"
|
||||
|
|
@ -244,7 +249,7 @@ const locale = computed(() => SUPPORTED_LOCALES[i18nLocale.value as SupportedLan
|
|||
</div>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="!$store.state.auth.authenticated && $store.state.instance.settings.users.registration_enabled.value"
|
||||
v-if="!store.state.auth.authenticated && store.state.instance.settings.users.registration_enabled.value"
|
||||
v-slot="{ navigate }"
|
||||
custom
|
||||
:to="{ name: 'signup' }"
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
<section class="ui vertical center aligned stripe segment">
|
||||
<div :class="['ui', { 'active': isLoading }, 'inverted', 'dimmer']">
|
||||
<div class="ui text loader">
|
||||
{{ $t('components.favorites.List.loader.loading') }}
|
||||
{{ t('components.favorites.List.loader.loading') }}
|
||||
</div>
|
||||
</div>
|
||||
<h2
|
||||
|
|
@ -120,7 +120,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
class="ui center aligned icon header"
|
||||
>
|
||||
<i class="circular inverted heart pink icon" />
|
||||
{{ $t('components.favorites.List.header.favorites', $store.state.favorites.count) }}
|
||||
{{ t('components.favorites.List.header.favorites', $store.state.favorites.count) }}
|
||||
</h2>
|
||||
<radio-button
|
||||
v-if="$store.state.favorites.count > 0"
|
||||
|
|
@ -135,7 +135,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
<div class="fields">
|
||||
<div class="field">
|
||||
<label for="favorites-ordering">
|
||||
{{ $t('components.favorites.List.ordering.label') }}
|
||||
{{ t('components.favorites.List.ordering.label') }}
|
||||
</label>
|
||||
<select
|
||||
id="favorites-ordering"
|
||||
|
|
@ -153,7 +153,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
</div>
|
||||
<div class="field">
|
||||
<label for="favorites-ordering-direction">
|
||||
{{ $t('components.favorites.List.ordering.direction.label') }}
|
||||
{{ t('components.favorites.List.ordering.direction.label') }}
|
||||
</label>
|
||||
<select
|
||||
id="favorites-ordering-direction"
|
||||
|
|
@ -161,16 +161,16 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
class="ui dropdown"
|
||||
>
|
||||
<option value="+">
|
||||
{{ $t('components.favorites.List.ordering.direction.ascending') }}
|
||||
{{ t('components.favorites.List.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option value="-">
|
||||
{{ $t('components.favorites.List.ordering.direction.descending') }}
|
||||
{{ t('components.favorites.List.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="favorites-results">
|
||||
{{ $t('components.favorites.List.pagination.results') }}
|
||||
{{ t('components.favorites.List.pagination.results') }}
|
||||
</label>
|
||||
<select
|
||||
id="favorites-results"
|
||||
|
|
@ -209,14 +209,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
>
|
||||
<div class="ui icon header">
|
||||
<i class="broken heart icon" />
|
||||
{{ $t('components.favorites.List.empty.noFavorites') }}
|
||||
{{ t('components.favorites.List.empty.noFavorites') }}
|
||||
</div>
|
||||
<router-link
|
||||
:to="'/library'"
|
||||
class="ui success labeled icon button"
|
||||
>
|
||||
<i class="headphones icon" />
|
||||
{{ $t('components.favorites.List.link.library') }}
|
||||
{{ t('components.favorites.List.link.library') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -36,10 +36,10 @@ const title = computed(() => isFavorite.value
|
|||
>
|
||||
<i class="heart icon" />
|
||||
<span v-if="isFavorite">
|
||||
{{ $t('components.favorites.TrackFavoriteIcon.label.inFavorites') }}
|
||||
{{ t('components.favorites.TrackFavoriteIcon.label.inFavorites') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.favorites.TrackFavoriteIcon.button.add') }}
|
||||
{{ t('components.favorites.TrackFavoriteIcon.button.add') }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@ import SemanticModal from '~/components/semantic/Modal.vue'
|
|||
import { useTimeoutFn } from '@vueuse/core'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Events {
|
||||
(e: 'refresh'): void
|
||||
}
|
||||
|
|
@ -80,7 +84,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
|
|||
class="small"
|
||||
>
|
||||
<h3 class="header">
|
||||
{{ $t('components.federation.FetchButton.header.refresh') }}
|
||||
{{ t('components.federation.FetchButton.header.refresh') }}
|
||||
</h3>
|
||||
<div class="scrolling content">
|
||||
<template v-if="data && data.status != 'pending'">
|
||||
|
|
@ -89,10 +93,10 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
|
|||
class="ui message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.federation.FetchButton.header.skipped') }}
|
||||
{{ t('components.federation.FetchButton.header.skipped') }}
|
||||
</h4>
|
||||
<p>
|
||||
{{ $t('components.federation.FetchButton.description.skipped') }}
|
||||
{{ t('components.federation.FetchButton.description.skipped') }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -100,10 +104,10 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
|
|||
class="ui success message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.federation.FetchButton.header.success') }}
|
||||
{{ t('components.federation.FetchButton.header.success') }}
|
||||
</h4>
|
||||
<p>
|
||||
{{ $t('components.federation.FetchButton.description.success') }}
|
||||
{{ t('components.federation.FetchButton.description.success') }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -111,16 +115,16 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
|
|||
class="ui error message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.federation.FetchButton.header.failure') }}
|
||||
{{ t('components.federation.FetchButton.header.failure') }}
|
||||
</h4>
|
||||
<p>
|
||||
{{ $t('components.federation.FetchButton.description.failure') }}
|
||||
{{ t('components.federation.FetchButton.description.failure') }}
|
||||
</p>
|
||||
<table class="ui very basic collapsing celled table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.federation.FetchButton.table.error.label.type') }}
|
||||
{{ t('components.federation.FetchButton.table.error.label.type') }}
|
||||
</td>
|
||||
<td>
|
||||
{{ data.detail.error_code }}
|
||||
|
|
@ -128,32 +132,32 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.federation.FetchButton.table.error.label.detail') }}
|
||||
{{ t('components.federation.FetchButton.table.error.label.detail') }}
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="data.detail.error_code === 'http' && data.detail.status_code">
|
||||
{{ $t('components.federation.FetchButton.table.error.value.httpStatus', {status: data.detail.status_code}) }}
|
||||
{{ t('components.federation.FetchButton.table.error.value.httpStatus', {status: data.detail.status_code}) }}
|
||||
</span>
|
||||
<span v-else-if="['http', 'request'].includes(data.detail.error_code)">
|
||||
{{ $t('components.federation.FetchButton.table.error.value.httpError') }}
|
||||
{{ t('components.federation.FetchButton.table.error.value.httpError') }}
|
||||
</span>
|
||||
<span v-else-if="data.detail.error_code === 'timeout'">
|
||||
{{ $t('components.federation.FetchButton.table.error.value.timeoutError') }}
|
||||
{{ t('components.federation.FetchButton.table.error.value.timeoutError') }}
|
||||
</span>
|
||||
<span v-else-if="data.detail.error_code === 'connection'">
|
||||
{{ $t('components.federation.FetchButton.table.error.value.connectionError') }}
|
||||
{{ t('components.federation.FetchButton.table.error.value.connectionError') }}
|
||||
</span>
|
||||
<span v-else-if="['invalid_json', 'invalid_jsonld', 'missing_jsonld_type'].includes(data.detail.error_code)">
|
||||
{{ $t('components.federation.FetchButton.table.error.value.invalidJsonError') }}
|
||||
{{ t('components.federation.FetchButton.table.error.value.invalidJsonError') }}
|
||||
</span>
|
||||
<span v-else-if="data.detail.error_code === 'validation'">
|
||||
{{ $t('components.federation.FetchButton.table.error.value.invalidAttributesError') }}
|
||||
{{ t('components.federation.FetchButton.table.error.value.invalidAttributesError') }}
|
||||
</span>
|
||||
<span v-else-if="data.detail.error_code === 'unhandled'">
|
||||
{{ $t('components.federation.FetchButton.table.error.value.unknownError') }}
|
||||
{{ t('components.federation.FetchButton.table.error.value.unknownError') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.federation.FetchButton.table.error.value.unknownError') }}
|
||||
{{ t('components.federation.FetchButton.table.error.value.unknownError') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -166,7 +170,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
|
|||
class="ui active inverted dimmer"
|
||||
>
|
||||
<div class="ui text loader">
|
||||
{{ $t('components.federation.FetchButton.loader.fetchRequest') }}
|
||||
{{ t('components.federation.FetchButton.loader.fetchRequest') }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -174,7 +178,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
|
|||
class="ui active inverted dimmer"
|
||||
>
|
||||
<div class="ui text loader">
|
||||
{{ $t('components.federation.FetchButton.loader.awaitingResult') }}
|
||||
{{ t('components.federation.FetchButton.loader.awaitingResult') }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -183,7 +187,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.federation.FetchButton.header.saveFailure') }}
|
||||
{{ t('components.federation.FetchButton.header.saveFailure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -200,23 +204,23 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
|
|||
class="ui warning message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.federation.FetchButton.header.pending') }}
|
||||
{{ t('components.federation.FetchButton.header.pending') }}
|
||||
</h4>
|
||||
<p>
|
||||
{{ $t('components.federation.FetchButton.description.pending') }}
|
||||
{{ t('components.federation.FetchButton.description.pending') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="ui basic cancel button">
|
||||
{{ $t('components.federation.FetchButton.button.close') }}
|
||||
{{ t('components.federation.FetchButton.button.close') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="data && data.status === 'finished'"
|
||||
class="ui confirm success button"
|
||||
@click.prevent="showModal = false; emit('refresh')"
|
||||
>
|
||||
{{ $t('components.federation.FetchButton.button.reload') }}
|
||||
{{ t('components.federation.FetchButton.button.reload') }}
|
||||
</button>
|
||||
</div>
|
||||
</semantic-modal>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
import type { Library } from '~/types'
|
||||
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
|
|
@ -17,6 +19,9 @@ interface Props {
|
|||
url: string
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = defineProps<Props>()
|
||||
|
||||
|
|
@ -64,7 +69,7 @@ fetchData()
|
|||
v-if="!isLoading && libraries.length === 0"
|
||||
class="ui subtitle"
|
||||
>
|
||||
{{ $t('components.federation.LibraryWidget.empty.noMatch') }}
|
||||
{{ t('components.federation.LibraryWidget.empty.noMatch') }}
|
||||
</p>
|
||||
<div class="ui hidden divider" />
|
||||
<div class="ui cards">
|
||||
|
|
@ -78,7 +83,7 @@ fetchData()
|
|||
v-for="library in libraries"
|
||||
:key="library.uuid"
|
||||
:display-scan="false"
|
||||
:display-follow="$store.state.auth.authenticated && library.actor.full_username != $store.state.auth.fullUsername"
|
||||
:display-follow="store.state.auth.authenticated && library.actor.full_username != store.state.auth.fullUsername"
|
||||
:initial-library="library"
|
||||
:display-copy-fid="true"
|
||||
/>
|
||||
|
|
@ -90,7 +95,7 @@ fetchData()
|
|||
:class="['ui', 'basic', 'button']"
|
||||
@click="fetchData(nextPage)"
|
||||
>
|
||||
{{ $t('components.federation.LibraryWidget.button.showMore') }}
|
||||
{{ t('components.federation.LibraryWidget.button.showMore') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@ import type { Track, Album, Artist, Library, ArtistCredit } from '~/types'
|
|||
import { momentFormat } from '~/utils/filters'
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { sum } from 'lodash-es'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
|
|
@ -25,6 +26,8 @@ interface Props {
|
|||
id: number
|
||||
}
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = defineProps<Props>()
|
||||
|
||||
|
|
@ -116,6 +119,8 @@ const fetchTracks = async () => {
|
|||
watch(() => props.id, fetchData, { immediate: true })
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const remove = async () => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
|
|
@ -156,7 +161,7 @@ const remove = async () => {
|
|||
<div class="large two-images">
|
||||
<img
|
||||
v-if="object.cover && object.cover.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="channel-image"
|
||||
>
|
||||
|
|
@ -168,7 +173,7 @@ const remove = async () => {
|
|||
>
|
||||
<img
|
||||
v-if="object.cover && object.cover.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="channel-image"
|
||||
>
|
||||
|
|
@ -193,10 +198,10 @@ const remove = async () => {
|
|||
<template v-if="totalTracks > 0">
|
||||
<div class="ui hidden very small divider" />
|
||||
<span v-if="isSerie">
|
||||
{{ $t('components.library.AlbumBase.meta.episodes', totalTracks) }}
|
||||
{{ t('components.library.AlbumBase.meta.episodes', totalTracks) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.library.AlbumBase.meta.tracks', totalTracks) }}
|
||||
{{ t('components.library.AlbumBase.meta.tracks', totalTracks) }}
|
||||
</span>
|
||||
</template>
|
||||
<div class="ui small hidden divider" />
|
||||
|
|
@ -238,7 +243,7 @@ const remove = async () => {
|
|||
>
|
||||
<img
|
||||
v-if="object.cover && object.cover.urls.original"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="channel-image"
|
||||
>
|
||||
|
|
@ -271,10 +276,10 @@ const remove = async () => {
|
|||
</template>
|
||||
<template v-if="totalTracks > 0">
|
||||
<span v-if="isSerie">
|
||||
{{ $t('components.library.AlbumBase.meta.episodes', totalTracks) }}
|
||||
{{ t('components.library.AlbumBase.meta.episodes', totalTracks) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.library.AlbumBase.meta.tracks', totalTracks) }}
|
||||
{{ t('components.library.AlbumBase.meta.tracks', totalTracks) }}
|
||||
</span>
|
||||
<span class="middle middledot symbol" />
|
||||
</template>
|
||||
|
|
@ -299,7 +304,7 @@ const remove = async () => {
|
|||
:artist-credit="artistCredit"
|
||||
@remove="remove"
|
||||
/>
|
||||
<div v-if="(object.tags && object.tags.length > 0) || object.description || $store.state.auth.authenticated && object.is_local">
|
||||
<div v-if="(object.tags && object.tags.length > 0) || object.description || store.state.auth.authenticated && object.is_local">
|
||||
<div class="ui small hidden divider" />
|
||||
<div class="ui divider" />
|
||||
<div class="ui small hidden divider" />
|
||||
|
|
@ -313,11 +318,11 @@ const remove = async () => {
|
|||
:can-update="false"
|
||||
/>
|
||||
<router-link
|
||||
v-else-if="$store.state.auth.authenticated && object.is_local"
|
||||
v-else-if="store.state.auth.authenticated && object.is_local"
|
||||
:to="{name: 'library.albums.edit', params: {id: object.id }}"
|
||||
>
|
||||
<i class="pencil icon" />
|
||||
{{ $t('components.library.AlbumBase.link.addDescription') }}
|
||||
{{ t('components.library.AlbumBase.link.addDescription') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -329,18 +334,18 @@ const remove = async () => {
|
|||
:can-update="false"
|
||||
/>
|
||||
<router-link
|
||||
v-else-if="$store.state.auth.authenticated && object.is_local"
|
||||
v-else-if="store.state.auth.authenticated && object.is_local"
|
||||
:to="{name: 'library.albums.edit', params: {id: object.id }}"
|
||||
>
|
||||
<i class="pencil icon" />
|
||||
{{ $t('components.library.AlbumBase.link.addDescription') }}
|
||||
{{ t('components.library.AlbumBase.link.addDescription') }}
|
||||
</router-link>
|
||||
</template>
|
||||
</div>
|
||||
<div class="nine wide column">
|
||||
<router-view
|
||||
v-if="object"
|
||||
:key="$route.fullPath"
|
||||
:key="route.fullPath"
|
||||
:paginate-by="paginateBy"
|
||||
:total-tracks="totalTracks"
|
||||
:is-serie="isSerie"
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import TrackTable from '~/components/audio/track/Table.vue'
|
|||
import PlayButton from '~/components/audio/PlayButton.vue'
|
||||
import Pagination from '~/components/vui/Pagination.vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Events {
|
||||
(e: 'libraries-loaded', libraries: Library[]): void
|
||||
|
|
@ -24,6 +25,7 @@ interface Props {
|
|||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = defineProps<Props>()
|
||||
const { t } = useI18n()
|
||||
|
||||
const getDiscKey = (disc: Track[]) => disc?.map(track => track.id).join('|') ?? ''
|
||||
const page = ref(1)
|
||||
|
|
@ -58,10 +60,10 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
|
|||
>
|
||||
<h2 class="ui header">
|
||||
<span v-if="isSerie">
|
||||
{{ $t('components.library.AlbumDetail.header.episodes') }}
|
||||
{{ t('components.library.AlbumDetail.header.episodes') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.library.AlbumDetail.header.tracks') }}
|
||||
{{ t('components.library.AlbumDetail.header.tracks') }}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
|
|
@ -85,7 +87,7 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
|
|||
:tracks="discs[index]"
|
||||
/>
|
||||
<h3>
|
||||
{{ $t('components.library.AlbumDetail.meta.volume', {number: tracks[0].disc_number}) }}
|
||||
{{ t('components.library.AlbumDetail.meta.volume', {number: tracks[0].disc_number}) }}
|
||||
</h3>
|
||||
<track-table
|
||||
:is-album="true"
|
||||
|
|
@ -125,13 +127,13 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
|
|||
|
||||
<template v-if="artistCredit && !artistCredit[0]?.artist.channel && !isSerie">
|
||||
<h2>
|
||||
{{ $t('components.library.AlbumDetail.header.libraries') }}
|
||||
{{ t('components.library.AlbumDetail.header.libraries') }}
|
||||
</h2>
|
||||
<library-widget
|
||||
:url="'albums/' + object.id + '/libraries/'"
|
||||
@loaded="emit('libraries-loaded', $event)"
|
||||
>
|
||||
{{ $t('components.library.AlbumDetail.description.libraries') }}
|
||||
{{ t('components.library.AlbumDetail.description.libraries') }}
|
||||
</library-widget>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import type { Album, ArtistCredit, Library } from '~/types'
|
|||
|
||||
import { computed, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
import { getDomain } from '~/utils'
|
||||
|
||||
|
|
@ -29,6 +30,7 @@ interface Props {
|
|||
isSerie: boolean
|
||||
}
|
||||
|
||||
const store = useStore()
|
||||
const emit = defineEmits<Events>()
|
||||
const props = defineProps<Props>()
|
||||
const { report, getReportableObjects } = useReport()
|
||||
|
|
@ -59,7 +61,7 @@ const open = ref(false)
|
|||
v-model:show="showEmbedModal"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.library.AlbumDropdown.modal.embed.header') }}
|
||||
{{ t('components.library.AlbumDropdown.modal.embed.header') }}
|
||||
</h4>
|
||||
<div class="scrolling content">
|
||||
<div class="description">
|
||||
|
|
@ -76,7 +78,7 @@ const open = ref(false)
|
|||
variant="outline"
|
||||
@click="showEmbedModal = false"
|
||||
>
|
||||
{{ $t('components.library.AlbumDropdown.button.cancel') }}
|
||||
{{ t('components.library.AlbumDropdown.button.cancel') }}
|
||||
</Button>
|
||||
</div>
|
||||
</semantic-modal>
|
||||
|
|
@ -94,12 +96,12 @@ const open = ref(false)
|
|||
|
||||
<template #items>
|
||||
<PopoverItem
|
||||
v-if="domain != $store.getters['instance/domain']"
|
||||
v-if="domain != store.getters['instance/domain']"
|
||||
:href="object.fid"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="bi bi-box-arrow-up-right" />
|
||||
{{ $t('components.library.AlbumDropdown.link.domain') }}
|
||||
{{ t('components.library.AlbumDropdown.link.domain') }}
|
||||
</PopoverItem>
|
||||
|
||||
<PopoverItem
|
||||
|
|
@ -107,7 +109,7 @@ const open = ref(false)
|
|||
@click="showEmbedModal = !showEmbedModal"
|
||||
>
|
||||
<i class="bi bi-code" />
|
||||
{{ $t('components.library.AlbumDropdown.button.embed') }}
|
||||
{{ t('components.library.AlbumDropdown.button.embed') }}
|
||||
</PopoverItem>
|
||||
|
||||
<PopoverItem
|
||||
|
|
@ -117,7 +119,7 @@ const open = ref(false)
|
|||
rel="noreferrer noopener"
|
||||
>
|
||||
<i class="bi bi-box-arrow-up-right" />
|
||||
{{ $t('components.library.AlbumDropdown.link.musicbrainz') }}
|
||||
{{ t('components.library.AlbumDropdown.link.musicbrainz') }}
|
||||
</PopoverItem>
|
||||
|
||||
<PopoverItem
|
||||
|
|
@ -127,7 +129,7 @@ const open = ref(false)
|
|||
rel="noreferrer noopener"
|
||||
>
|
||||
<i class="bi bi-box-arrow-up-right" />
|
||||
{{ $t('components.library.AlbumDropdown.link.discogs') }}
|
||||
{{ t('components.library.AlbumDropdown.link.discogs') }}
|
||||
</PopoverItem>
|
||||
|
||||
<PopoverItem
|
||||
|
|
@ -135,18 +137,18 @@ const open = ref(false)
|
|||
:to="{name: 'library.albums.edit', params: {id: object.id }}"
|
||||
>
|
||||
<i class="bi bi-pencil" />
|
||||
{{ $t('components.library.AlbumDropdown.button.edit') }}
|
||||
{{ t('components.library.AlbumDropdown.button.edit') }}
|
||||
</PopoverItem>
|
||||
|
||||
<PopoverItem
|
||||
v-if="artistCredit[0] && $store.state.auth.authenticated && artistCredit[0].artist.channel && artistCredit[0].artist.attributed_to?.full_username === $store.state.auth.fullUsername"
|
||||
v-if="artistCredit[0] && store.state.auth.authenticated && artistCredit[0].artist.channel && artistCredit[0].artist.attributed_to?.full_username === store.state.auth.fullUsername"
|
||||
>
|
||||
<DangerousButton
|
||||
:is-loading="isLoading"
|
||||
@confirm="remove()"
|
||||
>
|
||||
<i class="bi bi-trash" />
|
||||
{{ $t('components.library.AlbumDropdown.button.delete') }}
|
||||
{{ t('components.library.AlbumDropdown.button.delete') }}
|
||||
</DangerousButton>
|
||||
</PopoverItem>
|
||||
|
||||
|
|
@ -164,21 +166,21 @@ const open = ref(false)
|
|||
<hr>
|
||||
|
||||
<PopoverItem
|
||||
v-if="$store.state.auth.availablePermissions['library']"
|
||||
v-if="store.state.auth.availablePermissions['library']"
|
||||
:to="{name: 'manage.library.albums.detail', params: {id: object.id}}"
|
||||
>
|
||||
<i class="bi bi-wrench" />
|
||||
{{ $t('components.library.AlbumDropdown.link.moderation') }}
|
||||
{{ t('components.library.AlbumDropdown.link.moderation') }}
|
||||
</PopoverItem>
|
||||
|
||||
<PopoverItem
|
||||
v-if="$store.state.auth.profile && $store.state.auth.profile?.is_superuser"
|
||||
:href="$store.getters['instance/absoluteUrl'](`/api/admin/music/album/${object.id}`)"
|
||||
v-if="store.state.auth.profile && store.state.auth.profile?.is_superuser"
|
||||
:href="store.getters['instance/absoluteUrl'](`/api/admin/music/album/${object.id}`)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<i class="bi bi-wrench" />
|
||||
{{ $t('components.library.AlbumDropdown.link.django') }}
|
||||
{{ t('components.library.AlbumDropdown.link.django') }}
|
||||
</PopoverItem>
|
||||
</template>
|
||||
</Popover>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import type { EditObjectType } from '~/composables/moderation/useEditConfigs'
|
|||
import type { Album, Library, Actor } from '~/types'
|
||||
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import EditForm from '~/components/library/EditForm.vue'
|
||||
|
||||
|
|
@ -14,6 +15,7 @@ interface Props {
|
|||
|
||||
defineProps<Props>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
const canEdit = store.state.auth.availablePermissions.library
|
||||
</script>
|
||||
|
|
@ -23,17 +25,17 @@ const canEdit = store.state.auth.availablePermissions.library
|
|||
<div class="ui text container">
|
||||
<h2>
|
||||
<span v-if="canEdit">
|
||||
{{ $t('components.library.AlbumEdit.header.edit') }}
|
||||
{{ t('components.library.AlbumEdit.header.edit') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.library.AlbumEdit.header.suggest') }}
|
||||
{{ t('components.library.AlbumEdit.header.suggest') }}
|
||||
</span>
|
||||
</h2>
|
||||
<div
|
||||
v-if="!object.is_local"
|
||||
class="ui message"
|
||||
>
|
||||
{{ $t('components.library.AlbumEdit.message.remote') }}
|
||||
{{ t('components.library.AlbumEdit.message.remote') }}
|
||||
</div>
|
||||
<edit-form
|
||||
v-else
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
<section class="ui vertical stripe segment">
|
||||
/front/src/components/library/Albums.vue
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.library.Albums.header.browse') }}
|
||||
{{ t('components.library.Albums.header.browse') }}
|
||||
</h2>
|
||||
<form
|
||||
:class="['ui', {'loading': isLoading}, 'form']"
|
||||
|
|
@ -131,7 +131,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
<div class="fields">
|
||||
<div class="field">
|
||||
<label for="albums-search">
|
||||
{{ $t('components.library.Albums.label.search') }}
|
||||
{{ t('components.library.Albums.label.search') }}
|
||||
</label>
|
||||
<div class="ui action input">
|
||||
<input
|
||||
|
|
@ -151,11 +151,11 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tags-search">{{ $t('components.library.Albums.label.tags') }}</label>
|
||||
<label for="tags-search">{{ t('components.library.Albums.label.tags') }}</label>
|
||||
<tags-selector v-model="tags" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="album-ordering">{{ $t('components.library.Albums.ordering.label') }}</label>
|
||||
<label for="album-ordering">{{ t('components.library.Albums.ordering.label') }}</label>
|
||||
<select
|
||||
id="album-ordering"
|
||||
v-model="ordering"
|
||||
|
|
@ -171,22 +171,22 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="album-ordering-direction">{{ $t('components.library.Albums.ordering.direction.label') }}</label>
|
||||
<label for="album-ordering-direction">{{ t('components.library.Albums.ordering.direction.label') }}</label>
|
||||
<select
|
||||
id="album-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="ui dropdown"
|
||||
>
|
||||
<option value="+">
|
||||
{{ $t('components.library.Albums.ordering.direction.ascending') }}
|
||||
{{ t('components.library.Albums.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option value="-">
|
||||
{{ $t('components.library.Albums.ordering.direction.descending') }}
|
||||
{{ t('components.library.Albums.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="album-results">{{ $t('components.library.Albums.pagination.results') }}</label>
|
||||
<label for="album-results">{{ t('components.library.Albums.pagination.results') }}</label>
|
||||
<select
|
||||
id="album-results"
|
||||
v-model="paginateBy"
|
||||
|
|
@ -228,7 +228,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
>
|
||||
<div class="ui icon header">
|
||||
<i class="compact disc icon" />
|
||||
{{ $t('components.library.Albums.empty.noResults') }}
|
||||
{{ t('components.library.Albums.empty.noResults') }}
|
||||
</div>
|
||||
<router-link
|
||||
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"
|
||||
>
|
||||
<i class="upload icon" />
|
||||
{{ $t('components.library.Albums.link.addMusic') }}
|
||||
{{ t('components.library.Albums.link.addMusic') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import type { Track, Album, Artist, Library } from '~/types'
|
|||
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { getDomain } from '~/utils'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
|
|
@ -41,6 +41,7 @@ const totalTracks = ref(0)
|
|||
const logger = useLogger()
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const domain = computed(() => getDomain(object.value?.fid ?? ''))
|
||||
const isPlayable = computed(() => !!object.value?.albums.some(album => album.is_playable))
|
||||
|
|
@ -117,8 +118,8 @@ watch(() => props.id, fetchData, { immediate: true })
|
|||
v-if="albums"
|
||||
class="sub header"
|
||||
>
|
||||
{{ $t('components.library.ArtistBase.meta.tracks', totalTracks) }}
|
||||
{{ $t('components.library.ArtistBase.meta.albums', totalAlbums) }}
|
||||
{{ t('components.library.ArtistBase.meta.tracks', totalTracks) }}
|
||||
{{ t('components.library.ArtistBase.meta.albums', totalAlbums) }}
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
|
|
@ -140,7 +141,7 @@ watch(() => props.id, fetchData, { immediate: true })
|
|||
class="vibrant"
|
||||
:artist="object"
|
||||
>
|
||||
{{ $t('components.library.ArtistBase.button.play') }}
|
||||
{{ t('components.library.ArtistBase.button.play') }}
|
||||
</play-button>
|
||||
</div>
|
||||
|
||||
|
|
@ -149,7 +150,7 @@ watch(() => props.id, fetchData, { immediate: true })
|
|||
v-model:show="showEmbedModal"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.library.ArtistBase.modal.embed.header') }}
|
||||
{{ t('components.library.ArtistBase.modal.embed.header') }}
|
||||
</h4>
|
||||
<div class="scrolling content">
|
||||
<div class="description">
|
||||
|
|
@ -161,7 +162,7 @@ watch(() => props.id, fetchData, { immediate: true })
|
|||
</div>
|
||||
<div class="actions">
|
||||
<button class="ui deny button">
|
||||
{{ $t('components.library.ArtistBase.button.cancel') }}
|
||||
{{ t('components.library.ArtistBase.button.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</semantic-modal>
|
||||
|
|
@ -172,20 +173,20 @@ watch(() => props.id, fetchData, { immediate: true })
|
|||
class="ui button"
|
||||
@click="toggleOpen"
|
||||
>
|
||||
{{ $t('components.library.ArtistBase.button.more') }}
|
||||
{{ t('components.library.ArtistBase.button.more') }}
|
||||
<i class="dropdown icon" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #items>
|
||||
<PopoverItem
|
||||
v-if="domain != $store.getters['instance/domain']"
|
||||
v-if="domain != store.getters['instance/domain']"
|
||||
:href="object.fid"
|
||||
target="_blank"
|
||||
class="funkwhale item"
|
||||
>
|
||||
<i class="external icon" />
|
||||
{{ $t('components.library.ArtistBase.link.domain', {domain: domain}) }}
|
||||
{{ t('components.library.ArtistBase.link.domain', {domain: domain}) }}
|
||||
</PopoverItem>
|
||||
|
||||
<PopoverItem
|
||||
|
|
@ -193,7 +194,7 @@ watch(() => props.id, fetchData, { immediate: true })
|
|||
@click="showEmbedModal = !showEmbedModal"
|
||||
>
|
||||
<i class="code icon" />
|
||||
{{ $t('components.library.ArtistBase.button.embed') }}
|
||||
{{ t('components.library.ArtistBase.button.embed') }}
|
||||
</PopoverItem>
|
||||
|
||||
<PopoverItem
|
||||
|
|
@ -202,7 +203,7 @@ watch(() => props.id, fetchData, { immediate: true })
|
|||
rel="noreferrer noopener"
|
||||
>
|
||||
<i class="wikipedia w icon" />
|
||||
{{ $t('components.library.ArtistBase.link.wikipedia') }}
|
||||
{{ t('components.library.ArtistBase.link.wikipedia') }}
|
||||
</PopoverItem>
|
||||
|
||||
<PopoverItem
|
||||
|
|
@ -212,7 +213,7 @@ watch(() => props.id, fetchData, { immediate: true })
|
|||
rel="noreferrer noopener"
|
||||
>
|
||||
<i class="external icon" />
|
||||
{{ $t('components.library.ArtistBase.link.musicbrainz') }}
|
||||
{{ t('components.library.ArtistBase.link.musicbrainz') }}
|
||||
</PopoverItem>
|
||||
|
||||
<PopoverItem
|
||||
|
|
@ -221,7 +222,7 @@ watch(() => props.id, fetchData, { immediate: true })
|
|||
rel="noreferrer noopener"
|
||||
>
|
||||
<i class="external icon" />
|
||||
{{ $t('components.library.ArtistBase.link.discogs') }}
|
||||
{{ t('components.library.ArtistBase.link.discogs') }}
|
||||
</PopoverItem>
|
||||
|
||||
<PopoverItem
|
||||
|
|
@ -229,7 +230,7 @@ watch(() => props.id, fetchData, { immediate: true })
|
|||
:to="{name: 'library.artists.edit', params: {id: object.id }}"
|
||||
>
|
||||
<i class="edit icon" />
|
||||
{{ $t('components.library.ArtistBase.button.edit') }}
|
||||
{{ t('components.library.ArtistBase.button.edit') }}
|
||||
</PopoverItem>
|
||||
|
||||
<hr>
|
||||
|
|
@ -245,21 +246,21 @@ watch(() => props.id, fetchData, { immediate: true })
|
|||
<hr>
|
||||
|
||||
<PopoverItem
|
||||
v-if="$store.state.auth.availablePermissions['library']"
|
||||
v-if="store.state.auth.availablePermissions['library']"
|
||||
:to="{name: 'manage.library.artists.detail', params: {id: object.id}}"
|
||||
>
|
||||
<i class="wrench icon" />
|
||||
{{ $t('components.library.ArtistBase.link.moderation') }}
|
||||
{{ t('components.library.ArtistBase.link.moderation') }}
|
||||
</PopoverItem>
|
||||
|
||||
<PopoverItem
|
||||
v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
|
||||
:href="$store.getters['instance/absoluteUrl'](`/api/admin/music/artist/${object.id}`)"
|
||||
v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
|
||||
:href="store.getters['instance/absoluteUrl'](`/api/admin/music/artist/${object.id}`)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<i class="wrench icon" />
|
||||
{{ $t('components.library.ArtistBase.link.django') }}
|
||||
{{ t('components.library.ArtistBase.link.django') }}
|
||||
</PopoverItem>
|
||||
</template>
|
||||
</Popover>
|
||||
|
|
@ -267,7 +268,7 @@ watch(() => props.id, fetchData, { immediate: true })
|
|||
</div>
|
||||
</section>
|
||||
<router-view
|
||||
:key="$route.fullPath"
|
||||
:key="route.fullPath"
|
||||
:tracks="tracks"
|
||||
:next-tracks-url="nextTracksUrl"
|
||||
:next-albums-url="nextAlbumsUrl"
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import type { ContentFilter } from '~/store/moderation'
|
|||
|
||||
import { ref, computed, reactive } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
|
|
@ -26,6 +28,8 @@ interface Props {
|
|||
nextAlbumsUrl?: string | null
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
nextTracksUrl: null,
|
||||
|
|
@ -65,19 +69,19 @@ const loadMoreAlbums = async () => {
|
|||
<div class="ui hidden divider" />
|
||||
<div class="ui message">
|
||||
<p>
|
||||
{{ $t('components.library.ArtistDetail.message.filter') }}
|
||||
{{ t('components.library.ArtistDetail.message.filter') }}
|
||||
</p>
|
||||
<router-link
|
||||
class="right floated"
|
||||
:to="{name: 'settings'}"
|
||||
>
|
||||
{{ $t('components.library.ArtistDetail.link.filter') }}
|
||||
{{ t('components.library.ArtistDetail.link.filter') }}
|
||||
</router-link>
|
||||
<button
|
||||
class="ui basic tiny button"
|
||||
@click="$store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)"
|
||||
@click="store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)"
|
||||
>
|
||||
{{ $t('components.library.ArtistDetail.button.filter') }}
|
||||
{{ t('components.library.ArtistDetail.button.filter') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -92,7 +96,7 @@ const loadMoreAlbums = async () => {
|
|||
class="ui vertical stripe segment"
|
||||
>
|
||||
<h2>
|
||||
{{ $t('components.library.ArtistDetail.header.album') }}
|
||||
{{ t('components.library.ArtistDetail.header.album') }}
|
||||
</h2>
|
||||
<div class="ui cards app-cards">
|
||||
<album-card
|
||||
|
|
@ -107,7 +111,7 @@ const loadMoreAlbums = async () => {
|
|||
:class="['ui', {loading: isLoadingMoreAlbums}, 'button']"
|
||||
@click="loadMoreAlbums()"
|
||||
>
|
||||
{{ $t('components.library.ArtistDetail.button.more') }}
|
||||
{{ t('components.library.ArtistDetail.button.more') }}
|
||||
</button>
|
||||
</section>
|
||||
<section
|
||||
|
|
@ -122,7 +126,7 @@ const loadMoreAlbums = async () => {
|
|||
>
|
||||
<template #header>
|
||||
<h2>
|
||||
{{ $t('components.library.ArtistDetail.header.track') }}
|
||||
{{ t('components.library.ArtistDetail.header.track') }}
|
||||
</h2>
|
||||
<div class="ui hidden divider" />
|
||||
</template>
|
||||
|
|
@ -130,13 +134,13 @@ const loadMoreAlbums = async () => {
|
|||
</section>
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2>
|
||||
{{ $t('components.library.ArtistDetail.header.library') }}
|
||||
{{ t('components.library.ArtistDetail.header.library') }}
|
||||
</h2>
|
||||
<library-widget
|
||||
:url="'artists/' + object.id + '/libraries/'"
|
||||
@loaded="emit('libraries-loaded', $event)"
|
||||
>
|
||||
{{ $t('components.library.ArtistDetail.description.library') }}
|
||||
{{ t('components.library.ArtistDetail.description.library') }}
|
||||
</library-widget>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import type { EditObjectType } from '~/composables/moderation/useEditConfigs'
|
||||
import type { Artist, Library } from '~/types'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
import { useStore } from '~/store'
|
||||
|
||||
|
|
@ -14,7 +16,9 @@ interface Props {
|
|||
|
||||
defineProps<Props>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
|
||||
const canEdit = store.state.auth.availablePermissions.library
|
||||
</script>
|
||||
|
||||
|
|
@ -23,17 +27,17 @@ const canEdit = store.state.auth.availablePermissions.library
|
|||
<div class="ui text container">
|
||||
<h2>
|
||||
<span v-if="canEdit">
|
||||
{{ $t('components.library.ArtistEdit.header.edit') }}
|
||||
{{ t('components.library.ArtistEdit.header.edit') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.library.ArtistEdit.header.suggest') }}
|
||||
{{ t('components.library.ArtistEdit.header.suggest') }}
|
||||
</span>
|
||||
</h2>
|
||||
<div
|
||||
v-if="!object.is_local"
|
||||
class="ui message"
|
||||
>
|
||||
{{ $t('components.library.ArtistEdit.message.remote') }}
|
||||
{{ t('components.library.ArtistEdit.message.remote') }}
|
||||
</div>
|
||||
<edit-form
|
||||
v-else
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
<section class="ui vertical stripe segment">
|
||||
/front/src/components/library/Artists.vue
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.library.Artists.header.browse') }}
|
||||
{{ t('components.library.Artists.header.browse') }}
|
||||
</h2>
|
||||
<form
|
||||
:class="['ui', {'loading': isLoading}, 'form']"
|
||||
|
|
@ -132,7 +132,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
<div class="fields">
|
||||
<div class="field">
|
||||
<label for="artist-search">
|
||||
{{ $t('components.library.Artists.label.search') }}
|
||||
{{ t('components.library.Artists.label.search') }}
|
||||
</label>
|
||||
<div class="ui action input">
|
||||
<input
|
||||
|
|
@ -152,11 +152,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tags-search">{{ $t('components.library.Artists.label.tags') }}</label>
|
||||
<label for="tags-search">{{ t('components.library.Artists.label.tags') }}</label>
|
||||
<tags-selector v-model="tags" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="artist-ordering">{{ $t('components.library.Artists.ordering.label') }}</label>
|
||||
<label for="artist-ordering">{{ t('components.library.Artists.ordering.label') }}</label>
|
||||
<select
|
||||
id="artist-ordering"
|
||||
v-model="ordering"
|
||||
|
|
@ -172,22 +172,22 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="artist-ordering-direction">{{ $t('components.library.Artists.ordering.direction.label') }}</label>
|
||||
<label for="artist-ordering-direction">{{ t('components.library.Artists.ordering.direction.label') }}</label>
|
||||
<select
|
||||
id="artist-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="ui dropdown"
|
||||
>
|
||||
<option value="+">
|
||||
{{ $t('components.library.Artists.ordering.direction.ascending') }}
|
||||
{{ t('components.library.Artists.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option value="-">
|
||||
{{ $t('components.library.Artists.ordering.direction.descending') }}
|
||||
{{ t('components.library.Artists.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="artist-results">{{ $t('components.library.Artists.pagination.results') }}</label>
|
||||
<label for="artist-results">{{ t('components.library.Artists.pagination.results') }}</label>
|
||||
<select
|
||||
id="artist-results"
|
||||
v-model="paginateBy"
|
||||
|
|
@ -203,7 +203,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<span id="excludeHeader">{{ $t('components.library.Artists.label.excludeCompilation') }}</span>
|
||||
<span id="excludeHeader">{{ t('components.library.Artists.label.excludeCompilation') }}</span>
|
||||
<div
|
||||
id="excludeCompilation"
|
||||
class="ui toggle checkbox"
|
||||
|
|
@ -218,7 +218,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
<label
|
||||
for="exclude-compilation"
|
||||
class="visually-hidden"
|
||||
>{{ $t('components.library.Artists.label.excludeCompilation') }}</label>
|
||||
>{{ t('components.library.Artists.label.excludeCompilation') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -247,7 +247,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
>
|
||||
<div class="ui icon header">
|
||||
<i class="compact disc icon" />
|
||||
{{ $t('components.library.Artists.empty.noResults') }}
|
||||
{{ t('components.library.Artists.empty.noResults') }}
|
||||
</div>
|
||||
<router-link
|
||||
v-if="$store.state.auth.authenticated"
|
||||
|
|
@ -255,7 +255,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
class="ui success button labeled icon"
|
||||
>
|
||||
<i class="upload icon" />
|
||||
{{ $t('components.library.Artists.button.upload') }}
|
||||
{{ t('components.library.Artists.button.upload') }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="ui center aligned basic segment">
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { diffWordsWithSpace } from 'diff'
|
|||
import { useRouter } from 'vue-router'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
|
|
@ -23,6 +25,8 @@ interface Props {
|
|||
currentState?: ReviewState
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
currentState: () => ({})
|
||||
|
|
@ -155,7 +159,7 @@ const approve = async (approved: boolean) => {
|
|||
<div class="content">
|
||||
<h4 class="header">
|
||||
<router-link :to="detailUrl">
|
||||
{{ $t('components.library.EditCard.header.modification', {id: obj.uuid.substring(0, 8)}) }}
|
||||
{{ t('components.library.EditCard.header.modification', {id: obj.uuid.substring(0, 8)}) }}
|
||||
</router-link>
|
||||
</h4>
|
||||
<div class="meta">
|
||||
|
|
@ -164,7 +168,7 @@ const approve = async (approved: boolean) => {
|
|||
:to="{name: 'library.tracks.detail', params: {id: obj.target.id }}"
|
||||
>
|
||||
<i class="music icon" />
|
||||
{{ $t('components.library.EditCard.link.track', {id: obj.target.id, name: obj.target.repr}) }}
|
||||
{{ t('components.library.EditCard.link.track', {id: obj.target.id, name: obj.target.repr}) }}
|
||||
</router-link>
|
||||
<br>
|
||||
<human-date
|
||||
|
|
@ -175,19 +179,19 @@ const approve = async (approved: boolean) => {
|
|||
<span class="right floated">
|
||||
<span v-if="obj.is_approved && obj.is_applied">
|
||||
<i class="success check icon" />
|
||||
{{ $t('components.library.EditCard.status.applied') }}
|
||||
{{ t('components.library.EditCard.status.applied') }}
|
||||
</span>
|
||||
<span v-else-if="obj.is_approved">
|
||||
<i class="success check icon" />
|
||||
{{ $t('components.library.EditCard.status.approved') }}
|
||||
{{ t('components.library.EditCard.status.approved') }}
|
||||
</span>
|
||||
<span v-else-if="obj.is_approved === null">
|
||||
<i class="warning hourglass icon" />
|
||||
{{ $t('components.library.EditCard.status.pending') }}
|
||||
{{ t('components.library.EditCard.status.pending') }}
|
||||
</span>
|
||||
<span v-else-if="obj.is_approved === false">
|
||||
<i class="danger x icon" />
|
||||
{{ $t('components.library.EditCard.status.rejected') }}
|
||||
{{ t('components.library.EditCard.status.rejected') }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -206,13 +210,13 @@ const approve = async (approved: boolean) => {
|
|||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
{{ $t('components.library.EditCard.table.update.header.field') }}
|
||||
{{ t('components.library.EditCard.table.update.header.field') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('components.library.EditCard.table.update.header.oldValue') }}
|
||||
{{ t('components.library.EditCard.table.update.header.oldValue') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('components.library.EditCard.table.update.header.newValue') }}
|
||||
{{ t('components.library.EditCard.table.update.header.newValue') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -228,7 +232,7 @@ const approve = async (approved: boolean) => {
|
|||
<img
|
||||
class="ui image"
|
||||
alt=""
|
||||
:src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.oldRepr}/proxy?next=medium_square_crop`)"
|
||||
:src="store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.oldRepr}/proxy?next=medium_square_crop`)"
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -242,7 +246,7 @@ const approve = async (approved: boolean) => {
|
|||
</template>
|
||||
</td>
|
||||
<td v-else>
|
||||
{{ $t('components.library.EditCard.table.update.notApplicable') }}
|
||||
{{ t('components.library.EditCard.table.update.notApplicable') }}
|
||||
</td>
|
||||
|
||||
<td
|
||||
|
|
@ -253,7 +257,7 @@ const approve = async (approved: boolean) => {
|
|||
<img
|
||||
class="ui image"
|
||||
alt=""
|
||||
:src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)"
|
||||
:src="store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)"
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -274,7 +278,7 @@ const approve = async (approved: boolean) => {
|
|||
<img
|
||||
class="ui image"
|
||||
alt=""
|
||||
:src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)"
|
||||
:src="store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)"
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -300,36 +304,36 @@ const approve = async (approved: boolean) => {
|
|||
:class="['ui', {loading: isLoading}, 'success', 'basic', 'button']"
|
||||
@click="approve(true)"
|
||||
>
|
||||
{{ $t('components.library.EditCard.button.approve') }}
|
||||
{{ t('components.library.EditCard.button.approve') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="canApprove && obj.is_approved === null"
|
||||
:class="['ui', {loading: isLoading}, 'warning', 'basic', 'button']"
|
||||
@click="approve(false)"
|
||||
>
|
||||
{{ $t('components.library.EditCard.button.reject') }}
|
||||
{{ t('components.library.EditCard.button.reject') }}
|
||||
</button>
|
||||
<dangerous-button
|
||||
v-if="canDelete"
|
||||
:class="['ui', {loading: isLoading}, 'basic danger button']"
|
||||
:action="remove"
|
||||
>
|
||||
{{ $t('components.library.EditCard.button.delete') }}
|
||||
{{ t('components.library.EditCard.button.delete') }}
|
||||
<template #modal-header>
|
||||
<p>
|
||||
{{ $t('components.library.EditCard.modal.delete.header') }}
|
||||
{{ t('components.library.EditCard.modal.delete.header') }}
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-content>
|
||||
<div>
|
||||
<p>
|
||||
{{ $t('components.library.EditCard.modal.content.warning') }}
|
||||
{{ t('components.library.EditCard.modal.content.warning') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #modal-confirm>
|
||||
<p>
|
||||
{{ $t('components.library.EditCard.button.delete') }}
|
||||
{{ t('components.library.EditCard.button.delete') }}
|
||||
</p>
|
||||
</template>
|
||||
</dangerous-button>
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ const resetField = (fieldId: string) => {
|
|||
<div v-if="submittedMutation">
|
||||
<div class="ui positive message">
|
||||
<h4 class="header">
|
||||
{{ $t('components.library.EditForm.header.success') }}
|
||||
{{ t('components.library.EditForm.header.success') }}
|
||||
</h4>
|
||||
</div>
|
||||
<edit-card
|
||||
|
|
@ -159,7 +159,7 @@ const resetField = (fieldId: string) => {
|
|||
class="ui button"
|
||||
@click.prevent="submittedMutation = null"
|
||||
>
|
||||
{{ $t('components.library.EditForm.button.new') }}
|
||||
{{ t('components.library.EditForm.button.new') }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
|
|
@ -171,27 +171,27 @@ const resetField = (fieldId: string) => {
|
|||
>
|
||||
<div>
|
||||
<template v-if="showPendingReview">
|
||||
{{ $t('components.library.EditForm.header.unreviewed') }}
|
||||
{{ t('components.library.EditForm.header.unreviewed') }}
|
||||
<button
|
||||
class="ui tiny basic right floated button"
|
||||
@click.prevent="showPendingReview = false"
|
||||
>
|
||||
{{ $t('components.library.EditForm.button.showAll') }}
|
||||
{{ t('components.library.EditForm.button.showAll') }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t('components.library.EditForm.header.recentEdits') }}
|
||||
{{ t('components.library.EditForm.header.recentEdits') }}
|
||||
<button
|
||||
class="ui tiny basic right floated button"
|
||||
@click.prevent="showPendingReview = true"
|
||||
>
|
||||
{{ $t('components.library.EditForm.button.showUnreviewed') }}
|
||||
{{ t('components.library.EditForm.button.showUnreviewed') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<template #empty-state>
|
||||
<empty-state>
|
||||
{{ $t('components.library.EditForm.empty.suggestEdit') }}
|
||||
{{ t('components.library.EditForm.empty.suggestEdit') }}
|
||||
</empty-state>
|
||||
</template>
|
||||
</edit-list>
|
||||
|
|
@ -206,7 +206,7 @@ const resetField = (fieldId: string) => {
|
|||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.library.EditForm.header.failure') }}
|
||||
{{ t('components.library.EditForm.header.failure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -221,7 +221,7 @@ const resetField = (fieldId: string) => {
|
|||
v-if="!canEdit"
|
||||
class="ui message"
|
||||
>
|
||||
{{ $t('components.library.EditForm.message.noPermission') }}
|
||||
{{ t('components.library.EditForm.message.noPermission') }}
|
||||
</div>
|
||||
<template v-if="values">
|
||||
<div
|
||||
|
|
@ -250,7 +250,7 @@ const resetField = (fieldId: string) => {
|
|||
class="ui fluid search dropdown"
|
||||
>
|
||||
<option :value="null">
|
||||
{{ $t('components.library.EditForm.notApplicable') }}
|
||||
{{ t('components.library.EditForm.notApplicable') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="{ code, name } in licenses"
|
||||
|
|
@ -266,7 +266,7 @@ const resetField = (fieldId: string) => {
|
|||
@click.prevent="values[fieldConfig.id] = null"
|
||||
>
|
||||
<i class="x icon" />
|
||||
{{ $t('components.library.EditForm.button.clear') }}
|
||||
{{ t('components.library.EditForm.button.clear') }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-else-if="fieldConfig.type === 'content'">
|
||||
|
|
@ -303,7 +303,7 @@ const resetField = (fieldId: string) => {
|
|||
@click.prevent="values[fieldConfig.id] = []"
|
||||
>
|
||||
<i class="x icon" />
|
||||
{{ $t('components.library.EditForm.button.clear') }}
|
||||
{{ t('components.library.EditForm.button.clear') }}
|
||||
</button>
|
||||
</template>
|
||||
<div v-if="fieldValuesChanged(fieldConfig.id)">
|
||||
|
|
@ -313,13 +313,13 @@ const resetField = (fieldId: string) => {
|
|||
@click.prevent="resetField(fieldConfig.id)"
|
||||
>
|
||||
<i class="undo icon" />
|
||||
{{ $t('components.library.EditForm.button.reset') }}
|
||||
{{ t('components.library.EditForm.button.reset') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="field">
|
||||
<label for="summary">{{ $t('components.library.EditForm.label.summary') }}</label>
|
||||
<label for="summary">{{ t('components.library.EditForm.label.summary') }}</label>
|
||||
<textarea
|
||||
id="change-summary"
|
||||
v-model="summary"
|
||||
|
|
@ -333,7 +333,7 @@ const resetField = (fieldId: string) => {
|
|||
class="ui left floated button"
|
||||
:to="{name: 'library.tracks.detail', params: {id: object.id }}"
|
||||
>
|
||||
{{ $t('components.library.EditForm.button.cancel') }}
|
||||
{{ t('components.library.EditForm.button.cancel') }}
|
||||
</router-link>
|
||||
<button
|
||||
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
|
||||
|
|
@ -341,10 +341,10 @@ const resetField = (fieldId: string) => {
|
|||
:disabled="isLoading || !mutationPayload"
|
||||
>
|
||||
<span v-if="canEdit">
|
||||
{{ $t('components.library.EditForm.button.submit') }}
|
||||
{{ t('components.library.EditForm.button.submit') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.library.EditForm.button.suggest') }}
|
||||
{{ t('components.library.EditForm.button.suggest') }}
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -303,12 +303,12 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
:class="['item', {active: currentTab === 'uploads'}]"
|
||||
@click.prevent="currentTab = 'uploads'"
|
||||
>
|
||||
{{ $t('components.library.FileUpload.link.uploading') }}
|
||||
{{ t('components.library.FileUpload.link.uploading') }}
|
||||
<div
|
||||
v-if="files.length === 0"
|
||||
class="ui label"
|
||||
>
|
||||
{{ $t('components.library.FileUpload.empty.noFiles') }}
|
||||
{{ t('components.library.FileUpload.empty.noFiles') }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="files.length > uploadedFilesCount + erroredFilesCount"
|
||||
|
|
@ -332,12 +332,12 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
:class="['item', {active: currentTab === 'processing'}]"
|
||||
@click.prevent="currentTab = 'processing'"
|
||||
>
|
||||
{{ $t('components.library.FileUpload.link.processing') }}
|
||||
{{ t('components.library.FileUpload.link.processing') }}
|
||||
<div
|
||||
v-if="processableFiles === 0"
|
||||
class="ui label"
|
||||
>
|
||||
{{ $t('components.library.FileUpload.empty.noFiles') }}
|
||||
{{ t('components.library.FileUpload.empty.noFiles') }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="processableFiles > processedFilesCount"
|
||||
|
|
@ -361,7 +361,7 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
<div :class="['ui', {loading: isLoadingQuota}, 'container']">
|
||||
<div :class="['ui', {red: remainingSpace === 0}, {warning: remainingSpace > 0 && remainingSpace <= 50}, 'small', 'statistic']">
|
||||
<div class="label">
|
||||
{{ $t('components.library.FileUpload.label.remainingSpace') }}
|
||||
{{ t('components.library.FileUpload.label.remainingSpace') }}
|
||||
</div>
|
||||
<div class="value">
|
||||
{{ humanSize(remainingSpace * 1000 * 1000) }}
|
||||
|
|
@ -369,25 +369,25 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
</div>
|
||||
<div class="ui divider" />
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.library.FileUpload.header.local') }}
|
||||
{{ t('components.library.FileUpload.header.local') }}
|
||||
</h2>
|
||||
<div class="ui message">
|
||||
<p>
|
||||
{{ $t('components.library.FileUpload.message.local.message') }}
|
||||
{{ t('components.library.FileUpload.message.local.message') }}
|
||||
</p>
|
||||
<ul>
|
||||
<li v-if="library.privacy_level != 'me'">
|
||||
{{ $t('components.library.FileUpload.message.local.copyright') }}
|
||||
{{ t('components.library.FileUpload.message.local.copyright') }}
|
||||
</li>
|
||||
<li>
|
||||
{{ $t('components.library.FileUpload.message.local.tag') }}
|
||||
{{ t('components.library.FileUpload.message.local.tag') }}
|
||||
<a
|
||||
href="http://picard.musicbrainz.org/"
|
||||
target="_blank"
|
||||
>{{ $t('components.library.FileUpload.link.picard') }}</a>
|
||||
>{{ t('components.library.FileUpload.link.picard') }}</a>
|
||||
</li>
|
||||
<li>
|
||||
{{ $t('components.library.FileUpload.message.local.format') }}
|
||||
{{ t('components.library.FileUpload.message.local.format') }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -399,11 +399,11 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
@input-file="inputFile"
|
||||
>
|
||||
<i class="upload icon" />
|
||||
{{ $t('components.library.FileUpload.label.uploadWidget') }}
|
||||
{{ t('components.library.FileUpload.label.uploadWidget') }}
|
||||
<br>
|
||||
<br>
|
||||
<i>
|
||||
{{ $t('components.library.FileUpload.label.extensions', {extensions: supportedExtensions.join(', ')}) }}
|
||||
{{ t('components.library.FileUpload.label.extensions', {extensions: supportedExtensions.join(', ')}) }}
|
||||
</i>
|
||||
</file-upload-widget>
|
||||
</div>
|
||||
|
|
@ -416,16 +416,16 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
<thead>
|
||||
<tr>
|
||||
<th class="ten wide">
|
||||
{{ $t('components.library.FileUpload.table.upload.header.filename') }}
|
||||
{{ t('components.library.FileUpload.table.upload.header.filename') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('components.library.FileUpload.table.upload.header.size') }}
|
||||
{{ t('components.library.FileUpload.table.upload.header.size') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('components.library.FileUpload.table.upload.header.status') }}
|
||||
{{ t('components.library.FileUpload.table.upload.header.status') }}
|
||||
</th>
|
||||
<th>
|
||||
{{ $t('components.library.FileUpload.table.upload.header.actions') }}
|
||||
{{ t('components.library.FileUpload.table.upload.header.actions') }}
|
||||
</th>
|
||||
</tr>
|
||||
<tr v-if="retryableFiles.length > 1">
|
||||
|
|
@ -437,7 +437,7 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
class="ui right floated small basic button"
|
||||
@click.prevent="retry(retryableFiles)"
|
||||
>
|
||||
{{ $t('components.library.FileUpload.button.retry') }}
|
||||
{{ t('components.library.FileUpload.button.retry') }}
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
|
|
@ -466,7 +466,7 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
class="ui success label"
|
||||
>
|
||||
<span key="1">
|
||||
{{ $t('components.library.FileUpload.table.upload.status.uploaded') }}
|
||||
{{ t('components.library.FileUpload.table.upload.status.uploaded') }}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
|
|
@ -474,17 +474,17 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
class="ui warning label"
|
||||
>
|
||||
<span key="2">
|
||||
{{ $t('components.library.FileUpload.table.upload.status.uploading') }}
|
||||
{{ t('components.library.FileUpload.table.upload.status.uploading') }}
|
||||
</span>
|
||||
|
||||
{{ $t('components.library.FileUpload.table.upload.progress', {percent: parseFloat(file.progress ?? '0.00')}) }}
|
||||
{{ t('components.library.FileUpload.table.upload.progress', {percent: parseFloat(file.progress ?? '0.00')}) }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="ui label"
|
||||
>
|
||||
<span key="3">
|
||||
{{ $t('components.library.FileUpload.table.upload.status.pending') }}
|
||||
{{ t('components.library.FileUpload.table.upload.status.pending') }}
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
|
|
@ -514,7 +514,7 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
</div>
|
||||
<div class="ui divider" />
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.library.FileUpload.header.server') }}
|
||||
{{ t('components.library.FileUpload.header.server') }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="fsErrors.length > 0"
|
||||
|
|
@ -522,7 +522,7 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
class="ui negative message"
|
||||
>
|
||||
<h3 class="header">
|
||||
{{ $t('components.library.FileUpload.header.failure') }}
|
||||
{{ t('components.library.FileUpload.header.failure') }}
|
||||
</h3>
|
||||
<ul class="list">
|
||||
<li
|
||||
|
|
@ -541,13 +541,13 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
/>
|
||||
<template v-if="fsStatus && fsStatus.import">
|
||||
<h3 class="ui header">
|
||||
{{ $t('components.library.FileUpload.header.status') }}
|
||||
{{ t('components.library.FileUpload.header.status') }}
|
||||
</h3>
|
||||
<p v-if="fsStatus.import.reference !== importReference">
|
||||
{{ $t('components.library.FileUpload.description.previousImport') }}
|
||||
{{ t('components.library.FileUpload.description.previousImport') }}
|
||||
</p>
|
||||
<p v-else>
|
||||
{{ $t('components.library.FileUpload.description.import') }}
|
||||
{{ t('components.library.FileUpload.description.import') }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
|
|
@ -555,7 +555,7 @@ useEventListener(window, 'beforeunload', (event) => {
|
|||
class="ui button"
|
||||
@click="cancelFsScan"
|
||||
>
|
||||
{{ $t('components.library.FileUpload.button.cancel') }}
|
||||
{{ t('components.library.FileUpload.button.cancel') }}
|
||||
</button>
|
||||
<fs-logs :data="fsStatus.import" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
import type { FileSystem, FSEntry } from '~/types'
|
||||
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
interface Events {
|
||||
(e: 'update:modelValue', value: string[]): void
|
||||
|
|
@ -14,6 +16,8 @@ interface Props {
|
|||
modelValue: string[]
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = defineProps<Props>()
|
||||
|
||||
|
|
@ -42,7 +46,7 @@ const handleClick = (entry: FSEntry) => {
|
|||
class="ui button"
|
||||
@click.prevent="emit('import')"
|
||||
>
|
||||
{{ $t('components.library.FsBrowser.button.import') }}
|
||||
{{ t('components.library.FsBrowser.button.import') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="ui list component-fs-browser">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import type { FSLogs } from '~/types'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
interface Props {
|
||||
data: FSLogs
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -15,7 +19,7 @@ defineProps<Props>()
|
|||
class="ui active dimmer"
|
||||
>
|
||||
<div class="ui text loader">
|
||||
{{ $t('components.library.FsLogs.empty.notStarted') }}
|
||||
{{ t('components.library.FsLogs.empty.notStarted') }}
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
|
|
@ -22,6 +23,7 @@ withDefaults(defineProps<Props>(), {
|
|||
})
|
||||
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const qualityFilters = computed(() => store.getters['instance/qualityFilters'])
|
||||
|
||||
const artists = ref([])
|
||||
|
|
@ -59,7 +61,7 @@ fetchData()
|
|||
|
||||
<template>
|
||||
<main
|
||||
:key="$route?.name ?? undefined"
|
||||
:key="route?.name ?? undefined"
|
||||
v-title="labels.title"
|
||||
>
|
||||
<section class="ui vertical stripe segment">
|
||||
|
|
@ -71,7 +73,7 @@ fetchData()
|
|||
:websocket-handlers="['Listen']"
|
||||
>
|
||||
<template #title>
|
||||
{{ $t('components.library.Home.header.recentlyListened') }}
|
||||
{{ t('components.library.Home.header.recentlyListened') }}
|
||||
</template>
|
||||
</track-widget>
|
||||
</div>
|
||||
|
|
@ -81,7 +83,7 @@ fetchData()
|
|||
:filters="{scope: scope, ordering: '-creation_date'}"
|
||||
>
|
||||
<template #title>
|
||||
{{ $t('components.library.Home.header.recentlyFavorited') }}
|
||||
{{ t('components.library.Home.header.recentlyFavorited') }}
|
||||
</template>
|
||||
</track-widget>
|
||||
</div>
|
||||
|
|
@ -92,7 +94,7 @@ fetchData()
|
|||
:filters="{scope: scope, playable: true, ordering: '-modification_date'}"
|
||||
>
|
||||
<template #title>
|
||||
{{ $t('components.library.Home.header.playlists') }}
|
||||
{{ t('components.library.Home.header.playlists') }}
|
||||
</template>
|
||||
</playlist-widget>
|
||||
</div>
|
||||
|
|
@ -102,14 +104,14 @@ fetchData()
|
|||
<div class="column">
|
||||
<album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}">
|
||||
<template #title>
|
||||
{{ $t('components.library.Home.header.recentlyAdded') }}
|
||||
{{ t('components.library.Home.header.recentlyAdded') }}
|
||||
</template>
|
||||
</album-widget>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="scope === 'all'">
|
||||
<h3 class="ui header">
|
||||
{{ $t('components.library.Home.header.newChannels') }}
|
||||
{{ t('components.library.Home.header.newChannels') }}
|
||||
</h3>
|
||||
<channels-widget
|
||||
:show-modification-date="true"
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ const getErrorData = (upload: Upload) => {
|
|||
<template>
|
||||
<semantic-modal v-model:show="show">
|
||||
<h4 class="header">
|
||||
{{ $t('components.library.ImportStatusModal.header.importDetail') }}
|
||||
{{ t('components.library.ImportStatusModal.header.importDetail') }}
|
||||
</h4>
|
||||
<div
|
||||
v-if="Object.keys(upload).length > 0"
|
||||
|
|
@ -88,33 +88,33 @@ const getErrorData = (upload: Upload) => {
|
|||
v-if="upload.import_status === 'pending'"
|
||||
class="ui message"
|
||||
>
|
||||
{{ $t('components.library.ImportStatusModal.message.importDetail') }}
|
||||
{{ t('components.library.ImportStatusModal.message.importDetail') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="upload.import_status === 'finished'"
|
||||
class="ui success message"
|
||||
>
|
||||
{{ $t('components.library.ImportStatusModal.message.importSuccess') }}
|
||||
{{ t('components.library.ImportStatusModal.message.importSuccess') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="upload.import_status === 'skipped'"
|
||||
role="alert"
|
||||
class="ui warning message"
|
||||
>
|
||||
{{ $t('components.library.ImportStatusModal.warning.importSkipped') }}
|
||||
{{ t('components.library.ImportStatusModal.warning.importSkipped') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="upload.import_status === 'errored'"
|
||||
class="ui error message"
|
||||
>
|
||||
{{ $t('components.library.ImportStatusModal.error.importFailure') }}
|
||||
{{ t('components.library.ImportStatusModal.error.importFailure') }}
|
||||
</div>
|
||||
<template v-if="upload.import_status === 'errored'">
|
||||
<table class="ui very basic collapsing celled table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.ImportStatusModal.table.error.errorType') }}
|
||||
{{ t('components.library.ImportStatusModal.table.error.errorType') }}
|
||||
</td>
|
||||
<td>
|
||||
{{ getErrorData(upload).label }}
|
||||
|
|
@ -122,7 +122,7 @@ const getErrorData = (upload: Upload) => {
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.ImportStatusModal.table.error.errorDetail') }}
|
||||
{{ t('components.library.ImportStatusModal.table.error.errorDetail') }}
|
||||
</td>
|
||||
<td>
|
||||
{{ getErrorData(upload).detail }}
|
||||
|
|
@ -140,7 +140,7 @@ const getErrorData = (upload: Upload) => {
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.ImportStatusModal.table.error.help') }}
|
||||
{{ t('components.library.ImportStatusModal.table.error.help') }}
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
|
|
@ -149,7 +149,7 @@ const getErrorData = (upload: Upload) => {
|
|||
:href="getErrorData(upload).documentationUrl"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t('components.library.ImportStatusModal.link.documentation') }}
|
||||
{{ t('components.library.ImportStatusModal.link.documentation') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -157,7 +157,7 @@ const getErrorData = (upload: Upload) => {
|
|||
:href="getErrorData(upload).supportUrl"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t('components.library.ImportStatusModal.link.support') }}
|
||||
{{ t('components.library.ImportStatusModal.link.support') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -165,7 +165,7 @@ const getErrorData = (upload: Upload) => {
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.ImportStatusModal.table.error.debug') }}
|
||||
{{ t('components.library.ImportStatusModal.table.error.debug') }}
|
||||
</td>
|
||||
<td>
|
||||
<div class="ui form">
|
||||
|
|
@ -184,7 +184,7 @@ const getErrorData = (upload: Upload) => {
|
|||
</div>
|
||||
<div class="actions">
|
||||
<button class="ui deny button">
|
||||
{{ $t('components.library.ImportStatusModal.button.close') }}
|
||||
{{ t('components.library.ImportStatusModal.button.close') }}
|
||||
</button>
|
||||
</div>
|
||||
</semantic-modal>
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
<main v-title="labels.title">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.library.Podcasts.header.browse') }}
|
||||
{{ t('components.library.Podcasts.header.browse') }}
|
||||
</h2>
|
||||
<form
|
||||
:class="['ui', {'loading': isLoading}, 'form']"
|
||||
|
|
@ -132,7 +132,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
<div class="fields">
|
||||
<div class="field">
|
||||
<label for="artist-search">
|
||||
{{ $t('components.library.Podcasts.label.search') }}
|
||||
{{ t('components.library.Podcasts.label.search') }}
|
||||
</label>
|
||||
<div class="ui action input">
|
||||
<input
|
||||
|
|
@ -152,11 +152,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="tags-search">{{ $t('components.library.Podcasts.label.tags') }}</label>
|
||||
<label for="tags-search">{{ t('components.library.Podcasts.label.tags') }}</label>
|
||||
<tags-selector v-model="tags" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="artist-ordering">{{ $t('components.library.Podcasts.ordering.label') }}</label>
|
||||
<label for="artist-ordering">{{ t('components.library.Podcasts.ordering.label') }}</label>
|
||||
<select
|
||||
id="artist-ordering"
|
||||
v-model="ordering"
|
||||
|
|
@ -172,22 +172,22 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="artist-ordering-direction">{{ $t('components.library.Podcasts.ordering.direction.label') }}</label>
|
||||
<label for="artist-ordering-direction">{{ t('components.library.Podcasts.ordering.direction.label') }}</label>
|
||||
<select
|
||||
id="artist-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="ui dropdown"
|
||||
>
|
||||
<option value="+">
|
||||
{{ $t('components.library.Podcasts.ordering.direction.ascending') }}
|
||||
{{ t('components.library.Podcasts.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option value="-">
|
||||
{{ $t('components.library.Podcasts.ordering.direction.descending') }}
|
||||
{{ t('components.library.Podcasts.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="artist-results">{{ $t('components.library.Podcasts.pagination.results') }}</label>
|
||||
<label for="artist-results">{{ t('components.library.Podcasts.pagination.results') }}</label>
|
||||
<select
|
||||
id="artist-results"
|
||||
v-model="paginateBy"
|
||||
|
|
@ -228,7 +228,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
>
|
||||
<div class="ui icon header">
|
||||
<i class="podcast icon" />
|
||||
{{ $t('components.library.Podcasts.empty.noResults') }}
|
||||
{{ t('components.library.Podcasts.empty.noResults') }}
|
||||
</div>
|
||||
<router-link
|
||||
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"
|
||||
>
|
||||
<i class="upload icon" />
|
||||
{{ $t('components.library.Podcasts.button.channel') }}
|
||||
{{ t('components.library.Podcasts.button.channel') }}
|
||||
</router-link>
|
||||
<h1
|
||||
v-if="$store.state.auth.authenticated"
|
||||
|
|
@ -245,7 +245,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
<div class="actions">
|
||||
<a @click.stop.prevent="showSubscribeModal = true">
|
||||
<i class="plus icon" />
|
||||
{{ $t('components.library.Podcasts.button.feed') }}
|
||||
{{ t('components.library.Podcasts.button.feed') }}
|
||||
</a>
|
||||
</div>
|
||||
</h1>
|
||||
|
|
@ -265,7 +265,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
:fullscreen="false"
|
||||
>
|
||||
<h2 class="header">
|
||||
{{ $t('components.library.Podcasts.modal.subscription.header') }}
|
||||
{{ t('components.library.Podcasts.modal.subscription.header') }}
|
||||
</h2>
|
||||
<div
|
||||
ref="modalContent"
|
||||
|
|
@ -281,7 +281,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
</div>
|
||||
<div class="actions">
|
||||
<button class="ui basic deny button">
|
||||
{{ $t('components.library.Podcasts.button.cancel') }}
|
||||
{{ t('components.library.Podcasts.button.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
form="remote-search"
|
||||
|
|
@ -289,7 +289,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
|
|||
class="ui primary button"
|
||||
>
|
||||
<i class="bookmark icon" />
|
||||
{{ $t('components.library.Podcasts.button.subscribe') }}
|
||||
{{ t('components.library.Podcasts.button.subscribe') }}
|
||||
</button>
|
||||
</div>
|
||||
</semantic-modal>
|
||||
|
|
|
|||
|
|
@ -112,12 +112,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
<main v-title="labels.title">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.library.Radios.header.browse') }}
|
||||
{{ t('components.library.Radios.header.browse') }}
|
||||
</h2>
|
||||
<div class="ui hidden divider" />
|
||||
<div class="ui row">
|
||||
<h3 class="ui header">
|
||||
{{ $t('components.library.Radios.header.instance') }}
|
||||
{{ t('components.library.Radios.header.instance') }}
|
||||
</h3>
|
||||
<div class="ui cards">
|
||||
<radio-card
|
||||
|
|
@ -151,14 +151,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
|
||||
<div class="ui hidden divider" />
|
||||
<h3 class="ui header">
|
||||
{{ $t('components.library.Radios.header.user') }}
|
||||
{{ t('components.library.Radios.header.user') }}
|
||||
</h3>
|
||||
<router-link
|
||||
v-if="isAuthenticated"
|
||||
class="ui success button"
|
||||
to="/library/radios/build"
|
||||
>
|
||||
{{ $t('components.library.Radios.button.create') }}
|
||||
{{ t('components.library.Radios.button.create') }}
|
||||
</router-link>
|
||||
<div class="ui hidden divider" />
|
||||
<form
|
||||
|
|
@ -167,7 +167,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label for="radios-search">{{ $t('components.library.Radios.label.search') }}</label>
|
||||
<label for="radios-search">{{ t('components.library.Radios.label.search') }}</label>
|
||||
<div class="ui action input">
|
||||
<input
|
||||
id="radios-search"
|
||||
|
|
@ -186,7 +186,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="radios-ordering">{{ $t('components.library.Radios.ordering.label') }}</label>
|
||||
<label for="radios-ordering">{{ t('components.library.Radios.ordering.label') }}</label>
|
||||
<select
|
||||
id="radios-ordering"
|
||||
v-model="ordering"
|
||||
|
|
@ -202,22 +202,22 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="radios-ordering-direction">{{ $t('components.library.Radios.ordering.direction.label') }}</label>
|
||||
<label for="radios-ordering-direction">{{ t('components.library.Radios.ordering.direction.label') }}</label>
|
||||
<select
|
||||
id="radios-ordering-direction"
|
||||
v-model="orderingDirection"
|
||||
class="ui dropdown"
|
||||
>
|
||||
<option value="+">
|
||||
{{ $t('components.library.Radios.ordering.direction.ascending') }}
|
||||
{{ t('components.library.Radios.ordering.direction.ascending') }}
|
||||
</option>
|
||||
<option value="-">
|
||||
{{ $t('components.library.Radios.ordering.direction.descending') }}
|
||||
{{ t('components.library.Radios.ordering.direction.descending') }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="radios-results">{{ $t('components.library.Radios.pagination.results') }}</label>
|
||||
<label for="radios-results">{{ t('components.library.Radios.pagination.results') }}</label>
|
||||
<select
|
||||
id="radios-results"
|
||||
v-model="paginateBy"
|
||||
|
|
@ -241,7 +241,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
>
|
||||
<div class="ui icon header">
|
||||
<i class="feed icon" />
|
||||
{{ $t('components.library.Radios.empty.noResults') }}
|
||||
{{ t('components.library.Radios.empty.noResults') }}
|
||||
</div>
|
||||
<router-link
|
||||
v-if="$store.state.auth.authenticated"
|
||||
|
|
@ -249,7 +249,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
|
|||
class="ui success button labeled icon"
|
||||
>
|
||||
<i class="rss icon" />
|
||||
{{ $t('components.library.Radios.button.add') }}
|
||||
{{ t('components.library.Radios.button.add') }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
|
||||
import TrackWidget from '~/components/audio/track/Widget.vue'
|
||||
|
|
@ -11,6 +13,9 @@ interface Props {
|
|||
id: string
|
||||
}
|
||||
|
||||
const store = useStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const labels = computed(() => ({
|
||||
|
|
@ -31,12 +36,12 @@ const labels = computed(() => ({
|
|||
:object-id="id"
|
||||
/>
|
||||
<router-link
|
||||
v-if="$store.state.auth.availablePermissions['library']"
|
||||
v-if="store.state.auth.availablePermissions['library']"
|
||||
class="ui right floated button"
|
||||
:to="{name: 'manage.library.tags.detail', params: {id: id}}"
|
||||
>
|
||||
<i class="wrench icon" />
|
||||
{{ $t('components.library.TagDetail.link.moderation') }}
|
||||
{{ t('components.library.TagDetail.link.moderation') }}
|
||||
</router-link>
|
||||
|
||||
<div class="ui hidden divider" />
|
||||
|
|
@ -48,14 +53,14 @@ const labels = computed(() => ({
|
|||
>
|
||||
<template #title>
|
||||
<router-link :to="{name: 'library.artists.browse', query: {tag: id}}">
|
||||
{{ $t('components.library.TagDetail.link.artists') }}
|
||||
{{ t('components.library.TagDetail.link.artists') }}
|
||||
</router-link>
|
||||
</template>
|
||||
</artist-widget>
|
||||
<div class="ui hidden divider" />
|
||||
<div class="ui hidden divider" />
|
||||
<h3 class="ui header">
|
||||
{{ $t('components.library.TagDetail.header.channels') }}
|
||||
{{ t('components.library.TagDetail.header.channels') }}
|
||||
</h3>
|
||||
<channels-widget
|
||||
:key="'channels' + id"
|
||||
|
|
@ -73,7 +78,7 @@ const labels = computed(() => ({
|
|||
>
|
||||
<template #title>
|
||||
<router-link :to="{name: 'library.albums.browse', query: {tag: id}}">
|
||||
{{ $t('components.library.TagDetail.link.albums') }}
|
||||
{{ t('components.library.TagDetail.link.albums') }}
|
||||
</router-link>
|
||||
</template>
|
||||
</album-widget>
|
||||
|
|
@ -89,7 +94,7 @@ const labels = computed(() => ({
|
|||
:filters="{playable: true, ordering: '-creation_date', tag: id}"
|
||||
>
|
||||
<template #title>
|
||||
{{ $t('components.library.TagDetail.header.tracks') }}
|
||||
{{ t('components.library.TagDetail.header.tracks') }}
|
||||
</template>
|
||||
</track-widget>
|
||||
<div class="ui clearing hidden divider" />
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import type { Tag } from '~/types'
|
|||
import { ref, watch, onMounted, nextTick } from 'vue'
|
||||
import { isEqual } from 'lodash-es'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
|
|
@ -15,6 +17,8 @@ interface Props {
|
|||
modelValue: string[]
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = defineProps<Props>()
|
||||
|
||||
|
|
@ -99,7 +103,7 @@ onMounted(async () => {
|
|||
class="search"
|
||||
>
|
||||
<div class="default text">
|
||||
{{ $t('components.library.TagSelector.placeholder.search') }}
|
||||
{{ t('components.library.TagSelector.placeholder.search') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import type { Track, Artist, Library } from '~/types'
|
|||
import { momentFormat } from '~/utils/filters'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { getDomain } from '~/utils'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
|
|
@ -15,6 +15,10 @@ import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
|
|||
import EmbedWizard from '~/components/audio/EmbedWizard.vue'
|
||||
import SemanticModal from '~/components/semantic/Modal.vue'
|
||||
import PlayButton from '~/components/audio/PlayButton.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
import Popover from '~/components/ui/Popover.vue'
|
||||
import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
|
||||
import DangerousButton from '~/components/common/DangerousButton.vue'
|
||||
|
||||
import updateQueryString from '~/composables/updateQueryString'
|
||||
import useErrorHandler from '~/composables/useErrorHandler'
|
||||
|
|
@ -41,6 +45,7 @@ const libraries = ref([] as Library[])
|
|||
|
||||
const logger = useLogger()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
|
||||
const domain = computed(() => getDomain(track.value?.fid ?? ''))
|
||||
|
|
@ -100,6 +105,8 @@ const remove = async () => {
|
|||
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
const open = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -158,16 +165,16 @@ const remove = async () => {
|
|||
class="vibrant"
|
||||
:track="track"
|
||||
>
|
||||
{{ $t('components.library.TrackBase.button.play') }}
|
||||
{{ t('components.library.TrackBase.button.play') }}
|
||||
</play-button>
|
||||
|
||||
<track-favorite-icon
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
:border="true"
|
||||
:track="track"
|
||||
/>
|
||||
<track-playlist-icon
|
||||
v-if="$store.state.auth.authenticated"
|
||||
v-if="store.state.auth.authenticated"
|
||||
class="circular"
|
||||
:border="true"
|
||||
:track="track"
|
||||
|
|
@ -188,7 +195,7 @@ const remove = async () => {
|
|||
v-model:show="showEmbedModal"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ $t('components.library.TrackBase.modal.embed.header') }}
|
||||
{{ t('components.library.TrackBase.modal.embed.header') }}
|
||||
</h4>
|
||||
<div class="scrolling content">
|
||||
<div class="description">
|
||||
|
|
@ -200,7 +207,7 @@ const remove = async () => {
|
|||
</div>
|
||||
<div class="actions">
|
||||
<button class="ui basic deny button">
|
||||
{{ $t('components.library.TrackBase.button.cancel') }}
|
||||
{{ t('components.library.TrackBase.button.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</semantic-modal>
|
||||
|
|
@ -215,13 +222,13 @@ const remove = async () => {
|
|||
style="right: 0; left: auto"
|
||||
>
|
||||
<a
|
||||
v-if="domain != $store.getters['instance/domain']"
|
||||
v-if="domain != store.getters['instance/domain']"
|
||||
:href="track.fid"
|
||||
target="_blank"
|
||||
class="basic item"
|
||||
>
|
||||
<i class="external icon" />
|
||||
{{ $t('components.library.TrackBase.link.domain', {domain: domain}) }}
|
||||
{{ t('components.library.TrackBase.link.domain', {domain: domain}) }}
|
||||
</a>
|
||||
<div
|
||||
v-if="isEmbedable"
|
||||
|
|
@ -230,7 +237,7 @@ const remove = async () => {
|
|||
@click="showEmbedModal = !showEmbedModal"
|
||||
>
|
||||
<i class="code icon" />
|
||||
{{ $t('components.library.TrackBase.button.embed') }}
|
||||
{{ t('components.library.TrackBase.button.embed') }}
|
||||
</div>
|
||||
<a
|
||||
:href="wikipediaUrl"
|
||||
|
|
@ -239,7 +246,7 @@ const remove = async () => {
|
|||
class="basic item"
|
||||
>
|
||||
<i class="wikipedia w icon" />
|
||||
{{ $t('components.library.TrackBase.link.wikipedia') }}
|
||||
{{ t('components.library.TrackBase.link.wikipedia') }}
|
||||
</a>
|
||||
<a
|
||||
v-if="discogsUrl"
|
||||
|
|
@ -249,7 +256,7 @@ const remove = async () => {
|
|||
class="basic item"
|
||||
>
|
||||
<i class="external icon" />
|
||||
{{ $t('components.library.TrackBase.link.discogs') }}
|
||||
{{ t('components.library.TrackBase.link.discogs') }}
|
||||
</a>
|
||||
<router-link
|
||||
v-if="track.is_local"
|
||||
|
|
@ -257,30 +264,30 @@ const remove = async () => {
|
|||
class="basic item"
|
||||
>
|
||||
<i class="edit icon" />
|
||||
{{ $t('components.library.TrackBase.button.edit') }}
|
||||
{{ t('components.library.TrackBase.button.edit') }}
|
||||
</router-link>
|
||||
<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"
|
||||
:class="['ui', {loading: isLoading}, 'item']"
|
||||
@confirm="remove()"
|
||||
>
|
||||
<i class="ui trash icon" />
|
||||
{{ $t('components.library.TrackBase.button.delete') }}
|
||||
{{ t('components.library.TrackBase.button.delete') }}
|
||||
<template #modal-header>
|
||||
<p>
|
||||
{{ $t('components.library.TrackBase.modal.delete.header') }}
|
||||
{{ t('components.library.TrackBase.modal.delete.header') }}
|
||||
</p>
|
||||
</template>
|
||||
<template #modal-content>
|
||||
<div>
|
||||
<p>
|
||||
{{ $t('components.library.TrackBase.modal.delete.content.warning') }}
|
||||
{{ t('components.library.TrackBase.modal.delete.content.warning') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #modal-confirm>
|
||||
<p>
|
||||
{{ $t('components.library.TrackBase.button.delete') }}
|
||||
{{ t('components.library.TrackBase.button.delete') }}
|
||||
</p>
|
||||
</template>
|
||||
</dangerous-button>
|
||||
|
|
@ -296,22 +303,22 @@ const remove = async () => {
|
|||
</div>
|
||||
<div class="divider" />
|
||||
<router-link
|
||||
v-if="$store.state.auth.availablePermissions['library']"
|
||||
v-if="store.state.auth.availablePermissions['library']"
|
||||
class="basic item"
|
||||
:to="{name: 'manage.library.tracks.detail', params: {id: track.id}}"
|
||||
>
|
||||
<i class="wrench icon" />
|
||||
{{ $t('components.library.TrackBase.link.moderation') }}
|
||||
{{ t('components.library.TrackBase.link.moderation') }}
|
||||
</router-link>
|
||||
<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"
|
||||
class="basic item"
|
||||
:href="$store.getters['instance/absoluteUrl'](`/api/admin/music/track/${track.id}`)"
|
||||
:href="store.getters['instance/absoluteUrl'](`/api/admin/music/track/${track.id}`)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<i class="wrench icon" />
|
||||
{{ $t('components.library.TrackBase.link.django') }}
|
||||
{{ t('components.library.TrackBase.link.django') }}
|
||||
</a>
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -321,7 +328,7 @@ const remove = async () => {
|
|||
</section>
|
||||
<router-view
|
||||
v-if="track"
|
||||
:key="$route.fullPath"
|
||||
:key="route.fullPath"
|
||||
:track="track"
|
||||
:object="track"
|
||||
object-type="track"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import type { Track, Library } from '~/types'
|
|||
|
||||
import { humanSize, momentFormat, truncate } from '~/utils/filters'
|
||||
import { computed, ref, watchEffect } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
import time from '~/utils/time'
|
||||
import axios from 'axios'
|
||||
|
|
@ -21,6 +23,9 @@ interface Props {
|
|||
track: Track
|
||||
}
|
||||
|
||||
const store = useStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<Events>()
|
||||
const props = defineProps<Props>()
|
||||
|
||||
|
|
@ -59,13 +64,13 @@ watchEffect(() => {
|
|||
<template v-if="upload">
|
||||
<img
|
||||
v-if="track.cover && track.cover.urls.large_square_crop"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.large_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.large_square_crop)"
|
||||
alt="Cover Image"
|
||||
class="ui fluid image track-cover-image"
|
||||
>
|
||||
<img
|
||||
v-else-if="track.album && track.album.cover && track.album.cover.urls.large_square_crop"
|
||||
v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.large_square_crop)"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.large_square_crop)"
|
||||
alt="Cover Image"
|
||||
class="ui fluid image track-cover-image"
|
||||
>
|
||||
|
|
@ -77,69 +82,69 @@ watchEffect(() => {
|
|||
>
|
||||
<h3 class="ui header">
|
||||
<span v-if="track.artist_credit?.[0].artist?.content_category === 'music'">
|
||||
{{ $t('components.library.TrackDetail.header.track') }}
|
||||
{{ t('components.library.TrackDetail.header.track') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.library.TrackDetail.header.episode') }}
|
||||
{{ t('components.library.TrackDetail.header.episode') }}
|
||||
</span>
|
||||
</h3>
|
||||
<table class="ui basic table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.TrackDetail.table.track.duration') }}
|
||||
{{ t('components.library.TrackDetail.table.track.duration') }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<template v-if="upload.duration">
|
||||
{{ time.parse(upload.duration) }}
|
||||
</template>
|
||||
<span v-else>
|
||||
{{ $t('components.library.TrackDetail.notApplicable') }}
|
||||
{{ t('components.library.TrackDetail.notApplicable') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.TrackDetail.table.track.size') }}
|
||||
{{ t('components.library.TrackDetail.table.track.size') }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<template v-if="upload.size">
|
||||
{{ humanSize(upload.size) }}
|
||||
</template>
|
||||
<span v-else>
|
||||
{{ $t('components.library.TrackDetail.notApplicable') }}
|
||||
{{ t('components.library.TrackDetail.notApplicable') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.TrackDetail.table.track.codec') }}
|
||||
{{ t('components.library.TrackDetail.table.track.codec') }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<template v-if="upload.extension">
|
||||
{{ upload.extension }}
|
||||
</template>
|
||||
<span v-else>
|
||||
{{ $t('components.library.TrackDetail.notApplicable') }}
|
||||
{{ t('components.library.TrackDetail.notApplicable') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.TrackDetail.table.track.bitrate.label') }}
|
||||
{{ t('components.library.TrackDetail.table.track.bitrate.label') }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<template v-if="upload.bitrate">
|
||||
{{ $t('components.library.TrackDetail.table.track.bitrate.value', {bitrate: humanSize(upload.bitrate)}) }}
|
||||
{{ t('components.library.TrackDetail.table.track.bitrate.value', {bitrate: humanSize(upload.bitrate)}) }}
|
||||
</template>
|
||||
<span v-else>
|
||||
{{ $t('components.library.TrackDetail.notApplicable') }}
|
||||
{{ t('components.library.TrackDetail.notApplicable') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.TrackDetail.table.track.downloads') }}
|
||||
{{ t('components.library.TrackDetail.table.track.downloads') }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
{{ track.downloads_count }}
|
||||
|
|
@ -160,13 +165,13 @@ watchEffect(() => {
|
|||
:can-update="false"
|
||||
/>
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.library.TrackDetail.header.release') }}
|
||||
{{ t('components.library.TrackDetail.header.release') }}
|
||||
</h2>
|
||||
<table class="ui basic table ellipsis-rows">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.TrackDetail.table.release.artist') }}
|
||||
{{ t('components.library.TrackDetail.table.release.artist') }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<template
|
||||
|
|
@ -187,10 +192,10 @@ watchEffect(() => {
|
|||
<tr v-if="track.album">
|
||||
<td>
|
||||
<span v-if="track.album.artist_credit?.[0].artist.content_category === 'music'">
|
||||
{{ $t('components.library.TrackDetail.table.release.album') }}
|
||||
{{ t('components.library.TrackDetail.table.release.album') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('components.library.TrackDetail.table.release.series') }}
|
||||
{{ t('components.library.TrackDetail.table.release.series') }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
|
|
@ -201,20 +206,20 @@ watchEffect(() => {
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.TrackDetail.table.release.year') }}
|
||||
{{ t('components.library.TrackDetail.table.release.year') }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<template v-if="track.album && track.album.release_date">
|
||||
{{ momentFormat(new Date(track.album.release_date), 'Y') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t('components.library.TrackDetail.notApplicable') }}
|
||||
{{ t('components.library.TrackDetail.notApplicable') }}
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.TrackDetail.table.release.copyright') }}
|
||||
{{ t('components.library.TrackDetail.table.release.copyright') }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<span
|
||||
|
|
@ -222,13 +227,13 @@ watchEffect(() => {
|
|||
:title="track.copyright"
|
||||
>{{ truncate(track.copyright, 50) }}</span>
|
||||
<template v-else>
|
||||
{{ $t('components.library.TrackDetail.notApplicable') }}
|
||||
{{ t('components.library.TrackDetail.notApplicable') }}
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ $t('components.library.TrackDetail.table.release.license') }}
|
||||
{{ t('components.library.TrackDetail.table.release.license') }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<a
|
||||
|
|
@ -238,13 +243,13 @@ watchEffect(() => {
|
|||
rel="noopener noreferrer"
|
||||
>{{ license.name }}</a>
|
||||
<span v-else>
|
||||
{{ $t('components.library.TrackDetail.notApplicable') }}
|
||||
{{ t('components.library.TrackDetail.notApplicable') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!track.is_local">
|
||||
<td>
|
||||
{{ $t('components.library.TrackDetail.table.release.url') }}
|
||||
{{ t('components.library.TrackDetail.table.release.url') }}
|
||||
</td>
|
||||
<td :title="track.fid">
|
||||
<a
|
||||
|
|
@ -265,10 +270,10 @@ watchEffect(() => {
|
|||
rel="noreferrer noopener"
|
||||
>
|
||||
<i class="external icon" />
|
||||
{{ $t('components.library.TrackDetail.link.musicbrainz') }}
|
||||
{{ t('components.library.TrackDetail.link.musicbrainz') }}
|
||||
</a>
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.library.TrackDetail.header.playlists') }}
|
||||
{{ t('components.library.TrackDetail.header.playlists') }}
|
||||
</h2>
|
||||
<playlist-widget
|
||||
:url="'playlists/'"
|
||||
|
|
@ -276,13 +281,13 @@ watchEffect(() => {
|
|||
/>
|
||||
|
||||
<h2 class="ui header">
|
||||
{{ $t('components.library.TrackDetail.header.library') }}
|
||||
{{ t('components.library.TrackDetail.header.library') }}
|
||||
</h2>
|
||||
<library-widget
|
||||
:url="`tracks/${track.id}/libraries/`"
|
||||
@loaded="emit('libraries-loaded', $event)"
|
||||
>
|
||||
{{ $t('components.library.TrackDetail.description.library') }}
|
||||
{{ t('components.library.TrackDetail.description.library') }}
|
||||
</library-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue