From 30aee058bfae6e7bc667fe99b18445a30af8ff1b Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 23 Mar 2024 23:46:47 +0100
Subject: [PATCH] [web] Streamline name of component properties to prepare for
 refactoring

---
 web-src/src/components/ListAlbums.vue         | 14 ++++----
 web-src/src/components/ListArtists.vue        |  6 ++--
 web-src/src/components/ListComposers.vue      | 10 +++---
 web-src/src/components/ListGenres.vue         | 18 +++++-----
 .../src/components/ListItemAlbumSpotify.vue   | 10 +++---
 web-src/src/components/ListPlaylists.vue      | 34 +++++++++---------
 web-src/src/components/ListTracks.vue         | 13 ++++---
 web-src/src/components/ModalDialogAlbum.vue   | 12 ++-----
 web-src/src/pages/PageAlbum.vue               |  4 +--
 web-src/src/pages/PageAlbums.vue              | 34 ++++++++----------
 web-src/src/pages/PageArtist.vue              |  7 ++--
 web-src/src/pages/PageArtistSpotify.vue       | 35 ++++++++-----------
 web-src/src/pages/PageArtistTracks.vue        | 11 +++---
 web-src/src/pages/PageArtists.vue             | 32 +++++++----------
 web-src/src/pages/PageAudiobooksAlbum.vue     |  3 +-
 web-src/src/pages/PageAudiobooksAlbums.vue    |  8 ++---
 web-src/src/pages/PageAudiobooksArtist.vue    |  2 +-
 web-src/src/pages/PageAudiobooksArtists.vue   |  8 ++---
 web-src/src/pages/PageAudiobooksGenres.vue    |  4 +--
 web-src/src/pages/PageComposerAlbums.vue      |  3 +-
 web-src/src/pages/PageComposerTracks.vue      |  5 ++-
 web-src/src/pages/PageComposers.vue           |  4 +--
 web-src/src/pages/PageFiles.vue               |  9 +++--
 web-src/src/pages/PageGenreAlbums.vue         |  5 ++-
 web-src/src/pages/PageGenreTracks.vue         |  4 +--
 web-src/src/pages/PageGenres.vue              |  4 +--
 web-src/src/pages/PageMusic.vue               | 12 +++----
 web-src/src/pages/PageMusicRecentlyAdded.vue  |  8 ++---
 web-src/src/pages/PageMusicRecentlyPlayed.vue |  6 ++--
 .../src/pages/PageMusicSpotifyNewReleases.vue |  2 +-
 web-src/src/pages/PagePlaylistFolder.vue      |  4 +--
 web-src/src/pages/PagePlaylistTracks.vue      |  2 +-
 web-src/src/pages/PagePodcasts.vue            |  2 +-
 web-src/src/pages/PageRadioStreams.vue        |  2 +-
 34 files changed, 151 insertions(+), 186 deletions(-)

diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 97836ba6..b2c839d4 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -1,5 +1,5 @@
 <template>
-  <template v-for="album in albums" :key="album.itemId">
+  <template v-for="album in items" :key="album.itemId">
     <div v-if="!album.isItem" class="mt-6 mb-5 py-2">
       <span
         :id="'index_' + album.index"
@@ -8,7 +8,7 @@
       />
     </div>
     <div
-      v-else-if="album.isItem"
+      v-else
       class="media is-align-items-center"
       @click="open_album(album.item)"
     >
@@ -78,17 +78,17 @@ export default {
   name: 'ListAlbums',
   components: { CoverArtwork, ModalDialog, ModalDialogAlbum },
   props: {
-    albums: { required: true, type: Object },
+    items: { required: true, type: Object },
     media_kind: { default: '', type: String }
   },
   emits: ['play-count-changed', 'podcast-deleted'],
 
   data() {
     return {
-      show_details_modal: false,
+      rss_playlist_to_remove: {},
       selected_album: {},
-      show_remove_podcast_modal: false,
-      rss_playlist_to_remove: {}
+      show_details_modal: false,
+      show_remove_podcast_modal: false
     }
   },
 
@@ -101,7 +101,7 @@ export default {
     },
 
     media_kind_resolved() {
-      return this.media_kind ? this.media_kind : this.selected_album.media_kind
+      return this.media_kind || this.selected_album.media_kind
     }
   },
 
diff --git a/web-src/src/components/ListArtists.vue b/web-src/src/components/ListArtists.vue
index 4e157436..18c9ff49 100644
--- a/web-src/src/components/ListArtists.vue
+++ b/web-src/src/components/ListArtists.vue
@@ -1,5 +1,5 @@
 <template>
