New: AlbumStudio Disambiguation and AlbumType

frontend/src/AlbumStudio/AlbumStudio.js

@@ -145,7 +145,7 @@ class AlbumStudio extends Component {
 
           {
             !isFetching && !!error &&
-              <div>Unable to load the calendar</div>
+              <div>Unable to load the Album Studio</div>
           }
 
           {

frontend/src/AlbumStudio/AlbumStudioAlbum.css

@@ -1,4 +1,4 @@
-.season {
+.album {
   display: flex;
   align-items: stretch;
   overflow: hidden;
@@ -13,6 +13,15 @@
   padding: 0 4px;
 }
 
+.albumType {
+  padding: 0 4px;
+  border-width: 0 1px;
+  border-style: solid;
+  border-color: $borderColor;
+  background-color: $white;
+  color: $defaultColor;
+}
+
 .tracks {
   padding: 0 4px;
   background-color: $white;
@@ -22,3 +31,7 @@
 .allTracks {
   background-color: #e0ffe0;
 }
+
+.missingWanted {
+  background-color: #ffe0e0;
+}

frontend/src/AlbumStudio/AlbumStudioAlbum.js

@@ -24,6 +24,8 @@ class AlbumStudioAlbum extends Component {
   render() {
     const {
       title,
+      disambiguation,
+      albumType,
       monitored,
       statistics,
       isSaving
@@ -36,7 +38,7 @@ class AlbumStudioAlbum extends Component {
     } = statistics;
 
     return (
-      <div className={styles.season}>
+      <div className={styles.album}>
         <div className={styles.info}>
           <MonitorToggleButton
             monitored={monitored}
@@ -46,7 +48,15 @@ class AlbumStudioAlbum extends Component {
 
           <span>
             {
-              `${title}`
+              disambiguation ? `${title} (${disambiguation})` : `${title}`
+            }
+          </span>
+        </div>
+
+        <div className={styles.albumType}>
+          <span>
+            {
+              `${albumType}`
             }
           </span>
         </div>
@@ -54,6 +64,7 @@ class AlbumStudioAlbum extends Component {
         <div
           className={classNames(
             styles.tracks,
+            percentOfTracks < 100 && monitored && styles.missingWanted,
             percentOfTracks === 100 && styles.allTracks
           )}
           title={`${trackFileCount}/${totalTrackCount} tracks downloaded`}
@@ -70,6 +81,8 @@ class AlbumStudioAlbum extends Component {
 AlbumStudioAlbum.propTypes = {
   id: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
+  disambiguation: PropTypes.string,
+  albumType: PropTypes.string.isRequired,
   monitored: PropTypes.bool.isRequired,
   statistics: PropTypes.object.isRequired,
   isSaving: PropTypes.bool.isRequired,

frontend/src/AlbumStudio/AlbumStudioRow.css

@@ -12,7 +12,7 @@
   white-space: nowrap;
 }
 
-.seasons {
+.albums {
   composes: cell from 'Components/Table/Cells/TableRowCell.css';
 
   display: flex;

frontend/src/AlbumStudio/AlbumStudioRow.js

@@ -61,13 +61,13 @@ class AlbumStudioRow extends Component {
           />
         </TableRowCell>
 
-        <TableRowCell className={styles.seasons}>
+        <TableRowCell className={styles.albums}>
           {
-            albums.map((season) => {
+            albums.map((album) => {
               return (
                 <AlbumStudioAlbum
-                  key={season.id}
-                  {...season}
+                  key={album.id}
+                  {...album}
                   onAlbumMonitoredPress={onAlbumMonitoredPress}
                 />
               );