feat(lyrics-plus): playbar button

CustomApps/lyrics-plus/PlaybarButton.js

@@ -0,0 +1,54 @@
+(async 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>`,
+		() => {
+			if (Spicetify.Platform.History.location.pathname !== "/lyrics-plus") {
+				Spicetify.Platform.History.push("/lyrics-plus");
+			} else {
+				Spicetify.Platform.History.goBack();
+			}
+		}
+	);
+
+	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();
+	}
+})();

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

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

CustomApps/lyrics-plus/manifest.json

@@ -78,5 +78,6 @@
 		"Utils.js",
 		"Settings.js",
 		"Translator.js"
-	]
+	],
+	"subfiles_extension": ["PlaybarButton.js"]
 }