diff --git a/.config/spicetify/Extensions/dribbblish-dynamic.js b/.config/spicetify/Extensions/dribbblish-dynamic.js index 4a09122..d1845b8 100644 --- a/.config/spicetify/Extensions/dribbblish-dynamic.js +++ b/.config/spicetify/Extensions/dribbblish-dynamic.js @@ -1,6 +1,8 @@ // Hide popover message document.getElementById("popover-container").style.height = 0; +document.documentElement.style.setProperty('--warning_message', ' '); +// Get stored hidden sidebar list let appHiddenList = []; try { const rawList = JSON.parse(localStorage.getItem("sidebar-app-hide-list")); @@ -56,9 +58,9 @@ waitForElement([".LeftSidebar", ".LeftSidebar__section--rootlist .SidebarList__l if (href.indexOf("playlist-folder") != -1) { const button = item.getElementsByTagName("button")[0] - button.classList.add("Button", "Button--style-icon-background", "Button--size-28",); + button.classList.add("Button", "Button--style-icon-background", "Button--folder"); item.setAttribute("data-tooltip", item.innerText); - link.firstChild.innerText = item.innerText.slice(0, 3); + replaceTextWithIcon(link.firstChild, 'spoticon-collection-24'); continue; } @@ -121,7 +123,7 @@ waitForElement([".LeftSidebar", ".LeftSidebar__section--rootlist .SidebarList__l } if (iconName) { - el.classList.add(`spoticon-${iconName}-24`); + el.classList.add(iconName); } el.parentNode.setAttribute("data-tooltip", el.innerText); @@ -136,9 +138,7 @@ waitForElement([".LeftSidebar", ".LeftSidebar__section--rootlist .SidebarList__l 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 "made-for-you": return "user-circle"; case "collection-songs": return "heart"; case "collection:albums": return "album"; case "collection:artists": return "artist"; @@ -153,12 +153,19 @@ waitForElement([".LeftSidebar", ".LeftSidebar__section--rootlist .SidebarList__l //case "browse": return "browse"; //case "radio": return "radio"; }})(item.href.replace("spotify:app:", "")); + if (icon) { + icon = `spoticon-${icon}-24`; + } + else icon = ((app) => {switch (app) { + case "reddit": return "icomoon-reddit"; + case "recently-played": return "icomoon-recently-played"; + }})(item.href.replace("spotify:app:", "")); replaceTextWithIcon(item.firstChild, icon); }); - waitForElement([`[href="spotify:app:recently-played"]`], ([query]) => { - replaceTextWithIcon(query.firstChild, "time"); + waitForElement([`[href="spotify:app:queue:history"]`], ([query]) => { + replaceTextWithIcon(query.firstChild); }); }); @@ -218,6 +225,7 @@ 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) +let customDarken = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--custom_darken')) waitForElement([".artist"], (queries) => { nearArtistSpan = document.createElement("span"); @@ -225,36 +233,43 @@ waitForElement([".artist"], (queries) => { 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 +function updateColors(root) { + if( root===null) return; + let colHex = LightenDarkenColor(mainColor, customDarken) let colRGB = hexToRgb(colHex) - let darkerColHex = LightenDarkenColor(colHex, isLightBg ? 40 : -40) + let darkerColHex = LightenDarkenColor(colHex, isLightBg ? 45 : -40) let darkerColRGB = hexToRgb(darkerColHex) + let sliderColHex = LightenDarkenColor(colHex, isLightBg ? 40 : -65) + let sliderColRGB = hexToRgb(sliderColHex) + let buttonBgColHex = isLightBg ? "#FFFFFF" : LightenDarkenColor(colHex, -80) + let buttonBgColRGB = hexToRgb(buttonBgColHex) + 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_indicator_fg_and_button_bg', buttonBgColHex) 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_slider_bg', sliderColHex) 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_indicator_fg_and_button_bg', buttonBgColRGB) 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) + root.style.setProperty('--modspotify_rgb_slider_bg', sliderColRGB) // Also update the color of the icons for bright and white backgrounds to remain readable. let isLightFg = isLight(colHex); @@ -264,32 +279,14 @@ function updateColors(root) { } 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"); + let frames = document.getElementsByTagName("iframe"); for (i=0; i { - //console.log(data.container) - setTimeout(updateColorsAllIframes, 200) -}) + +window.addEventListener("message", ({data: info}) => { + if( info.type=="navigation_request_state" ) + setTimeout(updateColorsAllIframes, 200) +}); // Add "About" item in profile menu -new Spicetify.Menu.Item("About", false, () => window.open("spotify:app:about")).register(); \ No newline at end of file +new Spicetify.Menu.Item("About", false, () => window.open("spotify:app:about")).register(); + +// Track elapsed time +(function Dribbblish() { + if (!Spicetify.Player.origin || !Spicetify.EventDispatcher || !Spicetify.Event) { + setTimeout(Dribbblish, 300); + return; + } + + const progBar = Spicetify.Player.origin.progressbar; + + // Remove default elapsed element update since we already hide it + progBar._listenerMap["progress"].pop(); + + const tooltip = document.createElement("div"); + tooltip.className = "handle prog-tooltip"; + progBar._innerElement.append(tooltip); + + function updateTooltip(e) { + const curWidth = progBar._innerElement.offsetWidth; + const maxWidth = progBar._container.offsetWidth; + const ttWidth = tooltip.offsetWidth / 2; + if (curWidth < ttWidth) { + tooltip.style.right = String(-ttWidth * 2 + curWidth) + "px"; + } else if (curWidth > maxWidth - ttWidth) { + tooltip.style.right = String(curWidth - maxWidth) + "px"; + } else { + tooltip.style.right = String(-ttWidth) + "px"; + } + tooltip.innerText = Spicetify.Player.formatTime(e) + " / " + + Spicetify.Player.formatTime(Spicetify.Player.getDuration()); + } + progBar.addListener("progress", (e) => {updateTooltip(e.value)}); + updateTooltip(progBar._currentValue); +})(); diff --git a/.config/spicetify/Themes b/.config/spicetify/Themes deleted file mode 160000 index df4f95d..0000000 --- a/.config/spicetify/Themes +++ /dev/null @@ -1 +0,0 @@ -Subproject commit df4f95d8103f86e51a94cfb64d2fd33daeb3ae55 diff --git a/.config/spicetify/config.ini b/.config/spicetify/config.ini index 58bc50d..aa0bc99 100644 --- a/.config/spicetify/config.ini +++ b/.config/spicetify/config.ini @@ -30,5 +30,7 @@ lyric_always_show = 0 ; DO NOT CHANGE! [Backup] -version = 1.1.55.498.gf9a83c60 +version = 1.1.56.595.g2d2da0de + +[Patch]