Merge pull request #42 from meowarex/n0201-NoSpinPR

@N0201 | Added Disable Cover Spin Setting

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

@@ -8,6 +8,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
 	lyricsGlowEnabled: true,
 	spinningCoverEverywhere: false,
 	performanceMode: false,
+	spinningArtEnabled: false,
 	backgroundContrast: 120,
 	backgroundBlur: 80,
 	backgroundBrightness: 40,
@@ -21,6 +22,7 @@ export const Settings = () => {
 	const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled);
 	const [spinningCoverEverywhere, setSpinningCoverEverywhere] = React.useState(settings.spinningCoverEverywhere);
 	const [performanceMode, setPerformanceMode] = React.useState(settings.performanceMode);
+	const [spinningArtEnabled, setSpinningArtEnabled] = React.useState(settings.spinningArtEnabled);
 	const [backgroundContrast, setBackgroundContrast] = React.useState(settings.backgroundContrast);
 	const [backgroundBlur, setBackgroundBlur] = React.useState(settings.backgroundBlur);
 	const [backgroundBrightness, setBackgroundBrightness] = React.useState(settings.backgroundBrightness);
@@ -77,7 +79,7 @@ export const Settings = () => {
 			/>
 			<LunaSwitchSetting
 				title="Performance Mode"
-				desc="Performance mode: Reduces blur effects (max 20px), uses smaller image sizes, and optimizes GPU usage while keeping spinning animations"
+				desc="Performance mode: Reduces blur effects (20px), uses smaller image sizes, to optimize GPU usage"
 				checked={performanceMode}
 				onChange={(_, checked: boolean) => {
 					console.log("Performance Mode:", checked ? "enabled" : "disabled");
@@ -91,6 +93,21 @@ export const Settings = () => {
 					}
 				}}
 			/>
+			<LunaSwitchSetting
+				title="Disable Cover Spin" // Cheers @Max/n0201 for the idea <3
+				desc="Disable the spinning cover art background animation"
+				checked={!spinningArtEnabled}
+				onChange={(_, checked: boolean) => {
+					console.log("Disable Cover Spin:", checked ? "disabled" : "enabled");
+					setSpinningArtEnabled((settings.spinningArtEnabled = !checked));
+					if ((window as any).updateRadiantLyricsGlobalBackground) {
+						(window as any).updateRadiantLyricsGlobalBackground();
+					}
+					if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
+						(window as any).updateRadiantLyricsNowPlayingBackground();
+					}
+				}}
+			/>
 			<LunaNumberSetting
 				title="Background Contrast"
 				desc="Adjust the contrast of the spinning background (0-200, default: 120)"

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

@@ -128,7 +128,7 @@ const updateRadiantLyricsStyles = function(): void {
     }
 };
 
-// Function to apply spinning background to the entire app (cover everywhere) - PERFORMANCE OPTIMIZED
+// Function to apply spinning background to the entire app (cover everywhere)
 const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
     const appContainer = document.querySelector('[data-test="main"]') as HTMLElement;
     
@@ -202,18 +202,30 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
             globalBackgroundImage.style.width = '120vw';
             globalBackgroundImage.style.height = '120vh';
             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`;
-            globalBackgroundImage.classList.remove('performance-mode-static');
                 globalBackgroundImage.style.willChange = 'transform';
+            }
+            else {
+                globalBackgroundImage.style.animation = 'none';
+                globalBackgroundImage.style.willChange = 'auto';
+            }
+            globalBackgroundImage.classList.remove('performance-mode-static');
         } else {
             // Normal mode
             globalBackgroundImage.style.width = '150vw';
             globalBackgroundImage.style.height = '150vh';
             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`;
-            globalBackgroundImage.classList.remove('performance-mode-static');
                 globalBackgroundImage.style.willChange = 'transform';
             }
+            else {
+                globalBackgroundImage.style.animation = 'none';
+                globalBackgroundImage.style.willChange = 'auto';
+            }
+            globalBackgroundImage.classList.remove('performance-mode-static');
+        }
     }
 };
 
@@ -281,14 +293,26 @@ const updateRadiantLyricsNowPlayingBackground = function(): void {
             // Reduce blur and effects for better performance, but keep spinning
             blur = Math.min(blur, 20);
             contrast = Math.min(contrast, 150);
+            if (settings.spinningArtEnabled) {
             imgElement.style.animation = `spin ${spinSpeed}s linear infinite`;
-            imgElement.classList.remove('performance-mode-static');
             imgElement.style.willChange = 'transform';
+            }
+            else {
+                imgElement.style.animation = 'none';
+                imgElement.style.willChange = 'auto';
+            }
+            imgElement.classList.remove('performance-mode-static');
         } else {
+            if (settings.spinningArtEnabled) {
             imgElement.style.animation = `spin ${spinSpeed}s linear infinite`;
-            imgElement.classList.remove('performance-mode-static');
             imgElement.style.willChange = 'transform';
             }
+            else {
+                imgElement.style.animation = 'none';
+                imgElement.style.willChange = 'auto';
+            }
+            imgElement.classList.remove('performance-mode-static');
+        }
         
         imgElement.style.filter = `blur(${blur}px) brightness(${brightness / 100}) contrast(${contrast}%)`;
     });
@@ -731,17 +755,27 @@ const updateCoverArtBackground = function (method: number = 0): void {
                     const blur = Math.min(settings.backgroundBlur, 20);
                     const contrast = Math.min(settings.backgroundContrast, 150);
                     nowPlayingBackgroundImage.style.filter = `blur(${blur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${contrast}%)`;
+                    if (settings.spinningArtEnabled) {
                         nowPlayingBackgroundImage.style.animation = `spin ${settings.spinSpeed}s linear infinite`;
-                    nowPlayingBackgroundImage.classList.remove('performance-mode-static');
                         nowPlayingBackgroundImage.style.willChange = 'transform';
+                    } else {
+                        nowPlayingBackgroundImage.style.animation = 'none';
+                        nowPlayingBackgroundImage.style.willChange = 'auto';
+                    }
+                    nowPlayingBackgroundImage.classList.remove('performance-mode-static');
                 } else {
                     // Normal mode
                     nowPlayingBackgroundImage.style.width = '90vw';
                     nowPlayingBackgroundImage.style.height = '90vh';
                     nowPlayingBackgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
+                    if (settings.spinningArtEnabled) {
                         nowPlayingBackgroundImage.style.animation = `spin ${settings.spinSpeed}s linear infinite`;
-                    nowPlayingBackgroundImage.classList.remove('performance-mode-static');
                         nowPlayingBackgroundImage.style.willChange = 'transform';
+                    } else {
+                        nowPlayingBackgroundImage.style.animation = 'none';
+                        nowPlayingBackgroundImage.style.willChange = 'auto';
+                    }
+                    nowPlayingBackgroundImage.classList.remove('performance-mode-static');
                 }
             }