add a spinning are cover toggle

This commit is contained in:
n0201
2025-06-11 13:08:24 +02:00
parent 84e14a8a5d
commit 813c9246a1
2 changed files with 39 additions and 2 deletions
@@ -8,6 +8,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
lyricsGlowEnabled: true, lyricsGlowEnabled: true,
spinningCoverEverywhere: false, spinningCoverEverywhere: false,
performanceMode: false, performanceMode: false,
noSpinningArt: false,
backgroundContrast: 120, backgroundContrast: 120,
backgroundBlur: 80, backgroundBlur: 80,
backgroundBrightness: 40, backgroundBrightness: 40,
@@ -21,6 +22,7 @@ export const Settings = () => {
const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled); const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled);
const [spinningCoverEverywhere, setSpinningCoverEverywhere] = React.useState(settings.spinningCoverEverywhere); const [spinningCoverEverywhere, setSpinningCoverEverywhere] = React.useState(settings.spinningCoverEverywhere);
const [performanceMode, setPerformanceMode] = React.useState(settings.performanceMode); const [performanceMode, setPerformanceMode] = React.useState(settings.performanceMode);
const [noSpinningArt, setNoSpinningArt] = React.useState(settings.noSpinningArt);
const [backgroundContrast, setBackgroundContrast] = React.useState(settings.backgroundContrast); const [backgroundContrast, setBackgroundContrast] = React.useState(settings.backgroundContrast);
const [backgroundBlur, setBackgroundBlur] = React.useState(settings.backgroundBlur); const [backgroundBlur, setBackgroundBlur] = React.useState(settings.backgroundBlur);
const [backgroundBrightness, setBackgroundBrightness] = React.useState(settings.backgroundBrightness); const [backgroundBrightness, setBackgroundBrightness] = React.useState(settings.backgroundBrightness);
@@ -91,6 +93,21 @@ export const Settings = () => {
} }
}} }}
/> />
<LunaSwitchSetting
title="Disable Spinning Art"
desc="Disable the spinning cover art background animation"
checked={noSpinningArt}
onChange={(_, checked: boolean) => {
console.log("No Spinning Art:", checked ? "enabled" : "disabled");
setNoSpinningArt((settings.noSpinningArt = checked));
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
/>
<LunaNumberSetting <LunaNumberSetting
title="Background Contrast" title="Background Contrast"
desc="Adjust the contrast of the spinning background (0-200, default: 120)" desc="Adjust the contrast of the spinning background (0-200, default: 120)"
+20
View File
@@ -202,7 +202,12 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
globalBackgroundImage.style.width = '120vw'; globalBackgroundImage.style.width = '120vw';
globalBackgroundImage.style.height = '120vh'; globalBackgroundImage.style.height = '120vh';
globalBackgroundImage.style.filter = `blur(${Math.min(settings.backgroundBlur, 20)}px) brightness(${settings.backgroundBrightness / 100}) contrast(${Math.min(settings.backgroundContrast, 150)}%)`; globalBackgroundImage.style.filter = `blur(${Math.min(settings.backgroundBlur, 20)}px) brightness(${settings.backgroundBrightness / 100}) contrast(${Math.min(settings.backgroundContrast, 150)}%)`;
if (!settings.noSpinningArt) {
globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`; globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
}
else {
globalBackgroundImage.style.animation = 'none';
}
globalBackgroundImage.classList.remove('performance-mode-static'); globalBackgroundImage.classList.remove('performance-mode-static');
globalBackgroundImage.style.willChange = 'transform'; globalBackgroundImage.style.willChange = 'transform';
} else { } else {
@@ -210,7 +215,12 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
globalBackgroundImage.style.width = '150vw'; globalBackgroundImage.style.width = '150vw';
globalBackgroundImage.style.height = '150vh'; globalBackgroundImage.style.height = '150vh';
globalBackgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`; globalBackgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
if (!settings.noSpinningArt) {
globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`; globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
}
else {
globalBackgroundImage.style.animation = 'none';
}
globalBackgroundImage.classList.remove('performance-mode-static'); globalBackgroundImage.classList.remove('performance-mode-static');
globalBackgroundImage.style.willChange = 'transform'; globalBackgroundImage.style.willChange = 'transform';
} }
@@ -281,11 +291,21 @@ const updateRadiantLyricsNowPlayingBackground = function(): void {
// Reduce blur and effects for better performance, but keep spinning // Reduce blur and effects for better performance, but keep spinning
blur = Math.min(blur, 20); blur = Math.min(blur, 20);
contrast = Math.min(contrast, 150); contrast = Math.min(contrast, 150);
if (!settings.noSpinningArt) {
imgElement.style.animation = `spin ${spinSpeed}s linear infinite`; imgElement.style.animation = `spin ${spinSpeed}s linear infinite`;
}
else {
imgElement.style.animation = 'none';
}
imgElement.classList.remove('performance-mode-static'); imgElement.classList.remove('performance-mode-static');
imgElement.style.willChange = 'transform'; imgElement.style.willChange = 'transform';
} else { } else {
if (!settings.noSpinningArt) {
imgElement.style.animation = `spin ${spinSpeed}s linear infinite`; imgElement.style.animation = `spin ${spinSpeed}s linear infinite`;
}
else {
imgElement.style.animation = 'none';
}
imgElement.classList.remove('performance-mode-static'); imgElement.classList.remove('performance-mode-static');
imgElement.style.willChange = 'transform'; imgElement.style.willChange = 'transform';
} }