Merge pull request #77 from meowarex/dev

Added Lyric Font Size

plugins/radiant-lyrics-luna/src/Settings.tsx

@@ -48,6 +48,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
 	blurInactive: true,
 	bubbledLyrics: true,
 	syllableLogging: false,
+	lyricsFontSize: 100,
 });
 
 export const Settings = () => {
@@ -132,6 +133,9 @@ export const Settings = () => {
 			window.updateLyricsStyleSetting = undefined;
 		};
 	}, []);
+	const [lyricsFontSize, setLyricsFontSize] = React.useState(
+		settings.lyricsFontSize,
+	);
 	const [contextAwareLyrics, setContextAwareLyrics] = React.useState(
 		settings.contextAwareLyrics,
 	);
@@ -156,7 +160,7 @@ export const Settings = () => {
 		<LunaSettings>
 			<AnySwitch
 				title="Lyrics Glow Effect"
-				desc="Enable glowing effect for lyrics & Font Styling Changes"
+				desc="Enable glowing effect on lyrics"
 				checked={lyricsGlowEnabled}
 				onChange={(_: unknown, checked: boolean) => {
 					settings.lyricsGlowEnabled = checked;
@@ -212,6 +216,21 @@ export const Settings = () => {
 					}
 				}}
 			/>
+			<LunaNumberSetting
+				title="Lyrics Font Size"
+				desc="Scale the lyrics font size (50-200%, default: 100)"
+				min={50}
+				max={200}
+				step={5}
+				value={lyricsFontSize}
+				onNumber={(value: number) => {
+					settings.lyricsFontSize = value;
+					setLyricsFontSize(value);
+					if (window.updateRadiantLyricsTextGlow) {
+						window.updateRadiantLyricsTextGlow();
+					}
+				}}
+			/>
 			<AnySwitch
 				title="Blur Inactive"
 				desc="Blurs inactive lyric lines, scaling with distance from the active line"

plugins/radiant-lyrics-luna/src/index.ts

@@ -1,6 +1,6 @@
 // MARKER: Core Setup
 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";
 // Interpret integer backgroundScale (e.g., 10=1.0x, 20=2.0x)
 const getScaledMultiplier = (): number => {
@@ -28,10 +28,8 @@ const playerBarStyleTag = new StyleTag("RadiantLyrics-player-bar", unloads);
 const lyricsGlowStyleTag = new StyleTag("RadiantLyrics-lyrics-glow", 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;
-}
 
 // MARKER: Floating Player Bar
 
@@ -135,13 +133,24 @@ if (settings.qualityProgressColor) {
 // Apply base styles always (I kinda dont really remember what this does but it's important i guess)
 baseStyleTag.css = baseStyles;
 
-// Update CSS variables for lyrics text glow based on settings
+// Update CSS variables for lyrics glow + font scale
 const updateRadiantLyricsTextGlow = function (): void {
 	const root = document.documentElement;
+	if (settings.lyricsGlowEnabled) {
 		root.style.setProperty("--rl-glow-outer", `${settings.textGlow}px`);
 		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");
+	}
+	root.style.setProperty("--rl-font-scale", `${settings.lyricsFontSize / 100}`);
 };
 
+// Apply glow state immediately at startup
+updateRadiantLyricsTextGlow();
+
 // Function to update styles when settings change
 const updateRadiantLyricsStyles = function (): void {
 	// Handle Player Bar Visibility
@@ -158,32 +167,8 @@ const updateRadiantLyricsStyles = function (): void {
 	// Handle Floating Player Bar
 	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();
-		} 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
 	const trackTitleEl = document.querySelector(
@@ -1757,7 +1742,7 @@ const buildWordSpans = (): {
 			"margin-bottom": "2rem",
 			"padding-top": "0",
 			"padding-bottom": "0",
-			"font-size": "40px",
+			"font-size": "calc(40px * var(--rl-font-scale, 1))",
 			"font-family": FONT_STACK,
 			"font-weight": "700",
 			color: "rgba(128, 128, 128, 0.4)",

plugins/radiant-lyrics-luna/src/lyrics-glow.css

@@ -32,7 +32,7 @@
 		0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #fff) !important;
 	padding-left: 20px;
 	transition-duration: 0.7s;
-	font-size: 55px;
+	font-size: calc(55px * var(--rl-font-scale, 1));
 	/* biome-ignore lint: Active lyric uses Colorama color */
 	color: var(--cl-glow1, #fff) !important;
 	font-family:
@@ -47,7 +47,7 @@
 		0 0 0px transparent;
 	transition-duration: 0.25s;
 	color: rgba(128, 128, 128, 0.4);
-	font-size: 40px;
+	font-size: calc(40px * var(--rl-font-scale, 1));
 	font-family:
 		"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
 		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -106,7 +106,7 @@
 		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 	font-weight: 700;
 	/* biome-ignore lint: Typography override for readability */
-	font-size: 38px !important;
+	font-size: calc(38px * var(--rl-font-scale, 1)) !important;
 }
 
 /* MARKER: WBW lyrics CSS */
@@ -328,7 +328,7 @@
 /* Tidals "..." at the top of the container */
 .rl-wbw-active > span:not([data-test="lyrics-line"]) {
 	display: block;
-	font-size: 40px;
+	font-size: calc(40px * var(--rl-font-scale, 1));
 	font-family:
 		"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
 		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -383,30 +383,24 @@
 	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,
+.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;
-	/* 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;
+}