diff --git a/app/src/lib/Album.svelte b/app/src/lib/Album.svelte
index 649c1c5..506a519 100644
--- a/app/src/lib/Album.svelte
+++ b/app/src/lib/Album.svelte
@@ -70,7 +70,7 @@
{/if}
-
+
@@ -90,7 +90,7 @@
{/if}
{#if album && !short}
{#each album.tracks as track}
-
@@ -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;
diff --git a/app/src/lib/Track.svelte b/app/src/lib/Track.svelte
index 52c114f..3549dd9 100644
--- a/app/src/lib/Track.svelte
+++ b/app/src/lib/Track.svelte
@@ -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}
+ {#if explicit}
+ EXPLICIT
+ {/if}
{formatTime(duration)}
startDownload(id, {title, artist: {name: artist}, cover, album}, false)}>
@@ -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;
+ }
}
\ No newline at end of file
diff --git a/src/get/album.ts b/src/get/album.ts
index c3e5592..6bdf5a4 100644
--- a/src/get/album.ts
+++ b/src/get/album.ts
@@ -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
};
})
});