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