From f8e9247d7360b48c0e479179b4013dfcd4c4a8b0 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Sat, 25 Mar 2023 09:54:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AF=A6=E6=83=85=E9=A1=B5?= =?UTF-8?q?=E6=AD=8C=E8=AF=8D=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Home/Views/Setting/Vertical/index.tsx | 7 ++----- src/screens/PlayDetail/Horizontal/Lyric.tsx | 15 +++++++++++---- src/screens/PlayDetail/Vertical/Lyric.tsx | 19 +++++++++++++------ 3 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/screens/Home/Views/Setting/Vertical/index.tsx b/src/screens/Home/Views/Setting/Vertical/index.tsx index 3bb124a..30aee20 100644 --- a/src/screens/Home/Views/Setting/Vertical/index.tsx +++ b/src/screens/Home/Views/Setting/Vertical/index.tsx @@ -46,10 +46,8 @@ const Content = () => { style={{ elevation: 1 }} >
drawer.current?.openDrawer()} /> - - -
- + +
{/* */} @@ -67,7 +65,6 @@ const styles = createStyle({ paddingRight: 15, paddingTop: 15, paddingBottom: 15, - flex: 0, }, }) diff --git a/src/screens/PlayDetail/Horizontal/Lyric.tsx b/src/screens/PlayDetail/Horizontal/Lyric.tsx index e22bb10..705733d 100644 --- a/src/screens/PlayDetail/Horizontal/Lyric.tsx +++ b/src/screens/PlayDetail/Horizontal/Lyric.tsx @@ -21,9 +21,10 @@ const LrcLine = memo(({ line, lineNum, activeLine }: { activeLine: number }) => { const theme = useTheme() - const playerPortraitStyle = useSettingValue('playDetail.horizontal.style.lrcFontSize') + const lrcFontSize = useSettingValue('playDetail.horizontal.style.lrcFontSize') const textAlign = useSettingValue('playDetail.style.align') - const lineHeight = setSpText(playerPortraitStyle / 10) * 1.25 + const size = lrcFontSize / 10 + const lineHeight = setSpText(size) * 1.25 return ( @@ -31,14 +32,14 @@ const LrcLine = memo(({ line, lineNum, activeLine }: { ...styles.lineText, textAlign, lineHeight, - }} color={activeLine == lineNum ? theme['c-primary'] : theme['c-350']} size={playerPortraitStyle / 10}>{line.text} + }} textBreakStrategy="simple" color={activeLine == lineNum ? theme['c-primary'] : theme['c-350']} size={size}>{line.text} { line.extendedLyrics.map((lrc, index) => { return ({lrc}) + }} textBreakStrategy="simple" key={index} color={activeLine == lineNum ? theme['c-primary-alpha-200'] : theme['c-350']} size={size * 0.8}>{lrc}) }) } @@ -87,6 +88,11 @@ export default () => { const handleScrollBeginDrag = () => { isPauseScrollRef.current = true if (scrollTimoutRef.current) clearTimeout(scrollTimoutRef.current) + } + + const onScrollEndDrag = () => { + if (!isPauseScrollRef.current) return + if (scrollTimoutRef.current) clearTimeout(scrollTimoutRef.current) scrollTimoutRef.current = setTimeout(() => { scrollTimoutRef.current = null isPauseScrollRef.current = false @@ -157,6 +163,7 @@ export default () => { ListHeaderComponent={spaceComponent} ListFooterComponent={spaceComponent} onScrollBeginDrag={handleScrollBeginDrag} + onScrollEndDrag={onScrollEndDrag} fadingEdgeLength={100} initialNumToRender={Math.max(line + 10, 10)} onScrollToIndexFailed={handleScrollToIndexFailed} diff --git a/src/screens/PlayDetail/Vertical/Lyric.tsx b/src/screens/PlayDetail/Vertical/Lyric.tsx index 387656f..b8b3724 100644 --- a/src/screens/PlayDetail/Vertical/Lyric.tsx +++ b/src/screens/PlayDetail/Vertical/Lyric.tsx @@ -59,9 +59,10 @@ const LrcLine = memo(({ line, lineNum, activeLine }: { activeLine: number }) => { const theme = useTheme() - const playerPortraitStyle = useSettingValue('playDetail.vertical.style.lrcFontSize') + const lrcFontSize = useSettingValue('playDetail.vertical.style.lrcFontSize') const textAlign = useSettingValue('playDetail.style.align') - const lineHeight = setSpText(playerPortraitStyle / 10) * 1.25 + const size = lrcFontSize / 10 + const lineHeight = setSpText(size) * 1.25 return ( @@ -69,14 +70,14 @@ const LrcLine = memo(({ line, lineNum, activeLine }: { ...styles.lineText, textAlign, lineHeight, - }} color={activeLine == lineNum ? theme['c-primary'] : theme['c-350']} size={playerPortraitStyle / 10}>{line.text} + }} textBreakStrategy="simple" color={activeLine == lineNum ? theme['c-primary'] : theme['c-350']} size={size}>{line.text} { line.extendedLyrics.map((lrc, index) => { return ({lrc}) + }} textBreakStrategy="simple" key={index} color={activeLine == lineNum ? theme['c-primary-alpha-200'] : theme['c-350']} size={size * 0.8}>{lrc}) }) } @@ -125,6 +126,11 @@ export default () => { const handleScrollBeginDrag = () => { isPauseScrollRef.current = true if (scrollTimoutRef.current) clearTimeout(scrollTimoutRef.current) + } + + const onScrollEndDrag = () => { + if (!isPauseScrollRef.current) return + if (scrollTimoutRef.current) clearTimeout(scrollTimoutRef.current) scrollTimoutRef.current = setTimeout(() => { scrollTimoutRef.current = null isPauseScrollRef.current = false @@ -195,6 +201,7 @@ export default () => { ListHeaderComponent={spaceComponent} ListFooterComponent={spaceComponent} onScrollBeginDrag={handleScrollBeginDrag} + onScrollEndDrag={onScrollEndDrag} fadingEdgeLength={100} initialNumToRender={Math.max(line + 10, 10)} onScrollToIndexFailed={handleScrollToIndexFailed} @@ -213,8 +220,8 @@ const styles = createStyle({ paddingTop: '80%', }, line: { - paddingTop: 10, - paddingBottom: 10, + marginTop: 10, + marginBottom: 10, // opacity: 0, }, lineText: {