diff --git a/plugins/radiant-lyrics-luna/src/Settings.tsx b/plugins/radiant-lyrics-luna/src/Settings.tsx index 07c5aeb..9f69b08 100644 --- a/plugins/radiant-lyrics-luna/src/Settings.tsx +++ b/plugins/radiant-lyrics-luna/src/Settings.tsx @@ -49,6 +49,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", { playerBarTintCustomColors: [] as string[], // Master switch backdropEnabled: true, + backdropStyle: 0, backdropPlaybackReactive: true, CoverEverywhere: true, performanceMode: false, @@ -82,6 +83,9 @@ export const Settings = () => { const [backdropEnabled, setBackdropEnabled] = React.useState( settings.backdropEnabled, ); + const [backdropStyle, setBackdropStyle] = React.useState( + settings.backdropStyle, + ); const [backdropPlaybackReactive, setBackdropPlaybackReactive] = React.useState(settings.backdropPlaybackReactive); const [performanceMode, setPerformanceMode] = React.useState( @@ -922,6 +926,19 @@ export const Settings = () => { refreshBackdrop(); }} /> + { + settings.backdropStyle = value; + setBackdropStyle(value); + refreshBackdrop(); + }} + /> [class*="_background_"] { + /* biome-ignore lint: Must override native album-art-derived background */ + display: none !important; +} + +/* Ensure now-playing container is transparent */ +[class*="_nowPlayingContainer"] { + /* biome-ignore lint: Must override any inline background styles */ + background: transparent !important; +} + +.now-playing-background-container { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 0; + pointer-events: none; + overflow: hidden; + background: #000; + transform: translateZ(0); + backface-visibility: hidden; +} + +/* now-playing renders above the backdrop */ +[data-test="new-now-playing"] > header, +[data-test="new-now-playing"] > [class*="_content_"] { + position: relative; + z-index: 1; +} + /* engine animates on RAF loop*/ @media (prefers-reduced-motion: reduce) { .rl-kawarp-canvas { diff --git a/plugins/radiant-lyrics-luna/src/backdrop.ts b/plugins/radiant-lyrics-luna/src/backdrop.ts index 74a8b26..dd339da 100644 --- a/plugins/radiant-lyrics-luna/src/backdrop.ts +++ b/plugins/radiant-lyrics-luna/src/backdrop.ts @@ -164,7 +164,11 @@ export class KawarpLayer { const dpr = getDpr(); const rect = this.host.getBoundingClientRect(); const width = Math.max(1, Math.round(rect.width * dpr)); - const height = Math.max(1, Math.round(rect.height * dpr)); + // Aurora: render a single row of pixels and let CSS stretch it down the whole canvas (makes bands of color) + const height = + settings.backdropStyle === 1 + ? 1 + : Math.max(1, Math.round(rect.height * dpr)); if (this.canvas.width === width && this.canvas.height === height) return; this.canvas.width = width; this.canvas.height = height; diff --git a/plugins/radiant-lyrics-luna/src/cover-everywhere.css b/plugins/radiant-lyrics-luna/src/cover-everywhere.css index 2d3935c..c5da420 100644 --- a/plugins/radiant-lyrics-luna/src/cover-everywhere.css +++ b/plugins/radiant-lyrics-luna/src/cover-everywhere.css @@ -16,39 +16,6 @@ backface-visibility: hidden; } -/* Hide Tidal's native now-playing background color overlay */ -[data-test="new-now-playing"] > [class*="_background_"] { - /* biome-ignore lint: Must override native album-art-derived background */ - display: none !important; -} - -/* Ensure the now-playing container itself is transparent */ -[class*="_nowPlayingContainer"] { - /* biome-ignore lint: Must override any inline background styles */ - background: transparent !important; -} - -.now-playing-background-container { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 0; - pointer-events: none; - overflow: hidden; - background: #000; - transform: translateZ(0); - backface-visibility: hidden; -} - -/* now-playing renders above the backdrop */ -[data-test="new-now-playing"] > header, -[data-test="new-now-playing"] > [class*="_content_"] { - position: relative; - z-index: 1; -} - /* Make app chrome transparent for cover-everywhere background */ body, #wimp,