feat(lyrics-plus): playbar button (#2327)

spicetify · May 6, 2023 · f577325 · f577325
1 parent 978a095
commit f577325
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 1 deletion.
diff --git a/CustomApps/lyrics-plus/PlaybarButton.js b/CustomApps/lyrics-plus/PlaybarButton.js
@@ -0,0 +1,47 @@
+(function PlaybarButton() {
+	if (!Spicetify.Platform) {
+		setTimeout(PlaybarButton, 300);
+		return;
+	}
+
+	const button = new Spicetify.Playbar.Button(
+		"Lyrics Plus",
+		`<svg role="img" height="16" width="16" aria-hidden="true" viewBox="0 0 16 16" data-encore-id="icon" class="Svg-sc-ytk21e-0 Svg-img-16-icon"><path d="M13.426 2.574a2.831 2.831 0 0 0-4.797 1.55l3.247 3.247a2.831 2.831 0 0 0 1.55-4.797zM10.5 8.118l-2.619-2.62A63303.13 63303.13 0 0 0 4.74 9.075L2.065 12.12a1.287 1.287 0 0 0 1.816 1.816l3.06-2.688 3.56-3.129zM7.12 4.094a4.331 4.331 0 1 1 4.786 4.786l-3.974 3.493-3.06 2.689a2.787 2.787 0 0 1-3.933-3.933l2.676-3.045 3.505-3.99z"></path></svg>`,
+		() =>
+			Spicetify.Platform.History.location.pathname !== "/lyrics-plus"
+				? Spicetify.Platform.History.push("/lyrics-plus")
+				: Spicetify.Platform.History.goBack(),
+		false,
+		false,
+		false
+	);
+
+	const style = document.createElement("style");
+	style.innerHTML = `
+		.main-nowPlayingBar-lyricsButton { 
+			display: none !important; 
+		}
+		li[data-id="/lyrics-plus"] {
+			display: none;
+		}
+	`;
+	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();
+	});
+
+	button.active = Spicetify.Platform.History.location.pathname === "/lyrics-plus";
+	Spicetify.Platform.History.listen(location => (button.active = location.pathname === "/lyrics-plus"));
+
+	function setPlaybarButton() {
+		document.head.appendChild(style);
+		button.register();
+	}
+
+	function removePlaybarButton() {
+		style.remove();
+		button.deregister();
+	}
+})();
diff --git 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 with Lyrics Plus.",
+					type: ConfigSlider
+				},
 				{
 					desc: "Global delay",
 					info: "Offset (in ms) across all tracks.",
@@ -538,6 +544,15 @@ 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"),

diff --git 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)",

diff --git 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"]
 }