denote explicit lyrics and coverart

app/src/lib/Album.svelte

@@ -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;

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}
   </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>

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
       };
     })
   });