Lyrics Flush Feature + Redesigned HideUI

This commit is contained in:
2026-04-03 00:49:43 +11:00
parent daf76c5ffc
commit ce8b1da26d
3 changed files with 207 additions and 262 deletions
@@ -72,8 +72,7 @@
/* Ensure now-playing content renders above the dynamic background */ /* Ensure now-playing content renders above the dynamic background */
[data-test="new-now-playing"] > header, [data-test="new-now-playing"] > header,
[data-test="new-now-playing"] > [class*="_content_"], [data-test="new-now-playing"] > [class*="_content_"] {
[data-test="new-now-playing"] > .unhide-ui-button {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
+192 -218
View File
@@ -1,5 +1,5 @@
// MARKER: Core Setup // MARKER: Core Setup
import { type LunaUnload, Tracer } from "@luna/core"; import { type LunaUnload, Tracer, reduxStore, buildActions } from "@luna/core";
import { import {
MediaItem, MediaItem,
observe, observe,
@@ -28,6 +28,15 @@ import baseStyles from "file://styles.css?minify";
export const { trace } = Tracer("[Radiant Lyrics]"); export const { trace } = Tracer("[Radiant Lyrics]");
export { Settings }; export { Settings };
const toast = (msg: string) =>
reduxStore.dispatch(
buildActions["message/MESSAGE_INFO"]?.({ message: msg, category: "OTHER", severity: "INFO" }),
);
const toastErr = (msg: string) =>
reduxStore.dispatch(
buildActions["message/MESSAGE_ERROR"]?.({ message: msg, category: "OTHER", severity: "ERROR" }),
);
// clean up resources // clean up resources
export const unloads = new Set<LunaUnload>(); export const unloads = new Set<LunaUnload>();
@@ -239,95 +248,29 @@ const updateRadiantLyricsStyles = function (): void {
// MARKER: UI Visibility Control // MARKER: UI Visibility Control
// UI state shared across features // UI state shared across features
let isHidden = false; let isHidden = false;
let unhideButtonAutoFadeTimeout: number | null = null;
// Helper to safely create a one-off timeout that clears previous if any const EYE_OFF_SVG = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>`;
const safelySetAutoFadeTimeout = ( const EYE_ON_SVG = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`;
existingId: number | null,
fn: () => void,
delay: number,
): number => {
if (existingId != null) window.clearTimeout(existingId);
return window.setTimeout(fn, delay);
};
const updateButtonStates = function (): void { const updateButtonStates = function (): void {
const hideButton = document.querySelector(".hide-ui-button") as HTMLElement; const toggleButton = document.querySelector(".hide-ui-button") as HTMLElement;
const unhideButton = document.querySelector( if (!toggleButton) return;
".unhide-ui-button",
) as HTMLElement;
if (hideButton) { if (settings.hideUIEnabled) {
if (settings.hideUIEnabled && !isHidden) { toggleButton.style.display = "";
hideButton.style.display = "flex"; const newSvg = isHidden ? EYE_ON_SVG : EYE_OFF_SVG;
// Small delay to ensure display is set first, then fade in const label = isHidden ? "Show UI" : "Hide UI";
safeTimeout( toggleButton.setAttribute("aria-label", label);
unloads, toggleButton.setAttribute("title", label);
() => { const spanWrapper = toggleButton.querySelector("span");
hideButton.style.opacity = "1"; if (spanWrapper) {
hideButton.style.visibility = "visible"; const svgClass = spanWrapper.querySelector("svg")?.getAttribute("class") ?? "";
hideButton.style.pointerEvents = "auto"; spanWrapper.innerHTML = newSvg;
}, const svg = spanWrapper.querySelector("svg");
50, if (svg && svgClass) svg.setAttribute("class", svgClass);
);
} else {
// Hide UI button immediately when clicked - (couldn't get the fade to work)
hideButton.style.display = "none";
hideButton.style.opacity = "0";
hideButton.style.visibility = "hidden";
hideButton.style.pointerEvents = "none";
}
}
if (unhideButton) {
// Clear any existing auto-fade timeout
if (unhideButtonAutoFadeTimeout != null) {
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)
safeTimeout(
unloads,
() => {
unhideButton.style.opacity = "1";
unhideButton.style.visibility = "visible";
unhideButton.style.pointerEvents = "auto";
// Set up auto-fade after 2 seconds
unhideButtonAutoFadeTimeout = safelySetAutoFadeTimeout(
unhideButtonAutoFadeTimeout,
() => {
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
safeTimeout(
unloads,
() => {
if (unhideButton.style.opacity === "0") {
unhideButton.style.display = "none";
}
},
500,
);
} }
} else {
toggleButton.style.display = "none";
} }
}; };
@@ -336,12 +279,20 @@ const toggleRadiantLyrics = function (): void {
const nowPlayingContainer = document.querySelector( const nowPlayingContainer = document.querySelector(
'[class*="_nowPlayingContainer"]', '[class*="_nowPlayingContainer"]',
) as HTMLElement; ) as HTMLElement;
isHidden = !isHidden;
updateButtonStates();
if (isHidden) { if (isHidden) {
const unhideButton = document.querySelector( safeTimeout(
".unhide-ui-button", unloads,
) as HTMLElement; () => {
if (unhideButton) unhideButton.classList.add("hide-immediately"); updateRadiantLyricsStyles();
isHidden = !isHidden; if (nowPlayingContainer)
nowPlayingContainer.classList.add("radiant-lyrics-ui-hidden");
document.body.classList.add("radiant-lyrics-ui-hidden");
},
50,
);
} else {
if (nowPlayingContainer) if (nowPlayingContainer)
nowPlayingContainer.classList.remove("radiant-lyrics-ui-hidden"); nowPlayingContainer.classList.remove("radiant-lyrics-ui-hidden");
document.body.classList.remove("radiant-lyrics-ui-hidden"); document.body.classList.remove("radiant-lyrics-ui-hidden");
@@ -354,128 +305,168 @@ const toggleRadiantLyrics = function (): void {
}, },
500, 500,
); );
updateButtonStates();
} else {
isHidden = !isHidden;
updateButtonStates();
safeTimeout(
unloads,
() => {
updateRadiantLyricsStyles();
if (nowPlayingContainer)
nowPlayingContainer.classList.add("radiant-lyrics-ui-hidden");
document.body.classList.add("radiant-lyrics-ui-hidden");
},
50,
);
} }
}; };
// Create buttons // Create buttons
const createHideUIButton = function (): void { let resyncLocked = false;
const unlockResync = (): void => {
resyncLocked = false;
const btn = document.querySelector(".resync-lyrics-button") as HTMLButtonElement;
if (btn) {
btn.disabled = false;
btn.style.opacity = "";
btn.style.cursor = "";
}
};
const lockResync = (): void => {
resyncLocked = true;
const btn = document.querySelector(".resync-lyrics-button") as HTMLButtonElement;
if (btn) {
btn.disabled = true;
btn.style.opacity = "0.3";
btn.style.cursor = "not-allowed";
}
};
const resyncLyrics = async (): Promise<void> => {
if (resyncLocked) return;
const trackInfo = await getTrackInfo();
if (!trackInfo) {
trace.msg.err("Resync: could not get track info");
return;
}
lockResync();
let params = `?title=${encodeURIComponent(trackInfo.title)}&artist=${encodeURIComponent(trackInfo.artist)}`;
if (trackInfo.isrc) params += `&isrc=${encodeURIComponent(trackInfo.isrc)}`;
params += "&flush=true&platform=" + encodeURIComponent("Radiant Lyrics");
const url = `https://api.atomix.one/rl-api${params}`;
try {
const res = await fetch(url, {
headers: {
"P-Access-Token-Id": "58hy4s86",
"P-Access-Token": "xjehy2lfg5h5mjwotoxrcqugam",
},
});
if (res.status === 404) {
toast("No lyrics found for this track");
return;
}
if (!res.ok) {
toastErr(`Resync failed (${res.status})`);
unlockResync();
return;
}
const data = (await res.json()) as LyricsApiResponse & { _flush?: string };
const flush = data?._flush ?? "";
const needsReload = flush.startsWith("Created") || flush.startsWith("Updated");
if (flush) {
toast(flush);
} else {
toast("Lyrics resynced");
}
if (needsReload || !flush) {
cachedLyricsKey = null;
cachedLyricsData = null;
onTrackChange();
}
} catch (err) {
toastErr(`Resync error: ${err instanceof Error ? err.message : String(err)}`);
unlockResync();
}
};
const createResyncButton = function (): void {
safeTimeout( safeTimeout(
unloads, unloads,
() => { () => {
if (!settings.hideUIEnabled) return; const closeButton = document.querySelector(
const fullscreenButton = document.querySelector( '[data-test="new-now-playing-close"]',
'[data-test="new-now-playing-expand"]', ) as HTMLButtonElement;
); if (!closeButton || !closeButton.parentElement) {
if (!fullscreenButton || !fullscreenButton.parentElement) { safeTimeout(unloads, () => createResyncButton(), 1000);
safeTimeout(unloads, () => createHideUIButton(), 1000);
return; return;
} }
if (document.querySelector(".hide-ui-button")) return; if (document.querySelector(".resync-lyrics-button")) return;
const buttonContainer = fullscreenButton.parentElement; const buttonContainer = closeButton.parentElement;
const hideUIButton = document.createElement("button");
hideUIButton.className = "hide-ui-button"; const resyncButton = closeButton.cloneNode(false) as HTMLButtonElement;
hideUIButton.setAttribute("aria-label", "Hide UI"); resyncButton.className = closeButton.className;
hideUIButton.setAttribute("title", "Hide UI"); resyncButton.classList.add("resync-lyrics-button");
hideUIButton.textContent = "Hide UI"; resyncButton.removeAttribute("data-test");
hideUIButton.style.backgroundColor = "#ffffff"; resyncButton.setAttribute("type", "button");
hideUIButton.style.color = "black"; resyncButton.setAttribute("aria-label", "Resync Lyrics");
hideUIButton.style.border = "none"; resyncButton.setAttribute("title", "Resync Lyrics");
hideUIButton.style.borderRadius = "12px";
hideUIButton.style.height = "40px"; const iconSpan = closeButton.querySelector("span");
hideUIButton.style.padding = "0 12px"; const iconSvg = closeButton.querySelector("svg");
hideUIButton.style.marginLeft = "8px"; const spanWrapper = document.createElement("span");
hideUIButton.style.cursor = "pointer"; if (iconSpan) spanWrapper.className = iconSpan.className;
hideUIButton.style.display = "flex"; spanWrapper.setAttribute("aria-hidden", "true");
hideUIButton.style.alignItems = "center"; const svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
hideUIButton.style.justifyContent = "center"; svgEl.setAttribute("viewBox", "0 0 20 20");
hideUIButton.style.fontSize = "12px"; if (iconSvg) svgEl.setAttribute("class", iconSvg.className.baseVal);
hideUIButton.style.fontWeight = "600"; const useEl = document.createElementNS("http://www.w3.org/2000/svg", "use");
hideUIButton.style.whiteSpace = "nowrap"; useEl.setAttribute("href", "#general__lyrics-sync");
hideUIButton.style.transition = svgEl.appendChild(useEl);
"opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.2s ease-in-out"; spanWrapper.appendChild(svgEl);
hideUIButton.style.opacity = "0"; resyncButton.appendChild(spanWrapper);
hideUIButton.style.visibility = "hidden";
hideUIButton.style.pointerEvents = "none"; resyncButton.onclick = () => resyncLyrics();
hideUIButton.addEventListener("mouseenter", () => {
hideUIButton.style.backgroundColor = "#e5e5e5"; const hideBtn = buttonContainer.querySelector(".hide-ui-button");
}); buttonContainer.insertBefore(
hideUIButton.addEventListener("mouseleave", () => { resyncButton,
hideUIButton.style.backgroundColor = "#ffffff"; hideBtn ?? closeButton,
});
hideUIButton.onclick = toggleRadiantLyrics;
buttonContainer.insertBefore(hideUIButton, fullscreenButton.nextSibling);
safeTimeout(
unloads,
() => {
if (settings.hideUIEnabled && !isHidden) {
hideUIButton.style.opacity = "1";
hideUIButton.style.visibility = "visible";
hideUIButton.style.pointerEvents = "auto";
}
},
100,
); );
}, },
1000, 1000,
); );
}; };
const createUnhideUIButton = function (): void { const createHideUIButton = function (): void {
safeTimeout( safeTimeout(
unloads, unloads,
() => { () => {
if (!settings.hideUIEnabled) return; if (!settings.hideUIEnabled) return;
if (document.querySelector(".unhide-ui-button")) return; const closeButton = document.querySelector(
const nowPlayingContainer = document.querySelector( '[data-test="new-now-playing-close"]',
'[class*="_nowPlayingContainer"]', ) as HTMLButtonElement;
) as HTMLElement; if (!closeButton || !closeButton.parentElement) {
if (!nowPlayingContainer) { safeTimeout(unloads, () => createHideUIButton(), 1000);
safeTimeout(unloads, () => createUnhideUIButton(), 1000);
return; return;
} }
const unhideUIButton = document.createElement("button"); if (document.querySelector(".hide-ui-button")) return;
unhideUIButton.className = "unhide-ui-button"; const buttonContainer = closeButton.parentElement;
unhideUIButton.setAttribute("aria-label", "Unhide UI");
unhideUIButton.setAttribute("title", "Unhide UI"); const hideUIButton = closeButton.cloneNode(false) as HTMLButtonElement;
unhideUIButton.textContent = "Unhide"; hideUIButton.className = closeButton.className;
unhideUIButton.style.cssText = `position: absolute; top: 10px; right: 10px; background-color: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; height: 40px; padding: 0 12px; cursor: pointer; display: none; align-items: center; justify-content: center; transition: all 0.5s ease-in-out; font-size: 12px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; pointer-events: none;`; hideUIButton.classList.add("hide-ui-button");
unhideUIButton.addEventListener("mouseenter", () => { hideUIButton.removeAttribute("data-test");
unhideUIButton.style.backgroundColor = "rgba(255,255,255,0.3)"; hideUIButton.setAttribute("type", "button");
unhideUIButton.style.transform = "scale(1.05)"; hideUIButton.setAttribute("aria-label", isHidden ? "Show UI" : "Hide UI");
unhideUIButton.classList.remove("auto-faded"); hideUIButton.setAttribute("title", isHidden ? "Show UI" : "Hide UI");
});
unhideUIButton.addEventListener("mouseleave", () => { const iconSpan = closeButton.querySelector("span");
unhideUIButton.style.backgroundColor = "rgba(255,255,255,0.2)"; const iconSvg = closeButton.querySelector("svg");
unhideUIButton.style.transform = "scale(1)"; const spanWrapper = document.createElement("span");
safeTimeout( if (iconSpan) spanWrapper.className = iconSpan.className;
unloads, spanWrapper.setAttribute("aria-hidden", "true");
() => { const svgContent = isHidden ? EYE_ON_SVG : EYE_OFF_SVG;
if (isHidden && !unhideUIButton.matches(":hover")) { spanWrapper.innerHTML = svgContent;
unhideUIButton.classList.add("auto-faded"); const svg = spanWrapper.querySelector("svg");
} if (svg && iconSvg) svg.setAttribute("class", iconSvg.className.baseVal);
}, hideUIButton.appendChild(spanWrapper);
2000,
); hideUIButton.onclick = toggleRadiantLyrics;
}); buttonContainer.insertBefore(hideUIButton, closeButton);
unhideUIButton.onclick = toggleRadiantLyrics;
nowPlayingContainer.appendChild(unhideUIButton);
updateButtonStates();
}, },
1500, 1000,
); );
}; };
@@ -1007,21 +998,10 @@ unloads.add(() => {
footerPlayer.style.removeProperty("width"); footerPlayer.style.removeProperty("width");
} }
// Clean up HideUI button auto-fade timeout // Clean up action buttons
if (unhideButtonAutoFadeTimeout != null) { for (const sel of [".hide-ui-button", ".resync-lyrics-button"]) {
window.clearTimeout(unhideButtonAutoFadeTimeout); const btn = document.querySelector(sel);
unhideButtonAutoFadeTimeout = null; if (btn?.parentNode) btn.parentNode.removeChild(btn);
}
// Clean up HideUI button
const hideButton = document.querySelector(".hide-ui-button");
if (hideButton && hideButton.parentNode) {
hideButton.parentNode.removeChild(hideButton);
}
const unhideButton = document.querySelector(".unhide-ui-button");
if (unhideButton && unhideButton.parentNode) {
unhideButton.parentNode.removeChild(unhideButton);
} }
// Clean up sticky lyrics elements // Clean up sticky lyrics elements
@@ -3922,6 +3902,7 @@ const startTickLoop = (): void => {
// Called by track change or style toggle // Called by track change or style toggle
const onTrackChange = async (): Promise<void> => { const onTrackChange = async (): Promise<void> => {
teardown(); teardown();
unlockResync();
const runId = ++trackChangeRunSeq; const runId = ++trackChangeRunSeq;
isTrackChangeRunning = true; isTrackChangeRunning = true;
@@ -4166,19 +4147,13 @@ const setupTrackChangeListener = (): void => {
function setupHeaderObserver(): void { function setupHeaderObserver(): void {
const existing = document.querySelector('[data-test="header"]'); const existing = document.querySelector('[data-test="header"]');
if (existing && !document.querySelector(".hide-ui-button")) if (existing) {
createHideUIButton(); if (!document.querySelector(".resync-lyrics-button")) createResyncButton();
observe<HTMLElement>(unloads, '[data-test="header"]', () => { if (!document.querySelector(".hide-ui-button")) createHideUIButton();
}
observe<HTMLElement>(unloads, '[data-test="header"]', () => {
if (!document.querySelector(".resync-lyrics-button")) createResyncButton();
if (!document.querySelector(".hide-ui-button")) createHideUIButton(); if (!document.querySelector(".hide-ui-button")) createHideUIButton();
});
}
function setupNowPlayingObserver(): void {
const existing = document.querySelector('[class*="_nowPlayingContainer"]');
if (existing && !document.querySelector(".unhide-ui-button"))
createUnhideUIButton();
observe<HTMLElement>(unloads, '[class*="_nowPlayingContainer"]', () => {
if (!document.querySelector(".unhide-ui-button")) createUnhideUIButton();
}); });
} }
@@ -4190,6 +4165,5 @@ onGlobalTrackChange(() => {
// Init observers // Init observers
setupHeaderObserver(); setupHeaderObserver();
setupNowPlayingObserver();
setupStickyLyricsObserver(); setupStickyLyricsObserver();
setupTrackChangeListener(); setupTrackChangeListener();
+14 -42
View File
@@ -23,60 +23,27 @@
.radiant-lyrics-ui-hidden [data-test="toggle-credits"], .radiant-lyrics-ui-hidden [data-test="toggle-credits"],
.radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"] { .radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"] {
opacity: 0 !important; opacity: 0 !important;
transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out !important;
} }
.radiant-lyrics-ui-hidden [data-test="toggle-lyrics"]:hover, .radiant-lyrics-ui-hidden [data-test="toggle-lyrics"]:hover,
.radiant-lyrics-ui-hidden [data-test="toggle-credits"]:hover, .radiant-lyrics-ui-hidden [data-test="toggle-credits"]:hover,
.radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"]:hover { .radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"]:hover,
.radiant-lyrics-ui-hidden.rl-dropdown-open [data-test="toggle-lyrics"] {
opacity: 1 !important; opacity: 1 !important;
transition: opacity 0.4s ease-in-out !important;
} }
/* Hide header container (search, minimize, fullscreen) when UI is hidden */ /* Hide header, artist info, and visualizer when UI is hidden */
.radiant-lyrics-ui-hidden [data-test="header"] { .radiant-lyrics-ui-hidden [data-test="header"],
.radiant-lyrics-ui-hidden [data-test="artist-info"],
.radiant-lyrics-ui-hidden .audio-visualizer-container {
opacity: 0 !important; opacity: 0 !important;
visibility: hidden !important; visibility: hidden !important;
transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s; transition: opacity 0.4s ease-in-out !important, visibility 0s linear 0.4s;
pointer-events: none !important; pointer-events: none !important;
} }
/* Immediate hide class for unhide button */
.hide-immediately {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Auto-fade styling for unhide button */
.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.4) !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 !important;
}
.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 !important;
}
/* MARKER: Sticky Lyrics CSS */ /* MARKER: Sticky Lyrics CSS */
@@ -295,3 +262,8 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
._artworkTilt_1c6d5cc { ._artworkTilt_1c6d5cc {
border: none !important; border: none !important;
} }
/* Hide fullscreen button — breaks Radiant Lyrics */
[data-test="new-now-playing-expand"] {
display: none !important;
}