owntone-server/web-src/src/pages/PagePlaylist.vue
Alain Nussbaumer 979e60630e [web] Fix spacing of pages due to changes in the Now Playing Page
The top and bottom spacing for all the pages have been streamlined. Moreover, CSS styles have been reduced.
2023-06-29 22:52:21 +02:00

104 lines
2.6 KiB
Vue

<template>
<div class="fd-page">
<content-with-heading>
<template #heading-left>
<div class="title is-4" v-text="playlist.name" />
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
class="button is-small is-light is-rounded"
@click="show_playlist_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<span v-text="$t('page.playlist.shuffle')" />
</a>
</div>
</template>
<template #content>
<p
class="heading has-text-centered-mobile"
v-text="$t('page.playlist.track-count', { count: tracks.count })"
/>
<list-tracks :tracks="tracks" :uris="uris" />
<modal-dialog-playlist
:show="show_playlist_details_modal"
:playlist="playlist"
:uris="uris"
@close="show_playlist_details_modal = false"
/>
</template>
</content-with-heading>
</div>
</template>
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogPlaylist from '@/components/ModalDialogPlaylist.vue'
import webapi from '@/webapi'
import { GroupByList } from '@/lib/GroupByList'
const dataObject = {
load(to) {
return Promise.all([
webapi.library_playlist(to.params.playlist_id),
webapi.library_playlist_tracks(to.params.playlist_id)
])
},
set(vm, response) {
vm.playlist = response[0].data
vm.tracks = new GroupByList(response[1].data)
}
}
export default {
name: 'PagePlaylist',
components: { ContentWithHeading, ListTracks, ModalDialogPlaylist },
beforeRouteEnter(to, from, next) {
dataObject.load(to).then((response) => {
next((vm) => dataObject.set(vm, response))
})
},
beforeRouteUpdate(to, from, next) {
const vm = this
dataObject.load(to).then((response) => {
dataObject.set(vm, response)
next()
})
},
data() {
return {
playlist: {},
tracks: new GroupByList(),
show_playlist_details_modal: false
}
},
computed: {
uris() {
if (this.playlist.random) {
return this.tracks.map((a) => a.uri).join(',')
}
return this.playlist.uri
}
},
methods: {
play() {
webapi.player_play_uri(this.uris, true)
}
}
}
</script>
<style></style>