1import React from 'react'; 2import {Text} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ListItem, {ILeftProps} from '../base/listItem'; 5import Download from '@/core/download'; 6import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 7import MusicQueue from '@/core/musicQueue'; 8import IconButton from '../base/iconButton'; 9import usePanel from '../panels/usePanel'; 10 11interface IMusicItemProps { 12 index?: string | number; 13 left?: ILeftProps; 14 musicItem: IMusic.IMusicItem; 15 musicSheet?: IMusic.IMusicSheetItem; 16 onItemPress?: (musicItem: IMusic.IMusicItem) => void; 17} 18const ITEM_HEIGHT = rpx(120); 19export default function MusicItem(props: IMusicItemProps) { 20 const {musicItem, index, left, onItemPress, musicSheet} = props; 21 const {showPanel} = usePanel(); 22 23 return ( 24 <ListItem 25 itemHeight={ITEM_HEIGHT} 26 left={index !== undefined ? {index: index, width: rpx(56)} : left} 27 title={musicItem.title} 28 desc={ 29 <> 30 {Download.isDownloaded(musicItem) && ( 31 <Icon 32 color="#11659a" 33 name="check-circle" 34 size={rpx(22)} 35 /> 36 )} 37 <Text> 38 {musicItem.artist} - {musicItem.album} 39 </Text> 40 </> 41 } 42 tag={musicItem.platform} 43 onPress={() => { 44 if (onItemPress) { 45 onItemPress(musicItem); 46 } else { 47 MusicQueue.play(musicItem); 48 } 49 }} 50 right={() => ( 51 <IconButton 52 name="dots-vertical" 53 size="normal" 54 fontColor="normal" 55 onPress={() => { 56 showPanel('MusicItemOptions', {musicItem, musicSheet}); 57 }} 58 /> 59 )} 60 /> 61 ); 62} 63