Function QueueItem

src/app/components/Common/Player/Queue/QueueItem.tsx:19–51

({ style, item, removeItemFunc }: QueueItemProps)

}

const QueueItem = ({ style, item, removeItemFunc }: QueueItemProps) => {
  const stateClass = item.queueState === QueueItemState.Playing ? classes.playing : '';

  return (
    <div className={cx(classes.queueItem, stateClass)} style={style || {}}>
      <div>
        <span className={classes.albumArtwork}>
          <span className={classes.artworkWrapper}>
            <img src={artworkForMediaItem(item as MusicKit.MediaItem, 30)} alt='' />
          </span>
        </span>
      </div>
      <div className={classes.queueItemInfo}>
        <span className={classes.title}>{item.attributes.name}</span>
        <span className={classes.description}>
          {item.attributes.artistName}
          {' - '}
          {item.attributes.albumName}
        </span>
      </div>
      <div>
        <span className={classes.removeButton}>
          {item.queueState === QueueItemState.Queued && (
            <i
              className={cx('fas fa-times', classes.notSortable)}
              onClick={() => removeItemFunc(item.queuePosition)}
            />
          )}
        </span>
      </div>
    </div>
  );
};

export default SortableElement(QueueItem);