Add placeholder icon for songs without artwork (#13)

themintchoco · Mar 12, 2023 · 85524c1 · 85524c1
1 parent 6b68ad4
commit 85524c1
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 2 deletions.
diff --git a/src/assets/icons/placeholder.png b/src/assets/icons/placeholder.png
diff --git a/src/manifest.json b/src/manifest.json
@@ -37,7 +37,7 @@
 
   "web_accessible_resources": [
     {
-      "resources": ["*.js"],
+      "resources": ["*.js", "assets/*"],
       "matches": ["*://*.youtube.com/*"]
     }
   ]

diff --git a/src/pages/content/SongItem.module.scss b/src/pages/content/SongItem.module.scss
@@ -12,6 +12,15 @@
     height: 50px;
     flex-shrink: 0;
     border-radius: 8px;
+    background-color: var(--yt-spec-10-percent-layer);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    &.placeholder {
+      background-size: 65%;
+      filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
+    }
   }
 
   .details {

diff --git a/src/pages/content/SongItem.tsx b/src/pages/content/SongItem.tsx
@@ -12,7 +12,7 @@ export interface SongItemProps {
 const SongItem = ({ song, active, onSelectSong } : SongItemProps) => {
   return (
     <div className={cx(styles.songItem, { [styles.active]: active })} onClick={() => onSelectSong?.(song)}>
-      <div className={styles.art} style={{background: 'var(--yt-spec-10-percent-layer)' + (song.art ? ` center/cover url('${song.art}')` : '')}}></div>
+      <div className={cx(styles.art, { [styles.placeholder]: !song.art })} style={{backgroundImage: `url("${song.art ?? chrome.runtime.getURL('assets/icons/placeholder.png')}")`}}></div>
       <div className={styles.details}>
         <h3>{song.name}</h3>
         <h4 className={styles.secondary}>{song.original_artist}</h4>

diff --git a/webpack.config.js b/webpack.config.js
@@ -132,6 +132,10 @@ const config = {
         {
           from: path.join(__dirname, 'icons'),
         },
+        {
+          from: path.join(__dirname, 'src', 'assets'),
+          to: 'assets',
+        },
       ],
     }),
     new HtmlWebpackPlugin({