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