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