Added Setting for Glowing Lyrics

This commit is contained in:
2025-06-03 00:42:17 +10:00
parent 97d314c3b2
commit 5c8fe6476d
3 changed files with 75 additions and 3 deletions
+15
View File
@@ -5,14 +5,29 @@ import React from "react";
export const settings = await ReactiveStore.getPluginStorage("CleanView", {
hideUIEnabled: true,
playerBarVisible: true,
lyricsGlowEnabled: true,
});
export const Settings = () => {
const [hideUIEnabled, setHideUIEnabled] = React.useState(settings.hideUIEnabled);
const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible);
const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled);
return (
<LunaSettings>
<LunaSwitchSetting
title="Lyrics Glow Effect"
desc="Enable glowing effect for lyrics & Font Stytling Changes"
checked={lyricsGlowEnabled}
onChange={(_, checked) => {
console.log("Lyrics Glow Effect:", checked ? "enabled" : "disabled");
setLyricsGlowEnabled((settings.lyricsGlowEnabled = checked));
// Update styles immediately when setting changes
if ((window as any).updateCleanViewStyles) {
(window as any).updateCleanViewStyles();
}
}}
/>
<LunaSwitchSetting
title="Hide UI Feature"
desc="Enable hide/unhide UI functionality with toggle buttons"
+39 -3
View File
@@ -20,8 +20,10 @@ const baseStyleTag = new StyleTag("CleanView-base", unloads);
const playerBarStyleTag = new StyleTag("CleanView-player-bar", unloads);
const lyricsGlowStyleTag = new StyleTag("CleanView-lyrics-glow", unloads);
// Apply lyrics glow styles immediately and keep them always active
lyricsGlowStyleTag.css = lyricsGlow;
// Apply lyrics glow styles if enabled
if (settings.lyricsGlowEnabled) {
lyricsGlowStyleTag.css = lyricsGlow;
}
var isCleanView = false;
var currentTrackSrc: string | null = null; // Track current album art to prevent unnecessary updates
@@ -49,7 +51,19 @@ const updateCleanViewStyles = function(): void {
if (!settings.playerBarVisible) {
playerBarStyleTag.css = playerBarHidden;
} else {
playerBarStyleTag.css = undefined;
playerBarStyleTag.remove();
}
}
// Update lyrics glow based on setting
const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]');
if (lyricsContainer) {
if (settings.lyricsGlowEnabled) {
lyricsContainer.classList.remove('lyrics-glow-disabled');
lyricsGlowStyleTag.css = lyricsGlow;
} else {
lyricsContainer.classList.add('lyrics-glow-disabled');
lyricsGlowStyleTag.remove();
}
}
};
@@ -267,6 +281,27 @@ function observeForButtons(): void {
unloads.add(() => observer.disconnect());
}
// Also observe for lyrics container changes to apply the setting
function observeLyricsContainer(): void {
const observer = new MutationObserver(() => {
const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]');
if (lyricsContainer) {
if (settings.lyricsGlowEnabled) {
lyricsContainer.classList.remove('lyrics-glow-disabled');
} else {
lyricsContainer.classList.add('lyrics-glow-disabled');
}
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
unloads.add(() => observer.disconnect());
}
const onTrackChanged = function (method: number = 0): void {
if (method === 1) {
setTimeout(() => {
@@ -369,6 +404,7 @@ const cleanUpDynamicArt = function (): void {
// Initialize the button creation and observers
observeForButtons();
observeTrackTitle();
observeLyricsContainer();
onTrackChanged(1);
// Add cleanup to unloads
@@ -30,6 +30,8 @@
transition-duration: 0.7s;
font-size: 55px;
color: white !important;
font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 700;
}
[class*="_lyricsText"] > div > span {
@@ -37,6 +39,8 @@
transition-duration: 0.25s;
color: rgba(128, 128, 128, 0.4);
font-size: 40px;
font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 700;
}
[class*="_lyricsText"] > div > span:hover {
@@ -63,4 +67,21 @@
font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 700;
font-size: 38px !important;
}
/* Reset all lyrics styling when disabled */
.lyrics-glow-disabled [class*="_lyricsText"] > div > span[data-current="true"],
.lyrics-glow-disabled [class*="_lyricsText"] > div > span,
.lyrics-glow-disabled [class*="_lyricsText"] > div > span:hover,
.lyrics-glow-disabled [data-test="now-playing-track-title"],
.lyrics-glow-disabled [class^="_lyricsContainer"] > div > div > span {
text-shadow: none !important;
padding-left: 0 !important;
transition: none !important;
font-size: inherit !important;
color: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
margin-bottom: inherit !important;
opacity: inherit !important;
}