github/lidarr
1
0
Fork 0
mirror of https://github.com/lidarr/lidarr.git synced 2025-07-16 10:03:51 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

New: Add/remove individual albums

Browse source
This commit is contained in:
ta264 2019-12-16 21:21:32 +00:00 • committed by Qstick
parent 8da53ae6aa
commit 0bde5fd9e5
128 changed files with 2796 additions and 743 deletions
Download patch file Download diff file Expand all files Collapse all files

241
frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.js
View file

@ -1,241 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import TextTruncate from 'react-text-truncate';
import { icons, kinds, inputTypes, tooltipPositions } from 'Helpers/Props';
import Icon from 'Components/Icon';
import SpinnerButton from 'Components/Link/SpinnerButton';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormLabel from 'Components/Form/FormLabel';
import FormInputGroup from 'Components/Form/FormInputGroup';
import CheckInput from 'Components/Form/CheckInput';
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 Popover from 'Components/Tooltip/Popover';
import ArtistPoster from 'Artist/ArtistPoster';
import ArtistMonitoringOptionsPopoverContent from 'AddArtist/ArtistMonitoringOptionsPopoverContent';
import styles from './AddNewArtistModalContent.css';
class AddNewArtistModalContent extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
searchForMissingAlbums: false
};
}
//
// Listeners
onSearchForMissingAlbumsChange = ({ value }) => {
this.setState({ searchForMissingAlbums: value });
}
onQualityProfileIdChange = ({ value }) => {
this.props.onInputChange({ name: 'qualityProfileId', value: parseInt(value) });
}
onMetadataProfileIdChange = ({ value }) => {
this.props.onInputChange({ name: 'metadataProfileId', value: parseInt(value) });
}
onAddArtistPress = () => {
this.props.onAddArtistPress(this.state.searchForMissingAlbums);
}
//
// Render
render() {
const {
artistName,
overview,
images,
isAdding,
rootFolderPath,
monitor,
qualityProfileId,
metadataProfileId,
albumFolder,
tags,
showMetadataProfile,
isSmallScreen,
onModalClose,
onInputChange,
...otherProps
} = this.props;
return (
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
{artistName}
</ModalHeader>
<ModalBody>
<div className={styles.container}>
{
isSmallScreen ?
null:
<div className={styles.poster}>
<ArtistPoster
className={styles.poster}
images={images}
size={250}
/>
</div>
}
<div className={styles.info}>
{
overview ?
<div className={styles.overview}>
<TextTruncate
truncateText="…"
line={8}
text={overview}
/>
</div> :
null
}
<Form {...otherProps}>
<FormGroup>
<FormLabel>Root Folder</FormLabel>
<FormInputGroup
type={inputTypes.ROOT_FOLDER_SELECT}
name="rootFolderPath"
onChange={onInputChange}
{...rootFolderPath}
/>
</FormGroup>
<FormGroup>
<FormLabel>
Monitor
<Popover
anchor={
<Icon
className={styles.labelIcon}
name={icons.INFO}
/>
}
title="Monitoring Options"
body={<ArtistMonitoringOptionsPopoverContent />}
position={tooltipPositions.RIGHT}
/>
</FormLabel>
<FormInputGroup
type={inputTypes.MONITOR_ALBUMS_SELECT}
name="monitor"
onChange={onInputChange}
{...monitor}
/>
</FormGroup>
<FormGroup>
<FormLabel>Quality Profile</FormLabel>
<FormInputGroup
type={inputTypes.QUALITY_PROFILE_SELECT}
name="qualityProfileId"
onChange={this.onQualityProfileIdChange}
{...qualityProfileId}
/>
</FormGroup>
<FormGroup className={showMetadataProfile ? undefined : styles.hideMetadataProfile}>
<FormLabel>Metadata Profile</FormLabel>
<FormInputGroup
type={inputTypes.METADATA_PROFILE_SELECT}
name="metadataProfileId"
onChange={this.onMetadataProfileIdChange}
{...metadataProfileId}
/>
</FormGroup>
<FormGroup>
<FormLabel>Album Folder</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="albumFolder"
onChange={onInputChange}
{...albumFolder}
/>
</FormGroup>
<FormGroup>
<FormLabel>Tags</FormLabel>
<FormInputGroup
type={inputTypes.TAG}
name="tags"
onChange={onInputChange}
{...tags}
/>
</FormGroup>
</Form>
</div>
</div>
</ModalBody>
<ModalFooter className={styles.modalFooter}>
<label className={styles.searchForMissingAlbumsLabelContainer}>
<span className={styles.searchForMissingAlbumsLabel}>
Start search for missing albums
</span>
<CheckInput
containerClassName={styles.searchForMissingAlbumsContainer}
className={styles.searchForMissingAlbumsInput}
name="searchForMissingAlbums"
value={this.state.searchForMissingAlbums}
onChange={this.onSearchForMissingAlbumsChange}
/>
</label>
<SpinnerButton
className={styles.addButton}
kind={kinds.SUCCESS}
isSpinning={isAdding}
onPress={this.onAddArtistPress}
>
Add {artistName}
</SpinnerButton>
</ModalFooter>
</ModalContent>
);
}
}
AddNewArtistModalContent.propTypes = {
artistName: PropTypes.string.isRequired,
overview: PropTypes.string,
images: PropTypes.arrayOf(PropTypes.object).isRequired,
isAdding: PropTypes.bool.isRequired,
addError: PropTypes.object,
rootFolderPath: PropTypes.object,
monitor: PropTypes.object.isRequired,
qualityProfileId: PropTypes.object,
metadataProfileId: PropTypes.object,
albumFolder: PropTypes.object.isRequired,
tags: PropTypes.object.isRequired,
showMetadataProfile: PropTypes.bool.isRequired,
isSmallScreen: PropTypes.bool.isRequired,
onModalClose: PropTypes.func.isRequired,
onInputChange: PropTypes.func.isRequired,
onAddArtistPress: PropTypes.func.isRequired
};
export default AddNewArtistModalContent;

11
frontend/src/AddArtist/ArtistMetadataProfilePopoverContent.js Normal file
View file

@ -0,0 +1,11 @@
import React from 'react';
function ArtistMetadataProfilePopoverContent() {
return (
<div>
Select 'None' to only include items manually added via search
</div>
);
}
export default ArtistMetadataProfilePopoverContent;

12
frontend/src/AddArtist/ImportArtist/Import/ImportArtistConnector.js
View file

