list correct artists in collab tracks
This commit is contained in:
parent
f316b8542e
commit
b8680d13f4
|
@ -55,19 +55,21 @@
|
|||
</div>
|
||||
<div class="small">{artist.name}</div>
|
||||
</span>
|
||||
{#if !hideDownload || $butShowThisDownloadLinkInstead}
|
||||
{#if $butShowThisDownloadLinkInstead}
|
||||
<a href={$butShowThisDownloadLinkInstead} target="_blank" rel="noopener" download="{$butShowThisDownloadLinkInstead.split('/').slice(-1)}">
|
||||
<div class="album-download" title="Download">
|
||||
<div class="album-inner-inner-bottom">
|
||||
{#if !hideDownload || $butShowThisDownloadLinkInstead}
|
||||
{#if $butShowThisDownloadLinkInstead}
|
||||
<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>
|
||||
{:else}
|
||||
<div class="album-download" title="Download" on:click={() => startDownload(id, {title, artist, cover}, true)}>
|
||||
<Icon icon={faDownload}/>
|
||||
</div>
|
||||
{/if}
|
||||
{/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;
|
||||
}
|
||||
|
|
|
@ -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>
|
|
@ -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
|
||||
};
|
||||
})
|
||||
}))
|
||||
});
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue