Mirrors/Radarr
1
0
Fork 0
mirror of https://github.com/Radarr/Radarr.git synced 2024-11-19 17:32:38 +01:00
Code Issues Releases Wiki Activity

New: Add List and Discovery Pages (#3803)

Browse Source
This commit is contained in:
Qstick 2019-10-05 23:21:55 -04:00 committed by GitHub
parent 5f396a53c3
commit 21ed073f29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 3659 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
frontend/src/AddMovie/AddListMovie/AddDiscoverMovieConnector.js Normal file
View File

@ -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'
);

363
frontend/src/AddMovie/AddListMovie/AddListMovie.js Normal file
View File

@ -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;

163
frontend/src/AddMovie/AddListMovie/AddListMovieConnector.js Normal file
View File

@ -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'
);

24
frontend/src/AddMovie/AddListMovie/AddListMovieFilterModalConnector.js Normal file
View File

@ -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);

67
frontend/src/AddMovie/AddListMovie/AddListMovieItemConnector.js Normal file
View File

@ -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);

41
frontend/src/AddMovie/AddListMovie/Menus/AddListMovieFilterMenu.js Normal file
View File

@ -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;

78
frontend/src/AddMovie/AddListMovie/Menus/AddListMovieSortMenu.js Normal file
View File

@ -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;

55
frontend/src/AddMovie/AddListMovie/Menus/AddListMovieViewMenu.js Normal file
View File

@ -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;

98
frontend/src/AddMovie/AddListMovie/Overview/AddListMovieOverview.css Normal file
View File

@ -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;
}
}

158
frontend/src/AddMovie/AddListMovie/Overview/AddListMovieOverview.js Normal file
View File

@ -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;

23
frontend/src/AddMovie/AddListMovie/Overview/AddListMovieOverviewConnector.js Normal file
View File

@ -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);

3
frontend/src/AddMovie/AddListMovie/Overview/AddListMovieOverviews.css Normal file
View File

@ -0,0 +1,3 @@
.grid {
flex: 1 0 auto;
}

281
frontend/src/AddMovie/AddListMovie/Overview/AddListMovieOverviews.js Normal file
View File

@ -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;

25
frontend/src/AddMovie/AddListMovie/Overview/AddListMovieOverviewsConnector.js Normal file
View File

@ -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);

25
frontend/src/AddMovie/AddListMovie/Overview/Options/AddListMovieOverviewOptionsModal.js Normal file
View File

@ -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;

132
frontend/src/AddMovie/AddListMovie/Overview/Options/AddListMovieOverviewOptionsModalContent.js Normal file
View File

@ -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;

23
frontend/src/AddMovie/AddListMovie/Overview/Options/AddListMovieOverviewOptionsModalContentConnector.js Normal file
View File

@ -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);

94
frontend/src/AddMovie/AddListMovie/Posters/AddListMoviePoster.css Normal file
View File

@ -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;
}
}

163
frontend/src/AddMovie/AddListMovie/Posters/AddListMoviePoster.js Normal file
View File

@ -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;

23
frontend/src/AddMovie/AddListMovie/Posters/AddListMoviePosterConnector.js Normal file
View File

@ -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);

5
frontend/src/AddMovie/AddListMovie/Posters/AddListMoviePosterInfo.css Normal file
View File

@ -0,0 +1,5 @@
.info {
background-color: #fafbfc;
text-align: center;
font-size: $smallFontSize;
}

30
frontend/src/AddMovie/AddListMovie/Posters/AddListMoviePosterInfo.js Normal file
View File

@ -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;

3
frontend/src/AddMovie/AddListMovie/Posters/AddListMoviePosters.css Normal file
View File

@ -0,0 +1,3 @@
.grid {
flex: 1 0 auto;
}

307
frontend/src/AddMovie/AddListMovie/Posters/AddListMoviePosters.js Normal file
View File

@ -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;

24
frontend/src/AddMovie/AddListMovie/Posters/AddListMoviePostersConnector.js Normal file
View File

@ -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);

25
frontend/src/AddMovie/AddListMovie/Posters/Options/AddListMoviePosterOptionsModal.js Normal file
View File

