diff --git a/plugins/radiant-lyrics-luna/src/index.ts b/plugins/radiant-lyrics-luna/src/index.ts index f5300c3..63fda73 100644 --- a/plugins/radiant-lyrics-luna/src/index.ts +++ b/plugins/radiant-lyrics-luna/src/index.ts @@ -39,14 +39,18 @@ const updateButtonStates = function(): void { } if (unhideButton) { unhideButton.style.display = (settings.hideUIEnabled && isHidden) ? 'flex' : 'none'; + // Remove the immediate hide class when button should be visible + if (settings.hideUIEnabled && isHidden) { + unhideButton.classList.remove('hide-immediately'); + } } }; // Function to update styles when settings change const updateRadiantLyricsStyles = function(): void { if (isHidden) { - // Apply all clean view styles - lyricsStyleTag.css = separatedLyrics; + // Apply only base styles (button hiding), NOT separated lyrics styles + // to avoid affecting lyrics scrolling behavior baseStyleTag.css = baseStyles; // Apply player bar styles based on setting @@ -57,9 +61,9 @@ const updateRadiantLyricsStyles = function(): void { } } - // Update lyrics glow based on setting + // Update lyrics glow based on setting (only if UI is not hidden to avoid interference) const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]'); - if (lyricsContainer) { + if (lyricsContainer && !isHidden) { if (settings.lyricsGlowEnabled) { lyricsContainer.classList.remove('lyrics-glow-disabled'); lyricsGlowStyleTag.css = lyricsGlow; @@ -189,20 +193,19 @@ const updateRadiantLyricsNowPlayingBackground = function(): void { (window as any).updateRadiantLyricsNowPlayingBackground = updateRadiantLyricsNowPlayingBackground; const toggleRadiantLyrics = function(): void { - // Toggle the state first - isHidden = !isHidden; - const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement; if (isHidden) { - // Apply clean view styles - updateRadiantLyricsStyles(); - // Add a class to the container to trigger CSS animations - if (nowPlayingContainer) { - nowPlayingContainer.classList.add('radiant-lyrics-ui-hidden'); + // We're currently hidden, so we're about to show UI + // Add a class to immediately hide the unhide button with CSS + const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement; + if (unhideButton) { + unhideButton.classList.add('hide-immediately'); } - document.body.classList.add('radiant-lyrics-ui-hidden'); - } else { + + // Toggle the state + isHidden = !isHidden; + // Don't remove StyleTags completely, just remove the class to show elements again if (nowPlayingContainer) { nowPlayingContainer.classList.remove('radiant-lyrics-ui-hidden'); @@ -216,8 +219,25 @@ const toggleRadiantLyrics = function(): void { playerBarStyleTag.remove(); } }, 500); // Wait for fade animation to complete + + // Update button states normally + updateButtonStates(); + } else { + // We're currently visible, so we're about to hide UI + // Toggle the state first + isHidden = !isHidden; + + // Apply clean view styles + updateRadiantLyricsStyles(); + // Add a class to the container to trigger CSS animations + if (nowPlayingContainer) { + nowPlayingContainer.classList.add('radiant-lyrics-ui-hidden'); + } + document.body.classList.add('radiant-lyrics-ui-hidden'); + + // Update button states immediately for hiding + updateButtonStates(); } - updateButtonStates(); }; const createHideUIButton = function(): void { @@ -309,8 +329,8 @@ const createUnhideUIButton = function(): void { // Style for top-right positioning within the Now Playing container (with safe margin) unhideUIButton.style.cssText = ` position: absolute; - top: 20px; - right: 80px; + top: 10px; + right: 10px; background-color: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.3); diff --git a/plugins/radiant-lyrics-luna/src/separated-lyrics.css b/plugins/radiant-lyrics-luna/src/separated-lyrics.css index 94d43b9..159ca7e 100644 --- a/plugins/radiant-lyrics-luna/src/separated-lyrics.css +++ b/plugins/radiant-lyrics-luna/src/separated-lyrics.css @@ -40,19 +40,11 @@ transition: opacity 0.4s ease-in-out; } -/* Hide bottom gradient - only when UI is hidden */ -.radiant-lyrics-ui-hidden [class^="_bottomGradient"] { - opacity: 0 !important; - transition: opacity 0.4s ease-in-out; -} +/* Keep bottom gradient visible - may be needed for lyrics scrolling */ /* Remove credits button repositioning - let it stay where it is */ -/* Hide lyrics provider - only when UI is hidden */ -.radiant-lyrics-ui-hidden [class^="_lyricsProvider"] { - opacity: 0 !important; - transition: opacity 0.4s ease-in-out; -} +/* Keep lyrics provider visible - don't hide with UI */ /* Sync button margin */ [class^="_syncButton"] { diff --git a/plugins/radiant-lyrics-luna/src/styles.css b/plugins/radiant-lyrics-luna/src/styles.css index 69fd4f3..876b480 100644 --- a/plugins/radiant-lyrics-luna/src/styles.css +++ b/plugins/radiant-lyrics-luna/src/styles.css @@ -36,6 +36,14 @@ /* Remove all layout-changing rules - only fade buttons, keep everything else in place */ +/* Immediate hide class for unhide button */ +.hide-immediately { + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; + transition: none !important; +} + [class^="_bar"] { background-color: transparent; }