xref: /MusicFree/src/pages/musicDetail/components/bottom/playControl.tsx (revision 734113be9d256a2b4d36bb272d6d3565beaeb236) 
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';
9import useOrientation from '@/hooks/useOrientation';
10
11export default function () {
12    const repeatMode = MusicQueue.useRepeatMode();
13    const musicState = MusicQueue.usePlaybackState();
14    const {showPanel} = usePanel();
15    const orientation = useOrientation();
16
17    return (
18        <>
19            <View
20                style={[
21                    style.wrapper,
22                    orientation === 'horizonal'
23                        ? {
24                              marginTop: 0,
25                          }
26                        : null,
27                ]}>
28                <Icon
29                    color={'white'}
30                    name={repeatModeConst[repeatMode].icon}
31                    size={rpx(56)}
32                    onPress={() => {
33                        MusicQueue.toggleRepeatMode();
34                    }}
35                />
36                <Icon
37                    color={'white'}
38                    name={'skip-previous'}
39                    size={rpx(56)}
40                    onPress={() => {
41                        MusicQueue.skipToPrevious();
42                    }}
43                />
44                <Icon
45                    color={'white'}
46                    name={
47                        musicIsPaused(musicState)
48                            ? 'play-circle-outline'
49                            : 'pause-circle-outline'
50                    }
51                    size={rpx(96)}
52                    onPress={() => {
53                        if (musicIsPaused(musicState)) {
54                            MusicQueue.play();
55                        } else {
56                            MusicQueue.pause();
57                        }
58                    }}
59                />
60                <Icon
61                    color={'white'}
62                    name={'skip-next'}
63                    size={rpx(56)}
64                    onPress={() => {
65                        MusicQueue.skipToNext();
66                    }}
67                />
68                <Icon
69                    color={'white'}
70                    name={'playlist-music'}
71                    size={rpx(56)}
72                    onPress={() => {
73                        showPanel('PlayList');
74                    }}
75                />
76            </View>
77        </>
78    );
79}
80
81const style = StyleSheet.create({
82    wrapper: {
83        width: '100%',
84        marginTop: rpx(36),
85        height: rpx(100),
86        flexDirection: 'row',
87        justifyContent: 'space-around',
88        alignItems: 'center',
89    },
90});
91