diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js index 034d502198..3ede1c6518 100644 --- a/CustomApps/lyrics-plus/PlaybarButton.js +++ b/CustomApps/lyrics-plus/PlaybarButton.js @@ -1,21 +1,6 @@ (function PlaybarButton() { - if (!Spicetify.Platform.History) { - setTimeout(PlaybarButton, 300); - return; - } - - const button = new Spicetify.Playbar.Button( - "Lyrics Plus", - ``, - () => - Spicetify.Platform.History.location.pathname !== "/lyrics-plus" - ? Spicetify.Platform.History.push("/lyrics-plus") - : Spicetify.Platform.History.goBack(), - false, - Spicetify.Platform.History.location.pathname === "/lyrics-plus", - false - ); - + let retryCount = 0; + let button; const style = document.createElement("style"); style.innerHTML = ` .main-nowPlayingBar-lyricsButton[data-testid="lyrics-button"] { @@ -27,22 +12,64 @@ `; style.classList.add("lyrics-plus:visual:playbar-button"); - if (Spicetify.LocalStorage.get("lyrics-plus:visual:playbar-button") === "true") setPlaybarButton(); - window.addEventListener("lyrics-plus", (event) => { - if (event.detail?.name === "playbar-button") event.detail.value ? setPlaybarButton() : removePlaybarButton(); - }); - - Spicetify.Platform.History.listen((location) => { - button.active = location.pathname === "/lyrics-plus"; - }); - function setPlaybarButton() { document.head.appendChild(style); - button.register(); + button?.register(); } function removePlaybarButton() { style.remove(); - button.deregister(); + button?.deregister(); } + + const checkHistory = () => { + if (retryCount > 100) return; // Stop after ~30 seconds + if (!Spicetify.Platform.History) { + retryCount++; + setTimeout(checkHistory, 300); + return; + } + init(); + }; + + function init() { + const history = Spicetify.Platform.History; + if (!history._lyricsPlusPatched) { + const originalPush = history.push; + history.push = (path, state) => { + if (typeof path === "string" && path.includes("lyrics-plus")) { + path = { pathname: path, state: { ...state, cinemaState: null } }; + return originalPush.apply(history, [path]); + } else if (typeof path === "object" && path.pathname && path.pathname.includes("lyrics-plus")) { + path.state = { ...path.state, cinemaState: null }; + } + return originalPush.apply(history, [path, state]); + }; + history._lyricsPlusPatched = true; + } + + button = new Spicetify.Playbar.Button( + "Lyrics Plus", + ``, + () => + Spicetify.Platform.History.location.pathname !== "/lyrics-plus" + ? Spicetify.Platform.History.push({ pathname: "/lyrics-plus", state: { cinemaState: null } }) + : Spicetify.Platform.History.goBack(), + false, + Spicetify.Platform.History.location.pathname === "/lyrics-plus", + false + ); + + history.listen((location) => { + button.active = location.pathname === "/lyrics-plus"; + }); + + if (Spicetify.LocalStorage.get("lyrics-plus:visual:playbar-button") === "true") setPlaybarButton(); + + window.addEventListener("lyrics-plus", (event) => { + if (event.detail?.name === "playbar-button") event.detail.value ? setPlaybarButton() : removePlaybarButton(); + }); + } + + checkHistory(); })(); diff --git a/jsHelper/spicetifyWrapper.js b/jsHelper/spicetifyWrapper.js index 24e3960a08..934b76d165 100644 --- a/jsHelper/spicetifyWrapper.js +++ b/jsHelper/spicetifyWrapper.js @@ -2350,7 +2350,7 @@ Spicetify.Playbar = (() => { this.element = document.createElement("button"); this.element.classList.add("main-genericButton-button"); this.iconElement = document.createElement("span"); - this.iconElement.classList.add("Wrapper-sm-only", "Wrapper-small-only"); + this.iconElement.classList.add("e-91000-button__icon-wrapper"); this.element.appendChild(this.iconElement); this.icon = icon; this.onClick = onClick;