xref: /MusicFree/src/components/mediaItem/musicItem.tsx (revision a3b33415d37ff72f265b11a58c6cdaf46facf691)

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import rpx from '@/utils/rpx';
import ListItem, {ILeftProps} from '../base/listItem';
import DownloadManager from '@/common/downloadManager';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import MusicQueue from '@/common/musicQueue';
import IconButton from '../base/iconButton';
import usePanel from '../panels/usePanel';

interface IMusicItemProps {
  index?: string | number;
  left?: ILeftProps;
  musicItem: IMusic.IMusicItem;
  musicSheet?: IMusic.IMusicSheetItem;
  onItemPress?: (musicItem: IMusic.IMusicItem) => void;
}
const ITEM_HEIGHT = rpx(120);
export default function MusicItem(props: IMusicItemProps) {
  const {musicItem, index, left, onItemPress, musicSheet} = props;
  const {showPanel} = usePanel();

  return (
    <ListItem
      itemHeight={ITEM_HEIGHT}
      left={index !== undefined ? {index: index, width: rpx(56)} : left}
      title={musicItem.title}
      desc={
        <>
          {DownloadManager.isDownloaded(musicItem) && (
            <Icon color="#11659a" name="check-circle" size={rpx(22)}></Icon>
          )}
          <Text>
            {musicItem.artist} - {musicItem.album}
          </Text>
        </>
      }
      tag={musicItem.platform}
      onPress={() => {
        if (onItemPress) {
          onItemPress(musicItem);
        } else {
          MusicQueue.play(musicItem);
        }
      }}
      right={() => (
        <IconButton
          name="dots-vertical"
          size="normal"
          fontColor="normal"
          onPress={() => {
            showPanel('MusicItemOptions', {musicItem, musicSheet});
          }}></IconButton>
      )}></ListItem>
  );
}