xref: /MusicFree/src/pages/musicDetail/components/bottom/playControl.tsx (revision 6613e77203923e5b1742a49281bfa5de03fc1440) 
1import React from 'react';
2import {InteractionManager, 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';
11import sleep from '@/utils/sleep.ts';
12
13export default function () {
14    const repeatMode = TrackPlayer.useRepeatMode();
15    const musicState = TrackPlayer.useMusicState();
16
17    const orientation = useOrientation();
18
19    return (
20        <>
21            <View
22                style={[
23                    style.wrapper,
24                    orientation === 'horizontal'
25                        ? {
26                              marginTop: 0,
27                          }
28                        : null,
29                ]}>
30                <Icon
31                    color={'white'}
32                    name={repeatModeConst[repeatMode].icon}
33                    size={rpx(56)}
34                    onPress={async () => {
35                        InteractionManager.runAfterInteractions(async () => {
36                            await sleep(20);
37                            TrackPlayer.toggleRepeatMode();
38                        });
39                    }}
40                />
41                <Icon
42                    color={'white'}
43                    name={'skip-left'}
44                    size={rpx(56)}
45                    onPress={() => {
46                        TrackPlayer.skipToPrevious();
47                    }}
48                />
49                <Icon
50                    color={'white'}
51                    name={musicIsPaused(musicState) ? 'play' : 'pause'}
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-right'}
64                    size={rpx(56)}
65                    onPress={() => {
66                        TrackPlayer.skipToNext();
67                    }}
68                />
69                <Icon
70                    color={'white'}
71                    name={'playlist'}
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