Fixed Context Menus & other things

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

@@ -1319,10 +1319,12 @@ const handleStickyLyricsTrackChange = (): void => {
 	);
 };
 
-
 // MARKER: Injected API Lyrics (for non tidal lyric tracks)
 
 let injectedTablistClickCleanup: (() => void) | null = null;
+let isTrackChangeRunning = false;
+let trackChangeRunSeq = 0;
+const hiddenPanelsByInjected = new Set<HTMLElement>();
 
 const getTabsRoot = (): HTMLElement | null => {
 	const roots = Array.from(
@@ -1338,12 +1340,16 @@ const hideInjectedLyricsTab = (): void => {
 	if (!injectedTabEl || !injectedPanelEl) return;
 	const root = getTabsRoot();
 	if (root) {
+		for (const panel of hiddenPanelsByInjected) {
+			panel.style.removeProperty("display");
+		}
+		hiddenPanelsByInjected.clear();
+
 		const nativePanels = Array.from(
 			root.querySelectorAll('div[role="tabpanel"]'),
 		) as HTMLElement[];
 		for (const panel of nativePanels) {
 			if (panel === injectedPanelEl) continue;
-			panel.removeAttribute("aria-hidden");
 			panel.style.removeProperty("display");
 		}
 	}
@@ -1402,14 +1408,21 @@ const showInjectedLyricsTab = (): void => {
 	const nativePanels = Array.from(
 		root.querySelectorAll('div[role="tabpanel"]'),
 	) as HTMLElement[];
+	for (const panel of hiddenPanelsByInjected) {
+		panel.style.removeProperty("display");
+	}
+	hiddenPanelsByInjected.clear();
+
 	for (const tab of tabs) {
 		if (tab === injectedTabEl) continue;
 		if (activeTabClass) tab.classList.remove(activeTabClass);
 	}
 	for (const panel of nativePanels) {
 		if (panel === injectedPanelEl) continue;
-		panel.setAttribute("aria-hidden", "true");
+		if (panel.classList.contains("react-tabs__tab-panel--selected")) {
 			panel.style.display = "none";
+			hiddenPanelsByInjected.add(panel);
+		}
 	}
 
 	injectedTabEl.setAttribute("aria-selected", "true");
@@ -1626,6 +1639,12 @@ function setupStickyLyricsObserver(): void {
 
 	// Apply word lyrics when lyrics container appears or reappears
 	observe<HTMLElement>(unloads, '[data-test="lyrics-lines"]', () => {
+		if (isTrackChangeRunning) return;
+		const lyricsLines = document.querySelector(
+			'[data-test="lyrics-lines"]',
+		) as HTMLElement;
+		if (lyricsLines?.querySelector(".rl-wbw-container")) return;
+
 		if (lyricsMode === "line-tidal") {
 			void reapplyTidalLines();
 		} else if (lyricsData) {
@@ -2805,6 +2824,23 @@ const stopTidalFollowLoop = (): void => {
 	}
 };
 
+// smthn GPT 5.3 Codex did
+const setTidalFallbackLineWordState = (
+	lineEl: HTMLElement,
+	active: boolean,
+): void => {
+	const words = lineEl.querySelectorAll(".rl-wbw-word");
+	for (const word of words) {
+		if (active) {
+			word.classList.add("rl-wbw-active");
+			word.classList.remove("rl-wbw-finished");
+		} else {
+			word.classList.remove("rl-wbw-active");
+			word.classList.add("rl-wbw-finished");
+		}
+	}
+};
+
 const updateTidalFollowActiveLine = (): void => {
 	if (!isActive || lyricsMode !== "line-tidal" || lines.length === 0) return;
 
@@ -2824,6 +2860,7 @@ const updateTidalFollowActiveLine = (): void => {
 		if (!newActiveSet.has(idx) && idx < lines.length) {
 			lines[idx].el.classList.remove("rl-wbw-line-active");
 			lines[idx].el.removeAttribute("data-current");
+			setTidalFallbackLineWordState(lines[idx].el, false);
 		}
 	}
 
@@ -2832,6 +2869,7 @@ const updateTidalFollowActiveLine = (): void => {
 		lines[activeIndex].el.classList.remove("rl-pos-1", "rl-pos-2", "rl-pos-3");
 		lines[activeIndex].el.setAttribute("data-current", "true");
 	}
+	setTidalFallbackLineWordState(lines[activeIndex].el, true);
 
 	const prevPrimary = primaryLineIdx;
 	primaryLineIdx = activeIndex;
@@ -3192,7 +3230,7 @@ const startTickLoop = (): void => {
 				span.removeAttribute("data-current");
 			}
 
-			if (nowMs - lastLogTime >= 1000) {
+			if (!isLineStyle && nowMs - lastLogTime >= 1000) {
 				lastLogTime = nowMs;
 				sylLog(`[RL-Syllable] Playback | ${nowMs.toFixed(0)} ms`);
 			}
@@ -3430,10 +3468,12 @@ const startTickLoop = (): void => {
 							word.el.style.animation = wipe + sylAnim;
 						}
 						activeWordEls.set(lineIdx, word.el);
+						if (!isLineStyle) {
 							sylLog(
 								`[RL-Syllable] Word/Syllable "${word.el.textContent}" | ${word.start} ms - ${word.end} ms   [${nowMs.toFixed(0)} ms]`,
 							);
 						}
+					}
 				} else {
 					word.el.classList.remove(CLS_ACTIVE);
 					if (isSyl) word.el.style.animation = "";
@@ -3510,8 +3550,10 @@ const startTickLoop = (): void => {
 const onTrackChange = async (): Promise<void> => {
 	teardown();
 
-	const token = ++trackChangeToken;
-
+	const runId = ++trackChangeRunSeq;
+	isTrackChangeRunning = true;
+	const token = ++trackChangeToken;s
+	try {
 		const trackInfo = await getTrackInfo();
 		if (token !== trackChangeToken) return;
 		if (!trackInfo) {
@@ -3580,7 +3622,9 @@ const onTrackChange = async (): Promise<void> => {
 			);
 		}
 		lyricsData =
-		response.type === "Word" ? response.data : normalizeLineData(response.data);
+			response.type === "Word"
+				? response.data
+				: normalizeLineData(response.data);
 		lyricsResponse = response;
 		isActive = true;
 		if (!lyricsData || lyricsData.length === 0) {
@@ -3601,6 +3645,11 @@ const onTrackChange = async (): Promise<void> => {
 
 		// Start the highlight loop
 		startTickLoop();
+	} finally {
+		if (runId === trackChangeRunSeq) {
+			isTrackChangeRunning = false;
+		}
+	}
 };
 
 // Reapply word lyrics (for tab switch back)