diff --git a/plugins/radiant-lyrics-luna/src/index.ts b/plugins/radiant-lyrics-luna/src/index.ts index 4ef5493..8c6f7ed 100644 --- a/plugins/radiant-lyrics-luna/src/index.ts +++ b/plugins/radiant-lyrics-luna/src/index.ts @@ -29,6 +29,7 @@ if (settings.lyricsGlowEnabled) { } var isHidden = false; +let unhideButtonAutoFadeTimeout: number | null = null; const updateButtonStates = function(): void { const hideButton = document.querySelector('.hide-ui-button') as HTMLElement; @@ -52,21 +53,36 @@ const updateButtonStates = function(): void { } } if (unhideButton) { + // Clear any existing auto-fade timeout + if (unhideButtonAutoFadeTimeout) { + window.clearTimeout(unhideButtonAutoFadeTimeout); + unhideButtonAutoFadeTimeout = null; + } + if (settings.hideUIEnabled && isHidden) { unhideButton.style.display = 'flex'; // Remove the hide-immediately class and let it fade in smoothly unhideButton.classList.remove('hide-immediately'); + unhideButton.classList.remove('auto-faded'); // Small delay to ensure display is set first, then fade in - (Works for unhide button.. but not hide button.. because uhh idk) setTimeout(() => { unhideButton.style.opacity = '1'; unhideButton.style.visibility = 'visible'; unhideButton.style.pointerEvents = 'auto'; + + // Set up auto-fade after 2 seconds + unhideButtonAutoFadeTimeout = window.setTimeout(() => { + if (isHidden && unhideButton && !unhideButton.matches(':hover')) { + unhideButton.classList.add('auto-faded'); + } + }, 2000); }, 50); } else { // Smooth fade out for Unhide UI button unhideButton.style.opacity = '0'; unhideButton.style.visibility = 'hidden'; unhideButton.style.pointerEvents = 'none'; + unhideButton.classList.remove('auto-faded'); // Keep display: flex to maintain transitions, then hide after fade setTimeout(() => { if (unhideButton.style.opacity === '0') { @@ -397,15 +413,22 @@ const createUnhideUIButton = function(): void { pointer-events: none; `; - // Add hover effect + // Add hover effect with auto-fade handling unhideUIButton.addEventListener('mouseenter', () => { unhideUIButton.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; unhideUIButton.style.transform = 'scale(1.05)'; + unhideUIButton.classList.remove('auto-faded'); }); unhideUIButton.addEventListener('mouseleave', () => { unhideUIButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; unhideUIButton.style.transform = 'scale(1)'; + // Re-add auto-fade after a short delay if still in hidden mode + window.setTimeout(() => { + if (isHidden && !unhideUIButton.matches(':hover')) { + unhideUIButton.classList.add('auto-faded'); + } + }, 2000); }); unhideUIButton.onclick = toggleRadiantLyrics; @@ -628,6 +651,12 @@ updateCoverArtBackground(1); unloads.add(() => { cleanUpDynamicArt(); + // Clean up auto-fade timeout + if (unhideButtonAutoFadeTimeout) { + window.clearTimeout(unhideButtonAutoFadeTimeout); + unhideButtonAutoFadeTimeout = null; + } + // Clean up our custom buttons const hideButton = document.querySelector('.hide-ui-button'); if (hideButton && hideButton.parentNode) { diff --git a/plugins/radiant-lyrics-luna/src/styles.css b/plugins/radiant-lyrics-luna/src/styles.css index 4de0de9..4f260d4 100644 --- a/plugins/radiant-lyrics-luna/src/styles.css +++ b/plugins/radiant-lyrics-luna/src/styles.css @@ -199,4 +199,26 @@ figure[class*="_albumImage"] { /* Hide UI button base styling - just the transition */ .hide-ui-button { transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-in-out !important; +} + +/* Auto-fade styling for unhide button - (Keeps Text Visible, just not full opacity) | Cheers @Zyhn for the idea*/ +.unhide-ui-button.auto-faded { + background-color: transparent !important; + border-color: transparent !important; + box-shadow: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + color: rgba(255, 255, 255, 0.8) !important; + transition: background-color 0.8s ease-in-out, border-color 0.8s ease-in-out, box-shadow 0.8s ease-in-out, backdrop-filter 0.8s ease-in-out, color 0.8s ease-in-out; +} + +/* Restore button styling on hover */ +.unhide-ui-button.auto-faded:hover { + background-color: rgba(255, 255, 255, 0.2) !important; + border-color: rgba(255, 255, 255, 0.3) !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + color: white !important; + transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, color 0.3s ease-in-out; } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b7ce287..6d26244 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,12 +39,12 @@ importers: specifier: ^5.8.3 version: 5.8.3 - plugins/clean-view-luna: {} - plugins/copy-lyrics-luna: {} plugins/oled-theme-luna: {} + plugins/radiant-lyrics-luna: {} + packages: '@esbuild/aix-ppc64@0.25.5':