list correct artists in collab tracks

app/src/lib/Album.svelte

@@ -55,19 +55,21 @@
         </div>
         <div class="small">{artist.name}</div>
       </span>
-      {#if !hideDownload || $butShowThisDownloadLinkInstead}
+      <div class="album-inner-inner-bottom">
-        {#if $butShowThisDownloadLinkInstead}
+        {#if !hideDownload || $butShowThisDownloadLinkInstead}
-          <a href={$butShowThisDownloadLinkInstead} target="_blank" rel="noopener" download="{$butShowThisDownloadLinkInstead.split('/').slice(-1)}">
+          {#if $butShowThisDownloadLinkInstead}
-            <div class="album-download" title="Download">
+            <a href={$butShowThisDownloadLinkInstead} target="_blank" rel="noopener" download="{$butShowThisDownloadLinkInstead.split('/').slice(-1)}">
+              <div class="album-download" title="Download">
+                <Icon icon={faDownload}/>
+              </div>
+            </a>
+          {:else}
+            <div class="album-download" title="Download" on:click={() => startDownload(id, {title, artist, cover}, true)}>
               <Icon icon={faDownload}/>
             </div>
-          </a>
+          {/if}
-        {:else}
-          <div class="album-download" title="Download" on:click={() => startDownload(id, {title, artist, cover}, true)}>
-            <Icon icon={faDownload}/>
-          </div>
         {/if}
-      {/if}
+      </div>
     </div>
     <div class="album-image-wrapper">
       <img class="album-image" class:explicit={album && album.explicitCover === 1} width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/{cover}/128x128-000000-80-0-0.jpg" alt="Cover for '{title}'">
@@ -90,7 +92,7 @@
   {/if}
   {#if album && !short}
     {#each album.tracks as track}
-      <Track id={track.id} title={track.title} duration={track.duration} artist={track.artist} cover={cover} album={title} albumArtist={artist.name} explicit={track.explicit === 1}/>
+      <Track id={track.id} title={track.title} duration={track.duration} artist={track.contributors.map(a => a && a.name).join(', ')} cover={cover} album={title} albumArtist={artist.name} explicit={track.explicit === 1}/>
     {/each}
   {/if}
 </div>
@@ -113,13 +115,20 @@
   .album-inner-top {
     display: flex;
     justify-content: space-between;
-    gap: 0.5em;
+    gap: 1em;
   }
   .album-inner-bottom {
     display: flex;
     flex-direction: column;
     align-items: stretch;
   }
+  .album-inner-inner-bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    align-items: flex-end;
+  }
   .album.short {
     border-radius: 10px 10px 10px 10px;
   }
@@ -222,10 +231,6 @@
     .album:hover .album-image-wrapper {
       border: 0px solid rgba(0, 0, 0, 0);
     }
-    .album-bottom {
-      background-color: #112;
-      border-left: 0rem solid rgb(131, 131, 243);
-    }
     .progress-state {
       background-color: #0a0a0f;
     }
@@ -263,10 +268,6 @@
     .album:hover .album-image-wrapper {
       border: 0px solid rgba(0, 0, 0, 0);
     }
-    .album-bottom {
-      background-color: #ffffff;
-      border-left: 0rem solid #ea74ac;
-    }
     .progress-state {
       background-color: #fafafa;
     }

app/src/lib/Track.svelte

@@ -47,17 +47,15 @@
     align-items: center;
     font-size: large;
     transition: 0.05s background-color ease-out, 0.1s border-left ease-out;
+    margin-bottom: 3px;
   }
   .track:nth-last-child(1) {
-    border-bottom: none;
     border-radius: 0px 0px 15px 15px;
   }
 
   .track-left {
     flex: 1 1 0px;
-    text-overflow: ellipsis;
     overflow: hidden;
-    white-space: nowrap;
   }
   .track-right {
     flex: 0 0 auto;
@@ -91,7 +89,6 @@
       filter: drop-shadow( 0px 0px 6px #8383F3);
     }
     .track {
-      border-bottom: 3px solid #0a0a0f;
       border-left: 0rem solid rgb(131, 131, 243);
     }
     .track:hover {
@@ -102,6 +99,9 @@
       background-color: #f0f0f0;
       color: #0a0a0f;
     }
+    .track {
+      background-color: #112;
+    }
   }
 
   @media (prefers-color-scheme: light) {
@@ -114,7 +114,6 @@
       filter: drop-shadow( 0px 0px 6px #f484b6);
     }
     .track {
-      border-bottom: 3px solid #f0f0f0;
       border-left: 0rem solid #ea74ac;
     }
     .track:hover {
@@ -125,5 +124,8 @@
       background-color: #0a0a0f;
       color: #fff;
     }
+    .track {
+      background-color: #ffffff;
+    }
   }
 </style>

src/get/album.ts

@@ -26,16 +26,18 @@ router.get('/api/album', async (req, res) => {
     link: album.link,
     releaseDate: album.release_date,
     explicitCover: album.explicit_content_cover,
-    tracks: album.tracks.data.map(t => {
+    tracks: await Promise.all(album.tracks.data.map(async ({id}) => {
+      const t = await deezerInstance.api.get_track(id);
       return {
         id: t.id,
         title: t.title,
         duration: t.duration,
         link: t.link,
         artist: t.artist.name,
-        explicit: t.explicit_content_lyrics
+        explicit: t.explicit_content_lyrics,
+        contributors: t.contributors
       };
-    })
+    }))
   });
 });