@ -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;

133
frontend/src/AddMovie/AddListMovie/Posters/Options/AddListMoviePosterOptionsModalContent.js Normal file
View File

@ -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;

23
frontend/src/AddMovie/AddListMovie/Posters/Options/AddListMoviePosterOptionsModalContentConnector.js Normal file
View File

@ -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);

54
frontend/src/AddMovie/AddListMovie/Table/AddListMovieActionsCell.js Normal file
View File

@ -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;

44
frontend/src/AddMovie/AddListMovie/Table/AddListMovieHeader.css Normal file
View File

@ -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;
}

106
frontend/src/AddMovie/AddListMovie/Table/AddListMovieHeader.js Normal file
View File

@ -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;

13
frontend/src/AddMovie/AddListMovie/Table/AddListMovieHeaderConnector.js Normal file
View File

@ -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);

56
frontend/src/AddMovie/AddListMovie/Table/AddListMovieRow.css Normal file
View File

@ -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;
}

224
frontend/src/AddMovie/AddListMovie/Table/AddListMovieRow.js Normal file
View File

@ -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;

23
frontend/src/AddMovie/AddListMovie/Table/AddListMovieRowConnector.js Normal file
View File

@ -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);

5
frontend/src/AddMovie/AddListMovie/Table/AddListMovieTable.css Normal file
View File

@ -0,0 +1,5 @@
.tableContainer {
composes: tableContainer from '~Components/Table/VirtualTable.css';
flex: 1 0 auto;
}

128
frontend/src/AddMovie/AddListMovie/Table/AddListMovieTable.js Normal file
View File

@ -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;

27
frontend/src/AddMovie/AddListMovie/Table/AddListMovieTableConnector.js Normal file
View File

@ -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);

9
frontend/src/AddMovie/AddListMovie/Table/MovieStatusCell.css Normal file
View File

@ -0,0 +1,9 @@
.status {
composes: cell from '~Components/Table/Cells/TableRowCell.css';
width: 60px;
}
.statusIcon {
width: 20px !important;
}

62
frontend/src/AddMovie/AddListMovie/Table/MovieStatusCell.js Normal file
View File

@ -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;

1
frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js
View File

@ -58,6 +58,7 @@ class AddNewMovieSearchResult extends Component {
isExclusionMovie,
isSmallScreen
} = this.props;
const {
isNewAddMovieModalOpen
} = this.state;

12
frontend/src/App/AppRoutes.js
View File

@ -6,6 +6,8 @@ import NotFound from 'Components/NotFound';
import Switch from 'Components/Router/Switch';
import MovieIndexConnector from 'Movie/Index/MovieIndexConnector';
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 MovieDetailsPageConnector from 'Movie/Details/MovieDetailsPageConnector';
import CalendarPageConnector from 'Calendar/CalendarPageConnector';
@ -76,6 +78,16 @@ function AppRoutes(props) {
component={ImportMovies}
/>
<Route
path="/add/list"
component={AddListMovieConnector}
/>
<Route
path="/add/discover"
component={AddDiscoverMovieConnector}
/>
<Route
path="/movie/:titleSlug"
component={MovieDetailsPageConnector}

2
frontend/src/Components/Page/Sidebar/PageSidebar.js
View File

@ -38,7 +38,7 @@ const links = [
},
{
title: 'Lists',
to: '/add/lists'
to: '/add/list'
}
]
},

283
frontend/src/Store/Actions/addMovieActions.js
View File

