mirror of
https://github.com/Radarr/Radarr.git
synced 2024-09-17 15:02:34 +02:00
Fixed: List UI Revamp
This commit is contained in:
parent
2d59192a9e
commit
6802bfc736
@ -1,113 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { createSelector } from 'reselect';
|
|
||||||
import createAddMovieClientSideCollectionItemsSelector from 'Store/Selectors/createAddMovieClientSideCollectionItemsSelector';
|
|
||||||
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
|
||||||
import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
|
|
||||||
import { fetchListMovies, clearAddMovie, setListMovieSort, setListMovieFilter, setListMovieView, setListMovieTableOption } from 'Store/Actions/addMovieActions';
|
|
||||||
import scrollPositions from 'Store/scrollPositions';
|
|
||||||
import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
|
|
||||||
import withScrollPosition from 'Components/withScrollPosition';
|
|
||||||
import AddListMovie from './AddListMovie';
|
|
||||||
|
|
||||||
function createMapStateToProps() {
|
|
||||||
return createSelector(
|
|
||||||
createAddMovieClientSideCollectionItemsSelector('addMovie'),
|
|
||||||
createDimensionsSelector(),
|
|
||||||
(
|
|
||||||
movies,
|
|
||||||
dimensionsState
|
|
||||||
) => {
|
|
||||||
return {
|
|
||||||
...movies,
|
|
||||||
isSmallScreen: dimensionsState.isSmallScreen
|
|
||||||
};
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function createMapDispatchToProps(dispatch, props) {
|
|
||||||
return {
|
|
||||||
dispatchFetchRootFolders() {
|
|
||||||
dispatch(fetchRootFolders());
|
|
||||||
},
|
|
||||||
|
|
||||||
dispatchFetchListMovies() {
|
|
||||||
dispatch(fetchListMovies());
|
|
||||||
},
|
|
||||||
|
|
||||||
onTableOptionChange(payload) {
|
|
||||||
dispatch(setListMovieTableOption(payload));
|
|
||||||
},
|
|
||||||
|
|
||||||
onSortSelect(sortKey) {
|
|
||||||
dispatch(setListMovieSort({ sortKey }));
|
|
||||||
},
|
|
||||||
|
|
||||||
onFilterSelect(selectedFilterKey) {
|
|
||||||
dispatch(setListMovieFilter({ selectedFilterKey }));
|
|
||||||
},
|
|
||||||
|
|
||||||
dispatchSetListMovieView(view) {
|
|
||||||
dispatch(setListMovieView({ view }));
|
|
||||||
},
|
|
||||||
|
|
||||||
dispatchClearListMovie() {
|
|
||||||
dispatch(clearAddMovie());
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
class AddListMovieConnector extends Component {
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
registerPagePopulator(this.repopulate);
|
|
||||||
this.props.dispatchFetchRootFolders();
|
|
||||||
this.props.dispatchFetchListMovies();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
this.props.dispatchClearListMovie();
|
|
||||||
unregisterPagePopulator(this.repopulate);
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Listeners
|
|
||||||
|
|
||||||
onViewSelect = (view) => {
|
|
||||||
this.props.dispatchSetListMovieView(view);
|
|
||||||
}
|
|
||||||
|
|
||||||
onScroll = ({ scrollTop }) => {
|
|
||||||
scrollPositions.addMovie = scrollTop;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Render
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<AddListMovie
|
|
||||||
{...this.props}
|
|
||||||
onViewSelect={this.onViewSelect}
|
|
||||||
onScroll={this.onScroll}
|
|
||||||
onSaveSelected={this.onSaveSelected}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
AddListMovieConnector.propTypes = {
|
|
||||||
isSmallScreen: PropTypes.bool.isRequired,
|
|
||||||
view: PropTypes.string.isRequired,
|
|
||||||
dispatchFetchRootFolders: PropTypes.func.isRequired,
|
|
||||||
dispatchFetchListMovies: PropTypes.func.isRequired,
|
|
||||||
dispatchClearListMovie: PropTypes.func.isRequired,
|
|
||||||
dispatchSetListMovieView: PropTypes.func.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
export default withScrollPosition(
|
|
||||||
connect(createMapStateToProps, createMapDispatchToProps)(AddListMovieConnector),
|
|
||||||
'addMovie'
|
|
||||||
);
|
|
@ -1,3 +0,0 @@
|
|||||||
.grid {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
}
|
|
@ -1,56 +0,0 @@
|
|||||||
.status {
|
|
||||||
composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
|
|
||||||
|
|
||||||
flex: 0 0 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sortTitle {
|
|
||||||
composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
|
|
||||||
|
|
||||||
flex: 4 0 110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio {
|
|
||||||
composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
|
|
||||||
|
|
||||||
flex: 2 0 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inCinemas,
|
|
||||||
.physicalRelease,
|
|
||||||
.genres {
|
|
||||||
composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
|
|
||||||
|
|
||||||
flex: 0 0 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.movieStatus,
|
|
||||||
.certification {
|
|
||||||
composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
|
|
||||||
|
|
||||||
flex: 0 0 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ratings {
|
|
||||||
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
|
|
||||||
|
|
||||||
flex: 0 0 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags {
|
|
||||||
composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
|
|
||||||
|
|
||||||
flex: 1 0 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
|
|
||||||
|
|
||||||
flex: 0 1 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkInput {
|
|
||||||
composes: input from '~Components/Form/CheckInput.css';
|
|
||||||
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
@ -1,62 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import { icons } from 'Helpers/Props';
|
|
||||||
import Icon from 'Components/Icon';
|
|
||||||
import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
|
|
||||||
import styles from './MovieStatusCell.css';
|
|
||||||
|
|
||||||
function MovieStatusCell(props) {
|
|
||||||
const {
|
|
||||||
className,
|
|
||||||
status,
|
|
||||||
component: Component,
|
|
||||||
...otherProps
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Component
|
|
||||||
className={className}
|
|
||||||
{...otherProps}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
status === 'announced' ?
|
|
||||||
<Icon
|
|
||||||
className={styles.statusIcon}
|
|
||||||
name={icons.ANNOUNCED}
|
|
||||||
title={'Movie is announced'}
|
|
||||||
/> : null
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
status === 'inCinemas' ?
|
|
||||||
<Icon
|
|
||||||
className={styles.statusIcon}
|
|
||||||
name={icons.IN_CINEMAS}
|
|
||||||
title={'Movie is in Cinemas'}
|
|
||||||
/> : null
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
status === 'released' ?
|
|
||||||
<Icon
|
|
||||||
className={styles.statusIcon}
|
|
||||||
name={icons.MOVIE_FILE}
|
|
||||||
title={'Movie is released'}
|
|
||||||
/> : null
|
|
||||||
}
|
|
||||||
</Component>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
MovieStatusCell.propTypes = {
|
|
||||||
className: PropTypes.string.isRequired,
|
|
||||||
status: PropTypes.string.isRequired,
|
|
||||||
component: PropTypes.elementType
|
|
||||||
};
|
|
||||||
|
|
||||||
MovieStatusCell.defaultProps = {
|
|
||||||
className: styles.status,
|
|
||||||
component: VirtualTableRowCell
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MovieStatusCell;
|
|
@ -67,7 +67,7 @@
|
|||||||
|
|
||||||
.exclusionIcon {
|
.exclusionIcon {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
color: #bc3737;
|
color: $dangerColor;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -6,8 +6,7 @@ import NotFound from 'Components/NotFound';
|
|||||||
import Switch from 'Components/Router/Switch';
|
import Switch from 'Components/Router/Switch';
|
||||||
import MovieIndexConnector from 'Movie/Index/MovieIndexConnector';
|
import MovieIndexConnector from 'Movie/Index/MovieIndexConnector';
|
||||||
import AddNewMovieConnector from 'AddMovie/AddNewMovie/AddNewMovieConnector';
|
import AddNewMovieConnector from 'AddMovie/AddNewMovie/AddNewMovieConnector';
|
||||||
import AddListMovieConnector from 'AddMovie/AddListMovie/AddListMovieConnector';
|
import DiscoverMovieConnector from 'DiscoverMovie/DiscoverMovieConnector';
|
||||||
import AddDiscoverMovieConnector from 'AddMovie/AddListMovie/AddDiscoverMovieConnector';
|
|
||||||
import ImportMovies from 'AddMovie/ImportMovie/ImportMovies';
|
import ImportMovies from 'AddMovie/ImportMovie/ImportMovies';
|
||||||
import MovieDetailsPageConnector from 'Movie/Details/MovieDetailsPageConnector';
|
import MovieDetailsPageConnector from 'Movie/Details/MovieDetailsPageConnector';
|
||||||
import CalendarPageConnector from 'Calendar/CalendarPageConnector';
|
import CalendarPageConnector from 'Calendar/CalendarPageConnector';
|
||||||
@ -78,14 +77,9 @@ function AppRoutes(props) {
|
|||||||
component={ImportMovies}
|
component={ImportMovies}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Route
|
|
||||||
path="/add/list"
|
|
||||||
component={AddListMovieConnector}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Route
|
<Route
|
||||||
path="/add/discover"
|
path="/add/discover"
|
||||||
component={AddDiscoverMovieConnector}
|
component={DiscoverMovieConnector}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Route
|
<Route
|
||||||
|
@ -35,10 +35,6 @@ const links = [
|
|||||||
{
|
{
|
||||||
title: 'Discover',
|
title: 'Discover',
|
||||||
to: '/add/discover'
|
to: '/add/discover'
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Lists',
|
|
||||||
to: '/add/list'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
@ -1,17 +1,17 @@
|
|||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import { setListMovieFilter } from 'Store/Actions/addMovieActions';
|
import { setListMovieFilter } from 'Store/Actions/discoverMovieActions';
|
||||||
import FilterModal from 'Components/Filter/FilterModal';
|
import FilterModal from 'Components/Filter/FilterModal';
|
||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
(state) => state.addMovie.items,
|
(state) => state.discoverMovie.items,
|
||||||
(state) => state.addMovie.filterBuilderProps,
|
(state) => state.discoverMovie.filterBuilderProps,
|
||||||
(sectionItems, filterBuilderProps) => {
|
(sectionItems, filterBuilderProps) => {
|
||||||
return {
|
return {
|
||||||
sectionItems,
|
sectionItems,
|
||||||
filterBuilderProps,
|
filterBuilderProps,
|
||||||
customFilterType: 'addMovie'
|
customFilterType: 'discoverMovie'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
);
|
);
|
@ -2,16 +2,13 @@ import PropTypes from 'prop-types';
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import createAddListMovieSelector from 'Store/Selectors/createAddListMovieSelector';
|
import createDiscoverMovieSelector from 'Store/Selectors/createDiscoverMovieSelector';
|
||||||
import createMovieQualityProfileSelector from 'Store/Selectors/createMovieQualityProfileSelector';
|
|
||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
createAddListMovieSelector(),
|
createDiscoverMovieSelector(),
|
||||||
createMovieQualityProfileSelector(),
|
|
||||||
(
|
(
|
||||||
movie,
|
movie
|
||||||
qualityProfile
|
|
||||||
) => {
|
) => {
|
||||||
|
|
||||||
// If a movie is deleted this selector may fire before the parent
|
// If a movie is deleted this selector may fire before the parent
|
||||||
@ -24,16 +21,12 @@ function createMapStateToProps() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...movie,
|
...movie
|
||||||
qualityProfile
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapDispatchToProps = {
|
|
||||||
};
|
|
||||||
|
|
||||||
class AddListMovieItemConnector extends Component {
|
class AddListMovieItemConnector extends Component {
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -64,4 +57,4 @@ AddListMovieItemConnector.propTypes = {
|
|||||||
component: PropTypes.elementType.isRequired
|
component: PropTypes.elementType.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default connect(createMapStateToProps, mapDispatchToProps)(AddListMovieItemConnector);
|
export default connect(createMapStateToProps)(AddListMovieItemConnector);
|
31
frontend/src/DiscoverMovie/AddNewDiscoverMovieModal.js
Normal file
31
frontend/src/DiscoverMovie/AddNewDiscoverMovieModal.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import Modal from 'Components/Modal/Modal';
|
||||||
|
import AddNewDiscoverMovieModalContentConnector from './AddNewDiscoverMovieModalContentConnector';
|
||||||
|
|
||||||
|
function AddNewDiscoverMovieModal(props) {
|
||||||
|
const {
|
||||||
|
isOpen,
|
||||||
|
onModalClose,
|
||||||
|
...otherProps
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
isOpen={isOpen}
|
||||||
|
onModalClose={onModalClose}
|
||||||
|
>
|
||||||
|
<AddNewDiscoverMovieModalContentConnector
|
||||||
|
{...otherProps}
|
||||||
|
onModalClose={onModalClose}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
AddNewDiscoverMovieModal.propTypes = {
|
||||||
|
isOpen: PropTypes.bool.isRequired,
|
||||||
|
onModalClose: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddNewDiscoverMovieModal;
|
@ -0,0 +1,105 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import { setAddMovieDefault, addMovie } from 'Store/Actions/discoverMovieActions';
|
||||||
|
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||||
|
import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
|
||||||
|
import selectSettings from 'Store/Selectors/selectSettings';
|
||||||
|
import AddNewMovieModalContent from 'AddMovie/AddNewMovie/AddNewMovieModalContent';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
(state) => state.discoverMovie,
|
||||||
|
createDimensionsSelector(),
|
||||||
|
createSystemStatusSelector(),
|
||||||
|
(discoverMovieState, dimensions, systemStatus) => {
|
||||||
|
const {
|
||||||
|
isAdding,
|
||||||
|
addError,
|
||||||
|
defaults
|
||||||
|
} = discoverMovieState;
|
||||||
|
|
||||||
|
const {
|
||||||
|
settings,
|
||||||
|
validationErrors,
|
||||||
|
validationWarnings
|
||||||
|
} = selectSettings(defaults, {}, addError);
|
||||||
|
|
||||||
|
return {
|
||||||
|
isAdding,
|
||||||
|
addError,
|
||||||
|
isSmallScreen: dimensions.isSmallScreen,
|
||||||
|
validationErrors,
|
||||||
|
validationWarnings,
|
||||||
|
isWindows: systemStatus.isWindows,
|
||||||
|
...settings
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapDispatchToProps = {
|
||||||
|
setAddMovieDefault,
|
||||||
|
addMovie
|
||||||
|
};
|
||||||
|
|
||||||
|
class AddNewDiscoverMovieModalContentConnector extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onInputChange = ({ name, value }) => {
|
||||||
|
this.props.setAddMovieDefault({ [name]: value });
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddMoviePress = (searchForMovie) => {
|
||||||
|
const {
|
||||||
|
tmdbId,
|
||||||
|
rootFolderPath,
|
||||||
|
monitor,
|
||||||
|
qualityProfileId,
|
||||||
|
minimumAvailability,
|
||||||
|
tags
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
this.props.addMovie({
|
||||||
|
tmdbId,
|
||||||
|
rootFolderPath: rootFolderPath.value,
|
||||||
|
monitor: monitor.value,
|
||||||
|
qualityProfileId: qualityProfileId.value,
|
||||||
|
minimumAvailability: minimumAvailability.value,
|
||||||
|
tags: tags.value,
|
||||||
|
searchForMovie
|
||||||
|
});
|
||||||
|
|
||||||
|
this.props.onModalClose(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<AddNewMovieModalContent
|
||||||
|
{...this.props}
|
||||||
|
onInputChange={this.onInputChange}
|
||||||
|
onAddMoviePress={this.onAddMoviePress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddNewDiscoverMovieModalContentConnector.propTypes = {
|
||||||
|
tmdbId: PropTypes.number.isRequired,
|
||||||
|
rootFolderPath: PropTypes.object,
|
||||||
|
monitor: PropTypes.object.isRequired,
|
||||||
|
qualityProfileId: PropTypes.object,
|
||||||
|
minimumAvailability: PropTypes.object.isRequired,
|
||||||
|
tags: PropTypes.object.isRequired,
|
||||||
|
onModalClose: PropTypes.func.isRequired,
|
||||||
|
setAddMovieDefault: PropTypes.func.isRequired,
|
||||||
|
addMovie: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps, mapDispatchToProps)(AddNewDiscoverMovieModalContentConnector);
|
@ -1,7 +1,10 @@
|
|||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItems';
|
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
|
||||||
|
import getSelectedIds from 'Utilities/Table/getSelectedIds';
|
||||||
|
import selectAll from 'Utilities/Table/selectAll';
|
||||||
|
import toggleSelected from 'Utilities/Table/toggleSelected';
|
||||||
import { align, icons, sortDirections } from 'Helpers/Props';
|
import { align, icons, sortDirections } from 'Helpers/Props';
|
||||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||||
import PageContent from 'Components/Page/PageContent';
|
import PageContent from 'Components/Page/PageContent';
|
||||||
@ -17,9 +20,11 @@ import AddListMoviePosterOptionsModal from './Posters/Options/AddListMoviePoster
|
|||||||
import AddListMoviePostersConnector from './Posters/AddListMoviePostersConnector';
|
import AddListMoviePostersConnector from './Posters/AddListMoviePostersConnector';
|
||||||
import AddListMovieOverviewOptionsModal from './Overview/Options/AddListMovieOverviewOptionsModal';
|
import AddListMovieOverviewOptionsModal from './Overview/Options/AddListMovieOverviewOptionsModal';
|
||||||
import AddListMovieOverviewsConnector from './Overview/AddListMovieOverviewsConnector';
|
import AddListMovieOverviewsConnector from './Overview/AddListMovieOverviewsConnector';
|
||||||
import AddListMovieFilterMenu from 'AddMovie/AddListMovie/Menus/AddListMovieFilterMenu';
|
import AddListMovieFilterMenu from './Menus/AddListMovieFilterMenu';
|
||||||
import AddListMovieSortMenu from 'AddMovie/AddListMovie/Menus/AddListMovieSortMenu';
|
import AddListMovieSortMenu from './Menus/AddListMovieSortMenu';
|
||||||
import AddListMovieViewMenu from 'AddMovie/AddListMovie/Menus/AddListMovieViewMenu';
|
import AddListMovieViewMenu from './Menus/AddListMovieViewMenu';
|
||||||
|
import NoDiscoverMovie from './NoDiscoverMovie';
|
||||||
|
import DiscoverMovieFooterConnector from './DiscoverMovieFooterConnector';
|
||||||
import styles from 'Movie/Index/MovieIndex.css';
|
import styles from 'Movie/Index/MovieIndex.css';
|
||||||
|
|
||||||
function getViewComponent(view) {
|
function getViewComponent(view) {
|
||||||
@ -34,7 +39,7 @@ function getViewComponent(view) {
|
|||||||
return AddListMovieTableConnector;
|
return AddListMovieTableConnector;
|
||||||
}
|
}
|
||||||
|
|
||||||
class AddListMovie extends Component {
|
class DiscoverMovie extends Component {
|
||||||
|
|
||||||
//
|
//
|
||||||
// Lifecycle
|
// Lifecycle
|
||||||
@ -50,12 +55,16 @@ class AddListMovie extends Component {
|
|||||||
isOverviewOptionsModalOpen: false,
|
isOverviewOptionsModalOpen: false,
|
||||||
isConfirmSearchModalOpen: false,
|
isConfirmSearchModalOpen: false,
|
||||||
searchType: null,
|
searchType: null,
|
||||||
lastToggled: null
|
allSelected: false,
|
||||||
|
allUnselected: false,
|
||||||
|
lastToggled: null,
|
||||||
|
selectedState: {}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.setJumpBarItems();
|
this.setJumpBarItems();
|
||||||
|
this.setSelectedState();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
componentDidUpdate(prevProps) {
|
||||||
@ -70,6 +79,7 @@ class AddListMovie extends Component {
|
|||||||
hasDifferentItemsOrOrder(prevProps.items, items)
|
hasDifferentItemsOrOrder(prevProps.items, items)
|
||||||
) {
|
) {
|
||||||
this.setJumpBarItems();
|
this.setJumpBarItems();
|
||||||
|
this.setSelectedState();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.state.jumpToCharacter != null) {
|
if (this.state.jumpToCharacter != null) {
|
||||||
@ -84,6 +94,48 @@ class AddListMovie extends Component {
|
|||||||
this.setState({ scroller: ref });
|
this.setState({ scroller: ref });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getSelectedIds = () => {
|
||||||
|
if (this.state.allUnselected) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
return getSelectedIds(this.state.selectedState);
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedState() {
|
||||||
|
const {
|
||||||
|
items
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
selectedState
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const newSelectedState = {};
|
||||||
|
|
||||||
|
items.forEach((movie) => {
|
||||||
|
const isItemSelected = selectedState[movie.tmdbId];
|
||||||
|
|
||||||
|
if (isItemSelected) {
|
||||||
|
newSelectedState[movie.tmdbId] = isItemSelected;
|
||||||
|
} else {
|
||||||
|
newSelectedState[movie.tmdbId] = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectedCount = getSelectedIds(newSelectedState).length;
|
||||||
|
const newStateCount = Object.keys(newSelectedState).length;
|
||||||
|
let isAllSelected = false;
|
||||||
|
let isAllUnselected = false;
|
||||||
|
|
||||||
|
if (selectedCount === 0) {
|
||||||
|
isAllUnselected = true;
|
||||||
|
} else if (selectedCount === newStateCount) {
|
||||||
|
isAllSelected = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({ selectedState: newSelectedState, allSelected: isAllSelected, allUnselected: isAllUnselected });
|
||||||
|
}
|
||||||
|
|
||||||
setJumpBarItems() {
|
setJumpBarItems() {
|
||||||
const {
|
const {
|
||||||
items,
|
items,
|
||||||
@ -151,6 +203,28 @@ class AddListMovie extends Component {
|
|||||||
this.setState({ jumpToCharacter });
|
this.setState({ jumpToCharacter });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onSelectAllChange = ({ value }) => {
|
||||||
|
this.setState(selectAll(this.state.selectedState, value));
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelectAllPress = () => {
|
||||||
|
this.onSelectAllChange({ value: !this.state.allSelected });
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelectedChange = ({ id, value, shiftKey = false }) => {
|
||||||
|
this.setState((state) => {
|
||||||
|
return toggleSelected(state, this.props.items, id, value, shiftKey, 'tmdbId');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddMoviesPress = ({ addOptions }) => {
|
||||||
|
this.props.onAddMoviesPress({ ids: this.getSelectedIds(), addOptions });
|
||||||
|
}
|
||||||
|
|
||||||
|
onExcludeMoviesPress = () => {
|
||||||
|
this.props.onExcludeMoviesPress({ ids: this.getSelectedIds() });
|
||||||
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
// Render
|
// Render
|
||||||
|
|
||||||
@ -172,6 +246,7 @@ class AddListMovie extends Component {
|
|||||||
onFilterSelect,
|
onFilterSelect,
|
||||||
onViewSelect,
|
onViewSelect,
|
||||||
onScroll,
|
onScroll,
|
||||||
|
onAddMoviesPress,
|
||||||
...otherProps
|
...otherProps
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
@ -180,9 +255,14 @@ class AddListMovie extends Component {
|
|||||||
jumpBarItems,
|
jumpBarItems,
|
||||||
jumpToCharacter,
|
jumpToCharacter,
|
||||||
isPosterOptionsModalOpen,
|
isPosterOptionsModalOpen,
|
||||||
isOverviewOptionsModalOpen
|
isOverviewOptionsModalOpen,
|
||||||
|
selectedState,
|
||||||
|
allSelected,
|
||||||
|
allUnselected
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
|
const selectedMovieIds = this.getSelectedIds();
|
||||||
|
|
||||||
const ViewComponent = getViewComponent(view);
|
const ViewComponent = getViewComponent(view);
|
||||||
const isLoaded = !!(!error && isPopulated && items.length && scroller);
|
const isLoaded = !!(!error && isPopulated && items.length && scroller);
|
||||||
const hasNoMovie = !totalItems;
|
const hasNoMovie = !totalItems;
|
||||||
@ -190,6 +270,15 @@ class AddListMovie extends Component {
|
|||||||
return (
|
return (
|
||||||
<PageContent>
|
<PageContent>
|
||||||
<PageToolbar>
|
<PageToolbar>
|
||||||
|
<PageToolbarSection>
|
||||||
|
<PageToolbarButton
|
||||||
|
label={allSelected ? 'Unselect All' : 'Select All'}
|
||||||
|
iconName={icons.CHECK_SQUARE}
|
||||||
|
isDisabled={hasNoMovie}
|
||||||
|
onPress={this.onSelectAllPress}
|
||||||
|
/>
|
||||||
|
</PageToolbarSection>
|
||||||
|
|
||||||
<PageToolbarSection
|
<PageToolbarSection
|
||||||
alignContent={align.RIGHT}
|
alignContent={align.RIGHT}
|
||||||
collapseButtons={false}
|
collapseButtons={false}
|
||||||
@ -285,6 +374,11 @@ class AddListMovie extends Component {
|
|||||||
sortKey={sortKey}
|
sortKey={sortKey}
|
||||||
sortDirection={sortDirection}
|
sortDirection={sortDirection}
|
||||||
jumpToCharacter={jumpToCharacter}
|
jumpToCharacter={jumpToCharacter}
|
||||||
|
allSelected={allSelected}
|
||||||
|
allUnselected={allUnselected}
|
||||||
|
onSelectedChange={this.onSelectedChange}
|
||||||
|
onSelectAllChange={this.onSelectAllChange}
|
||||||
|
selectedState={selectedState}
|
||||||
{...otherProps}
|
{...otherProps}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -292,9 +386,7 @@ class AddListMovie extends Component {
|
|||||||
|
|
||||||
{
|
{
|
||||||
!error && isPopulated && !items.length &&
|
!error && isPopulated && !items.length &&
|
||||||
<div className={styles.message}>
|
<NoDiscoverMovie totalItems={totalItems} />
|
||||||
<div className={styles.noResults}>Couldn't find any results</div>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
</PageContentBody>
|
</PageContentBody>
|
||||||
|
|
||||||
@ -307,6 +399,15 @@ class AddListMovie extends Component {
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{
|
||||||
|
isLoaded &&
|
||||||
|
<DiscoverMovieFooterConnector
|
||||||
|
selectedIds={selectedMovieIds}
|
||||||
|
onAddMoviesPress={this.onAddMoviesPress}
|
||||||
|
onExcludeMoviesPress={this.onExcludeMoviesPress}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
|
||||||
<AddListMoviePosterOptionsModal
|
<AddListMoviePosterOptionsModal
|
||||||
isOpen={isPosterOptionsModalOpen}
|
isOpen={isPosterOptionsModalOpen}
|
||||||
onModalClose={this.onPosterOptionsModalClose}
|
onModalClose={this.onPosterOptionsModalClose}
|
||||||
@ -321,7 +422,7 @@ class AddListMovie extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
AddListMovie.propTypes = {
|
DiscoverMovie.propTypes = {
|
||||||
isFetching: PropTypes.bool.isRequired,
|
isFetching: PropTypes.bool.isRequired,
|
||||||
isPopulated: PropTypes.bool.isRequired,
|
isPopulated: PropTypes.bool.isRequired,
|
||||||
error: PropTypes.object,
|
error: PropTypes.object,
|
||||||
@ -338,7 +439,9 @@ AddListMovie.propTypes = {
|
|||||||
onSortSelect: PropTypes.func.isRequired,
|
onSortSelect: PropTypes.func.isRequired,
|
||||||
onFilterSelect: PropTypes.func.isRequired,
|
onFilterSelect: PropTypes.func.isRequired,
|
||||||
onViewSelect: PropTypes.func.isRequired,
|
onViewSelect: PropTypes.func.isRequired,
|
||||||
onScroll: PropTypes.func.isRequired
|
onScroll: PropTypes.func.isRequired,
|
||||||
|
onAddMoviesPress: PropTypes.func.isRequired,
|
||||||
|
onExcludeMoviesPress: PropTypes.func.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AddListMovie;
|
export default DiscoverMovie;
|
@ -2,18 +2,19 @@ import PropTypes from 'prop-types';
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import createAddMovieClientSideCollectionItemsSelector from 'Store/Selectors/createAddMovieClientSideCollectionItemsSelector';
|
import createDiscoverMovieClientSideCollectionItemsSelector from 'Store/Selectors/createDiscoverMovieClientSideCollectionItemsSelector';
|
||||||
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||||
import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
|
import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
|
||||||
import { fetchDiscoverMovies, clearAddMovie, setListMovieSort, setListMovieFilter, setListMovieView, setListMovieTableOption } from 'Store/Actions/addMovieActions';
|
import { fetchDiscoverMovies, addMovies, clearAddMovie, addNetImportExclusions, setListMovieSort, setListMovieFilter, setListMovieView, setListMovieTableOption } from 'Store/Actions/discoverMovieActions';
|
||||||
|
import { fetchNetImportExclusions } from 'Store/Actions/Settings/netImportExclusions';
|
||||||
import scrollPositions from 'Store/scrollPositions';
|
import scrollPositions from 'Store/scrollPositions';
|
||||||
import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
|
import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
|
||||||
import withScrollPosition from 'Components/withScrollPosition';
|
import withScrollPosition from 'Components/withScrollPosition';
|
||||||
import AddListMovie from './AddListMovie';
|
import DiscoverMovie from './DiscoverMovie';
|
||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
createAddMovieClientSideCollectionItemsSelector('addMovie'),
|
createDiscoverMovieClientSideCollectionItemsSelector('discoverMovie'),
|
||||||
createDimensionsSelector(),
|
createDimensionsSelector(),
|
||||||
(
|
(
|
||||||
movies,
|
movies,
|
||||||
@ -33,6 +34,10 @@ function createMapDispatchToProps(dispatch, props) {
|
|||||||
dispatch(fetchRootFolders());
|
dispatch(fetchRootFolders());
|
||||||
},
|
},
|
||||||
|
|
||||||
|
dispatchFetchNetImportExclusions() {
|
||||||
|
dispatch(fetchNetImportExclusions());
|
||||||
|
},
|
||||||
|
|
||||||
dispatchClearListMovie() {
|
dispatchClearListMovie() {
|
||||||
dispatch(clearAddMovie());
|
dispatch(clearAddMovie());
|
||||||
},
|
},
|
||||||
@ -55,11 +60,19 @@ function createMapDispatchToProps(dispatch, props) {
|
|||||||
|
|
||||||
dispatchSetListMovieView(view) {
|
dispatchSetListMovieView(view) {
|
||||||
dispatch(setListMovieView({ view }));
|
dispatch(setListMovieView({ view }));
|
||||||
|
},
|
||||||
|
|
||||||
|
dispatchAddMovies(ids, addOptions) {
|
||||||
|
dispatch(addMovies({ ids, addOptions }));
|
||||||
|
},
|
||||||
|
|
||||||
|
dispatchAddNetImportExclusions(exclusions) {
|
||||||
|
dispatch(addNetImportExclusions(exclusions));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
class AddDiscoverMovieConnector extends Component {
|
class DiscoverMovieConnector extends Component {
|
||||||
|
|
||||||
//
|
//
|
||||||
// Lifecycle
|
// Lifecycle
|
||||||
@ -67,6 +80,7 @@ class AddDiscoverMovieConnector extends Component {
|
|||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
registerPagePopulator(this.repopulate);
|
registerPagePopulator(this.repopulate);
|
||||||
this.props.dispatchFetchRootFolders();
|
this.props.dispatchFetchRootFolders();
|
||||||
|
this.props.dispatchFetchNetImportExclusions();
|
||||||
this.props.dispatchFetchListMovies();
|
this.props.dispatchFetchListMovies();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -83,7 +97,15 @@ class AddDiscoverMovieConnector extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onScroll = ({ scrollTop }) => {
|
onScroll = ({ scrollTop }) => {
|
||||||
scrollPositions.addMovie = scrollTop;
|
scrollPositions.discoverMovie = scrollTop;
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddMoviesPress = ({ ids, addOptions }) => {
|
||||||
|
this.props.dispatchAddMovies(ids, addOptions);
|
||||||
|
}
|
||||||
|
|
||||||
|
onExcludeMoviesPress =({ ids }) => {
|
||||||
|
this.props.dispatchAddNetImportExclusions({ ids });
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -91,26 +113,30 @@ class AddDiscoverMovieConnector extends Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<AddListMovie
|
<DiscoverMovie
|
||||||
{...this.props}
|
{...this.props}
|
||||||
onViewSelect={this.onViewSelect}
|
onViewSelect={this.onViewSelect}
|
||||||
onScroll={this.onScroll}
|
onScroll={this.onScroll}
|
||||||
onSaveSelected={this.onSaveSelected}
|
onAddMoviesPress={this.onAddMoviesPress}
|
||||||
|
onExcludeMoviesPress={this.onExcludeMoviesPress}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
AddDiscoverMovieConnector.propTypes = {
|
DiscoverMovieConnector.propTypes = {
|
||||||
isSmallScreen: PropTypes.bool.isRequired,
|
isSmallScreen: PropTypes.bool.isRequired,
|
||||||
view: PropTypes.string.isRequired,
|
view: PropTypes.string.isRequired,
|
||||||
|
dispatchFetchNetImportExclusions: PropTypes.func.isRequired,
|
||||||
dispatchFetchRootFolders: PropTypes.func.isRequired,
|
dispatchFetchRootFolders: PropTypes.func.isRequired,
|
||||||
dispatchFetchListMovies: PropTypes.func.isRequired,
|
dispatchFetchListMovies: PropTypes.func.isRequired,
|
||||||
dispatchClearListMovie: PropTypes.func.isRequired,
|
dispatchClearListMovie: PropTypes.func.isRequired,
|
||||||
dispatchSetListMovieView: PropTypes.func.isRequired
|
dispatchSetListMovieView: PropTypes.func.isRequired,
|
||||||
|
dispatchAddMovies: PropTypes.func.isRequired,
|
||||||
|
dispatchAddNetImportExclusions: PropTypes.func.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default withScrollPosition(
|
export default withScrollPosition(
|
||||||
connect(createMapStateToProps, createMapDispatchToProps)(AddDiscoverMovieConnector),
|
connect(createMapStateToProps, createMapDispatchToProps)(DiscoverMovieConnector),
|
||||||
'addMovie'
|
'discoverMovie'
|
||||||
);
|
);
|
56
frontend/src/DiscoverMovie/DiscoverMovieFooter.css
Normal file
56
frontend/src/DiscoverMovie/DiscoverMovieFooter.css
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
.inputContainer {
|
||||||
|
margin-right: 20px;
|
||||||
|
min-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonContainerContent {
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.addSelectedButton {
|
||||||
|
composes: button from '~Components/Link/SpinnerButton.css';
|
||||||
|
|
||||||
|
margin-right: 10px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.excludeSelectedButton {
|
||||||
|
composes: button from '~Components/Link/SpinnerButton.css';
|
||||||
|
|
||||||
|
margin-left: 50px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: $breakpointSmall) {
|
||||||
|
.inputContainer {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonContainer {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonContainerContent {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectedMovieLabel {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
252
frontend/src/DiscoverMovie/DiscoverMovieFooter.js
Normal file
252
frontend/src/DiscoverMovie/DiscoverMovieFooter.js
Normal file
@ -0,0 +1,252 @@
|
|||||||
|
import _ from 'lodash';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { kinds } from 'Helpers/Props';
|
||||||
|
import SelectInput from 'Components/Form/SelectInput';
|
||||||
|
import AvailabilitySelectInput from 'Components/Form/AvailabilitySelectInput';
|
||||||
|
import QualityProfileSelectInputConnector from 'Components/Form/QualityProfileSelectInputConnector';
|
||||||
|
import RootFolderSelectInputConnector from 'Components/Form/RootFolderSelectInputConnector';
|
||||||
|
import SpinnerButton from 'Components/Link/SpinnerButton';
|
||||||
|
import PageContentFooter from 'Components/Page/PageContentFooter';
|
||||||
|
import ExcludeMovieModal from './Exclusion/ExcludeMovieModal';
|
||||||
|
import DiscoverMovieFooterLabel from './DiscoverMovieFooterLabel';
|
||||||
|
import styles from './DiscoverMovieFooter.css';
|
||||||
|
|
||||||
|
class DiscoverMovieFooter extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
const {
|
||||||
|
defaultMonitor,
|
||||||
|
defaultQualityProfileId,
|
||||||
|
defaultMinimumAvailability,
|
||||||
|
defaultRootFolderPath
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
monitor: defaultMonitor,
|
||||||
|
qualityProfileId: defaultQualityProfileId,
|
||||||
|
minimumAvailability: defaultMinimumAvailability,
|
||||||
|
rootFolderPath: defaultRootFolderPath,
|
||||||
|
isExcludeMovieModalOpen: false,
|
||||||
|
destinationRootFolder: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
const {
|
||||||
|
defaultMonitor,
|
||||||
|
defaultQualityProfileId,
|
||||||
|
defaultMinimumAvailability,
|
||||||
|
defaultRootFolderPath
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
monitor,
|
||||||
|
qualityProfileId,
|
||||||
|
minimumAvailability,
|
||||||
|
rootFolderPath
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const newState = {};
|
||||||
|
|
||||||
|
if (monitor !== defaultMonitor) {
|
||||||
|
newState.monitor = defaultMonitor;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (qualityProfileId !== defaultQualityProfileId) {
|
||||||
|
newState.qualityProfileId = defaultQualityProfileId;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (minimumAvailability !== defaultMinimumAvailability) {
|
||||||
|
newState.minimumAvailability = defaultMinimumAvailability;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (rootFolderPath !== defaultRootFolderPath) {
|
||||||
|
newState.rootFolderPath = defaultRootFolderPath;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!_.isEmpty(newState)) {
|
||||||
|
this.setState(newState);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onExcludeSelectedPress = () => {
|
||||||
|
this.setState({ isExcludeMovieModalOpen: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
onExcludeMovieModalClose = () => {
|
||||||
|
this.setState({ isExcludeMovieModalOpen: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddMoviesPress = () => {
|
||||||
|
const {
|
||||||
|
monitor,
|
||||||
|
qualityProfileId,
|
||||||
|
minimumAvailability,
|
||||||
|
rootFolderPath
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const addOptions = {
|
||||||
|
monitor,
|
||||||
|
qualityProfileId,
|
||||||
|
minimumAvailability,
|
||||||
|
rootFolderPath
|
||||||
|
};
|
||||||
|
|
||||||
|
this.props.onAddMoviesPress({ addOptions });
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
selectedIds,
|
||||||
|
selectedCount,
|
||||||
|
isAdding,
|
||||||
|
isExcluding,
|
||||||
|
onInputChange
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
monitor,
|
||||||
|
qualityProfileId,
|
||||||
|
minimumAvailability,
|
||||||
|
rootFolderPath,
|
||||||
|
isExcludeMovieModalOpen
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const monitoredOptions = [
|
||||||
|
{ key: true, value: 'Monitored' },
|
||||||
|
{ key: false, value: 'Unmonitored' }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContentFooter>
|
||||||
|
<div className={styles.inputContainer}>
|
||||||
|
<DiscoverMovieFooterLabel
|
||||||
|
label="Monitor Movie"
|
||||||
|
isSaving={isAdding}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SelectInput
|
||||||
|
name="monitor"
|
||||||
|
value={monitor}
|
||||||
|
values={monitoredOptions}
|
||||||
|
isDisabled={!selectedCount}
|
||||||
|
onChange={onInputChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.inputContainer}>
|
||||||
|
<DiscoverMovieFooterLabel
|
||||||
|
label="Quality Profile"
|
||||||
|
isSaving={isAdding}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<QualityProfileSelectInputConnector
|
||||||
|
name="qualityProfileId"
|
||||||
|
value={qualityProfileId}
|
||||||
|
isDisabled={!selectedCount}
|
||||||
|
onChange={onInputChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.inputContainer}>
|
||||||
|
<DiscoverMovieFooterLabel
|
||||||
|
label="Minimum Availability"
|
||||||
|
isSaving={isAdding}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<AvailabilitySelectInput
|
||||||
|
name="minimumAvailability"
|
||||||
|
value={minimumAvailability}
|
||||||
|
isDisabled={!selectedCount}
|
||||||
|
onChange={onInputChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.inputContainer}>
|
||||||
|
<DiscoverMovieFooterLabel
|
||||||
|
label="Root Folder"
|
||||||
|
isSaving={isAdding}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<RootFolderSelectInputConnector
|
||||||
|
name="rootFolderPath"
|
||||||
|
value={rootFolderPath}
|
||||||
|
isDisabled={!selectedCount}
|
||||||
|
selectedValueOptions={{ includeFreeSpace: false }}
|
||||||
|
onChange={onInputChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.buttonContainer}>
|
||||||
|
<div className={styles.buttonContainerContent}>
|
||||||
|
<DiscoverMovieFooterLabel
|
||||||
|
label={`${selectedCount} Movie(s) Selected`}
|
||||||
|
isSaving={false}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className={styles.buttons}>
|
||||||
|
<div>
|
||||||
|
<SpinnerButton
|
||||||
|
className={styles.addSelectedButton}
|
||||||
|
kind={kinds.PRIMARY}
|
||||||
|
isSpinning={isAdding}
|
||||||
|
isDisabled={!selectedCount || isAdding}
|
||||||
|
onPress={this.onAddMoviesPress}
|
||||||
|
>
|
||||||
|
Add Movies
|
||||||
|
</SpinnerButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SpinnerButton
|
||||||
|
className={styles.excludeSelectedButton}
|
||||||
|
kind={kinds.DANGER}
|
||||||
|
isSpinning={isExcluding}
|
||||||
|
isDisabled={!selectedCount || isExcluding}
|
||||||
|
onPress={this.props.onExcludeMoviesPress}
|
||||||
|
>
|
||||||
|
Add Exclusion
|
||||||
|
</SpinnerButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ExcludeMovieModal
|
||||||
|
isOpen={isExcludeMovieModalOpen}
|
||||||
|
movieIds={selectedIds}
|
||||||
|
onModalClose={this.onExcludeMovieModalClose}
|
||||||
|
/>
|
||||||
|
</PageContentFooter>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
DiscoverMovieFooter.propTypes = {
|
||||||
|
selectedIds: PropTypes.arrayOf(PropTypes.number).isRequired,
|
||||||
|
selectedCount: PropTypes.number.isRequired,
|
||||||
|
isAdding: PropTypes.bool.isRequired,
|
||||||
|
isExcluding: PropTypes.bool.isRequired,
|
||||||
|
defaultMonitor: PropTypes.string.isRequired,
|
||||||
|
defaultQualityProfileId: PropTypes.number,
|
||||||
|
defaultMinimumAvailability: PropTypes.string,
|
||||||
|
defaultRootFolderPath: PropTypes.string,
|
||||||
|
onInputChange: PropTypes.func.isRequired,
|
||||||
|
onAddMoviesPress: PropTypes.func.isRequired,
|
||||||
|
onExcludeMoviesPress: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DiscoverMovieFooter;
|
72
frontend/src/DiscoverMovie/DiscoverMovieFooterConnector.js
Normal file
72
frontend/src/DiscoverMovie/DiscoverMovieFooterConnector.js
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import { setAddMovieDefault } from 'Store/Actions/discoverMovieActions';
|
||||||
|
import DiscoverMovieFooter from './DiscoverMovieFooter';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
(state) => state.discoverMovie,
|
||||||
|
(state) => state.settings.netImportExclusions,
|
||||||
|
(state, { selectedIds }) => selectedIds,
|
||||||
|
(discoverMovie, netImportExclusions, selectedIds) => {
|
||||||
|
const {
|
||||||
|
monitor: defaultMonitor,
|
||||||
|
qualityProfileId: defaultQualityProfileId,
|
||||||
|
minimumAvailability: defaultMinimumAvailability,
|
||||||
|
rootFolderPath: defaultRootFolderPath
|
||||||
|
} = discoverMovie.defaults;
|
||||||
|
|
||||||
|
const {
|
||||||
|
isAdding
|
||||||
|
} = discoverMovie;
|
||||||
|
|
||||||
|
const {
|
||||||
|
isSaving
|
||||||
|
} = netImportExclusions;
|
||||||
|
|
||||||
|
return {
|
||||||
|
selectedCount: selectedIds.length,
|
||||||
|
isAdding,
|
||||||
|
isExcluding: isSaving,
|
||||||
|
defaultMonitor,
|
||||||
|
defaultQualityProfileId,
|
||||||
|
defaultMinimumAvailability,
|
||||||
|
defaultRootFolderPath
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapDispatchToProps = {
|
||||||
|
setAddMovieDefault
|
||||||
|
};
|
||||||
|
|
||||||
|
class DiscoverMovieFooterConnector extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onInputChange = ({ name, value }) => {
|
||||||
|
this.props.setAddMovieDefault({ [name]: value });
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<DiscoverMovieFooter
|
||||||
|
{...this.props}
|
||||||
|
onInputChange={this.onInputChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
DiscoverMovieFooterConnector.propTypes = {
|
||||||
|
setAddMovieDefault: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps, mapDispatchToProps)(DiscoverMovieFooterConnector);
|
8
frontend/src/DiscoverMovie/DiscoverMovieFooterLabel.css
Normal file
8
frontend/src/DiscoverMovie/DiscoverMovieFooterLabel.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.label {
|
||||||
|
margin-bottom: 3px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.savingIcon {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
40
frontend/src/DiscoverMovie/DiscoverMovieFooterLabel.js
Normal file
40
frontend/src/DiscoverMovie/DiscoverMovieFooterLabel.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
|
import SpinnerIcon from 'Components/SpinnerIcon';
|
||||||
|
import styles from './DiscoverMovieFooterLabel.css';
|
||||||
|
|
||||||
|
function DiscoverMovieFooterLabel(props) {
|
||||||
|
const {
|
||||||
|
className,
|
||||||
|
label,
|
||||||
|
isSaving
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
{label}
|
||||||
|
|
||||||
|
{
|
||||||
|
isSaving &&
|
||||||
|
<SpinnerIcon
|
||||||
|
className={styles.savingIcon}
|
||||||
|
name={icons.SPINNER}
|
||||||
|
isSpinning={true}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
DiscoverMovieFooterLabel.propTypes = {
|
||||||
|
className: PropTypes.string.isRequired,
|
||||||
|
label: PropTypes.string.isRequired,
|
||||||
|
isSaving: PropTypes.bool.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
DiscoverMovieFooterLabel.defaultProps = {
|
||||||
|
className: styles.label
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DiscoverMovieFooterLabel;
|
33
frontend/src/DiscoverMovie/Exclusion/ExcludeMovieModal.js
Normal file
33
frontend/src/DiscoverMovie/Exclusion/ExcludeMovieModal.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import { sizes } from 'Helpers/Props';
|
||||||
|
import Modal from 'Components/Modal/Modal';
|
||||||
|
import ExcludeMovieModalContentConnector from './ExcludeMovieModalContentConnector';
|
||||||
|
|
||||||
|
function ExcludeMovieModal(props) {
|
||||||
|
const {
|
||||||
|
isOpen,
|
||||||
|
onModalClose,
|
||||||
|
...otherProps
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
isOpen={isOpen}
|
||||||
|
size={sizes.MEDIUM}
|
||||||
|
onModalClose={onModalClose}
|
||||||
|
>
|
||||||
|
<ExcludeMovieModalContentConnector
|
||||||
|
{...otherProps}
|
||||||
|
onModalClose={onModalClose}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ExcludeMovieModal.propTypes = {
|
||||||
|
isOpen: PropTypes.bool.isRequired,
|
||||||
|
onModalClose: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ExcludeMovieModal;
|
@ -0,0 +1,12 @@
|
|||||||
|
.pathContainer {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pathIcon {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deleteFilesMessage {
|
||||||
|
margin-top: 20px;
|
||||||
|
color: $dangerColor;
|
||||||
|
}
|
@ -0,0 +1,69 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { kinds } from 'Helpers/Props';
|
||||||
|
import Button from 'Components/Link/Button';
|
||||||
|
import ModalContent from 'Components/Modal/ModalContent';
|
||||||
|
import ModalHeader from 'Components/Modal/ModalHeader';
|
||||||
|
import ModalBody from 'Components/Modal/ModalBody';
|
||||||
|
import ModalFooter from 'Components/Modal/ModalFooter';
|
||||||
|
import styles from './ExcludeMovieModalContent.css';
|
||||||
|
|
||||||
|
class ExcludeMovieModalContent extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onExcludeMovieConfirmed = () => {
|
||||||
|
this.props.onExcludePress();
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
tmdbId,
|
||||||
|
title,
|
||||||
|
onModalClose
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalContent
|
||||||
|
onModalClose={onModalClose}
|
||||||
|
>
|
||||||
|
<ModalHeader>
|
||||||
|
Exclude - {title} ({tmdbId})
|
||||||
|
</ModalHeader>
|
||||||
|
|
||||||
|
<ModalBody>
|
||||||
|
<div className={styles.pathContainer}>
|
||||||
|
Exclude {title}? This will prevent Radarr from adding automatically via list sync.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
<Button onPress={onModalClose}>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
kind={kinds.DANGER}
|
||||||
|
onPress={this.onExcludeMovieConfirmed}
|
||||||
|
>
|
||||||
|
Exlude
|
||||||
|
</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</ModalContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ExcludeMovieModalContent.propTypes = {
|
||||||
|
tmdbId: PropTypes.number.isRequired,
|
||||||
|
title: PropTypes.string.isRequired,
|
||||||
|
onExcludePress: PropTypes.func.isRequired,
|
||||||
|
onModalClose: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ExcludeMovieModalContent;
|
@ -0,0 +1,47 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { addNetImportExclusions } from 'Store/Actions/discoverMovieActions';
|
||||||
|
import ExcludeMovieModalContent from './ExcludeMovieModalContent';
|
||||||
|
|
||||||
|
const mapDispatchToProps = {
|
||||||
|
addNetImportExclusions
|
||||||
|
};
|
||||||
|
|
||||||
|
class ExcludeMovieModalContentConnector extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onExcludePress = () => {
|
||||||
|
this.props.addNetImportExclusions([{
|
||||||
|
tmdbId: this.props.tmdbId,
|
||||||
|
movieTitle: this.props.title,
|
||||||
|
movieYear: this.props.year
|
||||||
|
}]);
|
||||||
|
|
||||||
|
this.props.onModalClose(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<ExcludeMovieModalContent
|
||||||
|
{...this.props}
|
||||||
|
onExcludePress={this.onExcludePress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ExcludeMovieModalContentConnector.propTypes = {
|
||||||
|
tmdbId: PropTypes.number.isRequired,
|
||||||
|
title: PropTypes.string.isRequired,
|
||||||
|
year: PropTypes.number.isRequired,
|
||||||
|
onModalClose: PropTypes.func.isRequired,
|
||||||
|
addNetImportExclusions: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default connect(undefined, mapDispatchToProps)(ExcludeMovieModalContentConnector);
|
@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { align } from 'Helpers/Props';
|
import { align } from 'Helpers/Props';
|
||||||
import FilterMenu from 'Components/Menu/FilterMenu';
|
import FilterMenu from 'Components/Menu/FilterMenu';
|
||||||
import AddListMovieFilterModalConnector from 'AddMovie/AddListMovie/AddListMovieFilterModalConnector';
|
import AddListMovieFilterModalConnector from 'DiscoverMovie/AddListMovieFilterModalConnector';
|
||||||
|
|
||||||
function AddListMovieFilterMenu(props) {
|
function AddListMovieFilterMenu(props) {
|
||||||
const {
|
const {
|
@ -63,6 +63,24 @@ function AddListMovieSortMenu(props) {
|
|||||||
>
|
>
|
||||||
Physical Release
|
Physical Release
|
||||||
</SortMenuItem>
|
</SortMenuItem>
|
||||||
|
|
||||||
|
<SortMenuItem
|
||||||
|
name="ratings"
|
||||||
|
sortKey={sortKey}
|
||||||
|
sortDirection={sortDirection}
|
||||||
|
onPress={onSortSelect}
|
||||||
|
>
|
||||||
|
Rating
|
||||||
|
</SortMenuItem>
|
||||||
|
|
||||||
|
<SortMenuItem
|
||||||
|
name="certification"
|
||||||
|
sortKey={sortKey}
|
||||||
|
sortDirection={sortDirection}
|
||||||
|
onPress={onSortSelect}
|
||||||
|
>
|
||||||
|
Certification
|
||||||
|
</SortMenuItem>
|
||||||
</MenuContent>
|
</MenuContent>
|
||||||
</SortMenu>
|
</SortMenu>
|
||||||
);
|
);
|
11
frontend/src/DiscoverMovie/NoDiscoverMovie.css
Normal file
11
frontend/src/DiscoverMovie/NoDiscoverMovie.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
.message {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonContainer {
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
60
frontend/src/DiscoverMovie/NoDiscoverMovie.js
Normal file
60
frontend/src/DiscoverMovie/NoDiscoverMovie.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import { kinds } from 'Helpers/Props';
|
||||||
|
import Button from 'Components/Link/Button';
|
||||||
|
import styles from './NoDiscoverMovie.css';
|
||||||
|
|
||||||
|
function NoDiscoverMovie(props) {
|
||||||
|
const { totalItems } = props;
|
||||||
|
|
||||||
|
if (totalItems > 0) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className={styles.message}>
|
||||||
|
All movies are hidden due to the applied filter.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className={styles.message}>
|
||||||
|
No list items or recommendations found, to get started you'll want to add a new movie, import some existing ones, or add a list.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.buttonContainer}>
|
||||||
|
<Button
|
||||||
|
to="/add/import"
|
||||||
|
kind={kinds.PRIMARY}
|
||||||
|
>
|
||||||
|
Import Existing Movies
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.buttonContainer}>
|
||||||
|
<Button
|
||||||
|
to="/add/new"
|
||||||
|
kind={kinds.PRIMARY}
|
||||||
|
>
|
||||||
|
Add New Movie
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.buttonContainer}>
|
||||||
|
<Button
|
||||||
|
to="/settings/netimports"
|
||||||
|
kind={kinds.PRIMARY}
|
||||||
|
>
|
||||||
|
Add List
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
NoDiscoverMovie.propTypes = {
|
||||||
|
totalItems: PropTypes.number.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NoDiscoverMovie;
|
@ -1,13 +1,5 @@
|
|||||||
$hoverScale: 1.05;
|
$hoverScale: 1.05;
|
||||||
|
|
||||||
.container {
|
|
||||||
&:hover {
|
|
||||||
.content {
|
|
||||||
background-color: $tableRowHoverBackgroundColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
@ -17,6 +9,13 @@ $hoverScale: 1.05;
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.editorSelect {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 5px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
.posterContainer {
|
.posterContainer {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@ -33,17 +32,10 @@ $hoverScale: 1.05;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ended {
|
.exclusionIcon {
|
||||||
position: absolute;
|
margin-left: 10px;
|
||||||
top: 0;
|
color: $dangerColor;
|
||||||
right: 0;
|
pointer-events: all;
|
||||||
z-index: 1;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width: 0 25px 25px 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent $dangerColor transparent transparent;
|
|
||||||
color: $white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
@ -59,8 +51,6 @@ $hoverScale: 1.05;
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
font-weight: 300;
|
|
||||||
font-size: 30px;
|
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
}
|
}
|
||||||
|
|
@ -1,11 +1,16 @@
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import TextTruncate from 'react-text-truncate';
|
import TextTruncate from 'react-text-truncate';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
|
import Icon from 'Components/Icon';
|
||||||
|
import IconButton from 'Components/Link/IconButton';
|
||||||
import dimensions from 'Styles/Variables/dimensions';
|
import dimensions from 'Styles/Variables/dimensions';
|
||||||
import fonts from 'Styles/Variables/fonts';
|
import fonts from 'Styles/Variables/fonts';
|
||||||
|
import CheckInput from 'Components/Form/CheckInput';
|
||||||
import MoviePoster from 'Movie/MoviePoster';
|
import MoviePoster from 'Movie/MoviePoster';
|
||||||
import Link from 'Components/Link/Link';
|
import Link from 'Components/Link/Link';
|
||||||
import AddNewMovieModal from 'AddMovie/AddNewMovie/AddNewMovieModal';
|
import AddNewDiscoverMovieModal from 'DiscoverMovie/AddNewDiscoverMovieModal';
|
||||||
|
import ExcludeMovieModal from 'DiscoverMovie/Exclusion/ExcludeMovieModal';
|
||||||
import styles from './AddListMovieOverview.css';
|
import styles from './AddListMovieOverview.css';
|
||||||
|
|
||||||
const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
|
const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
|
||||||
@ -32,7 +37,8 @@ class AddListMovieOverview extends Component {
|
|||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
isNewAddMovieModalOpen: false
|
isNewAddMovieModalOpen: false,
|
||||||
|
isExcludeMovieModalOpen: false
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,6 +53,23 @@ class AddListMovieOverview extends Component {
|
|||||||
this.setState({ isNewAddMovieModalOpen: false });
|
this.setState({ isNewAddMovieModalOpen: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onExcludeMoviePress = () => {
|
||||||
|
this.setState({ isExcludeMovieModalOpen: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
onExcludeMovieModalClose = () => {
|
||||||
|
this.setState({ isExcludeMovieModalOpen: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange = ({ value, shiftKey }) => {
|
||||||
|
const {
|
||||||
|
tmdbId,
|
||||||
|
onSelectedChange
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
onSelectedChange({ id: tmdbId, value, shiftKey });
|
||||||
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
// Render
|
// Render
|
||||||
|
|
||||||
@ -63,11 +86,14 @@ class AddListMovieOverview extends Component {
|
|||||||
posterHeight,
|
posterHeight,
|
||||||
rowHeight,
|
rowHeight,
|
||||||
isSmallScreen,
|
isSmallScreen,
|
||||||
isExistingMovie
|
isExisting,
|
||||||
|
isExcluded,
|
||||||
|
isSelected
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
isNewAddMovieModalOpen
|
isNewAddMovieModalOpen,
|
||||||
|
isExcludeMovieModalOpen
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
const elementStyle = {
|
const elementStyle = {
|
||||||
@ -75,19 +101,24 @@ class AddListMovieOverview extends Component {
|
|||||||
height: `${posterHeight}px`
|
height: `${posterHeight}px`
|
||||||
};
|
};
|
||||||
|
|
||||||
const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
|
const linkProps = isExisting ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
|
||||||
|
|
||||||
const contentHeight = getContentHeight(rowHeight, isSmallScreen);
|
const contentHeight = getContentHeight(rowHeight, isSmallScreen);
|
||||||
const overviewHeight = contentHeight - titleRowHeight;
|
const overviewHeight = contentHeight - titleRowHeight;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<Link
|
<div className={styles.content}>
|
||||||
className={styles.content}
|
|
||||||
{...linkProps}
|
|
||||||
>
|
|
||||||
<div className={styles.poster}>
|
<div className={styles.poster}>
|
||||||
<div className={styles.posterContainer}>
|
<div className={styles.posterContainer}>
|
||||||
|
<div className={styles.editorSelect}>
|
||||||
|
<CheckInput
|
||||||
|
className={styles.checkInput}
|
||||||
|
name={tmdbId.toString()}
|
||||||
|
value={isSelected}
|
||||||
|
onChange={this.onChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<MoviePoster
|
<MoviePoster
|
||||||
className={styles.poster}
|
className={styles.poster}
|
||||||
@ -102,7 +133,30 @@ class AddListMovieOverview extends Component {
|
|||||||
|
|
||||||
<div className={styles.info} style={{ maxHeight: contentHeight }}>
|
<div className={styles.info} style={{ maxHeight: contentHeight }}>
|
||||||
<div className={styles.titleRow}>
|
<div className={styles.titleRow}>
|
||||||
{title} ({year})
|
<Link
|
||||||
|
className={styles.title}
|
||||||
|
{...linkProps}
|
||||||
|
>
|
||||||
|
{title}({year})
|
||||||
|
{
|
||||||
|
isExcluded &&
|
||||||
|
<Icon
|
||||||
|
className={styles.exclusionIcon}
|
||||||
|
name={icons.DANGER}
|
||||||
|
size={36}
|
||||||
|
title='Movie is on Net Import Exclusion List'
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className={styles.actions}>
|
||||||
|
<IconButton
|
||||||
|
name={icons.REMOVE}
|
||||||
|
title={isExcluded ? 'Movie already Excluded' : 'Exclude Movie'}
|
||||||
|
onPress={this.onExcludeMoviePress}
|
||||||
|
isDisabled={isExcluded}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.details}>
|
<div className={styles.details}>
|
||||||
@ -113,10 +167,10 @@ class AddListMovieOverview extends Component {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</div>
|
||||||
|
|
||||||
<AddNewMovieModal
|
<AddNewDiscoverMovieModal
|
||||||
isOpen={isNewAddMovieModalOpen && !isExistingMovie}
|
isOpen={isNewAddMovieModalOpen && !isExisting}
|
||||||
tmdbId={tmdbId}
|
tmdbId={tmdbId}
|
||||||
title={title}
|
title={title}
|
||||||
year={year}
|
year={year}
|
||||||
@ -125,6 +179,14 @@ class AddListMovieOverview extends Component {
|
|||||||
images={images}
|
images={images}
|
||||||
onModalClose={this.onAddMovieModalClose}
|
onModalClose={this.onAddMovieModalClose}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<ExcludeMovieModal
|
||||||
|
isOpen={isExcludeMovieModalOpen}
|
||||||
|
tmdbId={tmdbId}
|
||||||
|
title={title}
|
||||||
|
year={year}
|
||||||
|
onModalClose={this.onExcludeMovieModalClose}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -136,7 +198,6 @@ AddListMovieOverview.propTypes = {
|
|||||||
folder: PropTypes.string.isRequired,
|
folder: PropTypes.string.isRequired,
|
||||||
year: PropTypes.number.isRequired,
|
year: PropTypes.number.isRequired,
|
||||||
overview: PropTypes.string.isRequired,
|
overview: PropTypes.string.isRequired,
|
||||||
monitored: PropTypes.bool.isRequired,
|
|
||||||
status: PropTypes.string.isRequired,
|
status: PropTypes.string.isRequired,
|
||||||
titleSlug: PropTypes.string.isRequired,
|
titleSlug: PropTypes.string.isRequired,
|
||||||
images: PropTypes.arrayOf(PropTypes.object).isRequired,
|
images: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
@ -149,8 +210,10 @@ AddListMovieOverview.propTypes = {
|
|||||||
longDateFormat: PropTypes.string.isRequired,
|
longDateFormat: PropTypes.string.isRequired,
|
||||||
timeFormat: PropTypes.string.isRequired,
|
timeFormat: PropTypes.string.isRequired,
|
||||||
isSmallScreen: PropTypes.bool.isRequired,
|
isSmallScreen: PropTypes.bool.isRequired,
|
||||||
isExistingMovie: PropTypes.bool.isRequired,
|
isExisting: PropTypes.bool.isRequired,
|
||||||
isExclusionMovie: PropTypes.bool.isRequired
|
isExcluded: PropTypes.bool.isRequired,
|
||||||
|
isSelected: PropTypes.bool,
|
||||||
|
onSelectedChange: PropTypes.func.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AddListMovieOverview;
|
export default AddListMovieOverview;
|
@ -1,19 +1,13 @@
|
|||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import createExistingMovieSelector from 'Store/Selectors/createExistingMovieSelector';
|
|
||||||
import createExclusionMovieSelector from 'Store/Selectors/createExclusionMovieSelector';
|
|
||||||
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||||
import AddListMovieOverview from './AddListMovieOverview';
|
import AddListMovieOverview from './AddListMovieOverview';
|
||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
createExistingMovieSelector(),
|
|
||||||
createExclusionMovieSelector(),
|
|
||||||
createDimensionsSelector(),
|
createDimensionsSelector(),
|
||||||
(isExistingMovie, isExclusionMovie, dimensions) => {
|
(dimensions) => {
|
||||||
return {
|
return {
|
||||||
isExistingMovie,
|
|
||||||
isExclusionMovie,
|
|
||||||
isSmallScreen: dimensions.isSmallScreen
|
isSmallScreen: dimensions.isSmallScreen
|
||||||
};
|
};
|
||||||
}
|
}
|
@ -0,0 +1,11 @@
|
|||||||
|
.grid {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
&:hover {
|
||||||
|
.content {
|
||||||
|
background-color: $tableRowHoverBackgroundColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Grid, WindowScroller } from 'react-virtualized';
|
import { Grid, WindowScroller } from 'react-virtualized';
|
||||||
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
|
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
|
||||||
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItems';
|
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
|
||||||
import dimensions from 'Styles/Variables/dimensions';
|
import dimensions from 'Styles/Variables/dimensions';
|
||||||
import Measure from 'Components/Measure';
|
import Measure from 'Components/Measure';
|
||||||
import AddListMovieItemConnector from 'AddMovie/AddListMovie/AddListMovieItemConnector';
|
import AddListMovieItemConnector from 'DiscoverMovie/AddListMovieItemConnector';
|
||||||
import AddListMovieOverviewConnector from './AddListMovieOverviewConnector';
|
import AddListMovieOverviewConnector from './AddListMovieOverviewConnector';
|
||||||
import styles from './AddListMovieOverviews.css';
|
import styles from './AddListMovieOverviews.css';
|
||||||
|
|
||||||
@ -81,7 +81,7 @@ class AddListMovieOverviews extends Component {
|
|||||||
if (this._grid &&
|
if (this._grid &&
|
||||||
(prevState.width !== width ||
|
(prevState.width !== width ||
|
||||||
prevState.rowHeight !== rowHeight ||
|
prevState.rowHeight !== rowHeight ||
|
||||||
hasDifferentItemsOrOrder(prevProps.items, items))) {
|
hasDifferentItemsOrOrder(prevProps.items, items, 'tmdbId'))) {
|
||||||
// recomputeGridSize also forces Grid to discard its cache of rendered cells
|
// recomputeGridSize also forces Grid to discard its cache of rendered cells
|
||||||
this._grid.recomputeGridSize();
|
this._grid.recomputeGridSize();
|
||||||
}
|
}
|
||||||
@ -133,7 +133,9 @@ class AddListMovieOverviews extends Component {
|
|||||||
shortDateFormat,
|
shortDateFormat,
|
||||||
longDateFormat,
|
longDateFormat,
|
||||||
timeFormat,
|
timeFormat,
|
||||||
isSmallScreen
|
isSmallScreen,
|
||||||
|
selectedState,
|
||||||
|
onSelectedChange
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -155,7 +157,7 @@ class AddListMovieOverviews extends Component {
|
|||||||
style={style}
|
style={style}
|
||||||
>
|
>
|
||||||
<AddListMovieItemConnector
|
<AddListMovieItemConnector
|
||||||
key={movie.id}
|
key={movie.tmdbId}
|
||||||
component={AddListMovieOverviewConnector}
|
component={AddListMovieOverviewConnector}
|
||||||
sortKey={sortKey}
|
sortKey={sortKey}
|
||||||
posterWidth={posterWidth}
|
posterWidth={posterWidth}
|
||||||
@ -168,6 +170,8 @@ class AddListMovieOverviews extends Component {
|
|||||||
timeFormat={timeFormat}
|
timeFormat={timeFormat}
|
||||||
isSmallScreen={isSmallScreen}
|
isSmallScreen={isSmallScreen}
|
||||||
movieId={movie.tmdbId}
|
movieId={movie.tmdbId}
|
||||||
|
isSelected={selectedState[movie.tmdbId]}
|
||||||
|
onSelectedChange={onSelectedChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -187,7 +191,8 @@ class AddListMovieOverviews extends Component {
|
|||||||
const {
|
const {
|
||||||
isSmallScreen,
|
isSmallScreen,
|
||||||
scroller,
|
scroller,
|
||||||
items
|
items,
|
||||||
|
selectedState
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -224,6 +229,7 @@ class AddListMovieOverviews extends Component {
|
|||||||
scrollTop={scrollTop}
|
scrollTop={scrollTop}
|
||||||
overscanRowCount={2}
|
overscanRowCount={2}
|
||||||
cellRenderer={this.cellRenderer}
|
cellRenderer={this.cellRenderer}
|
||||||
|
selectedState={selectedState}
|
||||||
scrollToAlignment={'start'}
|
scrollToAlignment={'start'}
|
||||||
isScrollingOptout={true}
|
isScrollingOptout={true}
|
||||||
/>
|
/>
|
||||||
@ -247,7 +253,9 @@ AddListMovieOverviews.propTypes = {
|
|||||||
shortDateFormat: PropTypes.string.isRequired,
|
shortDateFormat: PropTypes.string.isRequired,
|
||||||
longDateFormat: PropTypes.string.isRequired,
|
longDateFormat: PropTypes.string.isRequired,
|
||||||
isSmallScreen: PropTypes.bool.isRequired,
|
isSmallScreen: PropTypes.bool.isRequired,
|
||||||
timeFormat: PropTypes.string.isRequired
|
timeFormat: PropTypes.string.isRequired,
|
||||||
|
selectedState: PropTypes.object.isRequired,
|
||||||
|
onSelectedChange: PropTypes.func.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AddListMovieOverviews;
|
export default AddListMovieOverviews;
|
@ -6,7 +6,7 @@ import AddListMovieOverviews from './AddListMovieOverviews';
|
|||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
(state) => state.addMovie.overviewOptions,
|
(state) => state.discoverMovie.overviewOptions,
|
||||||
createUISettingsSelector(),
|
createUISettingsSelector(),
|
||||||
createDimensionsSelector(),
|
createDimensionsSelector(),
|
||||||
(overviewOptions, uiSettings, dimensions) => {
|
(overviewOptions, uiSettings, dimensions) => {
|
@ -1,13 +1,13 @@
|
|||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import { setListMovieOverviewOption } from 'Store/Actions/addMovieActions';
|
import { setListMovieOverviewOption } from 'Store/Actions/discoverMovieActions';
|
||||||
import AddListMovieOverviewOptionsModalContent from './AddListMovieOverviewOptionsModalContent';
|
import AddListMovieOverviewOptionsModalContent from './AddListMovieOverviewOptionsModalContent';
|
||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
(state) => state.addMovie,
|
(state) => state.discoverMovie,
|
||||||
(addMovie) => {
|
(discoverMovie) => {
|
||||||
return addMovie.overviewOptions;
|
return discoverMovie.overviewOptions;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
@ -1,9 +1,5 @@
|
|||||||
$hoverScale: 1.05;
|
$hoverScale: 1.05;
|
||||||
|
|
||||||
.container {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
transition: all 200ms ease-in;
|
transition: all 200ms ease-in;
|
||||||
|
|
||||||
@ -54,10 +50,11 @@ $hoverScale: 1.05;
|
|||||||
font-size: $smallFontSize;
|
font-size: $smallFontSize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ended {
|
.excluded {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-width: 0 25px 25px 0;
|
border-width: 0 25px 25px 0;
|
||||||
@ -79,6 +76,13 @@ $hoverScale: 1.05;
|
|||||||
transition: opacity 0;
|
transition: opacity 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.editorSelect {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
.action {
|
.action {
|
||||||
composes: button from '~Components/Link/IconButton.css';
|
composes: button from '~Components/Link/IconButton.css';
|
||||||
|
|
@ -1,8 +1,13 @@
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
|
import IconButton from 'Components/Link/IconButton';
|
||||||
|
import CheckInput from 'Components/Form/CheckInput';
|
||||||
|
import Label from 'Components/Label';
|
||||||
import Link from 'Components/Link/Link';
|
import Link from 'Components/Link/Link';
|
||||||
import MoviePoster from 'Movie/MoviePoster';
|
import MoviePoster from 'Movie/MoviePoster';
|
||||||
import AddNewMovieModal from 'AddMovie/AddNewMovie/AddNewMovieModal';
|
import AddNewDiscoverMovieModal from 'DiscoverMovie/AddNewDiscoverMovieModal';
|
||||||
|
import ExcludeMovieModal from 'DiscoverMovie/Exclusion/ExcludeMovieModal';
|
||||||
import styles from './AddListMoviePoster.css';
|
import styles from './AddListMoviePoster.css';
|
||||||
|
|
||||||
class AddListMoviePoster extends Component {
|
class AddListMoviePoster extends Component {
|
||||||
@ -15,7 +20,8 @@ class AddListMoviePoster extends Component {
|
|||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
hasPosterError: false,
|
hasPosterError: false,
|
||||||
isNewAddMovieModalOpen: false
|
isNewAddMovieModalOpen: false,
|
||||||
|
isExcludeMovieModalOpen: false
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -30,6 +36,14 @@ class AddListMoviePoster extends Component {
|
|||||||
this.setState({ isNewAddMovieModalOpen: false });
|
this.setState({ isNewAddMovieModalOpen: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onExcludeMoviePress = () => {
|
||||||
|
this.setState({ isExcludeMovieModalOpen: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
onExcludeMovieModalClose = () => {
|
||||||
|
this.setState({ isExcludeMovieModalOpen: false });
|
||||||
|
}
|
||||||
|
|
||||||
onPosterLoad = () => {
|
onPosterLoad = () => {
|
||||||
if (this.state.hasPosterError) {
|
if (this.state.hasPosterError) {
|
||||||
this.setState({ hasPosterError: false });
|
this.setState({ hasPosterError: false });
|
||||||
@ -42,6 +56,15 @@ class AddListMoviePoster extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onChange = ({ value, shiftKey }) => {
|
||||||
|
const {
|
||||||
|
tmdbId,
|
||||||
|
onSelectedChange
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
onSelectedChange({ id: tmdbId, value, shiftKey });
|
||||||
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
// Render
|
// Render
|
||||||
|
|
||||||
@ -52,21 +75,23 @@ class AddListMoviePoster extends Component {
|
|||||||
year,
|
year,
|
||||||
overview,
|
overview,
|
||||||
folder,
|
folder,
|
||||||
status,
|
|
||||||
titleSlug,
|
titleSlug,
|
||||||
images,
|
images,
|
||||||
posterWidth,
|
posterWidth,
|
||||||
posterHeight,
|
posterHeight,
|
||||||
showTitle,
|
showTitle,
|
||||||
isExistingMovie
|
isExisting,
|
||||||
|
isExcluded,
|
||||||
|
isSelected
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
hasPosterError,
|
hasPosterError,
|
||||||
isNewAddMovieModalOpen
|
isNewAddMovieModalOpen,
|
||||||
|
isExcludeMovieModalOpen
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
|
const linkProps = isExisting ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
|
||||||
|
|
||||||
const elementStyle = {
|
const elementStyle = {
|
||||||
width: `${posterWidth}px`,
|
width: `${posterWidth}px`,
|
||||||
@ -77,10 +102,31 @@ class AddListMoviePoster extends Component {
|
|||||||
<div className={styles.content}>
|
<div className={styles.content}>
|
||||||
<div className={styles.posterContainer}>
|
<div className={styles.posterContainer}>
|
||||||
{
|
{
|
||||||
status === 'ended' &&
|
<div className={styles.editorSelect}>
|
||||||
|
<CheckInput
|
||||||
|
className={styles.checkInput}
|
||||||
|
name={tmdbId.toString()}
|
||||||
|
value={isSelected}
|
||||||
|
onChange={this.onChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<Label className={styles.controls}>
|
||||||
|
<IconButton
|
||||||
|
className={styles.action}
|
||||||
|
name={icons.REMOVE}
|
||||||
|
title={isExcluded ? 'Movie already Excluded' : 'Exclude Movie'}
|
||||||
|
onPress={this.onExcludeMoviePress}
|
||||||
|
isDisabled={isExcluded}
|
||||||
|
/>
|
||||||
|
</Label>
|
||||||
|
|
||||||
|
{
|
||||||
|
isExcluded &&
|
||||||
<div
|
<div
|
||||||
className={styles.ended}
|
className={styles.excluded}
|
||||||
title="Ended"
|
title="Exluded"
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -116,8 +162,8 @@ class AddListMoviePoster extends Component {
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
<AddNewMovieModal
|
<AddNewDiscoverMovieModal
|
||||||
isOpen={isNewAddMovieModalOpen && !isExistingMovie}
|
isOpen={isNewAddMovieModalOpen && !isExisting}
|
||||||
tmdbId={tmdbId}
|
tmdbId={tmdbId}
|
||||||
title={title}
|
title={title}
|
||||||
year={year}
|
year={year}
|
||||||
@ -126,6 +172,14 @@ class AddListMoviePoster extends Component {
|
|||||||
images={images}
|
images={images}
|
||||||
onModalClose={this.onAddMovieModalClose}
|
onModalClose={this.onAddMovieModalClose}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<ExcludeMovieModal
|
||||||
|
isOpen={isExcludeMovieModalOpen}
|
||||||
|
tmdbId={tmdbId}
|
||||||
|
title={title}
|
||||||
|
year={year}
|
||||||
|
onModalClose={this.onExcludeMovieModalClose}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -146,14 +200,10 @@ AddListMoviePoster.propTypes = {
|
|||||||
showRelativeDates: PropTypes.bool.isRequired,
|
showRelativeDates: PropTypes.bool.isRequired,
|
||||||
shortDateFormat: PropTypes.string.isRequired,
|
shortDateFormat: PropTypes.string.isRequired,
|
||||||
timeFormat: PropTypes.string.isRequired,
|
timeFormat: PropTypes.string.isRequired,
|
||||||
isExistingMovie: PropTypes.bool.isRequired,
|
isExisting: PropTypes.bool.isRequired,
|
||||||
isExclusionMovie: PropTypes.bool.isRequired
|
isExcluded: PropTypes.bool.isRequired,
|
||||||
};
|
isSelected: PropTypes.bool,
|
||||||
|
onSelectedChange: PropTypes.func.isRequired
|
||||||
AddListMoviePoster.defaultProps = {
|
|
||||||
statistics: {
|
|
||||||
movieFileCount: 0
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AddListMoviePoster;
|
export default AddListMoviePoster;
|
@ -1,19 +1,13 @@
|
|||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import createExistingMovieSelector from 'Store/Selectors/createExistingMovieSelector';
|
|
||||||
import createExclusionMovieSelector from 'Store/Selectors/createExclusionMovieSelector';
|
|
||||||
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||||
import AddListMoviePoster from './AddListMoviePoster';
|
import AddListMoviePoster from './AddListMoviePoster';
|
||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
createExistingMovieSelector(),
|
|
||||||
createExclusionMovieSelector(),
|
|
||||||
createDimensionsSelector(),
|
createDimensionsSelector(),
|
||||||
(isExistingMovie, isExclusionMovie, dimensions) => {
|
( dimensions) => {
|
||||||
return {
|
return {
|
||||||
isExistingMovie,
|
|
||||||
isExclusionMovie,
|
|
||||||
isSmallScreen: dimensions.isSmallScreen
|
isSmallScreen: dimensions.isSmallScreen
|
||||||
};
|
};
|
||||||
}
|
}
|
@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Grid, WindowScroller } from 'react-virtualized';
|
import { Grid, WindowScroller } from 'react-virtualized';
|
||||||
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
|
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
|
||||||
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItems';
|
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
|
||||||
import dimensions from 'Styles/Variables/dimensions';
|
import dimensions from 'Styles/Variables/dimensions';
|
||||||
import Measure from 'Components/Measure';
|
import Measure from 'Components/Measure';
|
||||||
import AddListMovieItemConnector from 'AddMovie/AddListMovie/AddListMovieItemConnector';
|
import AddListMovieItemConnector from 'DiscoverMovie/AddListMovieItemConnector';
|
||||||
import AddListMoviePosterConnector from './AddListMoviePosterConnector';
|
import AddListMoviePosterConnector from './AddListMoviePosterConnector';
|
||||||
import styles from './AddListMoviePosters.css';
|
import styles from './AddListMoviePosters.css';
|
||||||
|
|
||||||
@ -36,9 +36,7 @@ function calculateColumnWidth(width, posterSize, isSmallScreen) {
|
|||||||
function calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions) {
|
function calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions) {
|
||||||
const {
|
const {
|
||||||
detailedProgressBar,
|
detailedProgressBar,
|
||||||
showTitle,
|
showTitle
|
||||||
showMonitored,
|
|
||||||
showQualityProfile
|
|
||||||
} = posterOptions;
|
} = posterOptions;
|
||||||
|
|
||||||
const nextAiringHeight = 19;
|
const nextAiringHeight = 19;
|
||||||
@ -54,14 +52,6 @@ function calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions)
|
|||||||
heights.push(19);
|
heights.push(19);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (showMonitored) {
|
|
||||||
heights.push(19);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (showQualityProfile) {
|
|
||||||
heights.push(19);
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (sortKey) {
|
switch (sortKey) {
|
||||||
case 'studio':
|
case 'studio':
|
||||||
default:
|
default:
|
||||||
@ -94,6 +84,7 @@ class AddListMoviePosters extends Component {
|
|||||||
|
|
||||||
this._isInitialized = false;
|
this._isInitialized = false;
|
||||||
this._grid = null;
|
this._grid = null;
|
||||||
|
this._padding = props.isSmallScreen ? columnPaddingSmallScreen : columnPadding;
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(prevProps, prevState) {
|
componentDidUpdate(prevProps, prevState) {
|
||||||
@ -101,7 +92,9 @@ class AddListMoviePosters extends Component {
|
|||||||
items,
|
items,
|
||||||
sortKey,
|
sortKey,
|
||||||
posterOptions,
|
posterOptions,
|
||||||
jumpToCharacter
|
jumpToCharacter,
|
||||||
|
isSmallScreen,
|
||||||
|
selectedState
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -113,7 +106,7 @@ class AddListMoviePosters extends Component {
|
|||||||
|
|
||||||
if (prevProps.sortKey !== sortKey ||
|
if (prevProps.sortKey !== sortKey ||
|
||||||
prevProps.posterOptions !== posterOptions) {
|
prevProps.posterOptions !== posterOptions) {
|
||||||
this.calculateGrid();
|
this.calculateGrid(width, isSmallScreen);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this._grid &&
|
if (this._grid &&
|
||||||
@ -121,7 +114,8 @@ class AddListMoviePosters extends Component {
|
|||||||
prevState.columnWidth !== columnWidth ||
|
prevState.columnWidth !== columnWidth ||
|
||||||
prevState.columnCount !== columnCount ||
|
prevState.columnCount !== columnCount ||
|
||||||
prevState.rowHeight !== rowHeight ||
|
prevState.rowHeight !== rowHeight ||
|
||||||
hasDifferentItemsOrOrder(prevProps.items, items))) {
|
prevProps.selectedState !== selectedState ||
|
||||||
|
hasDifferentItemsOrOrder(prevProps.items, items, 'tmdbId'))) {
|
||||||
// recomputeGridSize also forces Grid to discard its cache of rendered cells
|
// recomputeGridSize also forces Grid to discard its cache of rendered cells
|
||||||
this._grid.recomputeGridSize();
|
this._grid.recomputeGridSize();
|
||||||
}
|
}
|
||||||
@ -153,10 +147,9 @@ class AddListMoviePosters extends Component {
|
|||||||
posterOptions
|
posterOptions
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
|
|
||||||
const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen);
|
const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen);
|
||||||
const columnCount = Math.max(Math.floor(width / columnWidth), 1);
|
const columnCount = Math.max(Math.floor(width / columnWidth), 1);
|
||||||
const posterWidth = columnWidth - padding;
|
const posterWidth = columnWidth - this._padding * 2;
|
||||||
const posterHeight = calculatePosterHeight(posterWidth);
|
const posterHeight = calculatePosterHeight(posterWidth);
|
||||||
const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions);
|
const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions);
|
||||||
|
|
||||||
@ -177,7 +170,9 @@ class AddListMoviePosters extends Component {
|
|||||||
posterOptions,
|
posterOptions,
|
||||||
showRelativeDates,
|
showRelativeDates,
|
||||||
shortDateFormat,
|
shortDateFormat,
|
||||||
timeFormat
|
timeFormat,
|
||||||
|
selectedState,
|
||||||
|
onSelectedChange
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -190,7 +185,8 @@ class AddListMoviePosters extends Component {
|
|||||||
showTitle
|
showTitle
|
||||||
} = posterOptions;
|
} = posterOptions;
|
||||||
|
|
||||||
const movie = items[rowIndex * columnCount + columnIndex];
|
const movieIdx = rowIndex * columnCount + columnIndex;
|
||||||
|
const movie = items[movieIdx];
|
||||||
|
|
||||||
if (!movie) {
|
if (!movie) {
|
||||||
return null;
|
return null;
|
||||||
@ -198,11 +194,15 @@ class AddListMoviePosters extends Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
className={styles.container}
|
||||||
key={key}
|
key={key}
|
||||||
style={style}
|
style={{
|
||||||
|
...style,
|
||||||
|
padding: this._padding
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<AddListMovieItemConnector
|
<AddListMovieItemConnector
|
||||||
key={movie.id}
|
key={movie.tmdbId}
|
||||||
component={AddListMoviePosterConnector}
|
component={AddListMoviePosterConnector}
|
||||||
sortKey={sortKey}
|
sortKey={sortKey}
|
||||||
posterWidth={posterWidth}
|
posterWidth={posterWidth}
|
||||||
@ -212,6 +212,8 @@ class AddListMoviePosters extends Component {
|
|||||||
shortDateFormat={shortDateFormat}
|
shortDateFormat={shortDateFormat}
|
||||||
timeFormat={timeFormat}
|
timeFormat={timeFormat}
|
||||||
movieId={movie.tmdbId}
|
movieId={movie.tmdbId}
|
||||||
|
isSelected={selectedState[movie.tmdbId]}
|
||||||
|
onSelectedChange={onSelectedChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -231,7 +233,8 @@ class AddListMoviePosters extends Component {
|
|||||||
const {
|
const {
|
||||||
isSmallScreen,
|
isSmallScreen,
|
||||||
scroller,
|
scroller,
|
||||||
items
|
items,
|
||||||
|
selectedState
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -272,6 +275,7 @@ class AddListMoviePosters extends Component {
|
|||||||
scrollTop={scrollTop}
|
scrollTop={scrollTop}
|
||||||
overscanRowCount={2}
|
overscanRowCount={2}
|
||||||
cellRenderer={this.cellRenderer}
|
cellRenderer={this.cellRenderer}
|
||||||
|
selectedState={selectedState}
|
||||||
scrollToAlignment={'start'}
|
scrollToAlignment={'start'}
|
||||||
isScrollingOptOut={true}
|
isScrollingOptOut={true}
|
||||||
/>
|
/>
|
||||||
@ -294,7 +298,9 @@ AddListMoviePosters.propTypes = {
|
|||||||
showRelativeDates: PropTypes.bool.isRequired,
|
showRelativeDates: PropTypes.bool.isRequired,
|
||||||
shortDateFormat: PropTypes.string.isRequired,
|
shortDateFormat: PropTypes.string.isRequired,
|
||||||
isSmallScreen: PropTypes.bool.isRequired,
|
isSmallScreen: PropTypes.bool.isRequired,
|
||||||
timeFormat: PropTypes.string.isRequired
|
timeFormat: PropTypes.string.isRequired,
|
||||||
|
selectedState: PropTypes.object.isRequired,
|
||||||
|
onSelectedChange: PropTypes.func.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AddListMoviePosters;
|
export default AddListMoviePosters;
|
@ -6,7 +6,7 @@ import AddListMoviePosters from './AddListMoviePosters';
|
|||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
(state) => state.addMovie.posterOptions,
|
(state) => state.discoverMovie.posterOptions,
|
||||||
createUISettingsSelector(),
|
createUISettingsSelector(),
|
||||||
createDimensionsSelector(),
|
createDimensionsSelector(),
|
||||||
(posterOptions, uiSettings, dimensions) => {
|
(posterOptions, uiSettings, dimensions) => {
|
@ -1,13 +1,13 @@
|
|||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import { setListMoviePosterOption } from 'Store/Actions/addMovieActions';
|
import { setListMoviePosterOption } from 'Store/Actions/discoverMovieActions';
|
||||||
import AddListMoviePosterOptionsModalContent from './AddListMoviePosterOptionsModalContent';
|
import AddListMoviePosterOptionsModalContent from './AddListMoviePosterOptionsModalContent';
|
||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
(state) => state.addMovie,
|
(state) => state.discoverMovie,
|
||||||
(addMovie) => {
|
(discoverMovie) => {
|
||||||
return addMovie.posterOptions;
|
return discoverMovie.posterOptions;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
@ -4,6 +4,7 @@ import { icons } from 'Helpers/Props';
|
|||||||
import IconButton from 'Components/Link/IconButton';
|
import IconButton from 'Components/Link/IconButton';
|
||||||
import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
|
import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
|
||||||
import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
|
import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
|
||||||
|
import VirtualTableSelectAllHeaderCell from 'Components/Table/VirtualTableSelectAllHeaderCell';
|
||||||
import TableOptionsModal from 'Components/Table/TableOptions/TableOptionsModal';
|
import TableOptionsModal from 'Components/Table/TableOptions/TableOptionsModal';
|
||||||
import styles from './AddListMovieHeader.css';
|
import styles from './AddListMovieHeader.css';
|
||||||
|
|
||||||
@ -38,11 +39,21 @@ class AddListMovieHeader extends Component {
|
|||||||
const {
|
const {
|
||||||
columns,
|
columns,
|
||||||
onTableOptionChange,
|
onTableOptionChange,
|
||||||
|
allSelected,
|
||||||
|
allUnselected,
|
||||||
|
onSelectAllChange,
|
||||||
...otherProps
|
...otherProps
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<VirtualTableHeader>
|
<VirtualTableHeader>
|
||||||
|
<VirtualTableSelectAllHeaderCell
|
||||||
|
key={name}
|
||||||
|
allSelected={allSelected}
|
||||||
|
allUnselected={allUnselected}
|
||||||
|
onSelectAllChange={onSelectAllChange}
|
||||||
|
/>
|
||||||
|
|
||||||
{
|
{
|
||||||
columns.map((column) => {
|
columns.map((column) => {
|
||||||
const {
|
const {
|
||||||
@ -100,7 +111,10 @@ class AddListMovieHeader extends Component {
|
|||||||
|
|
||||||
AddListMovieHeader.propTypes = {
|
AddListMovieHeader.propTypes = {
|
||||||
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
onTableOptionChange: PropTypes.func.isRequired
|
onTableOptionChange: PropTypes.func.isRequired,
|
||||||
|
allSelected: PropTypes.bool.isRequired,
|
||||||
|
allUnselected: PropTypes.bool.isRequired,
|
||||||
|
onSelectAllChange: PropTypes.func.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AddListMovieHeader;
|
export default AddListMovieHeader;
|
@ -1,5 +1,5 @@
|
|||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { setListMovieTableOption } from 'Store/Actions/addMovieActions';
|
import { setListMovieTableOption } from 'Store/Actions/discoverMovieActions';
|
||||||
import AddListMovieHeader from './AddListMovieHeader';
|
import AddListMovieHeader from './AddListMovieHeader';
|
||||||
|
|
||||||
function createMapDispatchToProps(dispatch, props) {
|
function createMapDispatchToProps(dispatch, props) {
|
65
frontend/src/DiscoverMovie/Table/AddListMovieRow.css
Normal file
65
frontend/src/DiscoverMovie/Table/AddListMovieRow.css
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
.cell {
|
||||||
|
composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
composes: cell;
|
||||||
|
|
||||||
|
flex: 0 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection,
|
||||||
|
.sortTitle {
|
||||||
|
composes: cell;
|
||||||
|
|
||||||
|
flex: 4 0 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio {
|
||||||
|
composes: cell;
|
||||||
|
|
||||||
|
flex: 2 0 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inCinemas,
|
||||||
|
.physicalRelease,
|
||||||
|
.genres {
|
||||||
|
composes: cell;
|
||||||
|
|
||||||
|
flex: 0 0 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movieStatus,
|
||||||
|
.certification {
|
||||||
|
composes: cell;
|
||||||
|
|
||||||
|
flex: 0 0 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratings {
|
||||||
|
composes: cell;
|
||||||
|
|
||||||
|
flex: 0 0 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
composes: cell;
|
||||||
|
|
||||||
|
flex: 1 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
composes: cell;
|
||||||
|
|
||||||
|
flex: 0 1 90px;
|
||||||
|
min-width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkInput {
|
||||||
|
composes: input from '~Components/Form/CheckInput.css';
|
||||||
|
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
@ -1,11 +1,15 @@
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
import HeartRating from 'Components/HeartRating';
|
import HeartRating from 'Components/HeartRating';
|
||||||
|
import IconButton from 'Components/Link/IconButton';
|
||||||
import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
|
import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
|
||||||
import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
|
import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
|
||||||
import MovieStatusCell from './MovieStatusCell';
|
import ListMovieStatusCell from './ListMovieStatusCell';
|
||||||
import Link from 'Components/Link/Link';
|
import Link from 'Components/Link/Link';
|
||||||
import AddNewMovieModal from 'AddMovie/AddNewMovie/AddNewMovieModal';
|
import AddNewDiscoverMovieModal from 'DiscoverMovie/AddNewDiscoverMovieModal';
|
||||||
|
import ExcludeMovieModal from 'DiscoverMovie/Exclusion/ExcludeMovieModal';
|
||||||
|
import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
|
||||||
import styles from './AddListMovieRow.css';
|
import styles from './AddListMovieRow.css';
|
||||||
|
|
||||||
class AddListMovieRow extends Component {
|
class AddListMovieRow extends Component {
|
||||||
@ -17,14 +21,15 @@ class AddListMovieRow extends Component {
|
|||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
isNewAddMovieModalOpen: false
|
isNewAddMovieModalOpen: false,
|
||||||
|
isExcludeMovieModalOpen: false
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
// Listeners
|
// Listeners
|
||||||
|
|
||||||
onPress = () => {
|
onAddMoviePress = () => {
|
||||||
this.setState({ isNewAddMovieModalOpen: true });
|
this.setState({ isNewAddMovieModalOpen: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -32,6 +37,14 @@ class AddListMovieRow extends Component {
|
|||||||
this.setState({ isNewAddMovieModalOpen: false });
|
this.setState({ isNewAddMovieModalOpen: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onExcludeMoviePress = () => {
|
||||||
|
this.setState({ isExcludeMovieModalOpen: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
onExcludeMovieModalClose = () => {
|
||||||
|
this.setState({ isExcludeMovieModalOpen: false });
|
||||||
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
// Render
|
// Render
|
||||||
|
|
||||||
@ -52,17 +65,30 @@ class AddListMovieRow extends Component {
|
|||||||
ratings,
|
ratings,
|
||||||
certification,
|
certification,
|
||||||
columns,
|
columns,
|
||||||
isExistingMovie
|
isExisting,
|
||||||
|
isExcluded,
|
||||||
|
isSelected,
|
||||||
|
onSelectedChange
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
isNewAddMovieModalOpen
|
isNewAddMovieModalOpen,
|
||||||
|
isExcludeMovieModalOpen
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
|
const linkProps = isExisting ? { to: `/movie/${titleSlug}` } : { onPress: this.onAddMoviePress };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<VirtualTableSelectCell
|
||||||
|
inputClassName={styles.checkInput}
|
||||||
|
id={tmdbId}
|
||||||
|
key={name}
|
||||||
|
isSelected={isSelected}
|
||||||
|
isDisabled={false}
|
||||||
|
onSelectedChange={onSelectedChange}
|
||||||
|
/>
|
||||||
|
|
||||||
{
|
{
|
||||||
columns.map((column) => {
|
columns.map((column) => {
|
||||||
const {
|
const {
|
||||||
@ -76,10 +102,11 @@ class AddListMovieRow extends Component {
|
|||||||
|
|
||||||
if (name === 'status') {
|
if (name === 'status') {
|
||||||
return (
|
return (
|
||||||
<MovieStatusCell
|
<ListMovieStatusCell
|
||||||
key={name}
|
key={name}
|
||||||
className={styles[name]}
|
className={styles[name]}
|
||||||
status={status}
|
status={status}
|
||||||
|
isExclusion={isExcluded}
|
||||||
component={VirtualTableRowCell}
|
component={VirtualTableRowCell}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@ -172,12 +199,28 @@ class AddListMovieRow extends Component {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (name === 'actions') {
|
||||||
|
return (
|
||||||
|
<VirtualTableRowCell
|
||||||
|
key={name}
|
||||||
|
className={styles[name]}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
name={icons.REMOVE}
|
||||||
|
title={isExcluded ? 'Movie already Excluded' : 'Exclude Movie'}
|
||||||
|
onPress={this.onExcludeMoviePress}
|
||||||
|
isDisabled={isExcluded}
|
||||||
|
/>
|
||||||
|
</VirtualTableRowCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
<AddNewMovieModal
|
<AddNewDiscoverMovieModal
|
||||||
isOpen={isNewAddMovieModalOpen && !isExistingMovie}
|
isOpen={isNewAddMovieModalOpen && !isExisting}
|
||||||
tmdbId={tmdbId}
|
tmdbId={tmdbId}
|
||||||
title={title}
|
title={title}
|
||||||
year={year}
|
year={year}
|
||||||
@ -186,6 +229,14 @@ class AddListMovieRow extends Component {
|
|||||||
images={images}
|
images={images}
|
||||||
onModalClose={this.onAddMovieModalClose}
|
onModalClose={this.onAddMovieModalClose}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<ExcludeMovieModal
|
||||||
|
isOpen={isExcludeMovieModalOpen}
|
||||||
|
tmdbId={tmdbId}
|
||||||
|
title={title}
|
||||||
|
year={year}
|
||||||
|
onModalClose={this.onExcludeMovieModalClose}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -207,7 +258,10 @@ AddListMovieRow.propTypes = {
|
|||||||
ratings: PropTypes.object.isRequired,
|
ratings: PropTypes.object.isRequired,
|
||||||
certification: PropTypes.string,
|
certification: PropTypes.string,
|
||||||
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
isExistingMovie: PropTypes.bool.isRequired
|
isExisting: PropTypes.bool.isRequired,
|
||||||
|
isExcluded: PropTypes.bool.isRequired,
|
||||||
|
isSelected: PropTypes.bool,
|
||||||
|
onSelectedChange: PropTypes.func.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
AddListMovieRow.defaultProps = {
|
AddListMovieRow.defaultProps = {
|
@ -1,19 +1,13 @@
|
|||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import createExistingMovieSelector from 'Store/Selectors/createExistingMovieSelector';
|
|
||||||
import createExclusionMovieSelector from 'Store/Selectors/createExclusionMovieSelector';
|
|
||||||
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||||
import AddListMovieRow from './AddListMovieRow';
|
import AddListMovieRow from './AddListMovieRow';
|
||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
createExistingMovieSelector(),
|
|
||||||
createExclusionMovieSelector(),
|
|
||||||
createDimensionsSelector(),
|
createDimensionsSelector(),
|
||||||
(isExistingMovie, isExclusionMovie, dimensions) => {
|
(dimensions) => {
|
||||||
return {
|
return {
|
||||||
isExistingMovie,
|
|
||||||
isExclusionMovie,
|
|
||||||
isSmallScreen: dimensions.isSmallScreen
|
isSmallScreen: dimensions.isSmallScreen
|
||||||
};
|
};
|
||||||
}
|
}
|
@ -4,7 +4,7 @@ import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
|
|||||||
import { sortDirections } from 'Helpers/Props';
|
import { sortDirections } from 'Helpers/Props';
|
||||||
import VirtualTable from 'Components/Table/VirtualTable';
|
import VirtualTable from 'Components/Table/VirtualTable';
|
||||||
import VirtualTableRow from 'Components/Table/VirtualTableRow';
|
import VirtualTableRow from 'Components/Table/VirtualTableRow';
|
||||||
import AddListMovieItemConnector from 'AddMovie/AddListMovie/AddListMovieItemConnector';
|
import AddListMovieItemConnector from 'DiscoverMovie/AddListMovieItemConnector';
|
||||||
import AddListMovieHeaderConnector from './AddListMovieHeaderConnector';
|
import AddListMovieHeaderConnector from './AddListMovieHeaderConnector';
|
||||||
import AddListMovieRowConnector from './AddListMovieRowConnector';
|
import AddListMovieRowConnector from './AddListMovieRowConnector';
|
||||||
import styles from './AddListMovieTable.css';
|
import styles from './AddListMovieTable.css';
|
||||||
@ -46,7 +46,9 @@ class AddListMovieTable extends Component {
|
|||||||
rowRenderer = ({ key, rowIndex, style }) => {
|
rowRenderer = ({ key, rowIndex, style }) => {
|
||||||
const {
|
const {
|
||||||
items,
|
items,
|
||||||
columns
|
columns,
|
||||||
|
selectedState,
|
||||||
|
onSelectedChange
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const movie = items[rowIndex];
|
const movie = items[rowIndex];
|
||||||
@ -57,10 +59,12 @@ class AddListMovieTable extends Component {
|
|||||||
style={style}
|
style={style}
|
||||||
>
|
>
|
||||||
<AddListMovieItemConnector
|
<AddListMovieItemConnector
|
||||||
key={movie.id}
|
key={movie.tmdbId}
|
||||||
component={AddListMovieRowConnector}
|
component={AddListMovieRowConnector}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
movieId={movie.tmdbId}
|
movieId={movie.tmdbId}
|
||||||
|
isSelected={selectedState[movie.tmdbId]}
|
||||||
|
onSelectedChange={onSelectedChange}
|
||||||
/>
|
/>
|
||||||
</VirtualTableRow>
|
</VirtualTableRow>
|
||||||
);
|
);
|
||||||
@ -75,8 +79,13 @@ class AddListMovieTable extends Component {
|
|||||||
columns,
|
columns,
|
||||||
sortKey,
|
sortKey,
|
||||||
sortDirection,
|
sortDirection,
|
||||||
|
isSmallScreen,
|
||||||
|
onSortPress,
|
||||||
scroller,
|
scroller,
|
||||||
onSortPress
|
allSelected,
|
||||||
|
allUnselected,
|
||||||
|
onSelectAllChange,
|
||||||
|
selectedState
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -84,6 +93,7 @@ class AddListMovieTable extends Component {
|
|||||||
className={styles.tableContainer}
|
className={styles.tableContainer}
|
||||||
items={items}
|
items={items}
|
||||||
scrollIndex={this.state.scrollIndex}
|
scrollIndex={this.state.scrollIndex}
|
||||||
|
isSmallScreen={isSmallScreen}
|
||||||
scroller={scroller}
|
scroller={scroller}
|
||||||
rowHeight={38}
|
rowHeight={38}
|
||||||
overscanRowCount={2}
|
overscanRowCount={2}
|
||||||
@ -94,8 +104,12 @@ class AddListMovieTable extends Component {
|
|||||||
sortKey={sortKey}
|
sortKey={sortKey}
|
||||||
sortDirection={sortDirection}
|
sortDirection={sortDirection}
|
||||||
onSortPress={onSortPress}
|
onSortPress={onSortPress}
|
||||||
|
allSelected={allSelected}
|
||||||
|
allUnselected={allUnselected}
|
||||||
|
onSelectAllChange={onSelectAllChange}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
selectedState={selectedState}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@ -108,8 +122,14 @@ AddListMovieTable.propTypes = {
|
|||||||
sortKey: PropTypes.string,
|
sortKey: PropTypes.string,
|
||||||
sortDirection: PropTypes.oneOf(sortDirections.all),
|
sortDirection: PropTypes.oneOf(sortDirections.all),
|
||||||
jumpToCharacter: PropTypes.string,
|
jumpToCharacter: PropTypes.string,
|
||||||
|
isSmallScreen: PropTypes.bool.isRequired,
|
||||||
scroller: PropTypes.instanceOf(Element).isRequired,
|
scroller: PropTypes.instanceOf(Element).isRequired,
|
||||||
onSortPress: PropTypes.func.isRequired
|
onSortPress: PropTypes.func.isRequired,
|
||||||
|
allSelected: PropTypes.bool.isRequired,
|
||||||
|
allUnselected: PropTypes.bool.isRequired,
|
||||||
|
selectedState: PropTypes.object.isRequired,
|
||||||
|
onSelectedChange: PropTypes.func.isRequired,
|
||||||
|
onSelectAllChange: PropTypes.func.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AddListMovieTable;
|
export default AddListMovieTable;
|
@ -1,12 +1,12 @@
|
|||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import { setListMovieSort } from 'Store/Actions/addMovieActions';
|
import { setListMovieSort } from 'Store/Actions/discoverMovieActions';
|
||||||
import AddListMovieTable from './AddListMovieTable';
|
import AddListMovieTable from './AddListMovieTable';
|
||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
(state) => state.app.dimensions,
|
(state) => state.app.dimensions,
|
||||||
(state) => state.addMovie.columns,
|
(state) => state.discoverMovie.columns,
|
||||||
(dimensions, columns) => {
|
(dimensions, columns) => {
|
||||||
return {
|
return {
|
||||||
isSmallScreen: dimensions.isSmallScreen,
|
isSmallScreen: dimensions.isSmallScreen,
|
@ -7,3 +7,7 @@
|
|||||||
.statusIcon {
|
.statusIcon {
|
||||||
width: 20px !important;
|
width: 20px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.exclusionIcon {
|
||||||
|
color: $dangerColor;
|
||||||
|
}
|
56
frontend/src/DiscoverMovie/Table/ListMovieStatusCell.js
Normal file
56
frontend/src/DiscoverMovie/Table/ListMovieStatusCell.js
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
|
import Icon from 'Components/Icon';
|
||||||
|
import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
|
||||||
|
import { getMovieStatusDetails } from 'Movie/MovieStatus';
|
||||||
|
import styles from './ListMovieStatusCell.css';
|
||||||
|
|
||||||
|
function ListMovieStatusCell(props) {
|
||||||
|
const {
|
||||||
|
className,
|
||||||
|
status,
|
||||||
|
isExclusion,
|
||||||
|
component: Component,
|
||||||
|
...otherProps
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const statusDetails = getMovieStatusDetails(status);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Component
|
||||||
|
className={className}
|
||||||
|
{...otherProps}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
className={styles.statusIcon}
|
||||||
|
name={statusDetails.icon}
|
||||||
|
title={`${statusDetails.title}: ${statusDetails.message}`}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{
|
||||||
|
isExclusion ?
|
||||||
|
<Icon
|
||||||
|
className={styles.exclusionIcon}
|
||||||
|
name={icons.DANGER}
|
||||||
|
title={'Movie Excluded From Automatic Add'}
|
||||||
|
/> : null
|
||||||
|
}
|
||||||
|
|
||||||
|
</Component>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ListMovieStatusCell.propTypes = {
|
||||||
|
className: PropTypes.string.isRequired,
|
||||||
|
status: PropTypes.string.isRequired,
|
||||||
|
isExclusion: PropTypes.bool.isRequired,
|
||||||
|
component: PropTypes.elementType
|
||||||
|
};
|
||||||
|
|
||||||
|
ListMovieStatusCell.defaultProps = {
|
||||||
|
className: styles.status,
|
||||||
|
component: VirtualTableRowCell
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ListMovieStatusCell;
|
@ -60,6 +60,7 @@ $hoverScale: 1.05;
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-width: 0 25px 25px 0;
|
border-width: 0 25px 25px 0;
|
||||||
|
@ -1,7 +1,3 @@
|
|||||||
.grid {
|
.grid {
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
@ -104,6 +104,7 @@ class MovieIndexPosters extends Component {
|
|||||||
|
|
||||||
this._isInitialized = false;
|
this._isInitialized = false;
|
||||||
this._grid = null;
|
this._grid = null;
|
||||||
|
this._padding = props.isSmallScreen ? columnPaddingSmallScreen : columnPadding;
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(prevProps, prevState) {
|
componentDidUpdate(prevProps, prevState) {
|
||||||
@ -112,6 +113,7 @@ class MovieIndexPosters extends Component {
|
|||||||
sortKey,
|
sortKey,
|
||||||
posterOptions,
|
posterOptions,
|
||||||
jumpToCharacter,
|
jumpToCharacter,
|
||||||
|
isSmallScreen,
|
||||||
isMovieEditorActive
|
isMovieEditorActive
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
@ -124,7 +126,7 @@ class MovieIndexPosters extends Component {
|
|||||||
|
|
||||||
if (prevProps.sortKey !== sortKey ||
|
if (prevProps.sortKey !== sortKey ||
|
||||||
prevProps.posterOptions !== posterOptions) {
|
prevProps.posterOptions !== posterOptions) {
|
||||||
this.calculateGrid();
|
this.calculateGrid(width, isSmallScreen);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this._grid &&
|
if (this._grid &&
|
||||||
@ -165,10 +167,9 @@ class MovieIndexPosters extends Component {
|
|||||||
posterOptions
|
posterOptions
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
|
|
||||||
const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen);
|
const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen);
|
||||||
const columnCount = Math.max(Math.floor(width / columnWidth), 1);
|
const columnCount = Math.max(Math.floor(width / columnWidth), 1);
|
||||||
const posterWidth = columnWidth - padding;
|
const posterWidth = columnWidth - this._padding * 2;
|
||||||
const posterHeight = calculatePosterHeight(posterWidth);
|
const posterHeight = calculatePosterHeight(posterWidth);
|
||||||
const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions);
|
const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions);
|
||||||
|
|
||||||
@ -219,7 +220,10 @@ class MovieIndexPosters extends Component {
|
|||||||
<div
|
<div
|
||||||
className={styles.container}
|
className={styles.container}
|
||||||
key={key}
|
key={key}
|
||||||
style={style}
|
style={{
|
||||||
|
...style,
|
||||||
|
padding: this._padding
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<MovieIndexItemConnector
|
<MovieIndexItemConnector
|
||||||
key={movie.id}
|
key={movie.id}
|
||||||
|
@ -8,8 +8,9 @@ import { setNetImportExclusionValue, saveNetImportExclusion } from 'Store/Action
|
|||||||
import EditNetImportExclusionModalContent from './EditNetImportExclusionModalContent';
|
import EditNetImportExclusionModalContent from './EditNetImportExclusionModalContent';
|
||||||
|
|
||||||
const newNetImportExclusion = {
|
const newNetImportExclusion = {
|
||||||
artistName: '',
|
movieTitle: '',
|
||||||
foreignId: ''
|
tmdbId: 0,
|
||||||
|
movieYear: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
function createNetImportExclusionSelector() {
|
function createNetImportExclusionSelector() {
|
||||||
|
@ -22,6 +22,7 @@ export const SET_NET_IMPORT_EXCLUSION_VALUE = 'settings/netImportExclusions/setN
|
|||||||
// Action Creators
|
// Action Creators
|
||||||
|
|
||||||
export const fetchNetImportExclusions = createThunk(FETCH_NET_IMPORT_EXCLUSIONS);
|
export const fetchNetImportExclusions = createThunk(FETCH_NET_IMPORT_EXCLUSIONS);
|
||||||
|
|
||||||
export const saveNetImportExclusion = createThunk(SAVE_NET_IMPORT_EXCLUSION);
|
export const saveNetImportExclusion = createThunk(SAVE_NET_IMPORT_EXCLUSION);
|
||||||
export const deleteNetImportExclusion = createThunk(DELETE_NET_IMPORT_EXCLUSION);
|
export const deleteNetImportExclusion = createThunk(DELETE_NET_IMPORT_EXCLUSION);
|
||||||
|
|
||||||
@ -55,6 +56,7 @@ export default {
|
|||||||
|
|
||||||
actionHandlers: {
|
actionHandlers: {
|
||||||
[FETCH_NET_IMPORT_EXCLUSIONS]: createFetchHandler(section, '/exclusions'),
|
[FETCH_NET_IMPORT_EXCLUSIONS]: createFetchHandler(section, '/exclusions'),
|
||||||
|
|
||||||
[SAVE_NET_IMPORT_EXCLUSION]: createSaveProviderHandler(section, '/exclusions'),
|
[SAVE_NET_IMPORT_EXCLUSION]: createSaveProviderHandler(section, '/exclusions'),
|
||||||
[DELETE_NET_IMPORT_EXCLUSION]: createRemoveItemHandler(section, '/exclusions')
|
[DELETE_NET_IMPORT_EXCLUSION]: createRemoveItemHandler(section, '/exclusions')
|
||||||
},
|
},
|
||||||
|
@ -4,19 +4,11 @@ import { batchActions } from 'redux-batched-actions';
|
|||||||
import getSectionState from 'Utilities/State/getSectionState';
|
import getSectionState from 'Utilities/State/getSectionState';
|
||||||
import updateSectionState from 'Utilities/State/updateSectionState';
|
import updateSectionState from 'Utilities/State/updateSectionState';
|
||||||
import createAjaxRequest from 'Utilities/createAjaxRequest';
|
import createAjaxRequest from 'Utilities/createAjaxRequest';
|
||||||
import createFetchHandler from './Creators/createFetchHandler';
|
|
||||||
import getNewMovie from 'Utilities/Movie/getNewMovie';
|
import getNewMovie from 'Utilities/Movie/getNewMovie';
|
||||||
import { filterBuilderTypes, filterBuilderValueTypes, sortDirections } from 'Helpers/Props';
|
|
||||||
import sortByName from 'Utilities/Array/sortByName';
|
|
||||||
import { createThunk, handleThunks } from 'Store/thunks';
|
import { createThunk, handleThunks } from 'Store/thunks';
|
||||||
import createSetSettingValueReducer from './Creators/Reducers/createSetSettingValueReducer';
|
import createSetSettingValueReducer from './Creators/Reducers/createSetSettingValueReducer';
|
||||||
import createHandleActions from './Creators/createHandleActions';
|
import createHandleActions from './Creators/createHandleActions';
|
||||||
import { set, update, updateItem } from './baseActions';
|
import { set, update, updateItem } from './baseActions';
|
||||||
import { filterPredicates, sortPredicates } from './movieActions';
|
|
||||||
import createSetTableOptionReducer from './Creators/Reducers/createSetTableOptionReducer';
|
|
||||||
import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
|
|
||||||
import createSetClientSideCollectionFilterReducer from './Creators/Reducers/createSetClientSideCollectionFilterReducer';
|
|
||||||
import createClearReducer from './Creators/Reducers/createClearReducer';
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Variables
|
// Variables
|
||||||
@ -35,11 +27,6 @@ export const defaultState = {
|
|||||||
isAdded: false,
|
isAdded: false,
|
||||||
addError: null,
|
addError: null,
|
||||||
items: [],
|
items: [],
|
||||||
sortKey: 'sortTitle',
|
|
||||||
sortDirection: sortDirections.ASCENDING,
|
|
||||||
secondarySortKey: 'sortTitle',
|
|
||||||
secondarySortDirection: sortDirections.ASCENDING,
|
|
||||||
view: 'overview',
|
|
||||||
|
|
||||||
defaults: {
|
defaults: {
|
||||||
rootFolderPath: '',
|
rootFolderPath: '',
|
||||||
@ -47,202 +34,11 @@ export const defaultState = {
|
|||||||
qualityProfileId: 0,
|
qualityProfileId: 0,
|
||||||
minimumAvailability: 'announced',
|
minimumAvailability: 'announced',
|
||||||
tags: []
|
tags: []
|
||||||
},
|
}
|
||||||
|
|
||||||
posterOptions: {
|
|
||||||
size: 'large',
|
|
||||||
showTitle: false
|
|
||||||
},
|
|
||||||
|
|
||||||
overviewOptions: {
|
|
||||||
detailedProgressBar: false,
|
|
||||||
size: 'medium',
|
|
||||||
showStudio: true
|
|
||||||
},
|
|
||||||
|
|
||||||
tableOptions: {
|
|
||||||
// showSearchAction: false
|
|
||||||
},
|
|
||||||
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
name: 'select',
|
|
||||||
columnLabel: 'select',
|
|
||||||
isSortable: false,
|
|
||||||
isVisible: true,
|
|
||||||
isModifiable: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'status',
|
|
||||||
columnLabel: 'Status',
|
|
||||||
isSortable: true,
|
|
||||||
isVisible: true,
|
|
||||||
isModifiable: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'sortTitle',
|
|
||||||
label: 'Movie Title',
|
|
||||||
isSortable: true,
|
|
||||||
isVisible: true,
|
|
||||||
isModifiable: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'studio',
|
|
||||||
label: 'Studio',
|
|
||||||
isSortable: true,
|
|
||||||
isVisible: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'inCinemas',
|
|
||||||
label: 'In Cinemas',
|
|
||||||
isSortable: true,
|
|
||||||
isVisible: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'physicalRelease',
|
|
||||||
label: 'Physical Release',
|
|
||||||
isSortable: true,
|
|
||||||
isVisible: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'genres',
|
|
||||||
label: 'Genres',
|
|
||||||
isSortable: false,
|
|
||||||
isVisible: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'ratings',
|
|
||||||
label: 'Rating',
|
|
||||||
isSortable: true,
|
|
||||||
isVisible: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'certification',
|
|
||||||
label: 'Certification',
|
|
||||||
isSortable: false,
|
|
||||||
isVisible: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'actions',
|
|
||||||
columnLabel: 'Actions',
|
|
||||||
isVisible: true,
|
|
||||||
isModifiable: false
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
sortPredicates: {
|
|
||||||
...sortPredicates,
|
|
||||||
|
|
||||||
studio: function(item) {
|
|
||||||
const studio = item.studio;
|
|
||||||
|
|
||||||
return studio ? studio.toLowerCase() : '';
|
|
||||||
},
|
|
||||||
|
|
||||||
ratings: function(item) {
|
|
||||||
const { ratings = {} } = item;
|
|
||||||
|
|
||||||
return ratings.value;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
selectedFilterKey: 'all',
|
|
||||||
|
|
||||||
filters: [
|
|
||||||
{
|
|
||||||
key: 'all',
|
|
||||||
label: 'All',
|
|
||||||
filters: []
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
filterPredicates,
|
|
||||||
|
|
||||||
filterBuilderProps: [
|
|
||||||
{
|
|
||||||
name: 'status',
|
|
||||||
label: 'Status',
|
|
||||||
type: filterBuilderTypes.EXACT,
|
|
||||||
valueType: filterBuilderValueTypes.MOVIE_STATUS
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'studio',
|
|
||||||
label: 'Studio',
|
|
||||||
type: filterBuilderTypes.ARRAY,
|
|
||||||
optionsSelector: function(items) {
|
|
||||||
const tagList = items.reduce((acc, movie) => {
|
|
||||||
acc.push({
|
|
||||||
id: movie.studio,
|
|
||||||
name: movie.studio
|
|
||||||
});
|
|
||||||
|
|
||||||
return acc;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return tagList.sort(sortByName);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'inCinemas',
|
|
||||||
label: 'In Cinemas',
|
|
||||||
type: filterBuilderTypes.DATE,
|
|
||||||
valueType: filterBuilderValueTypes.DATE
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'physicalRelease',
|
|
||||||
label: 'Physical Release',
|
|
||||||
type: filterBuilderTypes.DATE,
|
|
||||||
valueType: filterBuilderValueTypes.DATE
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'genres',
|
|
||||||
label: 'Genres',
|
|
||||||
type: filterBuilderTypes.ARRAY,
|
|
||||||
optionsSelector: function(items) {
|
|
||||||
const tagList = items.reduce((acc, movie) => {
|
|
||||||
movie.genres.forEach((genre) => {
|
|
||||||
acc.push({
|
|
||||||
id: genre,
|
|
||||||
name: genre
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return acc;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return tagList.sort(sortByName);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'ratings',
|
|
||||||
label: 'Rating',
|
|
||||||
type: filterBuilderTypes.NUMBER
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'certification',
|
|
||||||
label: 'Certification',
|
|
||||||
type: filterBuilderTypes.EXACT
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'tags',
|
|
||||||
label: 'Tags',
|
|
||||||
type: filterBuilderTypes.ARRAY,
|
|
||||||
valueType: filterBuilderValueTypes.TAG
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const persistState = [
|
export const persistState = [
|
||||||
'addMovie.defaults',
|
'addMovie.defaults'
|
||||||
'addMovie.sortKey',
|
|
||||||
'addMovie.sortDirection',
|
|
||||||
'addMovie.selectedFilterKey',
|
|
||||||
'addMovie.customFilters',
|
|
||||||
'addMovie.view',
|
|
||||||
'addMovie.columns',
|
|
||||||
'addMovie.posterOptions',
|
|
||||||
'addMovie.overviewOptions',
|
|
||||||
'addMovie.tableOptions'
|
|
||||||
];
|
];
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -254,16 +50,6 @@ export const SET_ADD_MOVIE_VALUE = 'addMovie/setAddMovieValue';
|
|||||||
export const CLEAR_ADD_MOVIE = 'addMovie/clearAddMovie';
|
export const CLEAR_ADD_MOVIE = 'addMovie/clearAddMovie';
|
||||||
export const SET_ADD_MOVIE_DEFAULT = 'addMovie/setAddMovieDefault';
|
export const SET_ADD_MOVIE_DEFAULT = 'addMovie/setAddMovieDefault';
|
||||||
|
|
||||||
export const FETCH_LIST_MOVIES = 'addMovie/fetchListMovies';
|
|
||||||
export const FETCH_DISCOVER_MOVIES = 'addMovie/fetchDiscoverMovies';
|
|
||||||
|
|
||||||
export const SET_LIST_MOVIE_SORT = 'addMovie/setListMovieSort';
|
|
||||||
export const SET_LIST_MOVIE_FILTER = 'addMovie/setListMovieFilter';
|
|
||||||
export const SET_LIST_MOVIE_VIEW = 'addMovie/setListMovieView';
|
|
||||||
export const SET_LIST_MOVIE_TABLE_OPTION = 'addMovie/setListMovieTableOption';
|
|
||||||
export const SET_LIST_MOVIE_POSTER_OPTION = 'addMovie/setListMoviePosterOption';
|
|
||||||
export const SET_LIST_MOVIE_OVERVIEW_OPTION = 'addMovie/setListMovieOverviewOption';
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Action Creators
|
// Action Creators
|
||||||
|
|
||||||
@ -272,16 +58,6 @@ export const addMovie = createThunk(ADD_MOVIE);
|
|||||||
export const clearAddMovie = createAction(CLEAR_ADD_MOVIE);
|
export const clearAddMovie = createAction(CLEAR_ADD_MOVIE);
|
||||||
export const setAddMovieDefault = createAction(SET_ADD_MOVIE_DEFAULT);
|
export const setAddMovieDefault = createAction(SET_ADD_MOVIE_DEFAULT);
|
||||||
|
|
||||||
export const fetchListMovies = createThunk(FETCH_LIST_MOVIES);
|
|
||||||
export const fetchDiscoverMovies = createThunk(FETCH_DISCOVER_MOVIES);
|
|
||||||
|
|
||||||
export const setListMovieSort = createAction(SET_LIST_MOVIE_SORT);
|
|
||||||
export const setListMovieFilter = createAction(SET_LIST_MOVIE_FILTER);
|
|
||||||
export const setListMovieView = createAction(SET_LIST_MOVIE_VIEW);
|
|
||||||
export const setListMovieTableOption = createAction(SET_LIST_MOVIE_TABLE_OPTION);
|
|
||||||
export const setListMoviePosterOption = createAction(SET_LIST_MOVIE_POSTER_OPTION);
|
|
||||||
export const setListMovieOverviewOption = createAction(SET_LIST_MOVIE_OVERVIEW_OPTION);
|
|
||||||
|
|
||||||
export const setAddMovieValue = createAction(SET_ADD_MOVIE_VALUE, (payload) => {
|
export const setAddMovieValue = createAction(SET_ADD_MOVIE_VALUE, (payload) => {
|
||||||
return {
|
return {
|
||||||
section,
|
section,
|
||||||
@ -294,10 +70,6 @@ export const setAddMovieValue = createAction(SET_ADD_MOVIE_VALUE, (payload) => {
|
|||||||
|
|
||||||
export const actionHandlers = handleThunks({
|
export const actionHandlers = handleThunks({
|
||||||
|
|
||||||
[FETCH_LIST_MOVIES]: createFetchHandler(section, '/netimport/movies'),
|
|
||||||
|
|
||||||
[FETCH_DISCOVER_MOVIES]: createFetchHandler(section, '/movies/discover'),
|
|
||||||
|
|
||||||
[LOOKUP_MOVIE]: function(getState, payload, dispatch) {
|
[LOOKUP_MOVIE]: function(getState, payload, dispatch) {
|
||||||
dispatch(set({ section, isFetching: true }));
|
dispatch(set({ section, isFetching: true }));
|
||||||
|
|
||||||
@ -393,54 +165,14 @@ export const reducers = createHandleActions({
|
|||||||
return updateSectionState(state, section, newState);
|
return updateSectionState(state, section, newState);
|
||||||
},
|
},
|
||||||
|
|
||||||
[SET_LIST_MOVIE_SORT]: createSetClientSideCollectionSortReducer(section),
|
[CLEAR_ADD_MOVIE]: function(state) {
|
||||||
[SET_LIST_MOVIE_FILTER]: createSetClientSideCollectionFilterReducer(section),
|
const {
|
||||||
|
defaults,
|
||||||
|
view,
|
||||||
|
...otherDefaultState
|
||||||
|
} = defaultState;
|
||||||
|
|
||||||
[SET_LIST_MOVIE_VIEW]: function(state, { payload }) {
|
return Object.assign({}, state, otherDefaultState);
|
||||||
return Object.assign({}, state, { view: payload.view });
|
}
|
||||||
},
|
|
||||||
|
|
||||||
[SET_LIST_MOVIE_TABLE_OPTION]: createSetTableOptionReducer(section),
|
|
||||||
|
|
||||||
[SET_LIST_MOVIE_POSTER_OPTION]: function(state, { payload }) {
|
|
||||||
const posterOptions = state.posterOptions;
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
posterOptions: {
|
|
||||||
...posterOptions,
|
|
||||||
...payload
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
[SET_LIST_MOVIE_OVERVIEW_OPTION]: function(state, { payload }) {
|
|
||||||
const overviewOptions = state.overviewOptions;
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
overviewOptions: {
|
|
||||||
...overviewOptions,
|
|
||||||
...payload
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
// [CLEAR_ADD_MOVIE]: function(state) {
|
|
||||||
// const {
|
|
||||||
// defaults,
|
|
||||||
// view,
|
|
||||||
// ...otherDefaultState
|
|
||||||
// } = defaultState;
|
|
||||||
|
|
||||||
// return Object.assign({}, state, otherDefaultState);
|
|
||||||
// }
|
|
||||||
|
|
||||||
[CLEAR_ADD_MOVIE]: createClearReducer(section, {
|
|
||||||
isFetching: false,
|
|
||||||
isPopulated: false,
|
|
||||||
error: null,
|
|
||||||
items: []
|
|
||||||
})
|
|
||||||
|
|
||||||
}, defaultState, section);
|
}, defaultState, section);
|
||||||
|
584
frontend/src/Store/Actions/discoverMovieActions.js
Normal file
584
frontend/src/Store/Actions/discoverMovieActions.js
Normal file
@ -0,0 +1,584 @@
|
|||||||
|
import _ from 'lodash';
|
||||||
|
import { createAction } from 'redux-actions';
|
||||||
|
import { batchActions } from 'redux-batched-actions';
|
||||||
|
import getSectionState from 'Utilities/State/getSectionState';
|
||||||
|
import updateSectionState from 'Utilities/State/updateSectionState';
|
||||||
|
import createAjaxRequest from 'Utilities/createAjaxRequest';
|
||||||
|
import getNewMovie from 'Utilities/Movie/getNewMovie';
|
||||||
|
import { filterBuilderTypes, filterBuilderValueTypes, filterTypes, sortDirections } from 'Helpers/Props';
|
||||||
|
import sortByName from 'Utilities/Array/sortByName';
|
||||||
|
import { createThunk, handleThunks } from 'Store/thunks';
|
||||||
|
import createSetSettingValueReducer from './Creators/Reducers/createSetSettingValueReducer';
|
||||||
|
import createHandleActions from './Creators/createHandleActions';
|
||||||
|
import { set, updateItem, removeItem } from './baseActions';
|
||||||
|
import { filterPredicates } from './movieActions';
|
||||||
|
import createSetTableOptionReducer from './Creators/Reducers/createSetTableOptionReducer';
|
||||||
|
import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
|
||||||
|
import createSetClientSideCollectionFilterReducer from './Creators/Reducers/createSetClientSideCollectionFilterReducer';
|
||||||
|
import createClearReducer from './Creators/Reducers/createClearReducer';
|
||||||
|
|
||||||
|
//
|
||||||
|
// Variables
|
||||||
|
|
||||||
|
export const section = 'discoverMovie';
|
||||||
|
|
||||||
|
//
|
||||||
|
// State
|
||||||
|
|
||||||
|
export const defaultState = {
|
||||||
|
isFetching: false,
|
||||||
|
isPopulated: false,
|
||||||
|
error: null,
|
||||||
|
isAdding: false,
|
||||||
|
isAdded: false,
|
||||||
|
addError: null,
|
||||||
|
items: [],
|
||||||
|
sortKey: 'sortTitle',
|
||||||
|
sortDirection: sortDirections.ASCENDING,
|
||||||
|
secondarySortKey: 'sortTitle',
|
||||||
|
secondarySortDirection: sortDirections.ASCENDING,
|
||||||
|
view: 'overview',
|
||||||
|
|
||||||
|
defaults: {
|
||||||
|
rootFolderPath: '',
|
||||||
|
monitor: 'true',
|
||||||
|
qualityProfileId: 0,
|
||||||
|
minimumAvailability: 'announced',
|
||||||
|
tags: []
|
||||||
|
},
|
||||||
|
|
||||||
|
posterOptions: {
|
||||||
|
size: 'large',
|
||||||
|
showTitle: false
|
||||||
|
},
|
||||||
|
|
||||||
|
overviewOptions: {
|
||||||
|
detailedProgressBar: false,
|
||||||
|
size: 'medium',
|
||||||
|
showStudio: true
|
||||||
|
},
|
||||||
|
|
||||||
|
tableOptions: {
|
||||||
|
// showSearchAction: false
|
||||||
|
},
|
||||||
|
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
name: 'status',
|
||||||
|
columnLabel: 'Status',
|
||||||
|
isSortable: true,
|
||||||
|
isVisible: true,
|
||||||
|
isModifiable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'sortTitle',
|
||||||
|
label: 'Movie Title',
|
||||||
|
isSortable: true,
|
||||||
|
isVisible: true,
|
||||||
|
isModifiable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'studio',
|
||||||
|
label: 'Studio',
|
||||||
|
isSortable: true,
|
||||||
|
isVisible: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'inCinemas',
|
||||||
|
label: 'In Cinemas',
|
||||||
|
isSortable: true,
|
||||||
|
isVisible: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'physicalRelease',
|
||||||
|
label: 'Physical Release',
|
||||||
|
isSortable: true,
|
||||||
|
isVisible: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'genres',
|
||||||
|
label: 'Genres',
|
||||||
|
isSortable: false,
|
||||||
|
isVisible: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'ratings',
|
||||||
|
label: 'Rating',
|
||||||
|
isSortable: true,
|
||||||
|
isVisible: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'certification',
|
||||||
|
label: 'Certification',
|
||||||
|
isSortable: true,
|
||||||
|
isVisible: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'actions',
|
||||||
|
columnLabel: 'Actions',
|
||||||
|
isVisible: true,
|
||||||
|
isModifiable: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
sortPredicates: {
|
||||||
|
status: function(item) {
|
||||||
|
let result = 0;
|
||||||
|
|
||||||
|
if (item.isExcluded) {
|
||||||
|
result += 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.status === 'announced') {
|
||||||
|
result++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.status === 'inCinemas') {
|
||||||
|
result += 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.status === 'released') {
|
||||||
|
result += 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
studio: function(item) {
|
||||||
|
const studio = item.studio;
|
||||||
|
|
||||||
|
return studio ? studio.toLowerCase() : '';
|
||||||
|
},
|
||||||
|
|
||||||
|
ratings: function(item) {
|
||||||
|
const { ratings = {} } = item;
|
||||||
|
|
||||||
|
return ratings.value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
selectedFilterKey: 'newNotExcluded',
|
||||||
|
|
||||||
|
filters: [
|
||||||
|
{
|
||||||
|
key: 'all',
|
||||||
|
label: 'All',
|
||||||
|
filters: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'newNotExcluded',
|
||||||
|
label: 'New Non-Excluded',
|
||||||
|
filters: [
|
||||||
|
{
|
||||||
|
key: 'isExisting',
|
||||||
|
value: false,
|
||||||
|
type: filterTypes.EQUAL
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isExcluded',
|
||||||
|
value: false,
|
||||||
|
type: filterTypes.EQUAL
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
filterPredicates,
|
||||||
|
|
||||||
|
filterBuilderProps: [
|
||||||
|
{
|
||||||
|
name: 'status',
|
||||||
|
label: 'Status',
|
||||||
|
type: filterBuilderTypes.EXACT,
|
||||||
|
valueType: filterBuilderValueTypes.MOVIE_STATUS
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'studio',
|
||||||
|
label: 'Studio',
|
||||||
|
type: filterBuilderTypes.ARRAY,
|
||||||
|
optionsSelector: function(items) {
|
||||||
|
const tagList = items.reduce((acc, movie) => {
|
||||||
|
acc.push({
|
||||||
|
id: movie.studio,
|
||||||
|
name: movie.studio
|
||||||
|
});
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return tagList.sort(sortByName);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'inCinemas',
|
||||||
|
label: 'In Cinemas',
|
||||||
|
type: filterBuilderTypes.DATE,
|
||||||
|
valueType: filterBuilderValueTypes.DATE
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'physicalRelease',
|
||||||
|
label: 'Physical Release',
|
||||||
|
type: filterBuilderTypes.DATE,
|
||||||
|
valueType: filterBuilderValueTypes.DATE
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'genres',
|
||||||
|
label: 'Genres',
|
||||||
|
type: filterBuilderTypes.ARRAY,
|
||||||
|
optionsSelector: function(items) {
|
||||||
|
const tagList = items.reduce((acc, movie) => {
|
||||||
|
movie.genres.forEach((genre) => {
|
||||||
|
acc.push({
|
||||||
|
id: genre,
|
||||||
|
name: genre
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return tagList.sort(sortByName);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'ratings',
|
||||||
|
label: 'Rating',
|
||||||
|
type: filterBuilderTypes.NUMBER
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'certification',
|
||||||
|
label: 'Certification',
|
||||||
|
type: filterBuilderTypes.EXACT
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'isExcluded',
|
||||||
|
label: 'On Excluded List',
|
||||||
|
type: filterBuilderTypes.EXACT,
|
||||||
|
valueType: filterBuilderValueTypes.BOOL
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'isExisting',
|
||||||
|
label: 'Exists in Library',
|
||||||
|
type: filterBuilderTypes.EXACT,
|
||||||
|
valueType: filterBuilderValueTypes.BOOL
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
export const persistState = [
|
||||||
|
'discoverMovie.defaults',
|
||||||
|
'discoverMovie.sortKey',
|
||||||
|
'discoverMovie.sortDirection',
|
||||||
|
'discoverMovie.selectedFilterKey',
|
||||||
|
'discoverMovie.customFilters',
|
||||||
|
'discoverMovie.view',
|
||||||
|
'discoverMovie.columns',
|
||||||
|
'discoverMovie.posterOptions',
|
||||||
|
'discoverMovie.overviewOptions',
|
||||||
|
'discoverMovie.tableOptions'
|
||||||
|
];
|
||||||
|
|
||||||
|
//
|
||||||
|
// Actions Types
|
||||||
|
|
||||||
|
export const ADD_MOVIE = 'discoverMovie/addMovie';
|
||||||
|
export const ADD_MOVIES = 'discoverMovie/addMovies';
|
||||||
|
export const SET_ADD_MOVIE_VALUE = 'discoverMovie/setAddMovieValue';
|
||||||
|
export const CLEAR_ADD_MOVIE = 'discoverMovie/clearAddMovie';
|
||||||
|
export const SET_ADD_MOVIE_DEFAULT = 'discoverMovie/setAddMovieDefault';
|
||||||
|
|
||||||
|
export const FETCH_DISCOVER_MOVIES = 'discoverMovie/fetchDiscoverMovies';
|
||||||
|
|
||||||
|
export const SET_LIST_MOVIE_SORT = 'discoverMovie/setListMovieSort';
|
||||||
|
export const SET_LIST_MOVIE_FILTER = 'discoverMovie/setListMovieFilter';
|
||||||
|
export const SET_LIST_MOVIE_VIEW = 'discoverMovie/setListMovieView';
|
||||||
|
export const SET_LIST_MOVIE_TABLE_OPTION = 'discoverMovie/setListMovieTableOption';
|
||||||
|
export const SET_LIST_MOVIE_POSTER_OPTION = 'discoverMovie/setListMoviePosterOption';
|
||||||
|
export const SET_LIST_MOVIE_OVERVIEW_OPTION = 'discoverMovie/setListMovieOverviewOption';
|
||||||
|
|
||||||
|
export const ADD_NET_IMPORT_EXCLUSIONS = 'discoverMovie/addNetImportExclusions';
|
||||||
|
|
||||||
|
//
|
||||||
|
// Action Creators
|
||||||
|
|
||||||
|
export const addMovie = createThunk(ADD_MOVIE);
|
||||||
|
export const addMovies = createThunk(ADD_MOVIES);
|
||||||
|
export const clearAddMovie = createAction(CLEAR_ADD_MOVIE);
|
||||||
|
export const setAddMovieDefault = createAction(SET_ADD_MOVIE_DEFAULT);
|
||||||
|
|
||||||
|
export const fetchDiscoverMovies = createThunk(FETCH_DISCOVER_MOVIES);
|
||||||
|
|
||||||
|
export const setListMovieSort = createAction(SET_LIST_MOVIE_SORT);
|
||||||
|
export const setListMovieFilter = createAction(SET_LIST_MOVIE_FILTER);
|
||||||
|
export const setListMovieView = createAction(SET_LIST_MOVIE_VIEW);
|
||||||
|
export const setListMovieTableOption = createAction(SET_LIST_MOVIE_TABLE_OPTION);
|
||||||
|
export const setListMoviePosterOption = createAction(SET_LIST_MOVIE_POSTER_OPTION);
|
||||||
|
export const setListMovieOverviewOption = createAction(SET_LIST_MOVIE_OVERVIEW_OPTION);
|
||||||
|
|
||||||
|
export const addNetImportExclusions = createThunk(ADD_NET_IMPORT_EXCLUSIONS);
|
||||||
|
|
||||||
|
export const setAddMovieValue = createAction(SET_ADD_MOVIE_VALUE, (payload) => {
|
||||||
|
return {
|
||||||
|
section,
|
||||||
|
...payload
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
//
|
||||||
|
// Action Handlers
|
||||||
|
|
||||||
|
export const actionHandlers = handleThunks({
|
||||||
|
|
||||||
|
[FETCH_DISCOVER_MOVIES]: function(getState, payload, dispatch) {
|
||||||
|
dispatch(set({ section, isFetching: true }));
|
||||||
|
|
||||||
|
const {
|
||||||
|
id,
|
||||||
|
...otherPayload
|
||||||
|
} = payload;
|
||||||
|
|
||||||
|
const promise = createAjaxRequest({
|
||||||
|
url: '/movies/discover',
|
||||||
|
data: otherPayload,
|
||||||
|
traditional: true
|
||||||
|
}).request;
|
||||||
|
|
||||||
|
promise.done((data) => {
|
||||||
|
// set an Id so the selectors and updaters done blow up.
|
||||||
|
data = data.map((movie) => ({ ...movie, id: movie.tmdbId }));
|
||||||
|
|
||||||
|
dispatch(batchActions([
|
||||||
|
...data.map((movie) => updateItem({ section, ...movie })),
|
||||||
|
|
||||||
|
set({
|
||||||
|
section,
|
||||||
|
isFetching: false,
|
||||||
|
isPopulated: true,
|
||||||
|
error: null
|
||||||
|
})
|
||||||
|
]));
|
||||||
|
});
|
||||||
|
|
||||||
|
promise.fail((xhr) => {
|
||||||
|
dispatch(set({
|
||||||
|
section,
|
||||||
|
isFetching: false,
|
||||||
|
isPopulated: false,
|
||||||
|
error: xhr.aborted ? null : xhr
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
[ADD_MOVIE]: function(getState, payload, dispatch) {
|
||||||
|
dispatch(set({ section, isAdding: true }));
|
||||||
|
|
||||||
|
const tmdbId = payload.tmdbId;
|
||||||
|
const items = getState().discoverMovie.items;
|
||||||
|
const itemToUpdate = _.find(items, { tmdbId });
|
||||||
|
|
||||||
|
const newMovie = getNewMovie(_.cloneDeep(itemToUpdate), payload);
|
||||||
|
newMovie.id = 0;
|
||||||
|
|
||||||
|
const promise = createAjaxRequest({
|
||||||
|
url: '/movie',
|
||||||
|
method: 'POST',
|
||||||
|
contentType: 'application/json',
|
||||||
|
data: JSON.stringify(newMovie)
|
||||||
|
}).request;
|
||||||
|
|
||||||
|
promise.done((data) => {
|
||||||
|
dispatch(batchActions([
|
||||||
|
updateItem({ section: 'movies', ...data }),
|
||||||
|
|
||||||
|
removeItem({ section: 'discoverMovie', ...itemToUpdate }),
|
||||||
|
|
||||||
|
set({
|
||||||
|
section,
|
||||||
|
isAdding: false,
|
||||||
|
isAdded: true,
|
||||||
|
addError: null
|
||||||
|
})
|
||||||
|
]));
|
||||||
|
});
|
||||||
|
|
||||||
|
promise.fail((xhr) => {
|
||||||
|
dispatch(set({
|
||||||
|
section,
|
||||||
|
isAdding: false,
|
||||||
|
isAdded: false,
|
||||||
|
addError: xhr
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
[ADD_MOVIES]: function(getState, payload, dispatch) {
|
||||||
|
dispatch(set({ section, isAdding: true }));
|
||||||
|
|
||||||
|
const ids = payload.ids;
|
||||||
|
const addOptions = payload.addOptions;
|
||||||
|
const items = getState().discoverMovie.items;
|
||||||
|
const addedIds = [];
|
||||||
|
|
||||||
|
const allNewMovies = ids.reduce((acc, id) => {
|
||||||
|
const item = items.find((i) => i.id === id);
|
||||||
|
const selectedMovie = item;
|
||||||
|
|
||||||
|
// Make sure we have a selected movie and
|
||||||
|
// the same movie hasn't been added yet.
|
||||||
|
if (selectedMovie && !acc.some((a) => a.tmdbId === selectedMovie.tmdbId)) {
|
||||||
|
const newMovie = getNewMovie(_.cloneDeep(selectedMovie), addOptions);
|
||||||
|
newMovie.id = 0;
|
||||||
|
|
||||||
|
addedIds.push(id);
|
||||||
|
acc.push(newMovie);
|
||||||
|
}
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const promise = createAjaxRequest({
|
||||||
|
url: '/movie/import',
|
||||||
|
method: 'POST',
|
||||||
|
contentType: 'application/json',
|
||||||
|
data: JSON.stringify(allNewMovies)
|
||||||
|
}).request;
|
||||||
|
|
||||||
|
promise.done((data) => {
|
||||||
|
dispatch(batchActions([
|
||||||
|
set({
|
||||||
|
section,
|
||||||
|
isAdding: false,
|
||||||
|
isAdded: true
|
||||||
|
}),
|
||||||
|
|
||||||
|
...data.map((movie) => updateItem({ section: 'movies', ...movie })),
|
||||||
|
|
||||||
|
...addedIds.map((id) => removeItem({ section, id }))
|
||||||
|
]));
|
||||||
|
});
|
||||||
|
|
||||||
|
promise.fail((xhr) => {
|
||||||
|
dispatch(batchActions(
|
||||||
|
set({
|
||||||
|
section,
|
||||||
|
isImporting: false,
|
||||||
|
isImported: true
|
||||||
|
}),
|
||||||
|
|
||||||
|
addedIds.map((id) => updateItem({
|
||||||
|
section,
|
||||||
|
id,
|
||||||
|
importError: xhr
|
||||||
|
}))
|
||||||
|
));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
[ADD_NET_IMPORT_EXCLUSIONS]: function(getState, payload, dispatch) {
|
||||||
|
|
||||||
|
const ids = payload.ids;
|
||||||
|
const items = getState().discoverMovie.items;
|
||||||
|
|
||||||
|
const exclusions = ids.reduce((acc, id) => {
|
||||||
|
const item = items.find((i) => i.tmdbId === id);
|
||||||
|
|
||||||
|
const newExclusion = {
|
||||||
|
tmdbId: id,
|
||||||
|
movieTitle: item.title,
|
||||||
|
movieYear: item.year
|
||||||
|
};
|
||||||
|
|
||||||
|
acc.push(newExclusion);
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const promise = createAjaxRequest({
|
||||||
|
url: '/exclusions',
|
||||||
|
method: 'POST',
|
||||||
|
data: JSON.stringify(exclusions)
|
||||||
|
}).request;
|
||||||
|
|
||||||
|
promise.done((data) => {
|
||||||
|
dispatch(batchActions([
|
||||||
|
...data.map((item) => updateItem({ section: 'settings.netImportExclusions', ...item })),
|
||||||
|
|
||||||
|
...data.map((item) => updateItem({ section, id: item.tmdbId, isExcluded: true })),
|
||||||
|
|
||||||
|
set({
|
||||||
|
section,
|
||||||
|
isSaving: false,
|
||||||
|
saveError: null
|
||||||
|
})
|
||||||
|
]));
|
||||||
|
});
|
||||||
|
|
||||||
|
promise.fail((xhr) => {
|
||||||
|
dispatch(set({
|
||||||
|
section,
|
||||||
|
isSaving: false,
|
||||||
|
saveError: xhr
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//
|
||||||
|
// Reducers
|
||||||
|
|
||||||
|
export const reducers = createHandleActions({
|
||||||
|
|
||||||
|
[SET_ADD_MOVIE_VALUE]: createSetSettingValueReducer(section),
|
||||||
|
|
||||||
|
[SET_ADD_MOVIE_DEFAULT]: function(state, { payload }) {
|
||||||
|
const newState = getSectionState(state, section);
|
||||||
|
|
||||||
|
newState.defaults = {
|
||||||
|
...newState.defaults,
|
||||||
|
...payload
|
||||||
|
};
|
||||||
|
|
||||||
|
return updateSectionState(state, section, newState);
|
||||||
|
},
|
||||||
|
|
||||||
|
[SET_LIST_MOVIE_SORT]: createSetClientSideCollectionSortReducer(section),
|
||||||
|
[SET_LIST_MOVIE_FILTER]: createSetClientSideCollectionFilterReducer(section),
|
||||||
|
|
||||||
|
[SET_LIST_MOVIE_VIEW]: function(state, { payload }) {
|
||||||
|
return Object.assign({}, state, { view: payload.view });
|
||||||
|
},
|
||||||
|
|
||||||
|
[SET_LIST_MOVIE_TABLE_OPTION]: createSetTableOptionReducer(section),
|
||||||
|
|
||||||
|
[SET_LIST_MOVIE_POSTER_OPTION]: function(state, { payload }) {
|
||||||
|
const posterOptions = state.posterOptions;
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
posterOptions: {
|
||||||
|
...posterOptions,
|
||||||
|
...payload
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
[SET_LIST_MOVIE_OVERVIEW_OPTION]: function(state, { payload }) {
|
||||||
|
const overviewOptions = state.overviewOptions;
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
overviewOptions: {
|
||||||
|
...overviewOptions,
|
||||||
|
...payload
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
[CLEAR_ADD_MOVIE]: createClearReducer(section, {
|
||||||
|
isFetching: false,
|
||||||
|
isPopulated: false,
|
||||||
|
error: null,
|
||||||
|
items: []
|
||||||
|
})
|
||||||
|
|
||||||
|
}, defaultState, section);
|
@ -5,6 +5,7 @@ import * as calendar from './calendarActions';
|
|||||||
import * as captcha from './captchaActions';
|
import * as captcha from './captchaActions';
|
||||||
import * as customFilters from './customFilterActions';
|
import * as customFilters from './customFilterActions';
|
||||||
import * as commands from './commandActions';
|
import * as commands from './commandActions';
|
||||||
|
import * as discoverMovie from './discoverMovieActions';
|
||||||
import * as movieFiles from './movieFileActions';
|
import * as movieFiles from './movieFileActions';
|
||||||
import * as extraFiles from './extraFileActions';
|
import * as extraFiles from './extraFileActions';
|
||||||
import * as history from './historyActions';
|
import * as history from './historyActions';
|
||||||
@ -33,6 +34,7 @@ export default [
|
|||||||
captcha,
|
captcha,
|
||||||
commands,
|
commands,
|
||||||
customFilters,
|
customFilters,
|
||||||
|
discoverMovie,
|
||||||
movieFiles,
|
movieFiles,
|
||||||
extraFiles,
|
extraFiles,
|
||||||
history,
|
history,
|
||||||
|
@ -26,11 +26,11 @@ function createUnoptimizedSelector(uiSection) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function createAddMovieClientSideCollectionItemsSelector(uiSection) {
|
function createDiscoverMovieClientSideCollectionItemsSelector(uiSection) {
|
||||||
return createDeepEqualSelector(
|
return createDeepEqualSelector(
|
||||||
createUnoptimizedSelector(uiSection),
|
createUnoptimizedSelector(uiSection),
|
||||||
(movies) => movies
|
(movies) => movies
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default createAddMovieClientSideCollectionItemsSelector;
|
export default createDiscoverMovieClientSideCollectionItemsSelector;
|
@ -1,13 +1,13 @@
|
|||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
|
|
||||||
function createAddListMovieSelector() {
|
function createDiscoverMovieSelector() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
(state, { movieId }) => movieId,
|
(state, { movieId }) => movieId,
|
||||||
(state) => state.addMovie,
|
(state) => state.discoverMovie,
|
||||||
(movieId, allMovies) => {
|
(movieId, allMovies) => {
|
||||||
return allMovies.items.find((movie) => movie.tmdbId === movieId);
|
return allMovies.items.find((movie) => movie.tmdbId === movieId);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default createAddListMovieSelector;
|
export default createDiscoverMovieSelector;
|
@ -1,6 +1,6 @@
|
|||||||
const scrollPositions = {
|
const scrollPositions = {
|
||||||
movieIndex: 0,
|
movieIndex: 0,
|
||||||
addMovie: 0
|
discoverMovie: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
export default scrollPositions;
|
export default scrollPositions;
|
||||||
|
@ -47,7 +47,7 @@ module.exports = {
|
|||||||
modalBodyPadding: '30px',
|
modalBodyPadding: '30px',
|
||||||
|
|
||||||
// Movie
|
// Movie
|
||||||
movieIndexColumnPadding: '20px',
|
movieIndexColumnPadding: '10px',
|
||||||
movieIndexColumnPaddingSmallScreen: '10px',
|
movieIndexColumnPaddingSmallScreen: '5px',
|
||||||
movieIndexOverviewInfoRowHeight: '21px'
|
movieIndexOverviewInfoRowHeight: '21px'
|
||||||
};
|
};
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import areAllSelected from './areAllSelected';
|
import areAllSelected from './areAllSelected';
|
||||||
import getToggledRange from './getToggledRange';
|
import getToggledRange from './getToggledRange';
|
||||||
|
|
||||||
function toggleSelected(state, items, id, selected, shiftKey) {
|
function toggleSelected(state, items, id, selected, shiftKey, idProp = 'id') {
|
||||||
const lastToggled = state.lastToggled;
|
const lastToggled = state.lastToggled;
|
||||||
const selectedState = {
|
const selectedState = {
|
||||||
...state.selectedState,
|
...state.selectedState,
|
||||||
@ -16,7 +16,7 @@ function toggleSelected(state, items, id, selected, shiftKey) {
|
|||||||
const { lower, upper } = getToggledRange(items, id, lastToggled);
|
const { lower, upper } = getToggledRange(items, id, lastToggled);
|
||||||
|
|
||||||
for (let i = lower; i < upper; i++) {
|
for (let i = lower; i < upper; i++) {
|
||||||
selectedState[items[i].id] = selected;
|
selectedState[items[i][idProp]] = selected;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -11,6 +11,7 @@ public interface IImportExclusionsService
|
|||||||
List<ImportExclusion> GetAllExclusions();
|
List<ImportExclusion> GetAllExclusions();
|
||||||
bool IsMovieExcluded(int tmdbId);
|
bool IsMovieExcluded(int tmdbId);
|
||||||
ImportExclusion AddExclusion(ImportExclusion exclusion);
|
ImportExclusion AddExclusion(ImportExclusion exclusion);
|
||||||
|
List<ImportExclusion> AddExclusions(List<ImportExclusion> exclusions);
|
||||||
void RemoveExclusion(ImportExclusion exclusion);
|
void RemoveExclusion(ImportExclusion exclusion);
|
||||||
ImportExclusion GetById(int id);
|
ImportExclusion GetById(int id);
|
||||||
}
|
}
|
||||||
@ -37,6 +38,13 @@ public ImportExclusion AddExclusion(ImportExclusion exclusion)
|
|||||||
return _exclusionRepository.Insert(exclusion);
|
return _exclusionRepository.Insert(exclusion);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public List<ImportExclusion> AddExclusions(List<ImportExclusion> exclusions)
|
||||||
|
{
|
||||||
|
_exclusionRepository.InsertMany(exclusions);
|
||||||
|
|
||||||
|
return exclusions;
|
||||||
|
}
|
||||||
|
|
||||||
public List<ImportExclusion> GetAllExclusions()
|
public List<ImportExclusion> GetAllExclusions()
|
||||||
{
|
{
|
||||||
return _exclusionRepository.All().ToList();
|
return _exclusionRepository.All().ToList();
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
using NzbDrone.Core.NetImport;
|
using NzbDrone.Core.NetImport;
|
||||||
using NzbDrone.Core.NetImport.ImportExclusions;
|
using NzbDrone.Core.NetImport.ImportExclusions;
|
||||||
using Radarr.Http;
|
using Radarr.Http;
|
||||||
|
using Radarr.Http.Extensions;
|
||||||
|
|
||||||
namespace Radarr.Api.V3.NetImport
|
namespace Radarr.Api.V3.NetImport
|
||||||
{
|
{
|
||||||
@ -15,9 +16,9 @@ public ImportExclusionsModule(NetImportFactory netImportFactory, IImportExclusio
|
|||||||
{
|
{
|
||||||
_exclusionService = exclusionService;
|
_exclusionService = exclusionService;
|
||||||
GetResourceAll = GetAll;
|
GetResourceAll = GetAll;
|
||||||
CreateResource = AddExclusion;
|
|
||||||
DeleteResource = RemoveExclusion;
|
DeleteResource = RemoveExclusion;
|
||||||
GetResourceById = GetById;
|
GetResourceById = GetById;
|
||||||
|
Post("/", x => AddExclusions());
|
||||||
|
|
||||||
SharedValidator.RuleFor(c => c.TmdbId).GreaterThan(0);
|
SharedValidator.RuleFor(c => c.TmdbId).GreaterThan(0);
|
||||||
SharedValidator.RuleFor(c => c.MovieTitle).NotEmpty();
|
SharedValidator.RuleFor(c => c.MovieTitle).NotEmpty();
|
||||||
@ -34,12 +35,13 @@ public ImportExclusionsResource GetById(int id)
|
|||||||
return _exclusionService.GetById(id).ToResource();
|
return _exclusionService.GetById(id).ToResource();
|
||||||
}
|
}
|
||||||
|
|
||||||
public int AddExclusion(ImportExclusionsResource exclusionResource)
|
public object AddExclusions()
|
||||||
{
|
{
|
||||||
var model = exclusionResource.ToModel();
|
var resource = Request.Body.FromJson<List<ImportExclusionsResource>>();
|
||||||
|
var newMovies = resource.ToModel();
|
||||||
|
|
||||||
// TODO: Add some more validation here and auto pull the title if not provided
|
// TODO: Add some more validation here and auto pull the title if not provided
|
||||||
return _exclusionService.AddExclusion(model).Id;
|
return _exclusionService.AddExclusions(newMovies).ToResource();
|
||||||
}
|
}
|
||||||
|
|
||||||
public void RemoveExclusion(int id)
|
public void RemoveExclusion(int id)
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
using System.Collections.Generic;
|
using System.Collections.Generic;
|
||||||
using System.Linq;
|
using System.Linq;
|
||||||
|
using NzbDrone.Core.NetImport.ImportExclusions;
|
||||||
|
|
||||||
namespace Radarr.Api.V3.NetImport
|
namespace Radarr.Api.V3.NetImport
|
||||||
{
|
{
|
||||||
@ -13,7 +14,7 @@ public class ImportExclusionsResource : ProviderResource
|
|||||||
|
|
||||||
public static class ImportExclusionsResourceMapper
|
public static class ImportExclusionsResourceMapper
|
||||||
{
|
{
|
||||||
public static ImportExclusionsResource ToResource(this NzbDrone.Core.NetImport.ImportExclusions.ImportExclusion model)
|
public static ImportExclusionsResource ToResource(this ImportExclusion model)
|
||||||
{
|
{
|
||||||
if (model == null)
|
if (model == null)
|
||||||
{
|
{
|
||||||
@ -29,19 +30,24 @@ public static ImportExclusionsResource ToResource(this NzbDrone.Core.NetImport.I
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
public static List<ImportExclusionsResource> ToResource(this IEnumerable<NzbDrone.Core.NetImport.ImportExclusions.ImportExclusion> exclusions)
|
public static List<ImportExclusionsResource> ToResource(this IEnumerable<ImportExclusion> exclusions)
|
||||||
{
|
{
|
||||||
return exclusions.Select(ToResource).ToList();
|
return exclusions.Select(ToResource).ToList();
|
||||||
}
|
}
|
||||||
|
|
||||||
public static NzbDrone.Core.NetImport.ImportExclusions.ImportExclusion ToModel(this ImportExclusionsResource resource)
|
public static ImportExclusion ToModel(this ImportExclusionsResource resource)
|
||||||
{
|
{
|
||||||
return new NzbDrone.Core.NetImport.ImportExclusions.ImportExclusion
|
return new ImportExclusion
|
||||||
{
|
{
|
||||||
TmdbId = resource.TmdbId,
|
TmdbId = resource.TmdbId,
|
||||||
MovieTitle = resource.MovieTitle,
|
MovieTitle = resource.MovieTitle,
|
||||||
MovieYear = resource.MovieYear
|
MovieYear = resource.MovieYear
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public static List<ImportExclusion> ToModel(this IEnumerable<ImportExclusionsResource> resources)
|
||||||
|
{
|
||||||
|
return resources.Select(ToModel).ToList();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user