Fixed Disabling Lyrics Glow

This commit is contained in:
2026-02-25 20:54:51 +11:00
parent ec25abf6f5
commit ef4c73037f
3 changed files with 35 additions and 57 deletions
+1 -1
View File
@@ -156,7 +156,7 @@ export const Settings = () => {
<LunaSettings> <LunaSettings>
<AnySwitch <AnySwitch
title="Lyrics Glow Effect" title="Lyrics Glow Effect"
desc="Enable glowing effect for lyrics & Font Styling Changes" desc="Enable glowing effect on lyrics"
checked={lyricsGlowEnabled} checked={lyricsGlowEnabled}
onChange={(_: unknown, checked: boolean) => { onChange={(_: unknown, checked: boolean) => {
settings.lyricsGlowEnabled = checked; settings.lyricsGlowEnabled = checked;
+14 -30
View File
@@ -1,6 +1,6 @@
// MARKER: Core Setup // MARKER: Core Setup
import { type LunaUnload, Tracer } from "@luna/core"; import { type LunaUnload, Tracer } from "@luna/core";
import { StyleTag, PlayState, MediaItem, observePromise, observe, safeInterval, safeTimeout } from "@luna/lib"; import { StyleTag, PlayState, MediaItem, observe, safeInterval, safeTimeout } from "@luna/lib";
import { settings, Settings } from "./Settings"; import { settings, Settings } from "./Settings";
// Interpret integer backgroundScale (e.g., 10=1.0x, 20=2.0x) // Interpret integer backgroundScale (e.g., 10=1.0x, 20=2.0x)
const getScaledMultiplier = (): number => { const getScaledMultiplier = (): number => {
@@ -28,10 +28,8 @@ const playerBarStyleTag = new StyleTag("RadiantLyrics-player-bar", unloads);
const lyricsGlowStyleTag = new StyleTag("RadiantLyrics-lyrics-glow", unloads); const lyricsGlowStyleTag = new StyleTag("RadiantLyrics-lyrics-glow", unloads);
const floatingPlayerBarStyleTag = new StyleTag("RadiantLyrics-floating-player-bar", unloads); const floatingPlayerBarStyleTag = new StyleTag("RadiantLyrics-floating-player-bar", unloads);
// Apply lyrics glow styles if enabled // Always load lyrics CSS (glow is toggled via .lyrics-glow-disabled class)
if (settings.lyricsGlowEnabled) { lyricsGlowStyleTag.css = lyricsGlow;
lyricsGlowStyleTag.css = lyricsGlow;
}
// MARKER: Floating Player Bar // MARKER: Floating Player Bar
@@ -138,10 +136,20 @@ baseStyleTag.css = baseStyles;
// Update CSS variables for lyrics text glow based on settings // Update CSS variables for lyrics text glow based on settings
const updateRadiantLyricsTextGlow = function (): void { const updateRadiantLyricsTextGlow = function (): void {
const root = document.documentElement; const root = document.documentElement;
if (settings.lyricsGlowEnabled) {
root.style.setProperty("--rl-glow-outer", `${settings.textGlow}px`); root.style.setProperty("--rl-glow-outer", `${settings.textGlow}px`);
root.style.setProperty("--rl-glow-inner", "2px"); root.style.setProperty("--rl-glow-inner", "2px");
root.classList.remove("lyrics-glow-disabled");
} else {
root.style.setProperty("--rl-glow-outer", "0px");
root.style.setProperty("--rl-glow-inner", "0px");
root.classList.add("lyrics-glow-disabled");
}
}; };
// Apply glow state immediately at startup
updateRadiantLyricsTextGlow();
// Function to update styles when settings change // Function to update styles when settings change
const updateRadiantLyricsStyles = function (): void { const updateRadiantLyricsStyles = function (): void {
// Handle Player Bar Visibility // Handle Player Bar Visibility
@@ -158,32 +166,8 @@ const updateRadiantLyricsStyles = function (): void {
// Handle Floating Player Bar // Handle Floating Player Bar
applyFloatingPlayerBar(); applyFloatingPlayerBar();
// Update lyrics glow based on setting (Always apply if enabled, even when UI is hidden) // Toggle glow via CSS vars + class on :root (always available, no timing issues)
const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]');
if (lyricsContainer) {
if (settings.lyricsGlowEnabled) {
(lyricsContainer as HTMLElement).classList.remove("lyrics-glow-disabled");
lyricsGlowStyleTag.css = lyricsGlow;
updateRadiantLyricsTextGlow(); updateRadiantLyricsTextGlow();
} else {
(lyricsContainer as HTMLElement).classList.add("lyrics-glow-disabled");
lyricsGlowStyleTag.remove();
}
} else {
observePromise<HTMLElement>(unloads, '[class^="_lyricsContainer"]')
.then((el) => {
if (!el) return;
if (settings.lyricsGlowEnabled) {
el.classList.remove("lyrics-glow-disabled");
lyricsGlowStyleTag.css = lyricsGlow;
updateRadiantLyricsTextGlow();
} else {
el.classList.add("lyrics-glow-disabled");
lyricsGlowStyleTag.remove();
}
})
.catch(() => {});
}
// Track title glow toggle based on settings // Track title glow toggle based on settings
const trackTitleEl = document.querySelector( const trackTitleEl = document.querySelector(
+17 -23
View File
@@ -383,30 +383,24 @@
padding-left: 20px; padding-left: 20px;
} }
/* Reset lyrics styling when disabled */ /* Reset glow when disabled */
.lyrics-glow-disabled [class*="_lyricsText"] > div > span[data-current="true"], .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 [class*="_lyricsText"] > div > span:hover, /* biome-ignore lint: Kill glow on active/hover lines */
.lyrics-glow-disabled [data-test="now-playing-track-title"],
.lyrics-glow-disabled [class^="_lyricsContainer"] > div > div > span {
/* biome-ignore lint: Hard reset when disabled */
text-shadow: none !important; text-shadow: none !important;
/* biome-ignore lint: Hard reset when disabled */
padding-left: 0 !important;
/* biome-ignore lint: Hard reset when disabled */
transition: none !important;
/* biome-ignore lint: Hard reset when disabled */
font-size: inherit !important;
/* biome-ignore lint: Hard reset when disabled */
color: inherit !important;
/* biome-ignore lint: Hard reset when disabled */
font-family: inherit !important;
/* biome-ignore lint: Hard reset when disabled */
font-weight: inherit !important;
/* biome-ignore lint: Hard reset when disabled */
margin-bottom: inherit !important;
/* biome-ignore lint: Hard reset when disabled */
opacity: inherit !important;
} }
/* thats right biome.. shut upp */ /* kill glow on active word */
.lyrics-glow-disabled .rl-wbw-word.rl-wbw-active {
/* biome-ignore lint: Kill glow on active word */
text-shadow: none !important;
}
/* kill glow on hovered word */
.lyrics-glow-disabled .rl-wbw-line:not(.rl-wbw-line-active) > .rl-wbw-word:hover,
.lyrics-glow-disabled .rl-wbw-line:not(.rl-wbw-line-active) > .rl-wbw-word.rl-wbw-word-hover,
.lyrics-glow-disabled .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-main .rl-wbw-word:hover,
.lyrics-glow-disabled .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-main .rl-wbw-word.rl-wbw-word-hover {
/* biome-ignore lint: Kill glow on hovered word */
text-shadow: none !important;
}