diff --git a/plugins/radiant-lyrics-luna/src/cover-everywhere.css b/plugins/radiant-lyrics-luna/src/cover-everywhere.css index 9817156..e30547f 100644 --- a/plugins/radiant-lyrics-luna/src/cover-everywhere.css +++ b/plugins/radiant-lyrics-luna/src/cover-everywhere.css @@ -20,9 +20,10 @@ height: 150vh; object-fit: cover; z-index: -1; - filter: blur(100px) brightness(0.4) contrast(1.2) saturate(1); + filter: blur(80px) brightness(0.4) contrast(1.2) saturate(1); opacity: 1; animation: spinGlobal 45s linear infinite; + will-change: transform, filter; } @keyframes spinGlobal { diff --git a/plugins/radiant-lyrics-luna/src/index.ts b/plugins/radiant-lyrics-luna/src/index.ts index e538342..e12ebf1 100644 --- a/plugins/radiant-lyrics-luna/src/index.ts +++ b/plugins/radiant-lyrics-luna/src/index.ts @@ -21,8 +21,7 @@ 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); +let globalSpinningBgStyleTag: StyleTag | null = null; // Apply lyrics glow styles if enabled if (settings.lyricsGlowEnabled) { @@ -75,9 +74,24 @@ const updateRadiantLyricsStyles = function(): void { // 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 (!settings.spinningCoverEverywhere) { + // Remove StyleTag and all background elements + if (globalSpinningBgStyleTag) { + globalSpinningBgStyleTag.remove(); + globalSpinningBgStyleTag = null; + } + if (appContainer) { + appContainer.querySelectorAll('.global-spinning-image, .global-spinning-black-bg').forEach(el => el.remove()); + } + return; + } + + // Add StyleTag if not present + if (!globalSpinningBgStyleTag) { + globalSpinningBgStyleTag = new StyleTag("RadiantLyrics-global-spinning-bg", unloads, coverEverywhereCss); + } + if (!appContainer) return; // Remove any existing background elements @@ -88,14 +102,12 @@ const applyGlobalSpinningBackground = (albumImageSrc: string): void => { 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); - } + // Add one spinning image for performance + 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