@ -6,7 +6,7 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { setImportArtistValue, importArtist, clearImportArtist } from 'Store/Actions/importArtistActions';
import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
import { setAddArtistDefault } from 'Store/Actions/addArtistActions';
import { setAddDefault } from 'Store/Actions/searchActions';
import createRouteMatchShape from 'Helpers/Props/Shapes/createRouteMatchShape';
import ImportArtist from './ImportArtist';
@ -67,7 +67,7 @@ const mapDispatchToProps = {
dispatchImportArtist: importArtist,
dispatchClearImportArtist: clearImportArtist,
dispatchFetchRootFolders: fetchRootFolders,
dispatchSetAddArtistDefault: setAddArtistDefault
dispatchSetAddDefault: setAddDefault
};
class ImportArtistConnector extends Component {
@ -82,7 +82,7 @@ class ImportArtistConnector extends Component {
defaultQualityProfileId,
defaultMetadataProfileId,
dispatchFetchRootFolders,
dispatchSetAddArtistDefault
dispatchSetAddDefault
} = this.props;
if (!this.props.rootFoldersPopulated) {
@ -109,7 +109,7 @@ class ImportArtistConnector extends Component {
}
if (setDefaults) {
dispatchSetAddArtistDefault(setDefaultPayload);
dispatchSetAddDefault(setDefaultPayload);
}
}
@ -121,7 +121,7 @@ class ImportArtistConnector extends Component {
// Listeners
onInputChange = (ids, name, value) => {
this.props.dispatchSetAddArtistDefault({ [name]: value });
this.props.dispatchSetAddDefault({ [name]: value });
ids.forEach((id) => {
this.props.dispatchSetImportArtistValue({
@ -164,7 +164,7 @@ ImportArtistConnector.propTypes = {
dispatchImportArtist: PropTypes.func.isRequired,
dispatchClearImportArtist: PropTypes.func.isRequired,
dispatchFetchRootFolders: PropTypes.func.isRequired,
dispatchSetAddArtistDefault: PropTypes.func.isRequired
dispatchSetAddDefault: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(ImportArtistConnector);

33
frontend/src/Album/Delete/DeleteAlbumModal.js Normal file
View file

@ -0,0 +1,33 @@
import PropTypes from 'prop-types';
import React from 'react';
import { sizes } from 'Helpers/Props';
import Modal from 'Components/Modal/Modal';
import DeleteAlbumModalContentConnector from './DeleteAlbumModalContentConnector';
function DeleteAlbumModal(props) {
const {
isOpen,
onModalClose,
...otherProps
} = props;
return (
<Modal
isOpen={isOpen}
size={sizes.MEDIUM}
onModalClose={onModalClose}
>
<DeleteAlbumModalContentConnector
{...otherProps}
onModalClose={onModalClose}
/>
</Modal>
);
}
DeleteAlbumModal.propTypes = {
isOpen: PropTypes.bool.isRequired,
onModalClose: PropTypes.func.isRequired
};
export default DeleteAlbumModal;

12
frontend/src/Album/Delete/DeleteAlbumModalContent.css Normal file
View file

@ -0,0 +1,12 @@
.pathContainer {
margin-bottom: 20px;
}
.pathIcon {
margin-right: 8px;
}
.deleteFilesMessage {
margin-top: 20px;
color: $dangerColor;
}

157
frontend/src/Album/Delete/DeleteAlbumModalContent.js Normal file
View file

@ -0,0 +1,157 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import formatBytes from 'Utilities/Number/formatBytes';
import { inputTypes, kinds } from 'Helpers/Props';
import Button from 'Components/Link/Button';
import FormGroup from 'Components/Form/FormGroup';
import FormLabel from 'Components/Form/FormLabel';
import FormInputGroup from 'Components/Form/FormInputGroup';
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 styles from './DeleteAlbumModalContent.css';
class DeleteAlbumModalContent extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
deleteFiles: false,
addImportListExclusion: true
};
}
//
// Listeners
onDeleteFilesChange = ({ value }) => {
this.setState({ deleteFiles: value });
}
onAddImportListExclusionChange = ({ value }) => {
this.setState({ addImportListExclusion: value });
}
onDeleteAlbumConfirmed = () => {
const deleteFiles = this.state.deleteFiles;
const addImportListExclusion = this.state.addImportListExclusion;
this.setState({ deleteFiles: false });
this.setState({ addImportListExclusion: false });
this.props.onDeletePress(deleteFiles, addImportListExclusion);
}
//
// Render
render() {
const {
title,
statistics,
onModalClose
} = this.props;
const {
trackFileCount,
sizeOnDisk
} = statistics;
const deleteFiles = this.state.deleteFiles;
const addImportListExclusion = this.state.addImportListExclusion;
const deleteFilesLabel = `Delete ${trackFileCount} Track Files`;
const deleteFilesHelpText = 'Delete the track files';
return (
<ModalContent
onModalClose={onModalClose}
>
<ModalHeader>
Delete - {title}
</ModalHeader>
<ModalBody>
<FormGroup>
<FormLabel>{deleteFilesLabel}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="deleteFiles"
value={deleteFiles}
helpText={deleteFilesHelpText}
kind={kinds.DANGER}
onChange={this.onDeleteFilesChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Add List Exclusion</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="addImportListExclusion"
value={addImportListExclusion}
helpText="Prevent album from being added to Lidarr by Import Lists or Artist Refresh"
kind={kinds.DANGER}
onChange={this.onAddImportListExclusionChange}
/>
</FormGroup>
{
!addImportListExclusion &&
<div className={styles.deleteFilesMessage}>
<div>If you don't add an import list exclusion and the artist has a metadata profile other than 'None' then this album may be re-added during the next artist refresh.</div>
</div>
}
{
deleteFiles &&
<div className={styles.deleteFilesMessage}>
<div>The album's files will be deleted.</div>
{
!!trackFileCount &&
<div>{trackFileCount} track files totaling {formatBytes(sizeOnDisk)}</div>
}
</div>
}
</ModalBody>
<ModalFooter>
<Button onPress={onModalClose}>
Close
</Button>
<Button
kind={kinds.DANGER}
onPress={this.onDeleteAlbumConfirmed}
>
Delete
</Button>
</ModalFooter>
</ModalContent>
);
}
}
DeleteAlbumModalContent.propTypes = {
title: PropTypes.string.isRequired,
statistics: PropTypes.object.isRequired,
onDeletePress: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};
DeleteAlbumModalContent.defaultProps = {
statistics: {
trackFileCount: 0
}
};
export default DeleteAlbumModalContent;

62
frontend/src/Album/Delete/DeleteAlbumModalContentConnector.js Normal file
View file

@ -0,0 +1,62 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { push } from 'connected-react-router';
import createAlbumSelector from 'Store/Selectors/createAlbumSelector';
import { deleteAlbum } from 'Store/Actions/albumActions';
import DeleteAlbumModalContent from './DeleteAlbumModalContent';
function createMapStateToProps() {
return createSelector(
createAlbumSelector(),
(album) => {
return album;
}
);
}
const mapDispatchToProps = {
push,
deleteAlbum
};
class DeleteAlbumModalContentConnector extends Component {
//
// Listeners
onDeletePress = (deleteFiles, addImportListExclusion) => {
this.props.deleteAlbum({
id: this.props.albumId,
deleteFiles,
addImportListExclusion
});
this.props.onModalClose(true);
this.props.push(`${window.Lidarr.urlBase}/artist/${this.props.foreignArtistId}`);
}
//
// Render
render() {
return (
<DeleteAlbumModalContent
{...this.props}
onDeletePress={this.onDeletePress}
/>
);
}
}
DeleteAlbumModalContentConnector.propTypes = {
albumId: PropTypes.number.isRequired,
foreignArtistId: PropTypes.string.isRequired,
push: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired,
deleteAlbum: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(DeleteAlbumModalContentConnector);

28
frontend/src/Album/Details/AlbumDetails.js
View file

@ -18,6 +18,7 @@ import AlbumCover from 'Album/AlbumCover';
import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
import RetagPreviewModalConnector from 'Retag/RetagPreviewModalConnector';
import EditAlbumModalConnector from 'Album/Edit/EditAlbumModalConnector';
import DeleteAlbumModal from 'Album/Delete/DeleteAlbumModal';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import PageContent from 'Components/Page/PageContent';
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
@ -88,6 +89,7 @@ class AlbumDetails extends Component {
isInteractiveSearchModalOpen: false,
isManageTracksOpen: false,
isEditAlbumModalOpen: false,
isDeleteAlbumModalOpen: false,
allExpanded: false,
allCollapsed: false,
expandedState: {}
@ -121,6 +123,17 @@ class AlbumDetails extends Component {
this.setState({ isEditAlbumModalOpen: false });
}
onDeleteAlbumPress = () => {
this.setState({
isEditAlbumModalOpen: false,
isDeleteAlbumModalOpen: true
});
}
onDeleteAlbumModalClose = () => {
this.setState({ isDeleteAlbumModalOpen: false });
}
onManageTracksPress = () => {
this.setState({ isManageTracksOpen: true });
}
@ -208,6 +221,7 @@ class AlbumDetails extends Component {
isArtistHistoryModalOpen,
isInteractiveSearchModalOpen,
isEditAlbumModalOpen,
isDeleteAlbumModalOpen,
isManageTracksOpen,
allExpanded,
allCollapsed,
@ -276,6 +290,12 @@ class AlbumDetails extends Component {
onPress={this.onEditAlbumPress}
/>
<PageToolbarButton
label="Delete"
iconName={icons.DELETE}
onPress={this.onDeleteAlbumPress}
/>
</PageToolbarSection>
<PageToolbarSection alignContent={align.RIGHT}>
<PageToolbarButton
@ -549,6 +569,14 @@ class AlbumDetails extends Component {
albumId={id}
artistId={artist.id}
onModalClose={this.onEditAlbumModalClose}
onDeleteArtistPress={this.onDeleteAlbumPress}
/>
<DeleteAlbumModal
isOpen={isDeleteAlbumModalOpen}
albumId={id}
foreignArtistId={artist.foreignArtistId}
onModalClose={this.onDeleteAlbumModalClose}
/>
</PageContentBodyConnector>

13
frontend/src/Album/Details/AlbumDetailsPageConnector.js
View file

@ -1,3 +1,4 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
@ -20,6 +21,18 @@ function createMapStateToProps() {
const isFetching = albums.isFetching || artist.isFetching;
const isPopulated = albums.isPopulated && artist.isPopulated;
// if albums have been fetched, make sure requested one exists
// otherwise don't map foreignAlbumId to trigger not found page
if (!isFetching && isPopulated) {
const albumIndex = _.findIndex(albums.items, { foreignAlbumId });
if (albumIndex === -1) {
return {
isFetching,
isPopulated
};
}
}
return {
foreignAlbumId,
isFetching,

6
frontend/src/App/AppRoutes.js
View file

@ -5,7 +5,7 @@ import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
import NotFound from 'Components/NotFound';
import Switch from 'Components/Router/Switch';
import ArtistIndexConnector from 'Artist/Index/ArtistIndexConnector';
import AddNewArtistConnector from 'AddArtist/AddNewArtist/AddNewArtistConnector';
import AddNewItemConnector from 'Search/AddNewItemConnector';
import ImportArtist from 'AddArtist/ImportArtist/ImportArtist';
import ArtistEditorConnector from 'Artist/Editor/ArtistEditorConnector';
import AlbumStudioConnector from 'AlbumStudio/AlbumStudioConnector';
@ -72,8 +72,8 @@ function AppRoutes(props) {
}
<Route
path="/add/new"
component={AddNewArtistConnector}
path="/add/search"
component={AddNewItemConnector}
/>
<Route

6
frontend/src/Artist/Details/ArtistDetails.js
View file

@ -611,7 +611,11 @@ class ArtistDetails extends Component {
</div>
<div className={styles.metadataMessage}>
Missing Albums, Singles, or Other Types? Modify or Create a New <Link to='/settings/profiles'> Metadata Profile</Link>!
Missing Albums, Singles, or Other Types? Modify or create a new
<Link to='/settings/profiles'> Metadata Profile </Link>
or manually
<Link to={`/add/search?term=${encodeURIComponent(artistName)}`}> Search </Link>
for new items!
</div>
<OrganizePreviewModalConnector

17
frontend/src/Artist/Details/ArtistDetailsConnector.js
View file

@ -28,13 +28,15 @@ const selectAlbums = createSelector(
const hasAlbums = !!items.length;
const hasMonitoredAlbums = items.some((e) => e.monitored);
const albumTypes = _.uniq(_.map(items, 'albumType'));
return {
isAlbumsFetching: isFetching,
isAlbumsPopulated: isPopulated,
albumsError: error,
hasAlbums,
hasMonitoredAlbums
hasMonitoredAlbums,
albumTypes
};
}
);
@ -65,20 +67,12 @@ function createMapStateToProps() {
(state, { foreignArtistId }) => foreignArtistId,
selectAlbums,
selectTrackFiles,
(state) => state.settings.metadataProfiles,
createAllArtistSelector(),
createCommandsSelector(),
(foreignArtistId, albums, trackFiles, metadataProfiles, allArtists, commands) => {
(foreignArtistId, albums, trackFiles, allArtists, commands) => {
const sortedArtist = _.orderBy(allArtists, 'sortName');
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 {};
@ -89,7 +83,8 @@ function createMapStateToProps() {
isAlbumsPopulated,
albumsError,
hasAlbums,
hasMonitoredAlbums
hasMonitoredAlbums,
albumTypes
} = albums;
const {

4
frontend/src/Artist/Edit/EditArtistModalContent.css
View file

@ -3,3 +3,7 @@
margin-right: auto;
}
.labelIcon {
margin-left: 8px;
}

23
frontend/src/Artist/Edit/EditArtistModalContent.js
View file

@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { inputTypes, kinds } from 'Helpers/Props';
import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
import Button from 'Components/Link/Button';
import SpinnerButton from 'Components/Link/SpinnerButton';
import ModalContent from 'Components/Modal/ModalContent';
@ -11,7 +11,10 @@ import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormLabel from 'Components/Form/FormLabel';
import FormInputGroup from 'Components/Form/FormInputGroup';
import Icon from 'Components/Icon';
import Popover from 'Components/Tooltip/Popover';
import MoveArtistModal from 'Artist/MoveArtist/MoveArtistModal';
import ArtistMetadataProfilePopoverContent from 'AddArtist/ArtistMetadataProfilePopoverContent';
import styles from './EditArtistModalContent.css';
class EditArtistModalContent extends Component {
@ -122,12 +125,28 @@ class EditArtistModalContent extends Component {
{
showMetadataProfile &&
<FormGroup>
<FormLabel>Metadata Profile</FormLabel>
<FormLabel>
Metadata Profile
<Popover
anchor={
<Icon
className={styles.labelIcon}
name={icons.INFO}
/>
}
title="Metadata Profile"
body={<ArtistMetadataProfilePopoverContent />}
position={tooltipPositions.RIGHT}
/>
</FormLabel>
<FormInputGroup
type={inputTypes.METADATA_PROFILE_SELECT}
name="metadataProfileId"
helpText="Changes will take place on next artist refresh"
includeNone={true}
{...metadataProfileId}
onChange={onInputChange}
/>

4
frontend/src/Artist/NoArtist.js
View file

@ -20,7 +20,7 @@ function NoArtist(props) {
return (
<div>
<div className={styles.message}>
No artist found, to get started you'll want to add a new artist or import some existing ones.
No artist found, to get started you'll want to add a new artist or album or import some existing ones.
</div>
<div className={styles.buttonContainer}>
@ -34,7 +34,7 @@ function NoArtist(props) {
<div className={styles.buttonContainer}>
<Button
to="/add/new"
to="/add/search"
kind={kinds.PRIMARY}
>
Add New Artist

18
frontend/src/Components/Form/MetadataProfileSelectInputConnector.js
View file

@ -4,6 +4,7 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import sortByName from 'Utilities/Array/sortByName';
import { metadataProfileNames } from 'Helpers/Props';
import SelectInput from './SelectInput';
function createMapStateToProps() {
@ -11,14 +12,26 @@ function createMapStateToProps() {
(state) => state.settings.metadataProfiles,
(state, { includeNoChange }) => includeNoChange,
(state, { includeMixed }) => includeMixed,
(metadataProfiles, includeNoChange, includeMixed) => {
const values = _.map(metadataProfiles.items.sort(sortByName), (metadataProfile) => {
(state, { includeNone }) => includeNone,
(metadataProfiles, includeNoChange, includeMixed, includeNone) => {
const profiles = metadataProfiles.items.filter((item) => item.name !== metadataProfileNames.NONE);
const noneProfile = metadataProfiles.items.find((item) => item.name === metadataProfileNames.NONE);
const values = _.map(profiles.sort(sortByName), (metadataProfile) => {
return {
key: metadataProfile.id,
value: metadataProfile.name
};
});
if (includeNone) {
values.push({
key: noneProfile.id,
value: noneProfile.name
});
}
if (includeNoChange) {
values.unshift({
key: 'noChange',
@ -88,6 +101,7 @@ MetadataProfileSelectInputConnector.propTypes = {
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
values: PropTypes.arrayOf(PropTypes.object).isRequired,
includeNoChange: PropTypes.bool.isRequired,
includeNone: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired
};

2
frontend/src/Components/Page/Header/ArtistSearchInput.js
View file

@ -209,7 +209,7 @@ class ArtistSearchInput extends Component {
}
suggestionGroups.push({
title: 'Add New Artist',
title: 'Add New Item',
suggestions: [
{
type: ADD_NEW_TYPE,

2
frontend/src/Components/Page/Header/ArtistSearchInputConnector.js
View file

@ -58,7 +58,7 @@ function createMapDispatchToProps(dispatch, props) {
},
onGoToAddNewArtist(query) {
dispatch(push(`${window.Lidarr.urlBase}/add/new?term=${encodeURIComponent(query)}`));
dispatch(push(`${window.Lidarr.urlBase}/add/search?term=${encodeURIComponent(query)}`));
}
};
}

2
frontend/src/Components/Page/Sidebar/PageSidebar.js
View file

@ -26,7 +26,7 @@ const links = [
children: [
{
title: 'Add New',
to: '/add/new'
to: '/add/search'
},
{
title: 'Import',

12
frontend/src/Components/SignalRConnector.js
View file

@ -176,12 +176,20 @@ class SignalRConnector extends Component {
}
handleAlbum = (body) => {
if (body.action === 'updated') {
const action = body.action;
const section = 'albums';
if (action === 'updated') {
this.props.dispatchUpdateItem({
section: 'albums',
section,
updateOnly: true,
...body.resource
});
} else if (action === 'deleted') {
this.props.dispatchRemoveItem({
section,
id: body.resource.id
});
}
}

2
frontend/src/Helpers/Props/index.js
View file

@ -7,6 +7,7 @@ import * as filterTypes from './filterTypes';
import * as icons from './icons';
import * as kinds from './kinds';
import * as messageTypes from './messageTypes';
import * as metadataProfileNames from './metadataProfileNames';
import * as sizes from './sizes';
import * as scrollDirections from './scrollDirections';
import * as sortDirections from './sortDirections';
@ -22,6 +23,7 @@ export {
icons,
kinds,
messageTypes,
metadataProfileNames,
sizes,
scrollDirections,
sortDirections,

1
frontend/src/Helpers/Props/metadataProfileNames.js Normal file
View file

@ -0,0 +1 @@
export const NONE = 'None';

0
frontend/src/AddArtist/AddNewArtist/AddNewArtist.css → frontend/src/Search/AddNewItem.css
View file

74
frontend/src/AddArtist/AddNewArtist/AddNewArtist.js → frontend/src/Search/AddNewItem.js
View file

@ -8,10 +8,11 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import TextInput from 'Components/Form/TextInput';
import PageContent from 'Components/Page/PageContent';
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
import AddNewArtistSearchResultConnector from './AddNewArtistSearchResultConnector';
import styles from './AddNewArtist.css';
import AddNewArtistSearchResultConnector from './Artist/AddNewArtistSearchResultConnector';
import AddNewAlbumSearchResultConnector from './Album/AddNewAlbumSearchResultConnector';
import styles from './AddNewItem.css';
class AddNewArtist extends Component {
class AddNewItem extends Component {
//
// Lifecycle
@ -29,7 +30,7 @@ class AddNewArtist extends Component {
const term = this.state.term;
if (term) {
this.props.onArtistLookupChange(term);
this.props.onSearchChange(term);
}
}
@ -44,7 +45,7 @@ class AddNewArtist extends Component {
term,
isFetching: true
});
this.props.onArtistLookupChange(term);
this.props.onSearchChange(term);
} else if (isFetching !== prevProps.isFetching) {
this.setState({
isFetching
@ -60,16 +61,16 @@ class AddNewArtist extends Component {
this.setState({ term: value, isFetching: hasValue }, () => {
if (hasValue) {
this.props.onArtistLookupChange(value);
this.props.onSearchChange(value);
} else {
this.props.onClearArtistLookup();
this.props.onClearSearch();
}
});
}
onClearArtistLookupPress = () => {
onClearSearchPress = () => {
this.setState({ term: '' });
this.props.onClearArtistLookup();
this.props.onClearSearch();
}
//
@ -85,7 +86,7 @@ class AddNewArtist extends Component {
const isFetching = this.state.isFetching;
return (
<PageContent title="Add New Artist">
<PageContent title="Add New Item">
<PageContentBodyConnector>
<div className={styles.searchContainer}>
<div className={styles.searchIconContainer}>
@ -97,7 +98,7 @@ class AddNewArtist extends Component {
<TextInput
className={styles.searchInput}
name="artistLookup"
name="searchBox"
value={term}
placeholder="eg. Breaking Benjamin, lidarr:854a1807-025b-42a8-ba8c-2a39717f1d25"
autoFocus={true}
@ -106,7 +107,7 @@ class AddNewArtist extends Component {
<Button
className={styles.clearLookupButton}
onPress={this.onClearArtistLookupPress}
onPress={this.onClearSearchPress}
>
<Icon
name={icons.REMOVE}
@ -130,12 +131,26 @@ class AddNewArtist extends Component {
<div className={styles.searchResults}>
{
items.map((item) => {
return (
<AddNewArtistSearchResultConnector
key={item.foreignArtistId}
{...item}
/>
);
if (item.artist) {
const artist = item.artist;
return (
<AddNewArtistSearchResultConnector
key={item.id}
{...artist}
/>
);
} else if (item.album) {
const album = item.album;
return (
<AddNewAlbumSearchResultConnector
key={item.id}
isExistingAlbum={'id' in album && album.id !== 0}
isExistingArtist={'id' in album.artist && album.artist.id !== 0}
{...album}
/>
);
}
return null;
})
}
</div>
@ -145,11 +160,10 @@ 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 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?
</Link>
You can also search using the
<Link to="https://musicbrainz.org/search"> MusicBrainz ID </Link>
of an artist e.g. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234
</div>
</div>
}
@ -157,8 +171,12 @@ 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 an artist. eg. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234</div>
<div className={styles.helpText}>It's easy to add a new artist, just start typing the name of the artist you want to add.</div>
<div>
You can also search using the
<Link to="https://musicbrainz.org/search"> MusicBrainz ID </Link>
of an artist e.g. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234
</div>
</div>
}
@ -169,15 +187,15 @@ class AddNewArtist extends Component {
}
}
AddNewArtist.propTypes = {
AddNewItem.propTypes = {
term: PropTypes.string,
isFetching: PropTypes.bool.isRequired,
error: PropTypes.object,
isAdding: PropTypes.bool.isRequired,
addError: PropTypes.object,
items: PropTypes.arrayOf(PropTypes.object).isRequired,
onArtistLookupChange: PropTypes.func.isRequired,
onClearArtistLookup: PropTypes.func.isRequired
onSearchChange: PropTypes.func.isRequired,
onClearSearch: PropTypes.func.isRequired
};
export default AddNewArtist;
export default AddNewItem;

54
frontend/src/AddArtist/AddNewArtist/AddNewArtistConnector.js → frontend/src/Search/AddNewItemConnector.js
View file

@ -3,32 +3,32 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import parseUrl from 'Utilities/String/parseUrl';
import { lookupArtist, clearAddArtist } from 'Store/Actions/addArtistActions';
import { getSearchResults, clearSearchResults } from 'Store/Actions/searchActions';
import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
import AddNewArtist from './AddNewArtist';
import AddNewItem from './AddNewItem';
function createMapStateToProps() {
return createSelector(
(state) => state.addArtist,
(state) => state.search,
(state) => state.router.location,
(addArtist, location) => {
(search, location) => {
const { params } = parseUrl(location.search);
return {
term: params.term,
...addArtist
...search
};
}
);
}
const mapDispatchToProps = {
lookupArtist,
clearAddArtist,
getSearchResults,
clearSearchResults,
fetchRootFolders
};
class AddNewArtistConnector extends Component {
class AddNewItemConnector extends Component {
//
// Lifecycle
@ -36,7 +36,7 @@ class AddNewArtistConnector extends Component {
constructor(props, context) {
super(props, context);
this._artistLookupTimeout = null;
this._searchTimeout = null;
}
componentDidMount() {
@ -44,32 +44,32 @@ class AddNewArtistConnector extends Component {
}
componentWillUnmount() {
if (this._artistLookupTimeout) {
clearTimeout(this._artistLookupTimeout);
if (this._searchTimeout) {
clearTimeout(this._searchTimeout);
}
this.props.clearAddArtist();
this.props.clearSearchResults();
}
//
// Listeners
onArtistLookupChange = (term) => {
if (this._artistLookupTimeout) {
clearTimeout(this._artistLookupTimeout);
onSearchChange = (term) => {
if (this._searchTimeout) {
clearTimeout(this._searchTimeout);
}
if (term.trim() === '') {
this.props.clearAddArtist();
this.props.clearSearchResults();
} else {
this._artistLookupTimeout = setTimeout(() => {
this.props.lookupArtist({ term });
this._searchTimeout = setTimeout(() => {
this.props.getSearchResults({ term });
}, 300);
}
}
onClearArtistLookup = () => {
this.props.clearAddArtist();
onClearSearch = () => {
this.props.clearSearchResults();
}
//
@ -82,21 +82,21 @@ class AddNewArtistConnector extends Component {
} = this.props;
return (
<AddNewArtist
<AddNewItem
term={term}
{...otherProps}
onArtistLookupChange={this.onArtistLookupChange}
onClearArtistLookup={this.onClearArtistLookup}
onSearchChange={this.onSearchChange}
onClearSearch={this.onClearSearch}
/>
);
}
}
AddNewArtistConnector.propTypes = {
AddNewItemConnector.propTypes = {
term: PropTypes.string,
lookupArtist: PropTypes.func.isRequired,
clearAddArtist: PropTypes.func.isRequired,
getSearchResults: PropTypes.func.isRequired,
clearSearchResults: PropTypes.func.isRequired,
fetchRootFolders: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(AddNewArtistConnector);
export default connect(createMapStateToProps, mapDispatchToProps)(AddNewItemConnector);

31
frontend/src/Search/Album/AddNewAlbumModal.js Normal file
View file

@ -0,0 +1,31 @@
import PropTypes from 'prop-types';
import React from 'react';
import Modal from 'Components/Modal/Modal';
import AddNewAlbumModalContentConnector from './AddNewAlbumModalContentConnector';
function AddNewAlbumModal(props) {
const {
isOpen,
onModalClose,
...otherProps
} = props;
return (
<Modal
isOpen={isOpen}
onModalClose={onModalClose}
>
<AddNewAlbumModalContentConnector
{...otherProps}
onModalClose={onModalClose}
/>
</Modal>
);
}
AddNewAlbumModal.propTypes = {
isOpen: PropTypes.bool.isRequired,
onModalClose: PropTypes.func.isRequired
};
export default AddNewAlbumModal;

126
frontend/src/Search/Album/AddNewAlbumModalContent.css Normal file
View file

@ -0,0 +1,126 @@
.container {
display: flex;
}
.poster {
flex: 0 0 170px;
margin-right: 20px;
height: 250px;
}
.info {
flex-grow: 1;
}
.name {
font-weight: 300;
font-size: 36px;
}
.artistName {
margin-bottom: 20px;
font-weight: 300;
font-size: 20px;
}
.disambiguation {
margin-bottom: 20px;
color: $disabledColor;
font-weight: 300;
font-size: 20px;
}
.overview {
margin-bottom: 30px;
max-height: 230px;
text-align: justify;
}
.header {
position: relative;
display: flex;
align-items: center;
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
font-size: 24px;
cursor: pointer;
}
.left {
display: flex;
align-items: center;
flex: 0 1 300px;
}
.albumType {
margin-bottom: 20px;
border: 1px solid $borderColor;
border-radius: 4px;
background-color: $white;
&:last-of-type {
margin-bottom: 0;
}
}
.albumTypeLabel {
margin-right: 5px;
margin-left: 5px;
}
.albumCount {
color: #8895aa;
font-style: italic;
font-size: 18px;
}
.expandButton {
composes: link from '~Components/Link/Link.css';
flex-grow: 1;
width: 100%;
text-align: center;
}
.searchForNewAlbumLabelContainer {
display: flex;
margin-top: 2px;
}
.searchForNewAlbumLabel {
margin-right: 8px;
font-weight: normal;
}
.searchForNewAlbumContainer {
composes: container from '~Components/Form/CheckInput.css';
flex: 0 1 0;
}
.searchForNewAlbumInput {
composes: input from '~Components/Form/CheckInput.css';
margin-top: 0;
}
.modalFooter {
composes: modalFooter from '~Components/Modal/ModalFooter.css';
}
.addButton {
@add-mixin truncate;
composes: button from '~Components/Link/SpinnerButton.css';
}
@media only screen and (max-width: $breakpointSmall) {
.modalFooter {
display: block;
text-align: center;
}
.addButton {
margin-top: 10px;
}
}

157
frontend/src/Search/Album/AddNewAlbumModalContent.js Normal file
View file

@ -0,0 +1,157 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import TextTruncate from 'react-text-truncate';
import { kinds } from 'Helpers/Props';
import SpinnerButton from 'Components/Link/SpinnerButton';
import CheckInput from 'Components/Form/CheckInput';
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 AlbumCover from 'Album/AlbumCover';
import AddArtistOptionsForm from '../Common/AddArtistOptionsForm.js';
import styles from './AddNewAlbumModalContent.css';
class AddNewAlbumModalContent extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
searchForNewAlbum: false
};
}
//
// Listeners
onSearchForNewAlbumChange = ({ value }) => {
this.setState({ searchForNewAlbum: value });
}
onAddAlbumPress = () => {
this.props.onAddAlbumPress(this.state.searchForNewAlbum);
}
//
// Render
render() {
const {
albumTitle,
artistName,
disambiguation,
overview,
images,
isAdding,
isExistingArtist,
isSmallScreen,
onModalClose,
...otherProps
} = this.props;
return (
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
Add new Album
</ModalHeader>
<ModalBody>
<div className={styles.container}>
{
isSmallScreen ?
null:
<div className={styles.poster}>
<AlbumCover
className={styles.poster}
images={images}
size={250}
/>
</div>
}
<div className={styles.info}>
<div className={styles.name}>
{albumTitle}
</div>
{
!!disambiguation &&
<span className={styles.disambiguation}>({disambiguation})</span>
}
<div>
<span className={styles.artistName}> By: {artistName}</span>
</div>
{
overview ?
<div className={styles.overview}>
<TextTruncate
truncateText="…"
line={8}
text={overview}
/>
</div> :
null
}
{
!isExistingArtist &&
<AddArtistOptionsForm
artistName={artistName}
includeNoneMetadataProfile={true}
{...otherProps}
/>
}
</div>
</div>
</ModalBody>
<ModalFooter className={styles.modalFooter}>
<label className={styles.searchForNewAlbumLabelContainer}>
<span className={styles.searchForNewAlbumLabel}>
Start search for new album
</span>
<CheckInput
containerClassName={styles.searchForNewAlbumContainer}
className={styles.searchForNewAlbumInput}
name="searchForNewAlbum"
value={this.state.searchForNewAlbum}
onChange={this.onSearchForNewAlbumChange}
/>
</label>
<SpinnerButton
className={styles.addButton}
kind={kinds.SUCCESS}
isSpinning={isAdding}
onPress={this.onAddAlbumPress}
>
Add {albumTitle}
</SpinnerButton>
</ModalFooter>
</ModalContent>
);
}
}
AddNewAlbumModalContent.propTypes = {
albumTitle: PropTypes.string.isRequired,
artistName: PropTypes.string.isRequired,
disambiguation: PropTypes.string.isRequired,
overview: PropTypes.string,
images: PropTypes.arrayOf(PropTypes.object).isRequired,
isAdding: PropTypes.bool.isRequired,
addError: PropTypes.object,
isExistingArtist: PropTypes.bool.isRequired,
isSmallScreen: PropTypes.bool.isRequired,
onModalClose: PropTypes.func.isRequired,
onAddAlbumPress: PropTypes.func.isRequired
};
export default AddNewAlbumModalContent;

135
frontend/src/Search/Album/AddNewAlbumModalContentConnector.js Normal file
View file

@ -0,0 +1,135 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { metadataProfileNames } from 'Helpers/Props';
import { setAddDefault, addAlbum } from 'Store/Actions/searchActions';
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import selectSettings from 'Store/Selectors/selectSettings';
import AddNewAlbumModalContent from './AddNewAlbumModalContent';
function createMapStateToProps() {
return createSelector(
(state, { isExistingArtist }) => isExistingArtist,
(state) => state.search,
(state) => state.settings.metadataProfiles,
createDimensionsSelector(),
(isExistingArtist, searchState, metadataProfiles, dimensions) => {
const {
isAdding,
addError,
defaults
} = searchState;
const {
settings,
validationErrors,
validationWarnings
} = selectSettings(defaults, {}, addError);
// For adding single albums, default to None profile
const noneProfile = metadataProfiles.items.find((item) => item.name === metadataProfileNames.NONE);
return {
isAdding,
addError,
showMetadataProfile: true,
isSmallScreen: dimensions.isSmallScreen,
validationErrors,
validationWarnings,
noneMetadataProfileId: noneProfile.id,
...settings
};
}
);
}
const mapDispatchToProps = {
setAddDefault,
addAlbum
};
class AddNewAlbumModalContentConnector extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
metadataProfileIdDefault: props.metadataProfileId.value
};
// select none as default
this.onInputChange({
name: 'metadataProfileId',
value: props.noneMetadataProfileId
});
}
componentWillUnmount() {
// reinstate standard default
this.props.setAddDefault({ metadataProfileId: this.state.metadataProfileIdDefault });
}
//
// Listeners
onInputChange = ({ name, value }) => {
this.props.setAddDefault({ [name]: value });
}
onAddAlbumPress = (searchForNewAlbum) => {
const {
foreignAlbumId,
rootFolderPath,
monitor,
qualityProfileId,
metadataProfileId,
albumFolder,
tags
} = this.props;
this.props.addAlbum({
foreignAlbumId,
rootFolderPath: rootFolderPath.value,
monitor: monitor.value,
qualityProfileId: qualityProfileId.value,
metadataProfileId: metadataProfileId.value,
albumFolder: albumFolder.value,
tags: tags.value,
searchForNewAlbum
});
}
//
// Render
render() {
return (
<AddNewAlbumModalContent
{...this.props}
onInputChange={this.onInputChange}
onAddAlbumPress={this.onAddAlbumPress}
/>
);
}
}
AddNewAlbumModalContentConnector.propTypes = {
isExistingArtist: PropTypes.bool.isRequired,
foreignAlbumId: PropTypes.string.isRequired,
rootFolderPath: PropTypes.object,
monitor: PropTypes.object.isRequired,
qualityProfileId: PropTypes.object,
metadataProfileId: PropTypes.object,
noneMetadataProfileId: PropTypes.number.isRequired,
albumFolder: PropTypes.object.isRequired,
tags: PropTypes.object.isRequired,
onModalClose: PropTypes.func.isRequired,
setAddDefault: PropTypes.func.isRequired,
addAlbum: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(AddNewAlbumModalContentConnector);

64
frontend/src/Search/Album/AddNewAlbumSearchResult.css Normal file
View file

@ -0,0 +1,64 @@
.searchResult {
display: flex;
margin: 20px 0;
padding: 20px;
width: 100%;
background-color: $white;
color: inherit;
transition: background 500ms;
&:hover {
background-color: #eaf2ff;
color: inherit;
text-decoration: none;
}
}
.poster {
flex: 0 0 170px;
margin-right: 20px;
height: 250px;
}
.content {
flex: 0 1 100%;
}
.name {
display: flex;
font-weight: 300;
font-size: 36px;
}
.artistName {
font-weight: 300;
font-size: 20px;
}
.year {
margin-left: 10px;
color: $disabledColor;
}
.mbLink {
composes: link from '~Components/Link/Link.css';
margin-top: -4px;
margin-left: auto;
color: $textColor;
}
.mbLinkIcon {
margin-left: 10px;
}
.alreadyExistsIcon {
margin-left: 10px;
color: #37bc9b;
}
.overview {
overflow: hidden;
margin-top: 20px;
text-align: justify;
}

250
frontend/src/Search/Album/AddNewAlbumSearchResult.js Normal file
View file

@ -0,0 +1,250 @@
import moment from 'moment';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import TextTruncate from 'react-text-truncate';
import dimensions from 'Styles/Variables/dimensions';
import fonts from 'Styles/Variables/fonts';
import { icons, sizes } from 'Helpers/Props';
import HeartRating from 'Components/HeartRating';
import Icon from 'Components/Icon';
import Label from 'Components/Label';
import Link from 'Components/Link/Link';
import AlbumCover from 'Album/AlbumCover';
import AddNewAlbumModal from './AddNewAlbumModal';
import styles from './AddNewAlbumSearchResult.css';
const columnPadding = parseInt(dimensions.artistIndexColumnPadding);
const columnPaddingSmallScreen = parseInt(dimensions.artistIndexColumnPaddingSmallScreen);
const defaultFontSize = parseInt(fonts.defaultFontSize);
const lineHeight = parseFloat(fonts.lineHeight);
function calculateHeight(rowHeight, isSmallScreen) {
let height = rowHeight - 70;
if (isSmallScreen) {
height -= columnPaddingSmallScreen;
} else {
height -= columnPadding;
}
return height;
}
class AddNewAlbumSearchResult extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
isNewAddAlbumModalOpen: false
};
}
componentDidUpdate(prevProps) {
if (!prevProps.isExistingAlbum && this.props.isExistingAlbum) {
this.onAddAlbumModalClose();
}
}
//
// Listeners
onPress = () => {
this.setState({ isNewAddAlbumModalOpen: true });
}
onAddAlbumModalClose = () => {
this.setState({ isNewAddAlbumModalOpen: false });
}
onMBLinkPress = (event) => {
event.stopPropagation();
}
//
// Render
render() {
const {
foreignAlbumId,
title,
releaseDate,
disambiguation,
albumType,
secondaryTypes,
overview,
ratings,
images,
releases,
artist,
isExistingAlbum,
isExistingArtist,
isSmallScreen
} = this.props;
const {
isNewAddAlbumModalOpen
} = this.state;
const linkProps = isExistingAlbum ? { to: `/album/${foreignAlbumId}` } : { onPress: this.onPress };
const height = calculateHeight(230, isSmallScreen);
return (
<div>
<Link
className={styles.searchResult}
{...linkProps}
>
{
!isSmallScreen &&
<AlbumCover
className={styles.poster}
images={images}
size={250}
/>
}
<div className={styles.content}>
<div className={styles.name}>
{title}
{
!!disambiguation &&
<span className={styles.year}>({disambiguation})</span>
}
{
isExistingAlbum ?
<Icon
className={styles.alreadyExistsIcon}
name={icons.CHECK_CIRCLE}
size={20}
title="Album already in your library"
/> :
null
}
<Link
className={styles.mbLink}
to={`https://musicbrainz.org/release-group/${foreignAlbumId}`}
onPress={this.onMBLinkPress}
>
<Icon
className={styles.mbLinkIcon}
name={icons.EXTERNAL_LINK}
size={28}
/>
</Link>
</div>
<div>
<span className={styles.artistName}> By: {artist.artistName}</span>
{
isExistingArtist ?
<Icon
className={styles.alreadyExistsIcon}
name={icons.CHECK_CIRCLE}
size={15}
title="Artist already in your library"
/> :
null
}
</div>
<div>
<Label size={sizes.LARGE}>
<HeartRating
rating={ratings.value}
iconSize={13}
/>
</Label>
{
!!releaseDate &&
<Label size={sizes.LARGE}>
{moment(releaseDate).format('YYYY')}
</Label>
}
<Label size={sizes.LARGE}>
{releases.length} release{releases.length > 0 ? 's' : null}
</Label>
{
!!albumType &&
<Label size={sizes.LARGE}>
{albumType}
</Label>
}
{
!!secondaryTypes &&
secondaryTypes.map((item, i) => {
return (
<Label
size={sizes.LARGE}
key={i}
>
{item}
</Label>
);
})
}
</div>
<div
className={styles.overview}
style={{
maxHeight: `${height}px`
}}
>
<TextTruncate
truncateText="…"
line={Math.floor(height / (defaultFontSize * lineHeight))}
text={overview}
/>
</div>
</div>
</Link>
<AddNewAlbumModal
isOpen={isNewAddAlbumModalOpen && !isExistingAlbum}
isExistingArtist={isExistingArtist}
foreignAlbumId={foreignAlbumId}
albumTitle={title}
disambiguation={disambiguation}
artistName={artist.artistName}
overview={overview}
images={images}
onModalClose={this.onAddAlbumModalClose}
/>
</div>
);
}
}
AddNewAlbumSearchResult.propTypes = {
foreignAlbumId: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
releaseDate: PropTypes.string.isRequired,
disambiguation: PropTypes.string,
albumType: PropTypes.string,
secondaryTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
overview: PropTypes.string,
ratings: PropTypes.object.isRequired,
artist: PropTypes.object,
images: PropTypes.arrayOf(PropTypes.object).isRequired,
releases: PropTypes.arrayOf(PropTypes.object).isRequired,
isExistingAlbum: PropTypes.bool.isRequired,
isExistingArtist: PropTypes.bool.isRequired,
isSmallScreen: PropTypes.bool.isRequired
};
export default AddNewAlbumSearchResult;

17
frontend/src/Search/Album/AddNewAlbumSearchResultConnector.js Normal file
View file

@ -0,0 +1,17 @@
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import AddNewAlbumSearchResult from './AddNewAlbumSearchResult';
function createMapStateToProps() {
return createSelector(
createDimensionsSelector(),
(dimensions) => {
return {
isSmallScreen: dimensions.isSmallScreen
};
}
);
}
export default connect(createMapStateToProps)(AddNewAlbumSearchResult);

0
frontend/src/AddArtist/AddNewArtist/AddNewArtistModal.js → frontend/src/Search/Artist/AddNewArtistModal.js
View file

22
frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.css → frontend/src/Search/Artist/AddNewArtistModalContent.css
View file

@ -17,16 +17,24 @@
flex-grow: 1;
}
.name {
font-weight: 300;
font-size: 36px;
}
.disambiguation {
margin-bottom: 20px;
color: $disabledColor;
font-weight: 300;
font-size: 20px;
}
.overview {
margin-bottom: 30px;
max-height: 230px;
text-align: justify;
}
.labelIcon {
margin-left: 8px;
}
.searchForMissingAlbumsLabelContainer {
display: flex;
margin-top: 2px;
@ -58,12 +66,6 @@
composes: button from '~Components/Link/SpinnerButton.css';
}
.hideMetadataProfile {
composes: group from '~Components/Form/FormGroup.css';
display: none;
}
@media only screen and (max-width: $breakpointSmall) {
.modalFooter {
display: block;

146
frontend/src/Search/Artist/AddNewArtistModalContent.js Normal file
View file

@ -0,0 +1,146 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import TextTruncate from 'react-text-truncate';
import { kinds } from 'Helpers/Props';
import SpinnerButton from 'Components/Link/SpinnerButton';
import CheckInput from 'Components/Form/CheckInput';
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 ArtistPoster from 'Artist/ArtistPoster';
import AddArtistOptionsForm from '../Common/AddArtistOptionsForm.js';
import styles from './AddNewArtistModalContent.css';
class AddNewArtistModalContent extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
searchForMissingAlbums: false
};
}
//
// Listeners
onSearchForMissingAlbumsChange = ({ value }) => {
this.setState({ searchForMissingAlbums: value });
}
onAddArtistPress = () => {
this.props.onAddArtistPress(this.state.searchForMissingAlbums);
}
//
// Render
render() {
const {
artistName,
disambiguation,
overview,
images,
isAdding,
isSmallScreen,
onModalClose,
...otherProps
} = this.props;
return (
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
Add new Artist
</ModalHeader>
<ModalBody>
<div className={styles.container}>
{
isSmallScreen ?
null:
<div className={styles.poster}>
<ArtistPoster
className={styles.poster}
images={images}
size={250}
/>
</div>
}
<div className={styles.info}>
<div className={styles.name}>
{artistName}
</div>
{
!!disambiguation &&
<span className={styles.disambiguation}>({disambiguation})</span>
}
{
overview ?
<div className={styles.overview}>
<TextTruncate
truncateText="…"
line={8}
text={overview}
/>
</div> :
null
}
<AddArtistOptionsForm
includeNoneMetadataProfile={false}
{...otherProps}
/>
</div>
</div>
</ModalBody>
<ModalFooter className={styles.modalFooter}>
<label className={styles.searchForMissingAlbumsLabelContainer}>
<span className={styles.searchForMissingAlbumsLabel}>
Start search for missing albums
</span>
<CheckInput
containerClassName={styles.searchForMissingAlbumsContainer}
className={styles.searchForMissingAlbumsInput}
name="searchForMissingAlbums"
value={this.state.searchForMissingAlbums}
onChange={this.onSearchForMissingAlbumsChange}
/>
</label>
<SpinnerButton
className={styles.addButton}
kind={kinds.SUCCESS}
isSpinning={isAdding}
onPress={this.onAddArtistPress}
>
Add {artistName}
</SpinnerButton>
</ModalFooter>
</ModalContent>
);
}
}
AddNewArtistModalContent.propTypes = {
artistName: PropTypes.string.isRequired,
disambiguation: PropTypes.string.isRequired,
overview: PropTypes.string,
images: PropTypes.arrayOf(PropTypes.object).isRequired,
isAdding: PropTypes.bool.isRequired,
addError: PropTypes.object,
isSmallScreen: PropTypes.bool.isRequired,
onModalClose: PropTypes.func.isRequired,
onAddArtistPress: PropTypes.func.isRequired
};
export default AddNewArtistModalContent;

16
frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContentConnector.js → frontend/src/Search/Artist/AddNewArtistModalContentConnector.js
View file

@ -2,22 +2,22 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { setAddArtistDefault, addArtist } from 'Store/Actions/addArtistActions';
import { setAddDefault, addArtist } from 'Store/Actions/searchActions';
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import selectSettings from 'Store/Selectors/selectSettings';
import AddNewArtistModalContent from './AddNewArtistModalContent';
function createMapStateToProps() {
return createSelector(
(state) => state.addArtist,
(state) => state.search,
(state) => state.settings.metadataProfiles,
createDimensionsSelector(),
(addArtistState, metadataProfiles, dimensions) => {
(searchState, metadataProfiles, dimensions) => {
const {
isAdding,
addError,
defaults
} = addArtistState;
} = searchState;
const {
settings,
@ -28,7 +28,7 @@ function createMapStateToProps() {
return {
isAdding,
addError,
showMetadataProfile: metadataProfiles.items.length > 1,
showMetadataProfile: metadataProfiles.items.length > 2, // NONE (not allowed for artists) and one other
isSmallScreen: dimensions.isSmallScreen,
validationErrors,
validationWarnings,
@ -39,7 +39,7 @@ function createMapStateToProps() {
}
const mapDispatchToProps = {
setAddArtistDefault,
setAddDefault,
addArtist
};
@ -49,7 +49,7 @@ class AddNewArtistModalContentConnector extends Component {
// Listeners
onInputChange = ({ name, value }) => {
this.props.setAddArtistDefault({ [name]: value });
this.props.setAddDefault({ [name]: value });
}
onAddArtistPress = (searchForMissingAlbums) => {
@ -98,7 +98,7 @@ AddNewArtistModalContentConnector.propTypes = {
albumFolder: PropTypes.object.isRequired,
tags: PropTypes.object.isRequired,
onModalClose: PropTypes.func.isRequired,
setAddArtistDefault: PropTypes.func.isRequired,
setAddDefault: PropTypes.func.isRequired,
addArtist: PropTypes.func.isRequired
};

0
frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.css → frontend/src/Search/Artist/AddNewArtistSearchResult.css
View file

1
frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.js → frontend/src/Search/Artist/AddNewArtistSearchResult.js
View file

@ -196,6 +196,7 @@ class AddNewArtistSearchResult extends Component {
isOpen={isNewAddArtistModalOpen && !isExistingArtist}
foreignArtistId={foreignArtistId}
artistName={artistName}
disambiguation={disambiguation}
year={year}
overview={overview}
images={images}

0
frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResultConnector.js → frontend/src/Search/Artist/AddNewArtistSearchResultConnector.js
View file

9
frontend/src/Search/Common/AddArtistOptionsForm.css Normal file
View file

@ -0,0 +1,9 @@
.labelIcon {
margin-left: 8px;
}
.hideMetadataProfile {
composes: group from '~Components/Form/FormGroup.css';
display: none;
}

160
frontend/src/Search/Common/AddArtistOptionsForm.js Normal file
View file

@ -0,0 +1,160 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { icons, inputTypes, tooltipPositions } from 'Helpers/Props';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormLabel from 'Components/Form/FormLabel';
import FormInputGroup from 'Components/Form/FormInputGroup';
import Icon from 'Components/Icon';
import Popover from 'Components/Tooltip/Popover';
import ArtistMonitoringOptionsPopoverContent from 'AddArtist/ArtistMonitoringOptionsPopoverContent';
import ArtistMetadataProfilePopoverContent from 'AddArtist/ArtistMetadataProfilePopoverContent';
import styles from './AddArtistOptionsForm.css';
class AddArtistOptionsForm extends Component {
//
// Listeners
onQualityProfileIdChange = ({ value }) => {
this.props.onInputChange({ name: 'qualityProfileId', value: parseInt(value) });
}
onMetadataProfileIdChange = ({ value }) => {
this.props.onInputChange({ name: 'metadataProfileId', value: parseInt(value) });
}
//
// Render
render() {
const {
rootFolderPath,
monitor,
qualityProfileId,
metadataProfileId,
includeNoneMetadataProfile,
showMetadataProfile,
albumFolder,
tags,
onInputChange,
...otherProps
} = this.props;
return (
<Form {...otherProps}>
<FormGroup>
<FormLabel>Root Folder</FormLabel>
<FormInputGroup
type={inputTypes.ROOT_FOLDER_SELECT}
name="rootFolderPath"
onChange={onInputChange}
{...rootFolderPath}
/>
</FormGroup>
<FormGroup>
<FormLabel>
Monitor
<Popover
anchor={
<Icon
className={styles.labelIcon}
name={icons.INFO}
/>
}
title="Monitoring Options"
body={<ArtistMonitoringOptionsPopoverContent />}
position={tooltipPositions.RIGHT}
/>
</FormLabel>
<FormInputGroup
type={inputTypes.MONITOR_ALBUMS_SELECT}
name="monitor"
onChange={onInputChange}
{...monitor}
/>
</FormGroup>
<FormGroup>
<FormLabel>Quality Profile</FormLabel>
<FormInputGroup
type={inputTypes.QUALITY_PROFILE_SELECT}
name="qualityProfileId"
onChange={this.onQualityProfileIdChange}
{...qualityProfileId}
/>
</FormGroup>
<FormGroup className={showMetadataProfile ? undefined : styles.hideMetadataProfile}>
<FormLabel>
Metadata Profile
{
includeNoneMetadataProfile &&
<Popover
anchor={
<Icon
className={styles.labelIcon}
name={icons.INFO}
/>
}
title="Metadata Profile"
body={<ArtistMetadataProfilePopoverContent />}
position={tooltipPositions.RIGHT}
/>
}
</FormLabel>
<FormInputGroup
type={inputTypes.METADATA_PROFILE_SELECT}
name="metadataProfileId"
includeNone={includeNoneMetadataProfile}
onChange={this.onMetadataProfileIdChange}
{...metadataProfileId}
/>
</FormGroup>
<FormGroup>
<FormLabel>Album Folder</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="albumFolder"
onChange={onInputChange}
{...albumFolder}
/>
</FormGroup>
<FormGroup>
<FormLabel>Tags</FormLabel>
<FormInputGroup
type={inputTypes.TAG}
name="tags"
onChange={onInputChange}
{...tags}
/>
</FormGroup>
</Form>
);
}
}
AddArtistOptionsForm.propTypes = {
rootFolderPath: PropTypes.object,
monitor: PropTypes.object.isRequired,
qualityProfileId: PropTypes.object,
metadataProfileId: PropTypes.object,
showMetadataProfile: PropTypes.bool.isRequired,
includeNoneMetadataProfile: PropTypes.bool.isRequired,
albumFolder: PropTypes.object.isRequired,
tags: PropTypes.object.isRequired,
onInputChange: PropTypes.func.isRequired
};
export default AddArtistOptionsForm;

6
frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalContent.js
View file

@ -58,12 +58,12 @@ function EditImportListExclusionModalContent(props) {
{...otherProps}
>
<FormGroup>
<FormLabel>Artist Name</FormLabel>
<FormLabel>Entity Name</FormLabel>
<FormInputGroup
type={inputTypes.TEXT}
name="artistName"
helpText="The name of the artist to exclude (can be anything meaningful)"
helpText="The name of the artist/album to exclude (can be anything meaningful)"
{...artistName}
onChange={onInputChange}
/>
@ -75,7 +75,7 @@ function EditImportListExclusionModalContent(props) {
<FormInputGroup
type={inputTypes.TEXT}
name="foreignId"
helpText="The Musicbrainz Id of the artist to exclude"
helpText="The Musicbrainz Id of the artist/album to exclude"
{...foreignId}
onChange={onInputChange}
/>

4
frontend/src/Settings/Profiles/Metadata/MetadataProfiles.js
View file

@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import sortByName from 'Utilities/Array/sortByName';
import { icons } from 'Helpers/Props';
import { icons, metadataProfileNames } from 'Helpers/Props';
import FieldSet from 'Components/FieldSet';
import Card from 'Components/Card';
import Icon from 'Components/Icon';
@ -58,7 +58,7 @@ class MetadataProfiles extends Component {
>
<div className={styles.metadataProfiles}>
{
items.sort(sortByName).map((item) => {
items.filter((item) => item.name !== metadataProfileNames.NONE).sort(sortByName).map((item) => {
return (
<MetadataProfile
key={item.id}

13
frontend/src/Store/Actions/albumActions.js
View file

@ -10,6 +10,7 @@ import createSetTableOptionReducer from './Creators/Reducers/createSetTableOptio
import createSaveProviderHandler from './Creators/createSaveProviderHandler';
import albumEntities from 'Album/albumEntities';
import createFetchHandler from './Creators/createFetchHandler';
import createRemoveItemHandler from './Creators/createRemoveItemHandler';
import createHandleActions from './Creators/createHandleActions';
import { updateItem } from './baseActions';
@ -113,6 +114,7 @@ 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 DELETE_ALBUM = 'albums/deleteAlbum';
export const TOGGLE_ALBUM_MONITORED = 'albums/toggleAlbumMonitored';
export const TOGGLE_ALBUMS_MONITORED = 'albums/toggleAlbumsMonitored';
@ -128,6 +130,16 @@ export const toggleAlbumsMonitored = createThunk(TOGGLE_ALBUMS_MONITORED);
export const saveAlbum = createThunk(SAVE_ALBUM);
export const deleteAlbum = createThunk(DELETE_ALBUM, (payload) => {
return {
...payload,
queryParams: {
deleteFiles: payload.deleteFiles,
addImportListExclusion: payload.addImportListExclusion
}
};
});
export const setAlbumValue = createAction(SET_ALBUM_VALUE, (payload) => {
return {
section: 'albums',
@ -141,6 +153,7 @@ export const setAlbumValue = createAction(SET_ALBUM_VALUE, (payload) => {
export const actionHandlers = handleThunks({
[FETCH_ALBUMS]: createFetchHandler(section, '/album'),
[SAVE_ALBUM]: createSaveProviderHandler(section, '/album'),
[DELETE_ALBUM]: createRemoveItemHandler(section, '/album'),
[TOGGLE_ALBUM_MONITORED]: function(getState, payload, dispatch) {
const {

4
frontend/src/Store/Actions/index.js
View file

@ -1,4 +1,3 @@
import * as addArtist from './addArtistActions';
import * as app from './appActions';
import * as blacklist from './blacklistActions';
import * as calendar from './calendarActions';
@ -24,6 +23,7 @@ import * as artist from './artistActions';
import * as artistEditor from './artistEditorActions';
import * as artistHistory from './artistHistoryActions';
import * as artistIndex from './artistIndexActions';
import * as search from './searchActions';
import * as settings from './settingsActions';
import * as system from './systemActions';
import * as tags from './tagActions';
@ -31,7 +31,6 @@ import * as tracks from './trackActions';
import * as wanted from './wantedActions';
export default [
addArtist,
app,
blacklist,
captcha,
@ -57,6 +56,7 @@ export default [
artistEditor,
artistHistory,
artistIndex,
search,
settings,
system,
tags,

86
frontend/src/Store/Actions/addArtistActions.js → frontend/src/Store/Actions/searchActions.js
View file

@ -6,15 +6,15 @@ import getSectionState from 'Utilities/State/getSectionState';
import updateSectionState from 'Utilities/State/updateSectionState';
import createAjaxRequest from 'Utilities/createAjaxRequest';
import getNewArtist from 'Utilities/Artist/getNewArtist';
import getNewAlbum from 'Utilities/Album/getNewAlbum';
import { createThunk, handleThunks } from 'Store/thunks';
import createSetSettingValueReducer from './Creators/Reducers/createSetSettingValueReducer';
import createHandleActions from './Creators/createHandleActions';
import { set, update, updateItem } from './baseActions';
//
// Variables
export const section = 'addArtist';
export const section = 'search';
let abortCurrentRequest = null;
//
@ -40,39 +40,33 @@ export const defaultState = {
};
export const persistState = [
'addArtist.defaults'
'search.defaults'
];
//
// Actions Types
export const LOOKUP_ARTIST = 'addArtist/lookupArtist';
export const ADD_ARTIST = 'addArtist/addArtist';
export const SET_ADD_ARTIST_VALUE = 'addArtist/setAddArtistValue';
export const CLEAR_ADD_ARTIST = 'addArtist/clearAddArtist';
export const SET_ADD_ARTIST_DEFAULT = 'addArtist/setAddArtistDefault';
export const GET_SEARCH_RESULTS = 'search/getSearchResults';
export const ADD_ARTIST = 'search/addArtist';
export const ADD_ALBUM = 'search/addAlbum';
export const CLEAR_SEARCH_RESULTS = 'search/clearSearchResults';
export const SET_ADD_DEFAULT = 'search/setAddDefault';
//
// Action Creators
export const lookupArtist = createThunk(LOOKUP_ARTIST);
export const getSearchResults = createThunk(GET_SEARCH_RESULTS);
export const addArtist = createThunk(ADD_ARTIST);
export const clearAddArtist = createAction(CLEAR_ADD_ARTIST);
export const setAddArtistDefault = createAction(SET_ADD_ARTIST_DEFAULT);
export const setAddArtistValue = createAction(SET_ADD_ARTIST_VALUE, (payload) => {
return {
section,
...payload
};
});
export const addAlbum = createThunk(ADD_ALBUM);
export const clearSearchResults = createAction(CLEAR_SEARCH_RESULTS);
export const setAddDefault = createAction(SET_ADD_DEFAULT);
//
// Action Handlers
export const actionHandlers = handleThunks({
[LOOKUP_ARTIST]: function(getState, payload, dispatch) {
[GET_SEARCH_RESULTS]: function(getState, payload, dispatch) {
dispatch(set({ section, isFetching: true }));
if (abortCurrentRequest) {
@ -80,7 +74,7 @@ export const actionHandlers = handleThunks({
}
const { request, abortRequest } = createAjaxRequest({
url: '/artist/lookup',
url: '/search',
data: {
term: payload.term
}
@ -115,8 +109,9 @@ export const actionHandlers = handleThunks({
dispatch(set({ section, isAdding: true }));
const foreignArtistId = payload.foreignArtistId;
const items = getState().addArtist.items;
const newArtist = getNewArtist(_.cloneDeep(_.find(items, { foreignArtistId })), payload);
const items = getState().search.items;
const itemToAdd = _.find(items, { foreignId: foreignArtistId });
const newArtist = getNewArtist(_.cloneDeep(itemToAdd.artist), payload);
const promise = createAjaxRequest({
url: '/artist',
@ -138,6 +133,47 @@ export const actionHandlers = handleThunks({
]));
});
promise.fail((xhr) => {
dispatch(set({
section,
isAdding: false,
isAdded: false,
addError: xhr
}));
});
},
[ADD_ALBUM]: function(getState, payload, dispatch) {
dispatch(set({ section, isAdding: true }));
const foreignAlbumId = payload.foreignAlbumId;
const items = getState().search.items;
const itemToAdd = _.find(items, { foreignId: foreignAlbumId });
const newAlbum = getNewAlbum(_.cloneDeep(itemToAdd.album), payload);
const promise = createAjaxRequest({
url: '/album',
method: 'POST',
contentType: 'application/json',
data: JSON.stringify(newAlbum)
}).request;
promise.done((data) => {
data.releases = itemToAdd.album.releases;
itemToAdd.album = data;
dispatch(batchActions([
updateItem({ section: 'artist', ...data.artist }),
updateItem({ section, ...itemToAdd }),
set({
section,
isAdding: false,
isAdded: true,
addError: null
})
]));
});
promise.fail((xhr) => {
dispatch(set({
section,
@ -154,9 +190,7 @@ export const actionHandlers = handleThunks({
export const reducers = createHandleActions({
[SET_ADD_ARTIST_VALUE]: createSetSettingValueReducer(section),
[SET_ADD_ARTIST_DEFAULT]: function(state, { payload }) {
[SET_ADD_DEFAULT]: function(state, { payload }) {
const newState = getSectionState(state, section);
newState.defaults = {
@ -167,7 +201,7 @@ export const reducers = createHandleActions({
return updateSectionState(state, section, newState);
},
[CLEAR_ADD_ARTIST]: function(state) {
[CLEAR_SEARCH_RESULTS]: function(state) {
const {
defaults,
...otherDefaultState

18
frontend/src/Utilities/Album/getNewAlbum.js Normal file
View file

@ -0,0 +1,18 @@
import getNewArtist from 'Utilities/Artist/getNewArtist';
function getNewAlbum(album, payload) {
const {
searchForNewAlbum = false
} = payload;
getNewArtist(album.artist, payload);
album.addOptions = {
searchForNewAlbum
};
album.monitored = true;
return album;
}
export default getNewAlbum;