mirror of
https://github.com/meowarex/TidaLuna-Plugins.git
synced 2026-06-18 03:43:10 +10:00
Lyrics Flush Feature + Redesigned HideUI
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
} else {
|
||||||
// Hide UI button immediately when clicked - (couldn't get the fade to work)
|
toggleButton.style.display = "none";
|
||||||
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,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -336,12 +279,20 @@ const toggleRadiantLyrics = function (): void {
|
|||||||
const nowPlayingContainer = document.querySelector(
|
const nowPlayingContainer = document.querySelector(
|
||||||
'[class*="_nowPlayingContainer"]',
|
'[class*="_nowPlayingContainer"]',
|
||||||
) as HTMLElement;
|
) as HTMLElement;
|
||||||
if (isHidden) {
|
|
||||||
const unhideButton = document.querySelector(
|
|
||||||
".unhide-ui-button",
|
|
||||||
) as HTMLElement;
|
|
||||||
if (unhideButton) unhideButton.classList.add("hide-immediately");
|
|
||||||
isHidden = !isHidden;
|
isHidden = !isHidden;
|
||||||
|
updateButtonStates();
|
||||||
|
if (isHidden) {
|
||||||
|
safeTimeout(
|
||||||
|
unloads,
|
||||||
|
() => {
|
||||||
|
updateRadiantLyricsStyles();
|
||||||
|
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;
|
||||||
safeTimeout(
|
const unlockResync = (): void => {
|
||||||
unloads,
|
resyncLocked = false;
|
||||||
() => {
|
const btn = document.querySelector(".resync-lyrics-button") as HTMLButtonElement;
|
||||||
if (!settings.hideUIEnabled) return;
|
if (btn) {
|
||||||
const fullscreenButton = document.querySelector(
|
btn.disabled = false;
|
||||||
'[data-test="new-now-playing-expand"]',
|
btn.style.opacity = "";
|
||||||
);
|
btn.style.cursor = "";
|
||||||
if (!fullscreenButton || !fullscreenButton.parentElement) {
|
}
|
||||||
safeTimeout(unloads, () => createHideUIButton(), 1000);
|
};
|
||||||
|
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;
|
return;
|
||||||
}
|
}
|
||||||
if (document.querySelector(".hide-ui-button")) return;
|
|
||||||
const buttonContainer = fullscreenButton.parentElement;
|
lockResync();
|
||||||
const hideUIButton = document.createElement("button");
|
|
||||||
hideUIButton.className = "hide-ui-button";
|
let params = `?title=${encodeURIComponent(trackInfo.title)}&artist=${encodeURIComponent(trackInfo.artist)}`;
|
||||||
hideUIButton.setAttribute("aria-label", "Hide UI");
|
if (trackInfo.isrc) params += `&isrc=${encodeURIComponent(trackInfo.isrc)}`;
|
||||||
hideUIButton.setAttribute("title", "Hide UI");
|
params += "&flush=true&platform=" + encodeURIComponent("Radiant Lyrics");
|
||||||
hideUIButton.textContent = "Hide UI";
|
|
||||||
hideUIButton.style.backgroundColor = "#ffffff";
|
const url = `https://api.atomix.one/rl-api${params}`;
|
||||||
hideUIButton.style.color = "black";
|
try {
|
||||||
hideUIButton.style.border = "none";
|
const res = await fetch(url, {
|
||||||
hideUIButton.style.borderRadius = "12px";
|
headers: {
|
||||||
hideUIButton.style.height = "40px";
|
"P-Access-Token-Id": "58hy4s86",
|
||||||
hideUIButton.style.padding = "0 12px";
|
"P-Access-Token": "xjehy2lfg5h5mjwotoxrcqugam",
|
||||||
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";
|
|
||||||
hideUIButton.addEventListener("mouseenter", () => {
|
|
||||||
hideUIButton.style.backgroundColor = "#e5e5e5";
|
|
||||||
});
|
});
|
||||||
hideUIButton.addEventListener("mouseleave", () => {
|
if (res.status === 404) {
|
||||||
hideUIButton.style.backgroundColor = "#ffffff";
|
toast("No lyrics found for this track");
|
||||||
});
|
return;
|
||||||
hideUIButton.onclick = toggleRadiantLyrics;
|
}
|
||||||
buttonContainer.insertBefore(hideUIButton, fullscreenButton.nextSibling);
|
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 && !isHidden) {
|
const closeButton = document.querySelector(
|
||||||
hideUIButton.style.opacity = "1";
|
'[data-test="new-now-playing-close"]',
|
||||||
hideUIButton.style.visibility = "visible";
|
) as HTMLButtonElement;
|
||||||
hideUIButton.style.pointerEvents = "auto";
|
if (!closeButton || !closeButton.parentElement) {
|
||||||
|
safeTimeout(unloads, () => createResyncButton(), 1000);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
},
|
if (document.querySelector(".resync-lyrics-button")) return;
|
||||||
100,
|
const buttonContainer = closeButton.parentElement;
|
||||||
|
|
||||||
|
const resyncButton = closeButton.cloneNode(false) as HTMLButtonElement;
|
||||||
|
resyncButton.className = closeButton.className;
|
||||||
|
resyncButton.classList.add("resync-lyrics-button");
|
||||||
|
resyncButton.removeAttribute("data-test");
|
||||||
|
resyncButton.setAttribute("type", "button");
|
||||||
|
resyncButton.setAttribute("aria-label", "Resync Lyrics");
|
||||||
|
resyncButton.setAttribute("title", "Resync Lyrics");
|
||||||
|
|
||||||
|
const iconSpan = closeButton.querySelector("span");
|
||||||
|
const iconSvg = closeButton.querySelector("svg");
|
||||||
|
const spanWrapper = document.createElement("span");
|
||||||
|
if (iconSpan) spanWrapper.className = iconSpan.className;
|
||||||
|
spanWrapper.setAttribute("aria-hidden", "true");
|
||||||
|
const svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||||
|
svgEl.setAttribute("viewBox", "0 0 20 20");
|
||||||
|
if (iconSvg) svgEl.setAttribute("class", iconSvg.className.baseVal);
|
||||||
|
const useEl = document.createElementNS("http://www.w3.org/2000/svg", "use");
|
||||||
|
useEl.setAttribute("href", "#general__lyrics-sync");
|
||||||
|
svgEl.appendChild(useEl);
|
||||||
|
spanWrapper.appendChild(svgEl);
|
||||||
|
resyncButton.appendChild(spanWrapper);
|
||||||
|
|
||||||
|
resyncButton.onclick = () => resyncLyrics();
|
||||||
|
|
||||||
|
const hideBtn = buttonContainer.querySelector(".hide-ui-button");
|
||||||
|
buttonContainer.insertBefore(
|
||||||
|
resyncButton,
|
||||||
|
hideBtn ?? closeButton,
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
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);
|
||||||
|
|
||||||
|
hideUIButton.onclick = toggleRadiantLyrics;
|
||||||
|
buttonContainer.insertBefore(hideUIButton, closeButton);
|
||||||
},
|
},
|
||||||
2000,
|
1000,
|
||||||
);
|
|
||||||
});
|
|
||||||
unhideUIButton.onclick = toggleRadiantLyrics;
|
|
||||||
nowPlayingContainer.appendChild(unhideUIButton);
|
|
||||||
updateButtonStates();
|
|
||||||
},
|
|
||||||
1500,
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -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();
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user