xref: /MusicFree/src/components/mediaItem/musicItem.tsx (revision 2aa881935ca35b8fb1abc4206e0dc35149231456) 
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    itemPaddingRight?: number;
22}
23const ITEM_HEIGHT = rpx(120);
24export default function MusicItem(props: IMusicItemProps) {
25    const {
26        musicItem,
27        index,
28        left,
29        right,
30        onItemPress,
31        onItemLongPress,
32        musicSheet,
33        itemWidth,
34        itemPaddingRight,
35        itemBackgroundColor,
36    } = props;
37    const {showPanel} = usePanel();
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