fix: scroll paroles
This commit is contained in:
@@ -868,7 +868,30 @@ const MusicDetails = ({ route }) => {
|
|||||||
|
|
||||||
// Auto-scroll lyrics to keep the current line visible
|
// Auto-scroll lyrics to keep the current line visible
|
||||||
const lyricsRef = useRef(null);
|
const lyricsRef = useRef(null);
|
||||||
|
const sectionYRef = useRef({});
|
||||||
|
const lineRelativeYRef = useRef({});
|
||||||
const lineYRef = 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(() => {
|
useEffect(() => {
|
||||||
const y = lineYRef.current?.[currentLineIdx];
|
const y = lineYRef.current?.[currentLineIdx];
|
||||||
if (lyricsRef.current && typeof y === "number") {
|
if (lyricsRef.current && typeof y === "number") {
|
||||||
@@ -1089,6 +1112,13 @@ const MusicDetails = ({ route }) => {
|
|||||||
{sections.map((section, sectionIdx) => (
|
{sections.map((section, sectionIdx) => (
|
||||||
<View
|
<View
|
||||||
key={section.key}
|
key={section.key}
|
||||||
|
onLayout={(e) =>
|
||||||
|
registerSectionOffset(
|
||||||
|
section.key,
|
||||||
|
e.nativeEvent?.layout?.y,
|
||||||
|
section.lines
|
||||||
|
)
|
||||||
|
}
|
||||||
style={[
|
style={[
|
||||||
styles.sectionContainer,
|
styles.sectionContainer,
|
||||||
sectionIdx > 0 ? styles.sectionSpacing : null,
|
sectionIdx > 0 ? styles.sectionSpacing : null,
|
||||||
@@ -1102,8 +1132,11 @@ const MusicDetails = ({ route }) => {
|
|||||||
<View
|
<View
|
||||||
key={`line-${line.globalIdx}`}
|
key={`line-${line.globalIdx}`}
|
||||||
onLayout={(e) => {
|
onLayout={(e) => {
|
||||||
lineYRef.current[line.globalIdx] =
|
registerLineRelativeOffset(
|
||||||
e.nativeEvent.layout.y;
|
line.globalIdx,
|
||||||
|
section.key,
|
||||||
|
e.nativeEvent?.layout?.y ?? 0
|
||||||
|
);
|
||||||
}}
|
}}
|
||||||
style={{
|
style={{
|
||||||
marginBottom: 8,
|
marginBottom: 8,
|
||||||
|
|||||||
Reference in New Issue
Block a user