diff --git a/plugins/radiant-lyrics-luna/src/Settings.tsx b/plugins/radiant-lyrics-luna/src/Settings.tsx index 73bd486..5a8577f 100644 --- a/plugins/radiant-lyrics-luna/src/Settings.tsx +++ b/plugins/radiant-lyrics-luna/src/Settings.tsx @@ -16,6 +16,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", { backgroundBrightness: 40, spinSpeed: 45, settingsAffectNowPlaying: true, + backgroundScale: 15, }); export const Settings = () => { @@ -53,6 +54,9 @@ export const Settings = () => { const [trackTitleGlow, setTrackTitleGlow] = React.useState( settings.trackTitleGlow, ); + const [backgroundScale, setBackgroundScale] = React.useState( + settings.backgroundScale, + ); // Derive props and override onChange to accept a broader first param type type BaseSwitchProps = React.ComponentProps; @@ -165,6 +169,27 @@ export const Settings = () => { } }} /> + { + 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(); + } + if ( + settings.settingsAffectNowPlaying && + (window as any).updateRadiantLyricsNowPlayingBackground + ) { + (window as any).updateRadiantLyricsNowPlayingBackground(); + } + }} + /> { + const value = Math.round(settings.backgroundScale); + return Math.max(0.1, Math.min(3, value / 10)); +}; // Import CSS files directly using Luna's file:// syntax - Took me a while to figure out <3 import baseStyles from "file://styles.css?minify"; @@ -377,7 +382,9 @@ function updateCoverArtBackground(method: number = 0): void { .querySelectorAll( ".now-playing-background-image, .now-playing-black-bg, .now-playing-gradient-overlay", ) - .forEach((el) => el.remove()); + .forEach((el) => { + el.remove(); + }); // Create container nowPlayingBackgroundContainer = document.createElement("div"); @@ -455,10 +462,13 @@ function updateCoverArtBackground(method: number = 0): void { // Performance mode with spinning enabled const blur = Math.min(settings.backgroundBlur, 20); const contrast = Math.min(settings.backgroundContrast, 150); - if (nowPlayingBackgroundImage.style.width !== "70vw") - nowPlayingBackgroundImage.style.width = "70vw"; - if (nowPlayingBackgroundImage.style.height !== "70vh") - nowPlayingBackgroundImage.style.height = "70vh"; + const scalePm = getScaledMultiplier(); + const widthPm = `${Math.round(scalePm * 100)}vw`; + const heightPm = `${Math.round(scalePm * 100)}vh`; + if (nowPlayingBackgroundImage.style.width !== widthPm) + nowPlayingBackgroundImage.style.width = widthPm; + if (nowPlayingBackgroundImage.style.height !== heightPm) + nowPlayingBackgroundImage.style.height = heightPm; const filt = `blur(${blur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${contrast}%)`; if (nowPlayingBackgroundImage.style.filter !== filt) nowPlayingBackgroundImage.style.filter = filt; @@ -473,10 +483,13 @@ function updateCoverArtBackground(method: number = 0): void { nowPlayingBackgroundImage.classList.remove("performance-mode-static"); } else { // Normal mode - if (nowPlayingBackgroundImage.style.width !== "90vw") - nowPlayingBackgroundImage.style.width = "90vw"; - if (nowPlayingBackgroundImage.style.height !== "90vh") - nowPlayingBackgroundImage.style.height = "90vh"; + const scaleNm = getScaledMultiplier(); + const widthNm = `${Math.round(scaleNm * 100)}vw`; + const heightNm = `${Math.round(scaleNm * 100)}vh`; + if (nowPlayingBackgroundImage.style.width !== widthNm) + nowPlayingBackgroundImage.style.width = widthNm; + if (nowPlayingBackgroundImage.style.height !== heightNm) + nowPlayingBackgroundImage.style.height = heightNm; const filt = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`; if (nowPlayingBackgroundImage.style.filter !== filt) nowPlayingBackgroundImage.style.filter = filt; @@ -520,16 +533,15 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => { return; } - // Throttle updates to prevent excessive DOM manipulation + // Only throttle image src updates; style updates below always run for responsiveness const now = Date.now(); - if ( - now - lastUpdateTime < getUpdateThrottle() && - currentGlobalCoverSrc === coverArtImageSrc - ) { - return; + const shouldUpdateImageSrc = + now - lastUpdateTime >= getUpdateThrottle() || + currentGlobalCoverSrc !== coverArtImageSrc; + if (shouldUpdateImageSrc) { + lastUpdateTime = now; + currentGlobalCoverSrc = coverArtImageSrc; } - lastUpdateTime = now; - currentGlobalCoverSrc = coverArtImageSrc; // Add StyleTag if not present if (!globalSpinningBgStyleTag) { @@ -579,18 +591,25 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => { globalBackgroundContainer.appendChild(globalBackgroundImage); } - // Update image source efficiently - if (globalBackgroundImage && globalBackgroundImage.src !== coverArtImageSrc) { + // Update image source efficiently (throttled) + if ( + shouldUpdateImageSrc && + globalBackgroundImage && + globalBackgroundImage.src !== coverArtImageSrc + ) { globalBackgroundImage.src = coverArtImageSrc; } // Apply performance-optimized settings if (globalBackgroundImage) { + const scale = getScaledMultiplier(); + const scaledWidth = `${Math.round(scale * 100)}vw`; + const scaledHeight = `${Math.round(scale * 100)}vh`; // Performance mode optimizations if (settings.performanceMode) { // Performance mode with spinning enabled - globalBackgroundImage.style.width = "100vw"; - globalBackgroundImage.style.height = "100vh"; + 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 (settings.spinningArtEnabled) { globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`; @@ -602,8 +621,8 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => { globalBackgroundImage.classList.remove("performance-mode-static"); } else { // Normal mode - globalBackgroundImage.style.width = "150vw"; - globalBackgroundImage.style.height = "150vh"; + globalBackgroundImage.style.width = scaledWidth; + globalBackgroundImage.style.height = scaledHeight; globalBackgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`; if (settings.spinningArtEnabled) { globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`; @@ -664,7 +683,7 @@ const updateRadiantLyricsNowPlayingBackground = function (): void { const defaultContrast = 120; const defaultSpinSpeed = 45; - let blur, brightness, contrast, spinSpeed; + let blur: number, brightness: number, contrast: number, spinSpeed: number; if (settings.settingsAffectNowPlaying) { blur = settings.backgroundBlur; @@ -678,6 +697,11 @@ const updateRadiantLyricsNowPlayingBackground = function (): void { spinSpeed = defaultSpinSpeed; } + // Apply size based on backgroundScale + const scale = getScaledMultiplier(); + imgElement.style.width = `${Math.round(scale * 100)}vw`; + imgElement.style.height = `${Math.round(scale * 100)}vh`; + // Performance mode optimizations if (settings.performanceMode) { // Reduce blur and effects for better performance, but keep spinning