1import React from 'react'; 2import {Image, Pressable, StyleSheet, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 5 6import Download from '@/core/download'; 7import LocalMusicSheet from '@/core/localMusicSheet'; 8import {ROUTE_PATH} from '@/entry/router'; 9import {ImgAsset} from '@/constants/assetsConst'; 10import Toast from '@/utils/toast'; 11import useOrientation from '@/hooks/useOrientation'; 12import {showPanel} from '@/components/panels/usePanel'; 13import TrackPlayer from '@/core/trackPlayer'; 14import {iconSizeConst} from '@/constants/uiConst'; 15import PersistStatus from '@/core/persistStatus'; 16import HeartIcon from '../heartIcon'; 17 18export default function Operations() { 19 //briefcase-download-outline briefcase-check-outline checkbox-marked-circle-outline 20 const musicItem = TrackPlayer.useCurrentMusic(); 21 const currentQuality = TrackPlayer.useCurrentQuality(); 22 const isDownloaded = LocalMusicSheet.useIsLocal(musicItem); 23 24 const rate = PersistStatus.useValue('music.rate', 100); 25 const orientation = useOrientation(); 26 27 return ( 28 <View 29 style={[ 30 style.wrapper, 31 orientation === 'horizonal' 32 ? { 33 marginBottom: 0, 34 } 35 : null, 36 ]}> 37 <HeartIcon /> 38 <Pressable 39 onPress={() => { 40 if (!musicItem) { 41 return; 42 } 43 showPanel('MusicQuality', { 44 musicItem, 45 async onQualityPress(quality) { 46 const changeResult = 47 await TrackPlayer.changeQuality(quality); 48 if (!changeResult) { 49 Toast.warn('当前暂无此音质音乐'); 50 } 51 }, 52 }); 53 }}> 54 <Image 55 source={ImgAsset.quality[currentQuality]} 56 style={style.quality} 57 /> 58 </Pressable> 59 <Icon 60 name={isDownloaded ? 'check-circle-outline' : 'download'} 61 size={iconSizeConst.normal} 62 color="white" 63 onPress={() => { 64 if (musicItem && !isDownloaded) { 65 showPanel('MusicQuality', { 66 musicItem, 67 async onQualityPress(quality) { 68 Download.downloadMusic(musicItem, quality); 69 }, 70 }); 71 } 72 }} 73 /> 74 <Pressable 75 onPress={() => { 76 if (!musicItem) { 77 return; 78 } 79 showPanel('PlayRate', { 80 async onRatePress(newRate) { 81 if (rate !== newRate) { 82 try { 83 await TrackPlayer.setRate(newRate / 100); 84 PersistStatus.set('music.rate', newRate); 85 } catch {} 86 } 87 }, 88 }); 89 }}> 90 <Image source={ImgAsset.rate[rate!]} style={style.quality} /> 91 </Pressable> 92 <Icon 93 name="dots-vertical" 94 size={iconSizeConst.normal} 95 color="white" 96 onPress={() => { 97 if (musicItem) { 98 showPanel('MusicItemOptions', { 99 musicItem: musicItem, 100 from: ROUTE_PATH.MUSIC_DETAIL, 101 }); 102 } 103 }} 104 /> 105 </View> 106 ); 107} 108 109const style = StyleSheet.create({ 110 wrapper: { 111 width: '100%', 112 height: rpx(80), 113 marginBottom: rpx(24), 114 flexDirection: 'row', 115 alignItems: 'center', 116 justifyContent: 'space-around', 117 }, 118 quality: { 119 width: rpx(52), 120 height: rpx(52), 121 }, 122}); 123