1import React, {useState} from 'react'; 2import {StyleSheet, Text, 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 10interface IProps {} 11export default function (props: IProps) { 12 const repeatMode = MusicQueue.useRepeatMode(); 13 const musicState = MusicQueue.usePlaybackState(); 14 const {showPanel} = usePanel(); 15 16 return ( 17 <> 18 <View style={style.wrapper}> 19 <Icon 20 color={'white'} 21 name={repeatModeConst[repeatMode].icon} 22 size={rpx(56)} 23 onPress={() => { 24 MusicQueue.toggleRepeatMode(); 25 }}></Icon> 26 <Icon 27 color={'white'} 28 name={'skip-previous'} 29 size={rpx(56)} 30 onPress={() => { 31 MusicQueue.skipToPrevious(); 32 }}></Icon> 33 <Icon 34 color={'white'} 35 name={ 36 musicIsPaused(musicState) 37 ? 'play-circle-outline' 38 : 'pause-circle-outline' 39 } 40 size={rpx(96)} 41 onPress={() => { 42 if (musicIsPaused(musicState)) { 43 MusicQueue.play(); 44 } else { 45 MusicQueue.pause(); 46 } 47 }}></Icon> 48 <Icon 49 color={'white'} 50 name={'skip-next'} 51 size={rpx(56)} 52 onPress={() => { 53 MusicQueue.skipToNext(); 54 }}></Icon> 55 <Icon 56 color={'white'} 57 name={'playlist-music'} 58 size={rpx(56)} 59 onPress={() => { 60 showPanel('PlayList'); 61 }}></Icon> 62 </View> 63 </> 64 ); 65} 66 67const style = StyleSheet.create({ 68 wrapper: { 69 width: rpx(750), 70 marginTop: rpx(36), 71 height: rpx(100), 72 flexDirection: 'row', 73 justifyContent: 'space-around', 74 alignItems: 'center', 75 }, 76}); 77