diff --git a/plugins/radiant-lyrics-luna/src/backdrop-styles.css b/plugins/radiant-lyrics-luna/src/backdrop-styles.css index 86fa12d..097839d 100644 --- a/plugins/radiant-lyrics-luna/src/backdrop-styles.css +++ b/plugins/radiant-lyrics-luna/src/backdrop-styles.css @@ -15,13 +15,13 @@ } /* Hide Tidal now-playing background color */ -[data-test="new-now-playing"] > [class*="_background_"] { +body.rl-backdrop-active [data-test="new-now-playing"] > [class*="_background_"] { /* biome-ignore lint: Must override native album-art-derived background */ display: none !important; } /* Ensure now-playing container is transparent */ -[class*="_nowPlayingContainer"] { +body.rl-backdrop-active [class*="_nowPlayingContainer"] { /* biome-ignore lint: Must override any inline background styles */ background: transparent !important; } diff --git a/plugins/radiant-lyrics-luna/src/cover-everywhere.css b/plugins/radiant-lyrics-luna/src/cover-everywhere.css index c5da420..9005488 100644 --- a/plugins/radiant-lyrics-luna/src/cover-everywhere.css +++ b/plugins/radiant-lyrics-luna/src/cover-everywhere.css @@ -1,6 +1,105 @@ /* Cover-art backdrop container styles */ +/* Stock backdrop projected app wide */ +.rl-stock-background-container { + position: fixed; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + z-index: -3; + pointer-events: none; + overflow: hidden; + background-color: #000; +} + +.rl-stock-rotator { + position: absolute; + left: 50%; + top: 50%; + width: 100vmax; + height: 100vmax; + margin-left: -50vmax; + margin-top: -50vmax; + will-change: transform; + animation: rl-stock-spin 33s linear infinite; +} + +/* Tidal lays 40% of the container & then scales it 4x which is actually kinda smart (i should have thought of this..)*/ +.rl-stock-overscan { + position: absolute; + left: 50%; + top: 50%; + width: 40vmax; + height: 40vmax; + margin-left: -20vmax; + margin-top: -20vmax; + transform: scale(4); +} + +.rl-stock-art { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + object-fit: cover; + filter: blur(28px) saturate(1.3); + transform: scale(1.26); + opacity: 0; + /* Crossfade between the two layers on track change (again.. NOT AUDIO CROSSFADE) */ + transition: opacity 600ms ease; +} + +.rl-stock-art.rl-stock-art-active { + opacity: 1; +} + +.rl-stock-scrim { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + /* Both Tidal gradients */ + background: + radial-gradient( + 120% 100% at 50% 38%, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0.12) 62%, + rgba(0, 0, 0, 0.28) 100% + ), + linear-gradient( + rgba(0, 0, 0, 0.34) 0%, + rgba(0, 0, 0, 0.42) 24%, + rgba(0, 0, 0, 0.5) 45%, + rgba(0, 0, 0, 0.62) 72%, + rgba(0, 0, 0, 0.76) 100% + ); +} + +/* Tidal stops its spin while paused */ +.rl-stock-paused .rl-stock-rotator { + animation-play-state: paused; +} + +@keyframes rl-stock-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: reduce) { + .rl-stock-rotator { + /* biome-ignore lint: Accessibility override needs priority */ + animation: none !important; + } +} + .global-background-container { position: fixed; left: 0; diff --git a/plugins/radiant-lyrics-luna/src/index.ts b/plugins/radiant-lyrics-luna/src/index.ts index 22f9401..fe5276c 100644 --- a/plugins/radiant-lyrics-luna/src/index.ts +++ b/plugins/radiant-lyrics-luna/src/index.ts @@ -727,6 +727,9 @@ const setLayerRunning = ( }; const syncBackdropActivity = (): void => { + // Stock backdrop keeps current (no shader loop) + if (stockContainer) applyStockCoverEverywhere(); + const nowPlaying = kawarpLayers.nowPlaying; const global = kawarpLayers.global; const nowPlayingVisible = nowPlaying?.isVisible() ?? false; @@ -858,10 +861,15 @@ function updateCoverArtBackground(method: number = 0): void { } // Teardown <3 + document.body.classList.toggle("rl-backdrop-active", settings.backdropEnabled); if (!settings.backdropEnabled) { cleanUpDynamicArt(); + // Cover Everywhere still applies (Stock Tidal Backdrop) + if (settings.CoverEverywhere) applyStockCoverEverywhere(); + else cleanUpStockCoverEverywhere(); return; } + cleanUpStockCoverEverywhere(); const coverArtImageSrc = getCoverArtSrc(); if (!coverArtImageSrc) { @@ -875,6 +883,77 @@ function updateCoverArtBackground(method: number = 0): void { syncBackdropActivity(); } +// MARKER: Stock Backdrop (Cover Everywhere without the shader) + +const STOCK_MARKUP = + '