From 4328a81a1c6eb24fbc861e102c8d3e0670ad7b94 Mon Sep 17 00:00:00 2001
From: Send_Nukez <erikjulius2701@yahoo.de>
Date: Thu, 25 Nov 2021 01:20:50 +0100
Subject: [PATCH] add tooltip to playlist / folder images & refactor

---
 CHANGELOG.md      |  3 ++-
 src/js/Folders.js | 63 ++++++++++++++++++-----------------------------
 2 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e641fe1..aa0606e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,4 +10,5 @@ Fixed:
 - Default folder images not working
 
 Improved:
-- Moved `Hide Ads` into `Main Settings`
\ No newline at end of file
+- Moved `Hide Ads` into `Main Settings`
+- Added hover tooltips on playlist / folder images. Useful for collapsed sidebar
\ No newline at end of file
diff --git a/src/js/Folders.js b/src/js/Folders.js
index 909522a..16ba0ae 100644
--- a/src/js/Folders.js
+++ b/src/js/Folders.js
@@ -9,59 +9,44 @@ waitForElement([`.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`, `
     root.classList.add("dribs-playlist-list");
 
     /** Replace Playlist name with their pictures */
-    function loadPlaylistImage() {
+    async function loadPlaylistImage() {
         for (const item of listElem.children) {
             let link = item.querySelector("a");
             if (!link) continue;
 
             let [_, app, uid] = link.pathname.split("/");
-            let uri;
+
+            if (link.querySelector("svg")) link.querySelector("svg").remove();
+            if (link.querySelector("img")) link.querySelector("img").remove();
+            const title = link.querySelector("span").innerText;
+            let elem;
+
             if (app === "playlist") {
-                uri = Spicetify.URI.playlistV2URI(uid);
+                const {
+                    metadata: { picture }
+                } = await Spicetify.CosmosAsync.get(`sp://core-playlist/v1/playlist/${Spicetify.URI.playlistV2URI(uid).toURI()}/metadata`, { policy: { picture: true } });
+
+                if (picture != null && picture.trim() != "") {
+                    if (!link.querySelector("img")) elem = document.createElement("img");
+                    elem.src = picture;
+                } else {
+                    if (!link.querySelector("svg")) elem = htmlToNode(iconNote.replace(/<\/svg>/, `<title>${title}</title>$1`));
+                }
             } else if (app === "folder") {
                 const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
                 if (base64 != null) {
-                    if (link.querySelector("svg")) link.querySelector("svg").remove();
-                    let img = link.querySelector("img");
-                    if (!img) {
-                        img = document.createElement("img");
-                        img.classList.add("playlist-picture");
-                        link.prepend(img);
-                    }
-                    img.src = base64;
+                    if (!link.querySelector("img")) elem = document.createElement("img");
+                    elem.src = base64;
                 } else {
-                    if (link.querySelector("img")) link.querySelector("img").remove();
-                    let svg = link.querySelector("svg");
-                    if (!svg) {
-                        svg = htmlToNode(iconFolder);
-                        svg.classList.add("playlist-picture");
-                        link.prepend(svg);
-                    }
+                    if (!link.querySelector("svg")) elem = htmlToNode(iconFolder.replace(/<\/svg>/, `<title>${title}</title>$1`));
                 }
+            } else {
                 continue;
             }
 
-            Spicetify.CosmosAsync.get(`sp://core-playlist/v1/playlist/${uri.toURI()}/metadata`, { policy: { picture: true } }).then((res) => {
-                const { picture } = res.metadata;
-                if (picture != null && picture.trim() != "") {
-                    if (link.querySelector("svg")) link.querySelector("svg").remove();
-                    let img = link.querySelector("img");
-                    if (!img) {
-                        img = document.createElement("img");
-                        img.classList.add("playlist-picture");
-                        link.prepend(img);
-                    }
-                    img.src = picture;
-                } else {
-                    if (link.querySelector("img")) link.querySelector("img").remove();
-                    let svg = link.querySelector("svg");
-                    if (!svg) {
-                        svg = htmlToNode(iconNote);
-                        svg.classList.add("playlist-picture");
-                        link.prepend(svg);
-                    }
-                }
-            });
+            elem.title = title;
+            elem.classList.add("playlist-picture");
+            link.prepend(elem);
         }
     }
     loadPlaylistImage();