Background Radius

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

@@ -17,6 +17,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
 	spinSpeed: 45,
 	settingsAffectNowPlaying: true,
 	backgroundScale: 15,
+	backgroundRadius: 0,
 });
 
 export const Settings = () => {
@@ -57,6 +58,9 @@ export const Settings = () => {
 	const [backgroundScale, setBackgroundScale] = React.useState(
 		settings.backgroundScale,
 	);
+	const [backgroundRadius, setBackgroundRadius] = React.useState(
+		settings.backgroundRadius,
+	);
 
 	// Derive props and override onChange to accept a broader first param type
 	type BaseSwitchProps = React.ComponentProps<typeof LunaSwitchSetting>;
@@ -178,7 +182,6 @@ export const Settings = () => {
 				onNumber={(value: number) => {
 					const next = Math.max(1, Math.min(30, Math.round(value)));
 					setBackgroundScale((settings.backgroundScale = next));
-					// Immediate visual update without throttle
 					if ((window as any).updateRadiantLyricsGlobalBackground) {
 						(window as any).updateRadiantLyricsGlobalBackground();
 					}
@@ -190,6 +193,28 @@ export const Settings = () => {
 					}
 				}}
 			/>
+			<LunaNumberSetting
+				title="Background Radius"
+				desc="Round the image corners (0–50%). 50% ≈ circle."
+				min={0}
+				max={50}
+				step={1}
+				value={backgroundRadius}
+				onNumber={(value: number) => {
+					const next = Math.max(0, Math.min(50, Math.round(value)));
+					setBackgroundRadius((settings.backgroundRadius = next));
+					if ((window as any).updateRadiantLyricsGlobalBackground) {
+						(window as any).updateRadiantLyricsGlobalBackground();
+					}
+					if (
+						sessionStorage &&
+						settings.settingsAffectNowPlaying &&
+						(window as any).updateRadiantLyricsNowPlayingBackground
+					) {
+						(window as any).updateRadiantLyricsNowPlayingBackground();
+					}
+				}}
+			/>
 			<LunaNumberSetting
 				title="Text Glow"
 				desc="Adjust the glow size of lyrics (0-100, default: 20)"

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

@@ -465,10 +465,13 @@ function updateCoverArtBackground(method: number = 0): void {
 					const scalePm = getScaledMultiplier();
 					const widthPm = `${Math.round(scalePm * 100)}vw`;
 					const heightPm = `${Math.round(scalePm * 100)}vh`;
+					const radiusPm = `${Math.max(0, Math.min(50, settings.backgroundRadius ?? 0))}%`;
 					if (nowPlayingBackgroundImage.style.width !== widthPm)
 						nowPlayingBackgroundImage.style.width = widthPm;
 					if (nowPlayingBackgroundImage.style.height !== heightPm)
 						nowPlayingBackgroundImage.style.height = heightPm;
+					if (nowPlayingBackgroundImage.style.borderRadius !== radiusPm)
+						nowPlayingBackgroundImage.style.borderRadius = radiusPm;
 					const filt = `blur(${blur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${contrast}%)`;
 					if (nowPlayingBackgroundImage.style.filter !== filt)
 						nowPlayingBackgroundImage.style.filter = filt;
@@ -486,10 +489,13 @@ function updateCoverArtBackground(method: number = 0): void {
 					const scaleNm = getScaledMultiplier();
 					const widthNm = `${Math.round(scaleNm * 100)}vw`;
 					const heightNm = `${Math.round(scaleNm * 100)}vh`;
+					const radiusNm = `${Math.max(0, Math.min(50, settings.backgroundRadius ?? 0))}%`;
 					if (nowPlayingBackgroundImage.style.width !== widthNm)
 						nowPlayingBackgroundImage.style.width = widthNm;
 					if (nowPlayingBackgroundImage.style.height !== heightNm)
 						nowPlayingBackgroundImage.style.height = heightNm;
+					if (nowPlayingBackgroundImage.style.borderRadius !== radiusNm)
+						nowPlayingBackgroundImage.style.borderRadius = radiusNm;
 					const filt = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
 					if (nowPlayingBackgroundImage.style.filter !== filt)
 						nowPlayingBackgroundImage.style.filter = filt;
@@ -605,12 +611,15 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
 		const scale = getScaledMultiplier();
 		const scaledWidth = `${Math.round(scale * 100)}vw`;
 		const scaledHeight = `${Math.round(scale * 100)}vh`;
+		const radius = `${Math.max(0, Math.min(50, settings.backgroundRadius ?? 0))}%`;
 		// Performance mode optimizations
 		if (settings.performanceMode) {
 			// Performance mode with spinning enabled
 			globalBackgroundImage.style.width = scaledWidth;
 			globalBackgroundImage.style.height = scaledHeight;
 			globalBackgroundImage.style.filter = `blur(${Math.min(settings.backgroundBlur, 20)}px) brightness(${settings.backgroundBrightness / 100}) contrast(${Math.min(settings.backgroundContrast, 150)}%)`;
+			if (globalBackgroundImage.style.borderRadius !== radius)
+				globalBackgroundImage.style.borderRadius = radius;
 			if (settings.spinningArtEnabled) {
 				globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
 				globalBackgroundImage.style.willChange = "transform";
@@ -624,6 +633,8 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
 			globalBackgroundImage.style.width = scaledWidth;
 			globalBackgroundImage.style.height = scaledHeight;
 			globalBackgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
+			if (globalBackgroundImage.style.borderRadius !== radius)
+				globalBackgroundImage.style.borderRadius = radius;
 			if (settings.spinningArtEnabled) {
 				globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
 				globalBackgroundImage.style.willChange = "transform";