[web] Use named route for playlist pages

Switching to named routes in order to reduce future maintenance.

web-src/src/components/ListItemPlaylistSpotify.vue

@@ -12,13 +12,14 @@
 
 <script>
 export default {
-  name: 'SpotifyListItemPlaylist',
+  name: 'ListItemPlaylistSpotify',
   props: ['playlist'],
 
   methods: {
     open_playlist() {
       this.$router.push({
-        path: '/music/spotify/playlists/' + this.playlist.id
+        name: 'playlist-spotify',
+        params: { id: this.playlist.id }
       })
     }
   }

web-src/src/components/ListPlaylists.vue

@@ -46,9 +46,12 @@ export default {
   methods: {
     open_playlist(playlist) {
       if (playlist.type !== 'folder') {
-        this.$router.push({ path: '/playlists/' + playlist.id + '/tracks' })
+        this.$router.push({
+          name: 'playlist-tracks',
+          params: { id: playlist.id }
+        })
       } else {
-        this.$router.push({ path: '/playlists/' + playlist.id })
+        this.$router.push({ name: 'playlist', params: { id: playlist.id } })
       }
     },
 

web-src/src/components/ModalDialogPlaylist.vue

@@ -89,7 +89,10 @@ export default {
 
     open_playlist() {
       this.$emit('close')
-      this.$router.push({ path: '/playlists/' + this.playlist.id + '/tracks' })
+      this.$router.push({
+        name: 'playlist-tracks',
+        params: { id: this.playlist.id }
+      })
     }
   }
 }

web-src/src/components/ModalDialogPlaylistSpotify.vue

@@ -79,7 +79,7 @@
 import webapi from '@/webapi'
 
 export default {
-  name: 'SpotifyModalDialogPlaylist',
+  name: 'ModalDialogPlaylistSpotify',
   props: ['show', 'playlist'],
   emits: ['close'],
 
@@ -100,8 +100,10 @@ export default {
     },
 
     open_playlist() {
+      this.$emit('close')
       this.$router.push({
-        path: '/music/spotify/playlists/' + this.playlist.id
+        name: 'playlist-spotify',
+        params: { id: this.playlist.id }
       })
     }
   }

web-src/src/components/NavbarTop.vue

@@ -6,10 +6,7 @@
     aria-label="main navigation"
   >
     <div class="navbar-brand">
-      <navbar-item-link
+      <navbar-item-link v-if="is_visible_playlists" :to="{ name: 'playlists' }">
-        v-if="is_visible_playlists"
-        :to="{ path: '/playlists' }"
-      >
         <mdicon class="icon" name="music-box-multiple" size="16" />
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_music" :to="{ path: '/music' }">
@@ -60,7 +57,7 @@
             />
           </a>
           <div class="navbar-dropdown is-right">
-            <navbar-item-link :to="{ path: '/playlists' }">
+            <navbar-item-link :to="{ name: 'playlists' }">
               <mdicon class="icon" name="music-box-multiple" size="16" />
               <b v-text="$t('navigation.playlists')" />
             </navbar-item-link>

web-src/src/pages/PagePlaylist.vue

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

web-src/src/pages/PagePlaylistSpotify.vue

@@ -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.getPlaylist(to.params.id),
-      spotifyApi.getPlaylistTracks(to.params.playlist_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
   },
 

web-src/src/pages/PagePlaylistTracks.vue

@@ -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>

web-src/src/pages/PagePlaylists.vue

@@ -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>

web-src/src/pages/PageSearchLibrary.vue

@@ -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) {

web-src/src/pages/PageSearchSpotify.vue

@@ -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

web-src/src/pages/SpotifyPageBrowse.vue

@@ -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,
+    TabsMusic
-    CoverArtwork
   },
 
   beforeRouteEnter(to, from, next) {

web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue

@@ -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) {

web-src/src/router/index.js

@@ -4,6 +4,9 @@ import PageAbout from '@/pages/PageAbout.vue'
 import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
 import PageAudiobooksAlbums from '@/pages/PageAudiobooksAlbums.vue'
 import PageFiles from '@/pages/PageFiles.vue'
+import PagePlaylist from '@/pages/PagePlaylist.vue'
+import PagePlaylistSpotify from '@/pages/PagePlaylistSpotify.vue'
+import PagePlaylistTracks from '@/pages/PagePlaylistTracks.vue'
 import PagePodcast from '@/pages/PagePodcast.vue'
 import PagePodcasts from '@/pages/PagePodcasts.vue'
 import PageNowPlaying from '@/pages/PageNowPlaying.vue'
@@ -24,8 +27,6 @@ import PageComposer from '@/pages/PageComposer.vue'
 import PageComposerTracks from '@/pages/PageComposerTracks.vue'
 import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue'
 import PageAudiobooksArtist from '@/pages/PageAudiobooksArtist.vue'
-import PagePlaylists from '@/pages/PagePlaylists.vue'
-import PagePlaylist from '@/pages/PagePlaylist.vue'
 import PageRadioStreams from '@/pages/PageRadioStreams.vue'
 import PageSearchLibrary from '@/pages/PageSearchLibrary.vue'
 import PageSearchSpotify from '@/pages/PageSearchSpotify.vue'
@@ -34,7 +35,6 @@ import SpotifyPageBrowseNewReleases from '@/pages/SpotifyPageBrowseNewReleases.v
 import SpotifyPageBrowseFeaturedPlaylists from '@/pages/SpotifyPageBrowseFeaturedPlaylists.vue'
 import SpotifyPageArtist from '@/pages/SpotifyPageArtist.vue'
 import SpotifyPageAlbum from '@/pages/SpotifyPageAlbum.vue'
-import SpotifyPagePlaylist from '@/pages/SpotifyPagePlaylist.vue'
 import SettingsPageWebinterface from '@/pages/SettingsPageWebinterface.vue'
 import SettingsPageArtwork from '@/pages/SettingsPageArtwork.vue'
 import SettingsPageOnlineServices from '@/pages/SettingsPageOnlineServices.vue'
@@ -152,7 +152,29 @@ export const router = createRouter({
     {
       component: PageNowPlaying,
       name: 'now-playing',
-      path: '/now-playing',
+      path: '/now-playing'
+    },
+    {
+      name: 'playlists',
+      redirect: '/playlist/0'
+    },
+    {
+      component: PagePlaylist,
+      meta: { show_progress: true },
+      name: 'playlist',
+      path: '/playlist/:id'
+    },
+    {
+      component: PagePlaylistSpotify,
+      meta: { show_progress: true },
+      name: 'playlist-spotify',
+      path: '/playlist/spotify/:id'
+    },
+    {
+      component: PagePlaylistTracks,
+      meta: { show_progress: true },
+      name: 'playlist-tracks',
+      path: '/playlist/:id/tracks'
     },
     {
       component: PagePodcast,
@@ -164,7 +186,7 @@ export const router = createRouter({
       component: PagePodcasts,
       meta: { show_progress: true },
       name: 'podcasts',
-      path: '/podcasts',
+      path: '/podcasts'
     },
     {
       path: '/audiobooks',
@@ -194,22 +216,6 @@ export const router = createRouter({
       component: PageRadioStreams,
       meta: { show_progress: true }
     },
-    {
-      path: '/playlists',
-      redirect: '/playlists/0'
-    },
-    {
-      path: '/playlists/:playlist_id',
-      name: 'Playlists',
-      component: PagePlaylists,
-      meta: { show_progress: true }
-    },
-    {
-      path: '/playlists/:playlist_id/tracks',
-      name: 'Playlist',
-      component: PagePlaylist,
-      meta: { show_progress: true }
-    },
     {
       component: PageQueue,
       name: 'queue',
@@ -228,7 +234,7 @@ export const router = createRouter({
     {
       component: PageSearchSpotify,
       name: 'search-spotify',
-      path: '/search/spotify',
+      path: '/search/spotify'
     },
     {
       path: '/music/spotify',
@@ -260,12 +266,6 @@ export const router = createRouter({
       component: SpotifyPageAlbum,
       meta: { show_progress: true }
     },
-    {
-      path: '/music/spotify/playlists/:playlist_id',
-      name: 'Spotify Playlist',
-      component: SpotifyPagePlaylist,
-      meta: { show_progress: true }
-    },
     {
       path: '/settings/webinterface',
       name: 'Settings Webinterface',