From a9a9723f603d1593d8138264eaa95969f228157c Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Fri, 5 May 2023 20:50:55 +0100 Subject: [PATCH 01/14] feat(lyrics-plus): playbar button --- CustomApps/lyrics-plus/PlaybarButton.js | 41 +++++++++++++++++++++++++ CustomApps/lyrics-plus/index.js | 9 ++++++ CustomApps/lyrics-plus/manifest.json | 3 +- 3 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 CustomApps/lyrics-plus/PlaybarButton.js diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js new file mode 100644 index 0000000000..3aeb6d4c78 --- /dev/null +++ b/CustomApps/lyrics-plus/PlaybarButton.js @@ -0,0 +1,41 @@ +(async function PlaybarButton() { + if (!Spicetify.Platform) { + setTimeout(PlaybarButton, 300); + return; + } + const page = Spicetify.Platform.History.location.pathname; + const active = localStorage.getItem("lyrics-plus:visual:playbar-button"); + if (page !== "/lyrics-plus" && active === "true") { + setPlaybarButton(); + } +})(); + +function setPlaybarButton() { + const css = ` + .main-nowPlayingBar-lyricsButton { + display: none !important; + } + li[data-id="/lyrics-plus"] { + display: none; + } + `; + + const style = document.createElement("style"); + style.innerHTML = css; + style.classList.add("lyrics-plus:visual:playbar-button"); + document.head.appendChild(style); + + new Spicetify.Playbar.Button( + "Lyrics Plus", + ``, + () => { + if (Spicetify.Platform.History.location.pathname !== "/lyrics-plus") { + Spicetify.Platform.History.push("/lyrics-plus"); + } else { + Spicetify.Platform.History.goBack(); + } + } + ); +} diff --git a/CustomApps/lyrics-plus/index.js b/CustomApps/lyrics-plus/index.js index 5ec93fc669..8c5bed0ba3 100644 --- a/CustomApps/lyrics-plus/index.js +++ b/CustomApps/lyrics-plus/index.js @@ -36,6 +36,7 @@ const KARAOKE = 0, const CONFIG = { visual: { + ["playbar-button"]: getConfig("lyrics-plus:visual:playbar-button", false), colorful: getConfig("lyrics-plus:visual:colorful"), noise: getConfig("lyrics-plus:visual:noise"), ["background-color"]: localStorage.getItem("lyrics-plus:visual:background-color") || "var(--spice-main)", @@ -591,6 +592,14 @@ class LyricsContainer extends react.Component { }; } + const snippetExists = document.head.getElementsByClassName("lyrics-plus:visual:playbar-button").length == 1 ? true : false; + if (CONFIG.visual["playbar-button"] && !snippetExists) { + setPlaybarButton(); + } + if (!CONFIG.visual["playbar-button"] && snippetExists) { + location.reload(); + } + this.styleVariables = { ...this.styleVariables, "--lyrics-align-text": CONFIG.visual.alignment, diff --git a/CustomApps/lyrics-plus/manifest.json b/CustomApps/lyrics-plus/manifest.json index bc712713f4..72b93a85bd 100644 --- a/CustomApps/lyrics-plus/manifest.json +++ b/CustomApps/lyrics-plus/manifest.json @@ -78,5 +78,6 @@ "Utils.js", "Settings.js", "Translator.js" - ] + ], + "subfiles_extension": ["PlaybarButton.js"] } From 3f27a6a2844c7a0728216d1539ff8e8c8e07d23f Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 14:18:31 +0100 Subject: [PATCH 02/14] feat(settings): onchange custom event firing --- CustomApps/lyrics-plus/PlaybarButton.js | 63 +++++++++++++++---------- CustomApps/lyrics-plus/Settings.js | 17 ++++++- CustomApps/lyrics-plus/index.js | 8 ---- 3 files changed, 54 insertions(+), 34 deletions(-) diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js index 3aeb6d4c78..df27c6f372 100644 --- a/CustomApps/lyrics-plus/PlaybarButton.js +++ b/CustomApps/lyrics-plus/PlaybarButton.js @@ -3,33 +3,12 @@ setTimeout(PlaybarButton, 300); return; } - const page = Spicetify.Platform.History.location.pathname; - const active = localStorage.getItem("lyrics-plus:visual:playbar-button"); - if (page !== "/lyrics-plus" && active === "true") { - setPlaybarButton(); - } -})(); - -function setPlaybarButton() { - const css = ` - .main-nowPlayingBar-lyricsButton { - display: none !important; - } - li[data-id="/lyrics-plus"] { - display: none; - } - `; - const style = document.createElement("style"); - style.innerHTML = css; - style.classList.add("lyrics-plus:visual:playbar-button"); - document.head.appendChild(style); - - new Spicetify.Playbar.Button( + const button = new Spicetify.Playbar.Button( "Lyrics Plus", ``, + + `, () => { if (Spicetify.Platform.History.location.pathname !== "/lyrics-plus") { Spicetify.Platform.History.push("/lyrics-plus"); @@ -38,4 +17,38 @@ function setPlaybarButton() { } } ); -} + + const initialValue = Spicetify.LocalStorage.get("lyrics-plus:visual:playbar-button"); + if (initialValue === "true") { + setPlaybarButton(); + } + + window.addEventListener("lyrics-plus", event => { + if (event.detail.name === "playbar-button") { + event.detail.value ? setPlaybarButton() : removePlaybarButton(); + } + }); + + function setPlaybarButton() { + const css = ` + .main-nowPlayingBar-lyricsButton { + display: none !important; + } + li[data-id="/lyrics-plus"] { + display: none; + } + `; + + const style = document.createElement("style"); + style.innerHTML = css; + style.classList.add("lyrics-plus:visual:playbar-button"); + document.head.appendChild(style); + button.register(); + } + + function removePlaybarButton() { + const style = document.head.querySelector(".lyrics-plus\\:visual\\:playbar-button"); + style.remove(); + button.deregister(); + } +})(); diff --git a/CustomApps/lyrics-plus/Settings.js b/CustomApps/lyrics-plus/Settings.js index 4e2c8de1b9..3da8e0c771 100644 --- a/CustomApps/lyrics-plus/Settings.js +++ b/CustomApps/lyrics-plus/Settings.js @@ -431,6 +431,12 @@ function openConfig() { react.createElement("h2", null, "Options"), react.createElement(OptionList, { items: [ + { + desc: "Playbar button", + key: "playbar-button", + info: "Replace Spotify's lyrics button for one that opens lyrics-plus.", + type: ConfigSlider + }, { desc: "Global delay", info: "Offset (in ms) across all tracks.", @@ -538,7 +544,16 @@ function openConfig() { CONFIG.visual[name] = value; localStorage.setItem(`${APP_NAME}:visual:${name}`, value); lyricContainerUpdate && lyricContainerUpdate(); - } + + const configChange = new CustomEvent("lyrics-plus", { + detail: { + type: "config", + name: name, + value: value, + } + }); + window.dispatchEvent(configChange); + } }), react.createElement("h2", null, "Providers"), react.createElement(ServiceList, { diff --git a/CustomApps/lyrics-plus/index.js b/CustomApps/lyrics-plus/index.js index 8c5bed0ba3..7d7908adf0 100644 --- a/CustomApps/lyrics-plus/index.js +++ b/CustomApps/lyrics-plus/index.js @@ -592,14 +592,6 @@ class LyricsContainer extends react.Component { }; } - const snippetExists = document.head.getElementsByClassName("lyrics-plus:visual:playbar-button").length == 1 ? true : false; - if (CONFIG.visual["playbar-button"] && !snippetExists) { - setPlaybarButton(); - } - if (!CONFIG.visual["playbar-button"] && snippetExists) { - location.reload(); - } - this.styleVariables = { ...this.styleVariables, "--lyrics-align-text": CONFIG.visual.alignment, From 5e374976a25add2bf9ccb608f53eacd2efb2533e Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 14:20:15 +0100 Subject: [PATCH 03/14] prettier --- CustomApps/lyrics-plus/Settings.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/CustomApps/lyrics-plus/Settings.js b/CustomApps/lyrics-plus/Settings.js index 3da8e0c771..f0dec37ba9 100644 --- a/CustomApps/lyrics-plus/Settings.js +++ b/CustomApps/lyrics-plus/Settings.js @@ -544,16 +544,16 @@ function openConfig() { CONFIG.visual[name] = value; localStorage.setItem(`${APP_NAME}:visual:${name}`, value); lyricContainerUpdate && lyricContainerUpdate(); - + const configChange = new CustomEvent("lyrics-plus", { - detail: { - type: "config", - name: name, - value: value, - } + detail: { + type: "config", + name: name, + value: value + } }); window.dispatchEvent(configChange); - } + } }), react.createElement("h2", null, "Providers"), react.createElement(ServiceList, { From 2b9565435640283bfa98f700c090e8c997f03567 Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 14:34:35 +0100 Subject: [PATCH 04/14] Update CustomApps/lyrics-plus/PlaybarButton.js Co-authored-by: Nam Anh --- CustomApps/lyrics-plus/PlaybarButton.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js index df27c6f372..b9244e727f 100644 --- a/CustomApps/lyrics-plus/PlaybarButton.js +++ b/CustomApps/lyrics-plus/PlaybarButton.js @@ -10,11 +10,7 @@ `, () => { - if (Spicetify.Platform.History.location.pathname !== "/lyrics-plus") { - Spicetify.Platform.History.push("/lyrics-plus"); - } else { - Spicetify.Platform.History.goBack(); - } + Spicetify.Platform.History.location.pathname !== "/lyrics-plus" ? Spicetify.Platform.History.push("/lyrics-plus") : Spicetify.Platform.History.goBack() } ); From 14344c38789053ef530d6b50971a0ea4bc54dac7 Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 15:21:00 +0100 Subject: [PATCH 05/14] kyrie beats me - - `, + ``, () => { - Spicetify.Platform.History.location.pathname !== "/lyrics-plus" ? Spicetify.Platform.History.push("/lyrics-plus") : Spicetify.Platform.History.goBack() - } + Spicetify.Platform.History.location.pathname !== "/lyrics-plus" + ? Spicetify.Platform.History.push("/lyrics-plus") + : Spicetify.Platform.History.goBack(); + }, + false, + false, + false ); - const initialValue = Spicetify.LocalStorage.get("lyrics-plus:visual:playbar-button"); - if (initialValue === "true") { - setPlaybarButton(); - } + const style = document.createElement("style"); + const css = ` + .main-nowPlayingBar-lyricsButton { + display: none !important; + } + li[data-id="/lyrics-plus"] { + display: none; + } + `; + style.innerHTML = css; + 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") { + if (event.detail?.name === "playbar-button") { event.detail.value ? setPlaybarButton() : removePlaybarButton(); } }); - function setPlaybarButton() { - const css = ` - .main-nowPlayingBar-lyricsButton { - display: none !important; - } - li[data-id="/lyrics-plus"] { - display: none; - } - `; + if (Spicetify.Platform.History.location.pathname === "/lyrics-plus") button.active = true; + Spicetify.Platform.History.listen(location => { + location.pathname === "/lyrics-plus" ? (button.active = true) : (button.active = false); + }); - const style = document.createElement("style"); - style.innerHTML = css; - style.classList.add("lyrics-plus:visual:playbar-button"); + function setPlaybarButton() { document.head.appendChild(style); button.register(); } function removePlaybarButton() { - const style = document.head.querySelector(".lyrics-plus\\:visual\\:playbar-button"); style.remove(); button.deregister(); } From 72363035577935d1173ad83612c69ad8d778662a Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 15:39:27 +0100 Subject: [PATCH 06/14] smort Co-authored-by: Nam Anh --- CustomApps/lyrics-plus/PlaybarButton.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js index 13628c6b62..43f3bbdb2b 100644 --- a/CustomApps/lyrics-plus/PlaybarButton.js +++ b/CustomApps/lyrics-plus/PlaybarButton.js @@ -37,9 +37,7 @@ }); if (Spicetify.Platform.History.location.pathname === "/lyrics-plus") button.active = true; - Spicetify.Platform.History.listen(location => { - location.pathname === "/lyrics-plus" ? (button.active = true) : (button.active = false); - }); + Spicetify.Platform.History.listen(location => button.active = location.pathname === "/lyrics-plus"); function setPlaybarButton() { document.head.appendChild(style); From 46c620a6b60803640ff84e78d7326bc5d4976474 Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 15:41:00 +0100 Subject: [PATCH 07/14] prettier --- CustomApps/lyrics-plus/PlaybarButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js index 43f3bbdb2b..714bb77c49 100644 --- a/CustomApps/lyrics-plus/PlaybarButton.js +++ b/CustomApps/lyrics-plus/PlaybarButton.js @@ -37,7 +37,7 @@ }); if (Spicetify.Platform.History.location.pathname === "/lyrics-plus") button.active = true; - Spicetify.Platform.History.listen(location => button.active = location.pathname === "/lyrics-plus"); + Spicetify.Platform.History.listen(location => (button.active = location.pathname === "/lyrics-plus")); function setPlaybarButton() { document.head.appendChild(style); From 812797dfdad9e3af39fe9a0f238e509a181ac5dd Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 16:16:27 +0100 Subject: [PATCH 08/14] Update CustomApps/lyrics-plus/PlaybarButton.js Co-authored-by: Nam Anh --- CustomApps/lyrics-plus/PlaybarButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js index 714bb77c49..acb99c2789 100644 --- a/CustomApps/lyrics-plus/PlaybarButton.js +++ b/CustomApps/lyrics-plus/PlaybarButton.js @@ -36,7 +36,7 @@ } }); - if (Spicetify.Platform.History.location.pathname === "/lyrics-plus") button.active = true; + button.active = Spicetify.Platform.History.location.pathname === "/lyrics-plus"; Spicetify.Platform.History.listen(location => (button.active = location.pathname === "/lyrics-plus")); function setPlaybarButton() { From b11840ec3273e2bf04c838cae8b664ad658a3fa3 Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 16:16:53 +0100 Subject: [PATCH 09/14] Update CustomApps/lyrics-plus/PlaybarButton.js Co-authored-by: Nam Anh --- CustomApps/lyrics-plus/PlaybarButton.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js index acb99c2789..febd78d9a5 100644 --- a/CustomApps/lyrics-plus/PlaybarButton.js +++ b/CustomApps/lyrics-plus/PlaybarButton.js @@ -31,9 +31,7 @@ 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(); - } + if (event.detail?.name === "playbar-button") event.detail.value ? setPlaybarButton() : removePlaybarButton(); }); button.active = Spicetify.Platform.History.location.pathname === "/lyrics-plus"; From ecf2a6741423419a1b4258699b983b392851d991 Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 16:16:58 +0100 Subject: [PATCH 10/14] Update CustomApps/lyrics-plus/PlaybarButton.js Co-authored-by: Nam Anh --- CustomApps/lyrics-plus/PlaybarButton.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js index febd78d9a5..62cc5b0d0f 100644 --- a/CustomApps/lyrics-plus/PlaybarButton.js +++ b/CustomApps/lyrics-plus/PlaybarButton.js @@ -18,7 +18,7 @@ ); const style = document.createElement("style"); - const css = ` + style.innerHTML = ` .main-nowPlayingBar-lyricsButton { display: none !important; } @@ -26,7 +26,6 @@ display: none; } `; - style.innerHTML = css; style.classList.add("lyrics-plus:visual:playbar-button"); if (Spicetify.LocalStorage.get("lyrics-plus:visual:playbar-button") === "true") setPlaybarButton(); From c430b879764354f622093ef554766fc15a657ddd Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 16:17:03 +0100 Subject: [PATCH 11/14] Update CustomApps/lyrics-plus/PlaybarButton.js Co-authored-by: Nam Anh --- CustomApps/lyrics-plus/PlaybarButton.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js index 62cc5b0d0f..0471c4c01f 100644 --- a/CustomApps/lyrics-plus/PlaybarButton.js +++ b/CustomApps/lyrics-plus/PlaybarButton.js @@ -7,11 +7,7 @@ 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(); - }, + () => Spicetify.Platform.History.location.pathname !== "/lyrics-plus" ? Spicetify.Platform.History.push("/lyrics-plus") : Spicetify.Platform.History.goBack(), false, false, false From 631fd1469ed5aff43793081be73d08cdbe701d82 Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 16:17:08 +0100 Subject: [PATCH 12/14] Update CustomApps/lyrics-plus/PlaybarButton.js Co-authored-by: Nam Anh --- CustomApps/lyrics-plus/PlaybarButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js index 0471c4c01f..291fa86ec8 100644 --- a/CustomApps/lyrics-plus/PlaybarButton.js +++ b/CustomApps/lyrics-plus/PlaybarButton.js @@ -1,4 +1,4 @@ -(async function PlaybarButton() { +(function PlaybarButton() { if (!Spicetify.Platform) { setTimeout(PlaybarButton, 300); return; From bbc1f8139da85b5da38bedae342dbf9b554be509 Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 16:18:08 +0100 Subject: [PATCH 13/14] prettier --- CustomApps/lyrics-plus/PlaybarButton.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js index 291fa86ec8..3351fb22c4 100644 --- a/CustomApps/lyrics-plus/PlaybarButton.js +++ b/CustomApps/lyrics-plus/PlaybarButton.js @@ -7,7 +7,10 @@ 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(), + () => + Spicetify.Platform.History.location.pathname !== "/lyrics-plus" + ? Spicetify.Platform.History.push("/lyrics-plus") + : Spicetify.Platform.History.goBack(), false, false, false From b4dee22ae2385a434fd6f96b6e024c7169e67e85 Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Sat, 6 May 2023 17:41:30 +0100 Subject: [PATCH 14/14] naming Co-authored-by: Nam Anh --- CustomApps/lyrics-plus/Settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CustomApps/lyrics-plus/Settings.js b/CustomApps/lyrics-plus/Settings.js index f0dec37ba9..0799a483db 100644 --- a/CustomApps/lyrics-plus/Settings.js +++ b/CustomApps/lyrics-plus/Settings.js @@ -434,7 +434,7 @@ function openConfig() { { desc: "Playbar button", key: "playbar-button", - info: "Replace Spotify's lyrics button for one that opens lyrics-plus.", + info: "Replace Spotify's lyrics button with Lyrics Plus.", type: ConfigSlider }, {