renil/lx-music-mobile-mod
1
0
Fork 0
mirror of https://github.com/ikun0014/lx-music-mobile.git synced 2025-07-04 23:38:55 +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 (
<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}>
<Text color={theme['c-font-label']}>{isSliding ? sliderSize : lrcFontSize}</Text>
<Text style={styles.label} color={theme['c-font-label']}>{isSliding ? sliderSize : lrcFontSize}</Text>
<Slider
minimumValue={100}
maximumValue={300}

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

@ -15,7 +15,7 @@ import ButtonPrimary from '@/components/common/ButtonPrimary'
const Volume = () => {
const theme = useTheme()
const playbackRate = useSettingValue('player.playbackRate') * 10
const playbackRate = useSettingValue('player.playbackRate') * 100
const [sliderSize, setSliderSize] = useState(playbackRate)
const [isSliding, setSliding] = useState(false)
const t = useI18n()
@ -26,18 +26,18 @@ const Volume = () => {
const handleValueChange: SliderProps['onValueChange'] = value => {
value = Math.trunc(value)
setSliderSize(value)
void setPlaybackRate(parseFloat((value / 10).toFixed(1)))
void setPlaybackRate(parseFloat((value / 100).toFixed(2)))
}
const handleSlidingComplete: SliderProps['onSlidingComplete'] = value => {
setSliding(false)
value = Math.trunc(value)
if (playbackRate == value) return
const rate = value / 10
const rate = value / 100
void setLyricPlaybackRate(rate)
updateSetting({ 'player.playbackRate': rate })
}
const handleReset = () => {
setSliderSize(10)
setSliderSize(100)
void setPlaybackRate(1)
void setLyricPlaybackRate(1)
updateSetting({ 'player.playbackRate': 1 })
@ -45,12 +45,12 @@ const Volume = () => {
return (
<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}>
<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
minimumValue={5}
maximumValue={20}
minimumValue={60}
maximumValue={200}
onSlidingComplete={handleSlidingComplete}
onValueChange={handleValueChange}
onSlidingStart={handleSlidingStart}

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

@ -35,9 +35,9 @@ const Volume = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>{t('player_setting_volume')}</Text>
<Text>{t('player_setting_volume')}</Text>
<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
minimumValue={0}
maximumValue={100}

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

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