Merge pull request #17 from meowarex/dev

Added Experimental Cover Everywhere Setting

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

@@ -6,12 +6,14 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
 	hideUIEnabled: true,
 	playerBarVisible: true,
 	lyricsGlowEnabled: true,
+	spinningCoverEverywhere: false,
 });
 
 export const Settings = () => {
 	const [hideUIEnabled, setHideUIEnabled] = React.useState(settings.hideUIEnabled);
 	const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible);
 	const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled);
+	const [spinningCoverEverywhere, setSpinningCoverEverywhere] = React.useState(settings.spinningCoverEverywhere);
 	
 	return (
 		<LunaSettings>
@@ -28,6 +30,19 @@ export const Settings = () => {
 					}
 				}}
 			/>
+			<LunaSwitchSetting
+				title="Cover Everywhere | Experimental"
+				desc="Apply the spinning album cover background to the entire app, not just the Now Playing view, Heavily Inspired by Cover-Theme by @Inrixia"
+				checked={spinningCoverEverywhere}
+				onChange={(_, checked: boolean) => {
+					console.log("Spinning Cover Everywhere:", checked ? "enabled" : "disabled");
+					setSpinningCoverEverywhere((settings.spinningCoverEverywhere = checked));
+					// Update styles immediately when setting changes
+					if ((window as any).updateRadiantLyricsGlobalBackground) {
+						(window as any).updateRadiantLyricsGlobalBackground();
+					}
+				}}
+			/>
 			<LunaSwitchSetting
 				title="Hide UI Feature"
 				desc="Enable hide/unhide UI functionality with toggle buttons"

plugins/radiant-lyrics-luna/src/cover-everywhere.css

