MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-11-11 06:20:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Use named route for playlist pages

Browse Source 
Switching to named routes in order to reduce future maintenance.
This commit is contained in:
Alain Nussbaumer
2023-07-10 15:37:40 +02:00
parent 05486ac7a2
commit 4b62e85c95
14 changed files with 198 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
web-src/src/pages/PagePlaylist.vue
View File

@@ -2,34 +2,14 @@
<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"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.playlist.shuffle')" />
</a>
</div>
<p class="title is-4" v-text="playlist.name" />
<p
class="heading"
v-text="$t('page.playlists.count', { count: playlists.count })"
/>
</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"
/>
<list-playlists :playlists="playlists" />
</template>
</content-with-heading>
</div>
@@ -37,28 +17,27 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogPlaylist from '@/components/ModalDialogPlaylist.vue'
import { GroupByList, noop } from '@/lib/GroupByList'
import ListPlaylists from '@/components/ListPlaylists.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)
webapi.library_playlist(to.params.id),
webapi.library_playlist_folder(to.params.id)
])
},
set(vm, response) {
vm.playlist = response[0].data
vm.tracks = new GroupByList(response[1].data)
vm.playlists_list = new GroupByList(response[1].data)
}
}
export default {
name: 'PagePlaylist',
components: { ContentWithHeading, ListTracks, ModalDialogPlaylist },
name: 'PagePlaylists',
components: { ContentWithHeading, ListPlaylists },
beforeRouteEnter(to, from, next) {
dataObject.load(to).then((response) => {
@@ -76,23 +55,25 @@ export default {
data() {
return {
playlist: {},
tracks: new GroupByList(),
show_playlist_details_modal: false
playlists_list: new GroupByList()
}
},
computed: {
uris() {
if (this.playlist.random) {
return this.tracks.map((a) => a.uri).join(',')
}
return this.playlist.uri
}
},
radio_playlists() {
return this.$store.state.config.radio_playlists
},
methods: {
play() {
webapi.player_play_uri(this.uris, true)
playlists() {
this.playlists_list.group(noop(), [
(playlist) =>
playlist.folder ||
this.radio_playlists ||
playlist.stream_count === 0 ||
playlist.item_count > playlist.stream_count
])
return this.playlists_list
}
}
}

12
web-src/src/pages/SpotifyPagePlaylist.vue → web-src/src/pages/PagePlaylistSpotify.vue
View File

@@ -51,7 +51,7 @@
:album="selected_track.album"
@close="show_track_details_modal = false"
/>
<spotify-modal-dialog-playlist
<modal-dialog-playlist-spotify
:show="show_playlist_details_modal"
:playlist="playlist"
@close="show_playlist_details_modal = false"
@@ -63,9 +63,9 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
import SpotifyModalDialogPlaylist from '@/components/SpotifyModalDialogPlaylist.vue'
import store from '@/store'
import webapi from '@/webapi'
import SpotifyWebApi from 'spotify-web-api-js'
@@ -78,8 +78,8 @@ const dataObject = {
const spotifyApi = new SpotifyWebApi()
spotifyApi.setAccessToken(store.state.spotify.webapi_token)
return Promise.all([
spotifyApi.getPlaylist(to.params.playlist_id),
spotifyApi.getPlaylistTracks(to.params.playlist_id, {
spotifyApi.getPlaylist(to.params.id),
spotifyApi.getPlaylistTracks(to.params.id, {
limit: PAGE_SIZE,
offset: 0,
market: store.state.spotify.webapi_country
@@ -97,12 +97,12 @@ const dataObject = {
}
export default {
name: 'SpotifyPagePlaylist',
name: 'PagePlaylistSpotify',
components: {
ContentWithHeading,
ModalDialogPlaylistSpotify,
SpotifyListItemTrack,
SpotifyModalDialogTrack,
SpotifyModalDialogPlaylist,
VueEternalLoading
},

101
web-src/src/pages/PagePlaylistTracks.vue Normal file
View File

@@ -0,0 +1,101 @@
<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"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<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 { GroupByList } from '@/lib/GroupByList'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogPlaylist from '@/components/ModalDialogPlaylist.vue'
import webapi from '@/webapi'
const dataObject = {
load(to) {
return Promise.all([
webapi.library_playlist(to.params.id),
webapi.library_playlist_tracks(to.params.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>

82
web-src/src/pages/PagePlaylists.vue
View File

@@ -1,82 +0,0 @@
<template>
<div class="fd-page">
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="playlist.name" />
<p
class="heading"
v-text="$t('page.playlists.count', { count: playlists.count })"
/>
</template>
<template #content>
<list-playlists :playlists="playlists" />
</template>
</content-with-heading>
</div>
</template>
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ListPlaylists from '@/components/ListPlaylists.vue'
import webapi from '@/webapi'
import { GroupByList, noop } from '@/lib/GroupByList'
const dataObject = {
load(to) {
return Promise.all([
webapi.library_playlist(to.params.playlist_id),
webapi.library_playlist_folder(to.params.playlist_id)
])
},
set(vm, response) {
vm.playlist = response[0].data
vm.playlists_list = new GroupByList(response[1].data)
}
}
export default {
name: 'PagePlaylists',
components: { ContentWithHeading, ListPlaylists },
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: {},
playlists_list: new GroupByList()
}
},
computed: {
radio_playlists() {
return this.$store.state.config.radio_playlists
},
playlists() {
this.playlists_list.group(noop(), [
(playlist) =>
playlist.folder ||
this.radio_playlists ||
playlist.stream_count === 0 ||
playlist.item_count > playlist.stream_count
])
return this.playlists_list
}
}
}
</script>
<style></style>

4
web-src/src/pages/PageSearchLibrary.vue
View File

@@ -278,7 +278,7 @@ export default {
ListComposers,
ListPlaylists,
ListTracks,
TabsSearch,
TabsSearch
},
data() {
@@ -574,7 +574,7 @@ export default {
},
open_playlist(playlist) {
this.$router.push({ path: '/playlists/' + playlist.id + '/tracks' })
this.$router.push({ name: 'playlist', params: { id: playlist.id } })
},
open_recent_search(query) {

6
web-src/src/pages/PageSearchSpotify.vue
View File

@@ -237,7 +237,7 @@
>
<template #no-more> . </template>
</VueEternalLoading>
<spotify-modal-dialog-playlist
<modal-dialog-playlist-spotify
:show="show_playlist_details_modal"
:playlist="selected_playlist"
@close="show_playlist_details_modal = false"
@@ -272,13 +272,13 @@ import * as types from '@/store/mutation_types'
import ContentText from '@/templates/ContentText.vue'
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
import SpotifyListItemArtist from '@/components/SpotifyListItemArtist.vue'
import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist.vue'
import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist.vue'
import SpotifyModalDialogPlaylist from '@/components/SpotifyModalDialogPlaylist.vue'
import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
import SpotifyWebApi from 'spotify-web-api-js'
import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
@@ -293,13 +293,13 @@ export default {
ContentText,
ContentWithHeading,
CoverArtwork,
ModalDialogPlaylistSpotify,
SpotifyListItemAlbum,
SpotifyListItemArtist,
SpotifyListItemPlaylist,
SpotifyListItemTrack,
SpotifyModalDialogAlbum,
SpotifyModalDialogArtist,
SpotifyModalDialogPlaylist,
SpotifyModalDialogTrack,
VueEternalLoading,
TabsSearch

10
web-src/src/pages/SpotifyPageBrowse.vue
View File

@@ -75,7 +75,7 @@
</a>
</template>
</spotify-list-item-playlist>
<spotify-modal-dialog-playlist
<modal-dialog-playlist-spotify
:show="show_playlist_details_modal"
:playlist="selected_playlist"
@close="show_playlist_details_modal = false"
@@ -99,10 +99,10 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import TabsMusic from '@/components/TabsMusic.vue'
import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist.vue'
import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
import SpotifyModalDialogPlaylist from '@/components/SpotifyModalDialogPlaylist.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import store from '@/store'
import * as types from '@/store/mutation_types'
@@ -146,12 +146,12 @@ export default {
name: 'SpotifyPageBrowse',
components: {
ContentWithHeading,
TabsMusic,
CoverArtwork,
ModalDialogPlaylistSpotify,
SpotifyListItemAlbum,
SpotifyListItemPlaylist,
SpotifyModalDialogAlbum,
SpotifyModalDialogPlaylist,
CoverArtwork
TabsMusic
},
beforeRouteEnter(to, from, next) {

16
web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
View File

@@ -24,7 +24,7 @@
</a>
</template>
</spotify-list-item-playlist>
<spotify-modal-dialog-playlist
<modal-dialog-playlist-spotify
:show="show_playlist_details_modal"
:playlist="selected_playlist"
@close="show_playlist_details_modal = false"
@@ -35,13 +35,13 @@
</template>
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import TabsMusic from '@/components/TabsMusic.vue'
import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist.vue'
import SpotifyModalDialogPlaylist from '@/components/SpotifyModalDialogPlaylist.vue'
import store from '@/store'
import * as types from '@/store/mutation_types'
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist.vue'
import SpotifyWebApi from 'spotify-web-api-js'
import store from '@/store'
import TabsMusic from '@/components/TabsMusic.vue'
const dataObject = {
load(to) {
@@ -68,9 +68,9 @@ export default {
name: 'SpotifyPageBrowseFeaturedPlaylists',
components: {
ContentWithHeading,
TabsMusic,
ModalDialogPlaylistSpotify,
SpotifyListItemPlaylist,
SpotifyModalDialogPlaylist
TabsMusic
},
beforeRouteEnter(to, from, next) {