From 35fa55051235f43b9b24ff8c34d3dc618263e389 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Tue, 25 May 2021 16:20:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=9D=E8=AF=95=E4=BF=AE=E5=A4=8D=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E8=AF=A6=E6=83=85=E9=A1=B5=E6=AD=8C=E8=AF=8D=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4UI=E5=86=BB=E7=BB=93=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                          |  2 +-
 .../PlayDetail/Portrait/Player/Lyric.js       | 20 ++++++++++-------
 .../PlayDetail/Portrait/Player/index.js       | 22 ++++++++++++++-----
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/publish/changeLog.md b/publish/changeLog.md
index deb53a2d..db8aff43 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -1,4 +1,4 @@
 ### 修复
 
 - 尝试修复软件启动时恢复上一次播放的歌曲可能导致软件崩溃的问题
-- 修复播放详情页歌词的一个滚动错误
+- 尝试修复播放详情页歌词导致UI冻结的问题
diff --git a/src/screens/PlayDetail/Portrait/Player/Lyric.js b/src/screens/PlayDetail/Portrait/Player/Lyric.js
index 35aac910..3431cf25 100644
--- a/src/screens/PlayDetail/Portrait/Player/Lyric.js
+++ b/src/screens/PlayDetail/Portrait/Player/Lyric.js
@@ -41,7 +41,7 @@ export default memo(() => {
 
   // const imgWidth = useMemo(() => layout.width * 0.75, [layout.width])
   const handleScrollToActive = useCallback((index = lineRef.current) => {
-    if (scrollViewRef.current && linesRef.current.length) {
+    if (scrollViewRef.current) {
       scrollViewRef.current.scrollToIndex({
         index,
         animated: true,
@@ -68,17 +68,13 @@ export default memo(() => {
   }
 
   useEffect(() => {
-    setTimeout(() => {
-      isPauseScrollRef.current = false
-      handleScrollToActive()
-    }, 100)
     return () => {
       if (scrollTimoutRef.current) {
         clearTimeout(scrollTimoutRef.current)
         scrollTimoutRef.current = null
       }
     }
-  }, [handleScrollToActive])
+  }, [])
 
   useEffect(() => {
     linesRef.current = lyricLines
@@ -89,6 +85,10 @@ export default memo(() => {
     })
     if (isFirstSetLrc.current) {
       isFirstSetLrc.current = false
+      setTimeout(() => {
+        isPauseScrollRef.current = false
+        handleScrollToActive()
+      }, 100)
     } else {
       handleScrollToActive(0)
     }
@@ -96,7 +96,7 @@ export default memo(() => {
 
   useEffect(() => {
     lineRef.current = line
-    if (!scrollViewRef.current || !linesRef.current.length || isPauseScrollRef.current) return
+    if (!scrollViewRef.current || isPauseScrollRef.current) return
     handleScrollToActive()
   }, [handleScrollToActive, line])
 
@@ -132,6 +132,8 @@ export default memo(() => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    paddingLeft: 10,
+    paddingRight: 10,
     // backgroundColor: 'rgba(0,0,0,0.1)',
   },
   space: {
@@ -141,7 +143,9 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     textAlign: 'center',
     fontSize: 16,
-    lineHeight: 28,
+    lineHeight: 22,
+    paddingTop: 5,
+    paddingBottom: 5,
     // opacity: 0,
   },
 })
diff --git a/src/screens/PlayDetail/Portrait/Player/index.js b/src/screens/PlayDetail/Portrait/Player/index.js
index 9475ee0d..783b7859 100644
--- a/src/screens/PlayDetail/Portrait/Player/index.js
+++ b/src/screens/PlayDetail/Portrait/Player/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, memo, useState, useMemo } from 'react'
+import React, { useEffect, useCallback, memo, useState, useMemo, useRef } from 'react'
 import { View, StyleSheet } from 'react-native'
 
 import Header from '../components/Header'
@@ -11,6 +11,20 @@ import Pic from './Pic'
 import Lyric from './Lyric'
 import { screenkeepAwake, screenUnkeepAwake } from '@/utils/utils'
 
+const LyricPage = ({ activeIndex }) => {
+  const initedRef = useRef(false)
+  const lyric = useMemo(() => <Lyric />, [])
+  switch (activeIndex) {
+    // case 3:
+    case 1:
+      if (!initedRef.current) initedRef.current = true
+      return lyric
+    default:
+      return initedRef.current ? lyric : null
+  }
+  // return activeIndex == 0 || activeIndex == 1 ? setting : null
+}
+
 // global.iskeep = false
 export default memo(() => {
   const theme = useGetter('common', 'theme')
@@ -25,8 +39,6 @@ export default memo(() => {
     }
   }, [])
 
-  const pic = useMemo(() => <Pic />, [])
-
   return (
     <>
       <Header />
@@ -37,10 +49,10 @@ export default memo(() => {
           style={styles.pagerView}
         >
           <View collapsable={false} style={styles.pageStyle}>
-            {pageIndex == 0 ? pic : null}
+            <Pic />
           </View>
           <View collapsable={false} style={styles.pageStyle}>
-            {pageIndex == 1 ? <Lyric /> : null}
+            <LyricPage activeIndex={pageIndex} />
           </View>
         </PagerView>
         <View style={styles.pageIndicator}>