[web] Streamline Spotify pages to match library pages

web-src/src/pages/PageAlbumSpotify.vue

@@ -39,13 +39,7 @@
             $t('page.spotify.album.track-count', { count: album.tracks.total })
           "
         />
-        <list-item-track-spotify
-          v-for="(track, index) in tracks"
-          :key="track.id"
-          :item="track"
-          :position="index"
-          :context_uri="album.uri"
-        />
+        <list-item-track-spotify :items="tracks" :context_uri="album.uri" />
         <modal-dialog-album-spotify
           :show="show_details_modal"
           :album="album"

web-src/src/pages/PageArtistSpotify.vue

@@ -23,11 +23,7 @@
           class="heading has-text-centered-mobile"
           v-text="$t('page.spotify.artist.album-count', { count: total })"
         />
-        <list-item-album-spotify
-          v-for="album in albums"
-          :key="album.id"
-          :item="album"
-        />
+        <list-item-album-spotify :items="albums" />
         <VueEternalLoading v-if="offset < total" :load="load_next">
           <template #loading>
             <div class="columns is-centered">

web-src/src/pages/PageMusicSpotify.vue

@@ -7,11 +7,7 @@
         <p class="title is-4" v-text="$t('page.spotify.music.new-releases')" />
       </template>
       <template #content>
-        <list-item-album-spotify
-          v-for="album in new_releases"
-          :key="album.id"
-          :item="album"
-        />
+        <list-item-album-spotify :items="new_releases" />
       </template>
       <template #footer>
         <nav class="level">
@@ -34,11 +30,7 @@
         />
       </template>
       <template #content>
-        <list-item-playlist-spotify
-          v-for="playlist in featured_playlists"
-          :key="playlist.id"
-          :item="playlist"
-        />
+        <list-item-playlist-spotify :items="featured_playlists" />
       </template>
       <template #footer>
         <nav class="level">

web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue

@@ -9,11 +9,7 @@
         />
       </template>
       <template #content>
-        <list-item-playlist-spotify
-          v-for="playlist in featured_playlists"
-          :key="playlist.id"
-          :item="playlist"
-        />
+        <list-item-playlist-spotify :items="featured_playlists" />
       </template>
     </content-with-heading>
   </div>

web-src/src/pages/PageMusicSpotifyNewReleases.vue

@@ -6,11 +6,7 @@
         <p class="title is-4" v-text="$t('page.spotify.music.new-releases')" />
       </template>
       <template #content>
-        <list-item-album-spotify
-          v-for="album in new_releases"
-          :key="album.id"
-          :item="album"
-        />
+        <list-item-album-spotify :items="new_releases" />
       </template>
     </content-with-heading>
   </div>

web-src/src/pages/PagePlaylistTracksSpotify.vue

@@ -25,13 +25,7 @@
             $t('page.spotify.playlist.count', { count: playlist.tracks.total })
           "
         />
-        <list-item-track-spotify
-          v-for="track in tracks"
-          :key="track.id"
-          :item="track"
-          :position="track.position"
-          :context_uri="playlist.uri"
-        />
+        <list-item-track-spotify :items="tracks" :context_uri="playlist.uri" />
         <VueEternalLoading v-if="offset < total" :load="load_next">
           <template #loading>
             <div class="columns is-centered">

web-src/src/pages/PageSearchSpotify.vue

@@ -38,12 +38,7 @@
         <p class="title is-4" v-text="$t(`page.spotify.search.${type}s`)" />
       </template>
       <template #content>
-        <component
-          :is="components[type]"
-          v-for="item in results[type].items"
-          :key="item.id"
-          :item="item"
-        />
+        <component :is="components[type]" :items="results[type].items" />
         <VueEternalLoading v-if="query.type === type" :load="search_next">
           <template #loading>
             <div class="columns is-centered">
@@ -62,13 +57,9 @@
               class="button is-light is-small is-rounded"
               @click="open_search(type)"
               v-text="
-                $t(
-                  `page.spotify.search.show-${type}s`,
-                  results[type].total,
-                  {
-                    count: $filters.number(results[type].total)
-                  }
-                )
+                $t(`page.spotify.search.show-${type}s`, results[type].total, {
+                  count: $filters.number(results[type].total)
+                })
               "
             />
           </p>
@@ -206,8 +197,8 @@ export default {
     search_next({ loaded }) {
       const items = this.results[this.query.type]
       this.spotify_search([this.query.type]).then((data) => {
-        const next = Object.values(data)[0]
-        items.items = items.items.concat(next.items)
+        const [next] = Object.values(data)
+        items.items.push(...next.items)
         items.total = next.total
         this.search_param.offset += next.limit
         loaded(next.items.length, PAGE_SIZE)