Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | 5x 11x 11x 11x 11x 11x 11x 5x 5x 5x 11x 11x 11x 11x 11x 11x 11x 5x 5x | import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { formatTrackArtist, formatTrackTitle } from './track-utils';
/**
* Creates the track title to display based on track object
*
* @param { string } name
* @param { string } title
* @param { string } artist
* @param { string } creator
* @param { boolean } isAlbum
*
* @return { react fragment } trackTitle
*/
const TrackTitle = ({
name: fileName,
title,
albumCreator,
albumName,
creator,
artist,
isAlbum
}) => {
Iif (isAlbum) {
return 'Full album';
}
const trackArtist = creator || artist;
const displayArtist = formatTrackArtist(trackArtist, albumCreator, albumName);
const titleArtistDelimiter = displayArtist ? ' - ' : null;
const artistName = displayArtist ? <i className="track-artist">{displayArtist}</i> : null;
return (
<Fragment>
{formatTrackTitle(title, fileName)}
{titleArtistDelimiter}
{artistName}
</Fragment>
);
};
TrackTitle.defaultProps = {
name: '',
title: '',
albumCreator: '',
albumName: '',
creator: '',
artist: '',
isAlbum: false
};
TrackTitle.propTypes = {
name: PropTypes.string,
title: PropTypes.string,
albumCreator: PropTypes.oneOfType([
PropTypes.string,
PropTypes.shape([])
]),
albumName: PropTypes.string,
creator: PropTypes.string,
artist: PropTypes.string,
isAlbum: PropTypes.bool
};
/**
* Draws track info as button
*
* @param bool selected
* @param function onSelected
* @param object track
*
* @return component
*/
const OneTrack = ({
selected,
onSelected,
thisTrack,
displayTrackNumbers,
albumCreator,
albumName
}) => {
const { trackNumber, length, formattedLength } = thisTrack;
const trackProps = { ...thisTrack, albumCreator, albumName };
const track = parseInt(trackNumber, 10);
const displayNumber = track > 0 ? track : '-';
const displayLength = formattedLength || length || '-- : --';
const trackButtonClass = [
selected ? 'selected' : '',
'track',
displayTrackNumbers ? '' : 'no-track-number'
].join(' ').trim();
return (
<button
type="button"
data-track-number={trackNumber}
className={trackButtonClass}
onClick={onSelected}
data-event-click-tracking="TrackList|Item"
>
<span className="track-number">{displayNumber}</span>
<span className="track-title"><TrackTitle {...trackProps} /></span>
<span className="track-length">{displayLength}</span>
</button>
);
};
OneTrack.defaultProps = {
selected: false,
displayTrackNumbers: false,
albumCreator: '',
albumName: ''
};
OneTrack.propTypes = {
selected: PropTypes.bool,
onSelected: PropTypes.func.isRequired,
thisTrack: PropTypes.shape({}).isRequired,
displayTrackNumbers: PropTypes.bool,
albumCreator: PropTypes.oneOfType([
PropTypes.string,
PropTypes.array
]),
albumName: PropTypes.string
};
export default OneTrack;
|