xref: /MusicFree/src/pages/musicDetail/components/bottom/playControl.tsx (revision b882a19d884fffa32f7c8cef31652b909dceaa0f) 
1import React from 'react';
2import {StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
5import MusicQueue from '@/core/musicQueue';
6import repeatModeConst from '@/constants/repeatModeConst';
7import musicIsPaused from '@/utils/musicIsPaused';
8import usePanel from '@/components/panels/usePanel';
9
10export default function () {
11    const repeatMode = MusicQueue.useRepeatMode();
12    const musicState = MusicQueue.usePlaybackState();
13    const {showPanel} = usePanel();
14
15    return (
16        <>
17            <View style={style.wrapper}>
18                <Icon
19                    color={'white'}
20                    name={repeatModeConst[repeatMode].icon}
21                    size={rpx(56)}
22                    onPress={() => {
23                        MusicQueue.toggleRepeatMode();
24                    }}
25                />
26                <Icon
27                    color={'white'}
28                    name={'skip-previous'}
29                    size={rpx(56)}
30                    onPress={() => {
31                        MusicQueue.skipToPrevious();
32                    }}
33                />
34                <Icon
35                    color={'white'}
36                    name={
37                        musicIsPaused(musicState)
38                            ? 'play-circle-outline'
39                            : 'pause-circle-outline'
40                    }
41                    size={rpx(96)}
42                    onPress={() => {
43                        if (musicIsPaused(musicState)) {
44                            MusicQueue.play();
45                        } else {
46                            MusicQueue.pause();
47                        }
48                    }}
49                />
50                <Icon
51                    color={'white'}
52                    name={'skip-next'}
53                    size={rpx(56)}
54                    onPress={() => {
55                        MusicQueue.skipToNext();
56                    }}
57                />
58                <Icon
59                    color={'white'}
60                    name={'playlist-music'}
61                    size={rpx(56)}
62                    onPress={() => {
63                        showPanel('PlayList');
64                    }}
65                />
66            </View>
67        </>
68    );
69}
70
71const style = StyleSheet.create({
72    wrapper: {
73        width: rpx(750),
74        marginTop: rpx(36),
75        height: rpx(100),
76        flexDirection: 'row',
77        justifyContent: 'space-around',
78        alignItems: 'center',
79    },
80});
81