renil/lx-music-mobile-mod
1
0
Fork 0
mirror of https://github.com/ikun0014/lx-music-mobile.git synced 2025-07-03 08:12:09 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化详情页歌词显示

Browse Source
This commit is contained in:
lyswhut 2023-03-25 09:54:43 +08:00
parent fe8dbe81b2
commit f8e9247d73
3 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/screens/Home/Views/Setting/Vertical/index.tsx
View File

@ -46,10 +46,8 @@ const Content = () => {
style={{ elevation: 1 }}
>
<Header ref={headerRef} onShowNavBar={() => drawer.current?.openDrawer()} />
<ScrollView keyboardShouldPersistTaps={'always'}>
<View style={styles.main}>
<Main ref={mainRef} />
</View>
<ScrollView contentContainerStyle={styles.main} keyboardShouldPersistTaps={'always'}>
<Main ref={mainRef} />
</ScrollView>
{/* <View style={styles.container}>
</View> */}
@ -67,7 +65,6 @@ const styles = createStyle({
paddingRight: 15,
paddingTop: 15,
paddingBottom: 15,
flex: 0,
},
})

15
src/screens/PlayDetail/Horizontal/Lyric.tsx
View File

@ -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 (
<View style={styles.line}>
@ -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}</Text>
}} textBreakStrategy="simple" color={activeLine == lineNum ? theme['c-primary'] : theme['c-350']} size={size}>{line.text}</Text>
{
line.extendedLyrics.map((lrc, index) => {
return (<Text style={{
...styles.lineTranslationText,
textAlign,
lineHeight: lineHeight * 0.8,
}} key={index} color={activeLine == lineNum ? theme['c-primary-alpha-200'] : theme['c-350']} size={playerPortraitStyle / 10 * 0.8}>{lrc}</Text>)
}} textBreakStrategy="simple" key={index} color={activeLine == lineNum ? theme['c-primary-alpha-200'] : theme['c-350']} size={size * 0.8}>{lrc}</Text>)
})
}
</View>
@ -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}

19
src/screens/PlayDetail/Vertical/Lyric.tsx
View File

@ -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 (
<View style={styles.line}>
@ -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}</Text>
}} textBreakStrategy="simple" color={activeLine == lineNum ? theme['c-primary'] : theme['c-350']} size={size}>{line.text}</Text>
{
line.extendedLyrics.map((lrc, index) => {
return (<Text style={{
...styles.lineTranslationText,
textAlign,
lineHeight: lineHeight * 0.8,
}} key={index} color={activeLine == lineNum ? theme['c-primary-alpha-200'] : theme['c-350']} size={playerPortraitStyle / 10 * 0.8}>{lrc}</Text>)
}} textBreakStrategy="simple" key={index} color={activeLine == lineNum ? theme['c-primary-alpha-200'] : theme['c-350']} size={size * 0.8}>{lrc}</Text>)
})
}
</View>
@ -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: {