diff --git a/CHANGELOG.md b/CHANGELOG.md index d199fe9..bb0bab6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,13 +1,15 @@ Added: -- New settings area called "Consistency" for things that make it more consistent with the original spotify theme - Ability to hide album name and year in playbar (#85) +- Ability to change Sidebar gap sizes (#90) +- Ability to toggle playbar shadow (#92) Fixed: -- Some sidebar items hawing wrong width on hover [(see)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/87#issuecomment-954305428) -- Sidebar config buttons being below the text +- Some sidebar items hawing wrong width on hover [(this)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/87#issuecomment-954305428) +- `Sidebar config` buttons being below the text - Fix #87 by not showing the playing indicator above "Liked Songs" - Queue icon is hidden (#73) (Temporary until a better solution is found) - Playbar album name is now white again Improved: -- Background image now dosen't leak out of the main center area \ No newline at end of file +- Background image now dosen't leak out of the main center area +- Sidebar playlist icon images are now properly displayed and won't look stretched anymore \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index b1da16f..7c55d2b 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -22,6 +22,7 @@ DribbblishShared.config.register({ }); DribbblishShared.config.register({ + area: "Sidebar", type: "checkbox", key: "roundSidebarIcons", name: "Round Sidebar Icons", @@ -40,6 +41,50 @@ DribbblishShared.config.register({ onChange: (val) => $("html").css("--sidebar-icons-hover-animation", val ? "1" : "0") }); +DribbblishShared.config.register({ + area: "Sidebar", + type: "slider", + key: "sidebarGapLeft", + name: "Left Sidebar Gap Size", + description: "Set gap size between sidebar icons (in pixels).", + defaultValue: 5, + data: { + min: 0, + max: 100, + step: 1, + suffix: "px" + }, + onChange: (val) => $("html").css("--sidebar-gap-left", `${val}px`) +}); + +DribbblishShared.config.register({ + area: "Sidebar", + type: "slider", + key: "sidebarGapRight", + name: "Right Sidebar Gap Size", + description: "Set gap size between sidebar icons (in pixels).", + defaultValue: 32, + data: { + min: 0, + max: 100, + step: 1, + suffix: "px" + }, + onChange: (val) => $("html").css("--sidebar-gap-right", `${val}px`) +}); + +waitForElement([".main-nowPlayingBar-container"], ([container]) => { + DribbblishShared.config.register({ + area: "Playbar", + type: "checkbox", + key: "playbarShadow", + name: "Playbar Shadow", + description: "Add a shadow effect underneath the playbar", + defaultValue: true, + onChange: (val) => $(container).toggleClass("with-shadow", val) + }); +}); + waitForElement(["#main"], () => { DribbblishShared.config.register({ type: "select", @@ -52,7 +97,7 @@ waitForElement(["#main"], () => { }); DribbblishShared.config.register({ - area: "Consistency", + area: "Playbar", type: "select", data: { dribbblish: "Dribbblish", spotify: "Spotify" }, key: "playerControlsStyle", @@ -66,7 +111,7 @@ waitForElement(["#main"], () => { }); DribbblishShared.config.register({ - area: "Consistency", + area: "Playbar", type: "checkbox", key: "showAlbumInfoInPlaybar", name: "Show Album Info in Playbar", @@ -540,7 +585,6 @@ function updateColors(textColHex, sideColHex, checkDarkMode = true) { if (checkDarkMode) checkDarkLightMode([textColHex, sideColHex]); } -let coverListenerInstalled = false; async function songchange() { if (!document.querySelector(".main-trackInfo-container")) return setTimeout(songchange, 300); @@ -565,9 +609,7 @@ async function songchange() { bgImage = "/images/tracklist-row-song-fallback.svg"; textColor = "#509bf5"; updateColors(textColor, textColor); - coverListenerInstalled = false; } - if (!coverListenerInstalled) hookCoverChange(true); if (album_uri !== undefined && !album_uri.includes("spotify:show")) { moment.locale(Spicetify.Locale.getLocale()); @@ -584,7 +626,6 @@ async function songchange() { } else if (Spicetify.Player.data.track.provider == "ad") { // ad albumInfoSpan.innerHTML = "Advertisement"; - coverListenerInstalled = false; return; } else { // When clicking a song from the homepage, songChange is fired with half empty metadata @@ -623,32 +664,21 @@ async function pickCoverColor(img) { updateColors(textColor, sidebarColor); } -waitForElement([".main-nowPlayingBar-left"], (queries) => { - var observer = new MutationObserver(function (mutations) { - mutations.forEach(function (mutation) { - if (mutation.removedNodes.length > 0) coverListenerInstalled = false; - }); - }); - observer.observe(queries[0], { childList: true }); -}); +function registerCoverListener() { + if (!document.querySelector(".main-image-image.cover-art-image")) return setTimeout(registerCoverListener, 250); + pickCoverColor(document.querySelector(".main-image-image.cover-art-image")); -function hookCoverChange(pick) { - waitForElement([".cover-art-image"], (queries) => { - coverListenerInstalled = true; - var elem = queries.slice(-1)[0]; - if (pick && elem.complete && elem.naturalHeight !== 0) pickCoverColor(elem); - elem.addEventListener("load", function () { - try { - pickCoverColor(elem); - } catch (error) { - console.error(error); - setTimeout(pickCoverColor, 300, elem); - } - }); + const observer = new MutationObserver((muts) => { + const img = document.querySelector(".main-image-image.cover-art-image"); + if (!img) return registerCoverListener(); + pickCoverColor(img); + }); + observer.observe(document.querySelector(".main-image-image.cover-art-image"), { + attributes: true, + attributeFilter: ["src"] }); } - -hookCoverChange(false); +registerCoverListener(); // Check latest release every 10m waitForElement([".main-userWidget-box"], ([userWidget]) => { diff --git a/src/styles/main.scss b/src/styles/main.scss index 4e6ffaf..7188eca 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -367,10 +367,13 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type { .main-nowPlayingBar-container { border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius); - background-color: unset; - background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%); + background-color: var(--spice-main); border-top: 0; min-width: 518px; + + &.with-shadow { + background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%); + } } .main-buddyFeed-findFriendsButton { @@ -714,6 +717,7 @@ img.playlist-picture { width: 32px; height: 32px; flex: 0 0 32px; + object-fit: cover; background-size: cover; background-position: center; border-radius: var(--sidebar-icons-border-radius); @@ -1027,7 +1031,17 @@ span.main-userWidget-displayName, .main-rootlist-rootlistContent .os-content { display: flex; flex-direction: column; - gap: 5px; + gap: var(--sidebar-gap-left); +} + +.main-buddyFeed-scrollableArea ol { + display: flex; + flex-direction: column; + gap: var(--sidebar-gap-right); +} + +.main-buddyFeed-friendActivity { + padding: 0px 16px; } #spicetify-show-list:empty {