@ -4,11 +4,19 @@ import { batchActions } from 'redux-batched-actions';
import getSectionState from 'Utilities/State/getSectionState';
import updateSectionState from 'Utilities/State/updateSectionState';
import createAjaxRequest from 'Utilities/createAjaxRequest';
import createFetchHandler from './Creators/createFetchHandler';
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 createSetSettingValueReducer from './Creators/Reducers/createSetSettingValueReducer';
import createHandleActions from './Creators/createHandleActions';
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
@ -27,17 +35,213 @@ export const defaultState = {
isAdded: false,
addError: null,
items: [],
sortKey: 'sortTitle',
sortDirection: sortDirections.ASCENDING,
secondarySortKey: 'sortTitle',
secondarySortDirection: sortDirections.ASCENDING,
view: 'overview',
defaults: {
rootFolderPath: '',
monitor: 'true',
qualityProfileId: 0,
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 = [
'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 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
@ -57,6 +271,16 @@ export const addMovie = createThunk(ADD_MOVIE);
export const clearAddMovie = createAction(CLEAR_ADD_MOVIE);
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) => {
return {
section,
@ -69,6 +293,10 @@ export const setAddMovieValue = createAction(SET_ADD_MOVIE_VALUE, (payload) => {
export const actionHandlers = handleThunks({
[FETCH_LIST_MOVIES]: createFetchHandler(section, '/netimport/movies'),
[FETCH_DISCOVER_MOVIES]: createFetchHandler(section, '/movies/discover'),
[LOOKUP_MOVIE]: function(getState, payload, dispatch) {
dispatch(set({ section, isFetching: true }));
@ -164,13 +392,54 @@ export const reducers = createHandleActions({
return updateSectionState(state, section, newState);
},
[CLEAR_ADD_MOVIE]: function(state) {
const {
defaults,
...otherDefaultState
} = defaultState;
[SET_LIST_MOVIE_SORT]: createSetClientSideCollectionSortReducer(section),
[SET_LIST_MOVIE_FILTER]: createSetClientSideCollectionFilterReducer(section),
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);

2
frontend/src/Store/Middleware/createSentryMiddleware.js
View File

@ -68,8 +68,6 @@ export default function createSentryMiddleware() {
isProduction
} = window.Radarr;
console.log(window.Radarr);
if (!analytics) {
return;
}

13
frontend/src/Store/Selectors/createAddListMovieSelector.js Normal file
View File

@ -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;

36
frontend/src/Store/Selectors/createAddMovieClientSideCollectionItemsSelector.js Normal file
View File

@ -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;

3
frontend/src/Store/scrollPositions.js
View File

@ -1,5 +1,6 @@
const scrollPositions = {
movieIndex: 0
movieIndex: 0,
addMovie: 0
};
export default scrollPositions;

6
src/Radarr.Api.V2/Movies/FetchMovieListModule.cs
View File

@ -30,7 +30,7 @@ private object Search()
List<Movie> realResults = new List<Movie>();
/*foreach (var movie in results)
foreach (var movie in results)
{
var mapped = _movieSearch.MapMovieToTmdbMovie(movie);
@ -38,9 +38,9 @@ private object Search()
{
realResults.Add(mapped);
}
}*/
}
return MapToResource(results);
return MapToResource(realResults);
}

18
src/Radarr.Api.V2/Movies/MovieDiscoverModule.cs
View File

@ -1,14 +1,12 @@
using System.Collections.Generic;
using Nancy;
using Radarr.Http.Extensions;
using NzbDrone.Core.Movies;
using NzbDrone.Core.MediaCover;
using NzbDrone.Core.MetadataSource;
using System.Linq;
using System;
using Radarr.Http;
using NzbDrone.Core.NetImport;
using Radarr.Api.V2.NetImport;
using NzbDrone.Core.Organizer;
namespace Radarr.Api.V2.Movies
{
@ -16,12 +14,14 @@ public class MovieDiscoverModule : RadarrRestModule<MovieResource>
{
private readonly IDiscoverNewMovies _searchProxy;
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")
{
_searchProxy = searchProxy;
_netImportFactory = netImportFactory;
_fileNameBuilder = fileNameBuilder;
Get("/lists", x => GetLists());
Get("/{action?recommendations}", x => Search(x.action));
}
@ -46,17 +46,19 @@ private object GetLists()
});
}
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 poster = currentSeries.Images.FirstOrDefault(c => c.CoverType == MediaCoverTypes.Poster);
var resource = currentMovie.ToResource();
var poster = currentMovie.Images.FirstOrDefault(c => c.CoverType == MediaCoverTypes.Poster);
if (poster != null)
{
resource.RemotePoster = poster.Url;
}
resource.Folder = _fileNameBuilder.GetMovieFolder(currentMovie);
yield return resource;
}
}