@@ -0,0 +1,61 @@
+/* Global Spinning Background Styles */
+
+.global-spinning-black-bg {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: #000;
+    z-index: -2;
+    pointer-events: none;
+}
+
+.global-spinning-image {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 150vw;
+    height: 150vh;
+    object-fit: cover;
+    z-index: -1;
+    filter: blur(100px) brightness(0.4) contrast(1.2) saturate(1);
+    opacity: 1;
+    animation: spinGlobal 45s linear infinite;
+}
+
+@keyframes spinGlobal {
+    from { transform: translate(-50%, -50%) rotate(0deg); }
+    to { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+/* Make background visible through all containers */
+body,
+#wimp,
+main,
+[class^="_sidebarWrapper"],
+[class^="_mainContainer"],
+[class*="smallHeader"],
+[data-test="main-layout-sidebar-wrapper"],
+[data-test="main-layout-header"],
+[data-test="feed-sidebar"],
+[data-test="stream-metadata"],
+[data-test="footer-player"] {
+    background: unset !important;
+}
+
+/* Make sidebar and player bar semi-transparent */
+[data-test="footer-player"],
+[data-test="main-layout-sidebar-wrapper"],
+[class^="_bar"],
+[class^="_sidebarItem"]:hover {
+    background-color: rgba(0, 0, 0, 0.3) !important;
+    backdrop-filter: blur(10px) !important;
+    -webkit-backdrop-filter: blur(10px) !important;
+}
+
+/* Remove bottom gradient */
+[class^="_bottomGradient"] {
+    display: none !important;
+} 

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

@@ -7,6 +7,7 @@ import baseStyles from "file://styles.css?minify";
 import separatedLyrics from "file://separated-lyrics.css?minify";
 import playerBarHidden from "file://player-bar-hidden.css?minify";
 import lyricsGlow from "file://lyrics-glow.css?minify";
+import coverEverywhereCss from "file://cover-everywhere.css?minify";
 
 export const { trace } = Tracer("[Radiant Lyrics]");
 export { Settings };
@@ -20,6 +21,9 @@ const baseStyleTag = new StyleTag("RadiantLyrics-base", unloads);
 const playerBarStyleTag = new StyleTag("RadiantLyrics-player-bar", unloads);
 const lyricsGlowStyleTag = new StyleTag("RadiantLyrics-lyrics-glow", unloads);
 
+// StyleTag for global spinning background CSS
+const globalSpinningBgStyleTag = new StyleTag("RadiantLyrics-global-spinning-bg", unloads, coverEverywhereCss);
+
 // Apply lyrics glow styles if enabled
 if (settings.lyricsGlowEnabled) {
     lyricsGlowStyleTag.css = lyricsGlow;
@@ -27,6 +31,7 @@ if (settings.lyricsGlowEnabled) {
 
 var isHidden = false;
 var currentTrackSrc: string | null = null; // Track current album art to prevent unnecessary updates
+var currentGlobalTrackSrc: string | null = null; // Track current global background to prevent unnecessary updates
 
 const updateButtonStates = function(): void {
     const hideButton = document.querySelector('.hide-ui-button') as HTMLElement;
@@ -68,8 +73,62 @@ const updateRadiantLyricsStyles = function(): void {
     }
 };
 
-// Make this function available globally so Settings can call it
+// Function to apply spinning background to the entire app
+const applyGlobalSpinningBackground = (albumImageSrc: string): void => {
+    if (!settings.spinningCoverEverywhere) return;
+
+    const appContainer = document.querySelector('[data-test="main"]') as HTMLElement;
+    if (!appContainer) return;
+
+    // Remove any existing background elements
+    appContainer.querySelectorAll('.global-spinning-image, .global-spinning-black-bg').forEach(el => el.remove());
+
+    // Add black background
+    const blackBg = document.createElement('div');
+    blackBg.className = 'global-spinning-black-bg';
+    appContainer.appendChild(blackBg);
+
+    // Add two spinning images
+    for (let i = 0; i < 2; i++) {
+        const img = document.createElement('img');
+        img.src = albumImageSrc;
+        img.className = 'global-spinning-image';
+        img.style.animationDelay = '0s';
+        appContainer.appendChild(img);
+    }
+};
+
+// Function to clean up global spinning background
+const cleanUpGlobalSpinningBackground = function(): void {
+    const globalImages = document.getElementsByClassName("global-spinning-image");
+    Array.from(globalImages).forEach((element) => {
+        element.remove();
+    });
+    // Also remove the overlay
+    const overlay = document.querySelector('.global-spinning-overlay');
+    if (overlay && overlay.parentNode) {
+        overlay.parentNode.removeChild(overlay);
+    }
+    // Also remove the black bg
+    const blackBg = document.querySelector('.global-spinning-black-bg');
+    if (blackBg && blackBg.parentNode) {
+        blackBg.parentNode.removeChild(blackBg);
+    }
+    currentGlobalTrackSrc = null; // Reset current global track source
+};
+
+// Function to update global background when settings change
+const updateRadiantLyricsGlobalBackground = function(): void {
+    if (settings.spinningCoverEverywhere && currentTrackSrc) {
+        applyGlobalSpinningBackground(currentTrackSrc);
+    } else {
+        cleanUpGlobalSpinningBackground();
+    }
+};
+
+// Make these functions available globally so Settings can call them
 (window as any).updateRadiantLyricsStyles = updateRadiantLyricsStyles;
+(window as any).updateRadiantLyricsGlobalBackground = updateRadiantLyricsGlobalBackground;
 
 const toggleRadiantLyrics = function(): void {
     // Toggle the state first
@@ -338,6 +397,12 @@ const onTrackChanged = function (method: number = 0): void {
         currentTrackSrc = albumImageSrc;
         //trace.msg.log(`Track changed, updating background: ${albumImageSrc}`); - Accidentally left this in Prod... 
         
+        // Apply global spinning background if enabled
+        if (settings.spinningCoverEverywhere && albumImageSrc !== currentGlobalTrackSrc) {
+            currentGlobalTrackSrc = albumImageSrc;
+            applyGlobalSpinningBackground(albumImageSrc);
+        }
+        
         // Setting background to the *="nowPlayingContainer" element
         const nowPlayingContainerElement = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
         if (nowPlayingContainerElement) {
@@ -399,6 +464,9 @@ const cleanUpDynamicArt = function (): void {
         element.remove();
     });
     currentTrackSrc = null; // Reset current track source
+    
+    // Also clean up global spinning backgrounds
+    cleanUpGlobalSpinningBackground();
 };
 
 // Initialize the button creation and observers
@@ -422,9 +490,12 @@ unloads.add(() => {
         unhideButton.parentNode.removeChild(unhideButton);
     }
 
-    // Clean up spin animation
+    // Clean up spin animations
     const spinAnimationStyle = document.querySelector('#spinAnimation');
     if (spinAnimationStyle && spinAnimationStyle.parentNode) {
         spinAnimationStyle.parentNode.removeChild(spinAnimationStyle);
     }
+    
+    // Clean up global spinning backgrounds
+    cleanUpGlobalSpinningBackground();
 });