mirror of
https://github.com/ikun0014/lx-music-mobile.git
synced 2025-07-16 05:42:09 +08:00
88 lines
2.2 KiB
JavaScript
88 lines
2.2 KiB
JavaScript
import React, { useCallback, memo, useMemo, useEffect } from 'react'
|
|
import { Text, StyleSheet, TouchableOpacity } from 'react-native'
|
|
import { Icon } from '@/components/common/Icon'
|
|
import { useGetter, useDispatch } from '@/store'
|
|
import { toast } from '@/utils/tools'
|
|
import { useTranslation } from '@/plugins/i18n'
|
|
const playNextModes = [
|
|
'listLoop',
|
|
'random',
|
|
'list',
|
|
'singleLoop',
|
|
]
|
|
|
|
export default memo(({ width }) => {
|
|
const togglePlayMethod = useGetter('common', 'togglePlayMethod')
|
|
const theme = useGetter('common', 'theme')
|
|
const setPlayNextMode = useDispatch('common', 'setPlayNextMode')
|
|
const { t } = useTranslation()
|
|
|
|
const toggleNextPlayMode = () => {
|
|
let index = playNextModes.indexOf(togglePlayMethod)
|
|
if (++index >= playNextModes.length) index = -1
|
|
const mode = playNextModes[index]
|
|
setPlayNextMode(mode || '')
|
|
let modeName
|
|
switch (mode) {
|
|
case 'listLoop':
|
|
modeName = 'play_list_loop'
|
|
break
|
|
case 'random':
|
|
modeName = 'play_list_random'
|
|
break
|
|
case 'list':
|
|
modeName = 'play_list_order'
|
|
break
|
|
case 'singleLoop':
|
|
modeName = 'play_single_loop'
|
|
break
|
|
default:
|
|
modeName = 'play_single'
|
|
break
|
|
}
|
|
toast(t(modeName))
|
|
}
|
|
|
|
const playModeIcon = useMemo(() => {
|
|
let playModeIcon = null
|
|
switch (togglePlayMethod) {
|
|
case 'listLoop':
|
|
playModeIcon = 'list-loop'
|
|
break
|
|
case 'random':
|
|
playModeIcon = 'list-random'
|
|
break
|
|
case 'list':
|
|
playModeIcon = 'list-order'
|
|
break
|
|
case 'singleLoop':
|
|
playModeIcon = 'single-loop'
|
|
break
|
|
default:
|
|
playModeIcon = 'single'
|
|
break
|
|
}
|
|
return playModeIcon
|
|
}, [togglePlayMethod])
|
|
|
|
return (
|
|
<TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={toggleNextPlayMode}>
|
|
<Icon name={playModeIcon} style={{ color: theme.normal30 }} size={width} />
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
cotrolBtn: {
|
|
marginRight: '1%',
|
|
width: '25%',
|
|
aspectRatio: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
|
|
// backgroundColor: '#ccc',
|
|
shadowOpacity: 1,
|
|
textShadowRadius: 1,
|
|
},
|
|
})
|