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}
- Cover for '{title}' + Cover for '{title}'
@@ -90,7 +90,7 @@ {/if} {#if album && !short} {#each album.tracks as track} - + {/each} {/if}
@@ -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 }; }) });