Display secondary types on album details

pull/5085/head
Bogdan 2 months ago
parent 21344361e4
commit af6c0cc6f5

@ -121,6 +121,8 @@
.releaseDate, .releaseDate,
.sizeOnDisk, .sizeOnDisk,
.albumType,
.secondaryTypes,
.qualityProfileName, .qualityProfileName,
.links, .links,
.tags { .tags {

@ -3,6 +3,7 @@
interface CssExports { interface CssExports {
'albumNavigationButton': string; 'albumNavigationButton': string;
'albumNavigationButtons': string; 'albumNavigationButtons': string;
'albumType': string;
'alternateTitlesIconContainer': string; 'alternateTitlesIconContainer': string;
'backdrop': string; 'backdrop': string;
'backdropOverlay': string; 'backdropOverlay': string;
@ -20,6 +21,7 @@ interface CssExports {
'overview': string; 'overview': string;
'qualityProfileName': string; 'qualityProfileName': string;
'releaseDate': string; 'releaseDate': string;
'secondaryTypes': string;
'sizeOnDisk': string; 'sizeOnDisk': string;
'tags': string; 'tags': string;
'title': string; 'title': string;

@ -192,6 +192,7 @@ class AlbumDetails extends Component {
duration, duration,
overview, overview,
albumType, albumType,
secondaryTypes,
statistics = {}, statistics = {},
monitored, monitored,
releaseDate, releaseDate,
@ -396,10 +397,11 @@ class AlbumDetails extends Component {
<div className={styles.details}> <div className={styles.details}>
<div> <div>
{ {
!!duration && duration ?
<span className={styles.duration}> <span className={styles.duration}>
{formatDuration(duration)} {formatDuration(duration)}
</span> </span> :
null
} }
<HeartRating <HeartRating
@ -418,14 +420,15 @@ class AlbumDetails extends Component {
title={translate('ReleaseDate')} title={translate('ReleaseDate')}
size={sizes.LARGE} size={sizes.LARGE}
> >
<Icon <div>
name={icons.CALENDAR} <Icon
size={17} name={icons.CALENDAR}
/> size={17}
/>
<span className={styles.releaseDate}> <span className={styles.releaseDate}>
{moment(releaseDate).format(shortDateFormat)} {moment(releaseDate).format(shortDateFormat)}
</span> </span>
</div>
</Label> </Label>
<Tooltip <Tooltip
@ -434,16 +437,15 @@ class AlbumDetails extends Component {
className={styles.detailsLabel} className={styles.detailsLabel}
size={sizes.LARGE} size={sizes.LARGE}
> >
<Icon <div>
name={icons.DRIVE} <Icon
size={17} name={icons.DRIVE}
/> size={17}
/>
<span className={styles.sizeOnDisk}> <span className={styles.sizeOnDisk}>
{ {formatBytes(sizeOnDisk)}
formatBytes(sizeOnDisk || 0) </span>
} </div>
</span>
</Label> </Label>
} }
tooltip={ tooltip={
@ -459,32 +461,55 @@ class AlbumDetails extends Component {
className={styles.detailsLabel} className={styles.detailsLabel}
size={sizes.LARGE} size={sizes.LARGE}
> >
<Icon <div>
name={monitored ? icons.MONITORED : icons.UNMONITORED} <Icon
size={17} name={monitored ? icons.MONITORED : icons.UNMONITORED}
/> size={17}
/>
<span className={styles.qualityProfileName}> <span className={styles.qualityProfileName}>
{monitored ? translate('Monitored') : translate('Unmonitored')} {monitored ? translate('Monitored') : translate('Unmonitored')}
</span> </span>
</div>
</Label> </Label>
{ {
!!albumType && albumType ?
<Label <Label
className={styles.detailsLabel} className={styles.detailsLabel}
title={translate('Type')} title={translate('Type')}
size={sizes.LARGE} size={sizes.LARGE}
> >
<Icon <div>
name={icons.INFO} <Icon
size={17} name={icons.INFO}
/> size={17}
/>
<span className={styles.albumType}>
{albumType}
</span>
</div>
</Label> :
null
}
<span className={styles.qualityProfileName}> {
{albumType} secondaryTypes.length ?
</span> <Label
</Label> className={styles.detailsLabel}
title={translate('SecondaryTypes')}
size={sizes.LARGE}
>
<div>
<Icon
name={icons.INFO}
size={17}
/>
<span className={styles.secondaryTypes}>
{secondaryTypes.join(', ')}
</span>
</div>
</Label> :
null
} }
<Tooltip <Tooltip
@ -493,14 +518,15 @@ class AlbumDetails extends Component {
className={styles.detailsLabel} className={styles.detailsLabel}
size={sizes.LARGE} size={sizes.LARGE}
> >
<Icon <div>
name={icons.EXTERNAL_LINK} <Icon
size={17} name={icons.EXTERNAL_LINK}
/> size={17}
/>
<span className={styles.links}> <span className={styles.links}>
{translate('Links')} {translate('Links')}
</span> </span>
</div>
</Label> </Label>
} }
tooltip={ tooltip={
@ -632,6 +658,7 @@ AlbumDetails.propTypes = {
duration: PropTypes.number, duration: PropTypes.number,
overview: PropTypes.string, overview: PropTypes.string,
albumType: PropTypes.string.isRequired, albumType: PropTypes.string.isRequired,
secondaryTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
statistics: PropTypes.object.isRequired, statistics: PropTypes.object.isRequired,
releaseDate: PropTypes.string.isRequired, releaseDate: PropTypes.string.isRequired,
ratings: PropTypes.object.isRequired, ratings: PropTypes.object.isRequired,
@ -658,6 +685,7 @@ AlbumDetails.propTypes = {
}; };
AlbumDetails.defaultProps = { AlbumDetails.defaultProps = {
secondaryTypes: [],
isSaving: false isSaving: false
}; };

@ -149,9 +149,7 @@ class AlbumRow extends Component {
if (name === 'secondaryTypes') { if (name === 'secondaryTypes') {
return ( return (
<TableRowCell key={name}> <TableRowCell key={name}>
{ {secondaryTypes.join(', ')}
secondaryTypes
}
</TableRowCell> </TableRowCell>
); );
} }

Loading…
Cancel
Save