From e4a717900e423f021f8450d3556fae82d665a0bb Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Mon, 9 Sep 2024 17:55:01 +0100 Subject: [PATCH 1/5] feat(Topbar): cross-version classname support --- jsHelper/spicetifyWrapper.js | 31 +++++++++++-------------------- 1 file changed, 11 insertions(+), 20 deletions(-) diff --git a/jsHelper/spicetifyWrapper.js b/jsHelper/spicetifyWrapper.js index 2ae81cbeb1..d1f3858d6a 100644 --- a/jsHelper/spicetifyWrapper.js +++ b/jsHelper/spicetifyWrapper.js @@ -2080,12 +2080,13 @@ Object.defineProperty(Spicetify, "TippyProps", { }); Spicetify.Topbar = (() => { + let leftGeneratedClassName; + let rightGeneratedClassName; let leftContainer; let rightContainer; const leftButtonsStash = new Set(); const rightButtonsStash = new Set(); - const generatedClassName = "Button-medium-medium-buttonTertiary-iconOnly-condensed-disabled-isUsingKeyboard-useBrowserDefaultFocusStyle"; - + class Button { constructor(label, icon, onClick, disabled = false, isRight = false) { this.element = document.createElement("div"); @@ -2100,19 +2101,12 @@ Spicetify.Topbar = (() => { this.label = label; this.element.appendChild(this.button); - const globalHistoryButtons = document.querySelector(".main-globalNav-historyButtons"); if (isRight) { - this.button.classList.add("encore-over-media-set", "main-topBar-buddyFeed"); - if (globalHistoryButtons) this.button.classList.add("main-globalNav-buddyFeed"); - + this.button.className = rightGeneratedClassName; rightButtonsStash.add(this.element); rightContainer?.prepend(this.element); } else { - this.button.classList.add("main-topBar-button"); - if (globalHistoryButtons) { - this.button.classList.add("main-globalNav-icon", generatedClassName); - } - + this.button.className = leftGeneratedClassName; leftButtonsStash.add(this.element); leftContainer?.append(this.element); } @@ -2156,31 +2150,28 @@ Spicetify.Topbar = (() => { function waitForTopbarMounted() { const globalHistoryButtons = document.querySelector(".main-globalNav-historyButtons"); + leftGeneratedClassName = document.querySelector(".main-globalNav-historyButtons [data-encore-id='buttonTertiary'], .main-topBar-historyButtons [data-encore-id='buttonTertiary']")?.className + rightGeneratedClassName = document.querySelector(".main-actionButtons [data-encore-id='buttonTertiary']")?.className leftContainer = document.querySelector(".main-topBar-historyButtons") ?? globalHistoryButtons; rightContainer = document.querySelector(".main-actionButtons"); - if (!leftContainer || !rightContainer) { + if (!leftContainer || !rightContainer || !leftGeneratedClassName || !rightGeneratedClassName) { setTimeout(waitForTopbarMounted, 100); return; } - + if (globalHistoryButtons) globalHistoryButtons.style = "gap: 4px; padding-inline: 4px 4px"; for (const button of leftButtonsStash) { if (button.parentNode) button.parentNode.removeChild(button); const buttonElement = button.querySelector("button"); - if (globalHistoryButtons) { - buttonElement.classList.add("main-globalNav-icon", generatedClassName); - } else { - buttonElement.classList.remove("main-globalNav-icon", generatedClassName); - } + buttonElement.className = leftGeneratedClassName } leftContainer.append(...leftButtonsStash); for (const button of rightButtonsStash) { if (button.parentNode) button.parentNode.removeChild(button); const buttonElement = button.querySelector("button"); - if (globalHistoryButtons) buttonElement.classList.add("main-globalNav-buddyFeed"); - else buttonElement.classList.remove("main-globalNav-buddyFeed"); + buttonElement = rightGeneratedClassName } rightContainer.prepend(...rightButtonsStash); } From f0997451a5ec4267a026ac89e40c3a7ec0ac2b30 Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Mon, 9 Sep 2024 18:02:14 +0100 Subject: [PATCH 2/5] biome --- jsHelper/spicetifyWrapper.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/jsHelper/spicetifyWrapper.js b/jsHelper/spicetifyWrapper.js index d1f3858d6a..b53e74025b 100644 --- a/jsHelper/spicetifyWrapper.js +++ b/jsHelper/spicetifyWrapper.js @@ -2086,7 +2086,7 @@ Spicetify.Topbar = (() => { let rightContainer; const leftButtonsStash = new Set(); const rightButtonsStash = new Set(); - + class Button { constructor(label, icon, onClick, disabled = false, isRight = false) { this.element = document.createElement("div"); @@ -2150,28 +2150,30 @@ Spicetify.Topbar = (() => { function waitForTopbarMounted() { const globalHistoryButtons = document.querySelector(".main-globalNav-historyButtons"); - leftGeneratedClassName = document.querySelector(".main-globalNav-historyButtons [data-encore-id='buttonTertiary'], .main-topBar-historyButtons [data-encore-id='buttonTertiary']")?.className - rightGeneratedClassName = document.querySelector(".main-actionButtons [data-encore-id='buttonTertiary']")?.className + leftGeneratedClassName = document.querySelector( + ".main-globalNav-historyButtons [data-encore-id='buttonTertiary'], .main-topBar-historyButtons [data-encore-id='buttonTertiary']" + )?.className; + rightGeneratedClassName = document.querySelector(".main-actionButtons [data-encore-id='buttonTertiary']")?.className; leftContainer = document.querySelector(".main-topBar-historyButtons") ?? globalHistoryButtons; rightContainer = document.querySelector(".main-actionButtons"); if (!leftContainer || !rightContainer || !leftGeneratedClassName || !rightGeneratedClassName) { setTimeout(waitForTopbarMounted, 100); return; } - + if (globalHistoryButtons) globalHistoryButtons.style = "gap: 4px; padding-inline: 4px 4px"; for (const button of leftButtonsStash) { if (button.parentNode) button.parentNode.removeChild(button); const buttonElement = button.querySelector("button"); - buttonElement.className = leftGeneratedClassName + buttonElement.className = leftGeneratedClassName; } leftContainer.append(...leftButtonsStash); for (const button of rightButtonsStash) { if (button.parentNode) button.parentNode.removeChild(button); const buttonElement = button.querySelector("button"); - buttonElement = rightGeneratedClassName + buttonElement.className = rightGeneratedClassName; } rightContainer.prepend(...rightButtonsStash); } From a2dc142abaa392b91f22430de65816c8cb9dd1b0 Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Mon, 9 Sep 2024 21:17:21 +0100 Subject: [PATCH 3/5] update selectors --- jsHelper/spicetifyWrapper.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jsHelper/spicetifyWrapper.js b/jsHelper/spicetifyWrapper.js index b53e74025b..35777f0754 100644 --- a/jsHelper/spicetifyWrapper.js +++ b/jsHelper/spicetifyWrapper.js @@ -2151,9 +2151,9 @@ Spicetify.Topbar = (() => { function waitForTopbarMounted() { const globalHistoryButtons = document.querySelector(".main-globalNav-historyButtons"); leftGeneratedClassName = document.querySelector( - ".main-globalNav-historyButtons [data-encore-id='buttonTertiary'], .main-topBar-historyButtons [data-encore-id='buttonTertiary']" + ".main-globalNav-historyButtons button:first-child, .main-topBar-historyButtons button:first-child" )?.className; - rightGeneratedClassName = document.querySelector(".main-actionButtons [data-encore-id='buttonTertiary']")?.className; + rightGeneratedClassName = document.querySelector(`[aria-label='${Spicetify.Locale?._dictionary?.['buddy-feed.friend-activity']}']`)?.className; leftContainer = document.querySelector(".main-topBar-historyButtons") ?? globalHistoryButtons; rightContainer = document.querySelector(".main-actionButtons"); if (!leftContainer || !rightContainer || !leftGeneratedClassName || !rightGeneratedClassName) { From 663b3b03af890c012f878f734f91132673f18135 Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Mon, 9 Sep 2024 21:24:19 +0100 Subject: [PATCH 4/5] Update spicetifyWrapper.js --- jsHelper/spicetifyWrapper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jsHelper/spicetifyWrapper.js b/jsHelper/spicetifyWrapper.js index ba9ac8e0f6..db71f1a5d9 100644 --- a/jsHelper/spicetifyWrapper.js +++ b/jsHelper/spicetifyWrapper.js @@ -2133,7 +2133,7 @@ Spicetify.Topbar = (() => { leftGeneratedClassName = document.querySelector( ".main-globalNav-historyButtons button:first-child, .main-topBar-historyButtons button:first-child" )?.className; - rightGeneratedClassName = document.querySelector(`[aria-label='${Spicetify.Locale?._dictionary?.['buddy-feed.friend-activity']}']`)?.className; + rightGeneratedClassName = document.querySelector(`[aria-label='${Spicetify.Locale?._dictionary?.["buddy-feed.friend-activity"]}']`)?.className; leftContainer = document.querySelector(".main-topBar-historyButtons") ?? globalHistoryButtons; rightContainer = document.querySelector(".main-actionButtons"); if (!leftContainer || !rightContainer || !leftGeneratedClassName || !rightGeneratedClassName) { From 246dfe0b4b23402d5b36b9f5cd12d6d388f23997 Mon Sep 17 00:00:00 2001 From: ririxi Date: Tue, 10 Sep 2024 21:41:56 +0200 Subject: [PATCH 5/5] feat: relay on classnames --- jsHelper/spicetifyWrapper.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/jsHelper/spicetifyWrapper.js b/jsHelper/spicetifyWrapper.js index db71f1a5d9..386e64ddd2 100644 --- a/jsHelper/spicetifyWrapper.js +++ b/jsHelper/spicetifyWrapper.js @@ -2131,9 +2131,11 @@ Spicetify.Topbar = (() => { function waitForTopbarMounted() { const globalHistoryButtons = document.querySelector(".main-globalNav-historyButtons"); leftGeneratedClassName = document.querySelector( - ".main-globalNav-historyButtons button:first-child, .main-topBar-historyButtons button:first-child" + ".main-topBar-historyButtons .main-topBar-button, .main-globalNav-historyButtons .main-globalNav-icon" + )?.className; + rightGeneratedClassName = document.querySelector( + ".main-topBar-container .main-topBar-buddyFeed, .main-actionButtons .main-topBar-buddyFeed, .main-actionButtons .main-globalNav-buddyFeed" )?.className; - rightGeneratedClassName = document.querySelector(`[aria-label='${Spicetify.Locale?._dictionary?.["buddy-feed.friend-activity"]}']`)?.className; leftContainer = document.querySelector(".main-topBar-historyButtons") ?? globalHistoryButtons; rightContainer = document.querySelector(".main-actionButtons"); if (!leftContainer || !rightContainer || !leftGeneratedClassName || !rightGeneratedClassName) {