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

New: UI Updates, Tag manager, More custom filters (#437)

Browse source 
* New: UI Updates, Tag manager, More custom filters

* fixup! Fix ScanFixture Unit Tests

* Fixed: Sentry Errors from UI don't have release, branch, environment

* Changed: Bump Mobile Detect for New Device Detection

* Fixed: Build on changes to package.json

* fixup! Add MetadataProfile filter option

* fixup! Tag Note, Blacklist, Manual Import

* fixup: Remove connectSection

* fixup: root folder comment
This commit is contained in:
Qstick 2018-08-07 20:57:15 -04:00 • committed by GitHub
parent afa78b1d20
commit 6581b3a2c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
198 changed files with 3057 additions and 888 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/InteractiveImport/Album/SelectAlbumModalContent.css Normal file
View file

@ -0,0 +1,18 @@
.modalBody {
composes: modalBody from 'Components/Modal/ModalBody.css';
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.filterInput {
composes: text from 'Components/Form/TextInput.css';
flex: 0 0 auto;
margin-bottom: 20px;
}
.scroller {
flex: 1 1 auto;
}

104
frontend/src/InteractiveImport/Album/SelectAlbumModalContent.js
View file

@ -1,15 +1,62 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Button from 'Components/Link/Button';
import { scrollDirections } from 'Helpers/Props';
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 Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import Scroller from 'Components/Scroller/Scroller';
import TextInput from 'Components/Form/TextInput';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import SelectAlbumRow from './SelectAlbumRow';
import styles from './SelectAlbumModalContent.css';
const columns = [
{
name: 'title',
label: 'Album Title',
isVisible: true
},
{
name: 'albumType',
label: 'Album Type',
isVisible: true
},
{
name: 'releaseDate',
label: 'Release Date',
isVisible: true
},
{
name: 'status',
label: 'Album Status',
isVisible: true
}
];
class SelectAlbumModalContent extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
filter: ''
};
}
//
// Listeners
onFilterChange = ({ value }) => {
this.setState({ filter: value.toLowerCase() });
}
//
// Render
@ -18,33 +65,60 @@ class SelectAlbumModalContent extends Component {
items,
onAlbumSelect,
onModalClose,
isFetching
isFetching,
...otherProps
} = this.props;
const filter = this.state.filter;
return (
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
Manual Import - Select Album
</ModalHeader>
<ModalBody>
<ModalBody
className={styles.modalBody}
scrollDirection={scrollDirections.NONE}
>
{
isFetching &&
<LoadingIndicator />
}
{
items.map((item) => {
return (
<SelectAlbumRow
key={item.id}
id={item.id}
title={item.title}
albumType={item.albumType}
onAlbumSelect={onAlbumSelect}
/>
);
})
}
<TextInput
className={styles.filterInput}
placeholder="Filter album"
name="filter"
value={filter}
autoFocus={true}
onChange={this.onFilterChange}
/>
<Scroller className={styles.scroller}>
{
<Table
columns={columns}
{...otherProps}
>
<TableBody>
{
items.map((item) => {
return item.title.toLowerCase().includes(filter) ?
(
<SelectAlbumRow
key={item.id}
columns={columns}
onAlbumSelect={onAlbumSelect}
{...item}
/>
) :
null;
})
}
</TableBody>
</Table>
}
</Scroller>
</ModalBody>
<ModalFooter>

12
frontend/src/InteractiveImport/Album/SelectAlbumModalContentConnector.js
View file

@ -1,8 +1,8 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import connectSection from 'Store/connectSection';
import {
updateInteractiveImportItem,
fetchInteractiveImportAlbums,
@ -14,7 +14,7 @@ import SelectAlbumModalContent from './SelectAlbumModalContent';
function createMapStateToProps() {
return createSelector(
createClientSideCollectionSelector(),
createClientSideCollectionSelector('interactiveImport.albums'),
(albums) => {
return albums;
}
@ -92,10 +92,4 @@ SelectAlbumModalContentConnector.propTypes = {
onModalClose: PropTypes.func.isRequired
};
export default connectSection(
createMapStateToProps,
mapDispatchToProps,
undefined,
undefined,
{ section: 'interactiveImport.albums' }
)(SelectAlbumModalContentConnector);
export default connect(createMapStateToProps, mapDispatchToProps)(SelectAlbumModalContentConnector);

4
frontend/src/InteractiveImport/Album/SelectAlbumRow.css
View file

@ -1,4 +0,0 @@
.season {
padding: 8px;
border-bottom: 1px solid $borderColor;
}

118
frontend/src/InteractiveImport/Album/SelectAlbumRow.js
View file

@ -1,7 +1,23 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { kinds, sizes } from 'Helpers/Props';
import TableRow from 'Components/Table/TableRow';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
import Label from 'Components/Label';
import Link from 'Components/Link/Link';
import styles from './SelectAlbumRow.css';
function getTrackCountKind(monitored, trackFileCount, trackCount) {
if (trackFileCount === trackCount && trackCount > 0) {
return kinds.SUCCESS;
}
if (!monitored) {
return kinds.WARNING;
}
return kinds.DANGER;
}
class SelectAlbumRow extends Component {
@ -16,14 +32,87 @@ class SelectAlbumRow extends Component {
// Render
render() {
const {
title,
albumType,
releaseDate,
statistics,
monitored,
columns
} = this.props;
const {
trackCount,
trackFileCount,
totalTrackCount
} = statistics;
return (
<Link
className={styles.season}
component="div"
onPress={this.onPress}
>
{this.props.title} ({this.props.albumType})
</Link>
<TableRow>
{
columns.map((column) => {
const {
name,
isVisible
} = column;
if (!isVisible) {
return null;
}
if (name === 'title') {
return (
<TableRowCell key={name}>
<Link
onPress={this.onPress}
>
{title}
</Link>
</TableRowCell>
);
}
if (name === 'albumType') {
return (
<TableRowCell key={name}>
{albumType}
</TableRowCell>
);
}
if (name === 'releaseDate') {
return (
<RelativeDateCellConnector
key={name}
date={releaseDate}
/>
);
}
if (name === 'status') {
return (
<TableRowCell
key={name}
>
<Label
title={`${totalTrackCount} tracks total. ${trackFileCount} tracks with files.`}
kind={getTrackCountKind(monitored, trackFileCount, trackCount)}
size={sizes.MEDIUM}
>
{
<span>{trackFileCount} / {trackCount}</span>
}
</Label>
</TableRowCell>
);
}
return null;
})
}
</TableRow>
);
}
}
@ -32,7 +121,18 @@ SelectAlbumRow.propTypes = {
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
albumType: PropTypes.string.isRequired,
onAlbumSelect: PropTypes.func.isRequired
releaseDate: PropTypes.string.isRequired,
onAlbumSelect: PropTypes.func.isRequired,
statistics: PropTypes.object.isRequired,
monitored: PropTypes.bool.isRequired,
columns: PropTypes.arrayOf(PropTypes.object).isRequired
};
SelectAlbumRow.defaultProps = {
statistics: {
trackCount: 0,
trackFileCount: 0
}
};
export default SelectAlbumRow;

7
frontend/src/InteractiveImport/Folder/InteractiveImportSelectFolderModalContent.js
View file

@ -21,6 +21,10 @@ const recentFoldersColumns = [
{
name: 'lastUsed',
label: 'Last Used'
},
{
name: 'actions',
label: ''
}
];
@ -62,6 +66,7 @@ class InteractiveImportSelectFolderModalContent extends Component {
render() {
const {
recentFolders,
onRemoveRecentFolderPress,
onModalClose
} = this.props;
@ -95,6 +100,7 @@ class InteractiveImportSelectFolderModalContent extends Component {
folder={recentFolder.folder}
lastUsed={recentFolder.lastUsed}
onPress={this.onRecentPathPress}
onRemoveRecentFolderPress={onRemoveRecentFolderPress}
/>
);
})
@ -155,6 +161,7 @@ InteractiveImportSelectFolderModalContent.propTypes = {
recentFolders: PropTypes.arrayOf(PropTypes.object).isRequired,
onQuickImportPress: PropTypes.func.isRequired,
onInteractiveImportPress: PropTypes.func.isRequired,
onRemoveRecentFolderPress: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};

9
frontend/src/InteractiveImport/Folder/InteractiveImportSelectFolderModalContentConnector.js
View file

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { addRecentFolder } from 'Store/Actions/interactiveImportActions';
import { addRecentFolder, removeRecentFolder } from 'Store/Actions/interactiveImportActions';
import { executeCommand } from 'Store/Actions/commandActions';
import * as commandNames from 'Commands/commandNames';
import InteractiveImportSelectFolderModalContent from './InteractiveImportSelectFolderModalContent';
@ -20,6 +20,7 @@ function createMapStateToProps() {
const mapDispatchToProps = {
addRecentFolder,
removeRecentFolder,
executeCommand
};
@ -44,6 +45,10 @@ class InteractiveImportSelectFolderModalContentConnector extends Component {
this.props.onFolderSelect(folder);
}
onRemoveRecentFolderPress = (folder) => {
this.props.removeRecentFolder({ folder });
}
//
// Render
@ -57,6 +62,7 @@ class InteractiveImportSelectFolderModalContentConnector extends Component {
{...this.props}
onQuickImportPress={this.onQuickImportPress}
onInteractiveImportPress={this.onInteractiveImportPress}
onRemoveRecentFolderPress={this.onRemoveRecentFolderPress}
/>
);
}
@ -67,6 +73,7 @@ InteractiveImportSelectFolderModalContentConnector.propTypes = {
onFolderSelect: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired,
addRecentFolder: PropTypes.func.isRequired,
removeRecentFolder: PropTypes.func.isRequired,
executeCommand: PropTypes.func.isRequired
};

5
frontend/src/InteractiveImport/Folder/RecentFolderRow.css Normal file
View file

@ -0,0 +1,5 @@
.actions {
composes: cell from 'Components/Table/Cells/TableRowCell.css';
width: 40px;
}

25
frontend/src/InteractiveImport/Folder/RecentFolderRow.js
View file

@ -1,8 +1,11 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { icons } from 'Helpers/Props';
import IconButton from 'Components/Link/IconButton';
import TableRowButton from 'Components/Table/TableRowButton';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
import styles from './RecentFolderRow.css';
class RecentFolderRow extends Component {
@ -13,6 +16,17 @@ class RecentFolderRow extends Component {
this.props.onPress(this.props.folder);
}
onRemovePress = (event) => {
event.stopPropagation();
const {
folder,
onRemoveRecentFolderPress
} = this.props;
onRemoveRecentFolderPress(folder);
}
//
// Render
@ -27,6 +41,14 @@ class RecentFolderRow extends Component {
<TableRowCell>{folder}</TableRowCell>
<RelativeDateCellConnector date={lastUsed} />
<TableRowCell className={styles.actions}>
<IconButton
name={icons.REMOVE}
title="Remove"
onPress={this.onRemovePress}
/>
</TableRowCell>
</TableRowButton>
);
}
@ -35,7 +57,8 @@ class RecentFolderRow extends Component {
RecentFolderRow.propTypes = {
folder: PropTypes.string.isRequired,
lastUsed: PropTypes.string.isRequired,
onPress: PropTypes.func.isRequired
onPress: PropTypes.func.isRequired,
onRemoveRecentFolderPress: PropTypes.func.isRequired
};
export default RecentFolderRow;

23
frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js
View file

@ -1,8 +1,8 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import connectSection from 'Store/connectSection';
import { fetchInteractiveImportItems, setInteractiveImportSort, clearInteractiveImport, setInteractiveImportMode } from 'Store/Actions/interactiveImportActions';
import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
import { executeCommand } from 'Store/Actions/commandActions';
@ -11,7 +11,7 @@ import InteractiveImportModalContent from './InteractiveImportModalContent';
function createMapStateToProps() {
return createSelector(
createClientSideCollectionSelector(),
createClientSideCollectionSelector('interactiveImport'),
(interactiveImport) => {
return interactiveImport;
}
@ -125,8 +125,19 @@ class InteractiveImportModalContentConnector extends Component {
return false;
}
if (!quality) {
this.setState({ interactiveImportErrorMessage: 'Quality must be chosen for each selected file' });
return false;
}
if (!language) {
this.setState({ interactiveImportErrorMessage: 'Language must be chosen for each selected file' });
return false;
}
files.push({
path: item.path,
folderName: item.folderName,
artistId: artist.id,
albumId: album.id,
trackIds: _.map(tracks, 'id'),
@ -190,10 +201,4 @@ InteractiveImportModalContentConnector.defaultProps = {
filterExistingFiles: true
};
export default connectSection(
createMapStateToProps,
mapDispatchToProps,
undefined,
undefined,
{ section: 'interactiveImport' }
)(InteractiveImportModalContentConnector);
export default connect(createMapStateToProps, mapDispatchToProps)(InteractiveImportModalContentConnector);

42
frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js
View file

@ -191,6 +191,8 @@ class InteractiveImportRow extends Component {
const showArtistPlaceholder = isSelected && !artist;
const showAlbumNumberPlaceholder = isSelected && !!artist && !album;
const showTrackNumbersPlaceholder = isSelected && !!album && !tracks.length;
const showQualityPlaceholder = isSelected && !quality;
const showLanguagePlaceholder = isSelected && !language;
return (
<TableRow>
@ -237,20 +239,36 @@ class InteractiveImportRow extends Component {
className={styles.quality}
onPress={this.onSelectQualityPress}
>
<EpisodeQuality
className={styles.label}
quality={quality}
/>
{
showQualityPlaceholder &&
<InteractiveImportRowCellPlaceholder />
}
{
!showQualityPlaceholder && !!quality &&
<EpisodeQuality
className={styles.label}
quality={quality}
/>
}
</TableRowCellButton>
<TableRowCellButton
className={styles.language}
onPress={this.onSelectLanguagePress}
>
<EpisodeLanguage
className={styles.label}
language={language}
/>
{
showLanguagePlaceholder &&
<InteractiveImportRowCellPlaceholder />
}
{
!showLanguagePlaceholder && !!language &&
<EpisodeLanguage
className={styles.label}
language={language}
/>
}
</TableRowCellButton>
<TableRowCell>
@ -310,16 +328,16 @@ class InteractiveImportRow extends Component {
<SelectQualityModal
isOpen={isSelectQualityModalOpen}
id={id}
qualityId={quality.quality.id}
proper={quality.revision.version > 1}
real={quality.revision.real > 0}
qualityId={quality ? quality.quality.id : 0}
proper={quality ? quality.revision.version > 1 : false}
real={quality ? quality.revision.real > 0 : false}
onModalClose={this.onSelectQualityModalClose}
/>
<SelectLanguageModal
isOpen={isSelectLanguageModalOpen}
id={id}
languageId={language.id}
languageId={language ? language.id : 0}
onModalClose={this.onSelectLanguageModalClose}
/>
</TableRow>

2
frontend/src/InteractiveImport/Language/SelectLanguageModalContentConnector.js
View file

@ -22,7 +22,7 @@ function createMapStateToProps() {
isFetching,
isPopulated,
error,
items: schema.languages || []
items: schema.languages ? [...schema.languages].reverse() : []
};
}
);

12
frontend/src/InteractiveImport/Track/SelectTrackModalContentConnector.js
View file

@ -1,8 +1,8 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import connectSection from 'Store/connectSection';
import { fetchTracks, setTracksSort, clearTracks } from 'Store/Actions/trackActions';
import { updateInteractiveImportItem } from 'Store/Actions/interactiveImportActions';
import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
@ -10,7 +10,7 @@ import SelectTrackModalContent from './SelectTrackModalContent';
function createMapStateToProps() {
return createSelector(
createClientSideCollectionSelector(),
createClientSideCollectionSelector('tracks'),
(tracks) => {
return tracks;
}
@ -94,10 +94,4 @@ SelectTrackModalContentConnector.propTypes = {
onModalClose: PropTypes.func.isRequired
};
export default connectSection(
createMapStateToProps,
mapDispatchToProps,
undefined,
undefined,
{ section: 'tracks' }
)(SelectTrackModalContentConnector);
export default connect(createMapStateToProps, mapDispatchToProps)(SelectTrackModalContentConnector);