Merge pull request #19 from meowarex/dev

Added Contrast, Brightness & Blur Adjustment Settings

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

@@ -1,5 +1,5 @@
 import { ReactiveStore } from "@luna/core";
-import { LunaSettings, LunaSwitchSetting } from "@luna/ui";
+import { LunaSettings, LunaSwitchSetting, LunaNumberSetting } from "@luna/ui";
 import React from "react";
 
 export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
@@ -7,6 +7,9 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
 	playerBarVisible: true,
 	lyricsGlowEnabled: true,
 	spinningCoverEverywhere: false,
+	backgroundContrast: 120,
+	backgroundBlur: 80,
+	backgroundBrightness: 40,
 });
 
 export const Settings = () => {
@@ -14,6 +17,9 @@ export const Settings = () => {
 	const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible);
 	const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled);
 	const [spinningCoverEverywhere, setSpinningCoverEverywhere] = React.useState(settings.spinningCoverEverywhere);
+	const [backgroundContrast, setBackgroundContrast] = React.useState(settings.backgroundContrast);
+	const [backgroundBlur, setBackgroundBlur] = React.useState(settings.backgroundBlur);
+	const [backgroundBrightness, setBackgroundBrightness] = React.useState(settings.backgroundBrightness);
 	
 	return (
 		<LunaSettings>
@@ -30,19 +36,6 @@ export const Settings = () => {
 					}
 				}}
 			/>
-			<LunaSwitchSetting
-				title="Cover Everywhere | Experimental"
-				desc="Apply the spinning album cover background to the entire app, not just the Now Playing view, Heavily Inspired by Cover-Theme by @Inrixia"
-				checked={spinningCoverEverywhere}
-				onChange={(_, checked: boolean) => {
-					console.log("Spinning Cover Everywhere:", checked ? "enabled" : "disabled");
-					setSpinningCoverEverywhere((settings.spinningCoverEverywhere = checked));
-					// Update styles immediately when setting changes
-					if ((window as any).updateRadiantLyricsGlobalBackground) {
-						(window as any).updateRadiantLyricsGlobalBackground();
-					}
-				}}
-			/>
 			<LunaSwitchSetting
 				title="Hide UI Feature"
 				desc="Enable hide/unhide UI functionality with toggle buttons"
@@ -65,6 +58,64 @@ export const Settings = () => {
 					}
 				}}
 			/>
+			<LunaSwitchSetting
+				title="Cover Everywhere | Experimental"
+				desc="Apply the spinning album cover background to the entire app, not just the Now Playing view, Heavily Inspired by Cover-Theme by @Inrixia"
+				checked={spinningCoverEverywhere}
+				onChange={(_, checked: boolean) => {
+					console.log("Spinning Cover Everywhere:", checked ? "enabled" : "disabled");
+					setSpinningCoverEverywhere((settings.spinningCoverEverywhere = checked));
+					// Update styles immediately when setting changes
+					if ((window as any).updateRadiantLyricsGlobalBackground) {
+						(window as any).updateRadiantLyricsGlobalBackground();
+					}
+				}}
+			/>
+			<LunaNumberSetting
+				title="Background Contrast"
+				desc="Adjust the contrast of the spinning background (0-200, default: 120)"
+				min={0}
+				max={200}
+				step={1}
+				value={backgroundContrast}
+				onNumber={(value: number) => {
+					console.log("Background Contrast:", value);
+					setBackgroundContrast((settings.backgroundContrast = value));
+					if ((window as any).updateRadiantLyricsGlobalBackground) {
+						(window as any).updateRadiantLyricsGlobalBackground();
+					}
+				}}
+			/>
+			<LunaNumberSetting
+				title="Background Blur"
+				desc="Adjust the blur amount of the spinning background (0-200, default: 80)"
+				min={0}
+				max={200}
+				step={1}
+				value={backgroundBlur}
+				onNumber={(value: number) => {
+					console.log("Background Blur:", value);
+					setBackgroundBlur((settings.backgroundBlur = value));
+					if ((window as any).updateRadiantLyricsGlobalBackground) {
+						(window as any).updateRadiantLyricsGlobalBackground();
+					}
+				}}
+			/>
+			<LunaNumberSetting
+				title="Background Brightness"
+				desc="Adjust the brightness of the spinning background (0-100, default: 40)"
+				min={0}
+				max={100}
+				step={1}
+				value={backgroundBrightness}
+				onNumber={(value: number) => {
+					console.log("Background Brightness:", value);
+					setBackgroundBrightness((settings.backgroundBrightness = value));
+					if ((window as any).updateRadiantLyricsGlobalBackground) {
+						(window as any).updateRadiantLyricsGlobalBackground();
+					}
+				}}
+			/>
 		</LunaSettings>
 	);
 }; 

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

@@ -107,6 +107,7 @@ const applyGlobalSpinningBackground = (albumImageSrc: string): void => {
     img.src = albumImageSrc;
     img.className = 'global-spinning-image';
     img.style.animationDelay = '0s';
+    img.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
     appContainer.appendChild(img);
 };
 
@@ -399,7 +400,6 @@ const onTrackChanged = function (method: number = 0): void {
             }
         } else {
             cleanUpDynamicArt();
-            //trace.msg.log("Couldn't get album art"); - Broken as fucky
             return;
         }
     }
@@ -407,7 +407,6 @@ const onTrackChanged = function (method: number = 0): void {
     // Only update if the image source has actually changed
     if (albumImageSrc && albumImageSrc !== currentTrackSrc) {
         currentTrackSrc = albumImageSrc;
-        //trace.msg.log(`Track changed, updating background: ${albumImageSrc}`); - Accidentally left this in Prod... 
         
         // Apply global spinning background if enabled
         if (settings.spinningCoverEverywhere && albumImageSrc !== currentGlobalTrackSrc) {
@@ -434,7 +433,7 @@ const onTrackChanged = function (method: number = 0): void {
             centerImg.style.height = '150vh';
             centerImg.style.objectFit = 'cover';
             centerImg.style.zIndex = '-1';
-            centerImg.style.filter = 'blur(100px) brightness(0.4) contrast(1.2) saturate(1)';
+            centerImg.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
             centerImg.style.animation = 'spin 35s linear infinite';
             centerImg.style.animationDelay = '5s';  // Add a 5-second delay
             nowPlayingContainerElement.appendChild(centerImg);
@@ -450,7 +449,7 @@ const onTrackChanged = function (method: number = 0): void {
             centerImg2.style.height = '150vh';
             centerImg2.style.objectFit = 'cover';
             centerImg2.style.zIndex = '-1';
-            centerImg2.style.filter = 'blur(100px) brightness(0.4) contrast(1.2) saturate(1)';
+            centerImg2.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
             centerImg2.style.animation = 'spin 35s linear infinite';
             nowPlayingContainerElement.appendChild(centerImg2);