From c369de4f1b8b89d28900dddebc4e13026b5ef1cd Mon Sep 17 00:00:00 2001 From: meowarex Date: Thu, 13 Aug 2026 22:07:09 +1000 Subject: [PATCH] Center Cover Art <3 --- plugins/radiant-lyrics-luna/src/Settings.tsx | 329 +++++++++---------- plugins/radiant-lyrics-luna/src/index.ts | 199 ++++------- plugins/radiant-lyrics-luna/src/styles.css | 45 +-- 3 files changed, 239 insertions(+), 334 deletions(-) diff --git a/plugins/radiant-lyrics-luna/src/Settings.tsx b/plugins/radiant-lyrics-luna/src/Settings.tsx index 9f69b08..17d3abd 100644 --- a/plugins/radiant-lyrics-luna/src/Settings.tsx +++ b/plugins/radiant-lyrics-luna/src/Settings.tsx @@ -6,8 +6,6 @@ declare global { interface Window { updateRadiantLyricsStyles?: () => void; updateRadiantLyricsTextGlow?: () => void; - updateStickyLyricsFeature?: () => void; - updateStickyLyricsSetting?: (checked: boolean) => void; updateRadiantLyricsPlayerBarTint?: () => void; updateRadiantLyricsBackdrop?: () => void; updateQualityProgressColor?: () => void; @@ -31,7 +29,6 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", { bubbledLyrics: true, romanizeLyrics: false, aiSyllables: false, - stickyLyrics: false, syllableStyle: 0, // MARKER: Syllable animations SETTINGS (WIP coming soon) syllableLogging: false, hideUIEnabled: true, @@ -153,14 +150,6 @@ export const Settings = () => { const [tintHoveredColorIndex, setTintHoveredColorIndex] = React.useState< number | null >(null); - const [stickyLyrics, setStickyLyrics] = React.useState(settings.stickyLyrics); - React.useEffect(() => { - window.updateStickyLyricsSetting = (checked: boolean) => - setStickyLyrics(checked); - return () => { - window.updateStickyLyricsSetting = undefined; - }; - }, []); const [lyricsStyle, setLyricsStyle] = React.useState(settings.lyricsStyle); React.useEffect(() => { window.updateLyricsStyleSetting = (value: number) => setLyricsStyle(value); @@ -317,19 +306,7 @@ export const Settings = () => { } }} /> - { - settings.stickyLyrics = checked; - setStickyLyrics(checked); - if (window.updateStickyLyricsFeature) { - window.updateStickyLyricsFeature(); - } - }} - /> - { refreshBackdrop(); }} /> - { - settings.backdropStyle = value; - setBackdropStyle(value); - refreshBackdrop(); - }} - /> - { - settings.backdropPlaybackReactive = checked; - setBackdropPlaybackReactive(checked); - refreshBackdrop(); - }} - /> { refreshBackdrop(); }} /> - { - settings.performanceMode = checked; - setPerformanceMode(checked); - refreshBackdrop(); - }} - /> - { - settings.backdropOpacity = value; - setBackdropOpacity(value); - refreshBackdrop(); - }} - /> - { - settings.backdropWarp = value; - setBackdropWarp(value); - refreshBackdrop(); - }} - /> - { - settings.backdropBlurPasses = value; - setBackdropBlurPasses(value); - refreshBackdrop(); - }} - /> - { - settings.backdropSpeed = value; - setBackdropSpeed(value); - refreshBackdrop(); - }} - /> - { - settings.backdropContrast = value; - setBackdropContrast(value); - refreshBackdrop(); - }} - /> - { - settings.backdropDarken = value; - setBackdropDarken(value); - refreshBackdrop(); - }} - /> - { - settings.backdropSaturation = value; - setBackdropSaturation(value); - refreshBackdrop(); - }} - /> - { - settings.backdropScale = value; - setBackdropScale(value); - refreshBackdrop(); - }} - /> - { - settings.backdropDithering = value; - setBackdropDithering(value); - refreshBackdrop(); - }} - /> + {backdropEnabled && ( + <> + { + settings.backdropStyle = value; + setBackdropStyle(value); + refreshBackdrop(); + }} + /> + { + settings.backdropPlaybackReactive = checked; + setBackdropPlaybackReactive(checked); + refreshBackdrop(); + }} + /> + { + settings.performanceMode = checked; + setPerformanceMode(checked); + refreshBackdrop(); + }} + /> + { + settings.backdropOpacity = value; + setBackdropOpacity(value); + refreshBackdrop(); + }} + /> + { + settings.backdropWarp = value; + setBackdropWarp(value); + refreshBackdrop(); + }} + /> + { + settings.backdropBlurPasses = value; + setBackdropBlurPasses(value); + refreshBackdrop(); + }} + /> + { + settings.backdropSpeed = value; + setBackdropSpeed(value); + refreshBackdrop(); + }} + /> + { + settings.backdropContrast = value; + setBackdropContrast(value); + refreshBackdrop(); + }} + /> + { + settings.backdropDarken = value; + setBackdropDarken(value); + refreshBackdrop(); + }} + /> + { + settings.backdropSaturation = value; + setBackdropSaturation(value); + refreshBackdrop(); + }} + /> + { + settings.backdropScale = value; + setBackdropScale(value); + refreshBackdrop(); + }} + /> + { + settings.backdropDithering = value; + setBackdropDithering(value); + refreshBackdrop(); + }} + /> + + )} ); }; diff --git a/plugins/radiant-lyrics-luna/src/index.ts b/plugins/radiant-lyrics-luna/src/index.ts index fe5276c..2e5ab62 100644 --- a/plugins/radiant-lyrics-luna/src/index.ts +++ b/plugins/radiant-lyrics-luna/src/index.ts @@ -187,6 +187,11 @@ const applyPlayerBarTintToElement = (): void => { footerPlayer.style.removeProperty("left"); footerPlayer.style.removeProperty("width"); } + // Now Playing centres its artwork in a row running to the viewport bottom but the player bar overlays it so i do some complicaated thing to reserve the space <3 + document.documentElement.style.setProperty( + "--rl-player-bar-inset", + `${Math.round(footerPlayer.getBoundingClientRect().height) + (settings.floatingPlayerBar ? settings.playerBarSpacing : 0)}px`, + ); applyIntegratedSeekbarChrome(); }; @@ -1089,9 +1094,9 @@ unloads.add(() => { if (btn?.parentNode) btn.parentNode.removeChild(btn); } - // Clean up sticky lyrics elements + // Clean up lyrics menu elements document - .querySelectorAll(".sticky-lyrics-trigger, .sticky-lyrics-dropdown") + .querySelectorAll(".rl-lyrics-menu-trigger, .rl-lyrics-menu") .forEach((el) => { el.remove(); }); @@ -1100,17 +1105,17 @@ unloads.add(() => { cleanUpDynamicArt(); }); -// MARKER: Sticky Lyrics Feature +// MARKER: Lyrics Menu (dropdown on the lyrics toggle) -const STICKY_ICON = +const LYRICS_MENU_ICON = ''; -const applyStickyIcon = (): void => { +const applyLyricsMenuIcon = (): void => { const trigger = document.querySelector( - ".sticky-lyrics-trigger", + ".rl-lyrics-menu-trigger", ) as HTMLElement; if (!trigger) return; - trigger.innerHTML = STICKY_ICON; + trigger.innerHTML = LYRICS_MENU_ICON; trigger.style.paddingLeft = "5px"; }; @@ -1154,31 +1159,22 @@ const sylTrace = (...args: unknown[]) => { }, }; -// Called from Settings (mirrors dropdown checkbox) -const updateStickyLyricsFeature = (): void => { - const checkbox = document.querySelector( - 'input[data-setting="stickyLyrics"]', - ) as HTMLInputElement; - if (checkbox) checkbox.checked = settings.stickyLyrics; -}; -(window as any).updateStickyLyricsFeature = updateStickyLyricsFeature; - -let stickyDropdownEl: HTMLElement | null = null; -let stickyDropdownOpen = false; +let lyricsMenuEl: HTMLElement | null = null; +let lyricsMenuOpen = false; const positionDropdown = (): void => { - if (!stickyDropdownEl) return; + if (!lyricsMenuEl) return; const toggle = document.querySelector('[data-test="toggle-lyrics"]') as HTMLElement; if (!toggle) return; const rect = toggle.getBoundingClientRect(); - stickyDropdownEl.style.top = `${rect.bottom}px`; - stickyDropdownEl.style.left = `${rect.left}px`; - stickyDropdownEl.style.width = `${rect.width}px`; - stickyDropdownEl.style.display = "block"; + lyricsMenuEl.style.top = `${rect.bottom}px`; + lyricsMenuEl.style.left = `${rect.left}px`; + lyricsMenuEl.style.width = `${rect.width}px`; + lyricsMenuEl.style.display = "block"; }; -const openStickyDropdown = (toggle: HTMLElement): void => { - stickyDropdownOpen = true; +const openLyricsMenu = (toggle: HTMLElement): void => { + lyricsMenuOpen = true; document.body.classList.add("rl-dropdown-open"); let positioned = false; const onWidened = (e: TransitionEvent) => { @@ -1199,41 +1195,35 @@ const openStickyDropdown = (toggle: HTMLElement): void => { }, 200); }; -const closeStickyDropdown = (): void => { - stickyDropdownOpen = false; +const closeLyricsMenu = (): void => { + lyricsMenuOpen = false; document.body.classList.remove("rl-dropdown-open"); - if (stickyDropdownEl) stickyDropdownEl.style.display = "none"; + if (lyricsMenuEl) lyricsMenuEl.style.display = "none"; }; -const ensureStickyDropdown = (): HTMLElement => { - if (stickyDropdownEl) return stickyDropdownEl; +const ensureLyricsMenu = (): HTMLElement => { + if (lyricsMenuEl) return lyricsMenuEl; const dropdown = document.createElement("div"); - dropdown.className = "sticky-lyrics-dropdown"; + dropdown.className = "rl-lyrics-menu"; dropdown.style.display = "none"; dropdown.innerHTML = ` -
- Sticky Lyrics - -
- Romanization -