1import React from 'react'; 2import {Text} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ListItem, {ILeftProps} from '../base/listItem'; 5import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 6import MusicQueue from '@/core/musicQueue'; 7import IconButton from '../base/iconButton'; 8import usePanel from '../panels/usePanel'; 9import LocalMusicSheet from '@/core/localMusicSheet'; 10 11interface IMusicItemProps { 12 index?: string | number; 13 left?: ILeftProps; 14 right?: () => JSX.Element; 15 musicItem: IMusic.IMusicItem; 16 musicSheet?: IMusic.IMusicSheetItem; 17 onItemPress?: (musicItem: IMusic.IMusicItem) => void; 18 onItemLongPress?: () => void; 19 itemWidth?: number; 20 itemBackgroundColor?: string; 21} 22const ITEM_HEIGHT = rpx(120); 23export default function MusicItem(props: IMusicItemProps) { 24 const { 25 musicItem, 26 index, 27 left, 28 right, 29 onItemPress, 30 onItemLongPress, 31 musicSheet, 32 itemWidth, 33 itemBackgroundColor, 34 } = props; 35 const {showPanel} = usePanel(); 36 37 return ( 38 <ListItem 39 itemWidth={itemWidth} 40 itemHeight={ITEM_HEIGHT} 41 itemPaddingLeft={index !== undefined ? 0 : undefined} 42 itemBackgroundColor={itemBackgroundColor} 43 onLongPress={onItemLongPress} 44 left={index !== undefined ? {index: index, width: rpx(96)} : left} 45 title={musicItem.title} 46 desc={ 47 <> 48 {LocalMusicSheet.isLocalMusic(musicItem) && ( 49 <Icon 50 color="#11659a" 51 name="check-circle" 52 size={rpx(22)} 53 /> 54 )} 55 <Text> 56 {musicItem.artist} - {musicItem.album} 57 </Text> 58 </> 59 } 60 tag={musicItem.platform} 61 onPress={() => { 62 if (onItemPress) { 63 onItemPress(musicItem); 64 } else { 65 MusicQueue.play(musicItem); 66 } 67 }} 68 right={ 69 right 70 ? right 71 : () => ( 72 <IconButton 73 name={'dots-vertical'} 74 size="normal" 75 fontColor="normal" 76 onPress={() => { 77 showPanel('MusicItemOptions', { 78 musicItem, 79 musicSheet, 80 }); 81 }} 82 /> 83 ) 84 } 85 /> 86 ); 87} 88