Use new artists API across the frontend

front/src/components/audio/track/Row.vue

@@ -16,9 +16,11 @@
       </router-link>
     </td>
     <td colspan="4">
-      <router-link class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
-        {{ track.artist.name|truncate(40) }}
-      </router-link>
+      <span v-for="(artist, index) in track.artists" :key="artist.id">
+        <span v-if="index != 0">, </span>
+        <router-link class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: artist.id }}">
+          {{ artist.name|truncate(40) }}</router-link>
+      </span>
     </td>
     <td colspan="4">
       <router-link v-if="track.album" class="album discrete link" :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
@@ -56,7 +58,7 @@ import PlayButton from '@/components/audio/PlayButton'
 export default {
   props: {
     track: {type: Object, required: true},
-    artist: {type: Object, required: false},
+    artists: {type: Object, required: false},
     displayPosition: {type: Boolean, default: false},
     displayActions: {type: Boolean, default: true},
     playable: {type: Boolean, required: false, default: false},

front/src/components/audio/track/Table.vue

@@ -10,7 +10,7 @@
           <th><span class="visually-hidden"><translate translate-context="*/*/*/Noun">Play</translate></span></th>
           <th><span class="visually-hidden"><translate translate-context="*/*/*/Noun">Track Art</translate></span></th>
           <th colspan="6"><translate translate-context="*/*/*/Noun">Title</translate></th>
-          <th colspan="4"><translate translate-context="*/*/*/Noun">Artist</translate></th>
+          <th colspan="4"><translate translate-context="*/*/*/Noun">Artists</translate></th>
           <th colspan="4"><translate translate-context="*/*/*">Album</translate></th>
           <th colspan="4"><translate translate-context="Content/*/*">Duration</translate></th>
           <th colspan="2" v-if="displayActions"><span class="visually hidden"><translate translate-context="*/*/*/Noun">Actions</translate></span></th>
@@ -22,7 +22,7 @@
           :display-position="displayPosition"
           :display-actions="displayActions"
           :track="track"
-          :artist="artist"
+          :artists="artists"
           :key="index + '-' + track.id"
           v-for="(track, index) in allTracks"></track-row>
       </tbody>
@@ -45,7 +45,7 @@ export default {
     playable: {type: Boolean, required: false, default: false},
     search: {type: Boolean, required: false, default: false},
     nextUrl: {type: String, required: false, default: null},
-    artist: {type: Object, required: false},
+    artists: {type: Object, required: false},
     filters: {type: Object, required: false, default: () => { return {}}},
     displayPosition: {type: Boolean, default: false},
     displayActions: {type: Boolean, default: true},

front/src/components/audio/track/Widget.vue

@@ -21,9 +21,12 @@
               </div>
               <div class="meta ellipsis">
                 <span>
-                  <router-link class="discrete link" :to="{name: 'library.artists.detail', params: {id: object.track.artist.id}}">
-                    {{ object.track.artist.name }}
-                  </router-link>
+                <span class="ui compact">
+                  <span v-for="(artist, index) in object.track.artists" :key="artist.id">
+                    <span v-if="index != 0">, </span>
+                    <router-link class="discrete link" :to="{name: 'library.artists.detail', params: {id: artist.id}}">{{ artist.name }}</router-link>
+                  </span>
+                </span>
                 </span>
               </div>
               <tags-list label-classes="tiny" :truncate-size="20" :limit="2" :show-more="false" :tags="object.track.tags"></tags-list>

front/src/components/library/AlbumDetail.vue

@@ -56,7 +56,7 @@ import PaginationMixin from "@/components/mixins/Pagination"
 import PlayButton from "@/components/audio/PlayButton"
 
 export default {
-  props: ["object", "libraries", "discs", "isSerie", "artist", "page", "paginateBy", "totalTracks"],
+  props: ["object", "libraries", "discs", "isSerie", "artists", "page", "paginateBy", "totalTracks"],
   components: {
     LibraryWidget,
     AlbumEntries,

front/src/components/library/TrackBase.vue

@@ -180,8 +180,9 @@ export default {
       axios.get(url, {params: {refresh: 'true'}}).then(response => {
         self.track = response.data
         // TODO
-        axios.get(`artists/${response.data.artist.id}/`).then(response => {
-          self.artist = response.data
+        Promise.all(response.data.artists.map(
+          artist => axios.get(`artists/${artist.id}/`))).then(response => {
+          self.artists = response.data
         })
         self.isLoading = false
       })

front/src/components/library/TrackDetail.vue

@@ -6,7 +6,7 @@
         <div class="six wide column">
           <template v-if="upload">
             <h3 class="ui header">
-              <translate key="1" v-if="track.artist.content_category === 'music'" translate-context="Content/*/*">Track Details</translate>
+              <translate key="1" v-if="track.artists.some(artist => artist.content_category === 'music')" translate-context="Content/*/*">Track Details</translate>
               <translate key="2" v-else translate-context="Content/*/*">Episode Details</translate>
             </h3>
             <table class="ui basic table">
@@ -76,20 +76,21 @@
             <tbody>
               <tr>
                 <td>
-                  <translate v-if="track.artists.length == 1" translate-context="*/*/*/Noun">Artist</translate>
+                  <translate v-if="track.artists.length == 1" translate-context="*/*/*/Noun">Artists</translate>
                   <translate v-else translate-context="*/*/*/Noun">Artists</translate>
                 </td>
                 <td class="right aligned">
                   <span>
                     <span v-for="(artist, index) in track.artists" :key="artist.id">
-                      <router-link :to="{name: 'library.artists.detail', params: {id: artist.id}}">{{ artist.name }}</router-link>{{ index != track.artists.length - 1 ? ", " : "" }}
+                      <span v-if="index != 0">, </span>
+                      <router-link :to="{name: 'library.artists.detail', params: {id: artist.id}}">{{ artist.name }}</router-link>
                     </span>
                   </span>
                 </td>
               </tr>
               <tr v-if="track.album">
                 <td>
-                  <translate key="1" v-if="track.album.artist.content_category === 'music'" translate-context="*/*/*/Noun">Album</translate>
+                  <translate key="1" v-if="track.album.artists.some(artist => artist.content_category === 'music')" translate-context="*/*/*/Noun">Album</translate>
                   <translate key="2" v-else translate-context="*/*/*">Serie</translate>
                 </td>
                 <td class="right aligned">

front/src/components/manage/library/AlbumsTable.vue

@@ -38,7 +38,7 @@
         :filters="actionFilters">
         <template slot="header-cells">
           <th><translate translate-context="*/*/*/Noun">Title</translate></th>
-          <th><translate translate-context="*/*/*/Noun">Artist(s)</translate></th>
+          <th><translate translate-context="*/*/*/Noun">Artists</translate></th>
           <th><translate translate-context="Content/Moderation/*/Noun">Domain</translate></th>
           <th><translate translate-context="*/*/*">Tracks</translate></th>
           <th><translate translate-context="Content/*/*/Noun">Release date</translate></th>
@@ -49,13 +49,14 @@
             <router-link :to="{name: 'manage.library.albums.detail', params: {id: scope.obj.id }}">{{ scope.obj.title }}</router-link>
           </td>
           <td>
-            <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist.id }}">
-              <i class="wrench icon"></i>
-              <span class="visually-hidden">{{ labels.openModeration }}</span>
-            </router-link>
-            <!-- TODO: These links don't lead anywhere meaningful.. why? -->
-            <!-- TODO: Needs fixup for multiple artists -->
-            <a href="" class="discrete link" @click.prevent="addSearchToken('artist', scope.obj.artist.name)" :title="scope.obj.artist.name">{{ scope.obj.artist.name }}</a>
+            <span v-for="artist of scope.obj.artists" :key="artist.id">
+              <router-link :to="{name: 'manage.library.artists.detail', params: {id: artist.id }}">
+                <i class="wrench icon"></i>
+                <span class="visually-hidden">{{ labels.openModeration }}</span>
+              </router-link>
+              <!-- TODO: These links don't lead anywhere meaningful.. why? -->
+              <a href="" class="discrete link" @click.prevent="addSearchToken('artist', artist.name)" :title="artist.name">{{ artist.name }}</a>
+            </span>
           </td>
           <td>
             <template v-if="!scope.obj.is_local">

front/src/components/manage/library/TracksTable.vue

@@ -39,7 +39,7 @@
         <template slot="header-cells">
           <th><translate translate-context="*/*/*/Noun">Title</translate></th>
           <th><translate translate-context="*/*/*">Album</translate></th>
-          <th><translate translate-context="*/*/*/Noun">Artist</translate></th>
+          <th><translate translate-context="*/*/*/Noun">Artists</translate></th>
           <th><translate translate-context="Content/Moderation/*/Noun">Domain</translate></th>
           <th><translate translate-context="Content/*/*/Noun">License</translate></th>
           <th><translate translate-context="Content/*/*/Noun">Creation date</translate></th>
@@ -57,10 +57,12 @@
             </template>
           </td>
           <td>
-            <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist.id }}">
-              <i class="wrench icon"></i>
-            </router-link>
-            <a href="" class="discrete link" @click.prevent="addSearchToken('artist_id', scope.obj.artist.id)" :title="scope.obj.artist.name">{{ scope.obj.artist.name }}</a>
+            <span v-for="artist of scope.obj.artists" :key="artist.id">
+              <router-link :to="{name: 'manage.library.artists.detail', params: {id: artist.id }}">
+                <i class="wrench icon"></i>
+              </router-link>
+              <a href="" class="discrete link" @click.prevent="addSearchToken('artist_id', artist_id)" :title="artist.name">{{ artist.name }}</a>
+            </span>
           </td>
           <td>
             <template v-if="!scope.obj.is_local">

front/src/views/admin/library/AlbumDetail.vue

@@ -111,12 +111,15 @@
                   </tr>
                   <tr>
                     <td>
-                      <router-link :to="{name: 'manage.library.artists.detail', params: {id: object.artist.id }}">
-                        <translate translate-context="*/*/*/Noun">Artist</translate>
-                      </router-link>
+                      <translate v-if="object.artists.length == 1" translate-context="*/*/*/Noun">Artist</translate>
+                      <translate v-else translate-context="*/*/*/Noun">Artists</translate>
                     </td>
                     <td>
-                      {{ object.artist.name }}
+                      <span v-for="(artist, index) in object.artists" :key="artist.id">
+                        <span v-if="index != 0">, </span>
+                        <router-link :to="{name: 'manage.library.artists.detail', params: {id: artist.id }}">
+                          {{ artist.name }}</router-link>
+                      </span>
                     </td>
                   </tr>
                   <tr v-if="!object.is_local">

front/src/views/admin/library/TrackDetail.vue

@@ -122,22 +122,28 @@
 
                   <tr>
                     <td>
-                      <router-link :to="{name: 'manage.library.artists.detail', params: {id: object.artist.id }}">
-                        <translate translate-context="*/*/*/Noun">Artist</translate>
-                      </router-link>
+                      <translate v-if="object.artists.length == 1" translate-context="*/*/*/Noun">Artist</translate>
+                      <translate v-else translate-context="*/*/*/Noun">Artists</translate>
                     </td>
                     <td>
-                      {{ object.artist.name }}
+                      <span v-for="(artist, index) in object.artists" :key="artist.id">
+                        <span v-if="index != 0">, </span>
+                        <router-link :to="{name: 'manage.library.artists.detail', params: {id: artist.id }}">
+                          {{ artist.name }}</router-link>
+                      </span>
                     </td>
                   </tr>
                   <tr v-if="object.album">
                     <td>
-                      <router-link :to="{name: 'manage.library.artists.detail', params: {id: object.album.artist.id }}">
-                        <translate translate-context="*/*/*/Noun">Album artist</translate>
-                      </router-link>
+                      <translate v-if="object.album.artists.length == 1" translate-context="*/*/*/Noun">Album artist</translate>
+                      <translate v-else translate-context="*/*/*/Noun">Album artists</translate>
                     </td>
                     <td>
-                      {{ object.album.artist.name }}
+                      <span v-for="(artist, index) in object.album.artists" :key="artist.id">
+                        <span v-if="index != 0">, </span>
+                        <router-link :to="{name: 'manage.library.artists.detail', params: {id: artist.id }}">
+                          {{ artist.name }}</router-link>
+                      </span>
                     </td>
                   </tr>
                   <tr>