Lyrics Dropdown

plugins/radiant-lyrics-luna/src/index.ts

@@ -1060,7 +1060,7 @@ const STICKY_ICONS: Record<string, string> = {
 	chevron:
 		'<svg viewBox="0 0 24 24" width="10" height="10" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L12 14.5858L18.2929 8.29289C18.6834 7.90237 19.3166 7.90237 19.7071 8.29289C20.0976 8.68342 20.0976 9.31658 19.7071 9.70711L12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289Z" fill="currentColor"/></svg>',
 	sparkle:
-		'<svg viewBox="0 0 512 512" width="12" height="12"><path fill="currentColor" d="M208,512a24.84,24.84,0,0,1-23.34-16l-39.84-103.6a16.06,16.06,0,0,0-9.19-9.19L32,343.34a25,25,0,0,1,0-46.68l103.6-39.84a16.06,16.06,0,0,0,9.19-9.19L184.66,144a25,25,0,0,1,46.68,0l39.84,103.6a16.06,16.06,0,0,0,9.19,9.19l103,39.63A25.49,25.49,0,0,1,400,320.52a24.82,24.82,0,0,1-16,22.82l-103.6,39.84a16.06,16.06,0,0,0-9.19,9.19L231.34,496A24.84,24.84,0,0,1,208,512Zm66.85-254.84h0Z"/><path fill="currentColor" d="M88,176a14.67,14.67,0,0,1-13.69-9.4L57.45,122.76a7.28,7.28,0,0,0-4.21-4.21L9.4,101.69a14.67,14.67,0,0,1,0-27.38L53.24,57.45a7.31,7.31,0,0,0,4.21-4.21L74.16,9.79A15,15,0,0,1,86.23.11,14.67,14.67,0,0,1,101.69,9.4l16.86,43.84a7.31,7.31,0,0,0,4.21,4.21L166.6,74.31a14.67,14.67,0,0,1,0,27.38l-43.84,16.86a7.28,7.28,0,0,0-4.21,4.21L101.69,166.6A14.67,14.67,0,0,1,88,176Z"/><path fill="currentColor" d="M400,256a16,16,0,0,1-14.93-10.26l-22.84-59.37a8,8,0,0,0-4.6-4.6l-59.37-22.84a16,16,0,0,1,0-29.86l59.37-22.84a8,8,0,0,0,4.6-4.6L384.9,42.68a16.45,16.45,0,0,1,13.17-10.57,16,16,0,0,1,16.86,10.15l22.84,59.37a8,8,0,0,0,4.6,4.6l59.37,22.84a16,16,0,0,1,0,29.86l-59.37,22.84a8,8,0,0,0-4.6,4.6l-22.84,59.37A16,16,0,0,1,400,256Z"/></svg>',
+		'<svg viewBox="0 0 512 512" width="16" height="16"><path fill="currentColor" d="M208,512a24.84,24.84,0,0,1-23.34-16l-39.84-103.6a16.06,16.06,0,0,0-9.19-9.19L32,343.34a25,25,0,0,1,0-46.68l103.6-39.84a16.06,16.06,0,0,0,9.19-9.19L184.66,144a25,25,0,0,1,46.68,0l39.84,103.6a16.06,16.06,0,0,0,9.19,9.19l103,39.63A25.49,25.49,0,0,1,400,320.52a24.82,24.82,0,0,1-16,22.82l-103.6,39.84a16.06,16.06,0,0,0-9.19,9.19L231.34,496A24.84,24.84,0,0,1,208,512Zm66.85-254.84h0Z"/><path fill="currentColor" d="M88,176a14.67,14.67,0,0,1-13.69-9.4L57.45,122.76a7.28,7.28,0,0,0-4.21-4.21L9.4,101.69a14.67,14.67,0,0,1,0-27.38L53.24,57.45a7.31,7.31,0,0,0,4.21-4.21L74.16,9.79A15,15,0,0,1,86.23.11,14.67,14.67,0,0,1,101.69,9.4l16.86,43.84a7.31,7.31,0,0,0,4.21,4.21L166.6,74.31a14.67,14.67,0,0,1,0,27.38l-43.84,16.86a7.28,7.28,0,0,0-4.21,4.21L101.69,166.6A14.67,14.67,0,0,1,88,176Z"/><path fill="currentColor" d="M400,256a16,16,0,0,1-14.93-10.26l-22.84-59.37a8,8,0,0,0-4.6-4.6l-59.37-22.84a16,16,0,0,1,0-29.86l59.37-22.84a8,8,0,0,0,4.6-4.6L384.9,42.68a16.45,16.45,0,0,1,13.17-10.57,16,16,0,0,1,16.86,10.15l22.84,59.37a8,8,0,0,0,4.6,4.6l59.37,22.84a16,16,0,0,1,0,29.86l-59.37,22.84a8,8,0,0,0-4.6,4.6l-22.84,59.37A16,16,0,0,1,400,256Z"/></svg>',
 };
 
 const getStickyIcon = (): string =>
