Merge pull request #47 from meowarex/dev

Adjust Lyric Glow Setting

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

@@ -4,13 +4,14 @@ import React from "react";
 
 export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
 	hideUIEnabled: true,
-	playerBarVisible: true,
+    playerBarVisible: false,
 	lyricsGlowEnabled: true,
-	spinningCoverEverywhere: false,
+	textGlow: 20,
+    spinningCoverEverywhere: true,
 	performanceMode: false,
 	spinningArtEnabled: true,
 	backgroundContrast: 120,
-	backgroundBlur: 80,
+    backgroundBlur: 80,
 	backgroundBrightness: 40,
 	spinSpeed: 45,
 	settingsAffectNowPlaying: true,
@@ -20,6 +21,7 @@ export const Settings = () => {
 	const [hideUIEnabled, setHideUIEnabled] = React.useState(settings.hideUIEnabled);
 	const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible);
 	const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled);
+	const [textGlow, setTextGlow] = React.useState(settings.textGlow);
 	const [spinningCoverEverywhere, setSpinningCoverEverywhere] = React.useState(settings.spinningCoverEverywhere);
 	const [performanceMode, setPerformanceMode] = React.useState(settings.performanceMode);
 	const [spinningArtEnabled, setSpinningArtEnabled] = React.useState(settings.spinningArtEnabled);
@@ -65,7 +67,7 @@ export const Settings = () => {
 				}}
 			/>
 			<LunaSwitchSetting
-				title="Cover Everywhere | Experimental"
+				title="Cover Everywhere"
 				desc="Apply the spinning Cover Art background to the entire app, not just the Now Playing view, Heavily Inspired by Cover-Theme by @Inrixia"
 				checked={spinningCoverEverywhere}
 				onChange={(_, checked: boolean) => {
@@ -78,8 +80,8 @@ export const Settings = () => {
 				}}
 			/>
 			<LunaSwitchSetting
-				title="Performance Mode"
+				title="Performance Mode | Experimental"
-				desc="Performance mode: Reduces blur effects (20px), uses smaller image sizes, to optimize GPU usage"
+				desc="Performance mode: Reduces blur effects & uses smaller image sizes, to optimize GPU usage"
 				checked={performanceMode}
 				onChange={(_, checked: boolean) => {
 					console.log("Performance Mode:", checked ? "enabled" : "disabled");
@@ -108,6 +110,21 @@ export const Settings = () => {
 					}
 				}}
 			/>
+			<LunaNumberSetting
+                title="Text Glow"
+                desc="Adjust the glow size of lyrics (0-100, default: 20)"
+                min={0}
+                max={100}
+                step={1}
+                value={textGlow}
+                onNumber={(value: number) => {
+                    setTextGlow((settings.textGlow = value));
+                    // Update variables immediately when setting changes
+                    if ((window as any).updateRadiantLyricsTextGlow) {
+                        (window as any).updateRadiantLyricsTextGlow();
+                    }
+                }}
+            />
 			<LunaNumberSetting
 				title="Background Contrast"
 				desc="Adjust the contrast of the spinning background (0-200, default: 120)"

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

@@ -31,6 +31,13 @@ if (settings.lyricsGlowEnabled) {
     lyricsGlowStyleTag.css = lyricsGlow;
 }
 
+// Update CSS variables for lyrics text glow based on settings
+const updateRadiantLyricsTextGlow = function(): void {
+    const root = document.documentElement;
+    root.style.setProperty('--rl-glow-outer', `${settings.textGlow}px`);
+    root.style.setProperty('--rl-glow-inner', '2px');
+};
+
 
 // Function to update styles when settings change
 const updateRadiantLyricsStyles = function(): void {
@@ -53,6 +60,7 @@ const updateRadiantLyricsStyles = function(): void {
         if (settings.lyricsGlowEnabled) {
             lyricsContainer.classList.remove('lyrics-glow-disabled');
             lyricsGlowStyleTag.css = lyricsGlow;
+            updateRadiantLyricsTextGlow();
         } else {
             lyricsContainer.classList.add('lyrics-glow-disabled');
             lyricsGlowStyleTag.remove();
@@ -63,6 +71,7 @@ const updateRadiantLyricsStyles = function(): void {
             if (settings.lyricsGlowEnabled) {
                 el.classList.remove('lyrics-glow-disabled');
                 lyricsGlowStyleTag.css = lyricsGlow;
+                updateRadiantLyricsTextGlow();
             } else {
                 el.classList.add('lyrics-glow-disabled');
                 lyricsGlowStyleTag.remove();
@@ -624,6 +633,7 @@ const updateRadiantLyricsNowPlayingBackground = function(): void {
 (window as any).updateRadiantLyricsStyles = updateRadiantLyricsStyles;
 (window as any).updateRadiantLyricsGlobalBackground = updateRadiantLyricsGlobalBackground;
 (window as any).updateRadiantLyricsNowPlayingBackground = updateRadiantLyricsNowPlayingBackground;
+(window as any).updateRadiantLyricsTextGlow = updateRadiantLyricsTextGlow;
 
 
 const cleanUpDynamicArt = function (): void {
@@ -672,6 +682,9 @@ if (settings.performanceMode) {
     document.body.classList.add('performance-mode');
 }
 
+// Initialize text glow CSS variables on load
+updateRadiantLyricsTextGlow();
+
 updateCoverArtBackground(1);
 
 // Add cleanup to unloads

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

@@ -25,7 +25,7 @@
 
 /* Enhanced lyrics styling with glow effects */
 [class*="_lyricsText"] > div > span[data-current="true"] {
-    text-shadow: 0 0 2px #fff, 0 0 20px #fff !important;
+    text-shadow: 0 0 var(--rl-glow-inner, 2px) #fff, 0 0 var(--rl-glow-outer, 20px) #fff !important;
     padding-left: 20px;
     transition-duration: 0.7s;
     font-size: 55px;
@@ -44,7 +44,7 @@
 }
 
 [class*="_lyricsText"] > div > span:hover {
-    text-shadow: 0 0 2px lightgray, 0 0 20px lightgray !important;
+    text-shadow: 0 0 var(--rl-glow-inner, 2px) lightgray, 0 0 var(--rl-glow-outer, 20px) lightgray !important;
     color: lightgray !important;
     padding-left: 20px;
     transition-duration: 0.7s;
@@ -52,7 +52,7 @@
 
 /* Track title glow */
 [data-test="now-playing-track-title"] {
-    text-shadow: 0 0 1px #fff, 0 0 30px #fff !important;
+    text-shadow: 0 0 1px #fff, 0 0 var(--rl-glow-outer, 30px) #fff !important;
 }
 
 /* Current line transitions */