diff --git a/plugins/radiant-lyrics-luna/src/Settings.tsx b/plugins/radiant-lyrics-luna/src/Settings.tsx index 5a8577f..f0aa7a1 100644 --- a/plugins/radiant-lyrics-luna/src/Settings.tsx +++ b/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; @@ -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 = () => { } }} /> + { + 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(); + } + }} + /> { 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";