MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(front): use new ui components in track modal and track-mobile-row, render track-modal only once in parent and populate with data from mobile-row

This commit is contained in:
ArneBo 2025-06-02 00:22:16 +02:00 committed by Petitminion
parent 2029c863d6
commit e8acfcb733
3 changed files with 119 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
front/src/components/audio/track/MobileRow.vue
View File

@ -12,9 +12,10 @@ import { useStore } from '~/store'
import usePlayOptions from '~/composables/audio/usePlayOptions' import usePlayOptions from '~/composables/audio/usePlayOptions'
import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue' import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
import TrackModal from '~/components/audio/track/Modal.vue'
import { generateTrackCreditString } from '~/utils/utils' import { generateTrackCreditString } from '~/utils/utils'
import Button from '~/components/ui/Button.vue'
interface Props extends PlayOptionsProps { interface Props extends PlayOptionsProps {
track: Track track: Track
index: number index: number
@ -113,8 +114,10 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
/> />
</p> </p>
</div> </div>
<div <track-favorite-icon
v-if="store.state.auth.authenticated" v-if="store.state.auth.authenticated"
ghost
tiny
:class="[ :class="[
'meta', 'meta',
'right', 'right',
@ -123,17 +126,13 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
'mobile', 'mobile',
{ 'with-art': showArt }, { 'with-art': showArt },
]" ]"
role="button"
>
<track-favorite-icon
class="tiny"
:border="false"
:track="track" :track="track"
/> />
</div> <Button
<div
role="button"
:aria-label="actionsButtonLabel" :aria-label="actionsButtonLabel"
icon="bi-three-dots-vertical"
ghost
tiny
:class="[ :class="[
'modal-button', 'modal-button',
'right', 'right',
@ -142,16 +141,7 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
'mobile', 'mobile',
{ 'with-art': showArt }, { 'with-art': showArt },
]" ]"
@click.prevent.exact="showTrackModal = !showTrackModal" @click.prevent.exact="$emit('open-modal', track, index)"
>
<i class="ellipsis large vertical icon" />
</div>
<track-modal
v-if="showTrackModal"
:track="track"
:index="index"
:is-artist="isArtist"
:is-album="isAlbum"
/> />
</div> </div>
</template> </template>

154
front/src/components/audio/track/Modal.vue
View File

@ -12,6 +12,8 @@ import { useVModel } from '@vueuse/core'
import { generateTrackCreditString, getArtistCoverUrl } from '~/utils/utils' import { generateTrackCreditString, getArtistCoverUrl } from '~/utils/utils'
import Modal from '~/components/ui/Modal.vue' import Modal from '~/components/ui/Modal.vue'
import Button from '~/components/ui/Button.vue'
import Layout from '~/components/ui/Layout.vue'
interface Events { interface Events {
(e: 'update:show', value: boolean): void (e: 'update:show', value: boolean): void
@ -95,6 +97,7 @@ const labels = computed(() => ({
<Modal <Modal
v-model="show" v-model="show"
:title="track.title" :title="track.title"
class="small"
> >
<div class="header"> <div class="header">
<div class="ui large centered rounded image"> <div class="ui large centered rounded image">
@ -127,126 +130,105 @@ const labels = computed(() => ({
{{ generateTrackCreditString(track) }} {{ generateTrackCreditString(track) }}
</h4> </h4>
</div> </div>
<div class="ui hidden divider" />
<div class="content"> <div class="content">
<div class="ui one column unstackable grid"> <Layout
<div stack
v-if="store.state.auth.authenticated && track.artist_credit?.[0].artist.content_category !== 'podcast'" no-gap
class="row"
> >
<div <Button
tabindex="0" v-if="store.state.auth.authenticated && track.artist_credit?.[0].artist.content_category !== 'podcast'"
class="column" full
role="button" ghost
:aria-label="favoriteButton" :aria-label="favoriteButton"
:icon="isFavorite ? 'bi-heart-fill' : 'bi-heart'"
:is-active="isFavorite"
@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' ]" /> {{ favoriteButton }}
<span class="track-modal list-item">{{ favoriteButton }}</span> </Button>
</div> <Button
</div> full
<div class="row"> ghost
<div
class="column"
role="button"
:aria-label="labels.addToQueue" :aria-label="labels.addToQueue"
icon="bi-plus"
@click.stop.prevent="enqueue(); show = false" @click.stop.prevent="enqueue(); show = false"
> >
<i class="plus icon track-modal list-icon" /> {{ labels.addToQueue }}
<span class="track-modal list-item">{{ labels.addToQueue }}</span> </Button>
</div> <Button
</div> full
<div class="row"> ghost
<div
class="column"
role="button"
:aria-label="labels.playNext" :aria-label="labels.playNext"
@click.stop.prevent="enqueueNext(true);show = false" icon="bi-skip-end"
@click.stop.prevent="enqueueNext(true); show = false"
> >
<i class="step forward icon track-modal list-icon" /> {{ labels.playNext }}
<span class="track-modal list-item">{{ labels.playNext }}</span> </Button>
</div> <Button
</div> full
<div class="row"> ghost
<div
class="column"
role="button"
:aria-label="labels.startRadio" :aria-label="labels.startRadio"
@click.stop.prevent="() => { store.dispatch('radios/start', { type: 'similar', objectId: track.id }); show = false }" icon="bi-rss"
@click.stop.prevent="store.dispatch('radios/start', { type: 'similar', objectId: track.id }); show = false"
> >
<i class="rss icon track-modal list-icon" /> {{ labels.startRadio }}
<span class="track-modal list-item">{{ labels.startRadio }}</span> </Button>
</div> <Button
</div> full
<div class="row"> ghost
<div
class="column"
role="button"
:aria-label="labels.addToPlaylist" :aria-label="labels.addToPlaylist"
icon="bi-list"
@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">
{{ labels.addToPlaylist }} {{ labels.addToPlaylist }}
</span> </Button>
</div> <hr>
</div> <Button
<div class="ui divider" />
<div
v-if="!isAlbum && track.album" v-if="!isAlbum && track.album"
class="row" full
> ghost
<div
class="column"
role="button"
:aria-label="albumDetailsButton" :aria-label="albumDetailsButton"
icon="bi-disc"
@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" /> {{ albumDetailsButton }}
<span class="track-modal list-item">{{ albumDetailsButton }}</span> </Button>
</div> <template
</div>
<div
v-if="!isArtist" v-if="!isArtist"
class="row"
> >
<div <Button
v-for="ac in track.artist_credit" v-for="ac in track.artist_credit"
:key="ac.artist.id" :key="ac.artist.id"
class="column" full
role="button" ghost
:aria-label="artistDetailsButton" :aria-label="artistDetailsButton"
icon="bi-person-fill"
@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" /> {{ ac.credit }}<span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
<span class="track-modal list-item">{{ ac.credit }}</span> </Button>
<span v-if="ac.joinphrase">{{ ac.joinphrase }}</span> </template>
</div> <Button
</div> full
<div class="row"> ghost
<div
class="column"
role="button"
:aria-label="trackDetailsButton" :aria-label="trackDetailsButton"
icon="bi-info-circle"
@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" /> {{ trackDetailsButton }}
<span class="track-modal list-item">{{ trackDetailsButton }}</span> </Button>
</div> <hr>
</div> <Button
<div class="ui divider" />
<div
v-for="obj in getReportableObjects({ track, album: track.album, artistCredit: track.artist_credit })" v-for="obj in getReportableObjects({ track, album: track.album, artistCredit: track.artist_credit })"
:key="obj.target.type + obj.target.id" :key="obj.target.type + obj.target.id"
class="row" full
ghost
icon="bi-share"
@click.stop.prevent="report(obj)" @click.stop.prevent="report(obj)"
> >
<div class="column"> {{ obj.label }}
<i class="share icon track-modal list-icon" /> </Button>
<span class="track-modal list-item">{{ obj.label }}</span> </Layout>
</div>
</div>
</div>
</div> </div>
</Modal> </Modal>
</template> </template>

21
front/src/components/audio/track/Table.vue
View File

@ -8,6 +8,8 @@ import { ref, computed } from 'vue'
import axios from 'axios' import axios from 'axios'
import TrackMobileRow from '~/components/audio/track/MobileRow.vue' import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
import TrackModal from '~/components/audio/track/Modal.vue'
import Pagination from '~/components/ui/Pagination.vue' import Pagination from '~/components/ui/Pagination.vue'
import TrackRow from '~/components/audio/track/Row.vue' import TrackRow from '~/components/audio/track/Row.vue'
import Input from '~/components/ui/Input.vue' import Input from '~/components/ui/Input.vue'
@ -143,6 +145,16 @@ const updatePage = (page: number) => {
emit('page-changed', page) emit('page-changed', page)
} }
} }
const showTrackModal = ref(false)
const modalTrack = ref<Track | null>(null)
const modalIndex = ref<number | null>(null)
function openTrackModal(track: Track, index: number) {
showTrackModal.value = true
modalTrack.value = track
modalIndex.value = index
}
</script> </script>
<template> <template>
@ -257,6 +269,15 @@ const updatePage = (page: number) => {
:is-artist="isArtist" :is-artist="isArtist"
:is-album="isAlbum" :is-album="isAlbum"
:is-podcast="isPodcast" :is-podcast="isPodcast"
@open-modal="openTrackModal"
/>
<track-modal
v-if="modalTrack"
v-model:show="showTrackModal"
:track="modalTrack"
:index="modalIndex ?? 0"
:is-artist="isArtist"
:is-album="isAlbum"
/> />
<Pagination <Pagination
v-if="paginateResults" v-if="paginateResults"