From 813c9246a1b05efa6c6dac259c8f52416d5c5ee0 Mon Sep 17 00:00:00 2001 From: n0201 Date: Wed, 11 Jun 2025 13:08:24 +0200 Subject: [PATCH 1/3] add a spinning are cover toggle --- plugins/radiant-lyrics-luna/src/Settings.tsx | 17 ++++++++++++++ plugins/radiant-lyrics-luna/src/index.ts | 24 ++++++++++++++++++-- 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/plugins/radiant-lyrics-luna/src/Settings.tsx b/plugins/radiant-lyrics-luna/src/Settings.tsx index b0029ef..73481d5 100644 --- a/plugins/radiant-lyrics-luna/src/Settings.tsx +++ b/plugins/radiant-lyrics-luna/src/Settings.tsx @@ -8,6 +8,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", { lyricsGlowEnabled: true, spinningCoverEverywhere: false, performanceMode: false, + noSpinningArt: 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 [noSpinningArt, setNoSpinningArt] = React.useState(settings.noSpinningArt); const [backgroundContrast, setBackgroundContrast] = React.useState(settings.backgroundContrast); const [backgroundBlur, setBackgroundBlur] = React.useState(settings.backgroundBlur); const [backgroundBrightness, setBackgroundBrightness] = React.useState(settings.backgroundBrightness); @@ -91,6 +93,21 @@ export const Settings = () => { } }} /> + { + 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(); + } + }} + /> { 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)}%)`; - globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`; + if (!settings.noSpinningArt) { + globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`; + } + else { + globalBackgroundImage.style.animation = 'none'; + } globalBackgroundImage.classList.remove('performance-mode-static'); globalBackgroundImage.style.willChange = 'transform'; } else { @@ -210,7 +215,12 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => { globalBackgroundImage.style.width = '150vw'; globalBackgroundImage.style.height = '150vh'; globalBackgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`; - globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`; + if (!settings.noSpinningArt) { + globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`; + } + else { + globalBackgroundImage.style.animation = 'none'; + } globalBackgroundImage.classList.remove('performance-mode-static'); globalBackgroundImage.style.willChange = 'transform'; } @@ -281,11 +291,21 @@ 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.noSpinningArt) { imgElement.style.animation = `spin ${spinSpeed}s linear infinite`; + } + else { + imgElement.style.animation = 'none'; + } imgElement.classList.remove('performance-mode-static'); imgElement.style.willChange = 'transform'; } else { + if (!settings.noSpinningArt) { imgElement.style.animation = `spin ${spinSpeed}s linear infinite`; + } + else { + imgElement.style.animation = 'none'; + } imgElement.classList.remove('performance-mode-static'); imgElement.style.willChange = 'transform'; } From 8ae144bc6530403c1d5778f299eb7f8dcdb1c796 Mon Sep 17 00:00:00 2001 From: meowarex Date: Wed, 11 Jun 2025 22:33:28 +1000 Subject: [PATCH 2/3] Fix Song Change Issue --- plugins/radiant-lyrics-luna/src/Settings.tsx | 14 +++++++------- plugins/radiant-lyrics-luna/src/index.ts | 18 +++++++++++------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/plugins/radiant-lyrics-luna/src/Settings.tsx b/plugins/radiant-lyrics-luna/src/Settings.tsx index 73481d5..24e2ef5 100644 --- a/plugins/radiant-lyrics-luna/src/Settings.tsx +++ b/plugins/radiant-lyrics-luna/src/Settings.tsx @@ -8,7 +8,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", { lyricsGlowEnabled: true, spinningCoverEverywhere: false, performanceMode: false, - noSpinningArt: false, + spinningArtEnabled: true, backgroundContrast: 120, backgroundBlur: 80, backgroundBrightness: 40, @@ -22,7 +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 [noSpinningArt, setNoSpinningArt] = React.useState(settings.noSpinningArt); + 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); @@ -79,7 +79,7 @@ export const Settings = () => { /> { console.log("Performance Mode:", checked ? "enabled" : "disabled"); @@ -94,12 +94,12 @@ export const Settings = () => { }} /> { - console.log("No Spinning Art:", checked ? "enabled" : "disabled"); - setNoSpinningArt((settings.noSpinningArt = checked)); + console.log("Disable Cover Spin:", checked ? "enabled" : "disabled"); + setSpinningArtEnabled((settings.spinningArtEnabled = !checked)); if ((window as any).updateRadiantLyricsGlobalBackground) { (window as any).updateRadiantLyricsGlobalBackground(); } diff --git a/plugins/radiant-lyrics-luna/src/index.ts b/plugins/radiant-lyrics-luna/src/index.ts index 21f573b..6cb4257 100644 --- a/plugins/radiant-lyrics-luna/src/index.ts +++ b/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,7 +202,7 @@ 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.noSpinningArt) { + if (settings.spinningArtEnabled) { globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`; } else { @@ -215,7 +215,7 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => { globalBackgroundImage.style.width = '150vw'; globalBackgroundImage.style.height = '150vh'; globalBackgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`; - if (!settings.noSpinningArt) { + if (settings.spinningArtEnabled) { globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`; } else { @@ -291,7 +291,7 @@ 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.noSpinningArt) { + if (settings.spinningArtEnabled) { imgElement.style.animation = `spin ${spinSpeed}s linear infinite`; } else { @@ -300,7 +300,7 @@ const updateRadiantLyricsNowPlayingBackground = function(): void { imgElement.classList.remove('performance-mode-static'); imgElement.style.willChange = 'transform'; } else { - if (!settings.noSpinningArt) { + if (settings.spinningArtEnabled) { imgElement.style.animation = `spin ${spinSpeed}s linear infinite`; } else { @@ -751,7 +751,9 @@ 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}%)`; - nowPlayingBackgroundImage.style.animation = `spin ${settings.spinSpeed}s linear infinite`; + nowPlayingBackgroundImage.style.animation = settings.spinningArtEnabled + ? `spin ${settings.spinSpeed}s linear infinite` + : 'none'; nowPlayingBackgroundImage.classList.remove('performance-mode-static'); nowPlayingBackgroundImage.style.willChange = 'transform'; } else { @@ -759,7 +761,9 @@ const updateCoverArtBackground = function (method: number = 0): void { nowPlayingBackgroundImage.style.width = '90vw'; nowPlayingBackgroundImage.style.height = '90vh'; nowPlayingBackgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`; - nowPlayingBackgroundImage.style.animation = `spin ${settings.spinSpeed}s linear infinite`; + nowPlayingBackgroundImage.style.animation = settings.spinningArtEnabled + ? `spin ${settings.spinSpeed}s linear infinite` + : 'none'; nowPlayingBackgroundImage.classList.remove('performance-mode-static'); nowPlayingBackgroundImage.style.willChange = 'transform'; } From 95e13ada7b75004580fe57a62f162d84ae678ddd Mon Sep 17 00:00:00 2001 From: meowarex Date: Wed, 11 Jun 2025 22:57:57 +1000 Subject: [PATCH 3/3] Fix GPU Memory Locks --- plugins/radiant-lyrics-luna/src/Settings.tsx | 4 +-- plugins/radiant-lyrics-luna/src/index.ts | 34 +++++++++++++------- 2 files changed, 24 insertions(+), 14 deletions(-) diff --git a/plugins/radiant-lyrics-luna/src/Settings.tsx b/plugins/radiant-lyrics-luna/src/Settings.tsx index 24e2ef5..7e09b6f 100644 --- a/plugins/radiant-lyrics-luna/src/Settings.tsx +++ b/plugins/radiant-lyrics-luna/src/Settings.tsx @@ -8,7 +8,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", { lyricsGlowEnabled: true, spinningCoverEverywhere: false, performanceMode: false, - spinningArtEnabled: true, + spinningArtEnabled: false, backgroundContrast: 120, backgroundBlur: 80, backgroundBrightness: 40, @@ -98,7 +98,7 @@ export const Settings = () => { desc="Disable the spinning cover art background animation" checked={!spinningArtEnabled} onChange={(_, checked: boolean) => { - console.log("Disable Cover Spin:", checked ? "enabled" : "disabled"); + console.log("Disable Cover Spin:", checked ? "disabled" : "enabled"); setSpinningArtEnabled((settings.spinningArtEnabled = !checked)); if ((window as any).updateRadiantLyricsGlobalBackground) { (window as any).updateRadiantLyricsGlobalBackground(); diff --git a/plugins/radiant-lyrics-luna/src/index.ts b/plugins/radiant-lyrics-luna/src/index.ts index 6cb4257..8ad58b4 100644 --- a/plugins/radiant-lyrics-luna/src/index.ts +++ b/plugins/radiant-lyrics-luna/src/index.ts @@ -204,12 +204,13 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => { 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.style.willChange = 'transform'; } else { globalBackgroundImage.style.animation = 'none'; + globalBackgroundImage.style.willChange = 'auto'; } globalBackgroundImage.classList.remove('performance-mode-static'); - globalBackgroundImage.style.willChange = 'transform'; } else { // Normal mode globalBackgroundImage.style.width = '150vw'; @@ -217,12 +218,13 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => { 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.style.willChange = 'transform'; } else { globalBackgroundImage.style.animation = 'none'; + globalBackgroundImage.style.willChange = 'auto'; } globalBackgroundImage.classList.remove('performance-mode-static'); - globalBackgroundImage.style.willChange = 'transform'; } } }; @@ -293,21 +295,23 @@ const updateRadiantLyricsNowPlayingBackground = function(): void { contrast = Math.min(contrast, 150); if (settings.spinningArtEnabled) { imgElement.style.animation = `spin ${spinSpeed}s linear infinite`; + imgElement.style.willChange = 'transform'; } else { imgElement.style.animation = 'none'; + imgElement.style.willChange = 'auto'; } imgElement.classList.remove('performance-mode-static'); - imgElement.style.willChange = 'transform'; } else { if (settings.spinningArtEnabled) { imgElement.style.animation = `spin ${spinSpeed}s linear infinite`; + imgElement.style.willChange = 'transform'; } else { imgElement.style.animation = 'none'; + imgElement.style.willChange = 'auto'; } imgElement.classList.remove('performance-mode-static'); - imgElement.style.willChange = 'transform'; } imgElement.style.filter = `blur(${blur}px) brightness(${brightness / 100}) contrast(${contrast}%)`; @@ -751,21 +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}%)`; - nowPlayingBackgroundImage.style.animation = settings.spinningArtEnabled - ? `spin ${settings.spinSpeed}s linear infinite` - : 'none'; + if (settings.spinningArtEnabled) { + nowPlayingBackgroundImage.style.animation = `spin ${settings.spinSpeed}s linear infinite`; + nowPlayingBackgroundImage.style.willChange = 'transform'; + } else { + nowPlayingBackgroundImage.style.animation = 'none'; + nowPlayingBackgroundImage.style.willChange = 'auto'; + } nowPlayingBackgroundImage.classList.remove('performance-mode-static'); - nowPlayingBackgroundImage.style.willChange = 'transform'; } 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}%)`; - nowPlayingBackgroundImage.style.animation = settings.spinningArtEnabled - ? `spin ${settings.spinSpeed}s linear infinite` - : 'none'; + if (settings.spinningArtEnabled) { + nowPlayingBackgroundImage.style.animation = `spin ${settings.spinSpeed}s linear infinite`; + nowPlayingBackgroundImage.style.willChange = 'transform'; + } else { + nowPlayingBackgroundImage.style.animation = 'none'; + nowPlayingBackgroundImage.style.willChange = 'auto'; + } nowPlayingBackgroundImage.classList.remove('performance-mode-static'); - nowPlayingBackgroundImage.style.willChange = 'transform'; } }