self-hosted/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr.git synced 2025-11-06 09:19:38 +02:00
Code Issues Releases Activity

New: Manage episodes through Manual Import modal

Browse Source
This commit is contained in:
Mark McDowall
2021-11-03 15:44:16 -07:00
parent b184e62fa7
commit 2bf1ce1763
23 changed files with 401 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/EpisodeFile/Editor/EpisodeFileEditorModal.js
View File

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

8
frontend/src/EpisodeFile/Editor/EpisodeFileEditorModalContent.css
View File

@@ -1,8 +0,0 @@
.actions {
display: flex;
margin-right: auto;
}
.selectInput {
margin-left: 10px;
}

310
frontend/src/EpisodeFile/Editor/EpisodeFileEditorModalContent.js
View File

@@ -1,310 +0,0 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
import getSelectedIds from 'Utilities/Table/getSelectedIds';
import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
import selectAll from 'Utilities/Table/selectAll';
import toggleSelected from 'Utilities/Table/toggleSelected';
import { kinds } from 'Helpers/Props';
import SelectInput from 'Components/Form/SelectInput';
import Button from 'Components/Link/Button';
import SpinnerButton from 'Components/Link/SpinnerButton';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import ConfirmModal from 'Components/Modal/ConfirmModal';
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 SeasonNumber from 'Season/SeasonNumber';
import EpisodeFileEditorRow from './EpisodeFileEditorRow';
import styles from './EpisodeFileEditorModalContent.css';
const columns = [
{
name: 'episodeNumber',
label: 'Episode',
isVisible: true
},
{
name: 'relativePath',
label: 'Relative Path',
isVisible: true
},
{
name: 'airDateUtc',
label: 'Air Date',
isVisible: true
},
{
name: 'language',
label: 'Language',
isVisible: true
},
{
name: 'quality',
label: 'Quality',
isVisible: true
}
];
class EpisodeFileEditorModalContent extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
allSelected: false,
allUnselected: false,
lastToggled: null,
selectedState: {},
isConfirmDeleteModalOpen: false
};
}
componentDidUpdate(prevProps) {
if (hasDifferentItems(prevProps.items, this.props.items)) {
this.setState((state) => {
return removeOldSelectedState(state, prevProps.items);
});
}
}
//
// Control
getSelectedIds = () => {
const selectedIds = getSelectedIds(this.state.selectedState);
return selectedIds.reduce((acc, id) => {
const matchingItem = this.props.items.find((item) => item.id === id);
if (matchingItem && !acc.includes(matchingItem.episodeFileId)) {
acc.push(matchingItem.episodeFileId);
}
return acc;
}, []);
}
//
// Listeners
onSelectAllChange = ({ value }) => {
this.setState(selectAll(this.state.selectedState, value));
}
onSelectedChange = ({ id, value, shiftKey = false }) => {
this.setState((state) => {
return toggleSelected(state, this.props.items, id, value, shiftKey);
});
}
onDeletePress = () => {
this.setState({ isConfirmDeleteModalOpen: true });
}
onConfirmDelete = () => {
this.setState({ isConfirmDeleteModalOpen: false });
this.props.onDeletePress(this.getSelectedIds());
}
onConfirmDeleteModalClose = () => {
this.setState({ isConfirmDeleteModalOpen: false });
}
onLanguageChange = ({ value }) => {
const selectedIds = this.getSelectedIds();
if (!selectedIds.length) {
return;
}
this.props.onLanguageChange(selectedIds, parseInt(value));
}
onQualityChange = ({ value }) => {
const selectedIds = this.getSelectedIds();
if (!selectedIds.length) {
return;
}
this.props.onQualityChange(selectedIds, parseInt(value));
}
//
// Render
render() {
const {
seasonNumber,
isDeleting,
isFetching,
isPopulated,
error,
items,
languages,
qualities,
seriesType,
onModalClose
} = this.props;
const {
allSelected,
allUnselected,
selectedState,
isConfirmDeleteModalOpen
} = this.state;
const languageOptions = _.reduceRight(languages, (acc, language) => {
acc.push({
key: language.id,
value: language.name
});
return acc;
}, [{ key: 'selectLanguage', value: 'Select Language', disabled: true }]);
const qualityOptions = _.reduceRight(qualities, (acc, quality) => {
acc.push({
key: quality.id,
value: quality.name
});
return acc;
}, [{ key: 'selectQuality', value: 'Select Quality', disabled: true }]);
const hasSelectedFiles = this.getSelectedIds().length > 0;
return (
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
Manage Episodes {seasonNumber != null && <SeasonNumber seasonNumber={seasonNumber} />}
</ModalHeader>
<ModalBody>
{
isFetching && !isPopulated ?
<LoadingIndicator /> :
null
}
{
!isFetching && error ?
<div>{error}</div> :
null
}
{
isPopulated && !items.length ?
<div>
No episode files to manage.
</div>:
null
}
{
isPopulated && items.length ?
<Table
columns={columns}
selectAll={true}
allSelected={allSelected}
allUnselected={allUnselected}
onSelectAllChange={this.onSelectAllChange}
>
<TableBody>
{
items.map((item) => {
return (
<EpisodeFileEditorRow
key={item.id}
seriesType={seriesType}
isSelected={selectedState[item.id]}
{...item}
onSelectedChange={this.onSelectedChange}
/>
);
})
}
</TableBody>
</Table> :
null
}
</ModalBody>
<ModalFooter>
<div className={styles.actions}>
<SpinnerButton
kind={kinds.DANGER}
isSpinning={isDeleting}
isDisabled={!hasSelectedFiles}
onPress={this.onDeletePress}
>
Delete
</SpinnerButton>
<div className={styles.selectInput}>
<SelectInput
name="language"
value="selectLanguage"
values={languageOptions}
isDisabled={!hasSelectedFiles}
onChange={this.onLanguageChange}
/>
</div>
<div className={styles.selectInput}>
<SelectInput
name="quality"
value="selectQuality"
values={qualityOptions}
isDisabled={!hasSelectedFiles}
onChange={this.onQualityChange}
/>
</div>
</div>
<Button
onPress={onModalClose}
>
Close
</Button>
</ModalFooter>
<ConfirmModal
isOpen={isConfirmDeleteModalOpen}
kind={kinds.DANGER}
title="Delete Selected Episode Files"
message={'Are you sure you want to delete the selected episode files?'}
confirmLabel="Delete"
onConfirm={this.onConfirmDelete}
onCancel={this.onConfirmDeleteModalClose}
/>
</ModalContent>
);
}
}
EpisodeFileEditorModalContent.propTypes = {
seasonNumber: PropTypes.number,
isDeleting: PropTypes.bool.isRequired,
isFetching: PropTypes.bool.isRequired,
isPopulated: PropTypes.bool.isRequired,
error: PropTypes.object,
items: PropTypes.arrayOf(PropTypes.object).isRequired,
languages: PropTypes.arrayOf(PropTypes.object).isRequired,
qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
seriesType: PropTypes.string.isRequired,
onDeletePress: PropTypes.func.isRequired,
onLanguageChange: PropTypes.func.isRequired,
onQualityChange: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};
export default EpisodeFileEditorModalContent;

