Add support for multiple album artists

src/library/album/AlbumDetails.vue

@@ -9,9 +9,10 @@
       </h1>
       <p>
         by
-        <router-link :to="{name: 'artist', params: { id: album.artistId }}">
-          {{ album.artist }}
-        </router-link>
+        <template v-for="(artist, index) in album.artists">
+          <span v-if="index > 0" :key="artist.id" class="text-muted">, </span>
+          <router-link :key="artist.id" :to="{name: 'artist', params: { id: artist.id }}">{{ artist.name }}</router-link>
+        </template>
         <span v-if="album.year"> • {{ album.year }}</span>
         <span v-if="album.genreId"> •
           <router-link :to="{name: 'genre', params: { id: album.genreId }}">
@@ -77,12 +78,12 @@
     methods: {
       playNow() {
         return this.$store.dispatch('player/playNow', {
           tracks: this.album!.tracks,
         })
       },
       shuffleNow() {
         return this.$store.dispatch('player/shuffleNow', {
           tracks: this.album!.tracks,
         })
       },
       setNextInQueue() {

src/library/album/AlbumList.vue

@@ -8,9 +8,10 @@
       :draggable="true" @dragstart="dragstart(item.id, $event)"
     >
       <template #text>
-        <router-link :to="{name: 'artist', params: { id: item.artistId } }" class="text-muted">
-          {{ item.artist }}
-        </router-link>
+        <template v-for="(artist, index) in item.artists">
+          <span v-if="index > 0" :key="artist.id" class="text-muted">, </span>
+          <router-link :key="artist.id" :to="{name: 'artist', params: { id: artist.id }}" class="text-muted">{{ artist.name }}</router-link>
+        </template>
       </template>
 
       <template #context-menu>

src/shared/api.ts

@@ -30,8 +30,7 @@ export interface Track {
 export interface Album {
   id: string
   name: string
-  artist: string
-  artistId: string
+  artists: {name: string, id: string}[]
   year: number
   favourite: boolean
   genreId?: string
@@ -414,8 +413,9 @@ export class API {
     return {
       id: item.id,
       name: item.name,
-      artist: item.artist,
-      artistId: item.artistId,
+      artists: item.artists?.length
+        ? item.artists
+        : [{ id: item.artistId, name: item.artist }],
       image: this.getCoverArtUrl(item),
       year: item.year || 0,
       favourite: !!item.starred,