dotfiles/.config/spicetify/Extensions/dribbblish-dynamic.js

359 lines
16 KiB
JavaScript

// Hide popover message
document.getElementById("popover-container").style.height = 0;
let appHiddenList = [];
try {
const rawList = JSON.parse(localStorage.getItem("sidebar-app-hide-list"));
if (!Array.isArray(rawList)) throw 0;
appHiddenList.push(...rawList);
} catch {
localStorage.setItem("sidebar-app-hide-list", "[]")
}
new Spicetify.ContextMenu.Item(
"Hide",
([uri]) => {
appHiddenList.push(uri.replace("spotify:special:sidebarapp:", ""));
localStorage.setItem("sidebar-app-hide-list", JSON.stringify(appHiddenList));
window.location.reload();
},
([uri]) => uri.startsWith("spotify:special:sidebarapp:")
).register();
for (const app of appHiddenList) {
new Spicetify.ContextMenu.Item(
"Show " + app.replace("spotify:app:", ""),
() => {
appHiddenList = appHiddenList.filter(item => item !== app);
localStorage.setItem("sidebar-app-hide-list", JSON.stringify(appHiddenList));
window.location.reload();
},
([uri]) => uri.startsWith("spotify:special:sidebarapp:")
).register();
}
function waitForElement(els, func, timeout = 100) {
const queries = els.map(el => document.querySelector(el));
if (queries.every(a => a)) {
func(queries);
} else if (timeout > 0) {
setTimeout(waitForElement, 300, els, func, --timeout);
}
}
waitForElement([".LeftSidebar", ".LeftSidebar__section--rootlist .SidebarList__list"], (queries) => {
/** Replace Playlist name with their pictures */
function loadPlaylistImage() {
const sidebarItem = queries[1].childNodes;
for (let i = 0; i < sidebarItem.length; i++) {
const item = sidebarItem[i];
let link = item.getElementsByTagName("a");
if (!link || !link[0]) continue;
link = link[0];
let href = link.href.replace("app:", "");
if (href.indexOf("playlist-folder") != -1) {
const button = item.getElementsByTagName("button")[0]
button.classList.add("Button", "Button--style-icon-background", "Button--size-28",);
item.setAttribute("data-tooltip", item.innerText);
link.firstChild.innerText = item.innerText.slice(0, 3);
continue;
}
if (href.indexOf("chart") != -1) {
href = href.replace("chart:", "user:spotifycharts:playlist:");
}
Spicetify.CosmosAPI.resolver.get({
url: `sp://core-playlist/v1/playlist/${href}/metadata`,
body: { policy: { picture: true } },
}, (err, res) => {
if (err) return;
const meta = res.getJSONBody().metadata;
item.firstChild.className = "playlist-picture"
item.firstChild.style.backgroundImage = `url(${meta.picture})`;
item.firstChild.setAttribute("data-tooltip", item.textContent);
});
}
}
loadPlaylistImage();
new MutationObserver(loadPlaylistImage)
.observe(queries[1], {childList: true});
/** Replace Apps name with icons */
/** List of avaiable icons to use:
addfollow filter more skipforward15
addfollowers flag newradio sort
addsuggestedsong follow notifications sortdown
album fullscreen offline sortup
artist gears pause spotifylogo
attach headphones play star
block heart playlist stations
bluetooth helpcircle plus subtitles
browse home podcasts tag
camera inbox queue time
check instagram radio track
collection lightning refresh trending
copy localfile released user
devices locked repeat video
discover lyrics repeatonce volume
download menu search watch
downloaded messages share x
edit mic shuffle helpcircle
email minimise skip
events mix skipback15
*/
function replaceTextWithIcon(el, iconName) {
const href = el.parentNode.href;
if (appHiddenList.indexOf(href) !== -1) {
let parent = el;
while (parent.tagName !== "LI") {
parent = parent.parentNode;
}
parent.remove();
return;
}
if (iconName) {
el.classList.add(`spoticon-${iconName}-24`);
}
el.parentNode.setAttribute("data-tooltip", el.innerText);
el.parentNode.setAttribute("data-contextmenu", "");
el.parentNode.setAttribute("data-uri", "spotify:special:sidebarapp:" + href);
el.innerText = "";
}
queries[0].querySelectorAll(".LeftSidebar__section:not(.LeftSidebar__section--rootlist) [href]")
.forEach(item => {
let icon = ((app) => {switch (app) {
case "genius": return "lyrics";
case "JQBX": return "addsuggestedsong";
case "bookmark": return "tag";
case "reddit": return "discover";
case "made-for-you": return "user";
case "recently-played": return "time";
case "collection-songs": return "heart";
case "collection:albums": return "album";
case "collection:artists": return "artist";
case "collection:podcasts": return "podcasts";
case "playlist:local-files": return "localfile";
case "stations": return "stations";
/**
* Uncomment 3 lines below if you're using old version of Spotify that
* does not have Home/Browse/Radio app icons by default.
*/
//case "home": return "home";
//case "browse": return "browse";
//case "radio": return "radio";
}})(item.href.replace("spotify:app:", ""));
replaceTextWithIcon(item.firstChild, icon);
});
waitForElement([`[href="spotify:app:recently-played"]`], ([query]) => {
replaceTextWithIcon(query.firstChild, "time");
});
});
waitForElement(["#search-input"], (queries) => {
queries[0].setAttribute("placeholder", "");
});
waitForElement(["#main-container"], (queries) => {
const shadow = document.createElement("div");
shadow.id = "dribbblish-back-shadow";
queries[0].prepend(shadow);
});
waitForElement([".LeftSidebar"], (queries) => {
const fade = document.createElement("div");
fade.id = "dribbblish-sidebar-fade-in";
queries[0].append(fade);
});
var big_album_cover = document.querySelector('#now-playing-image-small');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type == "attributes") {
if(big_album_cover.getAttribute("data-log-context") === "cover-large"){
document.documentElement.style.setProperty('--move_buddy_list', "250px");
}else{
document.documentElement.style.setProperty('--move_buddy_list', "0px");
}
}
});
});
function getAlbumInfo(uri) {
return new Promise((resolve) => { Spicetify.CosmosAPI.resolver.get(`hm://album/v1/album-app/album/${uri}/desktop`, (err, raw) => {
resolve(!err && raw.getJSONBody())
})})
}
function isLight(hex) {
var [r,g,b] = hexToRgb(hex).split(',').map(Number);
const brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000;
return brightness > 128;
}
function hexToRgb(hex) {
var bigint = parseInt(hex.replace("#",""), 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return r + "," + g + "," + b;
}
const LightenDarkenColor = (h, p) => '#' + [1, 3, 5].map(s => parseInt(h.substr(s, 2), 16)).map(c => parseInt((c * (100 + p)) / 100)).map(c => (c < 255 ? c : 255)).map(c => c.toString(16).padStart(2, '0')).join('');
let nearArtistSpan = null
let mainColor = getComputedStyle(document.documentElement).getPropertyValue('--modspotify_main_fg')
let mainColor2 = getComputedStyle(document.documentElement).getPropertyValue('--modspotify_main_bg')
let isLightBg = isLight(mainColor2)
waitForElement([".artist"], (queries) => {
nearArtistSpan = document.createElement("span");
nearArtistSpan.id = "dribbblish-album-info";
queries[0].append(nearArtistSpan);
});
function updateColors(root) {
let colHex = mainColor
if( isLightBg ) colHex = LightenDarkenColor(colHex, -5) // vibrant color is always too bright for white bg mode
let colRGB = hexToRgb(colHex)
let darkerColHex = LightenDarkenColor(colHex, isLightBg ? 40 : -40)
let darkerColRGB = hexToRgb(darkerColHex)
root.style.setProperty('--is_light', isLightBg ? 1 : 0)
root.style.setProperty('--modspotify_main_fg', colHex)
root.style.setProperty('--modspotify_active_control_fg', colHex)
root.style.setProperty('--modspotify_secondary_bg', colHex)
//root.style.setProperty('--modspotify_pressing_button_bg', colHex)
//root.style.setProperty('--modspotify_indicator_fg_and_button_bg', colHex)
root.style.setProperty('--modspotify_pressing_fg', colHex)
root.style.setProperty('--modspotify_sidebar_indicator_and_hover_button_bg', colHex)
//root.style.setProperty('--modspotify_scrollbar_fg_and_selected_row_bg', darkerColHex)
root.style.setProperty('--modspotify_selected_button', darkerColHex)
//root.style.setProperty('--modspotify_miscellaneous_hover_bg', colHex)
root.style.setProperty('--modspotify_rgb_main_fg', colRGB)
root.style.setProperty('--modspotify_rgb_active_control_fgg', colRGB)
root.style.setProperty('--modspotify_rgb_secondary_bg', colRGB)
//root.style.setProperty('--modspotify_rgb_pressing_button_bg', colRGB)
//root.style.setProperty('--modspotify_rgb_indicator_fg_and_button_bg', colRGB)
root.style.setProperty('--modspotify_rgb_pressing_fg', colRGB)
root.style.setProperty('--modspotify_rgb_sidebar_indicator_and_hover_button_bg', colRGB)
//root.style.setProperty('--modspotify_rgb_scrollbar_fg_and_selected_row_bg', darkerColRGB)
root.style.setProperty('--modspotify_rgb_selected_button', darkerColRGB)
//root.style.setProperty('--modspotify_rgb_miscellaneous_hover_bg', colRGB)
// Also update the color of the icons for bright and white backgrounds to remain readable.
let isLightFg = isLight(colHex);
if( isLightBg ) isLightFg = !isLightFg;
iconCol = getComputedStyle(document.documentElement).getPropertyValue(isLightFg ? '--modspotify_main_bg' : '--modspotify_secondary_fg');
root.style.setProperty('--modspotify_preserve_1', iconCol);
}
function updateColorsAllIframes() {
// playing queue
if (document.querySelector("#app-queue")!=null) updateColors(document.querySelector("#app-queue").contentDocument.documentElement)
// collection (podcast, recent, etc.)
if (document.querySelector("#app-collection")!=null) updateColors(document.querySelector("#app-collection").contentDocument.documentElement)
// collection (local files)
if (document.querySelector("#app-collection-songs")!=null) updateColors(document.querySelector("#app-collection-songs").contentDocument.documentElement)
// buddy list
if (document.querySelector("#iframe-buddy-list")!=null) updateColors(document.querySelector("#iframe-buddy-list").contentDocument.documentElement)
// playlist
if (document.querySelector("#app-playlist")!=null) updateColors(document.querySelector("#app-playlist").contentDocument.documentElement)
// search
if (document.querySelector("#app-search")!=null) updateColors(document.querySelector("#app-search").contentDocument.documentElement)
// genius
if (document.querySelector("#app-genius")!=null) updateColors(document.querySelector("#app-genius").contentDocument.documentElement)
// browse
if (document.querySelector("#app-browse")!=null) updateColors(document.querySelector("#app-browse").contentDocument.documentElement)
// genre
if (document.querySelector("#app-genre")!=null) updateColors(document.querySelector("#app-genre").contentDocument.documentElement)
// artist
if (document.querySelector("#app-artist")!=null) updateColors(document.querySelector("#app-artist").contentDocument.documentElement)
// code below works but then generate many errors on page change.
frames = document.getElementsByTagName("iframe");
for (i=0; i<frames.length; ++i) {
console.log(i+". "+frames[i].id)
updateColors(frames[i].contentDocument.documentElement)
}
}
function trickHideGradient(display) {
// gradient can't be animated so hide and reshow
document.querySelector("#dribbblish-sidebar-fade-in").style.display = display
}
async function songchange() {
let album_uri = Spicetify.Player.data.track.metadata.album_uri
if (album_uri!==undefined) {
const albumInfo = await getAlbumInfo(album_uri.replace("spotify:album:", ""))
let album_date = new Date(albumInfo.year, (albumInfo.month || 1)-1, albumInfo.day|| 0)
let recent_date = new Date()
recent_date.setMonth(recent_date.getMonth() - 6)
album_date = album_date.toLocaleString('default', album_date>recent_date ? { year: 'numeric', month: 'short' } : { year: 'numeric' })
album_link = "<a title=\""+Spicetify.Player.data.track.metadata.album_title+"\" href=\""+album_uri+"\" data-uri=\""+album_uri+"\" data-interaction-target=\"album-name\" class=\"tl-cell__content\">"+Spicetify.Player.data.track.metadata.album_title+"</a>"
if (nearArtistSpan!==null)
nearArtistSpan.innerHTML = " — " + album_link + " • " + album_date
} else if (Spicetify.Player.data.track.metadata.album_track_number==0) {
// podcast
nearArtistSpan.innerText = Spicetify.Player.data.track.metadata.album_title
} else if (Spicetify.Player.data.track.metadata.is_local=="true") {
// local file
nearArtistSpan.innerText = " — " + Spicetify.Player.data.track.metadata.album_title
} else {
// When clicking a song from the homepage, songChange is fired with half empty metadata
// todo: retry only once?
setTimeout(songchange, 200)
}
document.documentElement.style.setProperty('--image_url', 'url("'+Spicetify.Player.data.track.metadata.image_url+'")')
Spicetify.colorExtractor(Spicetify.Player.data.track.uri)
.then((colors) => {
mainColor = colors['LIGHT_VIBRANT']
// Spotify returns hex colors with improper length
while( mainColor.length!=4 && mainColor.length<7 )
{ mainColor = mainColor.replace("#", "#0"); }
// main app
trickHideGradient('none') // bottom left gradient looks bad when changing color
updateColors(document.documentElement)
setTimeout(trickHideGradient, 1500, 'block') //animation lasts 1.5sec
// most pages are iframes, they need a specific color update
updateColorsAllIframes()
}, (err) => {
console.log(err)
// On startup we receive songChange too soon and colorExtractor will fail
// todo: retry only colorExtract
setTimeout(songchange, 200)
})
}
Spicetify.Player.addEventListener("songchange", songchange)
Spicetify.Player.addEventListener("appchange", ({"data": data}) => {
//console.log(data.container)
setTimeout(updateColorsAllIframes, 200)
})
// Add "About" item in profile menu
new Spicetify.Menu.Item("About", false, () => window.open("spotify:app:about")).register();