diff --git a/frontend/src/Album/Details/AlbumDetails.css b/frontend/src/Album/Details/AlbumDetails.css
index d87920074..a676ae574 100644
--- a/frontend/src/Album/Details/AlbumDetails.css
+++ b/frontend/src/Album/Details/AlbumDetails.css
@@ -121,6 +121,8 @@
.releaseDate,
.sizeOnDisk,
+.albumType,
+.secondaryTypes,
.qualityProfileName,
.links,
.tags {
diff --git a/frontend/src/Album/Details/AlbumDetails.css.d.ts b/frontend/src/Album/Details/AlbumDetails.css.d.ts
index 4c126c8b5..1d14a0ccf 100644
--- a/frontend/src/Album/Details/AlbumDetails.css.d.ts
+++ b/frontend/src/Album/Details/AlbumDetails.css.d.ts
@@ -3,6 +3,7 @@
interface CssExports {
'albumNavigationButton': string;
'albumNavigationButtons': string;
+ 'albumType': string;
'alternateTitlesIconContainer': string;
'backdrop': string;
'backdropOverlay': string;
@@ -20,6 +21,7 @@ interface CssExports {
'overview': string;
'qualityProfileName': string;
'releaseDate': string;
+ 'secondaryTypes': string;
'sizeOnDisk': string;
'tags': string;
'title': string;
diff --git a/frontend/src/Album/Details/AlbumDetails.js b/frontend/src/Album/Details/AlbumDetails.js
index 783216a61..b581c1d77 100644
--- a/frontend/src/Album/Details/AlbumDetails.js
+++ b/frontend/src/Album/Details/AlbumDetails.js
@@ -192,6 +192,7 @@ class AlbumDetails extends Component {
duration,
overview,
albumType,
+ secondaryTypes,
statistics = {},
monitored,
releaseDate,
@@ -396,10 +397,11 @@ class AlbumDetails extends Component {
{
- !!duration &&
+ duration ?
{formatDuration(duration)}
-
+ :
+ null
}
-
-
-
- {moment(releaseDate).format(shortDateFormat)}
-
+
+
+
+ {moment(releaseDate).format(shortDateFormat)}
+
+
-
-
-
- {
- formatBytes(sizeOnDisk || 0)
- }
-
+
+
+
+ {formatBytes(sizeOnDisk)}
+
+
}
tooltip={
@@ -459,32 +461,55 @@ class AlbumDetails extends Component {
className={styles.detailsLabel}
size={sizes.LARGE}
>
-
-
-
- {monitored ? translate('Monitored') : translate('Unmonitored')}
-
+
+
+
+ {monitored ? translate('Monitored') : translate('Unmonitored')}
+
+
{
- !!albumType &&
+ albumType ?
:
+ null
+ }
-
- {albumType}
-
-
+ {
+ secondaryTypes.length ?
+ :
+ null
}
-
-
-
- {translate('Links')}
-
+
+
+
+ {translate('Links')}
+
+
}
tooltip={
@@ -632,6 +658,7 @@ AlbumDetails.propTypes = {
duration: PropTypes.number,
overview: PropTypes.string,
albumType: PropTypes.string.isRequired,
+ secondaryTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
statistics: PropTypes.object.isRequired,
releaseDate: PropTypes.string.isRequired,
ratings: PropTypes.object.isRequired,
@@ -658,6 +685,7 @@ AlbumDetails.propTypes = {
};
AlbumDetails.defaultProps = {
+ secondaryTypes: [],
isSaving: false
};
diff --git a/frontend/src/Artist/Details/AlbumRow.js b/frontend/src/Artist/Details/AlbumRow.js
index 75170ed6c..b5c8fa2cf 100644
--- a/frontend/src/Artist/Details/AlbumRow.js
+++ b/frontend/src/Artist/Details/AlbumRow.js
@@ -149,9 +149,7 @@ class AlbumRow extends Component {
if (name === 'secondaryTypes') {
return (
- {
- secondaryTypes
- }
+ {secondaryTypes.join(', ')}
);
}