1import React, {Fragment, useEffect, useState} from 'react'; 2import { 3 Keyboard, 4 Pressable, 5 StyleSheet, 6 Text, 7 ToastAndroid, 8 View, 9} from 'react-native'; 10import rpx from '@/utils/rpx'; 11import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 12import useTextColor from '@/hooks/useTextColor'; 13import MusicQueue from '@/core/musicQueue'; 14import {Avatar, IconButton, Portal, useTheme} from 'react-native-paper'; 15import {CircularProgressBase} from 'react-native-circular-progress-indicator'; 16import {useNavigation} from '@react-navigation/native'; 17import {ROUTE_PATH} from '@/entry/router'; 18 19import musicIsPaused from '@/utils/musicIsPaused'; 20import usePanel from '../panels/usePanel'; 21import Color from 'color'; 22import ThemeText from '../base/themeText'; 23import {ImgAsset} from '@/constants/assetsConst'; 24 25interface IProps {} 26export default function (props: IProps) { 27 // const currentMusicState = useAtomValue(loadableCurrentMusicStateAtom); 28 const musicItem = MusicQueue.useCurrentMusicItem(); 29 const musicState = MusicQueue.usePlaybackState(); 30 const [showKeyboard, setKeyboardStatus] = useState(false); 31 const {showPanel} = usePanel(); 32 const navigation = useNavigation<any>(); 33 const progress = MusicQueue.useProgress(); 34 const {colors} = useTheme(); 35 36 37 useEffect(() => { 38 const showSubscription = Keyboard.addListener('keyboardDidShow', () => { 39 setKeyboardStatus(true); 40 }); 41 const hideSubscription = Keyboard.addListener('keyboardDidHide', () => { 42 setKeyboardStatus(false); 43 }); 44 45 return () => { 46 showSubscription.remove(); 47 hideSubscription.remove(); 48 }; 49 }, []); 50 51 return ( 52 <Fragment> 53 {musicItem && !showKeyboard && ( 54 <Pressable 55 style={[ 56 style.wrapper, 57 {backgroundColor: Color(colors.primary).alpha(0.66).toString()}, 58 ]} 59 onPress={() => { 60 navigation.navigate(ROUTE_PATH.MUSIC_DETAIL); 61 }}> 62 <View style={style.artworkWrapper}> 63 <Avatar.Image 64 size={rpx(96)} 65 source={ 66 musicItem.artwork 67 ? { 68 uri: musicItem.artwork, 69 } 70 : ImgAsset.albumDefault 71 }></Avatar.Image> 72 </View> 73 <Text 74 ellipsizeMode="tail" 75 style={style.textWrapper} 76 numberOfLines={1}> 77 <ThemeText fontSize="content">{musicItem.title}</ThemeText> 78 {musicItem?.artist && ( 79 <ThemeText fontSize="description" fontColor="secondary"> 80 {' '} 81 -{musicItem.artist} 82 </ThemeText> 83 )} 84 </Text> 85 <View style={style.actionGroup}> 86 <CircularProgressBase 87 activeStrokeWidth={rpx(4)} 88 inActiveStrokeWidth={rpx(2)} 89 inActiveStrokeOpacity={0.2} 90 value={ 91 progress?.duration 92 ? (100 * progress.position) / progress.duration 93 : 0 94 } 95 duration={100} 96 radius={rpx(36)} 97 activeStrokeColor={colors.text} 98 inActiveStrokeColor={Color(colors.text).alpha(0.5).toString()}> 99 {musicIsPaused(musicState) ? ( 100 <IconButton 101 icon="play" 102 size={rpx(48)} 103 onPress={async () => { 104 await MusicQueue.play(); 105 }} 106 /> 107 ) : ( 108 <IconButton 109 icon="pause" 110 size={rpx(48)} 111 onPress={async () => { 112 await MusicQueue.pause(); 113 }} 114 /> 115 )} 116 </CircularProgressBase> 117 118 <Icon 119 name="playlist-music" 120 size={rpx(56)} 121 onPress={() => { 122 showPanel('PlayList'); 123 }} 124 style={[style.actionIcon, {color: colors.text}]}></Icon> 125 </View> 126 </Pressable> 127 )} 128 </Fragment> 129 ); 130} 131 132const style = StyleSheet.create({ 133 wrapper: { 134 width: rpx(750), 135 height: rpx(120), 136 flexDirection: 'row', 137 alignItems: 'center', 138 paddingHorizontal: rpx(24), 139 }, 140 artworkWrapper: { 141 height: rpx(120), 142 width: rpx(120), 143 }, 144 textWrapper: { 145 flexGrow: 1, 146 maxWidth: rpx(382), 147 }, 148 actionGroup: { 149 width: rpx(200), 150 justifyContent: 'flex-end', 151 flexDirection: 'row', 152 alignItems: 'center', 153 }, 154 actionIcon: { 155 marginLeft: rpx(36), 156 }, 157}); 158