xref: /MusicFree/src/components/mediaItem/musicItem.tsx (revision ea6d708f22409666b768cda1107ea1066b213247) 
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} - {musicItem.album}
60                    </Text>
61                </>
62            }
63            tag={musicItem.platform}
64            onPress={() => {
65                if (onItemPress) {
66                    onItemPress(musicItem);
67                } else {
68                    MusicQueue.play(musicItem);
69                }
70            }}
71            right={
72                right
73                    ? right
74                    : () => (
75                          <IconButton
76                              name={'dots-vertical'}
77                              size="normal"
78                              fontColor="normal"
79                              onPress={() => {
80                                  showPanel('MusicItemOptions', {
81                                      musicItem,
82                                      musicSheet,
83                                  });
84                              }}
85                          />
86                      )
87            }
88        />
89    );
90}
91