From 9c96000dc1b0026240b3f5bfbc6f6d9b948cad24 Mon Sep 17 00:00:00 2001 From: meowarex Date: Fri, 6 Jun 2025 00:40:45 +1000 Subject: [PATCH] Reworked UI Shift Movement --- plugins/radiant-lyrics-luna/src/index.ts | 103 +++++++++------- plugins/radiant-lyrics-luna/src/styles.css | 134 +++++++++++++-------- 2 files changed, 146 insertions(+), 91 deletions(-) diff --git a/plugins/radiant-lyrics-luna/src/index.ts b/plugins/radiant-lyrics-luna/src/index.ts index 655ad71..78e7826 100644 --- a/plugins/radiant-lyrics-luna/src/index.ts +++ b/plugins/radiant-lyrics-luna/src/index.ts @@ -37,36 +37,37 @@ const updateButtonStates = function(): void { if (hideButton) { if (settings.hideUIEnabled && !isHidden) { hideButton.style.display = 'flex'; - hideButton.style.opacity = '1'; - hideButton.style.visibility = 'visible'; - hideButton.style.pointerEvents = 'auto'; + // Small delay to ensure display is set first, then fade in + setTimeout(() => { + hideButton.style.opacity = '1'; + hideButton.style.visibility = 'visible'; + hideButton.style.pointerEvents = 'auto'; + }, 50); } else { + // Hide UI button immediately when clicked - no fade animation + hideButton.style.display = 'none'; hideButton.style.opacity = '0'; hideButton.style.visibility = 'hidden'; hideButton.style.pointerEvents = 'none'; - // Keep display: flex to maintain transitions - setTimeout(() => { - if (hideButton.style.opacity === '0') { - hideButton.style.display = 'none'; - } - }, 500); // Wait for transition to complete } } if (unhideButton) { if (settings.hideUIEnabled && isHidden) { unhideButton.style.display = 'flex'; - // Remove the hide-immediately class and let it fade in + // Remove the hide-immediately class and let it fade in smoothly unhideButton.classList.remove('hide-immediately'); + // Small delay to ensure display is set first, then fade in setTimeout(() => { unhideButton.style.opacity = '1'; unhideButton.style.visibility = 'visible'; unhideButton.style.pointerEvents = 'auto'; - }, 50); // Small delay to ensure display is set first + }, 50); } else { + // Smooth fade out for Unhide UI button unhideButton.style.opacity = '0'; unhideButton.style.visibility = 'hidden'; unhideButton.style.pointerEvents = 'none'; - // Keep display: flex to maintain transitions + // Keep display: flex to maintain transitions, then hide after fade setTimeout(() => { if (unhideButton.style.opacity === '0') { unhideButton.style.display = 'none'; @@ -257,16 +258,19 @@ const toggleRadiantLyrics = function(): void { // 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 + // Update button states immediately to start Hide UI button fade-out updateButtonStates(); + + // Delay adding the CSS class to allow Hide UI button to fade out first + setTimeout(() => { + // 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'); + }, 50); // Small delay to let Hide UI button start its fade transition } }; @@ -296,26 +300,24 @@ const createHideUIButton = function(): void { hideUIButton.textContent = 'Hide UI'; // Style to match Tidal's buttons - hideUIButton.style.cssText = ` - background-color: var(--wave-color-solid-accent-fill); - color: black; - border: none; - border-radius: 12px; - height: 40px; - padding: 0 12px; - margin-left: 8px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.5s ease-in-out; - font-size: 12px; - font-weight: 600; - white-space: nowrap; - opacity: 1; - visibility: visible; - pointer-events: auto; - `; + hideUIButton.style.backgroundColor = 'var(--wave-color-solid-accent-fill)'; + hideUIButton.style.color = 'black'; + hideUIButton.style.border = 'none'; + hideUIButton.style.borderRadius = '12px'; + hideUIButton.style.height = '40px'; + hideUIButton.style.padding = '0 12px'; + hideUIButton.style.marginLeft = '8px'; + hideUIButton.style.cursor = 'pointer'; + hideUIButton.style.display = 'flex'; + hideUIButton.style.alignItems = 'center'; + hideUIButton.style.justifyContent = 'center'; + hideUIButton.style.fontSize = '12px'; + hideUIButton.style.fontWeight = '600'; + hideUIButton.style.whiteSpace = 'nowrap'; + hideUIButton.style.transition = 'opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.2s ease-in-out'; + hideUIButton.style.opacity = '0'; + hideUIButton.style.visibility = 'hidden'; + hideUIButton.style.pointerEvents = 'none'; // Add hover effect hideUIButton.addEventListener('mouseenter', () => { @@ -331,8 +333,16 @@ const createHideUIButton = function(): void { // Insert after the fullscreen button buttonContainer.insertBefore(hideUIButton, fullscreenButton.nextSibling); + // Fade in the button after a small delay + setTimeout(() => { + if (settings.hideUIEnabled && !isHidden) { + hideUIButton.style.opacity = '1'; + hideUIButton.style.visibility = 'visible'; + hideUIButton.style.pointerEvents = 'auto'; + } + }, 100); // Small delay to ensure DOM insertion is complete + //trace.msg.log("Hide UI button added next to fullscreen button"); - updateButtonStates(); }, 1000); }; @@ -451,6 +461,15 @@ function observeForButtons(): void { if (!document.querySelector('.unhide-ui-button')) { createUnhideUIButton(); } + + // Fix unhide button visibility if UI is hidden but button isn't showing + if (isHidden) { + const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement; + if (unhideButton && (unhideButton.style.display === 'none' || unhideButton.style.opacity === '0')) { + // Force update button states to fix visibility + updateButtonStates(); + } + } }, 500); // Check every 500ms (much more efficient than MutationObserver) unloads.add(() => clearInterval(buttonCheckInterval)); diff --git a/plugins/radiant-lyrics-luna/src/styles.css b/plugins/radiant-lyrics-luna/src/styles.css index ff2a6a9..5ae222b 100644 --- a/plugins/radiant-lyrics-luna/src/styles.css +++ b/plugins/radiant-lyrics-luna/src/styles.css @@ -11,11 +11,15 @@ /* Remove image container positioning - let it stay where it is */ -.radiant-lyrics-ui-hidden [class*="_tabItems"]:hover { - opacity: 1 !important; +/* Tab items stay hidden - no hover functionality */ + +.radiant-lyrics-ui-hidden [data-test="header-container"]:not(:has(.hide-ui-button)) { + opacity: 0 !important; + transition: opacity 0.4s ease-in-out; } -.radiant-lyrics-ui-hidden [data-test="header-container"] { +/* Keep header visible if it contains the Hide UI button, but hide its other children */ +.radiant-lyrics-ui-hidden [data-test="header-container"]:has(.hide-ui-button) > *:not(.hide-ui-button) { opacity: 0 !important; transition: opacity 0.4s ease-in-out; } @@ -47,24 +51,41 @@ background-color: transparent; } -.radiant-lyrics-ui-hidden [class^="_bar"]>* { +.radiant-lyrics-ui-hidden [class^="_bar"]>*:not(.hide-ui-button) { opacity: 0 !important; + pointer-events: none !important; transition: opacity 0.4s ease-in-out; } -/* Show bar elements on hover */ -.radiant-lyrics-ui-hidden [class^="_bar"]:hover>*, -.radiant-lyrics-ui-hidden [class^="_bar"]>*:hover { - opacity: 1 !important; -} +/* Bar elements stay hidden - no hover functionality */ /* Default state for bar elements */ [class^="_bar"]>* { transition: opacity 0.4s ease-in-out; } -/* Hide bottom left controls with smooth fade animation - keep space to prevent UI shifting */ -/* But exclude heart buttons in player bar */ +/* Hide search box and make it non-interactive - comprehensive selectors */ +.radiant-lyrics-ui-hidden [data-test="search-input"], +.radiant-lyrics-ui-hidden [class*="_searchInput"], +.radiant-lyrics-ui-hidden [class*="searchInput"], +.radiant-lyrics-ui-hidden [class*="_search"], +.radiant-lyrics-ui-hidden [class*="search"], +.radiant-lyrics-ui-hidden input[type="search"], +.radiant-lyrics-ui-hidden input[type="text"], +.radiant-lyrics-ui-hidden input[placeholder*="Search"], +.radiant-lyrics-ui-hidden input[placeholder*="search"], +.radiant-lyrics-ui-hidden [placeholder*="Search"], +.radiant-lyrics-ui-hidden [data-test="main-layout-header"] input, +.radiant-lyrics-ui-hidden [data-test="main-layout-header"] [class*="input"], +.radiant-lyrics-ui-hidden header input, +.radiant-lyrics-ui-hidden nav input { + pointer-events: none !important; + cursor: default !important; + user-select: none !important; +} + +/* Hide bottom left controls completely - no hover functionality */ +/* Exclude heart buttons in player bar and make sure hidden buttons can't be clicked */ .radiant-lyrics-ui-hidden [data-test="add-to-playlist"]:not([data-test="footer-player"] *), .radiant-lyrics-ui-hidden [data-test="remove-from-playlist"]:not([data-test="footer-player"] *), .radiant-lyrics-ui-hidden [data-test="like-toggle"]:not([data-test="footer-player"] *), @@ -97,47 +118,11 @@ .radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div > div:first-child button:not(.unhide-ui-button), .radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div:first-child button:not(.unhide-ui-button) { opacity: 0 !important; + pointer-events: none !important; transition: opacity 0.5s ease-in-out !important; } -/* Show buttons on hover for accessibility */ -.radiant-lyrics-ui-hidden [data-test="add-to-playlist"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden [data-test="remove-from-playlist"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden [data-test="like-toggle"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden [data-test="dislike-toggle"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden [data-test="favorite-toggle"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden [data-test="heart-button"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden [data-test="playlist-add"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden [class*="_trackActions"]:hover, -.radiant-lyrics-ui-hidden [class*="_bottomLeftControls"]:hover, -.radiant-lyrics-ui-hidden [class*="_actionButtons"]:hover, -.radiant-lyrics-ui-hidden [class*="_favoriteButton"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden [class*="_addToPlaylist"]:hover, -.radiant-lyrics-ui-hidden [class*="_lowerLeft"]:hover, -.radiant-lyrics-ui-hidden [class*="_bottomActions"]:hover, -.radiant-lyrics-ui-hidden [class*="_mediaControls"] > div:first-child:hover, -.radiant-lyrics-ui-hidden button[title*="Add to"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden button[title*="Remove from"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden button[title*="Like"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden button[title*="Favorite"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden button[title*="Heart"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden button[aria-label*="Add to"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden button[aria-label*="Remove from"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden button[aria-label*="Like"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden button[aria-label*="Favorite"]:hover:not([data-test="footer-player"] *), -.radiant-lyrics-ui-hidden button[aria-label*="Heart"]:hover:not([data-test="footer-player"] *), -/* Show buttons on hover in bottom left area */ -.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] button[class*="_button"]:hover:not(.unhide-ui-button), -.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] [class*="_iconButton"]:hover:not(.unhide-ui-button), -.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div > div:first-child button:hover:not(.unhide-ui-button), -.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div:first-child button:hover:not(.unhide-ui-button), -/* Show buttons when hovering over their parent containers */ -.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]:hover button[class*="_button"]:not(.unhide-ui-button), -.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]:hover [class*="_iconButton"]:not(.unhide-ui-button), -.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]:hover > div > div:first-child button:not(.unhide-ui-button), -.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]:hover > div:first-child button:not(.unhide-ui-button) { - opacity: 1 !important; -} +/* No hover functionality in Hide UI Mode - buttons stay hidden */ /* Default state for control buttons */ [data-test="add-to-playlist"], @@ -172,4 +157,55 @@ button[aria-label*="Heart"], transition: opacity 0.5s ease-in-out; } +/* Smooth cover art movement when UI is hidden */ +[class*="_albumImage"], +[class*="_coverArt"], +figure[class*="_albumImage"] { + transition: transform 0.6s ease-in-out; +} + +.radiant-lyrics-ui-hidden [class*="_albumImage"], +.radiant-lyrics-ui-hidden [class*="_coverArt"], +.radiant-lyrics-ui-hidden figure[class*="_albumImage"] { + transform: translateX(80px) !important; +} + +/* Smooth track info wrapper movement when UI is hidden (less movement to stay centered) */ +[class*="_infoWrapper"], +[class*="_textContainer"] { + transition: transform 0.6s ease-in-out; +} + +.radiant-lyrics-ui-hidden [class*="_infoWrapper"], +.radiant-lyrics-ui-hidden [class*="_textContainer"] { + transform: translateX(40px) !important; +} + +/* Move parent containers instead of lyrics container directly to preserve gradient fade */ +/* Use original movement distances: 30px right and 70px up */ +[data-test="stream-metadata"], +[class*="_rightColumn"], +[class*="_rightSide"], +[class*="_contentRight"], +[class*="_sidePanel"], +[class*="_lyricsSection"], +[class*="_lyricsWrapper"] { + transition: transform 0.6s ease-in-out; +} + +.radiant-lyrics-ui-hidden [data-test="stream-metadata"], +.radiant-lyrics-ui-hidden [class*="_rightColumn"], +.radiant-lyrics-ui-hidden [class*="_rightSide"], +.radiant-lyrics-ui-hidden [class*="_contentRight"], +.radiant-lyrics-ui-hidden [class*="_sidePanel"], +.radiant-lyrics-ui-hidden [class*="_lyricsSection"], +.radiant-lyrics-ui-hidden [class*="_lyricsWrapper"] { + transform: translateX(60px) translateY(-70px) !important; +} + +/* 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; +} + /* Let JavaScript handle the unhide button visibility and transitions */ \ No newline at end of file