修复播放详情页歌词滚动问题（#518）

publish/changeLog.md

@@ -1,19 +1,6 @@
 我们发布了关于 LX Music 项目发展调整与新项目计划的说明，
 详情看： https://github.com/lyswhut/lx-music-desktop/issues/1912
 
-### 新增
-
-- 新增 设置-基本设置-启动后打开播放详情界面 设置，默认关闭（#502 @mingcc7）
-
 ### 修复
 
-- 修复重复的数据初始化调用
+- 修复播放详情页歌词滚动问题（#518）
-- 修复导入歌单时可能会导致歌单数据存储异常的问题（#500）
-
-### 变更
-
-- 设置-播放设置-优先播放320k音质选项改为“优先播放的音质”，允许选择更高优先播放的音质，如果歌曲及音源支持的话（#487）
-
-### 其他
-
-- 更新 React native 到 v0.73.8

src/components/MetadataEditModal/MetadataForm.tsx

@@ -126,7 +126,8 @@ export default forwardRef<MetadataFormType, {}>((props, ref) => {
     }).finally(() => {
       matcheingPic.delete(path)
     })
-  }, [data.albumName, data.interval, data.name, data.singer, isUnmounted, t])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data.albumName, data.name, data.singer, t])
   const handleOnlineMatchLyric = useCallback(() => {
     let path = filePath.current
     if (matcheingLrc.has(path)) return
@@ -164,7 +165,8 @@ export default forwardRef<MetadataFormType, {}>((props, ref) => {
     }).finally(() => {
       matcheingLrc.delete(path)
     })
-  }, [data.albumName, data.interval, data.name, data.singer, isUnmounted, t])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data.albumName, data.name, data.singer, t])
   const handleUpdatePic = useCallback((path: string) => {
     setData(data => {
       return { ...data, pic: path }

src/screens/Home/index.tsx

@@ -23,7 +23,8 @@ export default ({ componentId }: Props) => {
     if (settingState.setting['player.startupPushPlayDetailScreen']) {
       navigations.pushPlayDetailScreen(componentId, true)
     }
-  }, [componentId])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   return (
     <PageContent>

src/screens/PlayDetail/Horizontal/Lyric.tsx

@@ -101,7 +101,7 @@ export default () => {
   // }, [playMusicInfo])
 
   // const imgWidth = useMemo(() => layout.width * 0.75, [layout.width])
-  const handleScrollToActive = useCallback((index = lineRef.current.line) => {
+  const handleScrollToActive = (index = lineRef.current.line) => {
     if (index < 0) return
     if (flatListRef.current) {
       // console.log('handleScrollToActive', index)
@@ -130,7 +130,7 @@ export default () => {
         } catch {}
       }
     }
-  }, [line])
+  }
 
   const handleScroll = ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => {
     scrollInfoRef.current = nativeEvent
@@ -207,7 +207,8 @@ export default () => {
         }, 100)
       }
     })
-  }, [handleScrollToActive, lyricLines])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lyricLines])
 
   useEffect(() => {
     if (line < 0) return
@@ -224,7 +225,8 @@ export default () => {
       delayScrollTimeout.current = null
       handleScrollToActive()
     }, 600)
-  }, [handleScrollToActive, line])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [line])
 
   useEffect(() => {
     requestAnimationFrame(() => {

src/screens/PlayDetail/Vertical/Lyric.tsx

@@ -141,7 +141,7 @@ export default () => {
   // }, [playMusicInfo])
 
   // const imgWidth = useMemo(() => layout.width * 0.75, [layout.width])
-  const handleScrollToActive = useCallback((index = lineRef.current.line) => {
+  const handleScrollToActive = (index = lineRef.current.line) => {
     if (index < 0) return
     if (flatListRef.current) {
       // console.log('handleScrollToActive', index)
@@ -170,7 +170,7 @@ export default () => {
         } catch {}
       }
     }
-  }, [line])
+  }
 
   const handleScroll = ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => {
     scrollInfoRef.current = nativeEvent
@@ -247,7 +247,8 @@ export default () => {
         }, 100)
       }
     })
-  }, [handleScrollToActive, lyricLines])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lyricLines])
 
   useEffect(() => {
     if (line < 0) return
@@ -264,7 +265,8 @@ export default () => {
       delayScrollTimeout.current = null
       handleScrollToActive()
     }, 600)
-  }, [handleScrollToActive, line])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [line])
 
   useEffect(() => {
     requestAnimationFrame(() => {