From 4009b2c6d837bb476c2e3cf3c0b86432502825f3 Mon Sep 17 00:00:00 2001
From: leon-morival <leon.morival@gmail.com>
Date: Mon, 3 Nov 2025 14:33:18 +0100
Subject: [PATCH] fix: scroll paroles

---
 src/screens/Library/MusicDetails.web.js | 37 +++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/screens/Library/MusicDetails.web.js b/src/screens/Library/MusicDetails.web.js
index 8bebb08..dc77215 100644
--- a/src/screens/Library/MusicDetails.web.js
+++ b/src/screens/Library/MusicDetails.web.js
@@ -868,7 +868,30 @@ const MusicDetails = ({ route }) => {
 
   // Auto-scroll lyrics to keep the current line visible
   const lyricsRef = useRef(null);
+  const sectionYRef = useRef({});
+  const lineRelativeYRef = useRef({});
   const lineYRef = useRef({});
+  const updateLineAbsoluteOffset = useCallback((lineIdx) => {
+    const entry = lineRelativeYRef.current?.[lineIdx];
+    if (!entry) return;
+    const sectionY = sectionYRef.current?.[entry.sectionKey];
+    if (typeof sectionY !== "number") return;
+    lineYRef.current[lineIdx] = sectionY + entry.relativeY;
+  }, []);
+  const registerLineRelativeOffset = useCallback(
+    (lineIdx, sectionKey, relativeY) => {
+      lineRelativeYRef.current[lineIdx] = { sectionKey, relativeY };
+      updateLineAbsoluteOffset(lineIdx);
+    },
+    [updateLineAbsoluteOffset]
+  );
+  const registerSectionOffset = useCallback(
+    (sectionKey, y, lines = []) => {
+      sectionYRef.current[sectionKey] = y;
+      lines.forEach((line) => updateLineAbsoluteOffset(line.globalIdx));
+    },
+    [updateLineAbsoluteOffset]
+  );
   useEffect(() => {
     const y = lineYRef.current?.[currentLineIdx];
     if (lyricsRef.current && typeof y === "number") {
@@ -1089,6 +1112,13 @@ const MusicDetails = ({ route }) => {
                 {sections.map((section, sectionIdx) => (
                   <View
                     key={section.key}
+                    onLayout={(e) =>
+                      registerSectionOffset(
+                        section.key,
+                        e.nativeEvent?.layout?.y,
+                        section.lines
+                      )
+                    }
                     style={[
                       styles.sectionContainer,
                       sectionIdx > 0 ? styles.sectionSpacing : null,
@@ -1102,8 +1132,11 @@ const MusicDetails = ({ route }) => {
                       <View
                         key={`line-${line.globalIdx}`}
                         onLayout={(e) => {
-                          lineYRef.current[line.globalIdx] =
-                            e.nativeEvent.layout.y;
+                          registerLineRelativeOffset(
+                            line.globalIdx,
+                            section.key,
+                            e.nativeEvent?.layout?.y ?? 0
+                          );
                         }}
                         style={{
                           marginBottom: 8,