New: Manually Edit/Override Album Release (#181)

* New: Manually Edit/Override Album Release * !fixup for comments, loading all albums instead of only artist albums * fixup! UI Cleanup lint issues * fixup! Remove AddAlbum service for now, fix refresh override selected release * fixup! Last one... to fix updating albums with custom release set Closes #109 Closes #129 Closes #128
2025-07-16 10:03:51 -07:00 · 2018-01-17 21:28:47 -05:00 · 2018-01-17 21:28:47 -05:00 · 26ef43f302
commit 26ef43f302
parent 74f433d4f0
96 changed files with 2928 additions and 408 deletions
--- a/frontend/src/Activity/Blacklist/BlacklistRow.js
+++ b/frontend/src/Activity/Blacklist/BlacklistRow.js
@ -68,7 +68,7 @@ class BlacklistRow extends Component {
              return (
                <TableRowCell key={name}>
                  <ArtistNameLink
-                    nameSlug={artist.nameSlug}
+                    foreignArtistId={artist.foreignArtistId}
                    artistName={artist.artistName}
                  />
                </TableRowCell>
--- a/frontend/src/Activity/History/HistoryRow.js
+++ b/frontend/src/Activity/History/HistoryRow.js
@ -103,7 +103,7 @@ class HistoryRow extends Component {
              return (
                <TableRowCell key={name}>
                  <ArtistNameLink
-                    nameSlug={artist.nameSlug}
+                    foreignArtistId={artist.foreignArtistId}
                    artistName={artist.artistName}
                  />
                </TableRowCell>
--- a/frontend/src/Activity/Queue/QueueRow.js
+++ b/frontend/src/Activity/Queue/QueueRow.js
@ -134,7 +134,7 @@ class QueueRow extends Component {
              return (
                <TableRowCell key={name}>
                  <ArtistNameLink
-                    nameSlug={artist.nameSlug}
+                    foreignArtistId={artist.foreignArtistId}
                    artistName={artist.artistName}
                  />
                </TableRowCell>
@ -145,7 +145,7 @@ class QueueRow extends Component {
              return (
                <TableRowCell key={name}>
                  <ArtistNameLink
-                    nameSlug={artist.nameSlug}
+                    foreignArtistId={artist.foreignArtistId}
                    artistName={artist.artistName}
                  />
                </TableRowCell>
--- a/frontend/src/AddArtist/AddNewArtist/AddNewArtist.js
+++ b/frontend/src/AddArtist/AddNewArtist/AddNewArtist.js
@ -99,7 +99,7 @@ class AddNewArtist extends Component {
              className={styles.searchInput}
              name="artistLookup"
              value={term}
-              placeholder="eg. Breaking Benjamin, lidarr:####"
+              placeholder="eg. Breaking Benjamin, lidarr:854a1807-025b-42a8-ba8c-2a39717f1d25"
              onChange={this.onSearchInputChange}
            />

@ -144,7 +144,7 @@ class AddNewArtist extends Component {
            !isFetching && !error && !items.length && !!term &&
              <div className={styles.message}>
                <div className={styles.noResults}>Couldn't find any results for '{term}'</div>
-                <div>You can also search using MusicBrainz ID of a show. eg. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234</div>
+                <div>You can also search using MusicBrainz ID of an artist. eg. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234</div>
                <div>
                  <Link to="https://github.com/Lidarr/Lidarr/wiki/FAQ#why-cant-i-add-a-new-artist-when-i-know-the-musicbrainz-id">
                    Why can't I find my artist?
@ -157,7 +157,7 @@ class AddNewArtist extends Component {
            !term &&
              <div className={styles.message}>
                <div className={styles.helpText}>It's easy to add a new artist, just start typing the name the artist you want to add.</div>
-                <div>You can also search using MusicBrainz ID of a show. eg. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234</div>
+                <div>You can also search using MusicBrainz ID of an artist. eg. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234</div>
              </div>
          }

--- a/frontend/src/Album/AlbumCover.js
+++ b/frontend/src/Album/AlbumCover.js
@ -0,0 +1,168 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import LazyLoad from 'react-lazyload';
+
+const coverPlaceholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPcAAAD3AgMAAAC84irAAAAADFBMVEUyMjI7Ozs1NTU4ODjgOsZvAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+EJEBIzDdm9OfoAAAbkSURBVGje7Zq9b9s4FMBZFgUkBR27C3cw0MromL1jxwyVZASB67G4qWPgoSAyBdm9CwECKCp8nbIccGj/Ce/BTUb3Lh3aI997pCjnTnyyt0JcIif5+ZHvPZLvQ0KMYxzjGMc4xjGOcYxjHOP4JUfSfP7RVPvSH3MYX/eC5aecxne1v+w95WebFs/rwVO/8+h8PnT6t3ln/DFQuJ06/SyHiX9pxa7o5/lewkuLDxLvhM8tPki8g07dU8Gnj5zGlw7P79n4pDVYi8/YuHO4n03z0z6XXDom4G3TXDdN840+LobN/W1Ty2slHD8bNvevlUgutLmTj4NmT3pf6mMGcJGth+gefaZsDCjB2Wj65wN8ZmnAGnE6eFieI1FvcEISLjIUr9hm+w7PFeHiE9t0E7dyIatE48odXTPu0j/A3BMnXf7NXDxudTxbE2VxMWVu+sfwf3i1ZMLiaQLf+iWIP4VtjtTzFhc35vfveZrb4nPt4R95ulu1cxeVh8Psw7rzbgWp8dWHyr83WJpbgjypjS5XeZnqRxmJNUd3MS1d6ue/tOn0WuayNd2CoTlaeqwnIVeOgcWHdHdMS9cSN1vCy3bxZwzFm6VL7QA14WTudVj1sFvf4ReZNSCO0IvwngXFV3hkFcriuPokrPrYbYxjVAHiZ24zLYIeP7/E4xZUgHiZWt29D9ptGemHR7mPo9B10HLGbucRfs/Ww2f2CD4L2u0+wofKwwvrd0XoqCmr38CAZa1d58LesEpvgqtN4MCR1mVj2nZWOiweVB/CAXuyi59Y1auA2eekg6Xw8Tfm013A8LFV8mYXL61ZF4Hb8Zx8d9vBtbdG7s99XvOOZlF38QVtmlkAv0ffxTOjxU/o5p8FvKbSszw2ik87+Iz23Lwf134RiWf2tG3xN2T4oh8vDO4U33z+5qnefFnR77OA2wheh2WfbJBHeI/XgtNJEaHdtJNrvPn8E8eV/kW/2xn8FDc77LemOyq4J1XvSbds7SZ3cAV+86UXP283TGaFUk4ZwmNyugne8FaqxdHtFkH8GNewg2cc3PjsM7CbbNdMwQJ47aL3mP5H308ar5XOn2nUwpx+4hrx/z+qn5DBNqD4rMUpWACnPwnhkfa9SnZwvX1MnHLVi08cPle+0wBuAsykd8dO0KkS9L0dPCO37MVLxJc6nPHdTeNT/ZeLDQN/DEFpBzc33Bfckhx8K1q7IS5vuPgjbTf5AL97zcALxFUHN76QrF7heTHru54RN3bbxTeEn4Xx04f4NOfhSuPLncmnQk3z1yLlSE8fabtFHVyZyIQlXes8zrdSJR5ea7k3+asUooXg2mO4oDprT/XdHpROhouL/8A3edBw5DYxBhYdn08Q53jd0elDfApHbHjL6Hk/pvvNd1rEWdLl9iG+hpMgiMMdVEM64B8X5nq6ZBwX5rCSeK/4uInJROiwetLi0jtpG0yJBPOkTVQXryEPKqMQbq6JeyUTvUOkilq/EVGmo5NIpP3XRIzhXIafrjzF30JUIqecKxIjOpF6il9jbHTLxjs3rN5voPH+GxbDA1m7GrM9a4zdTigdCUUXD2MSSEAXQRxDo2QHl2iwV+h7gchqLrLrhmKxH/Z6nqLUQD5AYSHWAEwk+Z1Ck1vEAmEhBaVtufDtj8Zmv6U+PQNBqbDf/szVR5XNvQteSAzRyeQhzgnIKR2Invq43gQb4+oRaJCTTcRd6RkzGXlJQe3vDq8gsDB2S0QaSoViwKNW9Sh9zUzEMA2MWtU7nJUGYhIa4bnjcLthgkkopMAGj3dxXgoMCbg+laTFL8luSn9pFkrAMf031cmVJz0jXzsKFm6OSfVqYnEILPKZDjeicPFhQoaHbMhKX+NmZ5Q+ntr8n5obhGPVKlx48cs+FteKP3MlswWv6CSPHK4Dmntm0ckreW0snmxKbsnLFdyo4mrwjLYJo+Dmyn0k3uDTEpMRTrnPKza+IHy9wGSEU2yMvSrvHeJ/Qt2UV+p0hVacvsah0psKXqEVy7y2tPu3xhM1oMxLReY00tAlJG9JFZktzCwyU4lbuqQ7U22VN1zi9gvsIP05PjAL7H55H/C6rREzyvu41bbS4VXb1OV0FLG1YVsa1J1gtzaosVJbHO3Gb6z4bR2H89s61FRqCIcgL+E3lfyWlsaN3eR6QDP0pSdeKqOEZjOgoda285SUl5W+Jga181wz0WQFF2poM7FtZTZKXlXZ0Fam10htroY3Ug9s43pN5OJ2jyZy28Iu1nu0sNsGenGzRwO9bd8Xd/u0793LA8Vmn5cHnPhiH+Gt+HIv4Ye+tnHoSyMHvrJy6Aszh76uc+DLQuLQV5XGMY5xjGMc4xjHOMYxjnH80uNfW99BeoyzJCoAAAAASUVORK5CYII=';
+
+function findCover(images) {
+  return _.find(images, { coverType: 'cover' });
+}
+
+function getCoverUrl(cover, size) {
+  if (cover) {
+    if (cover.url.contains('lastWrite=') || (/^https?:/).test(cover.url)) {
+      // Remove protocol
+      let url = cover.url.replace(/^https?:/, '');
+      url = url.replace('cover.jpg', `cover-${size}.jpg`);
+
+      return url;
+    }
+  }
+}
+
+class AlbumCover extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    const pixelRatio = Math.floor(window.devicePixelRatio);
+
+    const {
+      images,
+      size
+    } = props;
+
+    const cover = findCover(images);
+
+    this.state = {
+      pixelRatio,
+      cover,
+      coverUrl: getCoverUrl(cover, pixelRatio * size),
+      isLoaded: false,
+      hasError: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      images,
+      size
+    } = this.props;
+
+    const {
+      cover,
+      pixelRatio
+    } = this.state;
+
+    const nextcover = findCover(images);
+
+    if (nextcover && (!cover || nextcover.url !== cover.url)) {
+      this.setState({
+        cover: nextcover,
+        coverUrl: getCoverUrl(nextcover, pixelRatio * size),
+        hasError: false
+        // Don't reset isLoaded, as we want to immediately try to
+        // show the new image, whether an image was shown previously
+        // or the placeholder was shown.
+      });
+    }
+  }
+
+  //
+  // Listeners
+
+  onError = () => {
+    this.setState({ hasError: true });
+  }
+
+  onLoad = () => {
+    this.setState({
+      isLoaded: true,
+      hasError: false
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      className,
+      style,
+      size,
+      lazy,
+      overflow
+    } = this.props;
+
+    const {
+      coverUrl,
+      hasError,
+      isLoaded
+    } = this.state;
+
+    if (hasError || !coverUrl) {
+      return (
+        <img
+          className={className}
+          style={style}
+          src={coverPlaceholder}
+        />
+      );
+    }
+
+    if (lazy) {
+      return (
+        <LazyLoad
+          height={size}
+          offset={100}
+          overflow={overflow}
+          placeholder={
+            <img
+              className={className}
+              style={style}
+              src={coverPlaceholder}
+            />
+          }
+        >
+          <img
+            className={className}
+            style={style}
+            src={coverUrl}
+            onError={this.onError}
+          />
+        </LazyLoad>
+      );
+    }
+
+    return (
+      <img
+        className={className}
+        style={style}
+        src={isLoaded ? coverUrl : coverPlaceholder}
+        onError={this.onError}
+        onLoad={this.onLoad}
+      />
+    );
+  }
+}
+
+AlbumCover.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  size: PropTypes.number.isRequired,
+  lazy: PropTypes.bool.isRequired,
+  overflow: PropTypes.bool.isRequired
+};
+
+AlbumCover.defaultProps = {
+  size: 250,
+  lazy: true,
+  overflow: false
+};
+
+export default AlbumCover;
--- a/frontend/src/Album/AlbumDetailsModalContent.css
+++ b/frontend/src/Album/AlbumDetailsModalContent.css
@ -37,7 +37,7 @@
  margin-top: 20px;
 }

-.openSeriesButton {
+.openArtistButton {
  composes: button from 'Components/Link/Button.css';

  margin-right: auto;
--- a/frontend/src/Album/AlbumDetailsModalContent.js
+++ b/frontend/src/Album/AlbumDetailsModalContent.js
@ -8,13 +8,11 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
-import AlbumSummaryConnector from './Summary/AlbumSummaryConnector';
 import AlbumHistoryConnector from './History/AlbumHistoryConnector';
 import AlbumSearchConnector from './Search/AlbumSearchConnector';
 import styles from './AlbumDetailsModalContent.css';

 const tabs = [
-  'details',
  'history',
  'search'
 ];
@ -45,14 +43,10 @@ class AlbumDetailsModalContent extends Component {
  render() {
    const {
      albumId,
-      albumEntity,
-      artistId,
      artistName,
-      nameSlug,
-      albumLabel,
+      foreignArtistId,
      artistMonitored,
      albumTitle,
-      releaseDate,
      monitored,
      isSaving,
      showOpenArtistButton,
@ -61,7 +55,7 @@ class AlbumDetailsModalContent extends Component {
      onModalClose
    } = this.props;

-    const artistLink = `/artist/${nameSlug}`;
+    const artistLink = `/artist/${foreignArtistId}`;

    return (
      <ModalContent
@ -96,13 +90,6 @@ class AlbumDetailsModalContent extends Component {
            <TabList
              className={styles.tabList}
            >
-              <Tab
-                className={styles.tab}
-                selectedClassName={styles.selectedTab}
-              >
-                Details
-              </Tab>
-
              <Tab
                className={styles.tab}
                selectedClassName={styles.selectedTab}
@ -118,16 +105,6 @@ class AlbumDetailsModalContent extends Component {
              </Tab>
            </TabList>

-            <TabPanel className={styles.tabPanel}>
-              <AlbumSummaryConnector
-                albumId={albumId}
-                albumEntity={albumEntity}
-                releaseDate={releaseDate}
-                albumLabel={albumLabel}
-                artistId={artistId}
-              />
-            </TabPanel>
-
            <TabPanel className={styles.tabPanel}>
              <AlbumHistoryConnector
                albumId={albumId}
@ -148,7 +125,7 @@ class AlbumDetailsModalContent extends Component {
          {
            showOpenArtistButton &&
              <Button
-                className={styles.openSeriesButton}
+                className={styles.openArtistButton}
                to={artistLink}
                onPress={onModalClose}
              >
@ -172,7 +149,7 @@ AlbumDetailsModalContent.propTypes = {
  albumEntity: PropTypes.string.isRequired,
  artistId: PropTypes.number.isRequired,
  artistName: PropTypes.string.isRequired,
-  nameSlug: PropTypes.string.isRequired,
+  foreignArtistId: PropTypes.string.isRequired,
  artistMonitored: PropTypes.bool.isRequired,
  releaseDate: PropTypes.string.isRequired,
  albumLabel: PropTypes.arrayOf(PropTypes.string).isRequired,
@ -187,7 +164,7 @@ AlbumDetailsModalContent.propTypes = {
 };

 AlbumDetailsModalContent.defaultProps = {
-  selectedTab: 'details',
+  selectedTab: 'history',
  albumLabel: ['Unknown'],
  albumEntity: albumEntities.ALBUMS,
  startInteractiveSearch: false
--- a/frontend/src/Album/AlbumDetailsModalContentConnector.js
+++ b/frontend/src/Album/AlbumDetailsModalContentConnector.js
@ -17,13 +17,13 @@ function createMapStateToProps() {
    (album, artist) => {
      const {
        artistName,
-        nameSlug,
+        foreignArtistId,
        monitored: artistMonitored
      } = artist;

      return {
        artistName,
-        nameSlug,
+        foreignArtistId,
        artistMonitored,
        ...album
      };
--- a/frontend/src/Album/AlbumSearchCell.js
+++ b/frontend/src/Album/AlbumSearchCell.js
@ -5,6 +5,7 @@ import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import AlbumDetailsModal from './AlbumDetailsModal';
+import EditAlbumModalConnector from './Edit/EditAlbumModalConnector';
 import styles from './AlbumSearchCell.css';

 class AlbumSearchCell extends Component {
@ -16,7 +17,8 @@ class AlbumSearchCell extends Component {
    super(props, context);

    this.state = {
-      isDetailsModalOpen: false
+      isDetailsModalOpen: false,
+      isEditAlbumModalOpen: false
    };
  }

@ -31,6 +33,14 @@ class AlbumSearchCell extends Component {
    this.setState({ isDetailsModalOpen: false });
  }

+  onEditAlbumPress = () => {
+    this.setState({ isEditAlbumModalOpen: true });
+  }
+
+  onEditAlbumModalClose = () => {
+    this.setState({ isEditAlbumModalOpen: false });
+  }
+
  //
  // Render

@ -57,6 +67,12 @@ class AlbumSearchCell extends Component {
          onPress={this.onManualSearchPress}
        />

+        <IconButton
+          name={icons.EDIT}
+          title="Edit Album"
+          onPress={this.onEditAlbumPress}
+        />
+
        <AlbumDetailsModal
          isOpen={this.state.isDetailsModalOpen}
          albumId={albumId}
@ -67,6 +83,13 @@ class AlbumSearchCell extends Component {
          onModalClose={this.onDetailsModalClose}
          {...otherProps}
        />
+
+        <EditAlbumModalConnector
+          isOpen={this.state.isEditAlbumModalOpen}
+          albumId={albumId}
+          artistId={artistId}
+          onModalClose={this.onEditAlbumModalClose}
+        />
      </TableRowCell>
    );
  }
--- a/frontend/src/Album/AlbumTitleDetailLink.js
+++ b/frontend/src/Album/AlbumTitleDetailLink.js
@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Link from 'Components/Link/Link';
+
+function AlbumTitleDetailLink({ foreignAlbumId, title }) {
+  const link = `/album/${foreignAlbumId}`;
+
+  return (
+    <Link to={link}>
+      {title}
+    </Link>
+  );
+}
+
+AlbumTitleDetailLink.propTypes = {
+  foreignAlbumId: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired
+};
+
+export default AlbumTitleDetailLink;
--- a/frontend/src/Album/Details/AlbumDetails.css
+++ b/frontend/src/Album/Details/AlbumDetails.css
@ -0,0 +1,137 @@
+.innerContentBody {
+  padding: 0;
+}
+
+.header {
+  position: relative;
+  width: 100%;
+  height: 310px;
+}
+
+.backdrop {
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+}
+
+.backdropOverlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: $black;
+  opacity: 0.7;
+}
+
+.headerContent {
+  display: flex;
+  padding: 30px;
+  width: 100%;
+  height: 100%;
+  color: $white;
+}
+
+.logo {
+  flex-shrink: 0;
+  margin-right: 35px;
+  width: 250px;
+  height: 97px;
+}
+
+.cover {
+  flex-shrink: 0;
+  margin-right: 35px;
+  width: 250px;
+  height: 250px;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.titleRow {
+  display: flex;
+  justify-content: space-between;
+  flex: 0 0 auto;
+}
+
+.titleContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.title {
+  margin-bottom: 5px;
+  font-weight: 300;
+  font-size: 50px;
+  line-height: 50px;
+}
+
+.alternateTitlesIconContainer {
+  margin-left: 20px;
+  line-height: 50px;
+}
+
+.artistNavigationButtons {
+  white-space: no-wrap;
+}
+
+.artistNavigationButton {
+  composes: button from 'Components/Link/IconButton.css';
+
+  margin-left: 5px;
+  color: #e1e2e3;
+  white-space: nowrap;
+}
+
+.details {
+  font-weight: 300;
+  font-size: 20px;
+}
+
+.runtime {
+  margin-right: 15px;
+}
+
+.detailsLabel {
+  composes: label from 'Components/Label.css';
+
+  margin: 5px 10px 5px 0;
+}
+
+.sizeOnDisk,
+.qualityProfileName,
+.tags {
+  margin-left: 8px;
+  font-weight: 300;
+  font-size: 17px;
+}
+
+.overview {
+  flex: 1 0 auto;
+  min-height: 0;
+}
+
+.contentContainer {
+  padding: 20px;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .contentContainer {
+    padding: 20px 0;
+  }
+
+  .headerContent {
+    padding: 15px;
+  }
+}
+
+@media only screen and (max-width: $breakpointLarge) {
+  .cover {
+    display: none;
+  }
+}
--- a/frontend/src/Album/Details/AlbumDetails.js
+++ b/frontend/src/Album/Details/AlbumDetails.js
@ -0,0 +1,422 @@
+import _ from 'lodash';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import formatBytes from 'Utilities/Number/formatBytes';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import { align, icons, sizes } from 'Helpers/Props';
+import HeartRating from 'Components/HeartRating';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import Label from 'Components/Label';
+import AlbumCover from 'Album/AlbumCover';
+import EditAlbumModalConnector from 'Album/Edit/EditAlbumModalConnector';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import AlbumDetailsMediumConnector from './AlbumDetailsMediumConnector';
+import ArtistHistoryModal from 'Artist/History/ArtistHistoryModal';
+import TrackFileEditorModal from 'TrackFile/Editor/TrackFileEditorModal';
+
+import styles from './AlbumDetails.css';
+
+function getFanartUrl(images) {
+  const fanartImage = _.find(images, { coverType: 'fanart' });
+  if (fanartImage) {
+    // Remove protocol
+    return fanartImage.url.replace(/^https?:/, '');
+  }
+}
+
+function getExpandedState(newState) {
+  return {
+    allExpanded: newState.allSelected,
+    allCollapsed: newState.allUnselected,
+    expandedState: newState.selectedState
+  };
+}
+
+class AlbumDetails extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isArtistHistoryModalOpen: false,
+      isManageTracksOpen: false,
+      isEditAlbumModalOpen: false,
+      allExpanded: false,
+      allCollapsed: false,
+      expandedState: {}
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditAlbumPress = () => {
+    this.setState({ isEditAlbumModalOpen: true });
+  }
+
+  onEditAlbumModalClose = () => {
+    this.setState({ isEditAlbumModalOpen: false });
+  }
+
+  onManageTracksPress = () => {
+    this.setState({ isManageTracksOpen: true });
+  }
+
+  onManageTracksModalClose = () => {
+    this.setState({ isManageTracksOpen: false });
+  }
+
+  onArtistHistoryPress = () => {
+    this.setState({ isArtistHistoryModalOpen: true });
+  }
+
+  onArtistHistoryModalClose = () => {
+    this.setState({ isArtistHistoryModalOpen: false });
+  }
+
+  onExpandAllPress = () => {
+    const {
+      allExpanded,
+      expandedState
+    } = this.state;
+
+    this.setState(getExpandedState(selectAll(expandedState, !allExpanded)));
+  }
+
+  onExpandPress = (albumId, isExpanded) => {
+    this.setState((state) => {
+      const convertedState = {
+        allSelected: state.allExpanded,
+        allUnselected: state.allCollapsed,
+        selectedState: state.expandedState
+      };
+
+      const newState = toggleSelected(convertedState, [], albumId, isExpanded, false);
+
+      return getExpandedState(newState);
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      title,
+      albumType,
+      statistics,
+      monitored,
+      releaseDate,
+      images,
+      media,
+      isFetching,
+      isPopulated,
+      albumsError,
+      trackFilesError,
+      shortDateFormat,
+      artist,
+      previousAlbum,
+      nextAlbum,
+      isSearching,
+      onSearchPress
+    } = this.props;
+
+    const {
+      isArtistHistoryModalOpen,
+      isEditAlbumModalOpen,
+      isManageTracksOpen,
+      allExpanded,
+      allCollapsed,
+      expandedState
+    } = this.state;
+
+    let expandIcon = icons.EXPAND_INDETERMINATE;
+
+    if (allExpanded) {
+      expandIcon = icons.COLLAPSE;
+    } else if (allCollapsed) {
+      expandIcon = icons.EXPAND;
+    }
+
+    return (
+      <PageContent title={title}>
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="Search Album"
+              iconName={icons.SEARCH}
+              isSpinning={isSearching}
+              onPress={onSearchPress}
+            />
+
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label="Manage Tracks"
+              iconName={icons.TRACK_FILE}
+              onPress={this.onManageTracksPress}
+            />
+
+            <PageToolbarButton
+              label="History"
+              iconName={icons.HISTORY}
+              onPress={this.onArtistHistoryPress}
+            />
+
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label="Edit"
+              iconName={icons.EDIT}
+              onPress={this.onEditAlbumPress}
+            />
+
+          </PageToolbarSection>
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <PageToolbarButton
+              label={allExpanded ? 'Collapse All' : 'Expand All'}
+              iconName={expandIcon}
+              onPress={this.onExpandAllPress}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBodyConnector innerClassName={styles.innerContentBody}>
+          <div className={styles.header}>
+            <div
+              className={styles.backdrop}
+              style={{
+                backgroundImage: `url(${getFanartUrl(images)})`
+              }}
+            >
+              <div className={styles.backdropOverlay} />
+            </div>
+
+            <div className={styles.headerContent}>
+              <AlbumCover
+                className={styles.cover}
+                images={images}
+                size={500}
+                lazy={false}
+              />
+
+              <div className={styles.info}>
+                <div className={styles.titleContainer}>
+                  <div className={styles.title}>
+                    {title}
+                  </div>
+
+                  <div className={styles.artistNavigationButtons}>
+                    <IconButton
+                      className={styles.artistNavigationButton}
+                      name={icons.ARROW_LEFT}
+                      size={30}
+                      title={`Go to ${previousAlbum.title}`}
+                      to={`/album/${previousAlbum.foreignAlbumId}`}
+                    />
+
+                    <IconButton
+                      className={styles.artistNavigationButton}
+                      name={icons.ARROW_UP}
+                      size={30}
+                      title={`Go to ${artist.artistName}`}
+                      to={`/artist/${artist.foreignArtistId}`}
+                    />
+
+                    <IconButton
+                      className={styles.artistNavigationButton}
+                      name={icons.ARROW_RIGHT}
+                      size={30}
+                      title={`Go to ${nextAlbum.title}`}
+                      to={`/album/${nextAlbum.foreignAlbumId}`}
+                    />
+                  </div>
+                </div>
+
+                {/* <div className={styles.details}>
+                  <div>
+                    <HeartRating
+                      rating={ratings.value}
+                      iconSize={20}
+                    />
+                  </div>
+                </div> */}
+
+                <div className={styles.detailsLabels}>
+
+                  <Label
+                    className={styles.detailsLabel}
+                    size={sizes.LARGE}
+                  >
+                    <Icon
+                      name={icons.CALENDAR}
+                      size={17}
+                    />
+
+                    <span className={styles.sizeOnDisk}>
+                      {
+                        moment(releaseDate).format(shortDateFormat)
+                      }
+                    </span>
+                  </Label>
+
+                  <Label
+                    className={styles.detailsLabel}
+                    size={sizes.LARGE}
+                  >
+                    <Icon
+                      name={icons.DRIVE}
+                      size={17}
+                    />
+
+                    <span className={styles.sizeOnDisk}>
+                      {
+                        formatBytes(statistics.sizeOnDisk)
+                      }
+                    </span>
+                  </Label>
+
+                  <Label
+                    className={styles.detailsLabel}
+                    size={sizes.LARGE}
+                  >
+                    <Icon
+                      name={monitored ? icons.MONITORED : icons.UNMONITORED}
+                      size={17}
+                    />
+
+                    <span className={styles.qualityProfileName}>
+                      {monitored ? 'Monitored' : 'Unmonitored'}
+                    </span>
+                  </Label>
+
+                  {
+                    !!albumType &&
+                      <Label
+                        className={styles.detailsLabel}
+                        title="Type"
+                        size={sizes.LARGE}
+                      >
+                        <Icon
+                          name={icons.INFO}
+                          size={17}
+                        />
+
+                        <span className={styles.qualityProfileName}>
+                          {albumType}
+                        </span>
+                      </Label>
+                  }
+
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className={styles.contentContainer}>
+            {
+              !isPopulated && !albumsError && !trackFilesError &&
+                <LoadingIndicator />
+            }
+
+            {
+              !isFetching && albumsError &&
+                <div>Loading albums failed</div>
+            }
+
+            {
+              !isFetching && trackFilesError &&
+                <div>Loading track files failed</div>
+            }
+
+            {
+              isPopulated && !!media.length &&
+                <div>
+
+                  {
+                    media.slice(0).map((medium) => {
+                      return (
+                        <AlbumDetailsMediumConnector
+                          key={medium.mediumNumber}
+                          albumId={id}
+                          {...medium}
+                          isExpanded={expandedState[medium.mediumNumber]}
+                          onExpandPress={this.onExpandPress}
+                        />
+                      );
+                    })
+                  }
+                </div>
+            }
+
+          </div>
+
+          <TrackFileEditorModal
+            isOpen={isManageTracksOpen}
+            artistId={artist.id}
+            albumId={id}
+            onModalClose={this.onManageTracksModalClose}
+          />
+
+          <ArtistHistoryModal
+            isOpen={isArtistHistoryModalOpen}
+            artistId={artist.id}
+            albumId={id}
+            onModalClose={this.onArtistHistoryModalClose}
+          />
+
+          <EditAlbumModalConnector
+            isOpen={isEditAlbumModalOpen}
+            albumId={id}
+            artistId={artist.id}
+            onModalClose={this.onEditAlbumModalClose}
+          />
+
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+}
+
+AlbumDetails.propTypes = {
+  id: PropTypes.number.isRequired,
+  foreignAlbumId: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  albumType: PropTypes.string.isRequired,
+  statistics: PropTypes.object.isRequired,
+  releaseDate: PropTypes.string.isRequired,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  media: PropTypes.arrayOf(PropTypes.object).isRequired,
+  monitored: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  isSearching: PropTypes.bool,
+  isFetching: PropTypes.bool,
+  isPopulated: PropTypes.bool,
+  albumsError: PropTypes.object,
+  tracksError: PropTypes.object,
+  trackFilesError: PropTypes.object,
+  artist: PropTypes.object,
+  previousAlbum: PropTypes.object,
+  nextAlbum: PropTypes.object,
+  onRefreshPress: PropTypes.func,
+  onSearchPress: PropTypes.func.isRequired
+};
+
+AlbumDetails.defaultProps = {
+  isSaving: false
+};
+
+export default AlbumDetails;
--- a/frontend/src/Album/Details/AlbumDetailsConnector.js
+++ b/frontend/src/Album/Details/AlbumDetailsConnector.js
@ -0,0 +1,146 @@
+/* eslint max-params: 0 */
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { findCommand } from 'Utilities/Command';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
+import { fetchTracks, clearTracks } from 'Store/Actions/trackActions';
+import { fetchTrackFiles, clearTrackFiles } from 'Store/Actions/trackFileActions';
+import { executeCommand } from 'Store/Actions/commandActions';
+import * as commandNames from 'Commands/commandNames';
+import AlbumDetails from './AlbumDetails';
+import createAllArtistSelector from 'Store/Selectors/createAllArtistSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { foreignAlbumId }) => foreignAlbumId,
+    (state) => state.tracks,
+    (state) => state.trackFiles,
+    (state) => state.albums,
+    createAllArtistSelector(),
+    createCommandsSelector(),
+    createUISettingsSelector(),
+    (foreignAlbumId, tracks, trackFiles, albums, artists, commands, uiSettings) => {
+      const sortedAlbums = _.orderBy(albums.items, 'releaseDate');
+      const albumIndex = _.findIndex(sortedAlbums, { foreignAlbumId });
+      const album = sortedAlbums[albumIndex];
+      const artist = _.find(artists, { id: album.artistId });
+
+      if (!album) {
+        return {};
+      }
+
+      const previousAlbum = sortedAlbums[albumIndex - 1] || _.last(sortedAlbums);
+      const nextAlbum = sortedAlbums[albumIndex + 1] || _.first(sortedAlbums);
+      const isSearching = !!findCommand(commands, { name: commandNames.ALBUM_SEARCH });
+
+      const isFetching = tracks.isFetching || trackFiles.isFetching;
+      const isPopulated = tracks.isPopulated && trackFiles.isPopulated;
+      const tracksError = tracks.error;
+      const trackFilesError = trackFiles.error;
+
+      return {
+        ...album,
+        shortDateFormat: uiSettings.shortDateFormat,
+        artist,
+        isSearching,
+        isFetching,
+        isPopulated,
+        tracksError,
+        trackFilesError,
+        previousAlbum,
+        nextAlbum
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  executeCommand,
+  fetchTracks,
+  clearTracks,
+  fetchTrackFiles,
+  clearTrackFiles
+};
+
+class AlbumDetailsConnector extends Component {
+
+  componentDidMount() {
+    registerPagePopulator(this.populate);
+    this.populate();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      id
+    } = this.props;
+
+    // If the id has changed we need to clear the tracks/track
+    // files and fetch from the server.
+
+    if (prevProps.id !== id) {
+      this.unpopulate();
+      this.populate();
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.populate);
+    this.unpopulate();
+  }
+
+  //
+  // Control
+
+  populate = () => {
+    const albumId = this.props.id;
+
+    this.props.fetchTracks({ albumId });
+    this.props.fetchTrackFiles({ albumId });
+  }
+
+  unpopulate = () => {
+    this.props.clearTracks();
+    this.props.clearTrackFiles();
+  }
+
+  //
+  // Listeners
+
+  onSearchPress = () => {
+    this.props.executeCommand({
+      name: commandNames.ALBUM_SEARCH,
+      albumIds: [this.props.id]
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AlbumDetails
+        {...this.props}
+        onSearchPress={this.onSearchPress}
+      />
+    );
+  }
+}
+
+AlbumDetailsConnector.propTypes = {
+  id: PropTypes.number,
+  isAlbumFetching: PropTypes.bool,
+  isAlbumPopulated: PropTypes.bool,
+  foreignAlbumId: PropTypes.string.isRequired,
+  fetchTracks: PropTypes.func.isRequired,
+  clearTracks: PropTypes.func.isRequired,
+  fetchTrackFiles: PropTypes.func.isRequired,
+  clearTrackFiles: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AlbumDetailsConnector);
--- a/frontend/src/Album/Details/AlbumDetailsMedium.css
+++ b/frontend/src/Album/Details/AlbumDetailsMedium.css
@ -0,0 +1,114 @@
+.medium {
+  margin-bottom: 20px;
+  border: 1px solid $borderColor;
+  border-radius: 4px;
+  background-color: $white;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: 24px;
+}
+
+.mediumNumber {
+  margin-right: 10px;
+  margin-left: 5px;
+}
+
+.mediumFormat {
+  color: #8895aa;
+  font-style: italic;
+  font-size: 18px;
+}
+
+.expandButton {
+  composes: link from 'Components/Link/Link.css';
+
+  flex-grow: 1;
+  margin: 0 20px;
+  text-align: center;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  flex: 0 1 300px;
+}
+
+.left,
+.actions {
+  padding: 15px 10px;
+}
+
+.actionsMenu {
+  composes: menu from 'Components/Menu/Menu.css';
+
+  flex: 0 0 45px;
+}
+
+.actionsMenuContent {
+  composes: menuContent from 'Components/Menu/MenuContent.css';
+
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.actionMenuIcon {
+  margin-right: 8px;
+}
+
+.actionButton {
+  composes: button from 'Components/Link/IconButton.css';
+
+  width: 30px;
+}
+
+.tracks {
+  padding-top: 15px;
+  border-top: 1px solid $borderColor;
+}
+
+.collapseButtonContainer {
+  padding: 10px 15px;
+  width: 100%;
+  border-top: 1px solid $borderColor;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background-color: #fafafa;
+  text-align: center;
+}
+
+.expandButtonIcon {
+  composes: actionButton;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -12px;
+  margin-left: -15px;
+}
+
+.noTracks {
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .medium {
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+
+  .expandButtonIcon {
+    position: static;
+    margin: 0;
+  }
+}
--- a/frontend/src/Album/Details/AlbumDetailsMedium.js
+++ b/frontend/src/Album/Details/AlbumDetailsMedium.js
@ -0,0 +1,211 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import isAfter from 'Utilities/Date/isAfter';
+import isBefore from 'Utilities/Date/isBefore';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TrackRowConnector from './TrackRowConnector';
+import styles from './AlbumDetailsMedium.css';
+
+function getMediumStatistics(tracks) {
+  let trackCount = 0;
+  let trackFileCount = 0;
+  let totalTrackCount = 0;
+
+  tracks.forEach((track) => {
+    if (track.trackFileId) {
+      trackCount++;
+      trackFileCount++;
+    }
+
+    totalTrackCount++;
+  });
+
+  return {
+    trackCount,
+    trackFileCount,
+    totalTrackCount
+  };
+}
+
+function getTrackCountKind(trackFileCount, trackCount) {
+  if (trackFileCount === trackCount && trackCount > 0) {
+    return kinds.SUCCESS;
+  }
+
+  return kinds.DANGER;
+}
+
+class AlbumDetailsMedium extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this._expandByDefault();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.albumId !== this.props.albumId) {
+      this._expandByDefault();
+    }
+  }
+
+  //
+  // Control
+
+  _expandByDefault() {
+    const {
+      mediumNumber,
+      onExpandPress,
+      items
+    } = this.props;
+
+    const expand = _.some(items, (item) => {
+      return isAfter(item.airDateUtc) ||
+             isAfter(item.airDateUtc, { days: -30 });
+    });
+
+    onExpandPress(mediumNumber, expand && mediumNumber > 0);
+  }
+
+  //
+  // Listeners
+
+  onExpandPress = () => {
+    const {
+      mediumNumber,
+      isExpanded
+    } = this.props;
+
+    this.props.onExpandPress(mediumNumber, !isExpanded);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      mediumNumber,
+      mediumFormat,
+      items,
+      columns,
+      onTableOptionChange,
+      isExpanded,
+      isSmallScreen
+    } = this.props;
+
+    const {
+      trackCount,
+      trackFileCount,
+      totalTrackCount
+    } = getMediumStatistics(items);
+
+    return (
+      <div
+        className={styles.medium}
+      >
+        <div className={styles.header}>
+          <div className={styles.left}>
+            {
+              <div>
+                <span className={styles.mediumNumber}>
+                  {mediumFormat} {mediumNumber}
+                </span>
+              </div>
+            }
+
+            <Label
+              title={`${totalTrackCount} tracks total. ${trackFileCount} tracks with files.`}
+              kind={getTrackCountKind(trackFileCount, trackCount)}
+              size={sizes.LARGE}
+            >
+              {
+                <span>{totalTrackCount} / {trackCount}</span>
+              }
+            </Label>
+          </div>
+
+          <Link
+            className={styles.expandButton}
+            onPress={this.onExpandPress}
+          >
+            <Icon
+              className={styles.expandButtonIcon}
+              name={isExpanded ? icons.COLLAPSE : icons.EXPAND}
+              title={isExpanded ? 'Hide tracks' : 'Show tracks'}
+              size={24}
+            />
+            {
+              !isSmallScreen &&
+                <span>&nbsp;</span>
+            }
+          </Link>
+
+        </div>
+
+        <div>
+          {
+            isExpanded &&
+              <div className={styles.tracks}>
+                {
+                  items.length ?
+                    <Table
+                      columns={columns}
+                      onTableOptionChange={onTableOptionChange}
+                    >
+                      <TableBody>
+                        {
+                          items.map((item) => {
+                            return (
+                              <TrackRowConnector
+                                key={item.id}
+                                columns={columns}
+                                {...item}
+                              />
+                            );
+                          })
+                        }
+                      </TableBody>
+                    </Table> :
+
+                    <div className={styles.noTracks}>
+                      No tracks in this medium
+                    </div>
+                }
+                <div className={styles.collapseButtonContainer}>
+                  <IconButton
+                    name={icons.COLLAPSE}
+                    size={20}
+                    title="Hide tracks"
+                    onPress={this.onExpandPress}
+                  />
+                </div>
+              </div>
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+AlbumDetailsMedium.propTypes = {
+  albumId: PropTypes.number.isRequired,
+  mediumNumber: PropTypes.number.isRequired,
+  mediumFormat: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isSaving: PropTypes.bool,
+  isExpanded: PropTypes.bool,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onTableOptionChange: PropTypes.func.isRequired,
+  onExpandPress: PropTypes.func.isRequired
+};
+
+export default AlbumDetailsMedium;
--- a/frontend/src/Album/Details/AlbumDetailsMediumConnector.js
+++ b/frontend/src/Album/Details/AlbumDetailsMediumConnector.js
@ -0,0 +1,64 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import { setTracksTableOption } from 'Store/Actions/trackActions';
+import { executeCommand } from 'Store/Actions/commandActions';
+import AlbumDetailsMedium from './AlbumDetailsMedium';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { mediumNumber }) => mediumNumber,
+    (state) => state.tracks,
+    createDimensionsSelector(),
+    (mediumNumber, tracks, dimensions) => {
+
+      const tracksInMedium = _.filter(tracks.items, { mediumNumber });
+      const sortedTracks = _.orderBy(tracksInMedium, ['absoluteTrackNumber'], ['asc']);
+
+      return {
+        items: sortedTracks,
+        columns: tracks.columns,
+        isSmallScreen: dimensions.isSmallScreen
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setTracksTableOption,
+  executeCommand
+};
+
+class AlbumDetailsMediumConnector extends Component {
+
+  //
+  // Listeners
+
+  onTableOptionChange = (payload) => {
+    this.props.setTracksTableOption(payload);
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AlbumDetailsMedium
+        {...this.props}
+        onTableOptionChange={this.onTableOptionChange}
+      />
+    );
+  }
+}
+
+AlbumDetailsMediumConnector.propTypes = {
+  albumId: PropTypes.number.isRequired,
+  mediumNumber: PropTypes.number.isRequired,
+  setTracksTableOption: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AlbumDetailsMediumConnector);
--- a/frontend/src/Album/Details/AlbumDetailsPageConnector.js
+++ b/frontend/src/Album/Details/AlbumDetailsPageConnector.js
@ -0,0 +1,110 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { push } from 'react-router-redux';
+import NotFound from 'Components/NotFound';
+import { fetchAlbums, clearAlbums } from 'Store/Actions/albumActions';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import AlbumDetailsConnector from './AlbumDetailsConnector';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { match }) => match,
+    (state) => state.albums,
+    (match, albums) => {
+      const foreignAlbumId = match.params.foreignAlbumId;
+      const isAlbumsFetching = albums.isFetching;
+      const isAlbumsPopulated = albums.isPopulated;
+
+      return {
+        foreignAlbumId,
+        isAlbumsFetching,
+        isAlbumsPopulated
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  push,
+  fetchAlbums,
+  clearAlbums
+};
+
+class AlbumDetailsPageConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.populate();
+  }
+
+  componentWillUnmount() {
+    this.unpopulate();
+  }
+
+  //
+  // Control
+
+  populate = () => {
+    const foreignAlbumId = this.props.foreignAlbumId;
+    this.props.fetchAlbums({ foreignAlbumId });
+  }
+
+  unpopulate = () => {
+    this.props.clearAlbums();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      foreignAlbumId,
+      isAlbumsFetching,
+      isAlbumsPopulated
+    } = this.props;
+
+    if (!foreignAlbumId) {
+      return (
+        <NotFound
+          message="Sorry, that album cannot be found."
+        />
+      );
+    }
+
+    if (isAlbumsFetching) {
+      return (
+        <LoadingIndicator />
+      );
+    }
+
+    if (!isAlbumsFetching && !isAlbumsPopulated) {
+      return (
+        <LoadingIndicator />
+      );
+    }
+
+    if (!isAlbumsFetching && isAlbumsPopulated) {
+      return (
+        <AlbumDetailsConnector
+          foreignAlbumId={foreignAlbumId}
+        />
+      );
+    }
+  }
+}
+
+AlbumDetailsPageConnector.propTypes = {
+  foreignAlbumId: PropTypes.string,
+  match: PropTypes.shape({ params: PropTypes.shape({ foreignAlbumId: PropTypes.string.isRequired }).isRequired }).isRequired,
+  push: PropTypes.func.isRequired,
+  fetchAlbums: PropTypes.func.isRequired,
+  clearAlbums: PropTypes.func.isRequired,
+  isAlbumsFetching: PropTypes.bool.isRequired,
+  isAlbumsPopulated: PropTypes.bool.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AlbumDetailsPageConnector);
--- a/frontend/src/Album/Details/TrackRow.css
+++ b/frontend/src/Album/Details/TrackRow.css
@ -0,0 +1,31 @@
+.title {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  white-space: nowrap;
+}
+
+.monitored {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 42px;
+}
+
+.trackNumber {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 50px;
+}
+
+.audio {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 200px;
+}
+
+.language,
+.duration,
+.status {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 100px;
+}
--- a/frontend/src/Album/Details/TrackRow.js
+++ b/frontend/src/Album/Details/TrackRow.js
@ -0,0 +1,194 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import EpisodeStatusConnector from 'Album/EpisodeStatusConnector';
+import TrackFileLanguageConnector from 'TrackFile/TrackFileLanguageConnector';
+import MediaInfoConnector from 'TrackFile/MediaInfoConnector';
+import * as mediaInfoTypes from 'TrackFile/mediaInfoTypes';
+
+import styles from './TrackRow.css';
+
+class TrackRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isDetailsModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      mediumNumber,
+      trackFileId,
+      absoluteTrackNumber,
+      title,
+      duration,
+      trackFilePath,
+      trackFileRelativePath,
+      columns
+    } = this.props;
+
+    return (
+      <TableRow>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'medium') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.trackNumber}
+                >
+                  {mediumNumber}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'absoluteTrackNumber') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.trackNumber}
+                >
+                  {absoluteTrackNumber}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'title') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.title}
+                >
+                  {title}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'path') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    trackFilePath
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'relativePath') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    trackFileRelativePath
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'duration') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.duration}
+                >
+                  {
+                    formatTimeSpan(duration)
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'language') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.language}
+                >
+                  <TrackFileLanguageConnector
+                    episodeFileId={trackFileId}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'audioInfo') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.audio}
+                >
+                  <MediaInfoConnector
+                    type={mediaInfoTypes.AUDIO}
+                    trackFileId={trackFileId}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'status') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.status}
+                >
+                  <EpisodeStatusConnector
+                    albumId={id}
+                    trackFileId={trackFileId}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+      </TableRow>
+    );
+  }
+}
+
+TrackRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  albumId: PropTypes.number.isRequired,
+  trackFileId: PropTypes.number,
+  monitored: PropTypes.bool.isRequired,
+  mediumNumber: PropTypes.number.isRequired,
+  trackNumber: PropTypes.string.isRequired,
+  absoluteTrackNumber: PropTypes.number,
+  title: PropTypes.string.isRequired,
+  duration: PropTypes.number.isRequired,
+  isSaving: PropTypes.bool,
+  trackFilePath: PropTypes.string,
+  trackFileRelativePath: PropTypes.string,
+  mediaInfo: PropTypes.object,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default TrackRow;
--- a/frontend/src/Album/Details/TrackRowConnector.js
+++ b/frontend/src/Album/Details/TrackRowConnector.js
@ -0,0 +1,22 @@
+/* eslint max-params: 0 */
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createTrackFileSelector from 'Store/Selectors/createTrackFileSelector';
+import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
+import TrackRow from './TrackRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { id }) => id,
+    (state, { mediumNumber }) => mediumNumber,
+    createTrackFileSelector(),
+    createCommandsSelector(),
+    (id, mediumNumber, trackFile, commands) => {
+      return {
+        trackFilePath: trackFile ? trackFile.path : null,
+        trackFileRelativePath: trackFile ? trackFile.relativePath : null
+      };
+    }
+  );
+}
+export default connect(createMapStateToProps)(TrackRow);
--- a/frontend/src/Album/Edit/EditAlbumModal.js
+++ b/frontend/src/Album/Edit/EditAlbumModal.js
@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import EditAlbumModalContentConnector from './EditAlbumModalContentConnector';
+
+function EditAlbumModal({ isOpen, onModalClose, ...otherProps }) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <EditAlbumModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+EditAlbumModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default EditAlbumModal;
--- a/frontend/src/Album/Edit/EditAlbumModalConnector.js
+++ b/frontend/src/Album/Edit/EditAlbumModalConnector.js
@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditAlbumModal from './EditAlbumModal';
+
+const mapDispatchToProps = {
+  clearPendingChanges
+};
+
+class EditAlbumModalConnector extends Component {
+
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.clearPendingChanges({ section: 'albums' });
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditAlbumModal
+        {...this.props}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+EditAlbumModalConnector.propTypes = {
+  onModalClose: PropTypes.func.isRequired,
+  clearPendingChanges: PropTypes.func.isRequired
+};
+
+export default connect(undefined, mapDispatchToProps)(EditAlbumModalConnector);
--- a/frontend/src/Album/Edit/EditAlbumModalContent.js
+++ b/frontend/src/Album/Edit/EditAlbumModalContent.js
@ -0,0 +1,119 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+
+class EditAlbumModalContent extends Component {
+
+  //
+  // Listeners
+
+  onSavePress = () => {
+    const {
+      onSavePress
+    } = this.props;
+
+    onSavePress(false);
+
+  }
+
+  //  
+  // Render
+
+  render() {
+    const {
+      title,
+      artistName,
+      albumType,
+      item,
+      isSaving,
+      onInputChange,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    const {
+      monitored,
+      currentRelease,
+      releases
+    } = item;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Edit - {artistName} - {title} [{albumType}]
+        </ModalHeader>
+
+        <ModalBody>
+          <Form
+            {...otherProps}
+          >
+            <FormGroup>
+              <FormLabel>Monitored</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="monitored"
+                helpText="Lidarr will search for and download album"
+                {...monitored}
+                onChange={onInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel> Release</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.ALBUM_RELEASE_SELECT}
+                name="currentRelease"
+                helpText="Change release for this album"
+                albumReleases={releases}
+                selectedRelease={currentRelease}
+                onChange={onInputChange}
+              />
+            </FormGroup>
+
+          </Form>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            Cancel
+          </Button>
+
+          <SpinnerButton
+            isSpinning={isSaving}
+            onPress={this.onSavePress}
+          >
+            Save
+          </SpinnerButton>
+        </ModalFooter>
+
+      </ModalContent>
+    );
+  }
+}
+
+EditAlbumModalContent.propTypes = {
+  albumId: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  artistName: PropTypes.string.isRequired,
+  albumType: PropTypes.string.isRequired,
+  item: PropTypes.object.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default EditAlbumModalContent;
--- a/frontend/src/Album/Edit/EditAlbumModalContentConnector.js
+++ b/frontend/src/Album/Edit/EditAlbumModalContentConnector.js
@ -0,0 +1,97 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import selectSettings from 'Store/Selectors/selectSettings';
+import createAlbumSelector from 'Store/Selectors/createAlbumSelector';
+import createArtistSelector from 'Store/Selectors/createArtistSelector';
+import { setAlbumValue, saveAlbum } from 'Store/Actions/albumActions';
+import EditAlbumModalContent from './EditAlbumModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.albums,
+    createAlbumSelector(),
+    createArtistSelector(),
+    (albumState, album, artist) => {
+      const {
+        isSaving,
+        saveError,
+        pendingChanges
+      } = albumState;
+
+      const albumSettings = _.pick(album, [
+        'monitored',
+        'currentRelease',
+        'releases'
+      ]);
+
+      const settings = selectSettings(albumSettings, pendingChanges, saveError);
+
+      return {
+        title: album.title,
+        artistName: artist.artistName,
+        albumType: album.albumType,
+        isSaving,
+        saveError,
+        item: settings.settings,
+        ...settings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchSetAlbumValue: setAlbumValue,
+  dispatchSaveAlbum: saveAlbum
+};
+
+class EditAlbumModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+      this.props.onModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.dispatchSetAlbumValue({ name, value });
+  }
+
+  onSavePress = () => {
+    this.props.dispatchSaveAlbum({
+      id: this.props.albumId
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditAlbumModalContent
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onSavePress={this.onSavePress}
+      />
+    );
+  }
+}
+
+EditAlbumModalContentConnector.propTypes = {
+  albumId: PropTypes.number,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  dispatchSetAlbumValue: PropTypes.func.isRequired,
+  dispatchSaveAlbum: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(EditAlbumModalContentConnector);
--- a/frontend/src/AlbumStudio/AlbumStudioRow.js
+++ b/frontend/src/AlbumStudio/AlbumStudioRow.js
@ -20,6 +20,7 @@ class AlbumStudioRow extends Component {
      artistId,
      status,
      nameSlug,
+      foreignArtistId,
      artistName,
      monitored,
      albums,
@ -49,7 +50,7 @@ class AlbumStudioRow extends Component {

        <TableRowCell className={styles.title}>
          <ArtistNameLink
-            nameSlug={nameSlug}
+            foreignArtistId={foreignArtistId}
            artistName={artistName}
          />
        </TableRowCell>
@ -84,6 +85,7 @@ AlbumStudioRow.propTypes = {
  artistId: PropTypes.number.isRequired,
  status: PropTypes.string.isRequired,
  nameSlug: PropTypes.string.isRequired,
+  foreignArtistId: PropTypes.string.isRequired,
  artistName: PropTypes.string.isRequired,
  monitored: PropTypes.bool.isRequired,
  albums: PropTypes.arrayOf(PropTypes.object).isRequired,
--- a/frontend/src/AlbumStudio/AlbumStudioRowConnector.js
+++ b/frontend/src/AlbumStudio/AlbumStudioRowConnector.js
@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createArtistSelector from 'Store/Selectors/createArtistSelector';
 import { toggleArtistMonitored } from 'Store/Actions/artistActions';
-import { toggleAlbumMonitored } from 'Store/Actions/albumActions';
+import { toggleAlbumsMonitored } from 'Store/Actions/albumActions';
 import AlbumStudioRow from './AlbumStudioRow';

 function createMapStateToProps() {
@ -32,7 +32,7 @@ function createMapStateToProps() {

 const mapDispatchToProps = {
  toggleArtistMonitored,
-  toggleAlbumMonitored
+  toggleAlbumsMonitored
 };

 class AlbumStudioRowConnector extends Component {
@ -53,8 +53,9 @@ class AlbumStudioRowConnector extends Component {
  }

  onAlbumMonitoredPress = (albumId, monitored) => {
-    this.props.toggleAlbumMonitored({
-      albumId,
+    const albumIds = [albumId];
+    this.props.toggleAlbumsMonitored({
+      albumIds,
      monitored
    });
  }
@ -77,7 +78,7 @@ AlbumStudioRowConnector.propTypes = {
  artistId: PropTypes.number.isRequired,
  monitored: PropTypes.bool.isRequired,
  toggleArtistMonitored: PropTypes.func.isRequired,
-  toggleAlbumMonitored: PropTypes.func.isRequired
+  toggleAlbumsMonitored: PropTypes.func.isRequired
 };

 export default connect(createMapStateToProps, mapDispatchToProps)(AlbumStudioRowConnector);
--- a/frontend/src/App/App.js
+++ b/frontend/src/App/App.js
@ -14,6 +14,7 @@ import ImportArtist from 'AddArtist/ImportArtist/ImportArtist';
 import ArtistEditorConnector from 'Artist/Editor/ArtistEditorConnector';
 import AlbumStudioConnector from 'AlbumStudio/AlbumStudioConnector';
 import ArtistDetailsPageConnector from 'Artist/Details/ArtistDetailsPageConnector';
+import AlbumDetailsPageConnector from 'Album/Details/AlbumDetailsPageConnector';
 import CalendarPageConnector from 'Calendar/CalendarPageConnector';
 import HistoryConnector from 'Activity/History/HistoryConnector';
 import QueueConnector from 'Activity/Queue/QueueConnector';
@ -92,10 +93,15 @@ function App({ store, history }) {
              />

              <Route
-                path="/artist/:nameSlug"
+                path="/artist/:foreignArtistId"
                component={ArtistDetailsPageConnector}
              />

+              <Route
+                path="/album/:foreignAlbumId"
+                component={AlbumDetailsPageConnector}
+              />
+
              {/*
                Calendar
              */}
--- a/frontend/src/Artist/ArtistNameLink.js
+++ b/frontend/src/Artist/ArtistNameLink.js
@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Link from 'Components/Link/Link';

-function ArtistNameLink({ nameSlug, artistName }) {
-  const link = `/artist/${nameSlug}`;
+function ArtistNameLink({ foreignArtistId, artistName }) {
+  const link = `/artist/${foreignArtistId}`;

  return (
    <Link to={link}>
@ -13,7 +13,7 @@ function ArtistNameLink({ nameSlug, artistName }) {
 }

 ArtistNameLink.propTypes = {
-  nameSlug: PropTypes.string.isRequired,
+  foreignArtistId: PropTypes.string.isRequired,
  artistName: PropTypes.string.isRequired
 };

--- a/frontend/src/Artist/Details/AlbumRow.js
+++ b/frontend/src/Artist/Details/AlbumRow.js
@ -8,8 +8,7 @@ import Label from 'Components/Label';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
 import AlbumSearchCellConnector from 'Album/AlbumSearchCellConnector';
-import AlbumTitleLink from 'Album/AlbumTitleLink';
-
+import AlbumTitleDetailLink from 'Album/AlbumTitleDetailLink';
 import styles from './AlbumRow.css';

 function getTrackCountKind(monitored, trackFileCount, trackCount) {
@ -33,7 +32,8 @@ class AlbumRow extends Component {
    super(props, context);

    this.state = {
-      isDetailsModalOpen: false
+      isDetailsModalOpen: false,
+      isEditAlbumModalOpen: false
    };
  }

@ -48,6 +48,14 @@ class AlbumRow extends Component {
    this.setState({ isDetailsModalOpen: false });
  }

+  onEditAlbumPress = () => {
+    this.setState({ isEditAlbumModalOpen: true });
+  }
+
+  onEditAlbumModalClose = () => {
+    this.setState({ isEditAlbumModalOpen: false });
+  }
+
  onMonitorAlbumPress = (monitored, options) => {
    this.props.onMonitorAlbumPress(this.props.id, monitored, options);
  }
@ -64,9 +72,11 @@ class AlbumRow extends Component {
      duration,
      releaseDate,
      mediumCount,
+      secondaryTypes,
      title,
      isSaving,
      artistMonitored,
+      foreignAlbumId,
      columns
    } = this.props;

@ -111,11 +121,9 @@ class AlbumRow extends Component {
                  key={name}
                  className={styles.title}
                >
-                  <AlbumTitleLink
-                    albumId={id}
-                    artistId={artistId}
-                    albumTitle={title}
-                    showOpenArtistButton={false}
+                  <AlbumTitleDetailLink
+                    title={title}
+                    foreignAlbumId={foreignAlbumId}
                  />
                </TableRowCell>
              );
@ -131,6 +139,16 @@ class AlbumRow extends Component {
              );
            }

+            if (name === 'secondaryTypes') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    secondaryTypes
+                  }
+                </TableRowCell>
+              );
+            }
+
            if (name === 'trackCount') {
              return (
                <TableRowCell key={name}>
@ -189,7 +207,6 @@ class AlbumRow extends Component {
                />
              );
            }
-
            return null;
          })
        }
@ -206,6 +223,8 @@ AlbumRow.propTypes = {
  mediumCount: PropTypes.number.isRequired,
  duration: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
+  secondaryTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
+  foreignAlbumId: PropTypes.string.isRequired,
  isSaving: PropTypes.bool,
  unverifiedSceneNumbering: PropTypes.bool,
  artistMonitored: PropTypes.bool.isRequired,
--- a/frontend/src/Artist/Details/AlbumRowConnector.js
+++ b/frontend/src/Artist/Details/AlbumRowConnector.js
@ -15,6 +15,7 @@ function createMapStateToProps() {
    createCommandsSelector(),
    (id, sceneSeasonNumber, artist, trackFile, commands) => {
      return {
+        foreignArtistId: artist.foreignArtistId,
        artistMonitored: artist.monitored,
        trackFilePath: trackFile ? trackFile.path : null,
        trackFileRelativePath: trackFile ? trackFile.relativePath : null
--- a/frontend/src/Artist/Details/ArtistDetails.js
+++ b/frontend/src/Artist/Details/ArtistDetails.js
@ -34,34 +34,6 @@ import ArtistDetailsLinks from './ArtistDetailsLinks';
 import styles from './ArtistDetails.css';
 import InteractiveImportModal from '../../InteractiveImport/InteractiveImportModal';

-const albumTypes = [
-  {
-    name: 'album',
-    label: 'Album',
-    isVisible: true
-  },
-  {
-    name: 'ep',
-    label: 'EP',
-    isVisible: true
-  },
-  {
-    name: 'single',
-    label: 'Single',
-    isVisible: true
-  },
-  {
-    name: 'broadcast',
-    label: 'Broadcast',
-    isVisible: true
-  },
-  {
-    name: 'other',
-    label: 'Other',
-    isVisible: true
-  }
-];
-
 const defaultFontSize = parseInt(fonts.defaultFontSize);
 const lineHeight = parseFloat(fonts.lineHeight);

@ -193,6 +165,7 @@ class ArtistDetails extends Component {
      trackFileCount,
      qualityProfileId,
      monitored,
+      albumTypes,
      status,
      overview,
      links,
@ -359,7 +332,7 @@ class ArtistDetails extends Component {
                      name={icons.ARROW_LEFT}
                      size={30}
                      title={`Go to ${previousArtist.artistName}`}
-                      to={`/artist/${previousArtist.nameSlug}`}
+                      to={`/artist/${previousArtist.foreignArtistId}`}
                    />

                    <IconButton
@ -367,7 +340,7 @@ class ArtistDetails extends Component {
                      name={icons.ARROW_RIGHT}
                      size={30}
                      title={`Go to ${nextArtist.artistName}`}
-                      to={`/artist/${nextArtist.nameSlug}`}
+                      to={`/artist/${nextArtist.foreignArtistId}`}
                    />
                  </div>
                </div>
@ -545,12 +518,12 @@ class ArtistDetails extends Component {
                    albumTypes.slice(0).map((albumType) => {
                      return (
                        <ArtistDetailsSeasonConnector
-                          key={albumType.name}
+                          key={albumType}
                          artistId={id}
-                          name={albumType.name}
-                          label={albumType.label}
+                          name={albumType}
+                          label={albumType}
                          {...albumType}
-                          isExpanded={expandedState[albumType.name]}
+                          isExpanded={expandedState[albumType]}
                          onExpandPress={this.onExpandPress}
                        />
                      );
@ -614,6 +587,7 @@ ArtistDetails.propTypes = {
  trackFileCount: PropTypes.number,
  qualityProfileId: PropTypes.number.isRequired,
  monitored: PropTypes.bool.isRequired,
+  albumTypes: PropTypes.arrayOf(PropTypes.string),
  status: PropTypes.string.isRequired,
  overview: PropTypes.string.isRequired,
  links: PropTypes.arrayOf(PropTypes.object).isRequired,
--- a/frontend/src/Artist/Details/ArtistDetailsConnector.js
+++ b/frontend/src/Artist/Details/ArtistDetailsConnector.js
@ -17,20 +17,30 @@ import ArtistDetails from './ArtistDetails';

 function createMapStateToProps() {
  return createSelector(
-    (state, { nameSlug }) => nameSlug,
+    (state, { foreignArtistId }) => foreignArtistId,
    (state) => state.albums,
    (state) => state.trackFiles,
+    (state) => state.settings.metadataProfiles,
    createAllArtistSelector(),
    createCommandsSelector(),
-    (nameSlug, albums, trackFiles, allArtists, commands) => {
+    (foreignArtistId, albums, trackFiles, metadataProfiles, allArtists, commands) => {
      const sortedArtist = _.orderBy(allArtists, 'sortName');
-      const artistIndex = _.findIndex(sortedArtist, { nameSlug });
+      const artistIndex = _.findIndex(sortedArtist, { foreignArtistId });
      const artist = sortedArtist[artistIndex];
+      const metadataProfile = _.find(metadataProfiles.items, { id: artist.metadataProfileId });
+      const albumTypes = _.reduce(metadataProfile.primaryAlbumTypes, (acc, primaryType) => {
+        if (primaryType.allowed) {
+          acc.push(primaryType.albumType.name);
+        }
+        return acc;
+      }, []);

      if (!artist) {
        return {};
      }

+      const sortedAlbumTypes = _.orderBy(albumTypes);
+
      const previousArtist = sortedArtist[artistIndex - 1] || _.last(sortedArtist);
      const nextArtist = sortedArtist[artistIndex + 1] || _.first(sortedArtist);
      const isArtistRefreshing = !!findCommand(commands, { name: commandNames.REFRESH_ARTIST, artistId: artist.id });
@ -56,6 +66,7 @@ function createMapStateToProps() {

      return {
        ...artist,
+        albumTypes: sortedAlbumTypes,
        alternateTitles,
        isArtistRefreshing,
        allArtistRefreshing,
@ -176,7 +187,7 @@ class ArtistDetailsConnector extends Component {

 ArtistDetailsConnector.propTypes = {
  id: PropTypes.number.isRequired,
-  nameSlug: PropTypes.string.isRequired,
+  foreignArtistId: PropTypes.string.isRequired,
  isArtistRefreshing: PropTypes.bool.isRequired,
  allArtistRefreshing: PropTypes.bool.isRequired,
  isRefreshing: PropTypes.bool.isRequired,
--- a/frontend/src/Artist/Details/ArtistDetailsPageConnector.js
+++ b/frontend/src/Artist/Details/ArtistDetailsPageConnector.js
@ -13,12 +13,12 @@ function createMapStateToProps() {
    (state, { match }) => match,
    createAllArtistSelector(),
    (match, allArtists) => {
-      const nameSlug = match.params.nameSlug;
-      const artistIndex = _.findIndex(allArtists, { nameSlug });
+      const foreignArtistId = match.params.foreignArtistId;
+      const artistIndex = _.findIndex(allArtists, { foreignArtistId });

      if (artistIndex > -1) {
        return {
-          nameSlug
+          foreignArtistId
        };
      }

@ -37,7 +37,7 @@ class ArtistDetailsPageConnector extends Component {
  // Lifecycle

  componentDidUpdate(prevProps) {
-    if (!this.props.nameSlug) {
+    if (!this.props.foreignArtistId) {
      this.props.push(`${window.Sonarr.urlBase}/`);
      return;
    }
@ -48,10 +48,10 @@ class ArtistDetailsPageConnector extends Component {

  render() {
    const {
-      nameSlug
+      foreignArtistId
    } = this.props;

-    if (!nameSlug) {
+    if (!foreignArtistId) {
      return (
        <NotFound
          message="Sorry, that artist cannot be found."
@ -61,15 +61,15 @@ class ArtistDetailsPageConnector extends Component {

    return (
      <ArtistDetailsConnector
-        nameSlug={nameSlug}
+        foreignArtistId={foreignArtistId}
      />
    );
  }
 }

 ArtistDetailsPageConnector.propTypes = {
-  nameSlug: PropTypes.string,
-  match: PropTypes.shape({ params: PropTypes.shape({ nameSlug: PropTypes.string.isRequired }).isRequired }).isRequired,
+  foreignArtistId: PropTypes.string,
+  match: PropTypes.shape({ params: PropTypes.shape({ foreignArtistId: PropTypes.string.isRequired }).isRequired }).isRequired,
  push: PropTypes.func.isRequired
 };

--- a/frontend/src/Artist/Details/ArtistDetailsSeason.css
+++ b/frontend/src/Artist/Details/ArtistDetailsSeason.css
@ -106,7 +106,7 @@
 }

@media only screen and (max-width: $breakpointSmall) {
-  .season {
+  .albumType {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
--- a/frontend/src/Artist/Editor/ArtistEditorRow.js
+++ b/frontend/src/Artist/Editor/ArtistEditorRow.js
@ -27,7 +27,7 @@ class ArtistEditorRow extends Component {
    const {
      id,
      status,
-      nameSlug,
+      foreignArtistId,
      artistName,
      monitored,
      languageProfile,
@ -56,7 +56,7 @@ class ArtistEditorRow extends Component {

        <TableRowCell className={styles.title}>
          <ArtistNameLink
-            nameSlug={nameSlug}
+            foreignArtistId={foreignArtistId}
            artistName={artistName}
          />
        </TableRowCell>
@ -105,7 +105,7 @@ class ArtistEditorRow extends Component {
 ArtistEditorRow.propTypes = {
  id: PropTypes.number.isRequired,
  status: PropTypes.string.isRequired,
-  nameSlug: PropTypes.string.isRequired,
+  foreignArtistId: PropTypes.string.isRequired,
  artistName: PropTypes.string.isRequired,
  monitored: PropTypes.bool.isRequired,
  languageProfile: PropTypes.object.isRequired,
--- a/frontend/src/Artist/Index/Banners/ArtistIndexBanner.js
+++ b/frontend/src/Artist/Index/Banners/ArtistIndexBanner.js
@ -59,7 +59,7 @@ class ArtistIndexBanner extends Component {
      artistName,
      monitored,
      status,
-      nameSlug,
+      foreignArtistId,
      nextAiring,
      trackCount,
      trackFileCount,
@ -84,7 +84,7 @@ class ArtistIndexBanner extends Component {
      isDeleteArtistModalOpen
    } = this.state;

-    const link = `/artist/${nameSlug}`;
+    const link = `/artist/${foreignArtistId}`;

    const elementStyle = {
      width: `${bannerWidth}px`,
@ -213,7 +213,7 @@ ArtistIndexBanner.propTypes = {
  artistName: PropTypes.string.isRequired,
  monitored: PropTypes.bool.isRequired,
  status: PropTypes.string.isRequired,
-  nameSlug: PropTypes.string.isRequired,
+  foreignArtistId: PropTypes.string.isRequired,
  nextAiring: PropTypes.string,
  trackCount: PropTypes.number,
  trackFileCount: PropTypes.number,
--- a/frontend/src/Artist/Index/Overview/ArtistIndexOverview.js
+++ b/frontend/src/Artist/Index/Overview/ArtistIndexOverview.js
@ -77,7 +77,7 @@ class ArtistIndexOverview extends Component {
      overview,
      monitored,
      status,
-      nameSlug,
+      foreignArtistId,
      nextAiring,
      trackCount,
      trackFileCount,
@ -101,7 +101,7 @@ class ArtistIndexOverview extends Component {
      isDeleteArtistModalOpen
    } = this.state;

-    const link = `/artist/${nameSlug}`;
+    const link = `/artist/${foreignArtistId}`;

    const elementStyle = {
      width: `${posterWidth}px`,
@ -226,7 +226,7 @@ ArtistIndexOverview.propTypes = {
  overview: PropTypes.string.isRequired,
  monitored: PropTypes.bool.isRequired,
  status: PropTypes.string.isRequired,
-  nameSlug: PropTypes.string.isRequired,
+  foreignArtistId: PropTypes.string.isRequired,
  nextAiring: PropTypes.string,
  trackCount: PropTypes.number,
  trackFileCount: PropTypes.number,
--- a/frontend/src/Artist/Index/Posters/ArtistIndexPoster.js
+++ b/frontend/src/Artist/Index/Posters/ArtistIndexPoster.js
@ -58,8 +58,8 @@ class ArtistIndexPoster extends Component {
      id,
      artistName,
      monitored,
+      foreignArtistId,
      status,
-      nameSlug,
      nextAiring,
      trackCount,
      trackFileCount,
@ -84,7 +84,7 @@ class ArtistIndexPoster extends Component {
      isDeleteArtistModalOpen
    } = this.state;

-    const link = `/artist/${nameSlug}`;
+    const link = `/artist/${foreignArtistId}`;

    const elementStyle = {
      width: `${posterWidth}px`,
@ -213,7 +213,7 @@ ArtistIndexPoster.propTypes = {
  artistName: PropTypes.string.isRequired,
  monitored: PropTypes.bool.isRequired,
  status: PropTypes.string.isRequired,
-  nameSlug: PropTypes.string.isRequired,
+  foreignArtistId: PropTypes.string.isRequired,
  nextAiring: PropTypes.string,
  trackCount: PropTypes.number,
  trackFileCount: PropTypes.number,
--- a/frontend/src/Artist/Index/Table/ArtistIndexHeader.css
+++ b/frontend/src/Artist/Index/Table/ArtistIndexHeader.css
@ -18,8 +18,8 @@
  flex: 1 0 125px;
 }

-.nextAiring,
-.previousAiring,
+.nextAlbum,
+.lastAlbum,
 .added {
  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';

--- a/frontend/src/Artist/Index/Table/ArtistIndexRow.css
+++ b/frontend/src/Artist/Index/Table/ArtistIndexRow.css
@ -18,8 +18,8 @@
  flex: 1 0 125px;
 }

-.nextAiring,
-.previousAiring,
+.nextAlbum,
+.lastAlbum,
 .added {
  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';

@ -32,8 +32,7 @@
  flex: 0 0 100px;
 }

-.trackProgress,
-.latestAlbum {
+.trackProgress {
  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';

  display: flex;
--- a/frontend/src/Artist/Index/Table/ArtistIndexRow.js
+++ b/frontend/src/Artist/Index/Table/ArtistIndexRow.js
@ -12,6 +12,7 @@ import VirtualTableRow from 'Components/Table/VirtualTableRow';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import ArtistNameLink from 'Artist/ArtistNameLink';
+import AlbumTitleDetailLink from 'Album/AlbumTitleDetailLink';
 import EditArtistModalConnector from 'Artist/Edit/EditArtistModalConnector';
 import DeleteArtistModal from 'Artist/Delete/DeleteArtistModal';
 import ArtistStatusCell from './ArtistStatusCell';
@ -66,12 +67,13 @@ class ArtistIndexRow extends Component {
      status,
      artistName,
      nameSlug,
+      foreignArtistId,
      artistType,
      qualityProfile,
      languageProfile,
      metadataProfile,
-      nextAiring,
-      previousAiring,
+      nextAlbum,
+      lastAlbum,
      added,
      albumCount,
      trackCount,
@ -81,7 +83,6 @@ class ArtistIndexRow extends Component {
      path,
      sizeOnDisk,
      tags,
-      // useSceneNumbering,
      columns,
      isRefreshingArtist,
      onRefreshArtistPress
@ -124,7 +125,7 @@ class ArtistIndexRow extends Component {
                  className={styles[name]}
                >
                  <ArtistNameLink
-                    nameSlug={nameSlug}
+                    foreignArtistId={foreignArtistId}
                    artistName={artistName}
                  />
                </VirtualTableRowCell>
@ -175,25 +176,51 @@ class ArtistIndexRow extends Component {
              );
            }

-            if (name === 'nextAiring') {
+            if (name === 'nextAlbum') {
+              if (nextAlbum) {
+                return (
+                  <VirtualTableRowCell
+                    key={name}
+                    className={styles[name]}
+                  >
+                    <AlbumTitleDetailLink
+                      title={nextAlbum.title}
+                      foreignAlbumId={nextAlbum.foreignAlbumId}
+                    />
+                  </VirtualTableRowCell>
+                );
+              }
              return (
-                <RelativeDateCellConnector
+                <VirtualTableRowCell
                  key={name}
                  className={styles[name]}
-                  date={nextAiring}
-                  component={VirtualTableRowCell}
-                />
+                >
+                  None
+                </VirtualTableRowCell>
              );
            }

-            if (name === 'previousAiring') {
+            if (name === 'lastAlbum') {
+              if (lastAlbum) {
+                return (
+                  <VirtualTableRowCell
+                    key={name}
+                    className={styles[name]}
+                  >
+                    <AlbumTitleDetailLink
+                      title={lastAlbum.title}
+                      foreignAlbumId={lastAlbum.foreignAlbumId}
+                    />
+                  </VirtualTableRowCell>
+                );
+              }
              return (
-                <RelativeDateCellConnector
+                <VirtualTableRowCell
                  key={name}
                  className={styles[name]}
-                  date={previousAiring}
-                  component={VirtualTableRowCell}
-                />
+                >
+                  None
+                </VirtualTableRowCell>
              );
            }

@ -239,27 +266,6 @@ class ArtistIndexRow extends Component {
              );
            }

-            if (name === 'latestAlbum') {
-              const albumStatistics = latestAlbum.statistics;
-              const progress = albumStatistics.trackCount ? albumStatistics.trackFileCount / albumStatistics.trackCount * 100 : 100;
-
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <ProgressBar
-                    progress={progress}
-                    kind={getProgressBarKind(status, monitored, progress)}
-                    showText={true}
-                    text={`${albumStatistics.trackFileCount} / ${albumStatistics.trackCount}`}
-                    title={`${albumStatistics.trackFileCount} / ${albumStatistics.trackCount} (Total: ${albumStatistics.totalTrackCount})`}
-                    width={125}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
            if (name === 'trackCount') {
              return (
                <VirtualTableRowCell
@ -356,14 +362,15 @@ ArtistIndexRow.propTypes = {
  status: PropTypes.string.isRequired,
  artistName: PropTypes.string.isRequired,
  nameSlug: PropTypes.string.isRequired,
+  foreignArtistId: PropTypes.string.isRequired,
  artistType: PropTypes.string,
  qualityProfile: PropTypes.object.isRequired,
  languageProfile: PropTypes.object.isRequired,
  metadataProfile: PropTypes.object.isRequired,
-  nextAiring: PropTypes.string,
-  previousAiring: PropTypes.string,
+  nextAlbum: PropTypes.object,
+  lastAlbum: PropTypes.object,
  added: PropTypes.string,
-  albumCount: PropTypes.number.isRequired,
+  albumCount: PropTypes.number,
  trackCount: PropTypes.number,
  trackFileCount: PropTypes.number,
  totalTrackCount: PropTypes.number,
--- a/frontend/src/Artist/Index/Table/artistIndexCellRenderers.js
+++ b/frontend/src/Artist/Index/Table/artistIndexCellRenderers.js
@ -23,6 +23,7 @@ export default function artistIndexCellRenderers(cellProps) {
    status,
    name,
    nameSlug,
+    foreignArtistId,
    qualityProfileId,
    nextAiring,
    previousAiring,
@ -52,7 +53,7 @@ export default function artistIndexCellRenderers(cellProps) {
        {...otherProps}
      >
        <ArtistNameLink
-          nameSlug={nameSlug}
+          foreignArtistId={foreignArtistId}
          name={name}
        />
      </VirtualTableRowCell>
--- a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
+++ b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
@ -0,0 +1,65 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import titleCase from 'Utilities/String/titleCase';
+import SelectInput from './SelectInput';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { albumReleases }) => albumReleases,
+    (state, { selectedRelease }) => selectedRelease,
+    (albumReleases, selectedRelease) => {
+      const values = _.map(albumReleases.value, (albumRelease) => {
+
+        return {
+          key: albumRelease.id,
+          value: `${albumRelease.mediaCount} med, ${albumRelease.trackCount} tracks` +
+            `${albumRelease.country.length > 0 ? ', ' : ''}${albumRelease.country}` +
+            `${albumRelease.disambiguation ? ', ' : ''}${titleCase(albumRelease.disambiguation)}` +
+            `${albumRelease.format ? ', [' : ''}${albumRelease.format}${albumRelease.format ? ']' : ''}`
+        };
+      });
+
+      const value = selectedRelease.value.id;
+
+      return {
+        values,
+        value
+      };
+    }
+  );
+}
+
+class AlbumReleaseSelectInputConnector extends Component {
+
+  //
+  // Listeners
+
+  onChange = ({ name, value }) => {
+    const {
+      albumReleases
+    } = this.props;
+
+    this.props.onChange({ name, value: _.find(albumReleases.value, { id: value }) });
+  }
+
+  render() {
+
+    return (
+      <SelectInput
+        {...this.props}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+
+AlbumReleaseSelectInputConnector.propTypes = {
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  albumReleases: PropTypes.object
+};
+
+export default connect(createMapStateToProps)(AlbumReleaseSelectInputConnector);
--- a/frontend/src/Components/Form/FormInputGroup.js
+++ b/frontend/src/Components/Form/FormInputGroup.js
@ -12,6 +12,7 @@ import PathInputConnector from './PathInputConnector';
 import QualityProfileSelectInputConnector from './QualityProfileSelectInputConnector';
 import LanguageProfileSelectInputConnector from './LanguageProfileSelectInputConnector';
 import MetadataProfileSelectInputConnector from './MetadataProfileSelectInputConnector';
+import AlbumReleaseSelectInputConnector from './AlbumReleaseSelectInputConnector';
 import RootFolderSelectInputConnector from './RootFolderSelectInputConnector';
 import SeriesTypeSelectInput from './SeriesTypeSelectInput';
 import SelectInput from './SelectInput';
@ -53,6 +54,9 @@ function getComponent(type) {
    case inputTypes.METADATA_PROFILE_SELECT:
      return MetadataProfileSelectInputConnector;

+    case inputTypes.ALBUM_RELEASE_SELECT:
+      return AlbumReleaseSelectInputConnector;
+
    case inputTypes.ROOT_FOLDER_SELECT:
      return RootFolderSelectInputConnector;

--- a/frontend/src/Components/SignalRConnector.js
+++ b/frontend/src/Components/SignalRConnector.js
@ -218,12 +218,16 @@ class SignalRConnector extends Component {
  }

  handleTrack = (body) => {
-    if (body.action === 'updated') {
+    const action = body.action;
+    const section = 'tracks';
+
+    if (action === 'updated') {
      this.props.updateItem({
-        section: 'tracks',
-        updateOnly: true,
+        section,
        ...body.resource
      });
+    } else if (action === 'deleted') {
+      this.props.removeItem({ section, id: body.resource.id });
    }
  }

--- a/frontend/src/Helpers/Props/icons.js
+++ b/frontend/src/Helpers/Props/icons.js
@ -3,6 +3,7 @@ export const ACTIVITY = 'fa fa-clock-o';
 export const ADD = 'fa fa-plus';
 export const ALTERNATE_TITLES = 'fa fa-clone';
 export const ADVANCED_SETTINGS = 'fa fa-cog';
+export const ARROW_UP = 'fa fa-arrow-circle-up';
 export const ARROW_LEFT = 'fa fa-arrow-circle-left';
 export const ARROW_RIGHT = 'fa fa-arrow-circle-right';
 export const BACKUP = 'fa fa-file-archive-o';
--- a/frontend/src/Helpers/Props/inputTypes.js
+++ b/frontend/src/Helpers/Props/inputTypes.js
@ -8,6 +8,7 @@ export const PATH = 'path';
 export const QUALITY_PROFILE_SELECT = 'qualityProfileSelect';
 export const LANGUAGE_PROFILE_SELECT = 'languageProfileSelect';
 export const METADATA_PROFILE_SELECT = 'metadataProfileSelect';
+export const ALBUM_RELEASE_SELECT = 'albumReleaseSelect';
 export const ROOT_FOLDER_SELECT = 'rootFolderSelect';
 export const SELECT = 'select';
 export const SERIES_TYPE_SELECT = 'artistTypeSelect';
@ -26,6 +27,7 @@ export const all = [
  QUALITY_PROFILE_SELECT,
  LANGUAGE_PROFILE_SELECT,
  METADATA_PROFILE_SELECT,
+  ALBUM_RELEASE_SELECT,
  ROOT_FOLDER_SELECT,
  SELECT,
  SERIES_TYPE_SELECT,
--- a/frontend/src/Store/Actions/albumActions.js
+++ b/frontend/src/Store/Actions/albumActions.js
@ -5,7 +5,9 @@ import { batchActions } from 'redux-batched-actions';
 import { sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
+import createSetSettingValueReducer from './Creators/Reducers/createSetSettingValueReducer';
 import createSetTableOptionReducer from './Creators/Reducers/createSetTableOptionReducer';
+import createSaveProviderHandler from './Creators/createSaveProviderHandler';
 import albumEntities from 'Album/albumEntities';
 import createFetchHandler from './Creators/createFetchHandler';
 import createHandleActions from './Creators/createHandleActions';
@ -23,9 +25,12 @@ export const defaultState = {
  isFetching: false,
  isPopulated: false,
  error: null,
+  isSaving: false,
+  saveError: null,
  sortKey: 'releaseDate',
  sortDirection: sortDirections.DESCENDING,
  items: [],
+  pendingChanges: {},

  columns: [
    {
@ -44,6 +49,11 @@ export const defaultState = {
      label: 'Release Date',
      isVisible: true
    },
+    {
+      name: 'secondaryTypes',
+      label: 'Secondary Types',
+      isVisible: false
+    },
    {
      name: 'mediumCount',
      label: 'Media Count',
@ -84,6 +94,8 @@ export const FETCH_ALBUMS = 'albums/fetchAlbums';
 export const SET_ALBUMS_SORT = 'albums/setAlbumsSort';
 export const SET_ALBUMS_TABLE_OPTION = 'albums/setAlbumsTableOption';
 export const CLEAR_ALBUMS = 'albums/clearAlbums';
+export const SET_ALBUM_VALUE = 'albums/setAlbumValue';
+export const SAVE_ALBUM = 'albums/saveAlbum';
 export const TOGGLE_ALBUM_MONITORED = 'albums/toggleAlbumMonitored';
 export const TOGGLE_ALBUMS_MONITORED = 'albums/toggleAlbumsMonitored';

@ -97,11 +109,21 @@ export const clearAlbums = createAction(CLEAR_ALBUMS);
 export const toggleAlbumMonitored = createThunk(TOGGLE_ALBUM_MONITORED);
 export const toggleAlbumsMonitored = createThunk(TOGGLE_ALBUMS_MONITORED);

+export const saveAlbum = createThunk(SAVE_ALBUM);
+
+export const setAlbumValue = createAction(SET_ALBUM_VALUE, (payload) => {
+  return {
+    section: 'albums',
+    ...payload
+  };
+});
+
 //
 // Action Handlers

 export const actionHandlers = handleThunks({
  [FETCH_ALBUMS]: createFetchHandler(section, '/album'),
+  [SAVE_ALBUM]: createSaveProviderHandler(section, '/album'),

  [TOGGLE_ALBUM_MONITORED]: function(getState, payload, dispatch) {
    const {
@ -203,6 +225,8 @@ export const reducers = createHandleActions({

  [SET_ALBUMS_TABLE_OPTION]: createSetTableOptionReducer(section),

+  [SET_ALBUM_VALUE]: createSetSettingValueReducer(section),
+
  [CLEAR_ALBUMS]: (state) => {
    return Object.assign({}, state, {
      isFetching: false,
--- a/frontend/src/Store/Actions/artistIndexActions.js
+++ b/frontend/src/Store/Actions/artistIndexActions.js
@ -93,14 +93,14 @@ export const defaultState = {
      isVisible: false
    },
    {
-      name: 'nextAiring',
-      label: 'Next Airing',
+      name: 'nextAlbum',
+      label: 'Next Album',
      isSortable: true,
      isVisible: true
    },
    {
-      name: 'previousAiring',
-      label: 'Previous Airing',
+      name: 'lastAlbum',
+      label: 'Last Album',
      isSortable: true,
      isVisible: false
    },
@ -128,12 +128,6 @@ export const defaultState = {
      isSortable: true,
      isVisible: false
    },
-    {
-      name: 'latestAlbum',
-      label: 'Latest Album',
-      isSortable: true,
-      isVisible: false
-    },
    {
      name: 'path',
      label: 'Path',
--- a/frontend/src/Store/Actions/trackActions.js
+++ b/frontend/src/Store/Actions/trackActions.js
@ -20,13 +20,15 @@ export const defaultState = {
  error: null,
  sortKey: 'mediumNumber',
  sortDirection: sortDirections.DESCENDING,
+  secondarySortKey: 'absoluteTrackNumber',
+  secondarySortDirection: sortDirections.ASCENDING,
  items: [],

  columns: [
    {
      name: 'medium',
      label: 'Medium',
-      isVisible: true
+      isVisible: false
    },
    {
      name: 'absoluteTrackNumber',
@ -38,11 +40,26 @@ export const defaultState = {
      label: 'Title',
      isVisible: true
    },
+    {
+      name: 'path',
+      label: 'Path',
+      isVisible: false
+    },
+    {
+      name: 'relativePath',
+      label: 'Relative Path',
+      isVisible: false
+    },
    {
      name: 'duration',
      label: 'Duration',
      isVisible: true
    },
+    {
+      name: 'language',
+      label: 'Language',
+      isVisible: false
+    },
    {
      name: 'audioInfo',
      label: 'Audio Info',
@ -63,6 +80,8 @@ export const defaultState = {
 };

 export const persistState = [
+  'tracks.sortKey',
+  'tracks.sortDirection',
  'tracks.columns'
 ];

--- a/frontend/src/TrackFile/Editor/TrackFileEditorModalContentConnector.js
+++ b/frontend/src/TrackFile/Editor/TrackFileEditorModalContentConnector.js
@ -102,8 +102,9 @@ class TrackFileEditorModalContentConnector extends Component {

  componentDidMount() {
    const artistId = this.props.artistId;
+    const albumId = this.props.albumId;

-    this.props.dispatchFetchTracks({ artistId });
+    this.props.dispatchFetchTracks({ artistId, albumId });

    this.props.dispatchFetchLanguageProfileSchema();
    this.props.dispatchFetchQualityProfileSchema();
--- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js
+++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js
@ -48,7 +48,7 @@ function CutoffUnmetRow(props) {
            return (
              <TableRowCell key={name}>
                <ArtistNameLink
-                  nameSlug={artist.nameSlug}
+                  foreignArtistId={artist.foreignArtistId}
                  artistName={artist.artistName}
                />
              </TableRowCell>
--- a/frontend/src/Wanted/Missing/MissingRow.js
+++ b/frontend/src/Wanted/Missing/MissingRow.js
@ -47,7 +47,7 @@ function MissingRow(props) {
            return (
              <TableRowCell key={name}>
                <ArtistNameLink
-                  nameSlug={artist.nameSlug}
+                  foreignArtistId={artist.foreignArtistId}
                  artistName={artist.artistName}
                />
              </TableRowCell>