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