xref: /MusicFree/src/pages/musicDetail/components/bottom/playControl.tsx (revision cdc698422903b4b0c83c41d166b21516f7b6ce9b) 
1import React from 'react';
2import {StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import repeatModeConst from '@/constants/repeatModeConst';
5
6import useOrientation from '@/hooks/useOrientation';
7import {showPanel} from '@/components/panels/usePanel';
8import TrackPlayer from '@/core/trackPlayer';
9import {musicIsPaused} from '@/utils/trackUtils';
10import Icon from '@/components/base/icon.tsx';
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-left'}
40                    size={rpx(56)}
41                    onPress={() => {
42                        TrackPlayer.skipToPrevious();
43                    }}
44                />
45                <Icon
46                    color={'white'}
47                    name={musicIsPaused(musicState) ? 'play' : 'pause'}
48                    size={rpx(96)}
49                    onPress={() => {
50                        if (musicIsPaused(musicState)) {
51                            TrackPlayer.play();
52                        } else {
53                            TrackPlayer.pause();
54                        }
55                    }}
56                />
57                <Icon
58                    color={'white'}
59                    name={'skip-right'}
60                    size={rpx(56)}
61                    onPress={() => {
62                        TrackPlayer.skipToNext();
63                    }}
64                />
65                <Icon
66                    color={'white'}
67                    name={'playlist'}
68                    size={rpx(56)}
69                    onPress={() => {
70                        showPanel('PlayList');
71                    }}
72                />
73            </View>
74        </>
75    );
76}
77
78const style = StyleSheet.create({
79    wrapper: {
80        width: '100%',
81        marginTop: rpx(36),
82        height: rpx(100),
83        flexDirection: 'row',
84        justifyContent: 'space-around',
85        alignItems: 'center',
86    },
87});
88