mirror of https://github.com/Radarr/Radarr
New: Add List and Discovery Pages (#3803)
This commit is contained in:
parent
5f396a53c3
commit
21ed073f29
|
@ -0,0 +1,163 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import dimensions from 'Styles/Variables/dimensions';
|
||||||
|
import createAddMovieClientSideCollectionItemsSelector from 'Store/Selectors/createAddMovieClientSideCollectionItemsSelector';
|
||||||
|
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||||
|
import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
|
||||||
|
import { fetchDiscoverMovies, 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';
|
||||||
|
|
||||||
|
const POSTERS_PADDING = 15;
|
||||||
|
const POSTERS_PADDING_SMALL_SCREEN = 5;
|
||||||
|
const TABLE_PADDING = parseInt(dimensions.pageContentBodyPadding);
|
||||||
|
const TABLE_PADDING_SMALL_SCREEN = parseInt(dimensions.pageContentBodyPaddingSmallScreen);
|
||||||
|
|
||||||
|
// If the scrollTop is greater than zero it needs to be offset
|
||||||
|
// by the padding so when it is set initially so it is correct
|
||||||
|
// after React Virtualized takes the padding into account.
|
||||||
|
|
||||||
|
function getScrollTop(view, scrollTop, isSmallScreen) {
|
||||||
|
if (scrollTop === 0) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
let padding = isSmallScreen ? TABLE_PADDING_SMALL_SCREEN : TABLE_PADDING;
|
||||||
|
|
||||||
|
if (view === 'posters') {
|
||||||
|
padding = isSmallScreen ? POSTERS_PADDING_SMALL_SCREEN : POSTERS_PADDING;
|
||||||
|
}
|
||||||
|
|
||||||
|
return scrollTop + padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
createAddMovieClientSideCollectionItemsSelector('addMovie'),
|
||||||
|
createDimensionsSelector(),
|
||||||
|
(
|
||||||
|
movies,
|
||||||
|
dimensionsState
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
...movies,
|
||||||
|
isSmallScreen: dimensionsState.isSmallScreen
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createMapDispatchToProps(dispatch, props) {
|
||||||
|
return {
|
||||||
|
dispatchFetchRootFolders() {
|
||||||
|
dispatch(fetchRootFolders());
|
||||||
|
},
|
||||||
|
|
||||||
|
dispatchClearListMovie() {
|
||||||
|
dispatch(clearAddMovie());
|
||||||
|
},
|
||||||
|
|
||||||
|
dispatchFetchListMovies() {
|
||||||
|
dispatch(fetchDiscoverMovies());
|
||||||
|
},
|
||||||
|
|
||||||
|
onTableOptionChange(payload) {
|
||||||
|
dispatch(setListMovieTableOption(payload));
|
||||||
|
},
|
||||||
|
|
||||||
|
onSortSelect(sortKey) {
|
||||||
|
dispatch(setListMovieSort({ sortKey }));
|
||||||
|
},
|
||||||
|
|
||||||
|
onFilterSelect(selectedFilterKey) {
|
||||||
|
dispatch(setListMovieFilter({ selectedFilterKey }));
|
||||||
|
},
|
||||||
|
|
||||||
|
dispatchSetListMovieView(view) {
|
||||||
|
dispatch(setListMovieView({ view }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
class AddDiscoverMovieConnector extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
const {
|
||||||
|
view,
|
||||||
|
scrollTop,
|
||||||
|
isSmallScreen
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
scrollTop: getScrollTop(view, scrollTop, isSmallScreen)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
registerPagePopulator(this.repopulate);
|
||||||
|
this.props.dispatchFetchRootFolders();
|
||||||
|
this.props.dispatchFetchListMovies();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.props.dispatchClearListMovie();
|
||||||
|
unregisterPagePopulator(this.repopulate);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onViewSelect = (view) => {
|
||||||
|
// Reset the scroll position before changing the view
|
||||||
|
this.setState({ scrollTop: 0 }, () => {
|
||||||
|
this.props.dispatchSetListMovieView(view);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onScroll = ({ scrollTop }) => {
|
||||||
|
this.setState({
|
||||||
|
scrollTop
|
||||||
|
}, () => {
|
||||||
|
scrollPositions.addMovie = scrollTop;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<AddListMovie
|
||||||
|
{...this.props}
|
||||||
|
scrollTop={this.state.scrollTop}
|
||||||
|
onViewSelect={this.onViewSelect}
|
||||||
|
onScroll={this.onScroll}
|
||||||
|
onSaveSelected={this.onSaveSelected}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddDiscoverMovieConnector.propTypes = {
|
||||||
|
isSmallScreen: PropTypes.bool.isRequired,
|
||||||
|
view: PropTypes.string.isRequired,
|
||||||
|
scrollTop: PropTypes.number.isRequired,
|
||||||
|
dispatchFetchRootFolders: PropTypes.func.isRequired,
|
||||||
|
dispatchFetchListMovies: PropTypes.func.isRequired,
|
||||||
|
dispatchClearListMovie: PropTypes.func.isRequired,
|
||||||
|
dispatchSetListMovieView: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default withScrollPosition(
|
||||||
|
connect(createMapStateToProps, createMapDispatchToProps)(AddDiscoverMovieConnector),
|
||||||
|
'addMovie'
|
||||||
|
);
|
|
@ -0,0 +1,363 @@
|
||||||
|
import _ from 'lodash';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
|
||||||
|
import { align, icons, sortDirections } from 'Helpers/Props';
|
||||||
|
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||||
|
import PageContent from 'Components/Page/PageContent';
|
||||||
|
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
|
||||||
|
import PageJumpBar from 'Components/Page/PageJumpBar';
|
||||||
|
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
|
||||||
|
import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
|
||||||
|
import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
|
||||||
|
import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
|
||||||
|
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
|
||||||
|
import AddListMovieTableConnector from './Table/AddListMovieTableConnector';
|
||||||
|
import AddListMoviePosterOptionsModal from './Posters/Options/AddListMoviePosterOptionsModal';
|
||||||
|
import AddListMoviePostersConnector from './Posters/AddListMoviePostersConnector';
|
||||||
|
import AddListMovieOverviewOptionsModal from './Overview/Options/AddListMovieOverviewOptionsModal';
|
||||||
|
import AddListMovieOverviewsConnector from './Overview/AddListMovieOverviewsConnector';
|
||||||
|
import AddListMovieFilterMenu from 'AddMovie/AddListMovie/Menus/AddListMovieFilterMenu';
|
||||||
|
import AddListMovieSortMenu from 'AddMovie/AddListMovie/Menus/AddListMovieSortMenu';
|
||||||
|
import AddListMovieViewMenu from 'AddMovie/AddListMovie/Menus/AddListMovieViewMenu';
|
||||||
|
import styles from 'Movie/Index/MovieIndex.css';
|
||||||
|
|
||||||
|
function getViewComponent(view) {
|
||||||
|
if (view === 'posters') {
|
||||||
|
return AddListMoviePostersConnector;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (view === 'overview') {
|
||||||
|
return AddListMovieOverviewsConnector;
|
||||||
|
}
|
||||||
|
|
||||||
|
return AddListMovieTableConnector;
|
||||||
|
}
|
||||||
|
|
||||||
|
class AddListMovie extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
contentBody: null,
|
||||||
|
jumpBarItems: [],
|
||||||
|
jumpToCharacter: null,
|
||||||
|
isPosterOptionsModalOpen: false,
|
||||||
|
isOverviewOptionsModalOpen: false,
|
||||||
|
isConfirmSearchModalOpen: false,
|
||||||
|
searchType: null,
|
||||||
|
lastToggled: null,
|
||||||
|
isRendered: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.setJumpBarItems();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
const {
|
||||||
|
items,
|
||||||
|
sortKey,
|
||||||
|
sortDirection,
|
||||||
|
scrollTop
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
if (
|
||||||
|
hasDifferentItems(prevProps.items, items) ||
|
||||||
|
sortKey !== prevProps.sortKey ||
|
||||||
|
sortDirection !== prevProps.sortDirection
|
||||||
|
) {
|
||||||
|
this.setJumpBarItems();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.state.jumpToCharacter != null && scrollTop !== prevProps.scrollTop) {
|
||||||
|
this.setState({ jumpToCharacter: null });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Control
|
||||||
|
|
||||||
|
setContentBodyRef = (ref) => {
|
||||||
|
this.setState({ contentBody: ref });
|
||||||
|
}
|
||||||
|
|
||||||
|
setJumpBarItems() {
|
||||||
|
const {
|
||||||
|
items,
|
||||||
|
sortKey,
|
||||||
|
sortDirection
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
// Reset if not sorting by sortTitle
|
||||||
|
if (sortKey !== 'sortTitle') {
|
||||||
|
this.setState({ jumpBarItems: [] });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const characters = _.reduce(items, (acc, item) => {
|
||||||
|
|
||||||
|
const firstCharacter = item.sortTitle.charAt(0);
|
||||||
|
|
||||||
|
if (isNaN(firstCharacter)) {
|
||||||
|
acc.push(firstCharacter);
|
||||||
|
} else {
|
||||||
|
acc.push('#');
|
||||||
|
}
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, []).sort();
|
||||||
|
|
||||||
|
// Reverse if sorting descending
|
||||||
|
if (sortDirection === sortDirections.DESCENDING) {
|
||||||
|
characters.reverse();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({ jumpBarItems: _.sortedUniq(characters) });
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onPosterOptionsPress = () => {
|
||||||
|
this.setState({ isPosterOptionsModalOpen: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
onPosterOptionsModalClose = () => {
|
||||||
|
this.setState({ isPosterOptionsModalOpen: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
onOverviewOptionsPress = () => {
|
||||||
|
this.setState({ isOverviewOptionsModalOpen: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
onOverviewOptionsModalClose = () => {
|
||||||
|
this.setState({ isOverviewOptionsModalOpen: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
onJumpBarItemPress = (jumpToCharacter) => {
|
||||||
|
this.setState({ jumpToCharacter });
|
||||||
|
}
|
||||||
|
|
||||||
|
onRender = () => {
|
||||||
|
this.setState({ isRendered: true }, () => {
|
||||||
|
const {
|
||||||
|
scrollTop,
|
||||||
|
isSmallScreen
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
if (isSmallScreen) {
|
||||||
|
// Seems to result in the view being off by 125px (distance to the top of the page)
|
||||||
|
// document.documentElement.scrollTop = document.body.scrollTop = scrollTop;
|
||||||
|
|
||||||
|
// This works, but then jumps another 1px after scrolling
|
||||||
|
document.documentElement.scrollTop = scrollTop;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onScroll = ({ scrollTop }) => {
|
||||||
|
this.props.onScroll({ scrollTop });
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
isFetching,
|
||||||
|
isPopulated,
|
||||||
|
error,
|
||||||
|
totalItems,
|
||||||
|
items,
|
||||||
|
columns,
|
||||||
|
selectedFilterKey,
|
||||||
|
filters,
|
||||||
|
customFilters,
|
||||||
|
sortKey,
|
||||||
|
sortDirection,
|
||||||
|
view,
|
||||||
|
scrollTop,
|
||||||
|
onSortSelect,
|
||||||
|
onFilterSelect,
|
||||||
|
onViewSelect,
|
||||||
|
...otherProps
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
contentBody,
|
||||||
|
jumpBarItems,
|
||||||
|
jumpToCharacter,
|
||||||
|
isPosterOptionsModalOpen,
|
||||||
|
isOverviewOptionsModalOpen,
|
||||||
|
isRendered
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const ViewComponent = getViewComponent(view);
|
||||||
|
const isLoaded = !!(!error && isPopulated && items.length && contentBody);
|
||||||
|
const hasNoMovie = !totalItems;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContent>
|
||||||
|
<PageToolbar>
|
||||||
|
<PageToolbarSection
|
||||||
|
alignContent={align.RIGHT}
|
||||||
|
collapseButtons={false}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
view === 'table' ?
|
||||||
|
<TableOptionsModalWrapper
|
||||||
|
{...otherProps}
|
||||||
|
columns={columns}
|
||||||
|
>
|
||||||
|
<PageToolbarButton
|
||||||
|
label="Options"
|
||||||
|
iconName={icons.TABLE}
|
||||||
|
/>
|
||||||
|
</TableOptionsModalWrapper> :
|
||||||
|
null
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
view === 'posters' ?
|
||||||
|
<PageToolbarButton
|
||||||
|
label="Options"
|
||||||
|
iconName={icons.POSTER}
|
||||||
|
isDisabled={hasNoMovie}
|
||||||
|
onPress={this.onPosterOptionsPress}
|
||||||
|
/> :
|
||||||
|
null
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
view === 'overview' ?
|
||||||
|
<PageToolbarButton
|
||||||
|
label="Options"
|
||||||
|
iconName={icons.OVERVIEW}
|
||||||
|
isDisabled={hasNoMovie}
|
||||||
|
onPress={this.onOverviewOptionsPress}
|
||||||
|
/> :
|
||||||
|
null
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
(view === 'posters' || view === 'overview') &&
|
||||||
|
<PageToolbarSeparator />
|
||||||
|
}
|
||||||
|
|
||||||
|
<AddListMovieViewMenu
|
||||||
|
view={view}
|
||||||
|
isDisabled={hasNoMovie}
|
||||||
|
onViewSelect={onViewSelect}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<AddListMovieSortMenu
|
||||||
|
sortKey={sortKey}
|
||||||
|
sortDirection={sortDirection}
|
||||||
|
isDisabled={hasNoMovie}
|
||||||
|
onSortSelect={onSortSelect}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<AddListMovieFilterMenu
|
||||||
|
selectedFilterKey={selectedFilterKey}
|
||||||
|
filters={filters}
|
||||||
|
customFilters={customFilters}
|
||||||
|
isDisabled={hasNoMovie}
|
||||||
|
onFilterSelect={onFilterSelect}
|
||||||
|
/>
|
||||||
|
</PageToolbarSection>
|
||||||
|
</PageToolbar>
|
||||||
|
|
||||||
|
<div className={styles.pageContentBodyWrapper}>
|
||||||
|
<PageContentBodyConnector
|
||||||
|
ref={this.setContentBodyRef}
|
||||||
|
className={styles.contentBody}
|
||||||
|
innerClassName={styles[`${view}InnerContentBody`]}
|
||||||
|
scrollTop={isRendered ? scrollTop : 0}
|
||||||
|
onScroll={this.onScroll}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
isFetching && !isPopulated &&
|
||||||
|
<LoadingIndicator />
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
!isFetching && !!error &&
|
||||||
|
<div>Unable to load movies</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
isLoaded &&
|
||||||
|
<div className={styles.contentBodyContainer}>
|
||||||
|
<ViewComponent
|
||||||
|
contentBody={contentBody}
|
||||||
|
items={items}
|
||||||
|
filters={filters}
|
||||||
|
sortKey={sortKey}
|
||||||
|
sortDirection={sortDirection}
|
||||||
|
scrollTop={scrollTop}
|
||||||
|
jumpToCharacter={jumpToCharacter}
|
||||||
|
onRender={this.onRender}
|
||||||
|
{...otherProps}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
!error && isPopulated && !items.length &&
|
||||||
|
<div className={styles.message}>
|
||||||
|
<div className={styles.noResults}>Couldn't find any results</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</PageContentBodyConnector>
|
||||||
|
|
||||||
|
{
|
||||||
|
isLoaded && !!jumpBarItems.length &&
|
||||||
|
<PageJumpBar
|
||||||
|
items={jumpBarItems}
|
||||||
|
onItemPress={this.onJumpBarItemPress}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AddListMoviePosterOptionsModal
|
||||||
|
isOpen={isPosterOptionsModalOpen}
|
||||||
|
onModalClose={this.onPosterOptionsModalClose}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<AddListMovieOverviewOptionsModal
|
||||||
|
isOpen={isOverviewOptionsModalOpen}
|
||||||
|
onModalClose={this.onOverviewOptionsModalClose}
|
||||||
|
/>
|
||||||
|
</PageContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovie.propTypes = {
|
||||||
|
isFetching: PropTypes.bool.isRequired,
|
||||||
|
isPopulated: PropTypes.bool.isRequired,
|
||||||
|
error: PropTypes.object,
|
||||||
|
totalItems: PropTypes.number.isRequired,
|
||||||
|
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
||||||
|
filters: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
sortKey: PropTypes.string,
|
||||||
|
sortDirection: PropTypes.oneOf(sortDirections.all),
|
||||||
|
view: PropTypes.string.isRequired,
|
||||||
|
scrollTop: PropTypes.number.isRequired,
|
||||||
|
isSmallScreen: PropTypes.bool.isRequired,
|
||||||
|
onSortSelect: PropTypes.func.isRequired,
|
||||||
|
onFilterSelect: PropTypes.func.isRequired,
|
||||||
|
onViewSelect: PropTypes.func.isRequired,
|
||||||
|
onScroll: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMovie;
|
|
@ -0,0 +1,163 @@
|
||||||
|
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 dimensions from 'Styles/Variables/dimensions';
|
||||||
|
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';
|
||||||
|
|
||||||
|
const POSTERS_PADDING = 15;
|
||||||
|
const POSTERS_PADDING_SMALL_SCREEN = 5;
|
||||||
|
const TABLE_PADDING = parseInt(dimensions.pageContentBodyPadding);
|
||||||
|
const TABLE_PADDING_SMALL_SCREEN = parseInt(dimensions.pageContentBodyPaddingSmallScreen);
|
||||||
|
|
||||||
|
// If the scrollTop is greater than zero it needs to be offset
|
||||||
|
// by the padding so when it is set initially so it is correct
|
||||||
|
// after React Virtualized takes the padding into account.
|
||||||
|
|
||||||
|
function getScrollTop(view, scrollTop, isSmallScreen) {
|
||||||
|
if (scrollTop === 0) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
let padding = isSmallScreen ? TABLE_PADDING_SMALL_SCREEN : TABLE_PADDING;
|
||||||
|
|
||||||
|
if (view === 'posters') {
|
||||||
|
padding = isSmallScreen ? POSTERS_PADDING_SMALL_SCREEN : POSTERS_PADDING;
|
||||||
|
}
|
||||||
|
|
||||||
|
return scrollTop + padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
const {
|
||||||
|
view,
|
||||||
|
scrollTop,
|
||||||
|
isSmallScreen
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
scrollTop: getScrollTop(view, scrollTop, isSmallScreen)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
registerPagePopulator(this.repopulate);
|
||||||
|
this.props.dispatchFetchRootFolders();
|
||||||
|
this.props.dispatchFetchListMovies();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.props.dispatchClearListMovie();
|
||||||
|
unregisterPagePopulator(this.repopulate);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onViewSelect = (view) => {
|
||||||
|
// Reset the scroll position before changing the view
|
||||||
|
this.setState({ scrollTop: 0 }, () => {
|
||||||
|
this.props.dispatchSetListMovieView(view);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onScroll = ({ scrollTop }) => {
|
||||||
|
this.setState({
|
||||||
|
scrollTop
|
||||||
|
}, () => {
|
||||||
|
scrollPositions.addMovie = scrollTop;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<AddListMovie
|
||||||
|
{...this.props}
|
||||||
|
scrollTop={this.state.scrollTop}
|
||||||
|
onViewSelect={this.onViewSelect}
|
||||||
|
onScroll={this.onScroll}
|
||||||
|
onSaveSelected={this.onSaveSelected}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieConnector.propTypes = {
|
||||||
|
isSmallScreen: PropTypes.bool.isRequired,
|
||||||
|
view: PropTypes.string.isRequired,
|
||||||
|
scrollTop: PropTypes.number.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'
|
||||||
|
);
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import { setListMovieFilter } from 'Store/Actions/addMovieActions';
|
||||||
|
import FilterModal from 'Components/Filter/FilterModal';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
(state) => state.addMovie.items,
|
||||||
|
(state) => state.addMovie.filterBuilderProps,
|
||||||
|
(sectionItems, filterBuilderProps) => {
|
||||||
|
return {
|
||||||
|
sectionItems,
|
||||||
|
filterBuilderProps,
|
||||||
|
customFilterType: 'addMovie'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapDispatchToProps = {
|
||||||
|
dispatchSetFilter: setListMovieFilter
|
||||||
|
};
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps, mapDispatchToProps)(FilterModal);
|
|
@ -0,0 +1,67 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import createAddListMovieSelector from 'Store/Selectors/createAddListMovieSelector';
|
||||||
|
import createMovieQualityProfileSelector from 'Store/Selectors/createMovieQualityProfileSelector';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
createAddListMovieSelector(),
|
||||||
|
createMovieQualityProfileSelector(),
|
||||||
|
(
|
||||||
|
movie,
|
||||||
|
qualityProfile
|
||||||
|
) => {
|
||||||
|
|
||||||
|
// If a movie is deleted this selector may fire before the parent
|
||||||
|
// selecors, which will result in an undefined movie, if that happens
|
||||||
|
// we want to return early here and again in the render function to avoid
|
||||||
|
// trying to show a movie that has no information available.
|
||||||
|
|
||||||
|
if (!movie) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...movie,
|
||||||
|
qualityProfile
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapDispatchToProps = {
|
||||||
|
};
|
||||||
|
|
||||||
|
class AddListMovieItemConnector extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
tmdbId,
|
||||||
|
component: ItemComponent,
|
||||||
|
...otherProps
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
if (!tmdbId) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ItemComponent
|
||||||
|
{...otherProps}
|
||||||
|
tmdbId={tmdbId}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieItemConnector.propTypes = {
|
||||||
|
tmdbId: PropTypes.number,
|
||||||
|
component: PropTypes.elementType.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps, mapDispatchToProps)(AddListMovieItemConnector);
|
|
@ -0,0 +1,41 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import { align } from 'Helpers/Props';
|
||||||
|
import FilterMenu from 'Components/Menu/FilterMenu';
|
||||||
|
import AddListMovieFilterModalConnector from 'AddMovie/AddListMovie/AddListMovieFilterModalConnector';
|
||||||
|
|
||||||
|
function AddListMovieFilterMenu(props) {
|
||||||
|
const {
|
||||||
|
selectedFilterKey,
|
||||||
|
filters,
|
||||||
|
customFilters,
|
||||||
|
isDisabled,
|
||||||
|
onFilterSelect
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FilterMenu
|
||||||
|
alignMenu={align.RIGHT}
|
||||||
|
isDisabled={isDisabled}
|
||||||
|
selectedFilterKey={selectedFilterKey}
|
||||||
|
filters={filters}
|
||||||
|
customFilters={customFilters}
|
||||||
|
filterModalConnectorComponent={AddListMovieFilterModalConnector}
|
||||||
|
onFilterSelect={onFilterSelect}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieFilterMenu.propTypes = {
|
||||||
|
selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
||||||
|
filters: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
isDisabled: PropTypes.bool.isRequired,
|
||||||
|
onFilterSelect: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
AddListMovieFilterMenu.defaultProps = {
|
||||||
|
showCustomFilters: false
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMovieFilterMenu;
|
|
@ -0,0 +1,78 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import { align, sortDirections } from 'Helpers/Props';
|
||||||
|
import SortMenu from 'Components/Menu/SortMenu';
|
||||||
|
import MenuContent from 'Components/Menu/MenuContent';
|
||||||
|
import SortMenuItem from 'Components/Menu/SortMenuItem';
|
||||||
|
|
||||||
|
function AddListMovieSortMenu(props) {
|
||||||
|
const {
|
||||||
|
sortKey,
|
||||||
|
sortDirection,
|
||||||
|
isDisabled,
|
||||||
|
onSortSelect
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SortMenu
|
||||||
|
isDisabled={isDisabled}
|
||||||
|
alignMenu={align.RIGHT}
|
||||||
|
>
|
||||||
|
<MenuContent>
|
||||||
|
<SortMenuItem
|
||||||
|
name="status"
|
||||||
|
sortKey={sortKey}
|
||||||
|
sortDirection={sortDirection}
|
||||||
|
onPress={onSortSelect}
|
||||||
|
>
|
||||||
|
Status
|
||||||
|
</SortMenuItem>
|
||||||
|
|
||||||
|
<SortMenuItem
|
||||||
|
name="sortTitle"
|
||||||
|
sortKey={sortKey}
|
||||||
|
sortDirection={sortDirection}
|
||||||
|
onPress={onSortSelect}
|
||||||
|
>
|
||||||
|
Title
|
||||||
|
</SortMenuItem>
|
||||||
|
|
||||||
|
<SortMenuItem
|
||||||
|
name="studio"
|
||||||
|
sortKey={sortKey}
|
||||||
|
sortDirection={sortDirection}
|
||||||
|
onPress={onSortSelect}
|
||||||
|
>
|
||||||
|
Studio
|
||||||
|
</SortMenuItem>
|
||||||
|
|
||||||
|
<SortMenuItem
|
||||||
|
name="inCinemas"
|
||||||
|
sortKey={sortKey}
|
||||||
|
sortDirection={sortDirection}
|
||||||
|
onPress={onSortSelect}
|
||||||
|
>
|
||||||
|
In Cinemas
|
||||||
|
</SortMenuItem>
|
||||||
|
|
||||||
|
<SortMenuItem
|
||||||
|
name="physicalRelease"
|
||||||
|
sortKey={sortKey}
|
||||||
|
sortDirection={sortDirection}
|
||||||
|
onPress={onSortSelect}
|
||||||
|
>
|
||||||
|
Physical Release
|
||||||
|
</SortMenuItem>
|
||||||
|
</MenuContent>
|
||||||
|
</SortMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieSortMenu.propTypes = {
|
||||||
|
sortKey: PropTypes.string,
|
||||||
|
sortDirection: PropTypes.oneOf(sortDirections.all),
|
||||||
|
isDisabled: PropTypes.bool.isRequired,
|
||||||
|
onSortSelect: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMovieSortMenu;
|
|
@ -0,0 +1,55 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import { align } from 'Helpers/Props';
|
||||||
|
import ViewMenu from 'Components/Menu/ViewMenu';
|
||||||
|
import MenuContent from 'Components/Menu/MenuContent';
|
||||||
|
import ViewMenuItem from 'Components/Menu/ViewMenuItem';
|
||||||
|
|
||||||
|
function AddListMovieViewMenu(props) {
|
||||||
|
const {
|
||||||
|
view,
|
||||||
|
isDisabled,
|
||||||
|
onViewSelect
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ViewMenu
|
||||||
|
isDisabled={isDisabled}
|
||||||
|
alignMenu={align.RIGHT}
|
||||||
|
>
|
||||||
|
<MenuContent>
|
||||||
|
<ViewMenuItem
|
||||||
|
name="table"
|
||||||
|
selectedView={view}
|
||||||
|
onPress={onViewSelect}
|
||||||
|
>
|
||||||
|
Table
|
||||||
|
</ViewMenuItem>
|
||||||
|
|
||||||
|
<ViewMenuItem
|
||||||
|
name="posters"
|
||||||
|
selectedView={view}
|
||||||
|
onPress={onViewSelect}
|
||||||
|
>
|
||||||
|
Posters
|
||||||
|
</ViewMenuItem>
|
||||||
|
|
||||||
|
<ViewMenuItem
|
||||||
|
name="overview"
|
||||||
|
selectedView={view}
|
||||||
|
onPress={onViewSelect}
|
||||||
|
>
|
||||||
|
Overview
|
||||||
|
</ViewMenuItem>
|
||||||
|
</MenuContent>
|
||||||
|
</ViewMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieViewMenu.propTypes = {
|
||||||
|
view: PropTypes.string.isRequired,
|
||||||
|
isDisabled: PropTypes.bool.isRequired,
|
||||||
|
onViewSelect: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMovieViewMenu;
|
|
@ -0,0 +1,98 @@
|
||||||
|
$hoverScale: 1.05;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
&:hover {
|
||||||
|
.content {
|
||||||
|
background-color: $tableRowHoverBackgroundColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.posterContainer {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
composes: link from '~Components/Link/Link.css';
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
color: $defaultColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $defaultColor;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ended {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
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 {
|
||||||
|
display: flex;
|
||||||
|
flex: 1 0 1px;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titleRow {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
@add-mixin truncate;
|
||||||
|
composes: link;
|
||||||
|
|
||||||
|
flex: 1 0 1px;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview {
|
||||||
|
composes: link;
|
||||||
|
|
||||||
|
flex: 0 1 1000px;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: $breakpointSmall) {
|
||||||
|
.overview {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,158 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import TextTruncate from 'react-text-truncate';
|
||||||
|
import dimensions from 'Styles/Variables/dimensions';
|
||||||
|
import fonts from 'Styles/Variables/fonts';
|
||||||
|
import MoviePoster from 'Movie/MoviePoster';
|
||||||
|
import Link from 'Components/Link/Link';
|
||||||
|
import AddNewMovieModal from 'AddMovie/AddNewMovie/AddNewMovieModal';
|
||||||
|
import styles from './AddListMovieOverview.css';
|
||||||
|
|
||||||
|
const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
|
||||||
|
const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen);
|
||||||
|
const defaultFontSize = parseInt(fonts.defaultFontSize);
|
||||||
|
const lineHeight = parseFloat(fonts.lineHeight);
|
||||||
|
|
||||||
|
// Hardcoded height beased on line-height of 32 + bottom margin of 10.
|
||||||
|
// Less side-effecty than using react-measure.
|
||||||
|
const titleRowHeight = 42;
|
||||||
|
|
||||||
|
function getContentHeight(rowHeight, isSmallScreen) {
|
||||||
|
const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
|
||||||
|
|
||||||
|
return rowHeight - padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
class AddListMovieOverview extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
isNewAddMovieModalOpen: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onPress = () => {
|
||||||
|
this.setState({ isNewAddMovieModalOpen: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddMovieModalClose = () => {
|
||||||
|
this.setState({ isNewAddMovieModalOpen: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
style,
|
||||||
|
tmdbId,
|
||||||
|
title,
|
||||||
|
titleSlug,
|
||||||
|
folder,
|
||||||
|
year,
|
||||||
|
overview,
|
||||||
|
images,
|
||||||
|
posterWidth,
|
||||||
|
posterHeight,
|
||||||
|
rowHeight,
|
||||||
|
isSmallScreen,
|
||||||
|
isExistingMovie
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
isNewAddMovieModalOpen
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const elementStyle = {
|
||||||
|
width: `${posterWidth}px`,
|
||||||
|
height: `${posterHeight}px`
|
||||||
|
};
|
||||||
|
|
||||||
|
const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
|
||||||
|
|
||||||
|
const contentHeight = getContentHeight(rowHeight, isSmallScreen);
|
||||||
|
const overviewHeight = contentHeight - titleRowHeight;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.container} style={style}>
|
||||||
|
<Link
|
||||||
|
className={styles.content}
|
||||||
|
{...linkProps}
|
||||||
|
>
|
||||||
|
<div className={styles.poster}>
|
||||||
|
<div className={styles.posterContainer}>
|
||||||
|
|
||||||
|
<MoviePoster
|
||||||
|
className={styles.poster}
|
||||||
|
style={elementStyle}
|
||||||
|
images={images}
|
||||||
|
size={250}
|
||||||
|
lazy={false}
|
||||||
|
overflow={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.info} style={{ maxHeight: contentHeight }}>
|
||||||
|
<div className={styles.titleRow}>
|
||||||
|
{title} ({year})
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.details}>
|
||||||
|
<TextTruncate
|
||||||
|
line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
|
||||||
|
text={overview}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<AddNewMovieModal
|
||||||
|
isOpen={isNewAddMovieModalOpen && !isExistingMovie}
|
||||||
|
tmdbId={tmdbId}
|
||||||
|
title={title}
|
||||||
|
year={year}
|
||||||
|
overview={overview}
|
||||||
|
folder={folder}
|
||||||
|
images={images}
|
||||||
|
onModalClose={this.onAddMovieModalClose}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieOverview.propTypes = {
|
||||||
|
style: PropTypes.object.isRequired,
|
||||||
|
tmdbId: PropTypes.number.isRequired,
|
||||||
|
title: PropTypes.string.isRequired,
|
||||||
|
folder: PropTypes.string.isRequired,
|
||||||
|
year: PropTypes.number.isRequired,
|
||||||
|
overview: PropTypes.string.isRequired,
|
||||||
|
monitored: PropTypes.bool.isRequired,
|
||||||
|
status: PropTypes.string.isRequired,
|
||||||
|
titleSlug: PropTypes.string.isRequired,
|
||||||
|
images: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
posterWidth: PropTypes.number.isRequired,
|
||||||
|
posterHeight: PropTypes.number.isRequired,
|
||||||
|
rowHeight: PropTypes.number.isRequired,
|
||||||
|
overviewOptions: PropTypes.object.isRequired,
|
||||||
|
showRelativeDates: PropTypes.bool.isRequired,
|
||||||
|
shortDateFormat: PropTypes.string.isRequired,
|
||||||
|
longDateFormat: PropTypes.string.isRequired,
|
||||||
|
timeFormat: PropTypes.string.isRequired,
|
||||||
|
isSmallScreen: PropTypes.bool.isRequired,
|
||||||
|
isExistingMovie: PropTypes.bool.isRequired,
|
||||||
|
isExclusionMovie: PropTypes.bool.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMovieOverview;
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import createExistingMovieSelector from 'Store/Selectors/createExistingMovieSelector';
|
||||||
|
import createExclusionMovieSelector from 'Store/Selectors/createExclusionMovieSelector';
|
||||||
|
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||||
|
import AddListMovieOverview from './AddListMovieOverview';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
createExistingMovieSelector(),
|
||||||
|
createExclusionMovieSelector(),
|
||||||
|
createDimensionsSelector(),
|
||||||
|
(isExistingMovie, isExclusionMovie, dimensions) => {
|
||||||
|
return {
|
||||||
|
isExistingMovie,
|
||||||
|
isExclusionMovie,
|
||||||
|
isSmallScreen: dimensions.isSmallScreen
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps)(AddListMovieOverview);
|
|
@ -0,0 +1,3 @@
|
||||||
|
.grid {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
|
@ -0,0 +1,281 @@
|
||||||
|
import _ from 'lodash';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import { Grid, WindowScroller } from 'react-virtualized';
|
||||||
|
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
|
||||||
|
import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
|
||||||
|
import dimensions from 'Styles/Variables/dimensions';
|
||||||
|
import { sortDirections } from 'Helpers/Props';
|
||||||
|
import Measure from 'Components/Measure';
|
||||||
|
import AddListMovieItemConnector from 'AddMovie/AddListMovie/AddListMovieItemConnector';
|
||||||
|
import AddListMovieOverviewConnector from './AddListMovieOverviewConnector';
|
||||||
|
import styles from './AddListMovieOverviews.css';
|
||||||
|
|
||||||
|
// Poster container dimensions
|
||||||
|
const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
|
||||||
|
const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen);
|
||||||
|
|
||||||
|
function calculatePosterWidth(posterSize, isSmallScreen) {
|
||||||
|
const maxiumPosterWidth = isSmallScreen ? 152 : 162;
|
||||||
|
|
||||||
|
if (posterSize === 'large') {
|
||||||
|
return maxiumPosterWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (posterSize === 'medium') {
|
||||||
|
return Math.floor(maxiumPosterWidth * 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Math.floor(maxiumPosterWidth * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateRowHeight(posterHeight, sortKey, isSmallScreen, overviewOptions) {
|
||||||
|
|
||||||
|
const heights = [
|
||||||
|
posterHeight,
|
||||||
|
isSmallScreen ? columnPaddingSmallScreen : columnPadding
|
||||||
|
];
|
||||||
|
|
||||||
|
return heights.reduce((acc, height) => acc + height, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculatePosterHeight(posterWidth) {
|
||||||
|
return Math.ceil((250 / 170) * posterWidth);
|
||||||
|
}
|
||||||
|
|
||||||
|
class AddListMovieOverviews extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
width: 0,
|
||||||
|
columnCount: 1,
|
||||||
|
posterWidth: 162,
|
||||||
|
posterHeight: 238,
|
||||||
|
rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {})
|
||||||
|
};
|
||||||
|
|
||||||
|
this._isInitialized = false;
|
||||||
|
this._grid = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this._contentBodyNode = ReactDOM.findDOMNode(this.props.contentBody);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
const {
|
||||||
|
items,
|
||||||
|
filters,
|
||||||
|
sortKey,
|
||||||
|
sortDirection,
|
||||||
|
overviewOptions,
|
||||||
|
jumpToCharacter
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const itemsChanged = hasDifferentItems(prevProps.items, items);
|
||||||
|
const overviewOptionsChanged = !_.isMatch(prevProps.overviewOptions, overviewOptions);
|
||||||
|
|
||||||
|
if (
|
||||||
|
prevProps.sortKey !== sortKey ||
|
||||||
|
prevProps.overviewOptions !== overviewOptions ||
|
||||||
|
itemsChanged
|
||||||
|
) {
|
||||||
|
this.calculateGrid();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
prevProps.filters !== filters ||
|
||||||
|
prevProps.sortKey !== sortKey ||
|
||||||
|
prevProps.sortDirection !== sortDirection ||
|
||||||
|
itemsChanged ||
|
||||||
|
overviewOptionsChanged
|
||||||
|
) {
|
||||||
|
this._grid.recomputeGridSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
|
||||||
|
const index = getIndexOfFirstCharacter(items, jumpToCharacter);
|
||||||
|
|
||||||
|
if (index != null) {
|
||||||
|
const {
|
||||||
|
rowHeight
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const scrollTop = rowHeight * index;
|
||||||
|
|
||||||
|
this.props.onScroll({ scrollTop });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Control
|
||||||
|
|
||||||
|
scrollToFirstCharacter(character) {
|
||||||
|
const items = this.props.items;
|
||||||
|
const {
|
||||||
|
rowHeight
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const index = getIndexOfFirstCharacter(items, character);
|
||||||
|
|
||||||
|
if (index != null) {
|
||||||
|
const scrollTop = rowHeight * index;
|
||||||
|
|
||||||
|
this.props.onScroll({ scrollTop });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setGridRef = (ref) => {
|
||||||
|
this._grid = ref;
|
||||||
|
}
|
||||||
|
|
||||||
|
calculateGrid = (width = this.state.width, isSmallScreen) => {
|
||||||
|
const {
|
||||||
|
sortKey,
|
||||||
|
overviewOptions
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const posterWidth = calculatePosterWidth(overviewOptions.size, isSmallScreen);
|
||||||
|
const posterHeight = calculatePosterHeight(posterWidth);
|
||||||
|
const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, overviewOptions);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
width,
|
||||||
|
posterWidth,
|
||||||
|
posterHeight,
|
||||||
|
rowHeight
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
cellRenderer = ({ key, rowIndex, style }) => {
|
||||||
|
const {
|
||||||
|
items,
|
||||||
|
sortKey,
|
||||||
|
overviewOptions,
|
||||||
|
showRelativeDates,
|
||||||
|
shortDateFormat,
|
||||||
|
longDateFormat,
|
||||||
|
timeFormat,
|
||||||
|
isSmallScreen
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
posterWidth,
|
||||||
|
posterHeight,
|
||||||
|
rowHeight
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const movie = items[rowIndex];
|
||||||
|
|
||||||
|
if (!movie) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AddListMovieItemConnector
|
||||||
|
key={key}
|
||||||
|
component={AddListMovieOverviewConnector}
|
||||||
|
sortKey={sortKey}
|
||||||
|
posterWidth={posterWidth}
|
||||||
|
posterHeight={posterHeight}
|
||||||
|
rowHeight={rowHeight}
|
||||||
|
overviewOptions={overviewOptions}
|
||||||
|
showRelativeDates={showRelativeDates}
|
||||||
|
shortDateFormat={shortDateFormat}
|
||||||
|
longDateFormat={longDateFormat}
|
||||||
|
timeFormat={timeFormat}
|
||||||
|
isSmallScreen={isSmallScreen}
|
||||||
|
style={style}
|
||||||
|
movieId={movie.tmdbId}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onMeasure = ({ width }) => {
|
||||||
|
this.calculateGrid(width, this.props.isSmallScreen);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSectionRendered = () => {
|
||||||
|
if (!this._isInitialized && this._contentBodyNode) {
|
||||||
|
this.props.onRender();
|
||||||
|
this._isInitialized = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
items,
|
||||||
|
scrollTop,
|
||||||
|
isSmallScreen,
|
||||||
|
onScroll
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
width,
|
||||||
|
rowHeight
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Measure onMeasure={this.onMeasure}>
|
||||||
|
<WindowScroller
|
||||||
|
scrollElement={isSmallScreen ? undefined : this._contentBodyNode}
|
||||||
|
onScroll={onScroll}
|
||||||
|
>
|
||||||
|
{({ height, isScrolling }) => {
|
||||||
|
return (
|
||||||
|
<Grid
|
||||||
|
ref={this.setGridRef}
|
||||||
|
className={styles.grid}
|
||||||
|
autoHeight={true}
|
||||||
|
height={height}
|
||||||
|
columnCount={1}
|
||||||
|
columnWidth={width}
|
||||||
|
rowCount={items.length}
|
||||||
|
rowHeight={rowHeight}
|
||||||
|
width={width}
|
||||||
|
scrollTop={scrollTop}
|
||||||
|
overscanRowCount={2}
|
||||||
|
cellRenderer={this.cellRenderer}
|
||||||
|
onSectionRendered={this.onSectionRendered}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</WindowScroller>
|
||||||
|
</Measure>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieOverviews.propTypes = {
|
||||||
|
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
filters: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
sortKey: PropTypes.string,
|
||||||
|
sortDirection: PropTypes.oneOf(sortDirections.all),
|
||||||
|
overviewOptions: PropTypes.object.isRequired,
|
||||||
|
scrollTop: PropTypes.number.isRequired,
|
||||||
|
jumpToCharacter: PropTypes.string,
|
||||||
|
contentBody: PropTypes.object.isRequired,
|
||||||
|
showRelativeDates: PropTypes.bool.isRequired,
|
||||||
|
shortDateFormat: PropTypes.string.isRequired,
|
||||||
|
longDateFormat: PropTypes.string.isRequired,
|
||||||
|
isSmallScreen: PropTypes.bool.isRequired,
|
||||||
|
timeFormat: PropTypes.string.isRequired,
|
||||||
|
onRender: PropTypes.func.isRequired,
|
||||||
|
onScroll: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMovieOverviews;
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
|
||||||
|
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||||
|
import AddListMovieOverviews from './AddListMovieOverviews';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
(state) => state.addMovie.overviewOptions,
|
||||||
|
createUISettingsSelector(),
|
||||||
|
createDimensionsSelector(),
|
||||||
|
(overviewOptions, uiSettings, dimensions) => {
|
||||||
|
return {
|
||||||
|
overviewOptions,
|
||||||
|
showRelativeDates: uiSettings.showRelativeDates,
|
||||||
|
shortDateFormat: uiSettings.shortDateFormat,
|
||||||
|
longDateFormat: uiSettings.longDateFormat,
|
||||||
|
timeFormat: uiSettings.timeFormat,
|
||||||
|
isSmallScreen: dimensions.isSmallScreen
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps)(AddListMovieOverviews);
|
|
@ -0,0 +1,25 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import Modal from 'Components/Modal/Modal';
|
||||||
|
import AddListMovieOverviewOptionsModalContentConnector from './AddListMovieOverviewOptionsModalContentConnector';
|
||||||
|
|
||||||
|
function AddListMovieOverviewOptionsModal({ isOpen, onModalClose, ...otherProps }) {
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
isOpen={isOpen}
|
||||||
|
onModalClose={onModalClose}
|
||||||
|
>
|
||||||
|
<AddListMovieOverviewOptionsModalContentConnector
|
||||||
|
{...otherProps}
|
||||||
|
onModalClose={onModalClose}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieOverviewOptionsModal.propTypes = {
|
||||||
|
isOpen: PropTypes.bool.isRequired,
|
||||||
|
onModalClose: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMovieOverviewOptionsModal;
|
|
@ -0,0 +1,132 @@
|
||||||
|
import _ from 'lodash';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { inputTypes } from 'Helpers/Props';
|
||||||
|
import Button from 'Components/Link/Button';
|
||||||
|
import Form from 'Components/Form/Form';
|
||||||
|
import FormGroup from 'Components/Form/FormGroup';
|
||||||
|
import FormLabel from 'Components/Form/FormLabel';
|
||||||
|
import FormInputGroup from 'Components/Form/FormInputGroup';
|
||||||
|
import ModalContent from 'Components/Modal/ModalContent';
|
||||||
|
import ModalHeader from 'Components/Modal/ModalHeader';
|
||||||
|
import ModalBody from 'Components/Modal/ModalBody';
|
||||||
|
import ModalFooter from 'Components/Modal/ModalFooter';
|
||||||
|
|
||||||
|
const posterSizeOptions = [
|
||||||
|
{ key: 'small', value: 'Small' },
|
||||||
|
{ key: 'medium', value: 'Medium' },
|
||||||
|
{ key: 'large', value: 'Large' }
|
||||||
|
];
|
||||||
|
|
||||||
|
class AddListMovieOverviewOptionsModalContent extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
size: props.size,
|
||||||
|
showStudio: props.showStudio
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
const {
|
||||||
|
size,
|
||||||
|
showStudio
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const state = {};
|
||||||
|
|
||||||
|
if (size !== prevProps.size) {
|
||||||
|
state.size = size;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showStudio !== prevProps.showStudio) {
|
||||||
|
state.showStudio = showStudio;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!_.isEmpty(state)) {
|
||||||
|
this.setState(state);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onChangeOverviewOption = ({ name, value }) => {
|
||||||
|
this.setState({
|
||||||
|
[name]: value
|
||||||
|
}, () => {
|
||||||
|
this.props.onChangeOverviewOption({ [name]: value });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
onModalClose
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
size,
|
||||||
|
showStudio
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalContent onModalClose={onModalClose}>
|
||||||
|
<ModalHeader>
|
||||||
|
Overview Options
|
||||||
|
</ModalHeader>
|
||||||
|
|
||||||
|
<ModalBody>
|
||||||
|
<Form>
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Poster Size</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.SELECT}
|
||||||
|
name="size"
|
||||||
|
value={size}
|
||||||
|
values={posterSizeOptions}
|
||||||
|
onChange={this.onChangeOverviewOption}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Show Studio</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.CHECK}
|
||||||
|
name="showStudio"
|
||||||
|
value={showStudio}
|
||||||
|
onChange={this.onChangeOverviewOption}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
</Form>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
<Button
|
||||||
|
onPress={onModalClose}
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</ModalContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieOverviewOptionsModalContent.propTypes = {
|
||||||
|
size: PropTypes.string.isRequired,
|
||||||
|
showStudio: PropTypes.bool.isRequired,
|
||||||
|
onChangeOverviewOption: PropTypes.func.isRequired,
|
||||||
|
onModalClose: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMovieOverviewOptionsModalContent;
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import { setListMovieOverviewOption } from 'Store/Actions/addMovieActions';
|
||||||
|
import AddListMovieOverviewOptionsModalContent from './AddListMovieOverviewOptionsModalContent';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
(state) => state.addMovie,
|
||||||
|
(addMovie) => {
|
||||||
|
return addMovie.overviewOptions;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createMapDispatchToProps(dispatch, props) {
|
||||||
|
return {
|
||||||
|
onChangeOverviewOption(payload) {
|
||||||
|
dispatch(setListMovieOverviewOption(payload));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps, createMapDispatchToProps)(AddListMovieOverviewOptionsModalContent);
|
|
@ -0,0 +1,94 @@
|
||||||
|
$hoverScale: 1.05;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
transition: all 200ms ease-in;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
z-index: 2;
|
||||||
|
box-shadow: 0 0 12px $black;
|
||||||
|
transition: all 200ms ease-in;
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
opacity: 0.9;
|
||||||
|
transition: opacity 200ms linear 150ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.posterContainer {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
composes: link from '~Components/Link/Link.css';
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
background-color: $defaultColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlayTitle {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 5px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: $offWhite;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
@add-mixin truncate;
|
||||||
|
|
||||||
|
background-color: #fafbfc;
|
||||||
|
text-align: center;
|
||||||
|
font-size: $smallFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ended {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-width: 0 25px 25px 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: transparent $dangerColor transparent transparent;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
left: 10px;
|
||||||
|
z-index: 3;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #707070;
|
||||||
|
color: $white;
|
||||||
|
font-size: $smallFontSize;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action {
|
||||||
|
composes: button from '~Components/Link/IconButton.css';
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $radarrYellow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: $breakpointSmall) {
|
||||||
|
.container {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,163 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import Link from 'Components/Link/Link';
|
||||||
|
import MoviePoster from 'Movie/MoviePoster';
|
||||||
|
import AddNewMovieModal from 'AddMovie/AddNewMovie/AddNewMovieModal';
|
||||||
|
import styles from './AddListMoviePoster.css';
|
||||||
|
|
||||||
|
class AddListMoviePoster extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
hasPosterError: false,
|
||||||
|
isNewAddMovieModalOpen: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onPress = () => {
|
||||||
|
this.setState({ isNewAddMovieModalOpen: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddMovieModalClose = () => {
|
||||||
|
this.setState({ isNewAddMovieModalOpen: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
onPosterLoad = () => {
|
||||||
|
if (this.state.hasPosterError) {
|
||||||
|
this.setState({ hasPosterError: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onPosterLoadError = () => {
|
||||||
|
if (!this.state.hasPosterError) {
|
||||||
|
this.setState({ hasPosterError: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
style,
|
||||||
|
tmdbId,
|
||||||
|
title,
|
||||||
|
year,
|
||||||
|
overview,
|
||||||
|
folder,
|
||||||
|
status,
|
||||||
|
titleSlug,
|
||||||
|
images,
|
||||||
|
posterWidth,
|
||||||
|
posterHeight,
|
||||||
|
showTitle,
|
||||||
|
isExistingMovie
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
hasPosterError,
|
||||||
|
isNewAddMovieModalOpen
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
|
||||||
|
|
||||||
|
const elementStyle = {
|
||||||
|
width: `${posterWidth}px`,
|
||||||
|
height: `${posterHeight}px`
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.container} style={style}>
|
||||||
|
<div className={styles.content}>
|
||||||
|
<div className={styles.posterContainer}>
|
||||||
|
{
|
||||||
|
status === 'ended' &&
|
||||||
|
<div
|
||||||
|
className={styles.ended}
|
||||||
|
title="Ended"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
|
||||||
|
<Link
|
||||||
|
className={styles.link}
|
||||||
|
style={elementStyle}
|
||||||
|
{...linkProps}
|
||||||
|
>
|
||||||
|
<MoviePoster
|
||||||
|
className={styles.poster}
|
||||||
|
style={elementStyle}
|
||||||
|
images={images}
|
||||||
|
size={250}
|
||||||
|
lazy={false}
|
||||||
|
overflow={true}
|
||||||
|
onError={this.onPosterLoadError}
|
||||||
|
onLoad={this.onPosterLoad}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{
|
||||||
|
hasPosterError &&
|
||||||
|
<div className={styles.overlayTitle}>
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{
|
||||||
|
showTitle &&
|
||||||
|
<div className={styles.title}>
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<AddNewMovieModal
|
||||||
|
isOpen={isNewAddMovieModalOpen && !isExistingMovie}
|
||||||
|
tmdbId={tmdbId}
|
||||||
|
title={title}
|
||||||
|
year={year}
|
||||||
|
overview={overview}
|
||||||
|
folder={folder}
|
||||||
|
images={images}
|
||||||
|
onModalClose={this.onAddMovieModalClose}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMoviePoster.propTypes = {
|
||||||
|
style: PropTypes.object.isRequired,
|
||||||
|
tmdbId: PropTypes.number.isRequired,
|
||||||
|
title: PropTypes.string.isRequired,
|
||||||
|
year: PropTypes.number.isRequired,
|
||||||
|
overview: PropTypes.string.isRequired,
|
||||||
|
folder: PropTypes.string.isRequired,
|
||||||
|
status: PropTypes.string.isRequired,
|
||||||
|
titleSlug: PropTypes.string.isRequired,
|
||||||
|
images: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
posterWidth: PropTypes.number.isRequired,
|
||||||
|
posterHeight: PropTypes.number.isRequired,
|
||||||
|
showTitle: PropTypes.bool.isRequired,
|
||||||
|
showRelativeDates: PropTypes.bool.isRequired,
|
||||||
|
shortDateFormat: PropTypes.string.isRequired,
|
||||||
|
timeFormat: PropTypes.string.isRequired,
|
||||||
|
isExistingMovie: PropTypes.bool.isRequired,
|
||||||
|
isExclusionMovie: PropTypes.bool.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
AddListMoviePoster.defaultProps = {
|
||||||
|
statistics: {
|
||||||
|
movieFileCount: 0
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMoviePoster;
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import createExistingMovieSelector from 'Store/Selectors/createExistingMovieSelector';
|
||||||
|
import createExclusionMovieSelector from 'Store/Selectors/createExclusionMovieSelector';
|
||||||
|
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||||
|
import AddListMoviePoster from './AddListMoviePoster';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
createExistingMovieSelector(),
|
||||||
|
createExclusionMovieSelector(),
|
||||||
|
createDimensionsSelector(),
|
||||||
|
(isExistingMovie, isExclusionMovie, dimensions) => {
|
||||||
|
return {
|
||||||
|
isExistingMovie,
|
||||||
|
isExclusionMovie,
|
||||||
|
isSmallScreen: dimensions.isSmallScreen
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps)(AddListMoviePoster);
|
|
@ -0,0 +1,5 @@
|
||||||
|
.info {
|
||||||
|
background-color: #fafbfc;
|
||||||
|
text-align: center;
|
||||||
|
font-size: $smallFontSize;
|
||||||
|
}
|
|
@ -0,0 +1,30 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import styles from './AddListMoviePosterInfo.css';
|
||||||
|
|
||||||
|
function AddListMoviePosterInfo(props) {
|
||||||
|
const {
|
||||||
|
studio,
|
||||||
|
sortKey
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
if (sortKey === 'studio' && studio) {
|
||||||
|
return (
|
||||||
|
<div className={styles.info}>
|
||||||
|
{studio}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMoviePosterInfo.propTypes = {
|
||||||
|
studio: PropTypes.string,
|
||||||
|
sortKey: PropTypes.string.isRequired,
|
||||||
|
showRelativeDates: PropTypes.bool.isRequired,
|
||||||
|
shortDateFormat: PropTypes.string.isRequired,
|
||||||
|
timeFormat: PropTypes.string.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMoviePosterInfo;
|
|
@ -0,0 +1,3 @@
|
||||||
|
.grid {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
|
@ -0,0 +1,307 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import { Grid, WindowScroller } from 'react-virtualized';
|
||||||
|
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
|
||||||
|
import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
|
||||||
|
import dimensions from 'Styles/Variables/dimensions';
|
||||||
|
import { sortDirections } from 'Helpers/Props';
|
||||||
|
import Measure from 'Components/Measure';
|
||||||
|
import AddListMovieItemConnector from 'AddMovie/AddListMovie/AddListMovieItemConnector';
|
||||||
|
import AddListMoviePosterConnector from './AddListMoviePosterConnector';
|
||||||
|
import styles from './AddListMoviePosters.css';
|
||||||
|
|
||||||
|
// Poster container dimensions
|
||||||
|
const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
|
||||||
|
const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen);
|
||||||
|
const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
|
||||||
|
const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
|
||||||
|
|
||||||
|
const additionalColumnCount = {
|
||||||
|
small: 3,
|
||||||
|
medium: 2,
|
||||||
|
large: 1
|
||||||
|
};
|
||||||
|
|
||||||
|
function calculateColumnWidth(width, posterSize, isSmallScreen) {
|
||||||
|
const maxiumColumnWidth = isSmallScreen ? 172 : 182;
|
||||||
|
const columns = Math.floor(width / maxiumColumnWidth);
|
||||||
|
const remainder = width % maxiumColumnWidth;
|
||||||
|
|
||||||
|
if (remainder === 0 && posterSize === 'large') {
|
||||||
|
return maxiumColumnWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Math.floor(width / (columns + additionalColumnCount[posterSize]));
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions) {
|
||||||
|
const {
|
||||||
|
detailedProgressBar,
|
||||||
|
showTitle,
|
||||||
|
showMonitored,
|
||||||
|
showQualityProfile
|
||||||
|
} = posterOptions;
|
||||||
|
|
||||||
|
const nextAiringHeight = 19;
|
||||||
|
|
||||||
|
const heights = [
|
||||||
|
posterHeight,
|
||||||
|
detailedProgressBar ? detailedProgressBarHeight : progressBarHeight,
|
||||||
|
nextAiringHeight,
|
||||||
|
isSmallScreen ? columnPaddingSmallScreen : columnPadding
|
||||||
|
];
|
||||||
|
|
||||||
|
if (showTitle) {
|
||||||
|
heights.push(19);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showMonitored) {
|
||||||
|
heights.push(19);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showQualityProfile) {
|
||||||
|
heights.push(19);
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (sortKey) {
|
||||||
|
case 'studio':
|
||||||
|
default:
|
||||||
|
// No need to add a height of 0
|
||||||
|
}
|
||||||
|
|
||||||
|
return heights.reduce((acc, height) => acc + height, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculatePosterHeight(posterWidth) {
|
||||||
|
return Math.ceil((250 / 170) * posterWidth);
|
||||||
|
}
|
||||||
|
|
||||||
|
class AddListMoviePosters extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
width: 0,
|
||||||
|
columnWidth: 182,
|
||||||
|
columnCount: 1,
|
||||||
|
posterWidth: 162,
|
||||||
|
posterHeight: 238,
|
||||||
|
rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {})
|
||||||
|
};
|
||||||
|
|
||||||
|
this._isInitialized = false;
|
||||||
|
this._grid = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this._contentBodyNode = ReactDOM.findDOMNode(this.props.contentBody);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
const {
|
||||||
|
items,
|
||||||
|
filters,
|
||||||
|
sortKey,
|
||||||
|
sortDirection,
|
||||||
|
posterOptions,
|
||||||
|
jumpToCharacter
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const itemsChanged = hasDifferentItems(prevProps.items, items);
|
||||||
|
|
||||||
|
if (
|
||||||
|
prevProps.sortKey !== sortKey ||
|
||||||
|
prevProps.posterOptions !== posterOptions ||
|
||||||
|
itemsChanged
|
||||||
|
) {
|
||||||
|
this.calculateGrid();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
prevProps.filters !== filters ||
|
||||||
|
prevProps.sortKey !== sortKey ||
|
||||||
|
prevProps.sortDirection !== sortDirection ||
|
||||||
|
itemsChanged
|
||||||
|
) {
|
||||||
|
this._grid.recomputeGridSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
|
||||||
|
const index = getIndexOfFirstCharacter(items, jumpToCharacter);
|
||||||
|
|
||||||
|
if (index != null) {
|
||||||
|
const {
|
||||||
|
columnCount,
|
||||||
|
rowHeight
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const row = Math.floor(index / columnCount);
|
||||||
|
const scrollTop = rowHeight * row;
|
||||||
|
|
||||||
|
this.props.onScroll({ scrollTop });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Control
|
||||||
|
|
||||||
|
setGridRef = (ref) => {
|
||||||
|
this._grid = ref;
|
||||||
|
}
|
||||||
|
|
||||||
|
calculateGrid = (width = this.state.width, isSmallScreen) => {
|
||||||
|
const {
|
||||||
|
sortKey,
|
||||||
|
posterOptions
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
|
||||||
|
const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen);
|
||||||
|
const columnCount = Math.max(Math.floor(width / columnWidth), 1);
|
||||||
|
const posterWidth = columnWidth - padding;
|
||||||
|
const posterHeight = calculatePosterHeight(posterWidth);
|
||||||
|
const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
width,
|
||||||
|
columnWidth,
|
||||||
|
columnCount,
|
||||||
|
posterWidth,
|
||||||
|
posterHeight,
|
||||||
|
rowHeight
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
cellRenderer = ({ key, rowIndex, columnIndex, style }) => {
|
||||||
|
const {
|
||||||
|
items,
|
||||||
|
sortKey,
|
||||||
|
posterOptions,
|
||||||
|
showRelativeDates,
|
||||||
|
shortDateFormat,
|
||||||
|
timeFormat
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
posterWidth,
|
||||||
|
posterHeight,
|
||||||
|
columnCount
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const {
|
||||||
|
showTitle
|
||||||
|
} = posterOptions;
|
||||||
|
|
||||||
|
const movie = items[rowIndex * columnCount + columnIndex];
|
||||||
|
|
||||||
|
if (!movie) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AddListMovieItemConnector
|
||||||
|
key={key}
|
||||||
|
component={AddListMoviePosterConnector}
|
||||||
|
sortKey={sortKey}
|
||||||
|
posterWidth={posterWidth}
|
||||||
|
posterHeight={posterHeight}
|
||||||
|
showTitle={showTitle}
|
||||||
|
showRelativeDates={showRelativeDates}
|
||||||
|
shortDateFormat={shortDateFormat}
|
||||||
|
timeFormat={timeFormat}
|
||||||
|
style={style}
|
||||||
|
movieId={movie.tmdbId}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onMeasure = ({ width }) => {
|
||||||
|
this.calculateGrid(width, this.props.isSmallScreen);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSectionRendered = () => {
|
||||||
|
if (!this._isInitialized && this._contentBodyNode) {
|
||||||
|
this.props.onRender();
|
||||||
|
this._isInitialized = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
items,
|
||||||
|
scrollTop,
|
||||||
|
isSmallScreen,
|
||||||
|
onScroll
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
width,
|
||||||
|
columnWidth,
|
||||||
|
columnCount,
|
||||||
|
rowHeight
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const rowCount = Math.ceil(items.length / columnCount);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Measure onMeasure={this.onMeasure}>
|
||||||
|
<WindowScroller
|
||||||
|
scrollElement={isSmallScreen ? undefined : this._contentBodyNode}
|
||||||
|
onScroll={onScroll}
|
||||||
|
>
|
||||||
|
{({ height, isScrolling }) => {
|
||||||
|
return (
|
||||||
|
<Grid
|
||||||
|
ref={this.setGridRef}
|
||||||
|
className={styles.grid}
|
||||||
|
autoHeight={true}
|
||||||
|
height={height}
|
||||||
|
columnCount={columnCount}
|
||||||
|
columnWidth={columnWidth}
|
||||||
|
rowCount={rowCount}
|
||||||
|
rowHeight={rowHeight}
|
||||||
|
width={width}
|
||||||
|
scrollTop={scrollTop}
|
||||||
|
overscanRowCount={2}
|
||||||
|
cellRenderer={this.cellRenderer}
|
||||||
|
onSectionRendered={this.onSectionRendered}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</WindowScroller>
|
||||||
|
</Measure>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMoviePosters.propTypes = {
|
||||||
|
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
filters: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
sortKey: PropTypes.string,
|
||||||
|
sortDirection: PropTypes.oneOf(sortDirections.all),
|
||||||
|
posterOptions: PropTypes.object.isRequired,
|
||||||
|
scrollTop: PropTypes.number.isRequired,
|
||||||
|
jumpToCharacter: PropTypes.string,
|
||||||
|
contentBody: PropTypes.object.isRequired,
|
||||||
|
showRelativeDates: PropTypes.bool.isRequired,
|
||||||
|
shortDateFormat: PropTypes.string.isRequired,
|
||||||
|
isSmallScreen: PropTypes.bool.isRequired,
|
||||||
|
timeFormat: PropTypes.string.isRequired,
|
||||||
|
onRender: PropTypes.func.isRequired,
|
||||||
|
onScroll: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMoviePosters;
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
|
||||||
|
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||||
|
import AddListMoviePosters from './AddListMoviePosters';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
(state) => state.addMovie.posterOptions,
|
||||||
|
createUISettingsSelector(),
|
||||||
|
createDimensionsSelector(),
|
||||||
|
(posterOptions, uiSettings, dimensions) => {
|
||||||
|
return {
|
||||||
|
posterOptions,
|
||||||
|
showRelativeDates: uiSettings.showRelativeDates,
|
||||||
|
shortDateFormat: uiSettings.shortDateFormat,
|
||||||
|
timeFormat: uiSettings.timeFormat,
|
||||||
|
isSmallScreen: dimensions.isSmallScreen
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps)(AddListMoviePosters);
|
|
@ -0,0 +1,25 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import Modal from 'Components/Modal/Modal';
|
||||||
|
import AddListMoviePosterOptionsModalContentConnector from './AddListMoviePosterOptionsModalContentConnector';
|
||||||
|
|
||||||
|
function AddListMoviePosterOptionsModal({ isOpen, onModalClose, ...otherProps }) {
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
isOpen={isOpen}
|
||||||
|
onModalClose={onModalClose}
|
||||||
|
>
|
||||||
|
<AddListMoviePosterOptionsModalContentConnector
|
||||||
|
{...otherProps}
|
||||||
|
onModalClose={onModalClose}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMoviePosterOptionsModal.propTypes = {
|
||||||
|
isOpen: PropTypes.bool.isRequired,
|
||||||
|
onModalClose: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMoviePosterOptionsModal;
|
|
@ -0,0 +1,133 @@
|
||||||
|
import _ from 'lodash';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { inputTypes } from 'Helpers/Props';
|
||||||
|
import Button from 'Components/Link/Button';
|
||||||
|
import Form from 'Components/Form/Form';
|
||||||
|
import FormGroup from 'Components/Form/FormGroup';
|
||||||
|
import FormLabel from 'Components/Form/FormLabel';
|
||||||
|
import FormInputGroup from 'Components/Form/FormInputGroup';
|
||||||
|
import ModalContent from 'Components/Modal/ModalContent';
|
||||||
|
import ModalHeader from 'Components/Modal/ModalHeader';
|
||||||
|
import ModalBody from 'Components/Modal/ModalBody';
|
||||||
|
import ModalFooter from 'Components/Modal/ModalFooter';
|
||||||
|
|
||||||
|
const posterSizeOptions = [
|
||||||
|
{ key: 'small', value: 'Small' },
|
||||||
|
{ key: 'medium', value: 'Medium' },
|
||||||
|
{ key: 'large', value: 'Large' }
|
||||||
|
];
|
||||||
|
|
||||||
|
class AddListMoviePosterOptionsModalContent extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
size: props.size,
|
||||||
|
showTitle: props.showTitle
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
const {
|
||||||
|
size,
|
||||||
|
showTitle
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const state = {};
|
||||||
|
|
||||||
|
if (size !== prevProps.size) {
|
||||||
|
state.size = size;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showTitle !== prevProps.showTitle) {
|
||||||
|
state.showTitle = showTitle;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!_.isEmpty(state)) {
|
||||||
|
this.setState(state);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onChangePosterOption = ({ name, value }) => {
|
||||||
|
this.setState({
|
||||||
|
[name]: value
|
||||||
|
}, () => {
|
||||||
|
this.props.onChangePosterOption({ [name]: value });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
onModalClose
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
size,
|
||||||
|
showTitle
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalContent onModalClose={onModalClose}>
|
||||||
|
<ModalHeader>
|
||||||
|
Poster Options
|
||||||
|
</ModalHeader>
|
||||||
|
|
||||||
|
<ModalBody>
|
||||||
|
<Form>
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Poster Size</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.SELECT}
|
||||||
|
name="size"
|
||||||
|
value={size}
|
||||||
|
values={posterSizeOptions}
|
||||||
|
onChange={this.onChangePosterOption}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Show Title</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.CHECK}
|
||||||
|
name="showTitle"
|
||||||
|
value={showTitle}
|
||||||
|
helpText="Show movie title under poster"
|
||||||
|
onChange={this.onChangePosterOption}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
</Form>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
<Button
|
||||||
|
onPress={onModalClose}
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</ModalContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMoviePosterOptionsModalContent.propTypes = {
|
||||||
|
size: PropTypes.string.isRequired,
|
||||||
|
showTitle: PropTypes.bool.isRequired,
|
||||||
|
onChangePosterOption: PropTypes.func.isRequired,
|
||||||
|
onModalClose: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMoviePosterOptionsModalContent;
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import { setListMoviePosterOption } from 'Store/Actions/addMovieActions';
|
||||||
|
import AddListMoviePosterOptionsModalContent from './AddListMoviePosterOptionsModalContent';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
(state) => state.addMovie,
|
||||||
|
(addMovie) => {
|
||||||
|
return addMovie.posterOptions;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createMapDispatchToProps(dispatch, props) {
|
||||||
|
return {
|
||||||
|
onChangePosterOption(payload) {
|
||||||
|
dispatch(setListMoviePosterOption(payload));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps, createMapDispatchToProps)(AddListMoviePosterOptionsModalContent);
|
|
@ -0,0 +1,54 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
|
||||||
|
|
||||||
|
class AddListMovieActionsCell extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
id,
|
||||||
|
...otherProps
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<VirtualTableRowCell
|
||||||
|
{...otherProps}
|
||||||
|
>
|
||||||
|
{/* <SpinnerIconButton
|
||||||
|
name={icons.REFRESH}
|
||||||
|
title="Refresh Movie"
|
||||||
|
isSpinning={isRefreshingMovie}
|
||||||
|
onPress={onRefreshMoviePress}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<IconButton
|
||||||
|
name={icons.EDIT}
|
||||||
|
title="Edit Movie"
|
||||||
|
onPress={this.onEditMoviePress}
|
||||||
|
/> */}
|
||||||
|
|
||||||
|
{/* <EditMovieModalConnector
|
||||||
|
isOpen={isEditMovieModalOpen}
|
||||||
|
movieId={id}
|
||||||
|
onModalClose={this.onEditMovieModalClose}
|
||||||
|
onDeleteMoviePress={this.onDeleteMoviePress}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<DeleteMovieModal
|
||||||
|
isOpen={isDeleteMovieModalOpen}
|
||||||
|
movieId={id}
|
||||||
|
onModalClose={this.onDeleteMovieModalClose}
|
||||||
|
/> */}
|
||||||
|
</VirtualTableRowCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieActionsCell.propTypes = {
|
||||||
|
id: PropTypes.number.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMovieActionsCell;
|
|
@ -0,0 +1,44 @@
|
||||||
|
.status {
|
||||||
|
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
|
||||||
|
|
||||||
|
flex: 0 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sortTitle {
|
||||||
|
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
|
||||||
|
|
||||||
|
flex: 4 0 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.studio {
|
||||||
|
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
|
||||||
|
|
||||||
|
flex: 2 0 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inCinemas,
|
||||||
|
.physicalRelease,
|
||||||
|
.genres {
|
||||||
|
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
|
||||||
|
|
||||||
|
flex: 0 0 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movieStatus,
|
||||||
|
.certification {
|
||||||
|
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
|
||||||
|
|
||||||
|
flex: 0 0 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratings {
|
||||||
|
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
|
||||||
|
|
||||||
|
flex: 0 0 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
|
||||||
|
|
||||||
|
flex: 0 1 90px;
|
||||||
|
}
|
|
@ -0,0 +1,106 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
|
import IconButton from 'Components/Link/IconButton';
|
||||||
|
import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
|
||||||
|
import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
|
||||||
|
import TableOptionsModal from 'Components/Table/TableOptions/TableOptionsModal';
|
||||||
|
import styles from './AddListMovieHeader.css';
|
||||||
|
|
||||||
|
class AddListMovieHeader extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
isTableOptionsModalOpen: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onTableOptionsPress = () => {
|
||||||
|
this.setState({ isTableOptionsModalOpen: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
onTableOptionsModalClose = () => {
|
||||||
|
this.setState({ isTableOptionsModalOpen: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
columns,
|
||||||
|
onTableOptionChange,
|
||||||
|
...otherProps
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<VirtualTableHeader>
|
||||||
|
{
|
||||||
|
columns.map((column) => {
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
isSortable,
|
||||||
|
isVisible
|
||||||
|
} = column;
|
||||||
|
|
||||||
|
if (!isVisible) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (name === 'actions') {
|
||||||
|
return (
|
||||||
|
<VirtualTableHeaderCell
|
||||||
|
key={name}
|
||||||
|
className={styles[name]}
|
||||||
|
name={name}
|
||||||
|
isSortable={false}
|
||||||
|
{...otherProps}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
name={icons.ADVANCED_SETTINGS}
|
||||||
|
onPress={this.onTableOptionsPress}
|
||||||
|
/>
|
||||||
|
</VirtualTableHeaderCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<VirtualTableHeaderCell
|
||||||
|
key={name}
|
||||||
|
className={styles[name]}
|
||||||
|
name={name}
|
||||||
|
isSortable={isSortable}
|
||||||
|
{...otherProps}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</VirtualTableHeaderCell>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
<TableOptionsModal
|
||||||
|
isOpen={this.state.isTableOptionsModalOpen}
|
||||||
|
columns={columns}
|
||||||
|
onTableOptionChange={onTableOptionChange}
|
||||||
|
onModalClose={this.onTableOptionsModalClose}
|
||||||
|
/>
|
||||||
|
</VirtualTableHeader>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieHeader.propTypes = {
|
||||||
|
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
onTableOptionChange: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMovieHeader;
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { setListMovieTableOption } from 'Store/Actions/addMovieActions';
|
||||||
|
import AddListMovieHeader from './AddListMovieHeader';
|
||||||
|
|
||||||
|
function createMapDispatchToProps(dispatch, props) {
|
||||||
|
return {
|
||||||
|
onTableOptionChange(payload) {
|
||||||
|
dispatch(setListMovieTableOption(payload));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(undefined, createMapDispatchToProps)(AddListMovieHeader);
|
|
@ -0,0 +1,56 @@
|
||||||
|
.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;
|
||||||
|
}
|
|
@ -0,0 +1,224 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import HeartRating from 'Components/HeartRating';
|
||||||
|
import VirtualTableRow from 'Components/Table/VirtualTableRow';
|
||||||
|
import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
|
||||||
|
import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
|
||||||
|
import MovieStatusCell from './MovieStatusCell';
|
||||||
|
import Link from 'Components/Link/Link';
|
||||||
|
import AddNewMovieModal from 'AddMovie/AddNewMovie/AddNewMovieModal';
|
||||||
|
import styles from './AddListMovieRow.css';
|
||||||
|
|
||||||
|
class AddListMovieRow extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
isNewAddMovieModalOpen: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onPress = () => {
|
||||||
|
this.setState({ isNewAddMovieModalOpen: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddMovieModalClose = () => {
|
||||||
|
this.setState({ isNewAddMovieModalOpen: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
style,
|
||||||
|
status,
|
||||||
|
tmdbId,
|
||||||
|
title,
|
||||||
|
titleSlug,
|
||||||
|
studio,
|
||||||
|
inCinemas,
|
||||||
|
physicalRelease,
|
||||||
|
year,
|
||||||
|
overview,
|
||||||
|
folder,
|
||||||
|
images,
|
||||||
|
genres,
|
||||||
|
ratings,
|
||||||
|
certification,
|
||||||
|
columns,
|
||||||
|
isExistingMovie
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
isNewAddMovieModalOpen
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<VirtualTableRow style={style}>
|
||||||
|
{
|
||||||
|
columns.map((column) => {
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
isVisible
|
||||||
|
} = column;
|
||||||
|
|
||||||
|
if (!isVisible) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (name === 'status') {
|
||||||
|
return (
|
||||||
|
<MovieStatusCell
|
||||||
|
key={name}
|
||||||
|
className={styles[name]}
|
||||||
|
// monitored={monitored}
|
||||||
|
status={status}
|
||||||
|
component={VirtualTableRowCell}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (name === 'sortTitle') {
|
||||||
|
return (
|
||||||
|
<VirtualTableRowCell
|
||||||
|
key={name}
|
||||||
|
className={styles[name]}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
{...linkProps}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</Link>
|
||||||
|
</VirtualTableRowCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (name === 'studio') {
|
||||||
|
return (
|
||||||
|
<VirtualTableRowCell
|
||||||
|
key={name}
|
||||||
|
className={styles[name]}
|
||||||
|
>
|
||||||
|
{studio}
|
||||||
|
</VirtualTableRowCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (name === 'inCinemas') {
|
||||||
|
return (
|
||||||
|
<RelativeDateCellConnector
|
||||||
|
key={name}
|
||||||
|
className={styles[name]}
|
||||||
|
date={inCinemas}
|
||||||
|
component={VirtualTableRowCell}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (name === 'physicalRelease') {
|
||||||
|
return (
|
||||||
|
<RelativeDateCellConnector
|
||||||
|
key={name}
|
||||||
|
className={styles[name]}
|
||||||
|
date={physicalRelease}
|
||||||
|
component={VirtualTableRowCell}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (name === 'genres') {
|
||||||
|
const joinedGenres = genres.join(', ');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<VirtualTableRowCell
|
||||||
|
key={name}
|
||||||
|
className={styles[name]}
|
||||||
|
>
|
||||||
|
<span title={joinedGenres}>
|
||||||
|
{joinedGenres}
|
||||||
|
</span>
|
||||||
|
</VirtualTableRowCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (name === 'ratings') {
|
||||||
|
return (
|
||||||
|
<VirtualTableRowCell
|
||||||
|
key={name}
|
||||||
|
className={styles[name]}
|
||||||
|
>
|
||||||
|
<HeartRating
|
||||||
|
rating={ratings.value}
|
||||||
|
/>
|
||||||
|
</VirtualTableRowCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (name === 'certification') {
|
||||||
|
return (
|
||||||
|
<VirtualTableRowCell
|
||||||
|
key={name}
|
||||||
|
className={styles[name]}
|
||||||
|
>
|
||||||
|
{certification}
|
||||||
|
</VirtualTableRowCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
<AddNewMovieModal
|
||||||
|
isOpen={isNewAddMovieModalOpen && !isExistingMovie}
|
||||||
|
tmdbId={tmdbId}
|
||||||
|
title={title}
|
||||||
|
year={year}
|
||||||
|
overview={overview}
|
||||||
|
folder={folder}
|
||||||
|
images={images}
|
||||||
|
onModalClose={this.onAddMovieModalClose}
|
||||||
|
/>
|
||||||
|
</VirtualTableRow>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieRow.propTypes = {
|
||||||
|
style: PropTypes.object.isRequired,
|
||||||
|
tmdbId: PropTypes.number.isRequired,
|
||||||
|
status: PropTypes.string.isRequired,
|
||||||
|
title: PropTypes.string.isRequired,
|
||||||
|
year: PropTypes.number.isRequired,
|
||||||
|
overview: PropTypes.string.isRequired,
|
||||||
|
folder: PropTypes.string.isRequired,
|
||||||
|
images: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
titleSlug: PropTypes.string.isRequired,
|
||||||
|
studio: PropTypes.string,
|
||||||
|
inCinemas: PropTypes.string,
|
||||||
|
physicalRelease: PropTypes.string,
|
||||||
|
genres: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||||
|
ratings: PropTypes.object.isRequired,
|
||||||
|
certification: PropTypes.string,
|
||||||
|
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
isExistingMovie: PropTypes.bool.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
AddListMovieRow.defaultProps = {
|
||||||
|
genres: [],
|
||||||
|
tags: []
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMovieRow;
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import createExistingMovieSelector from 'Store/Selectors/createExistingMovieSelector';
|
||||||
|
import createExclusionMovieSelector from 'Store/Selectors/createExclusionMovieSelector';
|
||||||
|
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
|
||||||
|
import AddListMovieRow from './AddListMovieRow';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
createExistingMovieSelector(),
|
||||||
|
createExclusionMovieSelector(),
|
||||||
|
createDimensionsSelector(),
|
||||||
|
(isExistingMovie, isExclusionMovie, dimensions) => {
|
||||||
|
return {
|
||||||
|
isExistingMovie,
|
||||||
|
isExclusionMovie,
|
||||||
|
isSmallScreen: dimensions.isSmallScreen
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps)(AddListMovieRow);
|
|
@ -0,0 +1,5 @@
|
||||||
|
.tableContainer {
|
||||||
|
composes: tableContainer from '~Components/Table/VirtualTable.css';
|
||||||
|
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
|
@ -0,0 +1,128 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
|
||||||
|
import { sortDirections } from 'Helpers/Props';
|
||||||
|
import VirtualTable from 'Components/Table/VirtualTable';
|
||||||
|
import AddListMovieItemConnector from 'AddMovie/AddListMovie/AddListMovieItemConnector';
|
||||||
|
import AddListMovieHeaderConnector from './AddListMovieHeaderConnector';
|
||||||
|
import AddListMovieRowConnector from './AddListMovieRowConnector';
|
||||||
|
import styles from './AddListMovieTable.css';
|
||||||
|
|
||||||
|
class AddListMovieTable extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
scrollIndex: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
const {
|
||||||
|
items
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const jumpToCharacter = this.props.jumpToCharacter;
|
||||||
|
|
||||||
|
if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
|
||||||
|
|
||||||
|
const scrollIndex = getIndexOfFirstCharacter(items, jumpToCharacter);
|
||||||
|
|
||||||
|
if (scrollIndex != null) {
|
||||||
|
this.setState({ scrollIndex });
|
||||||
|
}
|
||||||
|
} else if (jumpToCharacter == null && prevProps.jumpToCharacter != null) {
|
||||||
|
this.setState({ scrollIndex: null });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Control
|
||||||
|
|
||||||
|
rowRenderer = ({ key, rowIndex, style }) => {
|
||||||
|
const {
|
||||||
|
items,
|
||||||
|
columns
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const movie = items[rowIndex];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AddListMovieItemConnector
|
||||||
|
key={key}
|
||||||
|
component={AddListMovieRowConnector}
|
||||||
|
style={style}
|
||||||
|
columns={columns}
|
||||||
|
movieId={movie.tmdbId}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
items,
|
||||||
|
columns,
|
||||||
|
filters,
|
||||||
|
sortKey,
|
||||||
|
sortDirection,
|
||||||
|
isSmallScreen,
|
||||||
|
scrollTop,
|
||||||
|
contentBody,
|
||||||
|
onSortPress,
|
||||||
|
onRender,
|
||||||
|
onScroll
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<VirtualTable
|
||||||
|
className={styles.tableContainer}
|
||||||
|
items={items}
|
||||||
|
scrollTop={scrollTop}
|
||||||
|
scrollIndex={this.state.scrollIndex}
|
||||||
|
contentBody={contentBody}
|
||||||
|
isSmallScreen={isSmallScreen}
|
||||||
|
rowHeight={38}
|
||||||
|
overscanRowCount={2}
|
||||||
|
rowRenderer={this.rowRenderer}
|
||||||
|
header={
|
||||||
|
<AddListMovieHeaderConnector
|
||||||
|
columns={columns}
|
||||||
|
sortKey={sortKey}
|
||||||
|
sortDirection={sortDirection}
|
||||||
|
onSortPress={onSortPress}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
columns={columns}
|
||||||
|
filters={filters}
|
||||||
|
sortKey={sortKey}
|
||||||
|
sortDirection={sortDirection}
|
||||||
|
onRender={onRender}
|
||||||
|
onScroll={onScroll}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AddListMovieTable.propTypes = {
|
||||||
|
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
filters: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
sortKey: PropTypes.string,
|
||||||
|
sortDirection: PropTypes.oneOf(sortDirections.all),
|
||||||
|
scrollTop: PropTypes.number.isRequired,
|
||||||
|
jumpToCharacter: PropTypes.string,
|
||||||
|
contentBody: PropTypes.object.isRequired,
|
||||||
|
isSmallScreen: PropTypes.bool.isRequired,
|
||||||
|
onSortPress: PropTypes.func.isRequired,
|
||||||
|
onRender: PropTypes.func.isRequired,
|
||||||
|
onScroll: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddListMovieTable;
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import { setListMovieSort } from 'Store/Actions/addMovieActions';
|
||||||
|
import AddListMovieTable from './AddListMovieTable';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
(state) => state.app.dimensions,
|
||||||
|
(state) => state.addMovie.columns,
|
||||||
|
(dimensions, columns) => {
|
||||||
|
return {
|
||||||
|
isSmallScreen: dimensions.isSmallScreen,
|
||||||
|
columns
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createMapDispatchToProps(dispatch, props) {
|
||||||
|
return {
|
||||||
|
onSortPress(sortKey) {
|
||||||
|
dispatch(setListMovieSort({ sortKey }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps, createMapDispatchToProps)(AddListMovieTable);
|
|
@ -0,0 +1,9 @@
|
||||||
|
.status {
|
||||||
|
composes: cell from '~Components/Table/Cells/TableRowCell.css';
|
||||||
|
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statusIcon {
|
||||||
|
width: 20px !important;
|
||||||
|
}
|
|
@ -0,0 +1,62 @@
|
||||||
|
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;
|
|
@ -58,6 +58,7 @@ class AddNewMovieSearchResult extends Component {
|
||||||
isExclusionMovie,
|
isExclusionMovie,
|
||||||
isSmallScreen
|
isSmallScreen
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
isNewAddMovieModalOpen
|
isNewAddMovieModalOpen
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
|
@ -6,6 +6,8 @@ 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 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';
|
||||||
|
@ -76,6 +78,16 @@ function AppRoutes(props) {
|
||||||
component={ImportMovies}
|
component={ImportMovies}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<Route
|
||||||
|
path="/add/list"
|
||||||
|
component={AddListMovieConnector}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Route
|
||||||
|
path="/add/discover"
|
||||||
|
component={AddDiscoverMovieConnector}
|
||||||
|
/>
|
||||||
|
|
||||||
<Route
|
<Route
|
||||||
path="/movie/:titleSlug"
|
path="/movie/:titleSlug"
|
||||||
component={MovieDetailsPageConnector}
|
component={MovieDetailsPageConnector}
|
||||||
|
|
|
@ -38,7 +38,7 @@ const links = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Lists',
|
title: 'Lists',
|
||||||
to: '/add/lists'
|
to: '/add/list'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
@ -4,11 +4,19 @@ 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
|
||||||
|
@ -27,17 +35,213 @@ 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: '',
|
||||||
monitor: 'true',
|
monitor: 'true',
|
||||||
qualityProfileId: 0,
|
qualityProfileId: 0,
|
||||||
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.SERIES_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'
|
||||||
];
|
];
|
||||||
|
|
||||||
//
|
//
|
||||||
|
@ -49,6 +253,16 @@ 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
|
||||||
|
|
||||||
|
@ -57,6 +271,16 @@ 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,
|
||||||
|
@ -69,6 +293,10 @@ 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 }));
|
||||||
|
|
||||||
|
@ -164,13 +392,54 @@ export const reducers = createHandleActions({
|
||||||
return updateSectionState(state, section, newState);
|
return updateSectionState(state, section, newState);
|
||||||
},
|
},
|
||||||
|
|
||||||
[CLEAR_ADD_MOVIE]: function(state) {
|
[SET_LIST_MOVIE_SORT]: createSetClientSideCollectionSortReducer(section),
|
||||||
const {
|
[SET_LIST_MOVIE_FILTER]: createSetClientSideCollectionFilterReducer(section),
|
||||||
defaults,
|
|
||||||
...otherDefaultState
|
|
||||||
} = defaultState;
|
|
||||||
|
|
||||||
return Object.assign({}, state, otherDefaultState);
|
[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]: 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);
|
||||||
|
|
|
@ -68,8 +68,6 @@ export default function createSentryMiddleware() {
|
||||||
isProduction
|
isProduction
|
||||||
} = window.Radarr;
|
} = window.Radarr;
|
||||||
|
|
||||||
console.log(window.Radarr);
|
|
||||||
|
|
||||||
if (!analytics) {
|
if (!analytics) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
|
||||||
|
function createAddListMovieSelector() {
|
||||||
|
return createSelector(
|
||||||
|
(state, { movieId }) => movieId,
|
||||||
|
(state) => state.addMovie,
|
||||||
|
(movieId, allMovies) => {
|
||||||
|
return allMovies.items.find((movie) => movie.tmdbId === movieId);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default createAddListMovieSelector;
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import createDeepEqualSelector from './createDeepEqualSelector';
|
||||||
|
import createClientSideCollectionSelector from './createClientSideCollectionSelector';
|
||||||
|
|
||||||
|
function createUnoptimizedSelector(uiSection) {
|
||||||
|
return createSelector(
|
||||||
|
createClientSideCollectionSelector('movies', uiSection),
|
||||||
|
(movies) => {
|
||||||
|
const items = movies.items.map((s) => {
|
||||||
|
const {
|
||||||
|
tmdbId,
|
||||||
|
sortTitle
|
||||||
|
} = s;
|
||||||
|
|
||||||
|
return {
|
||||||
|
tmdbId,
|
||||||
|
sortTitle
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...movies,
|
||||||
|
items
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createAddMovieClientSideCollectionItemsSelector(uiSection) {
|
||||||
|
return createDeepEqualSelector(
|
||||||
|
createUnoptimizedSelector(uiSection),
|
||||||
|
(movies) => movies
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default createAddMovieClientSideCollectionItemsSelector;
|
|
@ -1,5 +1,6 @@
|
||||||
const scrollPositions = {
|
const scrollPositions = {
|
||||||
movieIndex: 0
|
movieIndex: 0,
|
||||||
|
addMovie: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
export default scrollPositions;
|
export default scrollPositions;
|
||||||
|
|
|
@ -30,7 +30,7 @@ namespace Radarr.Api.V2.Movies
|
||||||
|
|
||||||
List<Movie> realResults = new List<Movie>();
|
List<Movie> realResults = new List<Movie>();
|
||||||
|
|
||||||
/*foreach (var movie in results)
|
foreach (var movie in results)
|
||||||
{
|
{
|
||||||
var mapped = _movieSearch.MapMovieToTmdbMovie(movie);
|
var mapped = _movieSearch.MapMovieToTmdbMovie(movie);
|
||||||
|
|
||||||
|
@ -38,9 +38,9 @@ namespace Radarr.Api.V2.Movies
|
||||||
{
|
{
|
||||||
realResults.Add(mapped);
|
realResults.Add(mapped);
|
||||||
}
|
}
|
||||||
}*/
|
}
|
||||||
|
|
||||||
return MapToResource(results);
|
return MapToResource(realResults);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,14 +1,12 @@
|
||||||
using System.Collections.Generic;
|
using System.Collections.Generic;
|
||||||
using Nancy;
|
|
||||||
using Radarr.Http.Extensions;
|
|
||||||
using NzbDrone.Core.Movies;
|
using NzbDrone.Core.Movies;
|
||||||
using NzbDrone.Core.MediaCover;
|
using NzbDrone.Core.MediaCover;
|
||||||
using NzbDrone.Core.MetadataSource;
|
using NzbDrone.Core.MetadataSource;
|
||||||
using System.Linq;
|
using System.Linq;
|
||||||
using System;
|
|
||||||
using Radarr.Http;
|
using Radarr.Http;
|
||||||
using NzbDrone.Core.NetImport;
|
using NzbDrone.Core.NetImport;
|
||||||
using Radarr.Api.V2.NetImport;
|
using Radarr.Api.V2.NetImport;
|
||||||
|
using NzbDrone.Core.Organizer;
|
||||||
|
|
||||||
namespace Radarr.Api.V2.Movies
|
namespace Radarr.Api.V2.Movies
|
||||||
{
|
{
|
||||||
|
@ -16,12 +14,14 @@ namespace Radarr.Api.V2.Movies
|
||||||
{
|
{
|
||||||
private readonly IDiscoverNewMovies _searchProxy;
|
private readonly IDiscoverNewMovies _searchProxy;
|
||||||
private readonly INetImportFactory _netImportFactory;
|
private readonly INetImportFactory _netImportFactory;
|
||||||
|
private readonly IBuildFileNames _fileNameBuilder;
|
||||||
|
|
||||||
public MovieDiscoverModule(IDiscoverNewMovies searchProxy, INetImportFactory netImportFactory)
|
public MovieDiscoverModule(IDiscoverNewMovies searchProxy, INetImportFactory netImportFactory, IBuildFileNames fileNameBuilder)
|
||||||
: base("/movies/discover")
|
: base("/movies/discover")
|
||||||
{
|
{
|
||||||
_searchProxy = searchProxy;
|
_searchProxy = searchProxy;
|
||||||
_netImportFactory = netImportFactory;
|
_netImportFactory = netImportFactory;
|
||||||
|
_fileNameBuilder = fileNameBuilder;
|
||||||
Get("/lists", x => GetLists());
|
Get("/lists", x => GetLists());
|
||||||
Get("/{action?recommendations}", x => Search(x.action));
|
Get("/{action?recommendations}", x => Search(x.action));
|
||||||
}
|
}
|
||||||
|
@ -46,17 +46,19 @@ namespace Radarr.Api.V2.Movies
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private static IEnumerable<MovieResource> MapToResource(IEnumerable<Movie> movies)
|
private IEnumerable<MovieResource> MapToResource(IEnumerable<Movie> movies)
|
||||||
{
|
{
|
||||||
foreach (var currentSeries in movies)
|
foreach (var currentMovie in movies)
|
||||||
{
|
{
|
||||||
var resource = currentSeries.ToResource();
|
var resource = currentMovie.ToResource();
|
||||||
var poster = currentSeries.Images.FirstOrDefault(c => c.CoverType == MediaCoverTypes.Poster);
|
var poster = currentMovie.Images.FirstOrDefault(c => c.CoverType == MediaCoverTypes.Poster);
|
||||||
if (poster != null)
|
if (poster != null)
|
||||||
{
|
{
|
||||||
resource.RemotePoster = poster.Url;
|
resource.RemotePoster = poster.Url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
resource.Folder = _fileNameBuilder.GetMovieFolder(currentMovie);
|
||||||
|
|
||||||
yield return resource;
|
yield return resource;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue