From d7a399bf29eb275876f9ea551c173fe76356b04d Mon Sep 17 00:00:00 2001
From: Nam Anh <phamnamanh25@gmail.com>
Date: Thu, 21 Jul 2022 20:30:07 +0700
Subject: [PATCH] fix(Dribbblish): playlist icon fallback (#806)

---
 Dribbblish/dribbblish.js                          | 11 +++++++++--
 Dribbblish/images/tracklist-row-song-fallback.svg |  1 +
 Dribbblish/user.css                               |  6 ++++++
 3 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 Dribbblish/images/tracklist-row-song-fallback.svg

diff --git a/Dribbblish/dribbblish.js b/Dribbblish/dribbblish.js
index b5d059f..691a229 100644
--- a/Dribbblish/dribbblish.js
+++ b/Dribbblish/dribbblish.js
@@ -34,6 +34,13 @@ function waitForElement(els, func, timeout = 100) {
     }
 }
 
+// Avoid clipping playlists at the bottom of scroll node
+waitForElement([".main-rootlist-wrapper"], () => {
+    const mainRootlist = document.querySelector(".main-rootlist-wrapper");
+    const playListItems = document.getElementsByClassName("main-rootlist-rootlistItemLink")
+    mainRootlist.style.height = `${playListItems.length * 56}px`;
+});
+
 waitForElement([
     `ul[tabindex="0"]`,
     `ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`
@@ -59,7 +66,7 @@ waitForElement([
                     img.classList.add("playlist-picture");
                     link.prepend(img);
                 }
-                img.src = base64  || "/images/tracklist-row-song-fallback.svg";
+                img.src = base64  || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
                 continue;
             }
 
@@ -74,7 +81,7 @@ waitForElement([
                     img.classList.add("playlist-picture");
                     link.prepend(img);
                 }
-                img.src = meta.picture || "/images/tracklist-row-song-fallback.svg";
+                img.src = meta.picture || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
             });
         }
     }
diff --git a/Dribbblish/images/tracklist-row-song-fallback.svg b/Dribbblish/images/tracklist-row-song-fallback.svg
new file mode 100644
index 0000000..40980a7
--- /dev/null
+++ b/Dribbblish/images/tracklist-row-song-fallback.svg
@@ -0,0 +1 @@
+<svg width="80" height="81" viewBox="0 0 80 81" xmlns="http://www.w3.org/2000/svg"><title>Playlist Icon</title><path d="M25.6 11.565v45.38c-2.643-3.27-6.68-5.37-11.2-5.37-7.94 0-14.4 6.46-14.4 14.4s6.46 14.4 14.4 14.4 14.4-6.46 14.4-14.4v-51.82l48-10.205V47.2c-2.642-3.27-6.678-5.37-11.2-5.37-7.94 0-14.4 6.46-14.4 14.4s6.46 14.4 14.4 14.4S80 64.17 80 56.23V0L25.6 11.565zm-11.2 65.61c-6.176 0-11.2-5.025-11.2-11.2 0-6.177 5.024-11.2 11.2-11.2 6.176 0 11.2 5.023 11.2 11.2 0 6.174-5.026 11.2-11.2 11.2zm51.2-9.745c-6.176 0-11.2-5.024-11.2-11.2 0-6.174 5.024-11.2 11.2-11.2 6.176 0 11.2 5.026 11.2 11.2 0 6.178-5.026 11.2-11.2 11.2z" fill="currentColor" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/Dribbblish/user.css b/Dribbblish/user.css
index 7ad49e8..0ee9810 100644
--- a/Dribbblish/user.css
+++ b/Dribbblish/user.css
@@ -503,6 +503,12 @@ img.playlist-picture {
     border-radius: 50%;
 }
 
+img.playlist-picture[src$=".svg"] {
+    width: 24px;
+    height: 24px;
+    border-radius: 0;
+}
+
 .main-rootlist-rootlistItem a span {
     margin-left: 24px;
 }