174
frontend/src/EpisodeFile/Editor/EpisodeFileEditorModalContentConnector.js
View File

@@ -1,174 +0,0 @@
/* 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 getQualities from 'Utilities/Quality/getQualities';
import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
import { deleteEpisodeFiles, updateEpisodeFiles } from 'Store/Actions/episodeFileActions';
import { fetchLanguageProfileSchema, fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
import EpisodeFileEditorModalContent from './EpisodeFileEditorModalContent';
function createSchemaSelector() {
return createSelector(
(state) => state.settings.languageProfiles,
(state) => state.settings.qualityProfiles,
(languageProfiles, qualityProfiles) => {
const languages = _.map(languageProfiles.schema.languages, 'language');
const qualities = getQualities(qualityProfiles.schema.items);
let error = null;
if (languageProfiles.schemaError) {
error = 'Unable to load languages';
} else if (qualityProfiles.schemaError) {
error = 'Unable to load qualities';
}
return {
isFetching: languageProfiles.isSchemaFetching || qualityProfiles.isSchemaFetching,
isPopulated: languageProfiles.isSchemaPopulated && qualityProfiles.isSchemaPopulated,
error,
languages,
qualities
};
}
);
}
function createMapStateToProps() {
return createSelector(
(state, { seasonNumber }) => seasonNumber,
(state) => state.episodes,
(state) => state.episodeFiles,
createSchemaSelector(),
createSeriesSelector(),
(
seasonNumber,
episodes,
episodeFiles,
schema,
series
) => {
const filtered = _.filter(episodes.items, (episode) => {
if (seasonNumber >= 0 && episode.seasonNumber !== seasonNumber) {
return false;
}
if (!episode.episodeFileId) {
return false;
}
return _.some(episodeFiles.items, { id: episode.episodeFileId });
});
const sorted = _.orderBy(filtered, ['seasonNumber', 'episodeNumber'], ['desc', 'desc']);
const items = _.map(sorted, (episode) => {
const episodeFile = _.find(episodeFiles.items, { id: episode.episodeFileId });
return {
relativePath: episodeFile.relativePath,
language: episodeFile.language,
quality: episodeFile.quality,
languageCutoffNotMet: episodeFile.languageCutoffNotMet,
qualityCutoffNotMet: episodeFile.qualityCutoffNotMet,
...episode
};
});
return {
...schema,
items,
seriesType: series.seriesType,
isDeleting: episodeFiles.isDeleting,
isSaving: episodeFiles.isSaving
};
}
);
}
function createMapDispatchToProps(dispatch, props) {
return {
dispatchFetchLanguageProfileSchema(name, path) {
dispatch(fetchLanguageProfileSchema());
},
dispatchFetchQualityProfileSchema(name, path) {
dispatch(fetchQualityProfileSchema());
},
dispatchUpdateEpisodeFiles(updateProps) {
dispatch(updateEpisodeFiles(updateProps));
},
onDeletePress(episodeFileIds) {
dispatch(deleteEpisodeFiles({ episodeFileIds }));
}
};
}
class EpisodeFileEditorModalContentConnector extends Component {
//
// Lifecycle
componentDidMount() {
this.props.dispatchFetchLanguageProfileSchema();
this.props.dispatchFetchQualityProfileSchema();
}
//
// Listeners
onLanguageChange = (episodeFileIds, languageId) => {
const language = _.find(this.props.languages, { id: languageId });
this.props.dispatchUpdateEpisodeFiles({ episodeFileIds, language });
}
onQualityChange = (episodeFileIds, qualityId) => {
const quality = {
quality: _.find(this.props.qualities, { id: qualityId }),
revision: {
version: 1,
real: 0
}
};
this.props.dispatchUpdateEpisodeFiles({ episodeFileIds, quality });
}
//
// Render
render() {
const {
dispatchFetchLanguageProfileSchema,
dispatchFetchQualityProfileSchema,
dispatchUpdateEpisodeFiles,
...otherProps
} = this.props;
return (
<EpisodeFileEditorModalContent
{...otherProps}
onLanguageChange={this.onLanguageChange}
onQualityChange={this.onQualityChange}
/>
);
}
}
EpisodeFileEditorModalContentConnector.propTypes = {
seriesId: PropTypes.number.isRequired,
seasonNumber: PropTypes.number,
languages: PropTypes.arrayOf(PropTypes.object).isRequired,
qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
dispatchFetchLanguageProfileSchema: PropTypes.func.isRequired,
dispatchFetchQualityProfileSchema: PropTypes.func.isRequired,
dispatchUpdateEpisodeFiles: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, createMapDispatchToProps)(EpisodeFileEditorModalContentConnector);

3
frontend/src/EpisodeFile/Editor/EpisodeFileEditorRow.css
View File

@@ -1,3 +0,0 @@
.absoluteEpisodeNumber {
margin-left: 5px;
}

89
frontend/src/EpisodeFile/Editor/EpisodeFileEditorRow.js
View File

@@ -1,89 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import padNumber from 'Utilities/Number/padNumber';
import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
import TableRow from 'Components/Table/TableRow';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
import EpisodeLanguage from 'Episode/EpisodeLanguage';
import EpisodeQuality from 'Episode/EpisodeQuality';
import styles from './EpisodeFileEditorRow';
function EpisodeFileEditorRow(props) {
const {
id,
seriesType,
seasonNumber,
episodeNumber,
absoluteEpisodeNumber,
relativePath,
airDateUtc,
language,
quality,
qualityCutoffNotMet,
languageCutoffNotMet,
isSelected,
onSelectedChange
} = props;
return (
<TableRow>
<TableSelectCell
id={id}
isSelected={isSelected}
onSelectedChange={onSelectedChange}
/>
<TableRowCell>
{seasonNumber}x{padNumber(episodeNumber, 2)}
{
seriesType === 'anime' && !!absoluteEpisodeNumber &&
<span className={styles.absoluteEpisodeNumber}>
({absoluteEpisodeNumber})
</span>
}
</TableRowCell>
<TableRowCell>
{relativePath}
</TableRowCell>
<RelativeDateCellConnector
date={airDateUtc}
/>
<TableRowCell>
<EpisodeLanguage
language={language}
isCutoffNotMet={languageCutoffNotMet}
/>
</TableRowCell>
<TableRowCell>
<EpisodeQuality
quality={quality}
isCutoffNotMet={qualityCutoffNotMet}
/>
</TableRowCell>
</TableRow>
);
}
EpisodeFileEditorRow.propTypes = {
id: PropTypes.number.isRequired,
seriesType: PropTypes.string.isRequired,
seasonNumber: PropTypes.number.isRequired,
episodeNumber: PropTypes.number.isRequired,
absoluteEpisodeNumber: PropTypes.number,
relativePath: PropTypes.string.isRequired,
airDateUtc: PropTypes.string.isRequired,
language: PropTypes.object.isRequired,
quality: PropTypes.object.isRequired,
qualityCutoffNotMet: PropTypes.bool.isRequired,
languageCutoffNotMet: PropTypes.bool.isRequired,
isSelected: PropTypes.bool,
onSelectedChange: PropTypes.func.isRequired
};
export default EpisodeFileEditorRow;

6
frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css
View File

@@ -26,6 +26,12 @@
justify-content: flex-end;
}
.deleteButton {
composes: button from '~Components/Link/Button.css';
margin-right: 10px;
}
.importMode,
.bulkSelect {
composes: select from '~Components/Form/SelectInput.css';

56
frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js
View File

@@ -112,13 +112,21 @@ class InteractiveImportModalContent extends Component {
constructor(props, context) {
super(props, context);
const instanceColumns = _.cloneDeep(columns);
if (!props.showSeries) {
instanceColumns.find((c) => c.name === 'series').isVisible = false;
}
this.state = {
allSelected: false,
allUnselected: false,
lastToggled: null,
selectedState: {},
invalidRowsSelected: [],
selectModalOpen: null
withoutEpisodeFileIdRowsSelected: [],
selectModalOpen: null,
columns: instanceColumns
};
}
@@ -136,9 +144,14 @@ class InteractiveImportModalContent extends Component {
this.setState(selectAll(this.state.selectedState, value));
}
onSelectedChange = ({ id, value, shiftKey = false }) => {
onSelectedChange = ({ id, value, hasEpisodeFileId, shiftKey = false }) => {
this.setState((state) => {
return toggleSelected(state, this.props.items, id, value, shiftKey);
return {
...toggleSelected(state, this.props.items, id, value, shiftKey),
withoutEpisodeFileIdRowsSelected: hasEpisodeFileId || !value ?
_.without(state.withoutEpisodeFileIdRowsSelected, id) :
[...state.withoutEpisodeFileIdRowsSelected, id]
};
});
}
@@ -156,6 +169,16 @@ class InteractiveImportModalContent extends Component {
});
}
onDeleteSelectedPress = () => {
const {
onDeleteSelectedPress
} = this.props;
const selected = this.getSelectedIds();
onDeleteSelectedPress(selected);
}
onImportSelectedPress = () => {
const {
downloadId,
@@ -193,7 +216,9 @@ class InteractiveImportModalContent extends Component {
const {
downloadId,
allowSeriesChange,
autoSelectRow,
showFilterExistingFiles,
showDelete,
showImportMode,
filterExistingFiles,
title,
@@ -215,6 +240,7 @@ class InteractiveImportModalContent extends Component {
allUnselected,
selectedState,
invalidRowsSelected,
withoutEpisodeFileIdRowsSelected,
selectModalOpen
} = this.state;
@@ -308,7 +334,7 @@ class InteractiveImportModalContent extends Component {
{
isPopulated && !!items.length && !isFetching && !isFetching &&
<Table
columns={columns}
columns={this.state.columns}
horizontalScroll={true}
selectAll={true}
allSelected={allSelected}
@@ -327,6 +353,8 @@ class InteractiveImportModalContent extends Component {
isSelected={selectedState[item.id]}
{...item}
allowSeriesChange={allowSeriesChange}
autoSelectRow={autoSelectRow}
columns={this.state.columns}
onSelectedChange={this.onSelectedChange}
onValidRowChange={this.onValidRowChange}
/>
@@ -345,6 +373,19 @@ class InteractiveImportModalContent extends Component {
<ModalFooter className={styles.footer}>
<div className={styles.leftButtons}>
{
showDelete ?
<Button
className={styles.deleteButton}
kind={kinds.DANGER}
isDisabled={!selectedIds.length || !!withoutEpisodeFileIdRowsSelected.length}
onPress={onModalClose}
>
Delete
</Button> :
null
}
{
!downloadId && showImportMode ?
<SelectInput
@@ -437,7 +478,10 @@ class InteractiveImportModalContent extends Component {
InteractiveImportModalContent.propTypes = {
downloadId: PropTypes.string,
showSeries: PropTypes.bool.isRequired,
allowSeriesChange: PropTypes.bool.isRequired,
autoSelectRow: PropTypes.bool.isRequired,
showDelete: PropTypes.bool.isRequired,
showImportMode: PropTypes.bool.isRequired,
showFilterExistingFiles: PropTypes.bool.isRequired,
filterExistingFiles: PropTypes.bool.isRequired,
@@ -454,13 +498,17 @@ InteractiveImportModalContent.propTypes = {
onSortPress: PropTypes.func.isRequired,
onFilterExistingFilesChange: PropTypes.func.isRequired,
onImportModeChange: PropTypes.func.isRequired,
onDeleteSelectedPress: PropTypes.func.isRequired,
onImportSelectedPress: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};
InteractiveImportModalContent.defaultProps = {
showSeries: true,
allowSeriesChange: true,
autoSelectRow: true,
showFilterExistingFiles: false,
showDelete: false,
showImportMode: true,
importMode: 'move'
};

135
frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js
View File

@@ -1,14 +1,42 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { sortDirections } from 'Helpers/Props';
import { fetchInteractiveImportItems, setInteractiveImportSort, clearInteractiveImport, setInteractiveImportMode } from 'Store/Actions/interactiveImportActions';
import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
import { executeCommand } from 'Store/Actions/commandActions';
import { updateEpisodeFiles, deleteEpisodeFiles } from 'Store/Actions/episodeFileActions';
import * as commandNames from 'Commands/commandNames';
import InteractiveImportModalContent from './InteractiveImportModalContent';
function isSameEpisodeFile(file, originalFile) {
const {
series,
seasonNumber,
episodes
} = file;
if (!originalFile) {
return false;
}
if (!originalFile.series || series.id !== originalFile.series.id) {
return false;
}
if (seasonNumber !== originalFile.seasonNumber) {
return false;
}
const episodeIds = episodes.map((e) => e.id);
const originalEpisodeIds = originalFile.episodes ? originalFile.episodes.map((e) => e.id) : [];
return episodeIds.every((episodeId) => {
return originalEpisodeIds.indexOf(episodeId) >= 0;
});
}
function createMapStateToProps() {
return createSelector(
createClientSideCollectionSelector('interactiveImport'),
@@ -23,6 +51,8 @@ const mapDispatchToProps = {
dispatchSetInteractiveImportSort: setInteractiveImportSort,
dispatchSetInteractiveImportMode: setInteractiveImportMode,
dispatchClearInteractiveImport: clearInteractiveImport,
dispatchUpdateEpisodeFiles: updateEpisodeFiles,
dispatchDeleteEpisodeFiles: deleteEpisodeFiles,
dispatchExecuteCommand: executeCommand
};
@@ -44,16 +74,34 @@ class InteractiveImportModalContentConnector extends Component {
const {
downloadId,
seriesId,
folder
seasonNumber,
folder,
initialSortKey,
initialSortDirection,
dispatchSetInteractiveImportSort,
dispatchFetchInteractiveImportItems
} = this.props;
const {
filterExistingFiles
} = this.state;
this.props.dispatchFetchInteractiveImportItems({
if (initialSortKey) {
const sortProps = {
sortKey: initialSortKey
};
if (initialSortDirection) {
sortProps.sortDirection = initialSortDirection;
}
dispatchSetInteractiveImportSort(sortProps);
}
dispatchFetchInteractiveImportItems({
downloadId,
seriesId,
seasonNumber,
folder,
filterExistingFiles
});
@@ -99,10 +147,23 @@ class InteractiveImportModalContentConnector extends Component {
this.props.dispatchSetInteractiveImportMode({ importMode });
}
onDeleteSelectedPress = (selected) => {
// TODO: Delete selected (if they have episode IDs)
}
onImportSelectedPress = (selected, importMode) => {
const {
items,
originalItems,
dispatchUpdateEpisodeFiles,
dispatchExecuteCommand,
onModalClose
} = this.props;
const existingFiles = [];
const files = [];
_.forEach(this.props.items, (item) => {
items.forEach((item) => {
const isSelected = selected.indexOf(item.id) > -1;
if (isSelected) {
@@ -112,32 +173,48 @@ class InteractiveImportModalContentConnector extends Component {
episodes,
releaseGroup,
quality,
language
language,
episodeFileId
} = item;
if (!series) {
this.setState({ interactiveImportErrorMessage: 'Series must be chosen for each selected file' });
return false;
return;
}
if (isNaN(seasonNumber)) {
this.setState({ interactiveImportErrorMessage: 'Season must be chosen for each selected file' });
return false;
return;
}
if (!episodes || !episodes.length) {
this.setState({ interactiveImportErrorMessage: 'One or more episodes must be chosen for each selected file' });
return false;
return;
}
if (!quality) {
this.setState({ interactiveImportErrorMessage: 'Quality must be chosen for each selected file' });
return false;
return;
}
if (!language) {
this.setState({ interactiveImportErrorMessage: 'Language must be chosen for each selected file' });
return false;
return;
}
if (episodeFileId) {
const originalItem = originalItems.find((i) => i.id === item.id);
if (isSameEpisodeFile(item, originalItem)) {
existingFiles.push({
id: episodeFileId,
releaseGroup,
quality,
language
});
return;
}
}
files.push({
@@ -148,22 +225,35 @@ class InteractiveImportModalContentConnector extends Component {
releaseGroup,
quality,
language,
downloadId: this.props.downloadId
downloadId: this.props.downloadId,
episodeFileId
});
}
});
if (!files.length) {
return;
let shouldClose = false;
if (existingFiles.length) {
dispatchUpdateEpisodeFiles({
files: existingFiles
});
shouldClose = true;
}
this.props.dispatchExecuteCommand({
name: commandNames.INTERACTIVE_IMPORT,
files,
importMode
});
if (files.length) {
dispatchExecuteCommand({
name: commandNames.INTERACTIVE_IMPORT,
files,
importMode
});
this.props.onModalClose();
shouldClose = true;
}
if (shouldClose) {
onModalClose();
}
}
//
@@ -183,6 +273,7 @@ class InteractiveImportModalContentConnector extends Component {
onSortPress={this.onSortPress}
onFilterExistingFilesChange={this.onFilterExistingFilesChange}
onImportModeChange={this.onImportModeChange}
onDeleteSelectedPress={this.onDeleteSelectedPress}
onImportSelectedPress={this.onImportSelectedPress}
/>
);
@@ -192,13 +283,19 @@ class InteractiveImportModalContentConnector extends Component {
InteractiveImportModalContentConnector.propTypes = {
downloadId: PropTypes.string,
seriesId: PropTypes.number,
seasonNumber: PropTypes.number,
folder: PropTypes.string,
filterExistingFiles: PropTypes.bool.isRequired,
items: PropTypes.arrayOf(PropTypes.object).isRequired,
initialSortKey: PropTypes.string,
initialSortDirection: PropTypes.oneOf(sortDirections.all),
originalItems: PropTypes.arrayOf(PropTypes.object).isRequired,
dispatchFetchInteractiveImportItems: PropTypes.func.isRequired,
dispatchSetInteractiveImportSort: PropTypes.func.isRequired,
dispatchSetInteractiveImportMode: PropTypes.func.isRequired,
dispatchClearInteractiveImport: PropTypes.func.isRequired,
dispatchUpdateEpisodeFiles: PropTypes.func.isRequired,
dispatchDeleteEpisodeFiles: PropTypes.func.isRequired,
dispatchExecuteCommand: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};

64
frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js
View File

@@ -41,23 +41,35 @@ class InteractiveImportRow extends Component {
componentDidMount() {
const {
allowSeriesChange,
id,
series,
seasonNumber,
episodes,
quality,
language
language,
episodeFileId,
columns
} = this.props;
if (
allowSeriesChange &&
series &&
seasonNumber != null &&
episodes.length &&
quality &&
language
) {
this.props.onSelectedChange({ id, value: true });
this.props.onSelectedChange({
id,
hasEpisodeFileId: !!episodeFileId,
value: true
});
}
this.setState({
isSeriesColumnVisible: columns.find((c) => c.name === 'series').isVisible
});
}
componentDidUpdate(prevProps) {
@@ -104,17 +116,34 @@ class InteractiveImportRow extends Component {
selectRowAfterChange = (value) => {
const {
id,
episodeFileId,
isSelected
} = this.props;
if (!isSelected && value === true) {
this.props.onSelectedChange({ id, value });
this.props.onSelectedChange({
id,
hasEpisodeFileId: !!episodeFileId,
value
});
}
}
//
// Listeners
onSelectedChange = (result) => {
const {
episodeFileId,
onSelectedChange
} = this.props;
onSelectedChange({
...result,
hasEpisodeFileId: !!episodeFileId
});
}
onSelectSeriesPress = () => {
this.setState({ isSelectSeriesModalOpen: true });
}
@@ -186,8 +215,7 @@ class InteractiveImportRow extends Component {
size,
rejections,
isReprocessing,
isSelected,
onSelectedChange
isSelected
} = this.props;
const {
@@ -224,7 +252,7 @@ class InteractiveImportRow extends Component {
<TableSelectCell
id={id}
isSelected={isSelected}
onSelectedChange={onSelectedChange}
onSelectedChange={this.onSelectedChange}
/>
<TableRowCell
@@ -234,15 +262,19 @@ class InteractiveImportRow extends Component {
{relativePath}
</TableRowCell>
<TableRowCellButton
isDisabled={!allowSeriesChange}
title={allowSeriesChange ? 'Click to change series' : undefined}
onPress={this.onSelectSeriesPress}
>
{
showSeriesPlaceholder ? <InteractiveImportRowCellPlaceholder /> : seriesTitle
}
</TableRowCellButton>
{
this.state.isSeriesColumnVisible ?
<TableRowCellButton
isDisabled={!allowSeriesChange}
title={allowSeriesChange ? 'Click to change series' : undefined}
onPress={this.onSelectSeriesPress}
>
{
showSeriesPlaceholder ? <InteractiveImportRowCellPlaceholder /> : seriesTitle
}
</TableRowCellButton> :
null
}
<TableRowCellButton
isDisabled={!series}
@@ -418,6 +450,8 @@ InteractiveImportRow.propTypes = {
language: PropTypes.object,
size: PropTypes.number.isRequired,
rejections: PropTypes.arrayOf(PropTypes.object).isRequired,
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
episodeFileId: PropTypes.number,
isReprocessing: PropTypes.bool,
isSelected: PropTypes.bool,
onSelectedChange: PropTypes.func.isRequired,

2
frontend/src/Organize/OrganizePreviewModalContent.js
View File

@@ -192,7 +192,7 @@ OrganizePreviewModalContent.propTypes = {
isPopulated: PropTypes.bool.isRequired,
error: PropTypes.object,
items: PropTypes.arrayOf(PropTypes.object).isRequired,
seasonNumber: PropTypes.string.isRequired,
seasonNumber: PropTypes.number,
path: PropTypes.string.isRequired,
renameEpisodes: PropTypes.bool,
episodeFormat: PropTypes.string,

40
frontend/src/Series/Details/SeriesDetails.js
View File

@@ -5,7 +5,7 @@ import TextTruncate from 'react-text-truncate';
import formatBytes from 'Utilities/Number/formatBytes';
import selectAll from 'Utilities/Table/selectAll';
import toggleSelected from 'Utilities/Table/toggleSelected';
import { align, icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
import { align, icons, kinds, sizes, sortDirections, tooltipPositions } from 'Helpers/Props';
import fonts from 'Styles/Variables/fonts';
import HeartRating from 'Components/HeartRating';
import Icon from 'Components/Icon';
@@ -22,7 +22,6 @@ import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
import Popover from 'Components/Tooltip/Popover';
import Tooltip from 'Components/Tooltip/Tooltip';
import EpisodeFileEditorModal from 'EpisodeFile/Editor/EpisodeFileEditorModal';
import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
@@ -76,7 +75,6 @@ class SeriesDetails extends Component {
isEditSeriesModalOpen: false,
isDeleteSeriesModalOpen: false,
isSeriesHistoryModalOpen: false,
isInteractiveImportModalOpen: false,
isMonitorOptionsModalOpen: false,
allExpanded: false,
allCollapsed: false,
@@ -104,14 +102,6 @@ class SeriesDetails extends Component {
this.setState({ isManageEpisodesOpen: false });
}
onInteractiveImportPress = () => {
this.setState({ isInteractiveImportModalOpen: true });
}
onInteractiveImportModalClose = () => {
this.setState({ isInteractiveImportModalOpen: false });
}
onEditSeriesPress = () => {
this.setState({ isEditSeriesModalOpen: true });
}
@@ -227,7 +217,6 @@ class SeriesDetails extends Component {
isEditSeriesModalOpen,
isDeleteSeriesModalOpen,
isSeriesHistoryModalOpen,
isInteractiveImportModalOpen,
isMonitorOptionsModalOpen,
allExpanded,
allCollapsed,
@@ -299,12 +288,6 @@ class SeriesDetails extends Component {
onPress={this.onSeriesHistoryPress}
/>
<PageToolbarButton
label="Manual File Import"
iconName={icons.INTERACTIVE}
onPress={this.onInteractiveImportPress}
/>
<PageToolbarSeparator />
<PageToolbarButton
@@ -652,9 +635,18 @@ class SeriesDetails extends Component {
onModalClose={this.onOrganizeModalClose}
/>
<EpisodeFileEditorModal
<InteractiveImportModal
isOpen={isManageEpisodesOpen}
seriesId={id}
title={title}
folder={path}
initialSortKey="relativePath"
initialSortDirection={sortDirections.DESCENDING}
showSeries={false}
allowSeriesChange={false}
autoSelectRow={false}
showDelete={true}
showImportMode={false}
onModalClose={this.onManageEpisodesModalClose}
/>
@@ -677,16 +669,6 @@ class SeriesDetails extends Component {
onModalClose={this.onDeleteSeriesModalClose}
/>
<InteractiveImportModal
isOpen={isInteractiveImportModalOpen}
seriesId={id}
folder={path}
allowSeriesChange={false}
showFilterExistingFiles={true}
showImportMode={false}
onModalClose={this.onInteractiveImportModalClose}
/>
<MonitoringOptionsModal
isOpen={isMonitorOptionsModalOpen}
seriesId={id}

31
frontend/src/Series/Details/SeriesDetailsSeason.js
View File

@@ -5,7 +5,7 @@ import isAfter from 'Utilities/Date/isAfter';
import isBefore from 'Utilities/Date/isBefore';
import formatBytes from 'Utilities/Number/formatBytes';
import getToggledRange from 'Utilities/Table/getToggledRange';
import { align, icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
import { align, icons, kinds, sizes, sortDirections, tooltipPositions } from 'Helpers/Props';
import Icon from 'Components/Icon';
import IconButton from 'Components/Link/IconButton';
import Label from 'Components/Label';
@@ -20,7 +20,7 @@ import MenuItem from 'Components/Menu/MenuItem';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import Popover from 'Components/Tooltip/Popover';
import EpisodeFileEditorModal from 'EpisodeFile/Editor/EpisodeFileEditorModal';
import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
import SeriesHistoryModal from 'Series/History/SeriesHistoryModal';
import SeasonInteractiveSearchModalConnector from 'Series/Search/SeasonInteractiveSearchModalConnector';
@@ -204,6 +204,7 @@ class SeriesDetailsSeason extends Component {
render() {
const {
seriesId,
path,
monitored,
seasonNumber,
items,
@@ -234,6 +235,8 @@ class SeriesDetailsSeason extends Component {
isInteractiveSearchModalOpen
} = this.state;
const title = seasonNumber === 0 ? 'Specials' : `Season ${seasonNumber}`;
return (
<div
className={styles.season}
@@ -248,15 +251,9 @@ class SeriesDetailsSeason extends Component {
onPress={onMonitorSeasonPress}
/>
{
seasonNumber === 0 ?
<span className={styles.seasonNumber}>
Specials
</span> :
<span className={styles.seasonNumber}>
Season {seasonNumber}
</span>
}
<span className={styles.seasonNumber}>
{title}
</span>
<Popover
className={styles.episodeCountTooltip}
@@ -486,10 +483,19 @@ class SeriesDetailsSeason extends Component {
onModalClose={this.onOrganizeModalClose}
/>
<EpisodeFileEditorModal
<InteractiveImportModal
isOpen={isManageEpisodesOpen}
seriesId={seriesId}
seasonNumber={seasonNumber}
title={title}
folder={path}
initialSortKey="relativePath"
initialSortDirection={sortDirections.DESCENDING}
showSeries={false}
allowSeriesChange={false}
autoSelectRow={false}
showDelete={true}
showImportMode={false}
onModalClose={this.onManageEpisodesModalClose}
/>
@@ -513,6 +519,7 @@ class SeriesDetailsSeason extends Component {
SeriesDetailsSeason.propTypes = {
seriesId: PropTypes.number.isRequired,
path: PropTypes.string.isRequired,
monitored: PropTypes.bool.isRequired,
seasonNumber: PropTypes.number.isRequired,
items: PropTypes.arrayOf(PropTypes.object).isRequired,

1
frontend/src/Series/Details/SeriesDetailsSeasonConnector.js
View File

@@ -34,6 +34,7 @@ function createMapStateToProps() {
columns: episodes.columns,
isSearching,
seriesMonitored: series.monitored,
path: series.path,
isSmallScreen: dimensions.isSmallScreen
};
}

43
frontend/src/Store/Actions/episodeFileActions.js
View File

@@ -140,28 +140,14 @@ export const actionHandlers = handleThunks({
},
[UPDATE_EPISODE_FILES]: function(getState, payload, dispatch) {
const {
episodeFileIds,
language,
quality
} = payload;
const { files } = payload;
dispatch(set({ section, isSaving: true }));
const requestData = {
episodeFileIds
};
if (language) {
requestData.language = language;
}
if (quality) {
requestData.quality = quality;
}
const requestData = files;
const promise = createAjaxRequest({
url: '/episodeFile/editor',
url: '/episodeFile/bulk',
method: 'PUT',
dataType: 'json',
data: JSON.stringify(requestData)
@@ -169,23 +155,22 @@ export const actionHandlers = handleThunks({
promise.done((data) => {
dispatch(batchActions([
...episodeFileIds.map((id) => {
...files.map((file) => {
const id = file.id;
const props = {};
const episodeFile = data.find((file) => file.id === id);
const episodeFile = data.find((f) => f.id === id);
props.qualityCutoffNotMet = episodeFile.qualityCutoffNotMet;
props.languageCutoffNotMet = episodeFile.languageCutoffNotMet;
props.language = file.language;
props.quality = file.quality;
props.releaseGroup = file.releaseGroup;
if (language) {
props.language = language;
}
if (quality) {
props.quality = quality;
}
return updateItem({ section, id, ...props });
return updateItem({
section,
id,
...props
});
}),
set({

4
frontend/src/Store/Actions/interactiveImportActions.js
View File

@@ -29,6 +29,7 @@ export const defaultState = {
isPopulated: false,
error: null,
items: [],
originalItems: [],
sortKey: 'quality',
sortDirection: sortDirections.DESCENDING,
recentFolders: [],
@@ -127,7 +128,8 @@ export const actionHandlers = handleThunks({
section,
isFetching: false,
isPopulated: true,
error: null
error: null,
originalItems: data
})
]));
});