dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-06-07 16:52:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add tooltip to playlist / folder images & refactor

Browse source
This commit is contained in:
Send_Nukez 2021-11-25 01:20:50 +01:00
parent 219c16872c
commit 4328a81a1c
2 changed files with 26 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md
View file

@ -10,4 +10,5 @@ Fixed:
- Default folder images not working - Default folder images not working
Improved: Improved:
- Moved `Hide Ads` into `Main Settings` - Moved `Hide Ads` into `Main Settings`
- Added hover tooltips on playlist / folder images. Useful for collapsed sidebar

63
src/js/Folders.js
View file

@ -9,59 +9,44 @@ waitForElement([`.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`, `
root.classList.add("dribs-playlist-list"); root.classList.add("dribs-playlist-list");
/** Replace Playlist name with their pictures */ /** Replace Playlist name with their pictures */
function loadPlaylistImage() { async function loadPlaylistImage() {
for (const item of listElem.children) { for (const item of listElem.children) {
let link = item.querySelector("a"); let link = item.querySelector("a");
if (!link) continue; if (!link) continue;
let [_, app, uid] = link.pathname.split("/"); 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") { 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") { } else if (app === "folder") {
const base64 = localStorage.getItem("dribbblish:folder-image:" + uid); const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
if (base64 != null) { if (base64 != null) {
if (link.querySelector("svg")) link.querySelector("svg").remove(); if (!link.querySelector("img")) elem = document.createElement("img");
let img = link.querySelector("img"); elem.src = base64;
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = base64;
} else { } else {
if (link.querySelector("img")) link.querySelector("img").remove(); if (!link.querySelector("svg")) elem = htmlToNode(iconFolder.replace(/<\/svg>/, `<title>${title}</title>$1`));
let svg = link.querySelector("svg");
if (!svg) {
svg = htmlToNode(iconFolder);
svg.classList.add("playlist-picture");
link.prepend(svg);
}
} }
} else {
continue; continue;
} }
Spicetify.CosmosAsync.get(`sp://core-playlist/v1/playlist/${uri.toURI()}/metadata`, { policy: { picture: true } }).then((res) => { elem.title = title;
const { picture } = res.metadata; elem.classList.add("playlist-picture");
if (picture != null && picture.trim() != "") { link.prepend(elem);
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);
}
}
});
} }
} }
loadPlaylistImage(); loadPlaylistImage();