Couldn't find any results for '{term}'
- You can also search using MusicBrainz ID of a show. eg. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234
+ You can also search using MusicBrainz ID of an artist. eg. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234
Why can't I find my artist?
@@ -157,7 +157,7 @@ class AddNewArtist extends Component {
!term &&
}
diff --git a/frontend/src/Album/AlbumCover.js b/frontend/src/Album/AlbumCover.js
new file mode 100644
index 000000000..a6f63c429
--- /dev/null
+++ 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,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';
+
+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 (
+ 
+ );
+ }
+
+ if (lazy) {
+ return (
+ 
+
+ );
+ }
+
+ return (
+ 
+ );
+ }
+}
+
+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;
diff --git a/frontend/src/Album/AlbumDetailsModalContent.css b/frontend/src/Album/AlbumDetailsModalContent.css
index 9d428208d..b80b14cb9 100644
--- 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;
diff --git a/frontend/src/Album/AlbumDetailsModalContent.js b/frontend/src/Album/AlbumDetailsModalContent.js
index 42a8357d0..178be8086 100644
--- 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 (
-
- Details
-
-
-
-
-
@@ -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
diff --git a/frontend/src/Album/AlbumDetailsModalContentConnector.js b/frontend/src/Album/AlbumDetailsModalContentConnector.js
index 23bfaeeea..5f2c52690 100644
--- 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
};
diff --git a/frontend/src/Album/AlbumSearchCell.js b/frontend/src/Album/AlbumSearchCell.js
index e2ad58550..c1924aa16 100644
--- 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}
/>
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+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;
diff --git a/frontend/src/Album/Details/AlbumDetailsConnector.js b/frontend/src/Album/Details/AlbumDetailsConnector.js
new file mode 100644
index 000000000..e10450745
--- /dev/null
+++ 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 (
+
+ {
+ columns.map((column) => {
+ const {
+ name,
+ isVisible
+ } = column;
+
+ if (!isVisible) {
+ return null;
+ }
+
+ if (name === 'medium') {
+ return (
+
+ {mediumNumber}
+
+ );
+ }
+
+ if (name === 'absoluteTrackNumber') {
+ return (
+
+ {absoluteTrackNumber}
+
+ );
+ }
+
+ if (name === 'title') {
+ return (
+
+ {title}
+
+ );
+ }
+
+ if (name === 'path') {
+ return (
+
+ {
+ trackFilePath
+ }
+
+ );
+ }
+
+ if (name === 'relativePath') {
+ return (
+
+ {
+ trackFileRelativePath
+ }
+
+ );
+ }
+
+ if (name === 'duration') {
+ return (
+
+ {
+ formatTimeSpan(duration)
+ }
+
+ );
+ }
+
+ if (name === 'language') {
+ return (
+
+
+ );
+ }
+
+ if (name === 'audioInfo') {
+ return (
+
+
+ );
+ }
+
+ if (name === 'status') {
+ return (
+
+
+ );
+ }
+
+ return null;
+ })
+ }
+
+ );
+ }
+}
+
+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;
diff --git a/frontend/src/Album/Details/TrackRowConnector.js b/frontend/src/Album/Details/TrackRowConnector.js
new file mode 100644
index 000000000..933fa32f5
--- /dev/null
+++ 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);
diff --git a/frontend/src/Album/Edit/EditAlbumModal.js b/frontend/src/Album/Edit/EditAlbumModal.js
new file mode 100644
index 000000000..d47bb284f
--- /dev/null
+++ 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 (
+
+
+ );
+}
+
+EditAlbumModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default EditAlbumModal;
diff --git a/frontend/src/Album/Edit/EditAlbumModalConnector.js b/frontend/src/Album/Edit/EditAlbumModalConnector.js
new file mode 100644
index 000000000..7c2383f0f
--- /dev/null
+++ 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 (
+
+
+ Edit - {artistName} - {title} [{albumType}]
+
+
+
+
+
+
+
+
+
+ Save
+
+
+
+
+ );
+ }
+}
+
+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;
diff --git a/frontend/src/Album/Edit/EditAlbumModalContentConnector.js b/frontend/src/Album/Edit/EditAlbumModalContentConnector.js
new file mode 100644
index 000000000..867e9c0c0
--- /dev/null
+++ 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 (
+
@@ -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,
diff --git a/frontend/src/AlbumStudio/AlbumStudioRowConnector.js b/frontend/src/AlbumStudio/AlbumStudioRowConnector.js
index 392e9602c..6172d2c71 100644
--- 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);
diff --git a/frontend/src/App/App.js b/frontend/src/App/App.js
index 5a8d6a95c..d7aec6f7a 100644
--- 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 }) {
/>
+ {
+ secondaryTypes
+ }
+
+ );
+ }
+
if (name === 'trackCount') {
return (
@@ -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,
diff --git a/frontend/src/Artist/Details/AlbumRowConnector.js b/frontend/src/Artist/Details/AlbumRowConnector.js
index c2260e773..05ae5042c 100644
--- 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
diff --git a/frontend/src/Artist/Details/ArtistDetails.js b/frontend/src/Artist/Details/ArtistDetails.js
index d9c877e2f..5793cbce2 100644
--- 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}`}
/>
It's easy to add a new artist, just start typing the name the artist you want to add.
- You can also search using MusicBrainz ID of a show. eg. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234
+ You can also search using MusicBrainz ID of an artist. eg. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+ {title}
+
+
+
+
+
+
*/}
+
+
+
+
+
+
+
+
+
+
+
+ {
+ !!albumType &&
+
+ }
+
+
+
+ {
+ !isPopulated && !albumsError && !trackFilesError &&
+
+
+ Loading albums failed
+ }
+
+ {
+ !isFetching && trackFilesError &&
+ Loading track files failed
+ }
+
+ {
+ isPopulated && !!media.length &&
+
+
+ {
+ media.slice(0).map((medium) => {
+ return (
+
+ }
+
+
+
+ );
+ }
+}
+
+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;
diff --git a/frontend/src/Album/Details/AlbumDetailsMediumConnector.js b/frontend/src/Album/Details/AlbumDetailsMediumConnector.js
new file mode 100644
index 000000000..32010a224
--- /dev/null
+++ 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 (
+
+
+
+
+ {
+
+
+
+
+
+ {mediumFormat} {mediumNumber}
+
+
+ }
+
+
+
+ {
+ isExpanded &&
+
+
+ {
+ items.length ?
+
+
:
+
+
+ }
+
+ No tracks in this medium
+
+ }
+
+
+