import React from 'react' ; import numeral from 'numeral' ; import cx from 'classnames' ; import { Icon } from 'semantic-ui-react' ; import _ from 'lodash' ; import artPlaceholder from '../../../resources/media/art_placeholder.png' ; import { formatDuration } from '../../utils' ; import { Track } from '../../types' ; import styles from './styles.scss' ; export const getTrackThumbnail = track => { return _ . get ( track , 'thumbnail' , _ . get ( track , 'image[0][#text]' ) ) ; } ; export type TrackRowProps = { track : Track ; mini ? : boolean ; displayAlbum ? : boolean ; displayArtist ? : boolean ; displayCover ? : boolean ; displayDuration ? : boolean ; displayPlayCount ? : boolean ; displayTrackNumber ? : boolean ; withAddToDownloads ? : boolean ; withAddToFavorites ? : boolean ; withAddToQueue ? : boolean ; withDeleteButton ? : boolean ; withPlayNow ? : boolean ; onDelete ? : React . MouseEventHandler ; } ; const TrackRow = ( { track , mini , displayAlbum , displayArtist , displayCover , displayDuration , displayPlayCount , displayTrackNumber , withDeleteButton , withAddToDownloads , withAddToFavorites , onDelete , ... other } ) => ( < tr className = { cx ( styles . track_row , { [ styles . mini ] : mini } ) } { ... other } > { withDeleteButton && < td className = { styles . track_row_buttons } > < a onClick = { onDelete } > < Icon name = 'close' / > < /a> < /td>} { displayCover && < td className = { styles . track_row_thumbnail } > < img src = { getTrackThumbnail ( track ) || artPlaceholder } /> < /td>} { displayTrackNumber && < td className = { styles . track_row_position } > { track . position } < /td>} { displayArtist && < td className = { styles . track_row_artist } > { _ . isString ( track . artist ) ? track . artist : track . artist . name } < /td>} < td className = { styles . track_row_name } > { track . title ?? track . name } < /td> { displayAlbum && < td className = { styles . track_row_album } > { track . album } < /td>} { displayDuration && < td className = { styles . track_row_duration } > { formatDuration ( track . duration ) } < /td>} { displayPlayCount && < td className = { styles . track_row_playcount } > { numeral ( track . playcount ) . format ( '0,0' ) } < /td>} < /tr>); export default TrackRow ;