@@ -1144,36 +1144,40 @@ const updateStickyLyricsFeature = (): void => {
 };
 (window as any).updateStickyLyricsFeature = updateStickyLyricsFeature;
 
-const createStickyLyricsDropdown = (): void => {
+let stickyDropdownEl: HTMLElement | null = null;
-	const lyricsToggle = document.querySelector(
+let stickyDropdownOpen = false;
-		'[data-test="toggle-lyrics"]',
+const DROPDOWN_WIDTH = 150;
-	) as HTMLElement;
-	if (!lyricsToggle) return;
-	if (lyricsToggle.querySelector(".sticky-lyrics-trigger")) return;
 
-	// Trigger lives inside the toggle button
+const positionDropdown = (): void => {
-	const trigger = document.createElement("div");
+	if (!stickyDropdownEl) return;
-	trigger.className = "sticky-lyrics-trigger";
+	const toggle = document.querySelector('[data-test="toggle-lyrics"]') as HTMLElement;
-	trigger.setAttribute("title", "Sticky Lyrics");
+	if (!toggle) return;
-	trigger.innerHTML = getStickyIcon();
+	const rect = toggle.getBoundingClientRect();
+	stickyDropdownEl.style.top = `${rect.bottom}px`;
+	stickyDropdownEl.style.left = `${rect.left}px`;
+	stickyDropdownEl.style.width = `${rect.width}px`;
+	stickyDropdownEl.style.display = "block";
+};
 
-	// Block non-click events from reaching the toggle button (capture phase)
+const openStickyDropdown = (toggle: HTMLElement): void => {
-	for (const evtName of [
+	stickyDropdownOpen = true;
-		"pointerdown",
+	document.body.classList.add("rl-dropdown-open");
-		"pointerup",
+	const onWidened = () => {
-		"mousedown",
+		toggle.removeEventListener("transitionend", onWidened);
-		"mouseup",
+		positionDropdown();
-	] as const) {
+	};
-		trigger.addEventListener(
+	toggle.addEventListener("transitionend", onWidened);
-			evtName,
+};
-			(e: Event) => {
+
-				e.stopPropagation();
+const closeStickyDropdown = (): void => {
-			},
+	stickyDropdownOpen = false;
-			true,
+	document.body.classList.remove("rl-dropdown-open");
-		);
+	if (stickyDropdownEl) stickyDropdownEl.style.display = "none";
-	}
+};
+
+const ensureStickyDropdown = (): HTMLElement => {
+	if (stickyDropdownEl) return stickyDropdownEl;
 
-	// Dropdown lives in document.body
 	const dropdown = document.createElement("div");
 	dropdown.className = "sticky-lyrics-dropdown";
 	dropdown.style.display = "none";
@@ -1195,39 +1199,6 @@ const createStickyLyricsDropdown = (): void => {
 		</div>
 	`;
 
-	const openDropdown = (): void => {
-		const buttonRect = lyricsToggle.getBoundingClientRect();
-		const dropWidth = Math.max(buttonRect.width, 150);
-		dropdown.style.top = `${buttonRect.bottom}px`;
-		dropdown.style.left = `${buttonRect.right - dropWidth}px`;
-		dropdown.style.width = `${dropWidth}px`;
-		dropdown.style.display = "block";
-		lyricsToggle.classList.add("sticky-lyrics-open");
-	};
-	const closeDropdown = (): void => {
-		dropdown.style.display = "none";
-		lyricsToggle.classList.remove("sticky-lyrics-open");
-	};
-
-	trigger.addEventListener(
-		"click",
-		(e: MouseEvent) => {
-			e.stopPropagation();
-			const isActive = lyricsToggle.getAttribute("aria-pressed") === "true";
-			if (!isActive) {
-				lyricsToggle.click();
-				safeTimeout(unloads, () => openDropdown(), 150);
-				return;
-			}
-			if (dropdown.style.display === "none") {
-				openDropdown();
-			} else {
-				closeDropdown();
-			}
-		},
-		true,
-	);
-
 	const stickyCheckbox = dropdown.querySelector(
 		'input[data-setting="stickyLyrics"]',
 	) as HTMLInputElement;
@@ -1258,25 +1229,84 @@ const createStickyLyricsDropdown = (): void => {
 		});
 	}
 
-	const handleOutsideClick = (e: MouseEvent): void => {
+	document.body.appendChild(dropdown);
+	stickyDropdownEl = dropdown;
+
+	const outsideHandler = (e: MouseEvent): void => {
+		const trigger = document.querySelector(".sticky-lyrics-trigger");
 		if (
-			!trigger.contains(e.target as Node) &&
+			(!trigger || !trigger.contains(e.target as Node)) &&
 			!dropdown.contains(e.target as Node)
 		) {
-			closeDropdown();
+			closeStickyDropdown();
 		}
 	};
-	document.addEventListener("click", handleOutsideClick);
+	document.addEventListener("click", outsideHandler);
-
-	lyricsToggle.appendChild(trigger);
-	document.body.appendChild(dropdown);
 
 	unloads.add(() => {
-		document.removeEventListener("click", handleOutsideClick);
+		document.removeEventListener("click", outsideHandler);
-		lyricsToggle.classList.remove("sticky-lyrics-open");
+		document.body.classList.remove("rl-dropdown-open");
-		trigger.remove();
 		dropdown.remove();
+		stickyDropdownEl = null;
+		stickyDropdownOpen = false;
 	});
+
+	return dropdown;
+};
+
+const createStickyLyricsDropdown = (): void => {
+	const lyricsToggle = document.querySelector(
+		'[data-test="toggle-lyrics"]',
+	) as HTMLElement;
+	if (!lyricsToggle) return;
+	if (lyricsToggle.querySelector(".sticky-lyrics-trigger")) return;
+
+	ensureStickyDropdown();
+
+	const trigger = document.createElement("div");
+	trigger.className = "sticky-lyrics-trigger";
+	trigger.setAttribute("title", "Sticky Lyrics");
+	trigger.innerHTML = getStickyIcon();
+
+	for (const evtName of [
+		"pointerdown",
+		"pointerup",
+		"mousedown",
+		"mouseup",
+	] as const) {
+		trigger.addEventListener(
+			evtName,
+			(e: Event) => {
+				e.stopPropagation();
+			},
+			true,
+		);
+	}
+
+	trigger.addEventListener(
+		"click",
+		(e: MouseEvent) => {
+			e.stopPropagation();
+			const isActive = lyricsToggle.getAttribute("aria-pressed") === "true";
+			if (!isActive) {
+				lyricsToggle.click();
+				safeTimeout(unloads, () => openStickyDropdown(lyricsToggle), 150);
+				return;
+			}
+			if (stickyDropdownOpen) {
+				closeStickyDropdown();
+			} else {
+				openStickyDropdown(lyricsToggle);
+			}
+		},
+		true,
+	);
+
+	lyricsToggle.appendChild(trigger);
+
+	if (stickyDropdownOpen) {
+		positionDropdown();
+	}
 };
 
 // Sticky Lyrics nav for injected lyrics tab
@@ -1286,37 +1316,38 @@ const tryActivateStickyLyricsTab = (): boolean => {
 	const lyricsToggle = document.querySelector(
 		'[data-test="toggle-lyrics"]',
 	) as HTMLElement;
-	if (!lyricsToggle) return false;
+	if (!lyricsToggle || lyricsToggle.getAttribute("aria-disabled") === "true") {
+		tryActivateSimilarTracksTab();
+		return false;
+	}
 
 	if (syntheticNativeLyrics) {
 		notifyNativeLyricsStateChanged();
 	}
 
-	// Already pressed — nothing to do
 	if (lyricsToggle.getAttribute("aria-pressed") === "true") return true;
 
 	lyricsToggle.click();
 	return true;
 };
 
+const tryActivateSimilarTracksTab = (): void => {
+	const btn = document.querySelector(
+		'[data-test="toggle-similar-tracks"]',
+	) as HTMLElement;
+	if (!btn) return;
+	if (btn.getAttribute("aria-pressed") === "true") return;
+	btn.click();
+};
+
 const syncNativeLyricsAvailability = (): void => {
 	if (!syntheticNativeLyrics) return;
 	notifyNativeLyricsStateChanged();
 };
 
-// Handle ensuring lyrics panel stays open on track change
 const handleStickyLyricsTrackChange = (): void => {
 	if (!settings.stickyLyrics) return;
-
-	safeTimeout(
-		unloads,
-		() => {
-			if (!settings.stickyLyrics) return;
-			syncNativeLyricsAvailability();
 	tryActivateStickyLyricsTab();
-		},
-		1200,
-	);
 };
 
 // Track change sequencing (used by onTrackChange)
@@ -1343,6 +1374,19 @@ function setupStickyLyricsObserver(): void {
 		}
 	});
 
+	// When lyrics toggle becomes disabled → similar tracks; enabled → lyrics
+	observe<HTMLElement>(unloads, '[data-test="toggle-lyrics"][aria-disabled="true"]', () => {
+		if (settings.stickyLyrics) {
+			tryActivateSimilarTracksTab();
+		}
+	});
+
+	observe<HTMLElement>(unloads, '[data-test="toggle-lyrics"]:not([aria-disabled])', () => {
+		if (settings.stickyLyrics) {
+			tryActivateStickyLyricsTab();
+		}
+	});
+
 	// Apply word lyrics when lyrics container appears or reappears
 	observe<HTMLElement>(unloads, '[data-test="now-playing-lyrics"]', () => {
 		if (isTrackChangeRunning) return;
@@ -1704,7 +1748,7 @@ const buildSyntheticLrcText = (response: LyricsApiResponse): string =>
 		.map((line) => {
 			const text =
 				("romanized" in line && line.romanized ? line.romanized : line.text) ?? "";
-			return `${formatLrcTime(line.startTime)}${text}`;
+			return `[${formatLrcTime(line.startTime)}]${text}`;
 		})
 		.join("\n");
 
@@ -1737,6 +1781,33 @@ const clearSyntheticNativeLyrics = (): void => {
 	notifyNativeLyricsStateChanged();
 };
 
+const muteRerenderObserver = (): void => {
+	suppressRerenderObserver = true;
+	if (rerenderObserverMuteTimeout !== null) {
+		window.clearTimeout(rerenderObserverMuteTimeout);
+		rerenderObserverMuteTimeout = null;
+	}
+};
+
+const unmuteRerenderObserverSoon = (): void => {
+	if (rerenderObserverMuteTimeout !== null) {
+		window.clearTimeout(rerenderObserverMuteTimeout);
+	}
+	rerenderObserverMuteTimeout = window.setTimeout(() => {
+		suppressRerenderObserver = false;
+		rerenderObserverMuteTimeout = null;
+	}, 0);
+};
+
+const runWithMutedRerenderObserver = (fn: () => void): void => {
+	muteRerenderObserver();
+	try {
+		fn();
+	} finally {
+		unmuteRerenderObserverSoon();
+	}
+};
+
 const getLyricsRenderHost = (): {
 	container: HTMLElement;
 	inner: HTMLElement;
@@ -1829,6 +1900,8 @@ interface LineEntry {
 let lines: LineEntry[] = [];
 let rerenderObserver: MutationObserver | null = null;
 let rerenderDebounce: number | null = null;
+let suppressRerenderObserver = false;
+let rerenderObserverMuteTimeout: number | null = null;
 const activeWordEls = new Map<number, HTMLSpanElement | null>();
 const activeBgWordEls = new Map<number, HTMLSpanElement | null>();
 let activeLineIdxs = new Set<number>();
@@ -3179,6 +3252,7 @@ const watchForRerender = (): void => {
 	if (!lyricsContainer) return;
 
 	rerenderObserver = new MutationObserver(() => {
+		if (suppressRerenderObserver) return;
 		if (rerenderDebounce !== null) {
 			clearTimeout(rerenderDebounce);
 		}
@@ -3189,6 +3263,7 @@ const watchForRerender = (): void => {
 			const existing = lyricsContainer.querySelector(".rl-wbw-container");
 			if (!existing) {
 				sylTrace("Lyrics overlay: re-applying after Tidal re-render");
+				runWithMutedRerenderObserver(() => {
 					hideTidalLyrics();
 					if (lyricsMode === "line-tidal") {
 						const result = buildTidalLines(cachedTidalRomanizedLines);
@@ -3200,6 +3275,7 @@ const watchForRerender = (): void => {
 						lines = result.lines;
 						applyActiveLineStateNoTransition();
 					}
+				});
 			}
 		}, 100);
 	});
@@ -3215,6 +3291,11 @@ const unwatchRerender = (): void => {
 		clearTimeout(rerenderDebounce);
 		rerenderDebounce = null;
 	}
+	if (rerenderObserverMuteTimeout !== null) {
+		window.clearTimeout(rerenderObserverMuteTimeout);
+		rerenderObserverMuteTimeout = null;
+	}
+	suppressRerenderObserver = false;
 	if (rerenderObserver) {
 		rerenderObserver.disconnect();
 		rerenderObserver = null;

plugins/radiant-lyrics-luna/src/styles.css

@@ -121,34 +121,39 @@
 
 /* When Lyrics toggle is pressed — show divider & adjust icon */
 [data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger {
-	color: white;
+	color: rgb(30, 30, 30);
 	cursor: pointer;
 }
 
 [data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger::before {
-	background: rgba(255, 255, 255, 0.25);
+	background: rgba(0, 0, 0, 0.15);
 }
 
 [data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger:hover {
-	color: rgba(255, 255, 255, 0.6);
+	color: rgba(0, 0, 0, 0.5);
 }
 
-/* Square the Lyrics button bottom-right corner when dropdown is open (right-aligned) */
+/* Animate widening when dropdown opens */
-[data-test="toggle-lyrics"].sticky-lyrics-open {
+[data-test="toggle-lyrics"]:has(.sticky-lyrics-trigger) {
-	border-bottom-right-radius: 0 !important;
+	transition: min-width 0.12s ease-out;
+}
+
+/* Reduce top rounding, square bottom, and kill hover tint when dropdown is open */
+body.rl-dropdown-open [data-test="toggle-lyrics"] {
+	border-radius: 12px 12px 0 0 !important;
+	background-color: rgb(255, 255, 255) !important;
+	min-width: 150px !important;
 }
 
 /* Dropdown — right-aligned under the Lyrics button */
 .sticky-lyrics-dropdown {
 	position: fixed;
-	background: rgba(30, 30, 30, 0.92);
+	background: rgb(255, 255, 255);
-	backdrop-filter: blur(20px);
+	border-radius: 0 0 12px 12px;
-	-webkit-backdrop-filter: blur(20px);
-	border-radius: 16px 0 16px 16px;
 	padding: 8px 12px 10px;
 	box-sizing: border-box;
 	z-index: 10000;
-	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
+	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
 	clip-path: inset(0 -20px -20px -20px);
 	animation: stickyLyricsDropdownIn 0.12s ease-out;
 }
@@ -156,11 +161,11 @@
 @keyframes stickyLyricsDropdownIn {
 	from {
 		opacity: 0;
-		clip-path: inset(0 0 100% 0);
+		transform: translateY(-4px);
 	}
 	to {
 		opacity: 1;
-		clip-path: inset(0 0 0 0);
+		transform: translateY(0);
 	}
 }
 
@@ -175,7 +180,7 @@
 .sticky-lyrics-label {
 	font-size: 11px;
 	font-weight: 600;
-	color: rgba(255, 255, 255, 0.9);
+	color: rgba(0, 0, 0, 0.8);
 	white-space: nowrap;
 }
 
@@ -201,7 +206,7 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background-color: rgba(255, 255, 255, 0.2);
+	background-color: rgba(0, 0, 0, 0.15);
 	transition: 0.3s;
 	border-radius: 18px;
 }
@@ -216,16 +221,16 @@
 	background-color: white;
 	transition: 0.3s;
 	border-radius: 50%;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 .sticky-lyrics-switch input:checked + .sticky-lyrics-slider {
-	background-color: rgb(255, 255, 255);
+	background-color: rgb(30, 30, 30);
 }
 
 .sticky-lyrics-switch input:checked + .sticky-lyrics-slider::before {
 	transform: translateX(16px);
-	background-color: rgb(30, 30, 30);
+	background-color: rgb(255, 255, 255);
 }
 
 /* Segmented control (Line | Word | Syllable) */
@@ -236,7 +241,7 @@
 
 .rl-seg-control {
 	display: flex;
-	background: rgba(255, 255, 255, 0.08);
+	background: rgba(0, 0, 0, 0.06);
 	border-radius: 10px;
 	padding: 2px;
 	gap: 2px;
@@ -247,7 +252,7 @@
 	flex: 1;
 	border: none;
 	background: transparent;
-	color: rgba(255, 255, 255, 0.5);
+	color: rgba(0, 0, 0, 0.4);
 	font-size: 10px;
 	font-weight: 600;
 	padding: 5px 0;
@@ -258,19 +263,27 @@
 }
 
 .rl-seg-btn:hover {
-	color: rgba(255, 255, 255, 0.8);
+	color: rgba(0, 0, 0, 0.7);
-	background: rgba(255, 255, 255, 0.08);
+	background: rgba(0, 0, 0, 0.06);
 }
 
 .rl-seg-btn.rl-seg-active {
-	background: rgba(255, 255, 255, 0.9);
+	background: rgb(30, 30, 30);
-	color: rgb(16, 16, 16);
+	color: rgb(255, 255, 255);
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 /* MARKER: PATCHES (Random Fixes for Tidals Changes) */
 /* These change allot so i gave them their own section */
 
+/* Remove max-width cap on now-playing content - NEW UI*/
+[class*="_contentInner"] {
+	max-width: none !important;
+}
+
+
+/* LEGACY UI */
+
 /* Fixes the new Sticky Header Tidal added.. in the shittest jankiest way possible */
 /* [class*="_stickyHeader"] {
 	background: transparent !important;
@@ -303,13 +316,13 @@
 	width: 0px !important;
 } */
 
-
+/* 
-/* Remove the background color from the small header */
+Remove the background color from the small header
 [class*="_smallHeader"]::before {
 	background-color: transparent !important;
 }
 
-/* fixes Tidals broken mini cover art padding | Cheers Aya <3*/
+Fixes Tidals broken mini cover art padding | Cheers Aya <3
 ._imageBorder_110890a {
 	filter: opacity(0);
 }
@@ -354,4 +367,4 @@
 	._notFullscreenOverlay_1442d60 ._nowPlayingButton_c1a86fa {
 		background-color: rgba(245, 245, 220, 0);
 	}
-}
+} */