tedkulp/Prowlarr
1
0
Fork 0
mirror of https://github.com/Prowlarr/Prowlarr.git synced 2026-04-22 22:34:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Indexer and Search page work

Browse Source
This commit is contained in:
Qstick
2020-10-20 02:08:45 -04:00
parent 5c39ef2f76
commit f290afa68c
123 changed files with 3012 additions and 3274 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/Indexer/Index/MovieIndex.css → frontend/src/Indexer/Index/IndexerIndex.css
View File
frontend/src/Indexer/Index/MovieIndex.js → frontend/src/Indexer/Index/IndexerIndex.js
+53 -149
View File
@@ -2,7 +2,6 @@ import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import ConfirmModal from 'Components/Modal/ConfirmModal';
import PageContent from 'Components/Page/PageContent';
import PageContentBody from 'Components/Page/PageContentBody';
import PageJumpBar from 'Components/Page/PageJumpBar';
@@ -11,10 +10,11 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
import { align, icons, kinds, sortDirections } from 'Helpers/Props';
import { align, icons, sortDirections } from 'Helpers/Props';
import MovieEditorFooter from 'Indexer/Editor/MovieEditorFooter.js';
import OrganizeMovieModal from 'Indexer/Editor/Organize/OrganizeMovieModal';
import NoMovie from 'Indexer/NoMovie';
import NoIndexer from 'Indexer/NoIndexer';
import AddIndexerModal from 'Settings/Indexers/Indexers/AddIndexerModal';
import EditIndexerModalConnector from 'Settings/Indexers/Indexers/EditIndexerModalConnector';
import * as keyCodes from 'Utilities/Constants/keyCodes';
import getErrorMessage from 'Utilities/Object/getErrorMessage';
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
@@ -27,13 +27,13 @@ import MovieIndexSortMenu from './Menus/MovieIndexSortMenu';
import MovieIndexFooterConnector from './MovieIndexFooterConnector';
import MovieIndexTableConnector from './Table/MovieIndexTableConnector';
import MovieIndexTableOptionsConnector from './Table/MovieIndexTableOptionsConnector';
import styles from './MovieIndex.css';
import styles from './IndexerIndex.css';
function getViewComponent(view) {
function getViewComponent() {
return MovieIndexTableConnector;
}
class MovieIndex extends Component {
class IndexerIndex extends Component {
//
// Lifecycle
@@ -45,11 +45,9 @@ class MovieIndex extends Component {
scroller: null,
jumpBarItems: { order: [] },
jumpToCharacter: null,
isPosterOptionsModalOpen: false,
isOverviewOptionsModalOpen: false,
isMovieEditorActive: false,
isOrganizingMovieModalOpen: false,
isConfirmSearchModalOpen: false,
isAddIndexerModalOpen: false,
isEditIndexerModalOpen: false,
searchType: null,
allSelected: false,
allUnselected: false,
@@ -191,20 +189,19 @@ class MovieIndex extends Component {
//
// Listeners
onPosterOptionsPress = () => {
this.setState({ isPosterOptionsModalOpen: true });
onAddIndexerPress = () => {
this.setState({ isAddIndexerModalOpen: true });
}
onPosterOptionsModalClose = () => {
this.setState({ isPosterOptionsModalOpen: false });
onAddIndexerModalClose = ({ indexerSelected = false } = {}) => {
this.setState({
isAddIndexerModalOpen: false,
isEditIndexerModalOpen: indexerSelected
});
}
onOverviewOptionsPress = () => {
this.setState({ isOverviewOptionsModalOpen: true });
}
onOverviewOptionsModalClose = () => {
this.setState({ isOverviewOptionsModalOpen: false });
onEditIndexerModalClose = () => {
this.setState({ isEditIndexerModalOpen: false });
}
onMovieEditorTogglePress = () => {
@@ -254,41 +251,6 @@ class MovieIndex extends Component {
});
}
onOrganizeMoviePress = () => {
this.setState({ isOrganizingMovieModalOpen: true });
}
onOrganizeMovieModalClose = (organized) => {
this.setState({ isOrganizingMovieModalOpen: false });
if (organized === true) {
this.onSelectAllChange({ value: false });
}
}
onSearchPress = () => {
this.setState({ isConfirmSearchModalOpen: true, searchType: 'moviesSearch' });
}
onRefreshMoviePress = () => {
const selectedMovieIds = this.getSelectedIds();
const refreshIds = this.state.isMovieEditorActive && selectedMovieIds.length > 0 ? selectedMovieIds : [];
this.props.onRefreshMoviePress(refreshIds);
}
onSearchConfirmed = () => {
const selectedMovieIds = this.getSelectedIds();
const searchIds = this.state.isMovieEditorActive && selectedMovieIds.length > 0 ? selectedMovieIds : this.props.items.map((m) => m.id);
this.props.onSearchPress(this.state.searchType, searchIds);
this.setState({ isConfirmSearchModalOpen: false });
}
onConfirmSearchModalClose = () => {
this.setState({ isConfirmSearchModalOpen: false });
}
//
// Render
@@ -305,11 +267,6 @@ class MovieIndex extends Component {
customFilters,
sortKey,
sortDirection,
view,
isRefreshingMovie,
isRssSyncExecuting,
isOrganizingMovie,
isSearchingMovies,
isSaving,
saveError,
isDeleting,
@@ -317,10 +274,7 @@ class MovieIndex extends Component {
onScroll,
onSortSelect,
onFilterSelect,
onViewSelect,
onRefreshMoviePress,
onRssSyncPress,
onSearchPress,
onTestAllPress,
...otherProps
} = this.props;
@@ -328,7 +282,8 @@ class MovieIndex extends Component {
scroller,
jumpBarItems,
jumpToCharacter,
isConfirmSearchModalOpen,
isAddIndexerModalOpen,
isEditIndexerModalOpen,
isMovieEditorActive,
selectedState,
allSelected,
@@ -337,9 +292,9 @@ class MovieIndex extends Component {
const selectedMovieIds = this.getSelectedIds();
const ViewComponent = getViewComponent(view);
const ViewComponent = getViewComponent();
const isLoaded = !!(!error && isPopulated && items.length && scroller);
const hasNoMovie = !totalItems;
const hasNoIndexer = !totalItems;
return (
<PageContent>
@@ -349,18 +304,15 @@ class MovieIndex extends Component {
label={'Add Indexer'}
iconName={icons.ADD}
spinningName={icons.ADD}
isSpinning={isRefreshingMovie}
isDisabled={hasNoMovie}
onPress={this.onRefreshMoviePress}
onPress={this.onAddIndexerPress}
/>
<PageToolbarButton
label={'Test All Indexers'}
iconName={icons.TEST}
spinningName={icons.TEST}
isSpinning={isRefreshingMovie}
isDisabled={hasNoMovie}
onPress={this.onRefreshMoviePress}
isDisabled={hasNoIndexer}
onPress={this.props.onTestAllPress}
/>
<PageToolbarSeparator />
@@ -370,13 +322,13 @@ class MovieIndex extends Component {
<PageToolbarButton
label={'Indexers'}
iconName={icons.MOVIE_CONTINUING}
isDisabled={hasNoMovie}
isDisabled={hasNoIndexer}
onPress={this.onMovieEditorTogglePress}
/> :
<PageToolbarButton
label={'Mass Editor'}
iconName={icons.EDIT}
isDisabled={hasNoMovie}
isDisabled={hasNoIndexer}
onPress={this.onMovieEditorTogglePress}
/>
}
@@ -386,7 +338,7 @@ class MovieIndex extends Component {
<PageToolbarButton
label={allSelected ? translate('UnselectAll') : translate('SelectAll')}
iconName={icons.CHECK_SQUARE}
isDisabled={hasNoMovie}
isDisabled={hasNoIndexer}
onPress={this.onSelectAllPress}
/> :
null
@@ -398,49 +350,25 @@ class MovieIndex extends Component {
alignContent={align.RIGHT}
collapseButtons={false}
>
{
view === 'table' ?
<TableOptionsModalWrapper
{...otherProps}
columns={columns}
optionsComponent={MovieIndexTableOptionsConnector}
>
<PageToolbarButton
label={translate('Options')}
iconName={icons.TABLE}
/>
</TableOptionsModalWrapper> :
null
}
{
view === 'posters' ?
<PageToolbarButton
label={translate('Options')}
iconName={icons.POSTER}
isDisabled={hasNoMovie}
onPress={this.onPosterOptionsPress}
/> :
null
}
{
view === 'overview' ?
<PageToolbarButton
label={translate('Options')}
iconName={icons.OVERVIEW}
isDisabled={hasNoMovie}
onPress={this.onOverviewOptionsPress}
/> :
null
}
<TableOptionsModalWrapper
{...otherProps}
columns={columns}
optionsComponent={MovieIndexTableOptionsConnector}
>
<PageToolbarButton
label={translate('Options')}
iconName={icons.TABLE}
/>
</TableOptionsModalWrapper> :
null
<PageToolbarSeparator />
<MovieIndexSortMenu
sortKey={sortKey}
sortDirection={sortDirection}
isDisabled={hasNoMovie}
isDisabled={hasNoIndexer}
onSortSelect={onSortSelect}
/>
@@ -448,7 +376,7 @@ class MovieIndex extends Component {
selectedFilterKey={selectedFilterKey}
filters={filters}
customFilters={customFilters}
isDisabled={hasNoMovie}
isDisabled={hasNoIndexer}
onFilterSelect={onFilterSelect}
/>
</PageToolbarSection>
@@ -458,7 +386,7 @@ class MovieIndex extends Component {
<PageContentBody
registerScroller={this.setScrollerRef}
className={styles.contentBody}
innerClassName={styles[`${view}InnerContentBody`]}
innerClassName={styles.tableInnerContentBody}
onScroll={onScroll}
>
{
@@ -501,7 +429,7 @@ class MovieIndex extends Component {
{
!error && isPopulated && !items.length &&
<NoMovie totalItems={totalItems} />
<NoIndexer totalItems={totalItems} />
}
</PageContentBody>
@@ -523,42 +451,26 @@ class MovieIndex extends Component {
saveError={saveError}
isDeleting={isDeleting}
deleteError={deleteError}
isOrganizingMovie={isOrganizingMovie}
onSaveSelected={this.onSaveSelected}
onOrganizeMoviePress={this.onOrganizeMoviePress}
/>
}
<OrganizeMovieModal
isOpen={this.state.isOrganizingMovieModalOpen}
movieIds={selectedMovieIds}
onModalClose={this.onOrganizeMovieModalClose}
<AddIndexerModal
isOpen={isAddIndexerModalOpen}
onModalClose={this.onAddIndexerModalClose}
/>
<ConfirmModal
isOpen={isConfirmSearchModalOpen}
kind={kinds.DANGER}
title={translate('MassMovieSearch')}
message={
<div>
<div>
Are you sure you want to perform mass movie search for {isMovieEditorActive && selectedMovieIds.length > 0 ? selectedMovieIds.length : this.props.items.length} movies?
</div>
<div>
This cannot be cancelled once started without restarting Prowlarr.
</div>
</div>
}
confirmLabel={translate('Search')}
onConfirm={this.onSearchConfirmed}
onCancel={this.onConfirmSearchModalClose}
<EditIndexerModalConnector
isOpen={isEditIndexerModalOpen}
onModalClose={this.onEditIndexerModalClose}
/>
</PageContent>
);
}
}
MovieIndex.propTypes = {
IndexerIndex.propTypes = {
isFetching: PropTypes.bool.isRequired,
isPopulated: PropTypes.bool.isRequired,
error: PropTypes.object,
@@ -570,11 +482,6 @@ MovieIndex.propTypes = {
customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
sortKey: PropTypes.string,
sortDirection: PropTypes.oneOf(sortDirections.all),
view: PropTypes.string.isRequired,
isRefreshingMovie: PropTypes.bool.isRequired,
isOrganizingMovie: PropTypes.bool.isRequired,
isSearchingMovies: PropTypes.bool.isRequired,
isRssSyncExecuting: PropTypes.bool.isRequired,
isSmallScreen: PropTypes.bool.isRequired,
isSaving: PropTypes.bool.isRequired,
saveError: PropTypes.object,
@@ -582,12 +489,9 @@ MovieIndex.propTypes = {
deleteError: PropTypes.object,
onSortSelect: PropTypes.func.isRequired,
onFilterSelect: PropTypes.func.isRequired,
onViewSelect: PropTypes.func.isRequired,
onRefreshMoviePress: PropTypes.func.isRequired,
onRssSyncPress: PropTypes.func.isRequired,
onSearchPress: PropTypes.func.isRequired,
onTestAllPress: PropTypes.func.isRequired,
onScroll: PropTypes.func.isRequired,
onSaveSelected: PropTypes.func.isRequired
};
export default MovieIndex;
export default IndexerIndex;
frontend/src/Indexer/Index/IndexerIndexConnector.js
+89
View File
@@ -0,0 +1,89 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import withScrollPosition from 'Components/withScrollPosition';
import { testAllIndexers } from 'Store/Actions/indexerActions';
import { saveMovieEditor, setMovieFilter, setMovieSort, setMovieTableOption } from 'Store/Actions/indexerIndexActions';
import scrollPositions from 'Store/scrollPositions';
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import createIndexerClientSideCollectionItemsSelector from 'Store/Selectors/createIndexerClientSideCollectionItemsSelector';
import IndexerIndex from './IndexerIndex';
function createMapStateToProps() {
return createSelector(
createIndexerClientSideCollectionItemsSelector('indexerIndex'),
createDimensionsSelector(),
(
movies,
dimensionsState
) => {
return {
...movies,
isSmallScreen: dimensionsState.isSmallScreen
};
}
);
}
function createMapDispatchToProps(dispatch, props) {
return {
onTableOptionChange(payload) {
dispatch(setMovieTableOption(payload));
},
onSortSelect(sortKey) {
dispatch(setMovieSort({ sortKey }));
},
onFilterSelect(selectedFilterKey) {
dispatch(setMovieFilter({ selectedFilterKey }));
},
dispatchSaveMovieEditor(payload) {
dispatch(saveMovieEditor(payload));
},
onTestAllPress() {
dispatch(testAllIndexers());
}
};
}
class IndexerIndexConnector extends Component {
//
// Listeners
onSaveSelected = (payload) => {
this.props.dispatchSaveMovieEditor(payload);
}
onScroll = ({ scrollTop }) => {
scrollPositions.movieIndex = scrollTop;
}
//
// Render
render() {
return (
<IndexerIndex
{...this.props}
onScroll={this.onScroll}
onSaveSelected={this.onSaveSelected}
/>
);
}
}
IndexerIndexConnector.propTypes = {
isSmallScreen: PropTypes.bool.isRequired,
dispatchSaveMovieEditor: PropTypes.func.isRequired,
items: PropTypes.arrayOf(PropTypes.object)
};
export default withScrollPosition(
connect(createMapStateToProps, createMapDispatchToProps)(IndexerIndexConnector),
'indexerIndex'
);
frontend/src/Indexer/Index/MovieIndexConnector.js
-133
View File
@@ -1,133 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import * as commandNames from 'Commands/commandNames';
import withScrollPosition from 'Components/withScrollPosition';
import { executeCommand } from 'Store/Actions/commandActions';
import { saveMovieEditor, setMovieFilter, setMovieSort, setMovieTableOption, setMovieView } from 'Store/Actions/movieIndexActions';
import scrollPositions from 'Store/scrollPositions';
import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import createMovieClientSideCollectionItemsSelector from 'Store/Selectors/createMovieClientSideCollectionItemsSelector';
import MovieIndex from './MovieIndex';
function createMapStateToProps() {
return createSelector(
createMovieClientSideCollectionItemsSelector('movieIndex'),
createCommandExecutingSelector(commandNames.REFRESH_MOVIE),
createCommandExecutingSelector(commandNames.RSS_SYNC),
createCommandExecutingSelector(commandNames.RENAME_MOVIE),
createCommandExecutingSelector(commandNames.CUTOFF_UNMET_MOVIES_SEARCH),
createCommandExecutingSelector(commandNames.MISSING_MOVIES_SEARCH),
createDimensionsSelector(),
(
movies,
isRefreshingMovie,
isRssSyncExecuting,
isOrganizingMovie,
isCutoffMoviesSearch,
isMissingMoviesSearch,
dimensionsState
) => {
return {
...movies,
isRefreshingMovie,
isRssSyncExecuting,
isOrganizingMovie,
isSearchingMovies: isCutoffMoviesSearch || isMissingMoviesSearch,
isSmallScreen: dimensionsState.isSmallScreen
};
}
);
}
function createMapDispatchToProps(dispatch, props) {
return {
onTableOptionChange(payload) {
dispatch(setMovieTableOption(payload));
},
onSortSelect(sortKey) {
dispatch(setMovieSort({ sortKey }));
},
onFilterSelect(selectedFilterKey) {
dispatch(setMovieFilter({ selectedFilterKey }));
},
dispatchSetMovieView(view) {
dispatch(setMovieView({ view }));
},
dispatchSaveMovieEditor(payload) {
dispatch(saveMovieEditor(payload));
},
onRefreshMoviePress(items) {
dispatch(executeCommand({
name: commandNames.REFRESH_MOVIE,
movieIds: items
}));
},
onRssSyncPress() {
dispatch(executeCommand({
name: commandNames.RSS_SYNC
}));
},
onSearchPress(command, items) {
dispatch(executeCommand({
name: command,
movieIds: items
}));
}
};
}
class MovieIndexConnector extends Component {
//
// Listeners
onViewSelect = (view) => {
// Reset the scroll position before changing the view
this.props.dispatchSetMovieView(view);
}
onSaveSelected = (payload) => {
this.props.dispatchSaveMovieEditor(payload);
}
onScroll = ({ scrollTop }) => {
scrollPositions.movieIndex = scrollTop;
}
//
// Render
render() {
return (
<MovieIndex
{...this.props}
onViewSelect={this.onViewSelect}
onScroll={this.onScroll}
onSaveSelected={this.onSaveSelected}
/>
);
}
}
MovieIndexConnector.propTypes = {
isSmallScreen: PropTypes.bool.isRequired,
view: PropTypes.string.isRequired,
dispatchSetMovieView: PropTypes.func.isRequired,
dispatchSaveMovieEditor: PropTypes.func.isRequired,
items: PropTypes.arrayOf(PropTypes.object)
};
export default withScrollPosition(
connect(createMapStateToProps, createMapDispatchToProps)(MovieIndexConnector),
'movieIndex'
);
frontend/src/Indexer/Index/MovieIndexFilterModalConnector.js
+3 -3
View File
@@ -1,17 +1,17 @@
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import FilterModal from 'Components/Filter/FilterModal';
import { setMovieFilter } from 'Store/Actions/movieIndexActions';
import { setMovieFilter } from 'Store/Actions/indexerIndexActions';
function createMapStateToProps() {
return createSelector(
(state) => state.movies.items,
(state) => state.movieIndex.filterBuilderProps,
(state) => state.indexerIndex.filterBuilderProps,
(sectionItems, filterBuilderProps) => {
return {
sectionItems,
filterBuilderProps,
customFilterType: 'movieIndex'
customFilterType: 'indexerIndex'
};
}
);
frontend/src/Indexer/Index/MovieIndexFooter.js
+12 -48
View File
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import DescriptionList from 'Components/DescriptionList/DescriptionList';
import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
import formatBytes from 'Utilities/Number/formatBytes';
import translate from 'Utilities/String/translate';
import styles from './MovieIndexFooter.css';
@@ -17,8 +16,7 @@ class MovieIndexFooter extends PureComponent {
const count = movies.length;
let movieFiles = 0;
let monitored = 0;
let totalFileSize = 0;
let torrent = 0;
movies.forEach((s) => {
@@ -26,11 +24,9 @@ class MovieIndexFooter extends PureComponent {
movieFiles += 1;
}
if (s.monitored) {
monitored++;
if (s.protocol === 'torrent') {
torrent++;
}
totalFileSize += s.sizeOnDisk;
});
return (
@@ -39,14 +35,14 @@ class MovieIndexFooter extends PureComponent {
<div className={styles.legendItem}>
<div className={styles.ended} />
<div>
{translate('DownloadedAndMonitored')}
Enabled
</div>
</div>
<div className={styles.legendItem}>
<div className={styles.availNotMonitored} />
<div>
{translate('DownloadedButNotMonitored')}
Disabled
</div>
</div>
@@ -57,32 +53,7 @@ class MovieIndexFooter extends PureComponent {
)}
/>
<div>
{translate('MissingMonitoredAndConsideredAvailable')}
</div>
</div>
<div className={styles.legendItem}>
<div className={classNames(
styles.missingUnmonitored,
colorImpairedMode && 'colorImpaired'
)}
/>
<div>
{translate('MissingNotMonitored')}
</div>
</div>
<div className={styles.legendItem}>
<div className={styles.queue} />
<div>
{translate('Queued')}
</div>
</div>
<div className={styles.legendItem}>
<div className={styles.continuing} />
<div>
{translate('Unreleased')}
Error
</div>
</div>
</div>
@@ -90,32 +61,25 @@ class MovieIndexFooter extends PureComponent {
<div className={styles.statistics}>
<DescriptionList>
<DescriptionListItem
title={translate('Movies')}
title={translate('Indexers')}
data={count}
/>
<DescriptionListItem
title={translate('MovieFiles')}
title={translate('Enabled')}
data={movieFiles}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title={translate('Monitored')}
data={monitored}
title={translate('Torrent')}
data={torrent}
/>
<DescriptionListItem
title={translate('Unmonitored')}
data={count - monitored}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title={translate('TotalFileSize')}
data={formatBytes(totalFileSize)}
title={translate('Usenet')}
data={count - torrent}
/>
</DescriptionList>
</div>
frontend/src/Indexer/Index/MovieIndexFooterConnector.js
+7 -13
View File
@@ -7,23 +7,17 @@ import MovieIndexFooter from './MovieIndexFooter';
function createUnoptimizedSelector() {
return createSelector(
createClientSideCollectionSelector('movies', 'movieIndex'),
(movies) => {
return movies.items.map((s) => {
createClientSideCollectionSelector('indexers', 'indexerIndex'),
(indexers) => {
return indexers.items.map((s) => {
const {
monitored,
status,
statistics,
sizeOnDisk,
hasFile
protocol,
privacy
} = s;
return {
monitored,
status,
statistics,
sizeOnDisk,
hasFile
protocol,
privacy
};
});
}
frontend/src/Indexer/Index/MovieIndexItemConnector.js
+5 -5
View File
@@ -5,20 +5,20 @@ import { createSelector } from 'reselect';
import * as commandNames from 'Commands/commandNames';
import { executeCommand } from 'Store/Actions/commandActions';
import createExecutingCommandsSelector from 'Store/Selectors/createExecutingCommandsSelector';
import createMovieSelector from 'Store/Selectors/createMovieSelector';
import createIndexerSelector from 'Store/Selectors/createIndexerSelector';
function selectShowSearchAction() {
return createSelector(
(state) => state.movieIndex,
(movieIndex) => {
return movieIndex.tableOptions.showSearchAction;
(state) => state.indexerIndex,
(indexerIndex) => {
return indexerIndex.tableOptions.showSearchAction;
}
);
}
function createMapStateToProps() {
return createSelector(
createMovieSelector(),
createIndexerSelector(),
selectShowSearchAction(),
createExecutingCommandsSelector(),
(
frontend/src/Indexer/Index/Table/CapabilitiesLabel.js
+65
View File
@@ -0,0 +1,65 @@
import PropTypes from 'prop-types';
import React from 'react';
import Label from 'Components/Label';
function CapabilitiesLabel(props) {
const {
supportsBooks,
supportsMovies,
supportsMusic,
supportsTv
} = props;
return (
<span>
{
supportsBooks ?
<Label>
{'Books'}
</Label> :
null
}
{
supportsMovies ?
<Label>
{'Movies'}
</Label> :
null
}
{
supportsMusic ?
<Label>
{'Music'}
</Label> :
null
}
{
supportsTv ?
<Label>
{'TV'}
</Label> :
null
}
{
!supportsTv && !supportsMusic && !supportsMovies && !supportsBooks ?
<Label>
{'None'}
</Label> :
null
}
</span>
);
}
CapabilitiesLabel.propTypes = {
supportsTv: PropTypes.bool.isRequired,
supportsBooks: PropTypes.bool.isRequired,
supportsMusic: PropTypes.bool.isRequired,
supportsMovies: PropTypes.bool.isRequired
};
export default CapabilitiesLabel;
frontend/src/Indexer/Index/Table/MovieIndexHeader.css
+6 -53
View File
@@ -4,78 +4,31 @@
flex: 0 0 60px;
}
.collection,
.sortTitle {
.name {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
flex: 4 0 110px;
}
.minimumAvailability {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
flex: 0 0 140px;
}
.studio {
.privacy,
.protocol {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
flex: 2 0 90px;
flex: 0 0 90px;
}
.qualityProfileId {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
flex: 1 0 125px;
}
.inCinemas,
.physicalRelease,
.digitalRelease,
.genres {
.capabilities {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
flex: 0 0 180px;
}
.added,
.runtime {
.added {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
flex: 0 0 100px;
}
.movieStatus,
.certification {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
flex: 0 0 100px;
}
.year {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
flex: 0 0 80px;
}
.path {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
flex: 1 0 150px;
}
.sizeOnDisk {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
flex: 0 0 120px;
}
.ratings {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
flex: 0 0 80px;
}
.tags {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
frontend/src/Indexer/Index/Table/MovieIndexHeaderConnector.js
+1 -1
View File
@@ -1,5 +1,5 @@
import { connect } from 'react-redux';
import { setMovieTableOption } from 'Store/Actions/movieIndexActions';
import { setMovieTableOption } from 'Store/Actions/indexerIndexActions';
import MovieIndexHeader from './MovieIndexHeader';
function createMapDispatchToProps(dispatch, props) {
frontend/src/Indexer/Index/Table/MovieIndexRow.css
+6 -53
View File
@@ -11,78 +11,31 @@
flex: 0 0 60px;
}
.collection,
.sortTitle {
.name {
composes: cell;
flex: 4 0 110px;
}
.minimumAvailability {
.protocol,
.privacy {
composes: cell;
flex: 0 0 140px;
flex: 0 0 90px;
}
.studio {
composes: cell;
flex: 2 0 90px;
}
.qualityProfileId {
composes: cell;
flex: 1 0 125px;
}
.inCinemas,
.physicalRelease,
.digitalRelease,
.genres {
.capabilities {
composes: cell;
flex: 0 0 180px;
}
.added,
.runtime {
.added {
composes: cell;
flex: 0 0 100px;
}
.movieStatus,
.certification {
composes: cell;
flex: 0 0 100px;
}
.year {
composes: cell;
flex: 0 0 80px;
}
.path {
composes: cell;
flex: 1 0 150px;
}
.sizeOnDisk {
composes: cell;
flex: 0 0 120px;
}
.ratings {
composes: cell;
flex: 0 0 80px;
}
.tags {
composes: cell;
frontend/src/Indexer/Index/Table/MovieIndexRow.js
+110 -323
View File
@@ -1,24 +1,16 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import HeartRating from 'Components/HeartRating';
import Icon from 'Components/Icon';
import Label from 'Components/Label';
import IconButton from 'Components/Link/IconButton';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
import TagListConnector from 'Components/TagListConnector';
import Tooltip from 'Components/Tooltip/Tooltip';
import { icons, kinds } from 'Helpers/Props';
import DeleteMovieModal from 'Indexer/Delete/DeleteMovieModal';
import EditMovieModalConnector from 'Indexer/Edit/EditMovieModalConnector';
import MovieFileStatusConnector from 'Indexer/MovieFileStatusConnector';
import MovieTitleLink from 'Indexer/MovieTitleLink';
import formatRuntime from 'Utilities/Date/formatRuntime';
import formatBytes from 'Utilities/Number/formatBytes';
import titleCase from 'Utilities/String/titleCase';
import EditIndexerModalConnector from 'Settings/Indexers/Indexers/EditIndexerModalConnector';
import translate from 'Utilities/String/translate';
import MovieStatusCell from './MovieStatusCell';
import CapabilitiesLabel from './CapabilitiesLabel';
import ProtocolLabel from './ProtocolLabel';
import styles from './MovieIndexRow.css';
class MovieIndexRow extends Component {
@@ -30,22 +22,22 @@ class MovieIndexRow extends Component {
super(props, context);
this.state = {
isEditMovieModalOpen: false,
isEditIndexerModalOpen: false,
isDeleteMovieModalOpen: false
};
}
onEditMoviePress = () => {
this.setState({ isEditMovieModalOpen: true });
onEditIndexerPress = () => {
this.setState({ isEditIndexerModalOpen: true });
}
onEditMovieModalClose = () => {
this.setState({ isEditMovieModalOpen: false });
onEditIndexerModalClose = () => {
this.setState({ isEditIndexerModalOpen: false });
}
onDeleteMoviePress = () => {
this.setState({
isEditMovieModalOpen: false,
isEditIndexerModalOpen: false,
isDeleteMovieModalOpen: true
});
}
@@ -65,42 +57,25 @@ class MovieIndexRow extends Component {
render() {
const {
id,
monitored,
status,
title,
titleSlug,
collection,
studio,
qualityProfile,
name,
enableRss,
enableAutomaticSearch,
enableInteractiveSearch,
protocol,
privacy,
added,
year,
inCinemas,
physicalRelease,
digitalRelease,
runtime,
minimumAvailability,
path,
sizeOnDisk,
genres,
ratings,
certification,
tags,
showSearchAction,
supportsTv,
supportsBooks,
supportsMusic,
supportsMovies,
columns,
isRefreshingMovie,
isSearchingMovie,
isMovieEditorActive,
isSelected,
onRefreshMoviePress,
onSearchPress,
onSelectedChange,
queueStatus,
queueState,
movieRuntimeFormat
onSelectedChange
} = this.props;
const {
isEditMovieModalOpen,
isEditIndexerModalOpen,
isDeleteMovieModalOpen
} = this.state;
@@ -109,7 +84,6 @@ class MovieIndexRow extends Component {
{
columns.map((column) => {
const {
name,
isVisible
} = column;
@@ -117,12 +91,12 @@ class MovieIndexRow extends Component {
return null;
}
if (isMovieEditorActive && name === 'select') {
if (isMovieEditorActive && column.name === 'select') {
return (
<VirtualTableSelectCell
inputClassName={styles.checkInput}
id={id}
key={name}
key={column.name}
isSelected={isSelected}
isDisabled={false}
onSelectedChange={onSelectedChange}
@@ -130,275 +104,112 @@ class MovieIndexRow extends Component {
);
}
if (name === 'status') {
if (column.name === 'status') {
return (
<MovieStatusCell
key={name}
className={styles[name]}
monitored={monitored}
status={status}
component={VirtualTableRowCell}
/>
<VirtualTableRowCell
key={column.name}
className={styles[column.name]}
>
{
enableRss || enableAutomaticSearch || enableInteractiveSearch ?
<Label kind={kinds.SUCCESS}>
{'Enabled'}
</Label>:
null
}
{
!enableRss && !enableAutomaticSearch && !enableInteractiveSearch ?
<Label
kind={kinds.DISABLED}
outline={true}
>
{translate('Disabled')}
</Label> :
null
}
</VirtualTableRowCell>
);
}
if (name === 'sortTitle') {
if (column.name === 'name') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
key={column.name}
className={styles[column.name]}
>
{name}
</VirtualTableRowCell>
);
}
<MovieTitleLink
titleSlug={titleSlug}
title={title}
if (column.name === 'privacy') {
return (
<VirtualTableRowCell
key={column.name}
className={styles[column.name]}
>
<Label>
{privacy}
</Label>
</VirtualTableRowCell>
);
}
if (column.name === 'protocol') {
return (
<VirtualTableRowCell
key={column.name}
className={styles[column.name]}
>
<ProtocolLabel
protocol={protocol}
/>
</VirtualTableRowCell>
);
}
if (name === 'collection') {
if (column.name === 'capabilities') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
key={column.name}
className={styles[column.name]}
>
{collection ? collection.name : null }
<CapabilitiesLabel
supportsBooks={supportsBooks}
supportsMovies={supportsMovies}
supportsMusic={supportsMusic}
supportsTv={supportsTv}
/>
</VirtualTableRowCell>
);
}
if (name === 'studio') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{studio}
</VirtualTableRowCell>
);
}
if (name === 'qualityProfileId') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{qualityProfile.name}
</VirtualTableRowCell>
);
}
if (name === 'added') {
if (column.name === 'added') {
return (
<RelativeDateCellConnector
key={name}
className={styles[name]}
key={column.name}
className={styles[column.name]}
date={added}
component={VirtualTableRowCell}
/>
);
}
if (name === 'year') {
if (column.name === 'actions') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
key={column.name}
className={styles[column.name]}
>
{year}
</VirtualTableRowCell>
);
}
if (name === 'inCinemas') {
return (
<RelativeDateCellConnector
key={name}
className={styles[name]}
date={inCinemas}
component={VirtualTableRowCell}
/>
);
}
if (name === 'digitalRelease') {
return (
<RelativeDateCellConnector
key={name}
className={styles[name]}
date={digitalRelease}
component={VirtualTableRowCell}
/>
);
}
if (name === 'physicalRelease') {
return (
<RelativeDateCellConnector
key={name}
className={styles[name]}
date={physicalRelease}
component={VirtualTableRowCell}
/>
);
}
if (name === 'runtime') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{formatRuntime(runtime, movieRuntimeFormat)}
</VirtualTableRowCell>
);
}
if (name === 'minimumAvailability') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{titleCase(minimumAvailability)}
</VirtualTableRowCell>
);
}
if (name === 'path') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
title={path}
>
{path}
</VirtualTableRowCell>
);
}
if (name === 'sizeOnDisk') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{formatBytes(sizeOnDisk)}
</VirtualTableRowCell>
);
}
if (name === 'genres') {
const joinedGenres = genres.join(', ');
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<span title={joinedGenres}>
{joinedGenres}
</span>
</VirtualTableRowCell>
);
}
if (name === 'movieStatus') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<MovieFileStatusConnector
movieId={id}
queueStatus={queueStatus}
queueState={queueState}
<IconButton
name={icons.EXTERNAL_LINK}
title={'Website'}
/>
</VirtualTableRowCell>
);
}
if (name === 'ratings') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<HeartRating
rating={ratings.value}
/>
</VirtualTableRowCell>
);
}
if (name === 'certification') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{certification}
</VirtualTableRowCell>
);
}
if (name === 'tags') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<TagListConnector
tags={tags}
/>
</VirtualTableRowCell>
);
}
if (name === 'actions') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<span className={styles.externalLinks}>
<Tooltip
anchor={
<Icon
name={icons.EXTERNAL_LINK}
size={12}
/>
}
canFlip={true}
kind={kinds.INVERSE}
/>
</span>
<SpinnerIconButton
name={icons.REFRESH}
title={translate('RefreshMovie')}
isSpinning={isRefreshingMovie}
onPress={onRefreshMoviePress}
/>
{
showSearchAction &&
<SpinnerIconButton
className={styles.action}
name={icons.SEARCH}
title={translate('SearchForMovie')}
isSpinning={isSearchingMovie}
onPress={onSearchPress}
/>
}
<IconButton
name={icons.EDIT}
title={translate('EditMovie')}
onPress={this.onEditMoviePress}
onPress={this.onEditIndexerPress}
/>
</VirtualTableRowCell>
);
@@ -408,11 +219,10 @@ class MovieIndexRow extends Component {
})
}
<EditMovieModalConnector
isOpen={isEditMovieModalOpen}
movieId={id}
onModalClose={this.onEditMovieModalClose}
onDeleteMoviePress={this.onDeleteMoviePress}
<EditIndexerModalConnector
id={id}
isOpen={isEditIndexerModalOpen}
onModalClose={this.onEditIndexerModalClose}
/>
<DeleteMovieModal
@@ -427,46 +237,23 @@ class MovieIndexRow extends Component {
MovieIndexRow.propTypes = {
id: PropTypes.number.isRequired,
monitored: PropTypes.bool.isRequired,
status: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
titleSlug: PropTypes.string.isRequired,
studio: PropTypes.string,
collection: PropTypes.object,
qualityProfile: PropTypes.object.isRequired,
added: PropTypes.string,
year: PropTypes.number,
inCinemas: PropTypes.string,
physicalRelease: PropTypes.string,
digitalRelease: PropTypes.string,
runtime: PropTypes.number,
minimumAvailability: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
sizeOnDisk: PropTypes.number.isRequired,
genres: PropTypes.arrayOf(PropTypes.string).isRequired,
ratings: PropTypes.object.isRequired,
certification: PropTypes.string,
protocol: PropTypes.string.isRequired,
privacy: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
enableRss: PropTypes.bool.isRequired,
enableAutomaticSearch: PropTypes.bool.isRequired,
enableInteractiveSearch: PropTypes.bool.isRequired,
supportsTv: PropTypes.bool.isRequired,
supportsBooks: PropTypes.bool.isRequired,
supportsMusic: PropTypes.bool.isRequired,
supportsMovies: PropTypes.bool.isRequired,
added: PropTypes.string.isRequired,
tags: PropTypes.arrayOf(PropTypes.number).isRequired,
showSearchAction: PropTypes.bool.isRequired,
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
isRefreshingMovie: PropTypes.bool.isRequired,
isSearchingMovie: PropTypes.bool.isRequired,
onRefreshMoviePress: PropTypes.func.isRequired,
onSearchPress: PropTypes.func.isRequired,
isMovieEditorActive: PropTypes.bool.isRequired,
isSelected: PropTypes.bool,
onSelectedChange: PropTypes.func.isRequired,
tmdbId: PropTypes.number.isRequired,
imdbId: PropTypes.string,
youTubeTrailerId: PropTypes.string,
queueStatus: PropTypes.string,
queueState: PropTypes.string,
movieRuntimeFormat: PropTypes.string.isRequired
};
MovieIndexRow.defaultProps = {
genres: [],
tags: []
onSelectedChange: PropTypes.func.isRequired
};
export default MovieIndexRow;
frontend/src/Indexer/Index/Table/MovieIndexTable.js
-1
View File
@@ -65,7 +65,6 @@ class MovieIndexTable extends Component {
component={MovieIndexRow}
columns={columns}
movieId={movie.id}
qualityProfileId={movie.qualityProfileId}
isSelected={selectedState[movie.id]}
onSelectedChange={onSelectedChange}
isMovieEditorActive={isMovieEditorActive}
frontend/src/Indexer/Index/Table/MovieIndexTableConnector.js
+3 -3
View File
@@ -1,13 +1,13 @@
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { setMovieSort } from 'Store/Actions/movieIndexActions';
import { setMovieSort } from 'Store/Actions/indexerIndexActions';
import MovieIndexTable from './MovieIndexTable';
function createMapStateToProps() {
return createSelector(
(state) => state.app.dimensions,
(state) => state.movieIndex.tableOptions,
(state) => state.movieIndex.columns,
(state) => state.indexerIndex.tableOptions,
(state) => state.indexerIndex.columns,
(state) => state.settings.ui.item.movieRuntimeFormat,
(dimensions, tableOptions, columns, movieRuntimeFormat) => {
return {
frontend/src/Indexer/Index/Table/MovieIndexTableOptionsConnector.js
+1 -1
View File
@@ -4,7 +4,7 @@ import MovieIndexTableOptions from './MovieIndexTableOptions';
function createMapStateToProps() {
return createSelector(
(state) => state.movieIndex.tableOptions,
(state) => state.indexerIndex.tableOptions,
(tableOptions) => {
return tableOptions;
}
frontend/src/Indexer/Index/Table/MovieStatusCell.css
-9
View File
@@ -1,9 +0,0 @@
.status {
composes: cell from '~Components/Table/Cells/TableRowCell.css';
width: 60px;
}
.statusIcon {
width: 20px !important;
}
frontend/src/Indexer/Index/Table/MovieStatusCell.js
-54
View File
@@ -1,54 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import Icon from 'Components/Icon';
import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
import { icons } from 'Helpers/Props';
import { getMovieStatusDetails } from 'Indexer/MovieStatus';
import translate from 'Utilities/String/translate';
import styles from './MovieStatusCell.css';
function MovieStatusCell(props) {
const {
className,
monitored,
status,
component: Component,
...otherProps
} = props;
const statusDetails = getMovieStatusDetails(status);
return (
<Component
className={className}
{...otherProps}
>
<Icon
className={styles.statusIcon}
name={monitored ? icons.MONITORED : icons.UNMONITORED}
title={monitored ? translate('MovieIsMonitored') : translate('MovieIsUnmonitored')}
/>
<Icon
className={styles.statusIcon}
name={statusDetails.icon}
title={`${statusDetails.title}: ${statusDetails.message}`}
/>
</Component>
);
}
MovieStatusCell.propTypes = {
className: PropTypes.string.isRequired,
monitored: PropTypes.bool.isRequired,
status: PropTypes.string.isRequired,
component: PropTypes.elementType
};
MovieStatusCell.defaultProps = {
className: styles.status,
component: VirtualTableRowCell
};
export default MovieStatusCell;
frontend/src/Indexer/Index/Table/ProtocolLabel.css
+13
View File
@@ -0,0 +1,13 @@
.torrent {
composes: label from '~Components/Label.css';
border-color: $torrentColor;
background-color: $torrentColor;
}
.usenet {
composes: label from '~Components/Label.css';
border-color: $usenetColor;
background-color: $usenetColor;
}
frontend/src/Indexer/Index/Table/ProtocolLabel.js
+20
View File
@@ -0,0 +1,20 @@
import PropTypes from 'prop-types';
import React from 'react';
import Label from 'Components/Label';
import styles from './ProtocolLabel.css';
function ProtocolLabel({ protocol }) {
const protocolName = protocol === 'usenet' ? 'nzb' : protocol;
return (
<Label className={styles[protocol]}>
{protocolName}
</Label>
);
}
ProtocolLabel.propTypes = {
protocol: PropTypes.string.isRequired
};
export default ProtocolLabel;