fix(front): display multi artist credits in one line in player and in queue

This commit is contained in:
ArneBo 2025-03-24 15:04:29 +01:00
parent b0d3179f18
commit f502cd25eb
2 changed files with 32 additions and 25 deletions

View File

@ -296,30 +296,32 @@ if (!isWebGLSupported) {
</template>
</h2>
<span>
<template
v-for="ac in currentTrack.artistCredit"
:key="ac.artist.id"
>
<router-link
:to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
@click.stop.prevent=""
<Layout flex gap-8>
<template
v-for="ac in currentTrack.artistCredit"
:key="ac.artist.id"
>
<Pill>
<template #image>
<img
v-if="ac.artist.cover"
v-lazy="ac.artist.cover?.urls.small_square_crop"
>
<i
v-else
class="bi bi-person-circle"
/>
</template>
{{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
</Pill>
</router-link>
<span>{{ ac.joinphrase }}</span>
</template>
<router-link
:to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
@click.stop.prevent=""
>
<Pill>
<template #image>
<img
v-if="ac.artist.cover"
v-lazy="ac.artist.cover?.urls.small_square_crop"
>
<i
v-else
class="bi bi-person-circle"
/>
</template>
{{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
</Pill>
</router-link>
<span>{{ ac.joinphrase }}</span>
</template>
</Layout>
</span>
<div
v-if="currentTrack && errored"

View File

@ -15,6 +15,7 @@ import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
import PlayerControls from './PlayerControls.vue'
import VolumeControl from './VolumeControl.vue'
import Layout from '~/components/ui/Layout.vue'
import Button from '~/components/ui/Button.vue'
const {
@ -230,7 +231,11 @@ const hideArtist = () => {
<strong>
{{ currentTrack.title }}
</strong>
<div class="meta">
<Layout
flex
no-gap
class="meta"
>
<div
v-for="ac in currentTrack.artistCredit"
:key="ac.artist.id"
@ -242,7 +247,7 @@ const hideArtist = () => {
<span class="middle slash symbol" />
{{ currentTrack.albumTitle ?? t('components.audio.Player.meta.unknownAlbum') }}
</template>
</div>
</Layout>
</div>
</div>
<div