From a378699b12b77edb0065379d22596b4cd0c250ef Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 18 Jul 2026 23:30:48 -0700
Subject: [PATCH] fix pronunciation lyrics line not syncing on toggle (#2225)

---
 .../lyrics/synchronized-karaoke-lyrics.tsx    | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/renderer/features/lyrics/synchronized-karaoke-lyrics.tsx b/src/renderer/features/lyrics/synchronized-karaoke-lyrics.tsx
index eab182179..f1188b9ff 100644
--- a/src/renderer/features/lyrics/synchronized-karaoke-lyrics.tsx
+++ b/src/renderer/features/lyrics/synchronized-karaoke-lyrics.tsx
@@ -234,13 +234,10 @@ export const SynchronizedKaraokeLyrics = ({
         syncFromCurrentTimestamp();
     }, [offsetMs, syncFromCurrentTimestamp]);
 
-    // Rebuild animation state when async romaji overlay data arrives after initial mount.
-    // Without this, overlayParts stay empty until a pause/resume triggers rebuildLyricsData().
+    // Rebuild animation state when timed overlay DOM changes (pronunciation, translation,
+    // async romaji, or extra overlays). Without this, overlayParts stay empty/stale until
+    // pause/resume triggers rebuildLyricsData().
     useEffect(() => {
-        if (syncedRomajiLyrics == null) {
-            return;
-        }
-
         const frame = requestAnimationFrame(() => {
             rebuildLyricsData();
 
@@ -254,7 +251,15 @@ export const SynchronizedKaraokeLyrics = ({
         });
 
         return () => cancelAnimationFrame(frame);
-    }, [delayMsRef, rebuildLyricsData, syncAtTime, syncedRomajiLyrics]);
+    }, [
+        delayMsRef,
+        extraOverlayLyrics,
+        pronunciationLyrics,
+        rebuildLyricsData,
+        syncAtTime,
+        syncedRomajiLyrics,
+        translationLyrics,
+    ]);
 
     useEffect(() => {
         statusRef.current = usePlayerStoreBase.getState().player.status;