Reworked UI Shift Movement

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';
+            // Small delay to ensure display is set first, then fade in
-            hideButton.style.visibility = 'visible';
+            setTimeout(() => {
-            hideButton.style.pointerEvents = 'auto';
+                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
+        // Update button states immediately to start Hide UI button fade-out
-        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();
+        
+        // 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 = `
+        hideUIButton.style.backgroundColor = 'var(--wave-color-solid-accent-fill)';
-            background-color: var(--wave-color-solid-accent-fill);
+        hideUIButton.style.color = 'black';
-            color: black;
+        hideUIButton.style.border = 'none';
-            border: none;
+        hideUIButton.style.borderRadius = '12px';
-            border-radius: 12px;
+        hideUIButton.style.height = '40px';
-            height: 40px;
+        hideUIButton.style.padding = '0 12px';
-            padding: 0 12px;
+        hideUIButton.style.marginLeft = '8px';
-            margin-left: 8px;
+        hideUIButton.style.cursor = 'pointer';
-            cursor: pointer;
+        hideUIButton.style.display = 'flex';
-            display: flex;
+        hideUIButton.style.alignItems = 'center';
-            align-items: center;
+        hideUIButton.style.justifyContent = 'center';
-            justify-content: center;
+        hideUIButton.style.fontSize = '12px';
-            transition: all 0.5s ease-in-out;
+        hideUIButton.style.fontWeight = '600';
-            font-size: 12px;
+        hideUIButton.style.whiteSpace = 'nowrap';
-            font-weight: 600;
+        hideUIButton.style.transition = 'opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.2s ease-in-out';
-            white-space: nowrap;
+        hideUIButton.style.opacity = '0';
-            opacity: 1;
+        hideUIButton.style.visibility = 'hidden';
-            visibility: visible;
+        hideUIButton.style.pointerEvents = 'none';
-            pointer-events: auto;
-        `;
         
         // 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));

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 {
+/* Tab items stay hidden - no hover functionality */
-    opacity: 1 !important;
+
+.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 */
+/* Bar elements stay hidden - no hover functionality */
-.radiant-lyrics-ui-hidden [class^="_bar"]:hover>*,
-.radiant-lyrics-ui-hidden [class^="_bar"]>*:hover {
-    opacity: 1 !important;
-}
 
 /* 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 */
+/* Hide search box and make it non-interactive - comprehensive selectors */
-/* But exclude heart buttons in player bar */
+.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 */
+/* No hover functionality in Hide UI Mode - buttons stay hidden */
-.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;
-}
 
 /* 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 */