From 34ea8115a8b581cbb2e80168738c9912c7e5af46 Mon Sep 17 00:00:00 2001 From: Alain Nussbaumer Date: Tue, 18 Jul 2023 14:08:52 +0200 Subject: [PATCH] [web] Fix playlist page displaying one ghost entry when no playlist are present When there are no playlists or all of them are filtered out, the list of playlists is now completely empty. --- web-src/src/components/ListPlaylists.vue | 10 ++++---- .../src/components/ModalDialogPlaylist.vue | 2 +- web-src/src/locales/de.json | 1 + web-src/src/locales/en.json | 1 + web-src/src/locales/fr.json | 1 + web-src/src/locales/zh.json | 1 + ...agePlaylist.vue => PagePlaylistFolder.vue} | 20 ++++++++++------ web-src/src/pages/PagePlaylistTracks.vue | 2 +- ...tify.vue => PagePlaylistTracksSpotify.vue} | 6 ++--- web-src/src/router/index.js | 24 +++++++++---------- 10 files changed, 40 insertions(+), 28 deletions(-) rename web-src/src/pages/{PagePlaylist.vue => PagePlaylistFolder.vue} (82%) rename web-src/src/pages/{PagePlaylistSpotify.vue => PagePlaylistTracksSpotify.vue} (99%) diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue index a56f5097..df85d0e3 100644 --- a/web-src/src/components/ListPlaylists.vue +++ b/web-src/src/components/ListPlaylists.vue @@ -3,7 +3,6 @@ v-for="playlist in playlists" :key="playlist.itemId" class="media is-align-items-center" - :playlist="playlist" @click="open_playlist(playlist.item)" >
@@ -45,13 +44,16 @@ export default { methods: { open_playlist(playlist) { - if (playlist.type !== 'folder') { + if (playlist.type === 'folder') { this.$router.push({ - name: 'playlist-tracks', + name: 'playlist-folder', params: { id: playlist.id } }) } else { - this.$router.push({ name: 'playlist', params: { id: playlist.id } }) + this.$router.push({ + name: 'playlist', + params: { id: playlist.id } + }) } }, diff --git a/web-src/src/components/ModalDialogPlaylist.vue b/web-src/src/components/ModalDialogPlaylist.vue index a412f896..d67c91b9 100644 --- a/web-src/src/components/ModalDialogPlaylist.vue +++ b/web-src/src/components/ModalDialogPlaylist.vue @@ -90,7 +90,7 @@ export default { open_playlist() { this.$emit('close') this.$router.push({ - name: 'playlist-tracks', + name: 'playlist', params: { id: this.playlist.id } }) } diff --git a/web-src/src/locales/de.json b/web-src/src/locales/de.json index 2d75407e..35cca4cc 100644 --- a/web-src/src/locales/de.json +++ b/web-src/src/locales/de.json @@ -380,6 +380,7 @@ "track-count": "{count} Track|{count} Tracks" }, "playlists": { + "title": "Playlisten", "count": "{count} Playlist|{count} Playlisten" }, "podcast": { diff --git a/web-src/src/locales/en.json b/web-src/src/locales/en.json index d59f0b53..7b3edc09 100644 --- a/web-src/src/locales/en.json +++ b/web-src/src/locales/en.json @@ -380,6 +380,7 @@ "track-count": "{count} track|{count} track|{count} tracks" }, "playlists": { + "title": "Playlists", "count": "{count} playlist|{count} playlist|{count} playlists" }, "podcast": { diff --git a/web-src/src/locales/fr.json b/web-src/src/locales/fr.json index 617f348f..ddfcefe7 100644 --- a/web-src/src/locales/fr.json +++ b/web-src/src/locales/fr.json @@ -380,6 +380,7 @@ "track-count": "{count} piste|{count} piste|{count} pistes" }, "playlists": { + "title": "Listes de lecture", "count": "{count} liste de lecture|{count} liste de lecture|{count} listes de lecture" }, "podcast": { diff --git a/web-src/src/locales/zh.json b/web-src/src/locales/zh.json index 1041ee4c..e6792f4e 100644 --- a/web-src/src/locales/zh.json +++ b/web-src/src/locales/zh.json @@ -380,6 +380,7 @@ "track-count": "{count} 只曲目|{count} 只曲目" }, "playlists": { + "title": "播放列表", "count": "{count} 个播放列表|{count} 个播放列表" }, "podcast": { diff --git a/web-src/src/pages/PagePlaylist.vue b/web-src/src/pages/PagePlaylistFolder.vue similarity index 82% rename from web-src/src/pages/PagePlaylist.vue rename to web-src/src/pages/PagePlaylistFolder.vue index eda6be0e..5b7d7353 100644 --- a/web-src/src/pages/PagePlaylist.vue +++ b/web-src/src/pages/PagePlaylistFolder.vue @@ -2,14 +2,19 @@
@@ -36,7 +41,7 @@ const dataObject = { } export default { - name: 'PagePlaylists', + name: 'PagePlaylistFolder', components: { ContentWithHeading, ListPlaylists }, beforeRouteEnter(to, from, next) { @@ -60,10 +65,9 @@ export default { }, computed: { - radio_playlists() { - return this.$store.state.config.radio_playlists + has_playlists() { + return Object.keys(this.playlists_list.itemsByGroup).length > 0 }, - playlists() { this.playlists_list.group(noop(), [ (playlist) => @@ -72,8 +76,10 @@ export default { playlist.stream_count === 0 || playlist.item_count > playlist.stream_count ]) - return this.playlists_list + }, + radio_playlists() { + return this.$store.state.config.radio_playlists } } } diff --git a/web-src/src/pages/PagePlaylistTracks.vue b/web-src/src/pages/PagePlaylistTracks.vue index 9331583b..61cf692f 100644 --- a/web-src/src/pages/PagePlaylistTracks.vue +++ b/web-src/src/pages/PagePlaylistTracks.vue @@ -57,7 +57,7 @@ const dataObject = { } export default { - name: 'PagePlaylist', + name: 'PagePlaylistTracks', components: { ContentWithHeading, ListTracks, ModalDialogPlaylist }, beforeRouteEnter(to, from, next) { diff --git a/web-src/src/pages/PagePlaylistSpotify.vue b/web-src/src/pages/PagePlaylistTracksSpotify.vue similarity index 99% rename from web-src/src/pages/PagePlaylistSpotify.vue rename to web-src/src/pages/PagePlaylistTracksSpotify.vue index e1b1a30c..91649826 100644 --- a/web-src/src/pages/PagePlaylistSpotify.vue +++ b/web-src/src/pages/PagePlaylistTracksSpotify.vue @@ -66,10 +66,10 @@ 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 store from '@/store' -import webapi from '@/webapi' import SpotifyWebApi from 'spotify-web-api-js' +import store from '@/store' import { VueEternalLoading } from '@ts-pro/vue-eternal-loading' +import webapi from '@/webapi' const PAGE_SIZE = 50 @@ -97,7 +97,7 @@ const dataObject = { } export default { - name: 'PagePlaylistSpotify', + name: 'PagePlaylistTracksSpotify', components: { ContentWithHeading, ModalDialogPlaylistSpotify, diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js index 388a1aac..2d211249 100644 --- a/web-src/src/router/index.js +++ b/web-src/src/router/index.js @@ -25,9 +25,9 @@ import PageFiles from '@/pages/PageFiles.vue' import PageGenreAlbum from '@/pages/PageGenreAlbum.vue' import PageGenreTracks from '@/pages/PageGenreTracks.vue' import PageGenres from '@/pages/PageGenres.vue' -import PagePlaylist from '@/pages/PagePlaylist.vue' -import PagePlaylistSpotify from '@/pages/PagePlaylistSpotify.vue' +import PagePlaylistFolder from '@/pages/PagePlaylistFolder.vue' import PagePlaylistTracks from '@/pages/PagePlaylistTracks.vue' +import PagePlaylistTracksSpotify from '@/pages/PagePlaylistTracksSpotify.vue' import PagePodcast from '@/pages/PagePodcast.vue' import PagePodcasts from '@/pages/PagePodcasts.vue' import PageNowPlaying from '@/pages/PageNowPlaying.vue' @@ -211,26 +211,26 @@ export const router = createRouter({ { name: 'playlists', path: '/playlists', - redirect: { name: 'playlist', params: { id: 0 } } + redirect: { name: 'playlist-folder', params: { id: 0 } } }, { - component: PagePlaylist, + component: PagePlaylistFolder, meta: { show_progress: true }, - name: 'playlist', + name: 'playlist-folder', path: '/playlists/:id' }, - { - component: PagePlaylistSpotify, - meta: { show_progress: true }, - name: 'playlist-spotify', - path: '/playlists/spotify/:id' - }, { component: PagePlaylistTracks, meta: { show_progress: true }, - name: 'playlist-tracks', + name: 'playlist', path: '/playlists/:id/tracks' }, + { + component: PagePlaylistTracksSpotify, + meta: { show_progress: true }, + name: 'playlist-spotify', + path: '/playlists/spotify/:id/tracks' + }, { component: PagePodcast, meta: { show_progress: true },