Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(lyrics-plus): playbar button #2327

Merged
merged 14 commits into from
May 6, 2023
47 changes: 47 additions & 0 deletions CustomApps/lyrics-plus/PlaybarButton.js
Original file line number Diff line number Diff line change
@@ -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();
}
})();
15 changes: 15 additions & 0 deletions CustomApps/lyrics-plus/Settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
ohitstom marked this conversation as resolved.
Show resolved Hide resolved
type: ConfigSlider
},
{
desc: "Global delay",
info: "Offset (in ms) across all tracks.",
Expand Down Expand Up @@ -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"),
Expand Down
1 change: 1 addition & 0 deletions CustomApps/lyrics-plus/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
Expand Down
3 changes: 2 additions & 1 deletion CustomApps/lyrics-plus/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -78,5 +78,6 @@
"Utils.js",
"Settings.js",
"Translator.js"
]
],
"subfiles_extension": ["PlaybarButton.js"]
}