-  <template v-for="artist in artists" :key="artist.itemId">
+  <template v-for="artist in items" :key="artist.itemId">
     <div v-if="!artist.isItem" class="mt-6 mb-5 py-2">
       <div class="media-content is-clipped">
         <span
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div
-      v-else-if="artist.isItem"
+      v-else
       class="media is-align-items-center"
       @click="open_artist(artist.item)"
     >
@@ -40,7 +40,7 @@ export default {
   name: 'ListArtists',
   components: { ModalDialogArtist },
   props: {
-    artists: { required: true, type: Object }
+    items: { required: true, type: Object }
   },
 
   data() {
diff --git a/web-src/src/components/ListComposers.vue b/web-src/src/components/ListComposers.vue
index 19215710..61bece3f 100644
--- a/web-src/src/components/ListComposers.vue
+++ b/web-src/src/components/ListComposers.vue
@@ -1,5 +1,5 @@
 <template>
-  <template v-for="composer in composers" :key="composer.itemId">
+  <template v-for="composer in items" :key="composer.itemId">
     <div v-if="!composer.isItem" class="mt-6 mb-5 py-2">
       <div class="media-content is-clipped">
         <span
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div
-      v-else-if="composer.isItem"
+      v-else
       class="media is-align-items-center"
       @click="open_composer(composer.item)"
     >
@@ -40,13 +40,13 @@ export default {
   name: 'ListComposers',
   components: { ModalDialogComposer },
   props: {
-    composers: { required: true, type: Object }
+    items: { required: true, type: Object }
   },
 
   data() {
     return {
-      show_details_modal: false,
-      selected_composer: {}
+      selected_composer: {},
+      show_details_modal: false
     }
   },
 
diff --git a/web-src/src/components/ListGenres.vue b/web-src/src/components/ListGenres.vue
index e4800863..f2b12281 100644
--- a/web-src/src/components/ListGenres.vue
+++ b/web-src/src/components/ListGenres.vue
@@ -1,5 +1,5 @@
 <template>
-  <template v-for="genre in genres" :key="genre.itemId">
+  <template v-for="genre in items" :key="genre.itemId">
     <div v-if="!genre.isItem" class="mt-6 mb-5 py-2">
       <div class="media-content is-clipped">
         <span
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div
-      v-else-if="genre.isItem"
+      v-else
       class="media is-align-items-center"
       @click="open_genre(genre.item)"
     >
@@ -41,28 +41,28 @@ export default {
   name: 'ListGenres',
   components: { ModalDialogGenre },
   props: {
-    genres: { required: true, type: Object },
+    items: { required: true, type: Object },
     media_kind: { required: true, type: String }
   },
 
   data() {
     return {
-      show_details_modal: false,
-      selected_genre: {}
+      selected_genre: {},
+      show_details_modal: false
     }
   },
 
   methods: {
+    open_dialog(genre) {
+      this.selected_genre = genre
+      this.show_details_modal = true
+    },
     open_genre(genre) {
       this.$router.push({
         name: 'genre-albums',
         params: { name: genre.name },
         query: { media_kind: this.media_kind }
       })
-    },
-    open_dialog(genre) {
-      this.selected_genre = genre
-      this.show_details_modal = true
     }
   }
 }
diff --git a/web-src/src/components/ListItemAlbumSpotify.vue b/web-src/src/components/ListItemAlbumSpotify.vue
index 93d7f13b..92159170 100644
--- a/web-src/src/components/ListItemAlbumSpotify.vue
+++ b/web-src/src/components/ListItemAlbumSpotify.vue
@@ -4,16 +4,14 @@
       <slot name="artwork" />
     </div>
     <div class="media-content is-clickable is-clipped">
-      <h1 class="title is-6" v-text="album.name" />
+      <h1 class="title is-6" v-text="item.name" />
       <h2
         class="subtitle is-7 has-text-grey has-text-weight-bold"
-        v-text="album.artists[0].name"
+        v-text="item.artists[0]?.name"
       />
       <h2
         class="subtitle is-7 has-text-grey"
-        v-text="
-          [album.album_type, $filters.date(album.release_date)].join(', ')
-        "
+        v-text="[item.album_type, $filters.date(item.release_date)].join(', ')"
       />
     </div>
     <div class="media-right">
@@ -25,7 +23,7 @@
 <script>
 export default {
   name: 'ListItemAlbumSpotify',
-  props: { album: { required: true, type: Object } }
+  props: { item: { required: true, type: Object } }
 }
 </script>
 
diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue
index dbc10dba..724c8aa5 100644
--- a/web-src/src/components/ListPlaylists.vue
+++ b/web-src/src/components/ListPlaylists.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-for="playlist in playlists"
+    v-for="playlist in items"
     :key="playlist.itemId"
     class="media is-align-items-center"
     @click="open_playlist(playlist.item)"
@@ -32,16 +32,28 @@ import ModalDialogPlaylist from '@/components/ModalDialogPlaylist.vue'
 export default {
   name: 'ListPlaylists',
   components: { ModalDialogPlaylist },
-  props: { playlists: { required: true, type: Object } },
+  props: { items: { required: true, type: Object } },
 
   data() {
     return {
-      show_details_modal: false,
-      selected_playlist: {}
+      selected_playlist: {},
+      show_details_modal: false
     }
   },
 
   methods: {
+    icon_name(playlist) {
+      if (playlist.type === 'folder') {
+        return 'folder'
+      } else if (playlist.type === 'rss') {
+        return 'rss'
+      }
+      return 'music-box-multiple'
+    },
+    open_dialog(playlist) {
+      this.selected_playlist = playlist
+      this.show_details_modal = true
+    },
     open_playlist(playlist) {
       if (playlist.type === 'folder') {
         this.$router.push({
@@ -54,20 +66,6 @@ export default {
           params: { id: playlist.id }
         })
       }
-    },
-
-    open_dialog(playlist) {
-      this.selected_playlist = playlist
-      this.show_details_modal = true
-    },
-
-    icon_name(playlist) {
-      if (playlist.type === 'folder') {
-        return 'folder'
-      } else if (playlist.type === 'rss') {
-        return 'rss'
-      }
-      return 'music-box-multiple'
     }
   }
 }
diff --git a/web-src/src/components/ListTracks.vue b/web-src/src/components/ListTracks.vue
index 14431c12..92b9a790 100644
--- a/web-src/src/components/ListTracks.vue
+++ b/web-src/src/components/ListTracks.vue
@@ -1,5 +1,5 @@
 <template>
-  <template v-for="track in tracks" :key="track.itemId">
+  <template v-for="track in items" :key="track.itemId">
     <div v-if="!track.isItem" class="mt-6 mb-5 py-2">
       <span
         :id="'index_' + track.index"
@@ -63,17 +63,17 @@ export default {
   components: { ModalDialogTrack },
   props: {
     expression: { default: '', type: String },
+    items: { required: true, type: Object },
     show_icon: Boolean,
     show_progress: Boolean,
-    tracks: { required: true, type: Object },
     uris: { default: '', type: String }
   },
   emits: ['play-count-changed'],
 
   data() {
     return {
-      show_details_modal: false,
-      selected_track: {}
+      selected_track: {},
+      show_details_modal: false
     }
   },
 
@@ -82,19 +82,18 @@ export default {
       this.selected_track = track
       this.show_details_modal = true
     },
-
     play_track(track) {
       if (this.uris) {
         webapi.player_play_uri(
           this.uris,
           false,
-          this.tracks.items.indexOf(track)
+          this.items.items.indexOf(track)
         )
       } else if (this.expression) {
         webapi.player_play_expression(
           this.expression,
           false,
-          this.tracks.items.indexOf(track)
+          this.items.items.indexOf(track)
         )
       } else {
         webapi.player_play_uri(track.uri, false)
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index aa60eeb0..7c7b85e4 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -50,7 +50,7 @@
                   v-text="$filters.date(album.date_released)"
                 />
               </p>
-              <p v-else-if="album.year > 0">
+              <p v-else-if="album.year">
                 <span class="heading" v-text="$t('dialog.album.year')" />
                 <span class="title is-6" v-text="album.year" />
               </p>
@@ -133,7 +133,7 @@ export default {
 
   computed: {
     media_kind_resolved() {
-      return this.media_kind ? this.media_kind : this.album.media_kind
+      return this.media_kind || this.album.media_kind
     }
   },
 
@@ -192,14 +192,6 @@ export default {
           this.$emit('play-count-changed')
           this.$emit('close')
         })
-    },
-
-    artwork_loaded() {
-      this.artwork_visible = true
-    },
-
-    artwork_error() {
-      this.artwork_visible = false
     }
   }
 }
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index a9ebe73a..89a41870 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -33,7 +33,7 @@
           class="heading has-text-centered-mobile mt-5"
           v-text="$t('page.album.track-count', { count: album.track_count })"
         />
-        <list-tracks :tracks="tracks" :uris="album.uri" />
+        <list-tracks :items="tracks" :uris="album.uri" />
         <modal-dialog-album
           :show="show_details_modal"
           :album="album"
@@ -45,9 +45,9 @@
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHero from '@/templates/ContentWithHero.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import webapi from '@/webapi'
diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index 02f9dda2..a659e394 100644
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -56,7 +56,7 @@
       </template>
       <template #heading-right />
       <template #content>
-        <list-albums :albums="albums" />
+        <list-albums :items="albums" />
       </template>
     </content-with-heading>
   </div>
@@ -64,9 +64,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
@@ -119,7 +119,7 @@ export default {
           id: 2,
           name: this.$t('page.albums.sort.recently-added'),
           options: {
-            criteria: [{ field: 'time_added', type: Date, order: -1 }],
+            criteria: [{ field: 'time_added', order: -1, type: Date }],
             index: { field: 'time_added', type: Date }
           }
         },
@@ -127,7 +127,7 @@ export default {
           id: 3,
           name: this.$t('page.albums.sort.recently-released'),
           options: {
-            criteria: [{ field: 'date_released', type: Date, order: -1 }],
+            criteria: [{ field: 'date_released', order: -1, type: Date }],
             index: { field: 'date_released', type: Date }
           }
         },
@@ -170,20 +170,6 @@ export default {
 
       return this.albums_list
     },
-
-    selected_grouping_option_id: {
-      get() {
-        return this.$store.state.albums_sort
-      },
-      set(value) {
-        this.$store.commit(types.ALBUMS_SORT, value)
-      }
-    },
-
-    spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
-    },
-
     hide_singles: {
       get() {
         return this.$store.state.hide_singles
@@ -192,7 +178,6 @@ export default {
         this.$store.commit(types.HIDE_SINGLES, value)
       }
     },
-
     hide_spotify: {
       get() {
         return this.$store.state.hide_spotify
@@ -200,6 +185,17 @@ export default {
       set(value) {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
+    },
+    selected_grouping_option_id: {
+      get() {
+        return this.$store.state.albums_sort
+      },
+      set(value) {
+        this.$store.commit(types.ALBUMS_SORT, value)
+      }
+    },
+    spotify_enabled() {
+      return this.$store.state.spotify.webapi_token_valid
     }
   }
 }
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index 4b2663e3..95469e53 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -59,7 +59,7 @@
             v-text="$t('page.artist.track-count', { count: track_count })"
           />
         </p>
-        <list-albums :albums="albums" />
+        <list-albums :items="albums" />
         <modal-dialog-artist
           :show="show_details_modal"
           :artist="artist"
@@ -72,9 +72,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
 import webapi from '@/webapi'
@@ -117,8 +117,8 @@ export default {
 
   data() {
     return {
-      artist: {},
       albums_list: new GroupedList(),
+      artist: {},
       grouping_options: [
         {
           id: 1,
@@ -181,7 +181,6 @@ export default {
         params: { id: this.artist.id }
       })
     },
-
     play() {
       webapi.player_play_uri(
         this.albums.items.map((a) => a.uri).join(','),
diff --git a/web-src/src/pages/PageArtistSpotify.vue b/web-src/src/pages/PageArtistSpotify.vue
index 74172076..c8435d8f 100644
--- a/web-src/src/pages/PageArtistSpotify.vue
+++ b/web-src/src/pages/PageArtistSpotify.vue
@@ -26,7 +26,7 @@
         <list-item-album-spotify
           v-for="album in albums"
           :key="album.id"
-          :album="album"
+          :item="album"
           @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
@@ -157,6 +157,17 @@ export default {
   },
 
   methods: {
+    append_albums(data) {
+      this.albums = this.albums.concat(data.items)
+      this.total = data.total
+      this.offset += data.limit
+    },
+    artwork_url(album) {
+      if (album.images && album.images.length > 0) {
+        return album.images[0].url
+      }
+      return ''
+    },
     load_next({ loaded }) {
       const spotifyApi = new SpotifyWebApi()
       spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
@@ -171,35 +182,19 @@ export default {
           loaded(data.items.length, PAGE_SIZE)
         })
     },
-
-    append_albums(data) {
-      this.albums = this.albums.concat(data.items)
-      this.total = data.total
-      this.offset += data.limit
-    },
-
-    play() {
-      this.show_album_details_modal = false
-      webapi.player_play_uri(this.artist.uri, true)
-    },
-
     open_album(album) {
       this.$router.push({
         name: 'music-spotify-album',
         params: { id: album.id }
       })
     },
-
     open_dialog(album) {
       this.selected_album = album
       this.show_album_details_modal = true
     },
-
-    artwork_url(album) {
-      if (album.images && album.images.length > 0) {
-        return album.images[0].url
-      }
-      return ''
+    play() {
+      this.show_album_details_modal = false
+      webapi.player_play_uri(this.artist.uri, true)
     }
   }
 }
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index fd4c4f58..d865d17d 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -60,7 +60,7 @@
             v-text="$t('page.artist.track-count', { count: tracks.count })"
           />
         </p>
-        <list-tracks :tracks="tracks" :uris="track_uris" />
+        <list-tracks :items="tracks" :uris="track_uris" />
         <modal-dialog-artist
           :show="show_details_modal"
           :artist="artist"
@@ -73,9 +73,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
@@ -168,6 +168,9 @@ export default {
     spotify_enabled() {
       return this.$store.state.spotify.webapi_token_valid
     },
+    track_uris() {
+      return this.tracks_list.items.map((a) => a.uri).join(',')
+    },
     tracks() {
       const grouping = this.grouping_options.find(
         (o) => o.id === this.selected_grouping_option_id
@@ -177,9 +180,6 @@ export default {
       ]
       this.tracks_list.group(grouping.options)
       return this.tracks_list
-    },
-    track_uris() {
-      return this.tracks_list.items.map((a) => a.uri).join(',')
     }
   },
 
@@ -191,7 +191,6 @@ export default {
         params: { id: this.artist.id }
       })
     },
-
     play() {
       webapi.player_play_uri(
         this.tracks_list.items.map((a) => a.uri).join(','),
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index abba1efc..31f74eb3 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -56,7 +56,7 @@
       </template>
       <template #heading-right />
       <template #content>
-        <list-artists :artists="artists" />
+        <list-artists :items="artists" />
       </template>
     </content-with-heading>
   </div>
@@ -64,9 +64,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListArtists from '@/components/ListArtists.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
@@ -133,7 +133,6 @@ export default {
       if (!this.artists_list) {
         return []
       }
-
       const grouping = this.grouping_options.find(
         (o) => o.id === this.selected_grouping_option_id
       )
@@ -143,23 +142,8 @@ export default {
         (artist) => !this.hide_spotify || artist.data_kind !== 'spotify'
       ]
       this.artists_list.group(grouping.options)
-
       return this.artists_list
     },
-
-    selected_grouping_option_id: {
-      get() {
-        return this.$store.state.artists_sort
-      },
-      set(value) {
-        this.$store.commit(types.ARTISTS_SORT, value)
-      }
-    },
-
-    spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
-    },
-
     hide_singles: {
       get() {
         return this.$store.state.hide_singles
@@ -168,7 +152,6 @@ export default {
         this.$store.commit(types.HIDE_SINGLES, value)
       }
     },
-
     hide_spotify: {
       get() {
         return this.$store.state.hide_spotify
@@ -176,6 +159,17 @@ export default {
       set(value) {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
+    },
+    selected_grouping_option_id: {
+      get() {
+        return this.$store.state.artists_sort
+      },
+      set(value) {
+        this.$store.commit(types.ARTISTS_SORT, value)
+      }
+    },
+    spotify_enabled() {
+      return this.$store.state.spotify.webapi_token_valid
     }
   }
 }
diff --git a/web-src/src/pages/PageAudiobooksAlbum.vue b/web-src/src/pages/PageAudiobooksAlbum.vue
index 80546aae..dc6aa063 100644
--- a/web-src/src/pages/PageAudiobooksAlbum.vue
+++ b/web-src/src/pages/PageAudiobooksAlbum.vue
@@ -37,7 +37,7 @@
             })
           "
         />
-        <list-tracks :tracks="tracks" :uris="album.uri" />
+        <list-tracks :items="tracks" :uris="album.uri" />
         <modal-dialog-album
           :show="show_details_modal"
           :album="album"
@@ -104,7 +104,6 @@ export default {
         params: { id: this.album.artist_id }
       })
     },
-
     play() {
       webapi.player_play_uri(this.album.uri, false)
     }
diff --git a/web-src/src/pages/PageAudiobooksAlbums.vue b/web-src/src/pages/PageAudiobooksAlbums.vue
index ce8a49d2..898b9c5b 100644
--- a/web-src/src/pages/PageAudiobooksAlbums.vue
+++ b/web-src/src/pages/PageAudiobooksAlbums.vue
@@ -13,15 +13,15 @@
         />
       </template>
       <template #content>
-        <list-albums :albums="albums" />
+        <list-albums :items="albums" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
@@ -42,10 +42,10 @@ const dataObject = {
 export default {
   name: 'PageAudiobooksAlbums',
   components: {
-    TabsAudiobooks,
     ContentWithHeading,
     IndexButtonList,
-    ListAlbums
+    ListAlbums,
+    TabsAudiobooks
   },
 
   beforeRouteEnter(to, from, next) {
diff --git a/web-src/src/pages/PageAudiobooksArtist.vue b/web-src/src/pages/PageAudiobooksArtist.vue
index 636d092d..63fc6fe9 100644
--- a/web-src/src/pages/PageAudiobooksArtist.vue
+++ b/web-src/src/pages/PageAudiobooksArtist.vue
@@ -27,7 +27,7 @@
             })
           "
         />
-        <list-albums :albums="albums" />
+        <list-albums :items="albums" />
         <modal-dialog-artist
           :show="show_details_modal"
           :artist="artist"
diff --git a/web-src/src/pages/PageAudiobooksArtists.vue b/web-src/src/pages/PageAudiobooksArtists.vue
index 3babfd32..bdfc7b45 100644
--- a/web-src/src/pages/PageAudiobooksArtists.vue
+++ b/web-src/src/pages/PageAudiobooksArtists.vue
@@ -14,15 +14,15 @@
       </template>
       <template #heading-right />
       <template #content>
-        <list-artists :artists="artists" />
+        <list-artists :items="artists" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListArtists from '@/components/ListArtists.vue'
 import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
@@ -44,9 +44,9 @@ export default {
   name: 'PageAudiobooksArtists',
   components: {
     ContentWithHeading,
-    TabsAudiobooks,
     IndexButtonList,
-    ListArtists
+    ListArtists,
+    TabsAudiobooks
   },
 
   beforeRouteEnter(to, from, next) {
diff --git a/web-src/src/pages/PageAudiobooksGenres.vue b/web-src/src/pages/PageAudiobooksGenres.vue
index 4dc1a51e..95eeb69a 100644
--- a/web-src/src/pages/PageAudiobooksGenres.vue
+++ b/web-src/src/pages/PageAudiobooksGenres.vue
@@ -13,15 +13,15 @@
         />
       </template>
       <template #content>
-        <list-genres :genres="genres" :media_kind="'audiobook'" />
+        <list-genres :items="genres" :media_kind="'audiobook'" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListGenres from '@/components/ListGenres.vue'
 import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
diff --git a/web-src/src/pages/PageComposerAlbums.vue b/web-src/src/pages/PageComposerAlbums.vue
index fdf7f0dc..d78f503d 100644
--- a/web-src/src/pages/PageComposerAlbums.vue
+++ b/web-src/src/pages/PageComposerAlbums.vue
@@ -34,7 +34,7 @@
             "
           />
         </p>
-        <list-albums :albums="albums" />
+        <list-albums :items="albums" />
         <modal-dialog-composer
           :show="show_details_modal"
           :composer="composer"
@@ -102,7 +102,6 @@ export default {
         params: { name: this.composer.name }
       })
     },
-
     play() {
       webapi.player_play_expression(
         `composer is "${this.composer.name}" and media_kind is music`,
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index 52334594..da29b2bf 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -48,7 +48,7 @@
             "
           />
         </p>
-        <list-tracks :tracks="tracks" :expression="expression" />
+        <list-tracks :items="tracks" :expression="expression" />
         <modal-dialog-composer
           :show="show_details_modal"
           :composer="composer"
@@ -61,9 +61,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
@@ -158,7 +158,6 @@ export default {
         params: { name: this.composer.name }
       })
     },
-
     play() {
       webapi.player_play_expression(this.expression, true)
     }
diff --git a/web-src/src/pages/PageComposers.vue b/web-src/src/pages/PageComposers.vue
index 18cc4afd..0385aa97 100644
--- a/web-src/src/pages/PageComposers.vue
+++ b/web-src/src/pages/PageComposers.vue
@@ -13,15 +13,15 @@
         />
       </template>
       <template #content>
-        <list-composers :composers="composers" />
+        <list-composers :items="composers" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListComposers from '@/components/ListComposers.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
diff --git a/web-src/src/pages/PageFiles.vue b/web-src/src/pages/PageFiles.vue
index 6700829d..a08fb330 100644
--- a/web-src/src/pages/PageFiles.vue
+++ b/web-src/src/pages/PageFiles.vue
@@ -21,10 +21,10 @@
       </template>
       <template #content>
         <list-directories :directories="dirs" />
-        <list-playlists :playlists="playlists" />
+        <list-playlists :items="playlists" />
         <list-tracks
-          :tracks="tracks"
           :expression="play_expression"
+          :items="tracks"
           :show_icon="true"
         />
         <modal-dialog-directory
@@ -94,8 +94,8 @@ export default {
     return {
       dirs: [],
       playlists: new GroupedList(),
-      tracks: new GroupedList(),
-      show_details_modal: false
+      show_details_modal: false,
+      tracks: new GroupedList()
     }
   },
 
@@ -106,7 +106,6 @@ export default {
       }
       return '/'
     },
-
     play_expression() {
       return `path starts with "${this.current_directory}" order by path asc`
     }
diff --git a/web-src/src/pages/PageGenreAlbums.vue b/web-src/src/pages/PageGenreAlbums.vue
index 9b05ef26..1288931a 100644
--- a/web-src/src/pages/PageGenreAlbums.vue
+++ b/web-src/src/pages/PageGenreAlbums.vue
@@ -33,7 +33,7 @@
             v-text="$t('page.genre.track-count', { count: genre.track_count })"
           />
         </p>
-        <list-albums :albums="albums" />
+        <list-albums :items="albums" />
         <modal-dialog-genre
           :genre="genre"
           :media_kind="media_kind"
@@ -46,8 +46,8 @@
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
@@ -106,7 +106,6 @@ export default {
         query: { media_kind: this.media_kind }
       })
     },
-
     play() {
       webapi.player_play_expression(
         `genre is "${this.genre.name}" and media_kind is ${this.media_kind}`,
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index 140a511f..cad17170 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -42,7 +42,7 @@
             v-text="$t('page.genre.track-count', { count: genre.track_count })"
           />
         </p>
-        <list-tracks :tracks="tracks" :expression="expression" />
+        <list-tracks :items="tracks" :expression="expression" />
         <modal-dialog-genre
           :show="show_details_modal"
           :genre="genre"
@@ -56,9 +56,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
diff --git a/web-src/src/pages/PageGenres.vue b/web-src/src/pages/PageGenres.vue
index 5527e586..3f12f09f 100644
--- a/web-src/src/pages/PageGenres.vue
+++ b/web-src/src/pages/PageGenres.vue
@@ -13,15 +13,15 @@
         />
       </template>
       <template #content>
-        <list-genres :genres="genres" :media_kind="'music'" />
+        <list-genres :items="genres" :media_kind="'music'" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListGenres from '@/components/ListGenres.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
diff --git a/web-src/src/pages/PageMusic.vue b/web-src/src/pages/PageMusic.vue
index feed44c5..c20df0ec 100644
--- a/web-src/src/pages/PageMusic.vue
+++ b/web-src/src/pages/PageMusic.vue
@@ -7,7 +7,7 @@
         <p class="title is-4" v-text="$t('page.music.recently-added.title')" />
       </template>
       <template #content>
-        <list-albums :albums="recently_added" />
+        <list-albums :items="recently_added" />
       </template>
       <template #footer>
         <nav class="level">
@@ -27,7 +27,7 @@
         <p class="title is-4" v-text="$t('page.music.recently-played.title')" />
       </template>
       <template #content>
-        <list-tracks :tracks="recently_played" />
+        <list-tracks :items="recently_played" />
       </template>
       <template #footer>
         <nav class="level">
@@ -56,16 +56,16 @@ const dataObject = {
   load(to) {
     return Promise.all([
       webapi.search({
-        type: 'album',
         expression:
           'time_added after 8 weeks ago and media_kind is music having track_count > 3 order by time_added desc',
-        limit: 3
+        limit: 3,
+        type: 'album'
       }),
       webapi.search({
-        type: 'track',
         expression:
           'time_played after 8 weeks ago and media_kind is music order by time_played desc',
-        limit: 3
+        limit: 3,
+        type: 'track'
       })
     ])
   },
diff --git a/web-src/src/pages/PageMusicRecentlyAdded.vue b/web-src/src/pages/PageMusicRecentlyAdded.vue
index 43407297..ff7a2ab5 100644
--- a/web-src/src/pages/PageMusicRecentlyAdded.vue
+++ b/web-src/src/pages/PageMusicRecentlyAdded.vue
@@ -6,15 +6,15 @@
         <p class="title is-4" v-text="$t('page.music.recently-added.title')" />
       </template>
       <template #content>
-        <list-albums :albums="recently_added" />
+        <list-albums :items="recently_added" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
 import store from '@/store'
@@ -24,10 +24,10 @@ const dataObject = {
   load(to) {
     const limit = store.getters.settings_option_recently_added_limit
     return webapi.search({
-      type: 'album',
       expression:
         'media_kind is music having track_count > 3 order by time_added desc',
-      limit
+      limit,
+      type: 'album'
     })
   },
 
diff --git a/web-src/src/pages/PageMusicRecentlyPlayed.vue b/web-src/src/pages/PageMusicRecentlyPlayed.vue
index c8ac1154..6e78d554 100644
--- a/web-src/src/pages/PageMusicRecentlyPlayed.vue
+++ b/web-src/src/pages/PageMusicRecentlyPlayed.vue
@@ -6,7 +6,7 @@
         <p class="title is-4" v-text="$t('page.music.recently-played.title')" />
       </template>
       <template #content>
-        <list-tracks :tracks="recently_played" />
+        <list-tracks :items="recently_played" />
       </template>
     </content-with-heading>
   </div>
@@ -22,10 +22,10 @@ import webapi from '@/webapi'
 const dataObject = {
   load(to) {
     return webapi.search({
-      type: 'track',
       expression:
         'time_played after 8 weeks ago and media_kind is music order by time_played desc',
-      limit: 50
+      limit: 50,
+      type: 'track'
     })
   },
 
diff --git a/web-src/src/pages/PageMusicSpotifyNewReleases.vue b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
index 6845e08e..ab73225a 100644
--- a/web-src/src/pages/PageMusicSpotifyNewReleases.vue
+++ b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
@@ -9,7 +9,7 @@
         <list-item-album-spotify
           v-for="album in new_releases"
           :key="album.id"
-          :album="album"
+          :item="album"
           @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
diff --git a/web-src/src/pages/PagePlaylistFolder.vue b/web-src/src/pages/PagePlaylistFolder.vue
index ce550e6b..a1691f51 100644
--- a/web-src/src/pages/PagePlaylistFolder.vue
+++ b/web-src/src/pages/PagePlaylistFolder.vue
@@ -14,15 +14,15 @@
         />
       </template>
       <template #content>
-        <list-playlists :playlists="playlists" />
+        <list-playlists :items="playlists" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import ListPlaylists from '@/components/ListPlaylists.vue'
 import webapi from '@/webapi'
 
diff --git a/web-src/src/pages/PagePlaylistTracks.vue b/web-src/src/pages/PagePlaylistTracks.vue
index 77eb60e9..e011186d 100644
--- a/web-src/src/pages/PagePlaylistTracks.vue
+++ b/web-src/src/pages/PagePlaylistTracks.vue
@@ -23,7 +23,7 @@
           class="heading has-text-centered-mobile"
           v-text="$t('page.playlist.track-count', { count: tracks.count })"
         />
-        <list-tracks :tracks="tracks" :uris="uris" />
+        <list-tracks :items="tracks" :uris="uris" />
         <modal-dialog-playlist
           :show="show_details_modal"
           :playlist="playlist"
diff --git a/web-src/src/pages/PagePodcasts.vue b/web-src/src/pages/PagePodcasts.vue
index 9e540411..302f8f66 100644
--- a/web-src/src/pages/PagePodcasts.vue
+++ b/web-src/src/pages/PagePodcasts.vue
@@ -14,7 +14,7 @@
       </template>
       <template #content>
         <list-tracks
-          :tracks="new_episodes"
+          :items="new_episodes"
           :show_progress="true"
           @play-count-changed="reload_new_episodes"
         />
diff --git a/web-src/src/pages/PageRadioStreams.vue b/web-src/src/pages/PageRadioStreams.vue
index 15caa94d..8bf66817 100644
--- a/web-src/src/pages/PageRadioStreams.vue
+++ b/web-src/src/pages/PageRadioStreams.vue
@@ -9,7 +9,7 @@
         />
       </template>
       <template #content>
-        <list-tracks :tracks="tracks" />
+        <list-tracks :items="tracks" />
       </template>
     </content-with-heading>
   </div>