mirror of
https://github.com/meowarex/TidaLuna-Plugins.git
synced 2026-06-18 03:43:10 +10:00
Reworked UI Shift Movement
This commit is contained in:
@@ -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));
|
||||
|
||||
@@ -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 */
|
||||
Reference in New Issue
Block a user