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

优化播放设置面板UI

Browse Source
This commit is contained in:
lyswhut 2023-03-24 09:28:01 +08:00
parent 5c44ffbc4a
commit 1136b13bad
4 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/screens/PlayDetail/components/SettingLrcFontSize.tsx
View File

@ -31,9 +31,9 @@ const LrcFontSize = () => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.title}>{t('player_setting_lrc_font_size')}</Text> <Text>{t('player_setting_lrc_font_size')}</Text>
<View style={styles.content}> <View style={styles.content}>
<Text color={theme['c-font-label']}>{isSliding ? sliderSize : lrcFontSize}</Text> <Text style={styles.label} color={theme['c-font-label']}>{isSliding ? sliderSize : lrcFontSize}</Text>
<Slider <Slider
minimumValue={100} minimumValue={100}
maximumValue={300} maximumValue={300}

16
src/screens/PlayDetail/components/SettingPlaybackRate.tsx
View File

@ -15,7 +15,7 @@ import ButtonPrimary from '@/components/common/ButtonPrimary'
const Volume = () => { const Volume = () => {
const theme = useTheme() const theme = useTheme()
const playbackRate = useSettingValue('player.playbackRate') * 10 const playbackRate = useSettingValue('player.playbackRate') * 100
const [sliderSize, setSliderSize] = useState(playbackRate) const [sliderSize, setSliderSize] = useState(playbackRate)
const [isSliding, setSliding] = useState(false) const [isSliding, setSliding] = useState(false)
const t = useI18n() const t = useI18n()
@ -26,18 +26,18 @@ const Volume = () => {
const handleValueChange: SliderProps['onValueChange'] = value => { const handleValueChange: SliderProps['onValueChange'] = value => {
value = Math.trunc(value) value = Math.trunc(value)
setSliderSize(value) setSliderSize(value)
void setPlaybackRate(parseFloat((value / 10).toFixed(1))) void setPlaybackRate(parseFloat((value / 100).toFixed(2)))
} }
const handleSlidingComplete: SliderProps['onSlidingComplete'] = value => { const handleSlidingComplete: SliderProps['onSlidingComplete'] = value => {
setSliding(false) setSliding(false)
value = Math.trunc(value) value = Math.trunc(value)
if (playbackRate == value) return if (playbackRate == value) return
const rate = value / 10 const rate = value / 100
void setLyricPlaybackRate(rate) void setLyricPlaybackRate(rate)
updateSetting({ 'player.playbackRate': rate }) updateSetting({ 'player.playbackRate': rate })
} }
const handleReset = () => { const handleReset = () => {
setSliderSize(10) setSliderSize(100)
void setPlaybackRate(1) void setPlaybackRate(1)
void setLyricPlaybackRate(1) void setLyricPlaybackRate(1)
updateSetting({ 'player.playbackRate': 1 }) updateSetting({ 'player.playbackRate': 1 })
@ -45,12 +45,12 @@ const Volume = () => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.title}>{t('player_setting_playback_rate')}</Text> <Text>{t('player_setting_playback_rate')}</Text>
<View style={styles.content}> <View style={styles.content}>
<Text color={theme['c-font-label']}>{`${((isSliding ? sliderSize : playbackRate) / 10).toFixed(1)}x`}</Text> <Text style={styles.label} color={theme['c-font-label']}>{`${((isSliding ? sliderSize : playbackRate) / 100).toFixed(2)}x`}</Text>
<Slider <Slider
minimumValue={5} minimumValue={60}
maximumValue={20} maximumValue={200}
onSlidingComplete={handleSlidingComplete} onSlidingComplete={handleSlidingComplete}
onValueChange={handleValueChange} onValueChange={handleValueChange}
onSlidingStart={handleSlidingStart} onSlidingStart={handleSlidingStart}

4
src/screens/PlayDetail/components/SettingVolume.tsx
View File

@ -35,9 +35,9 @@ const Volume = () => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.title}>{t('player_setting_volume')}</Text> <Text>{t('player_setting_volume')}</Text>
<View style={styles.content}> <View style={styles.content}>
<Text color={theme['c-font-label']}>{isSliding ? sliderSize : volume}</Text> <Text style={styles.label} color={theme['c-font-label']}>{isSliding ? sliderSize : volume}</Text>
<Slider <Slider
minimumValue={0} minimumValue={0}
maximumValue={100} maximumValue={100}

6
src/screens/PlayDetail/components/style.ts
View File

@ -7,8 +7,12 @@ export default createStyle({
marginBottom: 15, marginBottom: 15,
alignItems: 'flex-start', alignItems: 'flex-start',
}, },
title: { // title: {
// },
label: {
width: 40,
textAlign: 'center',
}, },
content: { content: {
flexGrow: 0, flexGrow: 0,