denote explicit lyrics and coverart
This commit is contained in:
parent
f5a413cd99
commit
f316b8542e
|
@ -70,7 +70,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
<div class="album-image-wrapper">
|
||||
<img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/{cover}/128x128-000000-80-0-0.jpg" alt="Cover for '{title}'">
|
||||
<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}'">
|
||||
</div>
|
||||
</div>
|
||||
<div class="album-inner-bottom">
|
||||
|
@ -90,7 +90,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}/>
|
||||
<Track id={track.id} title={track.title} duration={track.duration} artist={track.artist} cover={cover} album={title} albumArtist={artist.name} explicit={track.explicit === 1}/>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
@ -182,6 +182,14 @@
|
|||
align-self: stretch;
|
||||
}
|
||||
|
||||
.explicit {
|
||||
transition: 0.2s filter ease-out;
|
||||
filter: blur(8px);
|
||||
}
|
||||
.explicit:hover {
|
||||
filter: blur(0px);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.album-download {
|
||||
color: #fff;
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
export let duration;
|
||||
export let album;
|
||||
export let albumArtist;
|
||||
export let explicit;
|
||||
|
||||
import { formatTime } from './format';
|
||||
|
||||
|
@ -24,6 +25,9 @@
|
|||
{/if}
|
||||
</span>
|
||||
<span class="track-right">
|
||||
{#if explicit}
|
||||
<div class="tag">EXPLICIT</div>
|
||||
{/if}
|
||||
<span class="small">{formatTime(duration)}</span>
|
||||
<span class="track-download" title="Download" on:click={() => startDownload(id, {title, artist: {name: artist}, cover, album}, false)}>
|
||||
<Icon icon={faDownload}/>
|
||||
|
@ -69,6 +73,14 @@
|
|||
transition: 0.1s filter ease-out, 0.1s color ease-out;
|
||||
}
|
||||
|
||||
.tag {
|
||||
text-transform: uppercase;
|
||||
border-radius: 10px;
|
||||
padding: 0.2em;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.track-download {
|
||||
color: #fff;
|
||||
|
@ -86,6 +98,10 @@
|
|||
background-color: #161627;
|
||||
border-left: 0.25rem solid rgb(131, 131, 243);
|
||||
}
|
||||
.tag {
|
||||
background-color: #f0f0f0;
|
||||
color: #0a0a0f;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
|
@ -105,5 +121,9 @@
|
|||
background-color: #fafafa;
|
||||
border-left: 0.25rem solid #ea74ac;
|
||||
}
|
||||
.tag {
|
||||
background-color: #0a0a0f;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -32,7 +32,8 @@ router.get('/api/album', async (req, res) => {
|
|||
title: t.title,
|
||||
duration: t.duration,
|
||||
link: t.link,
|
||||
artist: t.artist.name
|
||||
artist: t.artist.name,
|
||||
explicit: t.explicit_content_lyrics
|
||||
};
|
||||
})
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue