open-source-mirrors
/
Sonarr
mirror of https://github.com/Sonarr/Sonarr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor Series index to use react-window

Browse Source
pull/5431/head
Mark McDowall 1 year ago committed by Mark McDowall
parent de56862bb9
commit d022679b7d
92 changed files with 3527 additions and 4462 deletions
Show Stats Download Patch File Download Diff File

25
frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js
Unescape View File

@ -17,6 +17,8 @@ class ImportSeries extends Component {
constructor(props, context) {
super(props, context);
this.scrollerRef = React.createRef();
this.state = {
allSelected: false,
allUnselected: false,
@ -25,13 +27,6 @@ class ImportSeries extends Component {
};
}
//
// Control
setScrollerRef = (ref) => {
this.setState({ scroller: ref });
};
//
// Listeners
@ -70,10 +65,6 @@ class ImportSeries extends Component {
this.props.onImportPress(this.getSelectedIds());
};
onScroll = ({ scrollTop }) => {
this.setState({ scrollTop });
};
//
// Render
@ -90,16 +81,12 @@ class ImportSeries extends Component {
const {
allSelected,
allUnselected,
selectedState,
scroller
selectedState
} = this.state;
return (
<PageContent title="Import Series">
<PageContentBody
registerScroller={this.setScrollerRef}
onScroll={this.onScroll}
>
<PageContentBody ref={this.scrollerRef} >
{
rootFoldersFetching ? <LoadingIndicator /> : null
}
@ -126,14 +113,14 @@ class ImportSeries extends Component {
!rootFoldersFetching &&
rootFoldersPopulated &&
!!unmappedFolders.length &&
scroller ?
this.scrollerRef.current ?
<ImportSeriesTableConnector
rootFolderId={rootFolderId}
unmappedFolders={unmappedFolders}
allSelected={allSelected}
allUnselected={allUnselected}
selectedState={selectedState}
scroller={scroller}
scroller={this.scrollerRef.current}
onSelectAllChange={this.onSelectAllChange}
onSelectedChange={this.onSelectedChange}
onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}

4
frontend/src/App/AppRoutes.js
Unescape View File

@ -12,7 +12,7 @@ import Switch from 'Components/Router/Switch';
import SeasonPassConnector from 'SeasonPass/SeasonPassConnector';
import SeriesDetailsPageConnector from 'Series/Details/SeriesDetailsPageConnector';
import SeriesEditorConnector from 'Series/Editor/SeriesEditorConnector';
import SeriesIndexConnector from 'Series/Index/SeriesIndexConnector';
import SeriesIndex from 'Series/Index/SeriesIndex';
import CustomFormatSettingsConnector from 'Settings/CustomFormats/CustomFormatSettingsConnector';
import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
@ -51,7 +51,7 @@ function AppRoutes(props) {
<Route
exact={true}
path="/"
component={SeriesIndexConnector}
component={SeriesIndex}
/>
{

5
frontend/src/App/ModelBase.ts
Unescape View File

@ -0,0 +1,5 @@
interface ModelBase {
id: number;
}
export default ModelBase;

6
frontend/src/Components/Form/FormInputGroup.js
Unescape View File

@ -256,6 +256,9 @@ FormInputGroup.propTypes = {
className: PropTypes.string.isRequired,
containerClassName: PropTypes.string.isRequired,
inputClassName: PropTypes.string,
name: PropTypes.string.isRequired,
value: PropTypes.any,
values: PropTypes.arrayOf(PropTypes.any),
type: PropTypes.string.isRequired,
unit: PropTypes.string,
buttons: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
@ -265,7 +268,8 @@ FormInputGroup.propTypes = {
helpLink: PropTypes.string,
pending: PropTypes.bool,
errors: PropTypes.arrayOf(PropTypes.object),
warnings: PropTypes.arrayOf(PropTypes.object)
warnings: PropTypes.arrayOf(PropTypes.object),
onChange: PropTypes.func.isRequired
};
FormInputGroup.defaultProps = {

26
frontend/src/Components/Form/FormLabel.js
Unescape View File

@ -4,16 +4,18 @@ import React from 'react';
import { sizes } from 'Helpers/Props';
import styles from './FormLabel.css';
function FormLabel({
children,
className,
errorClassName,
size,
name,
hasError,
isAdvanced,
...otherProps
}) {
function FormLabel(props) {
const {
children,
className,
errorClassName,
size,
name,
hasError,
isAdvanced,
...otherProps
} = props;
return (
<label
{...otherProps}
@ -31,13 +33,13 @@ function FormLabel({
}
FormLabel.propTypes = {
children: PropTypes.node.isRequired,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
className: PropTypes.string,
errorClassName: PropTypes.string,
size: PropTypes.oneOf(sizes.all),
name: PropTypes.string,
hasError: PropTypes.bool,
isAdvanced: PropTypes.bool.isRequired
isAdvanced: PropTypes.bool
};
FormLabel.defaultProps = {

2
frontend/src/Components/Link/IconButton.js
Unescape View File

@ -38,11 +38,13 @@ function IconButton(props) {
}
IconButton.propTypes = {
...Link.propTypes,
className: PropTypes.string.isRequired,
iconClassName: PropTypes.string,
kind: PropTypes.string,
name: PropTypes.object.isRequired,
size: PropTypes.number,
title: PropTypes.string,
isSpinning: PropTypes.bool,
isDisabled: PropTypes.bool
};

2
frontend/src/Components/Link/SpinnerIconButton.js
Unescape View File

@ -23,6 +23,8 @@ function SpinnerIconButton(props) {
}
SpinnerIconButton.propTypes = {
...IconButton.propTypes,
className: PropTypes.string,
name: PropTypes.object.isRequired,
spinningName: PropTypes.object.isRequired,
isDisabled: PropTypes.bool.isRequired,

5
frontend/src/Components/Menu/SortMenu.js
Unescape View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import Menu from 'Components/Menu/Menu';
import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
import { icons } from 'Helpers/Props';
import { align, icons } from 'Helpers/Props';
function SortMenu(props) {
const {
@ -30,7 +30,8 @@ function SortMenu(props) {
SortMenu.propTypes = {
className: PropTypes.string,
children: PropTypes.node.isRequired,
isDisabled: PropTypes.bool.isRequired
isDisabled: PropTypes.bool.isRequired,
alignMenu: PropTypes.oneOf([align.LEFT, align.RIGHT])
};
SortMenu.defaultProps = {

5
frontend/src/Components/Menu/ViewMenu.js
Unescape View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import Menu from 'Components/Menu/Menu';
import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
import { icons } from 'Helpers/Props';
import { align, icons } from 'Helpers/Props';
function ViewMenu(props) {
const {
@ -27,7 +27,8 @@ function ViewMenu(props) {
ViewMenu.propTypes = {
children: PropTypes.node.isRequired,
isDisabled: PropTypes.bool.isRequired
isDisabled: PropTypes.bool.isRequired,
alignMenu: PropTypes.oneOf([align.LEFT, align.RIGHT])
};
ViewMenu.defaultProps = {

61
frontend/src/Components/Page/PageContentBody.js
Unescape View File

@ -1,61 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Scroller from 'Components/Scroller/Scroller';
import { scrollDirections } from 'Helpers/Props';
import { isLocked } from 'Utilities/scrollLock';
import styles from './PageContentBody.css';
class PageContentBody extends Component {
//
// Listeners
onScroll = (props) => {
const { onScroll } = this.props;
if (this.props.onScroll && !isLocked()) {
onScroll(props);
}
};
//
// Render
render() {
const {
className,
innerClassName,
children,
dispatch,
...otherProps
} = this.props;
return (
<Scroller
className={className}
scrollDirection={scrollDirections.VERTICAL}
{...otherProps}
onScroll={this.onScroll}
>
<div className={innerClassName}>
{children}
</div>
</Scroller>
);
}
}
PageContentBody.propTypes = {
className: PropTypes.string,
innerClassName: PropTypes.string,
children: PropTypes.node.isRequired,
onScroll: PropTypes.func,
dispatch: PropTypes.func
};
PageContentBody.defaultProps = {
className: styles.contentBody,
innerClassName: styles.innerContentBody
};
export default PageContentBody;

51
frontend/src/Components/Page/PageContentBody.tsx
Unescape View File

@ -0,0 +1,51 @@
import React, { forwardRef, ReactNode, useCallback } from 'react';
import Scroller from 'Components/Scroller/Scroller';
import ScrollDirection from 'Helpers/Props/ScrollDirection';
import { isLocked } from 'Utilities/scrollLock';
import styles from './PageContentBody.css';
interface PageContentBodyProps {
className: string;
innerClassName: string;
children: ReactNode;
initialScrollTop?: number;
onScroll?: (payload) => void;
}
const PageContentBody = forwardRef(
(
props: PageContentBodyProps,
ref: React.MutableRefObject<HTMLDivElement>
) => {
const {
className = styles.contentBody,
innerClassName = styles.innerContentBody,
children,
onScroll,
...otherProps
} = props;
const onScrollWrapper = useCallback(
(payload) => {
if (onScroll && !isLocked()) {
onScroll(payload);
}
},
[onScroll]
);
return (
<Scroller
ref={ref}
{...otherProps}
className={className}
scrollDirection={ScrollDirection.Vertical}
onScroll={onScrollWrapper}
>
<div className={innerClassName}>{children}</div>
</Scroller>
);
}
);
export default PageContentBody;

3
frontend/src/Components/Page/Toolbar/PageToolbarButton.js
Unescape View File

@ -45,7 +45,8 @@ PageToolbarButton.propTypes = {
iconName: PropTypes.object.isRequired,
spinningName: PropTypes.object,
isSpinning: PropTypes.bool,
isDisabled: PropTypes.bool
isDisabled: PropTypes.bool,
onPress: PropTypes.func
};
PageToolbarButton.defaultProps = {

95
frontend/src/Components/Scroller/Scroller.js
Unescape View File

@ -1,95 +0,0 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { scrollDirections } from 'Helpers/Props';
import styles from './Scroller.css';
class Scroller extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this._scroller = null;
}
componentDidMount() {
const {
scrollDirection,
autoFocus,
scrollTop
} = this.props;
if (this.props.scrollTop != null) {
this._scroller.scrollTop = scrollTop;
}
if (autoFocus && scrollDirection !== scrollDirections.NONE) {
this._scroller.focus({ preventScroll: true });
}
}
//
// Control
_setScrollerRef = (ref) => {
this._scroller = ref;
this.props.registerScroller(ref);
};
//
// Render
render() {
const {
className,
scrollDirection,
autoScroll,
children,
scrollTop,
onScroll,
registerScroller,
...otherProps
} = this.props;
return (
<div
ref={this._setScrollerRef}
className={classNames(
className,
styles.scroller,
styles[scrollDirection],
autoScroll && styles.autoScroll
)}
tabIndex={-1}
{...otherProps}
>
{children}
</div>
);
}
}
Scroller.propTypes = {
className: PropTypes.string,
scrollDirection: PropTypes.oneOf(scrollDirections.all).isRequired,
autoFocus: PropTypes.bool.isRequired,
autoScroll: PropTypes.bool.isRequired,
scrollTop: PropTypes.number,
children: PropTypes.node,
onScroll: PropTypes.func,
registerScroller: PropTypes.func
};
Scroller.defaultProps = {
scrollDirection: scrollDirections.VERTICAL,
autoFocus: true,
autoScroll: true,
registerScroller: () => { /* no-op */ }
};
export default Scroller;

90
frontend/src/Components/Scroller/Scroller.tsx
Unescape View File

@ -0,0 +1,90 @@
import classNames from 'classnames';
import { throttle } from 'lodash';
import React, { forwardRef, ReactNode, useEffect, useRef } from 'react';
import ScrollDirection from 'Helpers/Props/ScrollDirection';
import styles from './Scroller.css';
interface ScrollerProps {
className?: string;
scrollDirection?: ScrollDirection;
autoFocus?: boolean;
autoScroll?: boolean;
scrollTop?: number;
initialScrollTop?: number;
children?: ReactNode;
onScroll?: (payload) => void;
}
const Scroller = forwardRef(
(props: ScrollerProps, ref: React.MutableRefObject<HTMLDivElement>) => {
const {
className,
autoFocus = false,
autoScroll = true,
scrollDirection = ScrollDirection.Vertical,
children,
scrollTop,
initialScrollTop,
onScroll,
...otherProps
} = props;
const internalRef = useRef();
const currentRef = ref ?? internalRef;
useEffect(
() => {
if (initialScrollTop != null) {
currentRef.current.scrollTop = initialScrollTop;
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
useEffect(() => {
if (scrollTop != null) {
currentRef.current.scrollTop = scrollTop;
}
if (autoFocus && scrollDirection !== ScrollDirection.None) {
currentRef.current.focus({ preventScroll: true });
}
}, [autoFocus, currentRef, scrollDirection, scrollTop]);
useEffect(() => {
const div = currentRef.current;
const handleScroll = throttle(() => {
const scrollLeft = div.scrollLeft;
const scrollTop = div.scrollTop;
onScroll?.({ scrollLeft, scrollTop });
}, 10);
div.addEventListener('scroll', handleScroll);
return () => {
div.removeEventListener('scroll', handleScroll);
};
}, [currentRef, onScroll]);
return (
<div
{...otherProps}
ref={currentRef}
className={classNames(
className,
styles.scroller,
styles[scrollDirection],
autoScroll && styles.autoScroll
)}
tabIndex={-1}
>
{children}
</div>
);
}
);
export default Scroller;

10
frontend/src/Components/Table/Column.ts
Unescape View File

@ -0,0 +1,10 @@
interface Column {
name: string;
label: string;
columnLabel: string;
isSortable: boolean;
isVisible: boolean;
isModifiable?: boolean;
}
export default Column;

30
frontend/src/Components/withScrollPosition.js
Unescape View File

@ -1,30 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import scrollPositions from 'Store/scrollPositions';
function withScrollPosition(WrappedComponent, scrollPositionKey) {
function ScrollPosition(props) {
const {
history
} = props;
const scrollTop = history.action === 'POP' || (history.location.state && history.location.state.restoreScrollPosition) ?
scrollPositions[scrollPositionKey] :
0;
return (
<WrappedComponent
{...props}
scrollTop={scrollTop}
/>
);
}
ScrollPosition.propTypes = {
history: PropTypes.object.isRequired
};
return ScrollPosition;
}
export default withScrollPosition;

25
frontend/src/Components/withScrollPosition.tsx
Unescape View File

@ -0,0 +1,25 @@
import PropTypes from 'prop-types';
import React from 'react';
import scrollPositions from 'Store/scrollPositions';
function withScrollPosition(WrappedComponent, scrollPositionKey) {
function ScrollPosition(props) {
const { history } = props;
const initialScrollTop =
history.action === 'POP' ||
(history.location.state && history.location.state.restoreScrollPosition)
? scrollPositions[scrollPositionKey]
: 0;
return <WrappedComponent {...props} initialScrollTop={initialScrollTop} />;
}
ScrollPosition.propTypes = {
history: PropTypes.object.isRequired,
};
return ScrollPosition;
}
export default withScrollPosition;

21
frontend/src/Helpers/Hooks/useMeasure.ts
Unescape View File

@ -0,0 +1,21 @@
import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
import {
default as useMeasureHook,
Options,
RectReadOnly,
} from 'react-use-measure';
const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
export type Measurements = RectReadOnly;
function useMeasure(
options?: Omit<Options, 'polyfill'>
): ReturnType<typeof useMeasureHook> {
return useMeasureHook({
polyfill: ResizeObserver,
...options,
});
}
export default useMeasure;

8
frontend/src/Helpers/Props/ScrollDirection.ts
Unescape View File

@ -0,0 +1,8 @@
enum ScrollDirection {
Horizontal = 'horizontal',
Vertical = 'vertical',
None = 'none',
Both = 'both',
}
export default ScrollDirection;

6
frontend/src/Helpers/Props/SortDirection.ts
Unescape View File

@ -0,0 +1,6 @@
enum SortDirection {
Ascending = 'ascending',
Descending = 'descending',
}
export default SortDirection;

1
frontend/src/Series/Delete/DeleteSeriesModal.js
Unescape View File

@ -26,6 +26,7 @@ function DeleteSeriesModal(props) {
}
DeleteSeriesModal.propTypes = {
...DeleteSeriesModalContentConnector.propTypes,
isOpen: PropTypes.bool.isRequired,
onModalClose: PropTypes.func.isRequired
};

1
frontend/src/Series/Delete/DeleteSeriesModalContent.js
Unescape View File

@ -149,7 +149,6 @@ DeleteSeriesModalContent.propTypes = {
statistics: PropTypes.object.isRequired,
deleteOptions: PropTypes.object.isRequired,
onDeleteOptionChange: PropTypes.func.isRequired,
onAddImportListExclusionChange: PropTypes.func.isRequired,
onDeletePress: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};

1
frontend/src/Series/Edit/EditSeriesModal.js
Unescape View File

@ -18,6 +18,7 @@ function EditSeriesModal({ isOpen, onModalClose, ...otherProps }) {
}
EditSeriesModal.propTypes = {
...EditSeriesModalContentConnector.propTypes,
isOpen: PropTypes.bool.isRequired,
onModalClose: PropTypes.func.isRequired
};

1
frontend/src/Series/Edit/EditSeriesModalConnector.js
Unescape View File

@ -32,6 +32,7 @@ class EditSeriesModalConnector extends Component {
}
EditSeriesModalConnector.propTypes = {
...EditSeriesModal.propTypes,
onModalClose: PropTypes.func.isRequired,
clearPendingChanges: PropTypes.func.isRequired
};

13
frontend/src/Series/Index/Menus/SeriesIndexFilterMenu.js → frontend/src/Series/Index/Menus/SeriesIndexFilterMenu.tsx
Unescape View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import FilterMenu from 'Components/Menu/FilterMenu';
import { align } from 'Helpers/Props';
import SeriesIndexFilterModalConnector from 'Series/Index/SeriesIndexFilterModalConnector';
import SeriesIndexFilterModal from 'Series/Index/SeriesIndexFilterModal';
function SeriesIndexFilterMenu(props) {
const {
@ -10,7 +10,7 @@ function SeriesIndexFilterMenu(props) {
filters,
customFilters,
isDisabled,
onFilterSelect
onFilterSelect,
} = props;
return (
@ -20,22 +20,23 @@ function SeriesIndexFilterMenu(props) {
selectedFilterKey={selectedFilterKey}
filters={filters}
customFilters={customFilters}
filterModalConnectorComponent={SeriesIndexFilterModalConnector}
filterModalConnectorComponent={SeriesIndexFilterModal}
onFilterSelect={onFilterSelect}
/>
);
}
SeriesIndexFilterMenu.propTypes = {
selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
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
onFilterSelect: PropTypes.func.isRequired,
};
SeriesIndexFilterMenu.defaultProps = {
showCustomFilters: false
showCustomFilters: false,
};
export default SeriesIndexFilterMenu;

14
frontend/src/Series/Index/Menus/SeriesIndexSortMenu.js → frontend/src/Series/Index/Menus/SeriesIndexSortMenu.tsx
Unescape View File

@ -6,18 +6,10 @@ import SortMenuItem from 'Components/Menu/SortMenuItem';
import { align, sortDirections } from 'Helpers/Props';
function SeriesIndexSortMenu(props) {
const {
sortKey,
sortDirection,
isDisabled,
onSortSelect
} = props;
const { sortKey, sortDirection, isDisabled, onSortSelect } = props;
return (
<SortMenu
isDisabled={isDisabled}
alignMenu={align.RIGHT}
>
<SortMenu isDisabled={isDisabled} alignMenu={align.RIGHT}>
<MenuContent>
<SortMenuItem
name="status"
@ -162,7 +154,7 @@ SeriesIndexSortMenu.propTypes = {
sortKey: PropTypes.string,
sortDirection: PropTypes.oneOf(sortDirections.all),
isDisabled: PropTypes.bool.isRequired,
onSortSelect: PropTypes.func.isRequired
onSortSelect: PropTypes.func.isRequired,
};
export default SeriesIndexSortMenu;

25
frontend/src/Series/Index/Menus/SeriesIndexViewMenu.js → frontend/src/Series/Index/Menus/SeriesIndexViewMenu.tsx
Unescape View File

@ -6,31 +6,16 @@ import ViewMenuItem from 'Components/Menu/ViewMenuItem';
import { align } from 'Helpers/Props';
function SeriesIndexViewMenu(props) {
const {
view,
isDisabled,
onViewSelect
} = props;
const { view, isDisabled, onViewSelect } = props;
return (
<ViewMenu
isDisabled={isDisabled}
alignMenu={align.RIGHT}
>
<ViewMenu isDisabled={isDisabled} alignMenu={align.RIGHT}>
<MenuContent>
<ViewMenuItem
name="table"
selectedView={view}
onPress={onViewSelect}
>
<ViewMenuItem name="table" selectedView={view} onPress={onViewSelect}>
Table
</ViewMenuItem>
<ViewMenuItem
name="posters"
selectedView={view}
onPress={onViewSelect}
>
<ViewMenuItem name="posters" selectedView={view} onPress={onViewSelect}>
Posters
</ViewMenuItem>
@ -49,7 +34,7 @@ function SeriesIndexViewMenu(props) {
SeriesIndexViewMenu.propTypes = {
view: PropTypes.string.isRequired,
isDisabled: PropTypes.bool.isRequired,
onViewSelect: PropTypes.func.isRequired
onViewSelect: PropTypes.func.isRequired,
};
export default SeriesIndexViewMenu;

25
frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModal.js
Unescape View File

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

25
frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModal.tsx
Unescape View File

@ -0,0 +1,25 @@
import React from 'react';
import Modal from 'Components/Modal/Modal';
import SeriesIndexOverviewOptionsModalContent from './SeriesIndexOverviewOptionsModalContent';
interface SeriesIndexOverviewOptionsModalProps {
isOpen: boolean;
onModalClose(...args: unknown[]): void;
}
function SeriesIndexOverviewOptionsModal({
isOpen,
onModalClose,
...otherProps
}: SeriesIndexOverviewOptionsModalProps) {
return (
<Modal isOpen={isOpen} onModalClose={onModalClose}>
<SeriesIndexOverviewOptionsModalContent
{...otherProps}
onModalClose={onModalClose}
/>
</Modal>
);
}
export default SeriesIndexOverviewOptionsModal;

305
frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContent.js
Unescape View File

@ -1,305 +0,0 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import Button from 'Components/Link/Button';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { inputTypes } from 'Helpers/Props';
const posterSizeOptions = [
{ key: 'small', value: 'Small' },
{ key: 'medium', value: 'Medium' },
{ key: 'large', value: 'Large' }
];
class SeriesIndexOverviewOptionsModalContent extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
detailedProgressBar: props.detailedProgressBar,
size: props.size,
showMonitored: props.showMonitored,
showNetwork: props.showNetwork,
showQualityProfile: props.showQualityProfile,
showPreviousAiring: props.showPreviousAiring,
showAdded: props.showAdded,
showSeasonCount: props.showSeasonCount,
showPath: props.showPath,
showSizeOnDisk: props.showSizeOnDisk,
showSearchAction: props.showSearchAction
};
}
componentDidUpdate(prevProps) {
const {
detailedProgressBar,
size,
showMonitored,
showNetwork,
showQualityProfile,
showPreviousAiring,
showAdded,
showSeasonCount,
showPath,
showSizeOnDisk,
showSearchAction
} = this.props;
const state = {};
if (detailedProgressBar !== prevProps.detailedProgressBar) {
state.detailedProgressBar = detailedProgressBar;
}
if (size !== prevProps.size) {
state.size = size;
}
if (showMonitored !== prevProps.showMonitored) {
state.showMonitored = showMonitored;
}
if (showNetwork !== prevProps.showNetwork) {
state.showNetwork = showNetwork;
}
if (showQualityProfile !== prevProps.showQualityProfile) {
state.showQualityProfile = showQualityProfile;
}
if (showPreviousAiring !== prevProps.showPreviousAiring) {
state.showPreviousAiring = showPreviousAiring;
}
if (showAdded !== prevProps.showAdded) {
state.showAdded = showAdded;
}
if (showSeasonCount !== prevProps.showSeasonCount) {
state.showSeasonCount = showSeasonCount;
}
if (showPath !== prevProps.showPath) {
state.showPath = showPath;
}
if (showSizeOnDisk !== prevProps.showSizeOnDisk) {
state.showSizeOnDisk = showSizeOnDisk;
}
if (showSearchAction !== prevProps.showSearchAction) {
state.showSearchAction = showSearchAction;
}
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 {
detailedProgressBar,
size,
showMonitored,
showNetwork,
showQualityProfile,
showPreviousAiring,
showAdded,
showSeasonCount,
showPath,
showSizeOnDisk,
showSearchAction
} = 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>Detailed Progress Bar</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="detailedProgressBar"
value={detailedProgressBar}
helpText="Show text on progress bar"
onChange={this.onChangeOverviewOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Monitored</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showMonitored"
value={showMonitored}
onChange={this.onChangeOverviewOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Network</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showNetwork"
value={showNetwork}
onChange={this.onChangeOverviewOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Quality Profile</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showQualityProfile"
value={showQualityProfile}
onChange={this.onChangeOverviewOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Previous Airing</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showPreviousAiring"
value={showPreviousAiring}
onChange={this.onChangeOverviewOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Date Added</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showAdded"
value={showAdded}
onChange={this.onChangeOverviewOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Season Count</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showSeasonCount"
value={showSeasonCount}
onChange={this.onChangeOverviewOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Path</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showPath"
value={showPath}
onChange={this.onChangeOverviewOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Size on Disk</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showSizeOnDisk"
value={showSizeOnDisk}
onChange={this.onChangeOverviewOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Search</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showSearchAction"
value={showSearchAction}
helpText="Show search button on hover"
onChange={this.onChangeOverviewOption}
/>
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button
onPress={onModalClose}
>
Close
</Button>
</ModalFooter>
</ModalContent>
);
}
}
SeriesIndexOverviewOptionsModalContent.propTypes = {
size: PropTypes.string.isRequired,
detailedProgressBar: PropTypes.bool.isRequired,
showMonitored: PropTypes.bool.isRequired,
showNetwork: PropTypes.bool.isRequired,
showQualityProfile: PropTypes.bool.isRequired,
showPreviousAiring: PropTypes.bool.isRequired,
showAdded: PropTypes.bool.isRequired,
showSeasonCount: PropTypes.bool.isRequired,
showPath: PropTypes.bool.isRequired,
showSizeOnDisk: PropTypes.bool.isRequired,
showSearchAction: PropTypes.bool.isRequired,
onChangeOverviewOption: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};
export default SeriesIndexOverviewOptionsModalContent;

193
frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContent.tsx
Unescape View File

@ -0,0 +1,193 @@
import React, { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import Button from 'Components/Link/Button';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { inputTypes } from 'Helpers/Props';
import { setSeriesOverviewOption } from 'Store/Actions/seriesIndexActions';
import selectOverviewOptions from '../selectOverviewOptions';
const posterSizeOptions = [
{ key: 'small', value: 'Small' },
{ key: 'medium', value: 'Medium' },
{ key: 'large', value: 'Large' },
];
interface SeriesIndexOverviewOptionsModalContentProps {
onModalClose(...args: unknown[]): void;
}
function SeriesIndexOverviewOptionsModalContent(
props: SeriesIndexOverviewOptionsModalContentProps
) {
const { onModalClose } = props;
const {
detailedProgressBar,
size,
showMonitored,
showNetwork,
showQualityProfile,
showPreviousAiring,
showAdded,
showSeasonCount,
showPath,
showSizeOnDisk,
showSearchAction,
} = useSelector(selectOverviewOptions);
const dispatch = useDispatch();
const onOverviewOptionChange = useCallback(
({ name, value }) => {
dispatch(setSeriesOverviewOption({ [name]: value }));
},
[dispatch]
);
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={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Detailed Progress Bar</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="detailedProgressBar"
value={detailedProgressBar}
helpText="Show text on progress bar"
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Monitored</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showMonitored"
value={showMonitored}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Network</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showNetwork"
value={showNetwork}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Quality Profile</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showQualityProfile"
value={showQualityProfile}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Previous Airing</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showPreviousAiring"
value={showPreviousAiring}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Date Added</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showAdded"
value={showAdded}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Season Count</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showSeasonCount"
value={showSeasonCount}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Path</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showPath"
value={showPath}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Size on Disk</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showSizeOnDisk"
value={showSizeOnDisk}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Search</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showSearchAction"
value={showSearchAction}
helpText="Show search button on hover"
onChange={onOverviewOptionChange}
/>
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button onPress={onModalClose}>Close</Button>
</ModalFooter>
</ModalContent>
);
}
export default SeriesIndexOverviewOptionsModalContent;

23
frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContentConnector.js
Unescape View File

@ -1,23 +0,0 @@
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { setSeriesOverviewOption } from 'Store/Actions/seriesIndexActions';
import SeriesIndexOverviewOptionsModalContent from './SeriesIndexOverviewOptionsModalContent';
function createMapStateToProps() {
return createSelector(
(state) => state.seriesIndex,
(seriesIndex) => {
return seriesIndex.overviewOptions;
}
);
}
function createMapDispatchToProps(dispatch, props) {
return {
onChangeOverviewOption(payload) {
dispatch(setSeriesOverviewOption(payload));
}
};
}
export default connect(createMapStateToProps, createMapDispatchToProps)(SeriesIndexOverviewOptionsModalContent);

281
frontend/src/Series/Index/Overview/SeriesIndexOverview.js
Unescape View File

@ -1,281 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import TextTruncate from 'react-text-truncate';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import { icons } from 'Helpers/Props';
import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
import SeriesIndexProgressBar from 'Series/Index/ProgressBar/SeriesIndexProgressBar';
import SeriesPoster from 'Series/SeriesPoster';
import dimensions from 'Styles/Variables/dimensions';
import fonts from 'Styles/Variables/fonts';
import SeriesIndexOverviewInfo from './SeriesIndexOverviewInfo';
import styles from './SeriesIndexOverview.css';
const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
const columnPaddingSmallScreen = parseInt(dimensions.seriesIndexColumnPaddingSmallScreen);
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 SeriesIndexOverview extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
isEditSeriesModalOpen: false,
isDeleteSeriesModalOpen: false
};
}
//
// Listeners
onEditSeriesPress = () => {
this.setState({ isEditSeriesModalOpen: true });
};
onEditSeriesModalClose = () => {
this.setState({ isEditSeriesModalOpen: false });
};
onDeleteSeriesPress = () => {
this.setState({
isEditSeriesModalOpen: false,
isDeleteSeriesModalOpen: true
});
};
onDeleteSeriesModalClose = () => {
this.setState({ isDeleteSeriesModalOpen: false });
};
//
// Render
render() {
const {
id,
title,
overview,
monitored,
status,
titleSlug,
nextAiring,
statistics,
images,
posterWidth,
posterHeight,
qualityProfile,
overviewOptions,
showSearchAction,
showRelativeDates,
shortDateFormat,
longDateFormat,
timeFormat,
rowHeight,
isSmallScreen,
isRefreshingSeries,
isSearchingSeries,
onRefreshSeriesPress,
onSearchPress,
...otherProps
} = this.props;
const {
seasonCount,
episodeCount,
episodeFileCount,
totalEpisodeCount,
sizeOnDisk
} = statistics;
const {
isEditSeriesModalOpen,
isDeleteSeriesModalOpen
} = this.state;
const link = `/series/${titleSlug}`;
const elementStyle = {
width: `${posterWidth}px`,
height: `${posterHeight}px`
};
const contentHeight = getContentHeight(rowHeight, isSmallScreen);
const overviewHeight = contentHeight - titleRowHeight;
return (
<div className={styles.container}>
<div className={styles.content}>
<div className={styles.poster}>
<div className={styles.posterContainer}>
{
status === 'ended' &&
<div
className={styles.ended}
title="Ended"
/>
}
<Link
className={styles.link}
style={elementStyle}
to={link}
>
<SeriesPoster
className={styles.poster}
style={elementStyle}
images={images}
size={250}
lazy={false}
overflow={true}
/>
</Link>
</div>
<SeriesIndexProgressBar
monitored={monitored}
status={status}
episodeCount={episodeCount}
episodeFileCount={episodeFileCount}
totalEpisodeCount={totalEpisodeCount}
posterWidth={posterWidth}
detailedProgressBar={overviewOptions.detailedProgressBar}
/>
</div>
<div className={styles.info} style={{ maxHeight: contentHeight }}>
<div className={styles.titleRow}>
<Link
className={styles.title}
to={link}
>
{title}
</Link>
<div className={styles.actions}>
<SpinnerIconButton
name={icons.REFRESH}
title="Refresh series"
isSpinning={isRefreshingSeries}
onPress={onRefreshSeriesPress}
/>
{
showSearchAction &&
<SpinnerIconButton
className={styles.action}
name={icons.SEARCH}
title="Search for monitored episodes"
isSpinning={isSearchingSeries}
onPress={onSearchPress}
/>
}
<IconButton
name={icons.EDIT}
title="Edit Series"
onPress={this.onEditSeriesPress}
/>
</div>
</div>
<div className={styles.details}>
<Link
className={styles.overview}
to={link}
>
<TextTruncate
line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
text={overview}
/>
</Link>
<SeriesIndexOverviewInfo
height={overviewHeight}
monitored={monitored}
nextAiring={nextAiring}
seasonCount={seasonCount}
qualityProfile={qualityProfile}
sizeOnDisk={sizeOnDisk}
showRelativeDates={showRelativeDates}
shortDateFormat={shortDateFormat}
longDateFormat={longDateFormat}
timeFormat={timeFormat}
{...overviewOptions}
{...otherProps}
/>
</div>
</div>
</div>
<EditSeriesModalConnector
isOpen={isEditSeriesModalOpen}
seriesId={id}
onModalClose={this.onEditSeriesModalClose}
onDeleteSeriesPress={this.onDeleteSeriesPress}
/>
<DeleteSeriesModal
isOpen={isDeleteSeriesModalOpen}
seriesId={id}
onModalClose={this.onDeleteSeriesModalClose}
/>
</div>
);
}
}
SeriesIndexOverview.propTypes = {
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
overview: PropTypes.string.isRequired,
monitored: PropTypes.bool.isRequired,
status: PropTypes.string.isRequired,
titleSlug: PropTypes.string.isRequired,
nextAiring: PropTypes.string,
statistics: PropTypes.object.isRequired,
images: PropTypes.arrayOf(PropTypes.object).isRequired,
posterWidth: PropTypes.number.isRequired,
posterHeight: PropTypes.number.isRequired,
rowHeight: PropTypes.number.isRequired,
qualityProfile: PropTypes.object.isRequired,
overviewOptions: PropTypes.object.isRequired,
showSearchAction: PropTypes.bool.isRequired,
showRelativeDates: PropTypes.bool.isRequired,
shortDateFormat: PropTypes.string.isRequired,
longDateFormat: PropTypes.string.isRequired,
timeFormat: PropTypes.string.isRequired,
isSmallScreen: PropTypes.bool.isRequired,
isRefreshingSeries: PropTypes.bool.isRequired,
isSearchingSeries: PropTypes.bool.isRequired,
onRefreshSeriesPress: PropTypes.func.isRequired,
onSearchPress: PropTypes.func.isRequired
};
SeriesIndexOverview.defaultProps = {
statistics: {
seasonCount: 0,
episodeCount: 0,
episodeFileCount: 0,
totalEpisodeCount: 0
}
};
export default SeriesIndexOverview;

240
frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx
Unescape View File

@ -0,0 +1,240 @@
import React, { useCallback, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import TextTruncate from 'react-text-truncate';
import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import { icons } from 'Helpers/Props';
import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
import SeriesIndexProgressBar from 'Series/Index/ProgressBar/SeriesIndexProgressBar';
import SeriesPoster from 'Series/SeriesPoster';
import { executeCommand } from 'Store/Actions/commandActions';
import dimensions from 'Styles/Variables/dimensions';
import fonts from 'Styles/Variables/fonts';
import createSeriesIndexItemSelector from '../createSeriesIndexItemSelector';
import selectOverviewOptions from './selectOverviewOptions';
import SeriesIndexOverviewInfo from './SeriesIndexOverviewInfo';
import styles from './SeriesIndexOverview.css';
const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
const columnPaddingSmallScreen = parseInt(
dimensions.seriesIndexColumnPaddingSmallScreen
);
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 TITLE_HEIGHT = 42;
interface SeriesIndexOverviewProps {
seriesId: number;
sortKey: string;
posterWidth: number;
posterHeight: number;
rowHeight: number;
isSmallScreen: boolean;
}
function SeriesIndexOverview(props: SeriesIndexOverviewProps) {
const {
seriesId,
sortKey,
posterWidth,
posterHeight,
rowHeight,
isSmallScreen,
} = props;
const { series, qualityProfile, isRefreshingSeries, isSearchingSeries } =
useSelector(createSeriesIndexItemSelector(props.seriesId));
const overviewOptions = useSelector(selectOverviewOptions);
const {
title,
monitored,
status,
path,
titleSlug,
nextAiring,
previousAiring,
added,
overview,
statistics = {},
images,
network,
} = series;
const {
seasonCount = 0,
episodeCount = 0,
episodeFileCount = 0,
totalEpisodeCount = 0,
sizeOnDisk = 0,
} = statistics;
const dispatch = useDispatch();
const [isEditSeriesModalOpen, setIsEditSeriesModalOpen] = useState(false);
const [isDeleteSeriesModalOpen, setIsDeleteSeriesModalOpen] = useState(false);
const onRefreshPress = useCallback(() => {
dispatch(
executeCommand({
name: REFRESH_SERIES,
seriesId,
})
);
}, [seriesId, dispatch]);
const onSearchPress = useCallback(() => {
dispatch(
executeCommand({
name: SERIES_SEARCH,
seriesId,
})
);
}, [seriesId, dispatch]);
const onEditSeriesPress = useCallback(() => {
setIsEditSeriesModalOpen(true);
}, [setIsEditSeriesModalOpen]);
const onEditSeriesModalClose = useCallback(() => {
setIsEditSeriesModalOpen(false);
}, [setIsEditSeriesModalOpen]);
const onDeleteSeriesPress = useCallback(() => {
setIsEditSeriesModalOpen(false);
setIsDeleteSeriesModalOpen(true);
}, [setIsDeleteSeriesModalOpen]);
const onDeleteSeriesModalClose = useCallback(() => {
setIsDeleteSeriesModalOpen(false);
}, [setIsDeleteSeriesModalOpen]);
const link = `/series/${titleSlug}`;
const elementStyle = {
width: `${posterWidth}px`,
height: `${posterHeight}px`,
};
const contentHeight = useMemo(() => {
const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
return rowHeight - padding;
}, [rowHeight, isSmallScreen]);
const overviewHeight = contentHeight - TITLE_HEIGHT;
return (
<div>
<div className={styles.content}>
<div className={styles.poster}>
<div className={styles.posterContainer}>
{status === 'ended' && (
<div className={styles.ended} title="Ended" />
)}
<Link className={styles.link} style={elementStyle} to={link}>
<SeriesPoster
className={styles.poster}
style={elementStyle}
images={images}
size={250}
lazy={false}
overflow={true}
/>
</Link>
</div>
<SeriesIndexProgressBar
monitored={monitored}
status={status}
episodeCount={episodeCount}
episodeFileCount={episodeFileCount}
totalEpisodeCount={totalEpisodeCount}
posterWidth={posterWidth}
detailedProgressBar={overviewOptions.detailedProgressBar}
/>
</div>
<div className={styles.info} style={{ maxHeight: contentHeight }}>
<div className={styles.titleRow}>
<Link className={styles.title} to={link}>
{title}
</Link>
<div className={styles.actions}>
<SpinnerIconButton
name={icons.REFRESH}
title="Refresh series"
isSpinning={isRefreshingSeries}
onPress={onRefreshPress}
/>
{overviewOptions.showSearchAction ? (
<SpinnerIconButton
name={icons.SEARCH}
title="Search for monitored episodes"
isSpinning={isSearchingSeries}
onPress={onSearchPress}
/>
) : null}
<IconButton
name={icons.EDIT}
title="Edit Series"
onPress={onEditSeriesPress}
/>
</div>
</div>
<div className={styles.details}>
<Link className={styles.overview} to={link}>
<TextTruncate
line={Math.floor(
overviewHeight / (defaultFontSize * lineHeight)
)}
text={overview}
/>
</Link>
<SeriesIndexOverviewInfo
height={overviewHeight}
monitored={monitored}
network={network}
nextAiring={nextAiring}
previousAiring={previousAiring}
added={added}
seasonCount={seasonCount}
qualityProfile={qualityProfile}
sizeOnDisk={sizeOnDisk}
path={path}
sortKey={sortKey}
{...overviewOptions}
/>
</div>
</div>
</div>
<EditSeriesModalConnector
isOpen={isEditSeriesModalOpen}
seriesId={seriesId}
onModalClose={onEditSeriesModalClose}
onDeleteSeriesPress={onDeleteSeriesPress}
/>
<DeleteSeriesModal
isOpen={isDeleteSeriesModalOpen}
seriesId={seriesId}
onModalClose={onDeleteSeriesModalClose}
/>
</div>
);
}
export default SeriesIndexOverview;

265
frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.js
Unescape View File

@ -1,265 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import { icons } from 'Helpers/Props';
import dimensions from 'Styles/Variables/dimensions';
import formatDateTime from 'Utilities/Date/formatDateTime';
import getRelativeDate from 'Utilities/Date/getRelativeDate';
import formatBytes from 'Utilities/Number/formatBytes';
import SeriesIndexOverviewInfoRow from './SeriesIndexOverviewInfoRow';
import styles from './SeriesIndexOverviewInfo.css';
const infoRowHeight = parseInt(dimensions.seriesIndexOverviewInfoRowHeight);
const rows = [
{
name: 'monitored',
showProp: 'showMonitored',
valueProp: 'monitored'
},
{
name: 'network',
showProp: 'showNetwork',
valueProp: 'network'
},
{
name: 'qualityProfileId',
showProp: 'showQualityProfile',
valueProp: 'qualityProfileId'
},
{
name: 'previousAiring',
showProp: 'showPreviousAiring',
valueProp: 'previousAiring'
},
{
name: 'added',
showProp: 'showAdded',
valueProp: 'added'
},
{
name: 'seasonCount',
showProp: 'showSeasonCount',
valueProp: 'seasonCount'
},
{
name: 'path',
showProp: 'showPath',
valueProp: 'path'
},
{
name: 'sizeOnDisk',
showProp: 'showSizeOnDisk',
valueProp: 'sizeOnDisk'
}
];
function isVisible(row, props) {
const {
name,
showProp,
valueProp
} = row;
if (props[valueProp] == null) {
return false;
}
return props[showProp] || props.sortKey === name;
}
function getInfoRowProps(row, props) {
const { name } = row;
if (name === 'monitored') {
const monitoredText = props.monitored ? 'Monitored' : 'Unmonitored';
return {
title: monitoredText,
iconName: props.monitored ? icons.MONITORED : icons.UNMONITORED,
label: monitoredText
};
}
if (name === 'network') {
return {
title: 'Network',
iconName: icons.NETWORK,
label: props.network
};
}
if (name === 'qualityProfileId') {
return {
title: 'Quality Profile',
iconName: icons.PROFILE,
label: props.qualityProfile.name
};
}
if (name === 'previousAiring') {
const {
previousAiring,
showRelativeDates,
shortDateFormat,
longDateFormat,
timeFormat
} = props;
return {
title: `Previous Airing: ${formatDateTime(previousAiring, longDateFormat, timeFormat)}`,
iconName: icons.CALENDAR,
label: getRelativeDate(
previousAiring,
shortDateFormat,
showRelativeDates,
{
timeFormat,
timeForToday: true
}
)
};
}
if (name === 'added') {
const {
added,
showRelativeDates,
shortDateFormat,
longDateFormat,
timeFormat
} = props;
return {
title: `Added: ${formatDateTime(added, longDateFormat, timeFormat)}`,
iconName: icons.ADD,
label: getRelativeDate(
added,
shortDateFormat,
showRelativeDates,
{
timeFormat,
timeForToday: true
}
)
};
}
if (name === 'seasonCount') {
const { seasonCount } = props;
let seasons = '1 season';
if (seasonCount === 0) {
seasons = 'No seasons';
} else if (seasonCount > 1) {
seasons = `${seasonCount} seasons`;
}
return {
title: 'Season Count',
iconName: icons.CIRCLE,
label: seasons
};
}
if (name === 'path') {
return {
title: 'Path',
iconName: icons.FOLDER,
label: props.path
};
}
if (name === 'sizeOnDisk') {
return {
title: 'Size on Disk',
iconName: icons.DRIVE,
label: formatBytes(props.sizeOnDisk)
};
}
}
function SeriesIndexOverviewInfo(props) {
const {
height,
nextAiring,
showRelativeDates,
shortDateFormat,
longDateFormat,
timeFormat
} = props;
let shownRows = 1;
const maxRows = Math.floor(height / (infoRowHeight + 4));
return (
<div className={styles.infos}>
{
!!nextAiring &&
<SeriesIndexOverviewInfoRow
title={formatDateTime(nextAiring, longDateFormat, timeFormat)}
iconName={icons.SCHEDULED}
label={getRelativeDate(
nextAiring,
shortDateFormat,
showRelativeDates,
{
timeFormat,
timeForToday: true
}
)}
/>
}
{
rows.map((row) => {
if (!isVisible(row, props)) {
return null;
}
if (shownRows >= maxRows) {
return null;
}
shownRows++;
const infoRowProps = getInfoRowProps(row, props);
return (
<SeriesIndexOverviewInfoRow
key={row.name}
{...infoRowProps}
/>
);
})
}
</div>
);
}
SeriesIndexOverviewInfo.propTypes = {
height: PropTypes.number.isRequired,
showNetwork: PropTypes.bool.isRequired,
showMonitored: PropTypes.bool.isRequired,
showQualityProfile: PropTypes.bool.isRequired,
showPreviousAiring: PropTypes.bool.isRequired,
showAdded: PropTypes.bool.isRequired,
showSeasonCount: PropTypes.bool.isRequired,
showPath: PropTypes.bool.isRequired,
showSizeOnDisk: PropTypes.bool.isRequired,
monitored: PropTypes.bool.isRequired,
nextAiring: PropTypes.string,
network: PropTypes.string,
qualityProfile: PropTypes.object.isRequired,
previousAiring: PropTypes.string,
added: PropTypes.string,
seasonCount: PropTypes.number.isRequired,
path: PropTypes.string.isRequired,
sizeOnDisk: PropTypes.number,
sortKey: PropTypes.string.isRequired,
showRelativeDates: PropTypes.bool.isRequired,
shortDateFormat: PropTypes.string.isRequired,
longDateFormat: PropTypes.string.isRequired,
timeFormat: PropTypes.string.isRequired
};
export default SeriesIndexOverviewInfo;

243
frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.tsx
Unescape View File

@ -0,0 +1,243 @@
import React, { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { icons } from 'Helpers/Props';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import dimensions from 'Styles/Variables/dimensions';
import formatDateTime from 'Utilities/Date/formatDateTime';
import getRelativeDate from 'Utilities/Date/getRelativeDate';
import formatBytes from 'Utilities/Number/formatBytes';
import SeriesIndexOverviewInfoRow from './SeriesIndexOverviewInfoRow';
import styles from './SeriesIndexOverviewInfo.css';
const infoRowHeight = parseInt(dimensions.seriesIndexOverviewInfoRowHeight);
const rows = [
{
name: 'monitored',
showProp: 'showMonitored',
valueProp: 'monitored',
},
{
name: 'network',
showProp: 'showNetwork',
valueProp: 'network',
},
{
name: 'qualityProfileId',
showProp: 'showQualityProfile',
valueProp: 'qualityProfileId',
},
{
name: 'previousAiring',
showProp: 'showPreviousAiring',
valueProp: 'previousAiring',
},
{
name: 'added',
showProp: 'showAdded',
valueProp: 'added',
},
{
name: 'seasonCount',
showProp: 'showSeasonCount',
valueProp: 'seasonCount',
},
{
name: 'path',
showProp: 'showPath',
valueProp: 'path',
},
{
name: 'sizeOnDisk',
showProp: 'showSizeOnDisk',
valueProp: 'sizeOnDisk',
},
];
function getInfoRowProps(row, props, uiSettings) {
const { name } = row;
if (name === 'monitored') {
const monitoredText = props.monitored ? 'Monitored' : 'Unmonitored';
return {
title: monitoredText,
iconName: props.monitored ? icons.MONITORED : icons.UNMONITORED,
label: monitoredText,
};
}
if (name === 'network') {
return {
title: 'Network',
iconName: icons.NETWORK,
label: props.network,
};
}
if (name === 'qualityProfileId') {
return {
title: 'Quality Profile',
iconName: icons.PROFILE,
label: props.qualityProfile.name,
};
}
if (name === 'previousAiring') {
const previousAiring = props.previousAiring;
const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
uiSettings;
return {
title: `Previous Airing: ${formatDateTime(
previousAiring,
longDateFormat,
timeFormat
)}`,
iconName: icons.CALENDAR,
label: getRelativeDate(
previousAiring,
shortDateFormat,
showRelativeDates,
{
timeFormat,
timeForToday: true,
}
),
};
}
if (name === 'added') {
const added = props.added;
const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
uiSettings;
return {
title: `Added: ${formatDateTime(added, longDateFormat, timeFormat)}`,
iconName: icons.ADD,
label: getRelativeDate(added, shortDateFormat, showRelativeDates, {
timeFormat,
timeForToday: true,
}),
};
}
if (name === 'seasonCount') {
const { seasonCount } = props;
let seasons = '1 season';
if (seasonCount === 0) {
seasons = 'No seasons';
} else if (seasonCount > 1) {
seasons = `${seasonCount} seasons`;
}
return {
title: 'Season Count',
iconName: icons.CIRCLE,
label: seasons,
};
}
if (name === 'path') {
return {
title: 'Path',
iconName: icons.FOLDER,
label: props.path,
};
}
if (name === 'sizeOnDisk') {
return {
title: 'Size on Disk',
iconName: icons.DRIVE,
label: formatBytes(props.sizeOnDisk),
};
}
}
interface SeriesIndexOverviewInfoProps {
height: number;
showNetwork: boolean;
showMonitored: boolean;
showQualityProfile: boolean;
showPreviousAiring: boolean;
showAdded: boolean;
showSeasonCount: boolean;
showPath: boolean;
showSizeOnDisk: boolean;
monitored: boolean;
nextAiring?: string;
network?: string;
qualityProfile: object;
previousAiring?: string;
added?: string;
seasonCount: number;
path: string;
sizeOnDisk?: number;
sortKey: string;
}
function SeriesIndexOverviewInfo(props: SeriesIndexOverviewInfoProps) {
const { height, nextAiring } = props;
const uiSettings = useSelector(createUISettingsSelector());
const { shortDateFormat, showRelativeDates, longDateFormat, timeFormat } =
uiSettings;
let shownRows = 1;
const maxRows = Math.floor(height / (infoRowHeight + 4));
const rowInfo = useMemo(() => {
return rows.map((row) => {
const { name, showProp, valueProp } = row;
const isVisible =
props[valueProp] != null && (props[showProp] || props.sortKey === name);
return {
...row,
isVisible,
};
});
}, [props]);
return (
<div className={styles.infos}>
{!!nextAiring && (
<SeriesIndexOverviewInfoRow
title={formatDateTime(nextAiring, longDateFormat, timeFormat)}
iconName={icons.SCHEDULED}
label={getRelativeDate(
nextAiring,
shortDateFormat,
showRelativeDates,
{
timeFormat,
timeForToday: true,
}
)}
/>
)}
{rowInfo.map((row) => {
if (!row.isVisible) {
return null;
}
if (shownRows >= maxRows) {
return null;
}
shownRows++;
const infoRowProps = getInfoRowProps(row, props, uiSettings);
return <SeriesIndexOverviewInfoRow key={row.name} {...infoRowProps} />;
})}
</div>
);
}
export default SeriesIndexOverviewInfo;

35
frontend/src/Series/Index/Overview/SeriesIndexOverviewInfoRow.js
Unescape View File

@ -1,35 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import Icon from 'Components/Icon';
import styles from './SeriesIndexOverviewInfoRow.css';
function SeriesIndexOverviewInfoRow(props) {
const {
title,
iconName,
label
} = props;
return (
<div
className={styles.infoRow}
title={title}
>
<Icon
className={styles.icon}
name={iconName}
size={14}
/>
{label}
</div>
);
}
SeriesIndexOverviewInfoRow.propTypes = {
title: PropTypes.string,
iconName: PropTypes.object.isRequired,
label: PropTypes.string.isRequired
};
export default SeriesIndexOverviewInfoRow;

23
frontend/src/Series/Index/Overview/SeriesIndexOverviewInfoRow.tsx
Unescape View File

@ -0,0 +1,23 @@
import React from 'react';
import Icon from 'Components/Icon';
import styles from './SeriesIndexOverviewInfoRow.css';
interface SeriesIndexOverviewInfoRowProps {
title?: string;
iconName: object;
label: string;
}
function SeriesIndexOverviewInfoRow(props: SeriesIndexOverviewInfoRowProps) {
const { title, iconName, label } = props;
return (
<div className={styles.infoRow} title={title}>
<Icon className={styles.icon} name={iconName} size={14} />
{label}
</div>
);
}
export default SeriesIndexOverviewInfoRow;

275
frontend/src/Series/Index/Overview/SeriesIndexOverviews.js
Unescape View File

@ -1,275 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Grid, WindowScroller } from 'react-virtualized';
import Measure from 'Components/Measure';
import SeriesIndexItemConnector from 'Series/Index/SeriesIndexItemConnector';
import dimensions from 'Styles/Variables/dimensions';
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
import SeriesIndexOverview from './SeriesIndexOverview';
import styles from './SeriesIndexOverviews.css';
// Poster container dimensions
const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
const columnPaddingSmallScreen = parseInt(dimensions.seriesIndexColumnPaddingSmallScreen);
const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
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 {
detailedProgressBar
} = overviewOptions;
const heights = [
posterHeight,
detailedProgressBar ? detailedProgressBarHeight : progressBarHeight,
isSmallScreen ? columnPaddingSmallScreen : columnPadding
];
return heights.reduce((acc, height) => acc + height, 0);
}
function calculatePosterHeight(posterWidth) {
return Math.ceil((250 / 170) * posterWidth);
}
class SeriesIndexOverviews 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, {}),
scrollRestored: false
};
this._grid = null;
}
componentDidUpdate(prevProps, prevState) {
const {
items,
sortKey,
overviewOptions,
jumpToCharacter,
scrollTop,
isSmallScreen
} = this.props;
const {
width,
rowHeight,
scrollRestored
} = this.state;
if (prevProps.sortKey !== sortKey ||
prevProps.overviewOptions !== overviewOptions) {
this.calculateGrid(this.state.width, isSmallScreen);
}
if (
this._grid &&
(prevState.width !== width ||
prevState.rowHeight !== rowHeight ||
hasDifferentItemsOrOrder(prevProps.items, items) ||
prevProps.overviewOptions !== overviewOptions
)
) {
// recomputeGridSize also forces Grid to discard its cache of rendered cells
this._grid.recomputeGridSize();
}
if (this._grid && scrollTop !== 0 && !scrollRestored) {
this.setState({ scrollRestored: true });
this._grid.scrollToPosition({ scrollTop });
}
if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
const index = getIndexOfFirstCharacter(items, jumpToCharacter);
if (this._grid && index != null) {
this._grid.scrollToCell({
rowIndex: index,
columnIndex: 0
});
}
}
}
//
// Control
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 series = items[rowIndex];
if (!series) {
return null;
}
return (
<div
className={styles.container}
key={key}
style={style}
>
<SeriesIndexItemConnector
key={series.id}
component={SeriesIndexOverview}
sortKey={sortKey}
posterWidth={posterWidth}
posterHeight={posterHeight}
rowHeight={rowHeight}
overviewOptions={overviewOptions}
showRelativeDates={showRelativeDates}
shortDateFormat={shortDateFormat}
longDateFormat={longDateFormat}
timeFormat={timeFormat}
isSmallScreen={isSmallScreen}
style={style}
seriesId={series.id}
qualityProfileId={series.qualityProfileId}
/>
</div>
);
};
//
// Listeners
onMeasure = ({ width }) => {
this.calculateGrid(width, this.props.isSmallScreen);
};
//
// Render
render() {
const {
scroller,
items,
isSmallScreen
} = this.props;
const {
width,
rowHeight
} = this.state;
return (
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
<WindowScroller
scrollElement={isSmallScreen ? undefined : scroller}
>
{({ height, registerChild, onChildScroll, scrollTop }) => {
if (!height) {
return <div />;
}
return (
<div ref={registerChild}>
<Grid
ref={this.setGridRef}
className={styles.grid}
autoHeight={true}
height={height}
columnCount={1}
columnWidth={width}
rowCount={items.length}
rowHeight={rowHeight}
width={width}
onScroll={onChildScroll}
scrollTop={scrollTop}
overscanRowCount={2}
cellRenderer={this.cellRenderer}
scrollToAlignment={'start'}
isScrollingOptOut={true}
/>
</div>
);
}
}
</WindowScroller>
</Measure>
);
}
}
SeriesIndexOverviews.propTypes = {
items: PropTypes.arrayOf(PropTypes.object).isRequired,
sortKey: PropTypes.string,
overviewOptions: PropTypes.object.isRequired,
scrollTop: PropTypes.number.isRequired,
jumpToCharacter: PropTypes.string,
scroller: PropTypes.instanceOf(Element).isRequired,
showRelativeDates: PropTypes.bool.isRequired,
shortDateFormat: PropTypes.string.isRequired,
longDateFormat: PropTypes.string.isRequired,
isSmallScreen: PropTypes.bool.isRequired,
timeFormat: PropTypes.string.isRequired
};
export default SeriesIndexOverviews;

203
frontend/src/Series/Index/Overview/SeriesIndexOverviews.tsx
Unescape View File

@ -0,0 +1,203 @@
import { throttle } from 'lodash';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
import useMeasure from 'Helpers/Hooks/useMeasure';
import Series from 'Series/Series';
import dimensions from 'Styles/Variables/dimensions';
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
import selectOverviewOptions from './selectOverviewOptions';
import SeriesIndexOverview from './SeriesIndexOverview';
// Poster container dimensions
const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
const columnPaddingSmallScreen = parseInt(
dimensions.seriesIndexColumnPaddingSmallScreen
);
const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
const bodyPadding = parseInt(dimensions.pageContentBodyPadding);
const bodyPaddingSmallScreen = parseInt(
dimensions.pageContentBodyPaddingSmallScreen
);
interface RowItemData {
items: Series[];
sortKey: string;
posterWidth: number;
posterHeight: number;
rowHeight: number;
isSmallScreen: boolean;
}
interface SeriesIndexOverviewsProps {
items: Series[];
sortKey?: string;
sortDirection?: string;
jumpToCharacter?: string;
scrollTop?: number;
scrollerRef: React.MutableRefObject<HTMLElement>;
isSmallScreen: boolean;
}
const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
index,
style,
data,
}) => {
const { items, ...otherData } = data;
if (index >= items.length) {
return null;
}
const series = items[index];
return (
<div style={style}>
<SeriesIndexOverview seriesId={series.id} {...otherData} />
</div>
);
};
function getWindowScrollTopPosition() {
return document.documentElement.scrollTop || document.body.scrollTop || 0;
}
function SeriesIndexOverviews(props: SeriesIndexOverviewsProps) {
const { items, sortKey, jumpToCharacter, isSmallScreen, scrollerRef } = props;
const { size: posterSize, detailedProgressBar } = useSelector(
selectOverviewOptions
);
const listRef: React.MutableRefObject<List> = useRef();
const [measureRef, bounds] = useMeasure();
const [size, setSize] = useState({ width: 0, height: 0 });
const posterWidth = useMemo(() => {
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);
}, [posterSize, isSmallScreen]);
const posterHeight = useMemo(() => {
return Math.ceil((250 / 170) * posterWidth);
}, [posterWidth]);
const rowHeight = useMemo(() => {
const heights = [
posterHeight,
detailedProgressBar ? detailedProgressBarHeight : progressBarHeight,
isSmallScreen ? columnPaddingSmallScreen : columnPadding,
];
return heights.reduce((acc, height) => acc + height, 0);
}, [detailedProgressBar, posterHeight, isSmallScreen]);
useEffect(() => {
const current = scrollerRef.current as HTMLElement;
if (isSmallScreen) {
setSize({
width: window.innerWidth,
height: window.innerHeight,
});
return;
}
if (current) {
const width = current.clientWidth;
const padding =
(isSmallScreen ? bodyPaddingSmallScreen : bodyPadding) - 5;
setSize({
width: width - padding * 2,
height: window.innerHeight,
});
}
}, [isSmallScreen, scrollerRef, bounds]);
useEffect(() => {
const currentScrollListener = isSmallScreen ? window : scrollerRef.current;
const currentScrollerRef = scrollerRef.current;
const handleScroll = throttle(() => {
const { offsetTop = 0 } = currentScrollerRef;
const scrollTop =
(isSmallScreen
? getWindowScrollTopPosition()
: currentScrollerRef.scrollTop) - offsetTop;
listRef.current.scrollTo(scrollTop);
}, 10);
currentScrollListener.addEventListener('scroll', handleScroll);
return () => {
handleScroll.cancel();
if (currentScrollListener) {
currentScrollListener.removeEventListener('scroll', handleScroll);
}
};
}, [isSmallScreen, listRef, scrollerRef]);
useEffect(() => {
if (jumpToCharacter) {
const index = getIndexOfFirstCharacter(items, jumpToCharacter);
if (index != null) {
let scrollTop = index * rowHeight;
// If the offset is zero go to the top, otherwise offset
// by the approximate size of the header + padding (37 + 20).
if (scrollTop > 0) {
const offset = 57;
scrollTop += offset;
}
listRef.current.scrollTo(scrollTop);
scrollerRef.current.scrollTo(0, scrollTop);
}
}
}, [jumpToCharacter, rowHeight, items, scrollerRef, listRef]);
return (
<div ref={measureRef}>
<List<RowItemData>
ref={listRef}
style={{
width: '100%',
height: '100%',
overflow: 'none',
}}
width={size.width}
height={size.height}
itemCount={items.length}
itemSize={rowHeight}
itemData={{
items,
sortKey,
posterWidth,
posterHeight,
rowHeight,
isSmallScreen,
}}
>
{Row}
</List>
</div>
);
}
export default SeriesIndexOverviews;

25
frontend/src/Series/Index/Overview/SeriesIndexOverviewsConnector.js
Unescape View File

@ -1,25 +0,0 @@
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import SeriesIndexOverviews from './SeriesIndexOverviews';
function createMapStateToProps() {
return createSelector(
(state) => state.seriesIndex.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)(SeriesIndexOverviews);

8
frontend/src/Series/Index/Overview/selectOverviewOptions.ts
Unescape View File

@ -0,0 +1,8 @@
import { createSelector } from 'reselect';
const selectOverviewOptions = createSelector(
(state) => state.seriesIndex.overviewOptions,
(overviewOptions) => overviewOptions
);
export default selectOverviewOptions;

25
frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModal.js
Unescape View File

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

21
frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModal.tsx
Unescape View File

@ -0,0 +1,21 @@
import React from 'react';
import Modal from 'Components/Modal/Modal';
import SeriesIndexPosterOptionsModalContent from './SeriesIndexPosterOptionsModalContent';
interface SeriesIndexPosterOptionsModalProps {
isOpen: boolean;
onModalClose(...args: unknown[]): unknown;
}
function SeriesIndexPosterOptionsModal({
isOpen,
onModalClose,
}: SeriesIndexPosterOptionsModalProps) {
return (
<Modal isOpen={isOpen} onModalClose={onModalClose}>
<SeriesIndexPosterOptionsModalContent onModalClose={onModalClose} />
</Modal>
);
}
export default SeriesIndexPosterOptionsModal;

213
frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModalContent.js
Unescape View File

@ -1,213 +0,0 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import Button from 'Components/Link/Button';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { inputTypes } from 'Helpers/Props';
const posterSizeOptions = [
{ key: 'small', value: 'Small' },
{ key: 'medium', value: 'Medium' },
{ key: 'large', value: 'Large' }
];
class SeriesIndexPosterOptionsModalContent extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
detailedProgressBar: props.detailedProgressBar,
size: props.size,
showTitle: props.showTitle,
showMonitored: props.showMonitored,
showQualityProfile: props.showQualityProfile,
showSearchAction: props.showSearchAction
};
}
componentDidUpdate(prevProps) {
const {
detailedProgressBar,
size,
showTitle,
showMonitored,
showQualityProfile,
showSearchAction
} = this.props;
const state = {};
if (detailedProgressBar !== prevProps.detailedProgressBar) {
state.detailedProgressBar = detailedProgressBar;
}
if (size !== prevProps.size) {
state.size = size;
}
if (showTitle !== prevProps.showTitle) {
state.showTitle = showTitle;
}
if (showMonitored !== prevProps.showMonitored) {
state.showMonitored = showMonitored;
}
if (showQualityProfile !== prevProps.showQualityProfile) {
state.showQualityProfile = showQualityProfile;
}
if (showSearchAction !== prevProps.showSearchAction) {
state.showSearchAction = showSearchAction;
}
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 {
detailedProgressBar,
size,
showTitle,
showMonitored,
showQualityProfile,
showSearchAction
} = 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>Detailed Progress Bar</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="detailedProgressBar"
value={detailedProgressBar}
helpText="Show text on progress bar"
onChange={this.onChangePosterOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Title</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showTitle"
value={showTitle}
helpText="Show series title under poster"
onChange={this.onChangePosterOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Monitored</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showMonitored"
value={showMonitored}
helpText="Show monitored status under poster"
onChange={this.onChangePosterOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Quality Profile</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showQualityProfile"
value={showQualityProfile}
helpText="Show quality profile under poster"
onChange={this.onChangePosterOption}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Search</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showSearchAction"
value={showSearchAction}
helpText="Show search button on hover"
onChange={this.onChangePosterOption}
/>
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button
onPress={onModalClose}
>
Close
</Button>
</ModalFooter>
</ModalContent>
);
}
}
SeriesIndexPosterOptionsModalContent.propTypes = {
size: PropTypes.string.isRequired,
showTitle: PropTypes.bool.isRequired,
showMonitored: PropTypes.bool.isRequired,
showQualityProfile: PropTypes.bool.isRequired,
detailedProgressBar: PropTypes.bool.isRequired,
showSearchAction: PropTypes.bool.isRequired,
onChangePosterOption: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};
export default SeriesIndexPosterOptionsModalContent;

138
frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModalContent.tsx
Unescape View File

@ -0,0 +1,138 @@
import React, { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import Button from 'Components/Link/Button';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { inputTypes } from 'Helpers/Props';
import selectPosterOptions from 'Series/Index/Posters/selectPosterOptions';
import { setSeriesPosterOption } from 'Store/Actions/seriesIndexActions';
const posterSizeOptions = [
{ key: 'small', value: 'Small' },
{ key: 'medium', value: 'Medium' },
{ key: 'large', value: 'Large' },
];
interface SeriesIndexPosterOptionsModalContentProps {
onModalClose(...args: unknown[]): unknown;
}
function SeriesIndexPosterOptionsModalContent(
props: SeriesIndexPosterOptionsModalContentProps
) {
const { onModalClose } = props;
const posterOptions = useSelector(selectPosterOptions);
const {
detailedProgressBar,
size,
showTitle,
showMonitored,
showQualityProfile,
showSearchAction,
} = posterOptions;
const dispatch = useDispatch();
const onPosterOptionChange = useCallback(
({ name, value }) => {
dispatch(setSeriesPosterOption({ [name]: value }));
},
[dispatch]
);
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={onPosterOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Detailed Progress Bar</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="detailedProgressBar"
value={detailedProgressBar}
helpText="Show text on progress bar"
onChange={onPosterOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Title</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showTitle"
value={showTitle}
helpText="Show series title under poster"
onChange={onPosterOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Monitored</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showMonitored"
value={showMonitored}
helpText="Show monitored status under poster"
onChange={onPosterOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Quality Profile</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showQualityProfile"
value={showQualityProfile}
helpText="Show quality profile under poster"
onChange={onPosterOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Search</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showSearchAction"
value={showSearchAction}
helpText="Show search button on hover"
onChange={onPosterOptionChange}
/>
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button onPress={onModalClose}>Close</Button>
</ModalFooter>
</ModalContent>
);
}
export default SeriesIndexPosterOptionsModalContent;

23
frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModalContentConnector.js
Unescape View File

@ -1,23 +0,0 @@
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { setSeriesPosterOption } from 'Store/Actions/seriesIndexActions';
import SeriesIndexPosterOptionsModalContent from './SeriesIndexPosterOptionsModalContent';
function createMapStateToProps() {
return createSelector(
(state) => state.seriesIndex,
(seriesIndex) => {
return seriesIndex.posterOptions;
}
);
}
function createMapDispatchToProps(dispatch, props) {
return {
onChangePosterOption(payload) {
dispatch(setSeriesPosterOption(payload));
}
};
}
export default connect(createMapStateToProps, createMapDispatchToProps)(SeriesIndexPosterOptionsModalContent);

291
frontend/src/Series/Index/Posters/SeriesIndexPoster.js
Unescape View File

@ -1,291 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Label from 'Components/Label';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import { icons } from 'Helpers/Props';
import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
import SeriesIndexProgressBar from 'Series/Index/ProgressBar/SeriesIndexProgressBar';
import SeriesPoster from 'Series/SeriesPoster';
import getRelativeDate from 'Utilities/Date/getRelativeDate';
import SeriesIndexPosterInfo from './SeriesIndexPosterInfo';
import styles from './SeriesIndexPoster.css';
class SeriesIndexPoster extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
hasPosterError: false,
isEditSeriesModalOpen: false,
isDeleteSeriesModalOpen: false
};
}
//
// Listeners
onEditSeriesPress = () => {
this.setState({ isEditSeriesModalOpen: true });
};
onEditSeriesModalClose = () => {
this.setState({ isEditSeriesModalOpen: false });
};
onDeleteSeriesPress = () => {
this.setState({
isEditSeriesModalOpen: false,
isDeleteSeriesModalOpen: true
});
};
onDeleteSeriesModalClose = () => {
this.setState({ isDeleteSeriesModalOpen: false });
};
onPosterLoad = () => {
if (this.state.hasPosterError) {
this.setState({ hasPosterError: false });
}
};
onPosterLoadError = () => {
if (!this.state.hasPosterError) {
this.setState({ hasPosterError: true });
}
};
//
// Render
render() {
const {
id,
title,
monitored,
status,
titleSlug,
nextAiring,
statistics,
images,
posterWidth,
posterHeight,
detailedProgressBar,
showTitle,
showMonitored,
showQualityProfile,
qualityProfile,
showSearchAction,
showRelativeDates,
shortDateFormat,
timeFormat,
isRefreshingSeries,
isSearchingSeries,
onRefreshSeriesPress,
onSearchPress,
...otherProps
} = this.props;
const {
seasonCount,
episodeCount,
episodeFileCount,
totalEpisodeCount,
sizeOnDisk
} = statistics;
const {
hasPosterError,
isEditSeriesModalOpen,
isDeleteSeriesModalOpen
} = this.state;
const link = `/series/${titleSlug}`;
const elementStyle = {
width: `${posterWidth}px`,
height: `${posterHeight}px`
};
return (
<div className={styles.content}>
<div className={styles.posterContainer}>
<Label className={styles.controls}>
<SpinnerIconButton
className={styles.action}
name={icons.REFRESH}
title="Refresh series"
isSpinning={isRefreshingSeries}
onPress={onRefreshSeriesPress}
/>
{
showSearchAction &&
<SpinnerIconButton
className={styles.action}
name={icons.SEARCH}
title="Search for monitored episodes"
isSpinning={isSearchingSeries}
onPress={onSearchPress}
/>
}
<IconButton
className={styles.action}
name={icons.EDIT}
title="Edit Series"
onPress={this.onEditSeriesPress}
/>
</Label>
{
status === 'ended' &&
<div
className={styles.ended}
title="Ended"
/>
}
<Link
className={styles.link}
style={elementStyle}
to={link}
>
<SeriesPoster
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>
<SeriesIndexProgressBar
monitored={monitored}
status={status}
episodeCount={episodeCount}
episodeFileCount={episodeFileCount}
totalEpisodeCount={totalEpisodeCount}
posterWidth={posterWidth}
detailedProgressBar={detailedProgressBar}
/>
{
showTitle &&
<div className={styles.title}>
{title}
</div>
}
{
showMonitored &&
<div className={styles.title}>
{monitored ? 'Monitored' : 'Unmonitored'}
</div>
}
{
showQualityProfile &&
<div className={styles.title}>
{qualityProfile.name}
</div>
}
{
nextAiring &&
<div className={styles.nextAiring}>
{
getRelativeDate(
nextAiring,
shortDateFormat,
showRelativeDates,
{
timeFormat,
timeForToday: true
}
)
}
</div>
}
<SeriesIndexPosterInfo
seasonCount={seasonCount}
sizeOnDisk={sizeOnDisk}
qualityProfile={qualityProfile}
showQualityProfile={showQualityProfile}
showRelativeDates={showRelativeDates}
shortDateFormat={shortDateFormat}
timeFormat={timeFormat}
{...otherProps}
/>
<EditSeriesModalConnector
isOpen={isEditSeriesModalOpen}
seriesId={id}
onModalClose={this.onEditSeriesModalClose}
onDeleteSeriesPress={this.onDeleteSeriesPress}
/>
<DeleteSeriesModal
isOpen={isDeleteSeriesModalOpen}
seriesId={id}
onModalClose={this.onDeleteSeriesModalClose}
/>
</div>
);
}
}
SeriesIndexPoster.propTypes = {
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
monitored: PropTypes.bool.isRequired,
status: PropTypes.string.isRequired,
titleSlug: PropTypes.string.isRequired,
nextAiring: PropTypes.string,
statistics: PropTypes.object.isRequired,
images: PropTypes.arrayOf(PropTypes.object).isRequired,
posterWidth: PropTypes.number.isRequired,
posterHeight: PropTypes.number.isRequired,
detailedProgressBar: PropTypes.bool.isRequired,
showTitle: PropTypes.bool.isRequired,
showMonitored: PropTypes.bool.isRequired,
showQualityProfile: PropTypes.bool.isRequired,
qualityProfile: PropTypes.object.isRequired,
showSearchAction: PropTypes.bool.isRequired,
showRelativeDates: PropTypes.bool.isRequired,
shortDateFormat: PropTypes.string.isRequired,
timeFormat: PropTypes.string.isRequired,
isRefreshingSeries: PropTypes.bool.isRequired,
isSearchingSeries: PropTypes.bool.isRequired,
onRefreshSeriesPress: PropTypes.func.isRequired,
onSearchPress: PropTypes.func.isRequired
};
SeriesIndexPoster.defaultProps = {
statistics: {
seasonCount: 0,
episodeCount: 0,
episodeFileCount: 0,
totalEpisodeCount: 0
}
};
export default SeriesIndexPoster;

230
frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx
Unescape View File

@ -0,0 +1,230 @@
import React, { useCallback, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
import Label from 'Components/Label';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import { icons } from 'Helpers/Props';
import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
import SeriesIndexProgressBar from 'Series/Index/ProgressBar/SeriesIndexProgressBar';
import SeriesPoster from 'Series/SeriesPoster';
import { executeCommand } from 'Store/Actions/commandActions';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import getRelativeDate from 'Utilities/Date/getRelativeDate';
import createSeriesIndexItemSelector from '../createSeriesIndexItemSelector';
import selectPosterOptions from './selectPosterOptions';
import SeriesIndexPosterInfo from './SeriesIndexPosterInfo';
import styles from './SeriesIndexPoster.css';
interface SeriesIndexPosterProps {
seriesId: number;
sortKey: string;
posterWidth: number;
posterHeight: number;
}
function SeriesIndexPoster(props: SeriesIndexPosterProps) {
const { seriesId, sortKey, posterWidth, posterHeight } = props;
const { series, qualityProfile, isRefreshingSeries, isSearchingSeries } =
useSelector(createSeriesIndexItemSelector(props.seriesId));
const {
detailedProgressBar,
showTitle,
showMonitored,
showQualityProfile,
showSearchAction,
} = useSelector(selectPosterOptions);
const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
createUISettingsSelector()
);
const {
title,
monitored,
status,
path,
titleSlug,
nextAiring,
statistics,
images,
} = series;
const {
seasonCount,
episodeCount,
episodeFileCount,
totalEpisodeCount,
sizeOnDisk,
} = statistics;
const dispatch = useDispatch();
const [hasPosterError, setHasPosterError] = useState(false);
const [isEditSeriesModalOpen, setIsEditSeriesModalOpen] = useState(false);
const [isDeleteSeriesModalOpen, setIsDeleteSeriesModalOpen] = useState(false);
const onRefreshPress = useCallback(() => {
dispatch(
executeCommand({
name: REFRESH_SERIES,
seriesId,
})
);
}, [seriesId, dispatch]);
const onSearchPress = useCallback(() => {
dispatch(
executeCommand({
name: SERIES_SEARCH,
seriesId,
})
);
}, [seriesId, dispatch]);
const onPosterLoadError = useCallback(() => {
setHasPosterError(true);
}, [setHasPosterError]);
const onPosterLoad = useCallback(() => {
setHasPosterError(false);
}, [setHasPosterError]);
const onEditSeriesPress = useCallback(() => {
setIsEditSeriesModalOpen(true);
}, [setIsEditSeriesModalOpen]);
const onEditSeriesModalClose = useCallback(() => {
setIsEditSeriesModalOpen(false);
}, [setIsEditSeriesModalOpen]);
const onDeleteSeriesPress = useCallback(() => {
setIsEditSeriesModalOpen(false);
setIsDeleteSeriesModalOpen(true);
}, [setIsDeleteSeriesModalOpen]);
const onDeleteSeriesModalClose = useCallback(() => {
setIsDeleteSeriesModalOpen(false);
}, [setIsDeleteSeriesModalOpen]);
const link = `/series/${titleSlug}`;
const elementStyle = {
width: `${posterWidth}px`,
height: `${posterHeight}px`,
};
return (
<div className={styles.content}>
<div className={styles.posterContainer}>
<Label className={styles.controls}>
<SpinnerIconButton
className={styles.action}
name={icons.REFRESH}
title="Refresh series"
isSpinning={isRefreshingSeries}
onPress={onRefreshPress}
/>
{showSearchAction ? (
<SpinnerIconButton
className={styles.action}
name={icons.SEARCH}
title="Search for monitored episodes"
isSpinning={isSearchingSeries}
onPress={onSearchPress}
/>
) : null}
<IconButton
className={styles.action}
name={icons.EDIT}
title="Edit Series"
onPress={onEditSeriesPress}
/>
</Label>
{status === 'ended' ? (
<div className={styles.ended} title="Ended" />
) : null}
<Link className={styles.link} style={elementStyle} to={link}>
<SeriesPoster
style={elementStyle}
images={images}
size={250}
lazy={false}
overflow={true}
onError={onPosterLoadError}
onLoad={onPosterLoad}
/>
{hasPosterError ? (
<div className={styles.overlayTitle}>{title}</div>
) : null}
</Link>
</div>
<SeriesIndexProgressBar
monitored={monitored}
status={status}
episodeCount={episodeCount}
episodeFileCount={episodeFileCount}
totalEpisodeCount={totalEpisodeCount}
posterWidth={posterWidth}
detailedProgressBar={detailedProgressBar}
/>
{showTitle ? <div className={styles.title}>{title}</div> : null}
{showMonitored ? (
<div className={styles.title}>
{monitored ? 'Monitored' : 'Unmonitored'}
</div>
) : null}
{showQualityProfile ? (
<div className={styles.title}>{qualityProfile.name}</div>
) : null}
{nextAiring ? (
<div className={styles.nextAiring}>
{getRelativeDate(nextAiring, shortDateFormat, showRelativeDates, {
timeFormat,
timeForToday: true,
})}
</div>
) : null}
<SeriesIndexPosterInfo
seasonCount={seasonCount}
sizeOnDisk={sizeOnDisk}
path={path}
qualityProfile={qualityProfile}
showQualityProfile={showQualityProfile}
showRelativeDates={showRelativeDates}
sortKey={sortKey}
shortDateFormat={shortDateFormat}
timeFormat={timeFormat}
/>
<EditSeriesModalConnector
isOpen={isEditSeriesModalOpen}
seriesId={seriesId}
onModalClose={onEditSeriesModalClose}
onDeleteSeriesPress={onDeleteSeriesPress}
/>
<DeleteSeriesModal
isOpen={isDeleteSeriesModalOpen}
seriesId={seriesId}
onModalClose={onDeleteSeriesModalClose}
/>
</div>
);
}
export default SeriesIndexPoster;

125
frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.js
Unescape View File

@ -1,125 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import getRelativeDate from 'Utilities/Date/getRelativeDate';
import formatBytes from 'Utilities/Number/formatBytes';
import styles from './SeriesIndexPosterInfo.css';
function SeriesIndexPosterInfo(props) {
const {
network,
qualityProfile,
showQualityProfile,
previousAiring,
added,
seasonCount,
path,
sizeOnDisk,
sortKey,
showRelativeDates,
shortDateFormat,
timeFormat
} = props;
if (sortKey === 'network' && network) {
return (
<div className={styles.info}>
{network}
</div>
);
}
if (sortKey === 'qualityProfileId' && !showQualityProfile) {
return (
<div className={styles.info}>
{qualityProfile.name}
</div>
);
}
if (sortKey === 'previousAiring' && previousAiring) {
return (
<div className={styles.info}>
{
getRelativeDate(
previousAiring,
shortDateFormat,
showRelativeDates,
{
timeFormat,
timeForToday: true
}
)
}
</div>
);
}
if (sortKey === 'added' && added) {
const addedDate = getRelativeDate(
added,
shortDateFormat,
showRelativeDates,
{
timeFormat,
timeForToday: false
}
);
return (
<div className={styles.info}>
{`Added ${addedDate}`}
</div>
);
}
if (sortKey === 'seasonCount') {
let seasons = '1 season';
if (seasonCount === 0) {
seasons = 'No seasons';
} else if (seasonCount > 1) {
seasons = `${seasonCount} seasons`;
}
return (
<div className={styles.info}>
{seasons}
</div>
);
}
if (sortKey === 'path') {
return (
<div className={styles.info}>
{path}
</div>
);
}
if (sortKey === 'sizeOnDisk') {
return (
<div className={styles.info}>
{formatBytes(sizeOnDisk)}
</div>
);
}
return null;
}
SeriesIndexPosterInfo.propTypes = {
network: PropTypes.string,
showQualityProfile: PropTypes.bool.isRequired,
qualityProfile: PropTypes.object.isRequired,
previousAiring: PropTypes.string,
added: PropTypes.string,
seasonCount: PropTypes.number.isRequired,
path: PropTypes.string.isRequired,
sizeOnDisk: PropTypes.number,
sortKey: PropTypes.string.isRequired,
showRelativeDates: PropTypes.bool.isRequired,
shortDateFormat: PropTypes.string.isRequired,
timeFormat: PropTypes.string.isRequired
};
export default SeriesIndexPosterInfo;

94
frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
Unescape View File

@ -0,0 +1,94 @@
import React from 'react';
import getRelativeDate from 'Utilities/Date/getRelativeDate';
import formatBytes from 'Utilities/Number/formatBytes';
import styles from './SeriesIndexPosterInfo.css';
interface SeriesIndexPosterInfoProps {
network?: string;
showQualityProfile: boolean;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
qualityProfile: any;
previousAiring?: string;
added?: string;
seasonCount: number;
path: string;
sizeOnDisk?: number;
sortKey: string;
showRelativeDates: boolean;
shortDateFormat: string;
timeFormat: string;
}
function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
const {
network,
qualityProfile,
showQualityProfile,
previousAiring,
added,
seasonCount,
path,
sizeOnDisk,
sortKey,
showRelativeDates,
shortDateFormat,
timeFormat,
} = props;
if (sortKey === 'network' && network) {
return <div className={styles.info}>{network}</div>;
}
if (sortKey === 'qualityProfileId' && !showQualityProfile) {
return <div className={styles.info}>{qualityProfile.name}</div>;
}
if (sortKey === 'previousAiring' && previousAiring) {
return (
<div className={styles.info}>
{getRelativeDate(previousAiring, shortDateFormat, showRelativeDates, {
timeFormat,
timeForToday: true,
})}
</div>
);
}
if (sortKey === 'added' && added) {
const addedDate = getRelativeDate(
added,
shortDateFormat,
showRelativeDates,
{
timeFormat,
timeForToday: false,
}
);
return <div className={styles.info}>{`Added ${addedDate}`}</div>;
}
if (sortKey === 'seasonCount') {
let seasons = '1 season';
if (seasonCount === 0) {
seasons = 'No seasons';
} else if (seasonCount > 1) {
seasons = `${seasonCount} seasons`;
}
return <div className={styles.info}>{seasons}</div>;
}
if (sortKey === 'path') {
return <div className={styles.info}>{path}</div>;
}
if (sortKey === 'sizeOnDisk') {
return <div className={styles.info}>{formatBytes(sizeOnDisk)}</div>;
}
return null;
}
export default SeriesIndexPosterInfo;

3
frontend/src/Series/Index/Posters/SeriesIndexPosters.css
Unescape View File

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

333
frontend/src/Series/Index/Posters/SeriesIndexPosters.js
Unescape View File

@ -1,333 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Grid, WindowScroller } from 'react-virtualized';
import Measure from 'Components/Measure';
import SeriesIndexItemConnector from 'Series/Index/SeriesIndexItemConnector';
import dimensions from 'Styles/Variables/dimensions';
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
import SeriesIndexPoster from './SeriesIndexPoster';
import styles from './SeriesIndexPosters.css';
// Poster container dimensions
const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
const columnPaddingSmallScreen = parseInt(dimensions.seriesIndexColumnPaddingSmallScreen);
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 'network':
case 'seasons':
case 'previousAiring':
case 'added':
case 'path':
case 'sizeOnDisk':
heights.push(19);
break;
case 'qualityProfileId':
if (!showQualityProfile) {
heights.push(19);
}
break;
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 SeriesIndexPosters 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, {}),
scrollRestored: false
};
this._isInitialized = false;
this._grid = null;
this._padding = props.isSmallScreen ? columnPaddingSmallScreen : columnPadding;
}
componentDidUpdate(prevProps, prevState) {
const {
items,
sortKey,
posterOptions,
jumpToCharacter,
scrollTop,
isSmallScreen
} = this.props;
const {
width,
columnWidth,
columnCount,
rowHeight,
scrollRestored
} = this.state;
if (prevProps.sortKey !== sortKey ||
prevProps.posterOptions !== posterOptions) {
this.calculateGrid(width, isSmallScreen);
}
if (this._grid &&
(prevState.width !== width ||
prevState.columnWidth !== columnWidth ||
prevState.columnCount !== columnCount ||
prevState.rowHeight !== rowHeight ||
hasDifferentItemsOrOrder(prevProps.items, items))) {
// recomputeGridSize also forces Grid to discard its cache of rendered cells
this._grid.recomputeGridSize();
}
if (this._grid && scrollTop !== 0 && !scrollRestored) {
this.setState({ scrollRestored: true });
this._grid.scrollToPosition({ scrollTop });
}
if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
const index = getIndexOfFirstCharacter(items, jumpToCharacter);
if (this._grid && index != null) {
const row = Math.floor(index / columnCount);
this._grid.scrollToCell({
rowIndex: row,
columnIndex: 0
});
}
}
}
//
// Control
setGridRef = (ref) => {
this._grid = ref;
};
calculateGrid = (width = this.state.width, isSmallScreen) => {
const {
sortKey,
posterOptions
} = this.props;
const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen);
const columnCount = Math.max(Math.floor(width / columnWidth), 1);
const posterWidth = columnWidth - this._padding * 2;
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 {
detailedProgressBar,
showTitle,
showMonitored,
showQualityProfile
} = posterOptions;
const series = items[rowIndex * columnCount + columnIndex];
if (!series) {
return null;
}
return (
<div
key={key}
style={{
...style,
padding: this._padding
}}
>
<SeriesIndexItemConnector
key={series.id}
component={SeriesIndexPoster}
sortKey={sortKey}
posterWidth={posterWidth}
posterHeight={posterHeight}
detailedProgressBar={detailedProgressBar}
showTitle={showTitle}
showMonitored={showMonitored}
showQualityProfile={showQualityProfile}
showRelativeDates={showRelativeDates}
shortDateFormat={shortDateFormat}
timeFormat={timeFormat}
style={style}
seriesId={series.id}
qualityProfileId={series.qualityProfileId}
/>
</div>
);
};
//
// Listeners
onMeasure = ({ width }) => {
this.calculateGrid(width, this.props.isSmallScreen);
};
//
// Render
render() {
const {
scroller,
items,
isSmallScreen
} = this.props;
const {
width,
columnWidth,
columnCount,
rowHeight
} = this.state;
const rowCount = Math.ceil(items.length / columnCount);
return (
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
<WindowScroller
scrollElement={isSmallScreen ? undefined : scroller}
>
{({ height, registerChild, onChildScroll, scrollTop }) => {
if (!height) {
return <div />;
}
return (
<div ref={registerChild}>
<Grid
ref={this.setGridRef}
className={styles.grid}
autoHeight={true}
height={height}
columnCount={columnCount}
columnWidth={columnWidth}
rowCount={rowCount}
rowHeight={rowHeight}
width={width}
onScroll={onChildScroll}
scrollTop={scrollTop}
overscanRowCount={2}
cellRenderer={this.cellRenderer}
scrollToAlignment={'start'}
isScrollingOptOut={true}
/>
</div>
);
}
}
</WindowScroller>
</Measure>
);
}
}
SeriesIndexPosters.propTypes = {
items: PropTypes.arrayOf(PropTypes.object).isRequired,
sortKey: PropTypes.string,
posterOptions: PropTypes.object.isRequired,
jumpToCharacter: PropTypes.string,
scrollTop: PropTypes.number.isRequired,
scroller: PropTypes.instanceOf(Element).isRequired,
showRelativeDates: PropTypes.bool.isRequired,
shortDateFormat: PropTypes.string.isRequired,
isSmallScreen: PropTypes.bool.isRequired,
timeFormat: PropTypes.string.isRequired
};
export default SeriesIndexPosters;

282
frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx
Unescape View File

@ -0,0 +1,282 @@
import { throttle } from 'lodash';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { FixedSizeGrid as Grid, GridChildComponentProps } from 'react-window';
import { createSelector } from 'reselect';
import useMeasure from 'Helpers/Hooks/useMeasure';
import SortDirection from 'Helpers/Props/SortDirection';
import SeriesIndexPoster from 'Series/Index/Posters/SeriesIndexPoster';
import Series from 'Series/Series';
import dimensions from 'Styles/Variables/dimensions';
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
const bodyPadding = parseInt(dimensions.pageContentBodyPadding);
const bodyPaddingSmallScreen = parseInt(
dimensions.pageContentBodyPaddingSmallScreen
);
const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
const columnPaddingSmallScreen = parseInt(
dimensions.seriesIndexColumnPaddingSmallScreen
);
const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
const ADDITIONAL_COLUMN_COUNT = {
small: 3,
medium: 2,
large: 1,
};
interface CellItemData {
layout: {
columnCount: number;
padding: number;
posterWidth: number;
posterHeight: number;
};
items: Series[];
sortKey: string;
}
interface SeriesIndexPostersProps {
items: Series[];
sortKey?: string;
sortDirection?: SortDirection;
jumpToCharacter?: string;
scrollTop?: number;
scrollerRef: React.MutableRefObject<HTMLElement>;
isSmallScreen: boolean;
}
const seriesIndexSelector = createSelector(
(state) => state.seriesIndex.posterOptions,
(posterOptions) => {
return {
posterOptions,
};
}
);
const Cell: React.FC<GridChildComponentProps<CellItemData>> = ({
columnIndex,
rowIndex,
style,
data,
}) => {
const { layout, items, sortKey } = data;
const { columnCount, padding, posterWidth, posterHeight } = layout;
const index = rowIndex * columnCount + columnIndex;
if (index >= items.length) {
return null;
}
const series = items[index];
return (
<div
style={{
padding,
...style,
}}
>
<SeriesIndexPoster
seriesId={series.id}
sortKey={sortKey}
posterWidth={posterWidth}
posterHeight={posterHeight}
/>
</div>
);
};
function getWindowScrollTopPosition() {
return document.documentElement.scrollTop || document.body.scrollTop || 0;
}
export default function SeriesIndexPosters(props: SeriesIndexPostersProps) {
const { scrollerRef, items, sortKey, jumpToCharacter, isSmallScreen } = props;
const { posterOptions } = useSelector(seriesIndexSelector);
const ref: React.MutableRefObject<Grid> = useRef();
const [measureRef, bounds] = useMeasure();
const [size, setSize] = useState({ width: 0, height: 0 });
const columnWidth = useMemo(() => {
const { width } = size;
const maximumColumnWidth = isSmallScreen ? 172 : 182;
const columns = Math.floor(width / maximumColumnWidth);
const remainder = width % maximumColumnWidth;
return remainder === 0
? maximumColumnWidth
: Math.floor(
width / (columns + ADDITIONAL_COLUMN_COUNT[posterOptions.size])
);
}, [isSmallScreen, posterOptions, size]);
const columnCount = useMemo(
() => Math.max(Math.floor(size.width / columnWidth), 1),
[size, columnWidth]
);
const padding = props.isSmallScreen
? columnPaddingSmallScreen
: columnPadding;
const posterWidth = columnWidth - padding * 2;
const posterHeight = Math.ceil((250 / 170) * posterWidth);
const rowHeight = useMemo(() => {
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 'network':
case 'seasons':
case 'previousAiring':
case 'added':
case 'path':
case 'sizeOnDisk':
heights.push(19);
break;
case 'qualityProfileId':
if (!showQualityProfile) {
heights.push(19);
}
break;
default:
// No need to add a height of 0
}
return heights.reduce((acc, height) => acc + height, 0);
}, [isSmallScreen, posterOptions, sortKey, posterHeight]);
useEffect(() => {
const current = scrollerRef.current;
if (isSmallScreen) {
const padding = bodyPaddingSmallScreen - 5;
setSize({
width: window.innerWidth - padding * 2,
height: window.innerHeight,
});
return;
}
if (current) {
const width = current.clientWidth;
const padding = bodyPadding - 5;
setSize({
width: width - padding * 2,
height: window.innerHeight,
});
}
}, [isSmallScreen, scrollerRef, bounds]);
useEffect(() => {
const currentScrollListener = isSmallScreen ? window : scrollerRef.current;
const currentScrollerRef = scrollerRef.current;
const handleScroll = throttle(() => {
const { offsetTop = 0 } = currentScrollerRef;
const scrollTop =
(isSmallScreen
? getWindowScrollTopPosition()
: currentScrollerRef.scrollTop) - offsetTop;
ref.current.scrollTo({ scrollLeft: 0, scrollTop });
}, 10);
currentScrollListener.addEventListener('scroll', handleScroll);
return () => {
handleScroll.cancel();
if (currentScrollListener) {
currentScrollListener.removeEventListener('scroll', handleScroll);
}
};
}, [isSmallScreen, ref, scrollerRef]);
useEffect(() => {
if (jumpToCharacter) {
const index = getIndexOfFirstCharacter(items, jumpToCharacter);
if (index != null) {
const rowIndex = Math.floor(index / columnCount);
const scrollTop = rowIndex * rowHeight + padding;
ref.current.scrollTo({ scrollLeft: 0, scrollTop });
scrollerRef.current.scrollTo(0, scrollTop);
}
}
}, [
jumpToCharacter,
rowHeight,
columnCount,
padding,
items,
scrollerRef,
ref,
]);
return (
<div ref={measureRef}>
<Grid<CellItemData>
ref={ref}
style={{
width: '100%',
height: '100%',
overflow: 'none',
}}
width={size.width}
height={size.height}
columnCount={columnCount}
columnWidth={columnWidth}
rowCount={Math.ceil(items.length / columnCount)}
rowHeight={rowHeight}
itemData={{
layout: {
columnCount,
padding,
posterWidth,
posterHeight,
},
items,
sortKey,
}}
>
{Cell}
</Grid>
</div>
);
}

24
frontend/src/Series/Index/Posters/SeriesIndexPostersConnector.js
Unescape View File

@ -1,24 +0,0 @@
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import SeriesIndexPosters from './SeriesIndexPosters';
function createMapStateToProps() {
return createSelector(
(state) => state.seriesIndex.posterOptions,
createUISettingsSelector(),
createDimensionsSelector(),
(posterOptions, uiSettings, dimensions) => {
return {
posterOptions,
showRelativeDates: uiSettings.showRelativeDates,
shortDateFormat: uiSettings.shortDateFormat,
timeFormat: uiSettings.timeFormat,
isSmallScreen: dimensions.isSmallScreen
};
}
);
}
export default connect(createMapStateToProps)(SeriesIndexPosters);

8
frontend/src/Series/Index/Posters/selectPosterOptions.ts
Unescape View File

@ -0,0 +1,8 @@
import { createSelector } from 'reselect';
const selectPosterOptions = createSelector(
(state) => state.seriesIndex.posterOptions,
(posterOptions) => posterOptions
);
export default selectPosterOptions;

27
frontend/src/Series/Index/ProgressBar/SeriesIndexProgressBar.js → frontend/src/Series/Index/ProgressBar/SeriesIndexProgressBar.tsx
Unescape View File

@ -1,11 +1,20 @@
import PropTypes from 'prop-types';
import React from 'react';
import ProgressBar from 'Components/ProgressBar';
import { sizes } from 'Helpers/Props';
import getProgressBarKind from 'Utilities/Series/getProgressBarKind';
import styles from './SeriesIndexProgressBar.css';
function SeriesIndexProgressBar(props) {
interface SeriesIndexProgressBarProps {
monitored: boolean;
status: string;
episodeCount: number;
episodeFileCount: number;
totalEpisodeCount: number;
posterWidth: number;
detailedProgressBar: boolean;
}
function SeriesIndexProgressBar(props: SeriesIndexProgressBarProps) {
const {
monitored,
status,
@ -13,10 +22,10 @@ function SeriesIndexProgressBar(props) {
episodeFileCount,
totalEpisodeCount,
posterWidth,
detailedProgressBar
detailedProgressBar,
} = props;
const progress = episodeCount ? episodeFileCount / episodeCount * 100 : 100;
const progress = episodeCount ? (episodeFileCount / episodeCount) * 100 : 100;
const text = `${episodeFileCount} / ${episodeCount}`;
return (
@ -34,14 +43,4 @@ function SeriesIndexProgressBar(props) {
);
}
SeriesIndexProgressBar.propTypes = {
monitored: PropTypes.bool.isRequired,
status: PropTypes.string.isRequired,
episodeCount: PropTypes.number.isRequired,
episodeFileCount: PropTypes.number.isRequired,
totalEpisodeCount: PropTypes.number.isRequired,
posterWidth: PropTypes.number.isRequired,
detailedProgressBar: PropTypes.bool.isRequired
};
export default SeriesIndexProgressBar;

370
frontend/src/Series/Index/SeriesIndex.js
Unescape View File

@ -1,370 +0,0 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import PageContent from 'Components/Page/PageContent';
import PageContentBody from 'Components/Page/PageContentBody';
import PageJumpBar from 'Components/Page/PageJumpBar';
import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
import { align, icons, sortDirections } from 'Helpers/Props';
import NoSeries from 'Series/NoSeries';
import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
import SeriesIndexFilterMenu from './Menus/SeriesIndexFilterMenu';
import SeriesIndexSortMenu from './Menus/SeriesIndexSortMenu';
import SeriesIndexViewMenu from './Menus/SeriesIndexViewMenu';
import SeriesIndexOverviewOptionsModal from './Overview/Options/SeriesIndexOverviewOptionsModal';
import SeriesIndexOverviewsConnector from './Overview/SeriesIndexOverviewsConnector';
import SeriesIndexPosterOptionsModal from './Posters/Options/SeriesIndexPosterOptionsModal';
import SeriesIndexPostersConnector from './Posters/SeriesIndexPostersConnector';
import SeriesIndexFooterConnector from './SeriesIndexFooterConnector';
import SeriesIndexTableConnector from './Table/SeriesIndexTableConnector';
import SeriesIndexTableOptionsConnector from './Table/SeriesIndexTableOptionsConnector';
import styles from './SeriesIndex.css';
function getViewComponent(view) {
if (view === 'posters') {
return SeriesIndexPostersConnector;
}
if (view === 'overview') {
return SeriesIndexOverviewsConnector;
}
return SeriesIndexTableConnector;
}
class SeriesIndex extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
scroller: null,
jumpBarItems: { order: [] },
jumpToCharacter: null,
isPosterOptionsModalOpen: false,
isOverviewOptionsModalOpen: false
};
}
componentDidMount() {
this.setJumpBarItems();
}
componentDidUpdate(prevProps) {
const {
items,
sortKey,
sortDirection
} = this.props;
if (sortKey !== prevProps.sortKey ||
sortDirection !== prevProps.sortDirection ||
hasDifferentItemsOrOrder(prevProps.items, items)
) {
this.setJumpBarItems();
}
if (this.state.jumpToCharacter != null) {
this.setState({ jumpToCharacter: null });
}
}
//
// Control
setScrollerRef = (ref) => {
this.setState({ scroller: ref });
};
setJumpBarItems() {
const {
items,
sortKey,
sortDirection
} = this.props;
// Reset if not sorting by sortTitle
if (sortKey !== 'sortTitle') {
this.setState({ jumpBarItems: { order: [] } });
return;
}
const characters = _.reduce(items, (acc, item) => {
let char = item.sortTitle.charAt(0);
if (!isNaN(char)) {
char = '#';
}
if (char in acc) {
acc[char] = acc[char] + 1;
} else {
acc[char] = 1;
}
return acc;
}, {});
const order = Object.keys(characters).sort();
// Reverse if sorting descending
if (sortDirection === sortDirections.DESCENDING) {
order.reverse();
}
const jumpBarItems = {
characters,
order
};
this.setState({ jumpBarItems });
}
//
// 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 });
};
//
// Render
render() {
const {
isFetching,
isPopulated,
error,
totalItems,
items,
columns,
selectedFilterKey,
filters,
customFilters,
sortKey,
sortDirection,
view,
isRefreshingSeries,
isRssSyncExecuting,
onScroll,
onSortSelect,
onFilterSelect,
onViewSelect,
onRefreshSeriesPress,
onRssSyncPress,
...otherProps
} = this.props;
const {
scroller,
jumpBarItems,
jumpToCharacter,
isPosterOptionsModalOpen,
isOverviewOptionsModalOpen
} = this.state;
const ViewComponent = getViewComponent(view);
const isLoaded = !!(!error && isPopulated && items.length && scroller);
const hasNoSeries = !totalItems;
return (
<PageContent>
<PageToolbar>
<PageToolbarSection>
<PageToolbarButton
label="Update all"
iconName={icons.REFRESH}
spinningName={icons.REFRESH}
isSpinning={isRefreshingSeries}
isDisabled={hasNoSeries}
onPress={onRefreshSeriesPress}
/>
<PageToolbarButton
label="RSS Sync"
iconName={icons.RSS}
isSpinning={isRssSyncExecuting}
isDisabled={hasNoSeries}
onPress={onRssSyncPress}
/>
</PageToolbarSection>
<PageToolbarSection
alignContent={align.RIGHT}
collapseButtons={false}
>
{
view === 'table' ?
<TableOptionsModalWrapper
{...otherProps}
columns={columns}
optionsComponent={SeriesIndexTableOptionsConnector}
>
<PageToolbarButton
label="Options"
iconName={icons.TABLE}
/>
</TableOptionsModalWrapper> :
null
}
{
view === 'posters' ?
<PageToolbarButton
label="Options"
iconName={icons.POSTER}
isDisabled={hasNoSeries}
onPress={this.onPosterOptionsPress}
/> :
null
}
{
view === 'overview' ?
<PageToolbarButton
label="Options"
iconName={icons.OVERVIEW}
isDisabled={hasNoSeries}
onPress={this.onOverviewOptionsPress}
/> :
null
}
<PageToolbarSeparator />
<SeriesIndexViewMenu
view={view}
isDisabled={hasNoSeries}
onViewSelect={onViewSelect}
/>
<SeriesIndexSortMenu
sortKey={sortKey}
sortDirection={sortDirection}
isDisabled={hasNoSeries}
onSortSelect={onSortSelect}
/>
<SeriesIndexFilterMenu
selectedFilterKey={selectedFilterKey}
filters={filters}
customFilters={customFilters}
isDisabled={hasNoSeries}
onFilterSelect={onFilterSelect}
/>
</PageToolbarSection>
</PageToolbar>
<div className={styles.pageContentBodyWrapper}>
<PageContentBody
registerScroller={this.setScrollerRef}
className={styles.contentBody}
innerClassName={styles[`${view}InnerContentBody`]}
onScroll={onScroll}
>
{
isFetching && !isPopulated &&
<LoadingIndicator />
}
{
!isFetching && !!error &&
<div>Unable to load series</div>
}
{
isLoaded &&
<div className={styles.contentBodyContainer}>
<ViewComponent
scroller={scroller}
items={items}
filters={filters}
sortKey={sortKey}
sortDirection={sortDirection}
jumpToCharacter={jumpToCharacter}
{...otherProps}
/>
<SeriesIndexFooterConnector />
</div>
}
{
!error && isPopulated && !items.length &&
<NoSeries totalItems={totalItems} />
}
</PageContentBody>
{
isLoaded && !!jumpBarItems.order.length &&
<PageJumpBar
items={jumpBarItems}
onItemPress={this.onJumpBarItemPress}
/>
}
</div>
<SeriesIndexPosterOptionsModal
isOpen={isPosterOptionsModalOpen}
onModalClose={this.onPosterOptionsModalClose}
/>
<SeriesIndexOverviewOptionsModal
isOpen={isOverviewOptionsModalOpen}
onModalClose={this.onOverviewOptionsModalClose}
/>
</PageContent>
);
}
}
SeriesIndex.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,
isRefreshingSeries: PropTypes.bool.isRequired,
isRssSyncExecuting: PropTypes.bool.isRequired,
isSmallScreen: PropTypes.bool.isRequired,
onSortSelect: PropTypes.func.isRequired,
onFilterSelect: PropTypes.func.isRequired,
onViewSelect: PropTypes.func.isRequired,
onRefreshSeriesPress: PropTypes.func.isRequired,
onRssSyncPress: PropTypes.func.isRequired,
onScroll: PropTypes.func.isRequired
};
export default SeriesIndex;

306
frontend/src/Series/Index/SeriesIndex.tsx
Unescape View File

@ -0,0 +1,306 @@
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { REFRESH_SERIES, RSS_SYNC } from 'Commands/commandNames';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import PageContent from 'Components/Page/PageContent';
import PageContentBody from 'Components/Page/PageContentBody';
import PageJumpBar from 'Components/Page/PageJumpBar';
import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
import { align, icons } from 'Helpers/Props';
import SortDirection from 'Helpers/Props/SortDirection';
import NoSeries from 'Series/NoSeries';
import { executeCommand } from 'Store/Actions/commandActions';
import {
setSeriesFilter,
setSeriesSort,
setSeriesTableOption,
setSeriesView,
} from 'Store/Actions/seriesIndexActions';
import scrollPositions from 'Store/scrollPositions';
import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import createSeriesClientSideCollectionItemsSelector from 'Store/Selectors/createSeriesClientSideCollectionItemsSelector';
import SeriesIndexFilterMenu from './Menus/SeriesIndexFilterMenu';
import SeriesIndexSortMenu from './Menus/SeriesIndexSortMenu';
import SeriesIndexViewMenu from './Menus/SeriesIndexViewMenu';
import SeriesIndexOverviewOptionsModal from './Overview/Options/SeriesIndexOverviewOptionsModal';
import SeriesIndexOverviews from './Overview/SeriesIndexOverviews';
import SeriesIndexPosterOptionsModal from './Posters/Options/SeriesIndexPosterOptionsModal';
import SeriesIndexPosters from './Posters/SeriesIndexPosters';
import SeriesIndexFooter from './SeriesIndexFooter';
import SeriesIndexTable from './Table/SeriesIndexTable';
import SeriesIndexTableOptions from './Table/SeriesIndexTableOptions';
import styles from './SeriesIndex.css';
function getViewComponent(view) {
if (view === 'posters') {
return SeriesIndexPosters;
}
if (view === 'overview') {
return SeriesIndexOverviews;
}
return SeriesIndexTable;
}
function SeriesIndex() {
const {
isFetching,
isPopulated,
error,
totalItems,
items,
columns,
selectedFilterKey,
filters,
customFilters,
sortKey,
sortDirection,
view,
} = useSelector(createSeriesClientSideCollectionItemsSelector('seriesIndex'));
const isRefreshingSeries = useSelector(
createCommandExecutingSelector(REFRESH_SERIES)
);
const isRssSyncExecuting = useSelector(
createCommandExecutingSelector(RSS_SYNC)
);
const { isSmallScreen } = useSelector(createDimensionsSelector());
const dispatch = useDispatch();
const scrollerRef = useRef<HTMLDivElement>();
const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false);
const [jumpToCharacter, setJumpToCharacter] = useState<string | null>(null);
const onRefreshSeriesPress = useCallback(() => {
dispatch(
executeCommand({
name: REFRESH_SERIES,
})
);
}, [dispatch]);
const onRssSyncPress = useCallback(() => {
dispatch(
executeCommand({
name: RSS_SYNC,
})
);
}, [dispatch]);
const onTableOptionChange = useCallback(
(payload) => {
dispatch(setSeriesTableOption(payload));
},
[dispatch]
);
const onViewSelect = useCallback(
(value) => {
dispatch(setSeriesView({ view: value }));
if (scrollerRef.current) {
scrollerRef.current.scrollTo(0, 0);
}
},
[scrollerRef, dispatch]
);
const onSortSelect = useCallback(
(value) => {
dispatch(setSeriesSort({ sortKey: value }));
},
[dispatch]
);
const onFilterSelect = useCallback(
(value) => {
dispatch(setSeriesFilter({ selectedFilterKey: value }));
},
[dispatch]
);
const onOptionsPress = useCallback(() => {
setIsOptionsModalOpen(true);
}, [setIsOptionsModalOpen]);
const onOptionsModalClose = useCallback(() => {
setIsOptionsModalOpen(false);
}, [setIsOptionsModalOpen]);
const onJumpBarItemPress = useCallback(
(character) => {
setJumpToCharacter(character);
},
[setJumpToCharacter]
);
const onScroll = useCallback(
({ scrollTop }) => {
setJumpToCharacter(null);
scrollPositions.seriesIndex = scrollTop;
},
[setJumpToCharacter]
);
const jumpBarItems = useMemo(() => {
// Reset if not sorting by sortTitle
if (sortKey !== 'sortTitle') {
return {
order: [],
};
}
const characters = items.reduce((acc, item) => {
let char = item.sortTitle.charAt(0);
if (!isNaN(char)) {
char = '#';
}
if (char in acc) {
acc[char] = acc[char] + 1;
} else {
acc[char] = 1;
}
return acc;
}, {});
const order = Object.keys(characters).sort();
// Reverse if sorting descending
if (sortDirection === SortDirection.Descending) {
order.reverse();
}
return {
characters,
order,
};
}, [items, sortKey, sortDirection]);
const ViewComponent = useMemo(() => getViewComponent(view), [view]);
const isLoaded = !!(!error && isPopulated && items.length);
const hasNoSeries = !totalItems;
return (
<PageContent>
<PageToolbar>
<PageToolbarSection>
<PageToolbarButton
label="Update all"
iconName={icons.REFRESH}
spinningName={icons.REFRESH}
isSpinning={isRefreshingSeries}
isDisabled={hasNoSeries}
onPress={onRefreshSeriesPress}
/>
<PageToolbarButton
label="RSS Sync"
iconName={icons.RSS}
isSpinning={isRssSyncExecuting}
isDisabled={hasNoSeries}
onPress={onRssSyncPress}
/>
</PageToolbarSection>
<PageToolbarSection alignContent={align.RIGHT} collapseButtons={false}>
{view === 'table' ? (
<TableOptionsModalWrapper
columns={columns}
optionsComponent={SeriesIndexTableOptions}
onTableOptionChange={onTableOptionChange}
>
<PageToolbarButton label="Options" iconName={icons.TABLE} />
</TableOptionsModalWrapper>
) : (
<PageToolbarButton
label="Options"
iconName={view === 'posters' ? icons.POSTER : icons.OVERVIEW}
isDisabled={hasNoSeries}
onPress={onOptionsPress}
/>
)}
<PageToolbarSeparator />
<SeriesIndexViewMenu
view={view}
isDisabled={hasNoSeries}
onViewSelect={onViewSelect}
/>
<SeriesIndexSortMenu
sortKey={sortKey}
sortDirection={sortDirection}
isDisabled={hasNoSeries}
onSortSelect={onSortSelect}
/>
<SeriesIndexFilterMenu
selectedFilterKey={selectedFilterKey}
filters={filters}
customFilters={customFilters}
isDisabled={hasNoSeries}
onFilterSelect={onFilterSelect}
/>
</PageToolbarSection>
</PageToolbar>
<div className={styles.pageContentBodyWrapper}>
<PageContentBody
ref={scrollerRef}
className={styles.contentBody}
innerClassName={styles[`${view}InnerContentBody`]}
onScroll={onScroll}
>
{isFetching && !isPopulated ? <LoadingIndicator /> : null}
{!isFetching && !!error ? <div>Unable to load series</div> : null}
{isLoaded ? (
<div className={styles.contentBodyContainer}>
<ViewComponent
scrollerRef={scrollerRef}
items={items}
sortKey={sortKey}
sortDirection={sortDirection}
jumpToCharacter={jumpToCharacter}
isSmallScreen={isSmallScreen}
/>
<SeriesIndexFooter />
</div>
) : null}
{!error && isPopulated && !items.length ? (
<NoSeries totalItems={totalItems} />
) : null}
</PageContentBody>
{isLoaded && !!jumpBarItems.order.length ? (
<PageJumpBar items={jumpBarItems} onItemPress={onJumpBarItemPress} />
) : null}
</div>
{view === 'posters' ? (
<SeriesIndexPosterOptionsModal
isOpen={isOptionsModalOpen}
onModalClose={onOptionsModalClose}
/>
) : null}
{view === 'overview' ? (
<SeriesIndexOverviewOptionsModal
isOpen={isOptionsModalOpen}
onModalClose={onOptionsModalClose}
/>
) : null}
</PageContent>
);
}
export default SeriesIndex;

105
frontend/src/Series/Index/SeriesIndexConnector.js
Unescape View File

@ -1,105 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import * as commandNames from 'Commands/commandNames';
import withScrollPosition from 'Components/withScrollPosition';
import { executeCommand } from 'Store/Actions/commandActions';
import { setSeriesFilter, setSeriesSort, setSeriesTableOption, setSeriesView } from 'Store/Actions/seriesIndexActions';
import scrollPositions from 'Store/scrollPositions';
import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import createSeriesClientSideCollectionItemsSelector from 'Store/Selectors/createSeriesClientSideCollectionItemsSelector';
import SeriesIndex from './SeriesIndex';
function createMapStateToProps() {
return createSelector(
createSeriesClientSideCollectionItemsSelector('seriesIndex'),
createCommandExecutingSelector(commandNames.REFRESH_SERIES),
createCommandExecutingSelector(commandNames.RSS_SYNC),
createDimensionsSelector(),
(
series,
isRefreshingSeries,
isRssSyncExecuting,
dimensionsState
) => {
return {
...series,
isRefreshingSeries,
isRssSyncExecuting,
isSmallScreen: dimensionsState.isSmallScreen
};
}
);
}
function createMapDispatchToProps(dispatch, props) {
return {
onTableOptionChange(payload) {
dispatch(setSeriesTableOption(payload));
},
onSortSelect(sortKey) {
dispatch(setSeriesSort({ sortKey }));
},
onFilterSelect(selectedFilterKey) {
dispatch(setSeriesFilter({ selectedFilterKey }));
},
dispatchSetSeriesView(view) {
dispatch(setSeriesView({ view }));
},
onRefreshSeriesPress() {
dispatch(executeCommand({
name: commandNames.REFRESH_SERIES
}));
},
onRssSyncPress() {
dispatch(executeCommand({
name: commandNames.RSS_SYNC
}));
}
};
}
class SeriesIndexConnector extends Component {
//
// Listeners
onViewSelect = (view) => {
this.props.dispatchSetSeriesView(view);
};
onScroll = ({ scrollTop }) => {
scrollPositions.seriesIndex = scrollTop;
};
//
// Render
render() {
return (
<SeriesIndex
{...this.props}
onViewSelect={this.onViewSelect}
onScroll={this.onScroll}
/>
);
}
}
SeriesIndexConnector.propTypes = {
isSmallScreen: PropTypes.bool.isRequired,
view: PropTypes.string.isRequired,
dispatchSetSeriesView: PropTypes.func.isRequired
};
export default withScrollPosition(
connect(createMapStateToProps, createMapDispatchToProps)(SeriesIndexConnector),
'seriesIndex'
);

48
frontend/src/Series/Index/SeriesIndexFilterModal.tsx
Unescape View File

@ -0,0 +1,48 @@
import React, { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { createSelector } from 'reselect';
import FilterModal from 'Components/Filter/FilterModal';
import { setSeriesFilter } from 'Store/Actions/seriesIndexActions';
function createSeriesSelector() {
return createSelector(
(state) => state.series.items,
(series) => {
return series;
}
);
}
function createFilterBuilderPropsSelector() {
return createSelector(
(state) => state.series.items,
(series) => {
return series;
}
);
}
export default function SeriesIndexFilterModal(props) {
const sectionItems = useSelector(createSeriesSelector());
const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
const customFilterType = 'series';
const dispatch = useDispatch();
const dispatchSetFilter = useCallback(
(payload) => {
dispatch(setSeriesFilter(payload));
},
[dispatch]
);
return (
<FilterModal
{...props}
sectionItems={sectionItems}
filterBuilderProps={filterBuilderProps}
customFilterType={customFilterType}
dispatchSetFilter={dispatchSetFilter}
/>
);
}

24
frontend/src/Series/Index/SeriesIndexFilterModalConnector.js
Unescape View File

@ -1,24 +0,0 @@
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import FilterModal from 'Components/Filter/FilterModal';
import { setSeriesFilter } from 'Store/Actions/seriesIndexActions';
function createMapStateToProps() {
return createSelector(
(state) => state.series.items,
(state) => state.seriesIndex.filterBuilderProps,
(sectionItems, filterBuilderProps) => {
return {
sectionItems,
filterBuilderProps,
customFilterType: 'series'
};
}
);
}
const mapDispatchToProps = {
dispatchSetFilter: setSeriesFilter
};
export default connect(createMapStateToProps, mapDispatchToProps)(FilterModal);

158
frontend/src/Series/Index/SeriesIndexFooter.js
Unescape View File

@ -1,158 +0,0 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
import DescriptionList from 'Components/DescriptionList/DescriptionList';
import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
import formatBytes from 'Utilities/Number/formatBytes';
import styles from './SeriesIndexFooter.css';
class SeriesIndexFooter extends PureComponent {
//
// Render
render() {
const { series } = this.props;
const count = series.length;
let episodes = 0;
let episodeFiles = 0;
let ended = 0;
let continuing = 0;
let monitored = 0;
let totalFileSize = 0;
series.forEach((s) => {
const { statistics = {} } = s;
const {
episodeCount = 0,
episodeFileCount = 0,
sizeOnDisk = 0
} = statistics;
episodes += episodeCount;
episodeFiles += episodeFileCount;
if (s.status === 'ended') {
ended++;
} else {
continuing++;
}
if (s.monitored) {
monitored++;
}
totalFileSize += sizeOnDisk;
});
return (
<ColorImpairedConsumer>
{(enableColorImpairedMode) => {
return (
<div className={styles.footer}>
<div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.continuing,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Continuing (All episodes downloaded)</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.ended,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Ended (All episodes downloaded)</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.missingMonitored,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing Episodes (Series monitored)</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.missingUnmonitored,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing Episodes (Series not monitored)</div>
</div>
</div>
<div className={styles.statistics}>
<DescriptionList>
<DescriptionListItem
title="Series"
data={count}
/>
<DescriptionListItem
title="Ended"
data={ended}
/>
<DescriptionListItem
title="Continuing"
data={continuing}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Monitored"
data={monitored}
/>
<DescriptionListItem
title="Unmonitored"
data={count - monitored}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Episodes"
data={episodes}
/>
<DescriptionListItem
title="Files"
data={episodeFiles}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Total File Size"
data={formatBytes(totalFileSize)}
/>
</DescriptionList>
</div>
</div>
);
}}
</ColorImpairedConsumer>
);
}
}
SeriesIndexFooter.propTypes = {
series: PropTypes.arrayOf(PropTypes.object).isRequired
};
export default SeriesIndexFooter;

155
frontend/src/Series/Index/SeriesIndexFooter.tsx
Unescape View File

@ -0,0 +1,155 @@
import classNames from 'classnames';
import React from 'react';
import { useSelector } from 'react-redux';
import { createSelector } from 'reselect';
import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
import DescriptionList from 'Components/DescriptionList/DescriptionList';
import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
import createDeepEqualSelector from 'Store/Selectors/createDeepEqualSelector';
import formatBytes from 'Utilities/Number/formatBytes';
import styles from './SeriesIndexFooter.css';
function createUnoptimizedSelector() {
return createSelector(
createClientSideCollectionSelector('series', 'seriesIndex'),
(series) => {
return series.items.map((s) => {
const { monitored, status, statistics } = s;
return {
monitored,
status,
statistics,
};
});
}
);
}
function createSeriesSelector() {
return createDeepEqualSelector(
createUnoptimizedSelector(),
(series) => series
);
}
export default function SeriesIndexFooter() {
const series = useSelector(createSeriesSelector());
const count = series.length;
let episodes = 0;
let episodeFiles = 0;
let ended = 0;
let continuing = 0;
let monitored = 0;
let totalFileSize = 0;
series.forEach((s) => {
const { statistics = {} } = s;
const {
episodeCount = 0,
episodeFileCount = 0,
sizeOnDisk = 0,
} = statistics;
episodes += episodeCount;
episodeFiles += episodeFileCount;
if (s.status === 'ended') {
ended++;
} else {
continuing++;
}
if (s.monitored) {
monitored++;
}
totalFileSize += sizeOnDisk;
});
return (
<ColorImpairedConsumer>
{(enableColorImpairedMode) => {
return (
<div className={styles.footer}>
<div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.continuing,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Continuing (All episodes downloaded)</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.ended,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Ended (All episodes downloaded)</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.missingMonitored,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing Episodes (Series monitored)</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.missingUnmonitored,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing Episodes (Series not monitored)</div>
</div>
</div>
<div className={styles.statistics}>
<DescriptionList>
<DescriptionListItem title="Series" data={count} />
<DescriptionListItem title="Ended" data={ended} />
<DescriptionListItem title="Continuing" data={continuing} />
</DescriptionList>
<DescriptionList>
<DescriptionListItem title="Monitored" data={monitored} />
<DescriptionListItem
title="Unmonitored"
data={count - monitored}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem title="Episodes" data={episodes} />
<DescriptionListItem title="Files" data={episodeFiles} />
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Total File Size"
data={formatBytes(totalFileSize)}
/>
</DescriptionList>
</div>
</div>
);
}}
</ColorImpairedConsumer>
);
}

46
frontend/src/Series/Index/SeriesIndexFooterConnector.js
Unescape View File

@ -1,46 +0,0 @@
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
import createDeepEqualSelector from 'Store/Selectors/createDeepEqualSelector';
import SeriesIndexFooter from './SeriesIndexFooter';
function createUnoptimizedSelector() {
return createSelector(
createClientSideCollectionSelector('series', 'seriesIndex'),
(series) => {
return series.items.map((s) => {
const {
monitored,
status,
statistics
} = s;
return {
monitored,
status,
statistics
};
});
}
);
}
function createSeriesSelector() {
return createDeepEqualSelector(
createUnoptimizedSelector(),
(series) => series
);
}
function createMapStateToProps() {
return createSelector(
createSeriesSelector(),
(series) => {
return {
series
};
}
);
}
export default connect(createMapStateToProps)(SeriesIndexFooter);

134
frontend/src/Series/Index/SeriesIndexItemConnector.js
Unescape View File

@ -1,134 +0,0 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import * as commandNames from 'Commands/commandNames';
import { executeCommand } from 'Store/Actions/commandActions';
import createExecutingCommandsSelector from 'Store/Selectors/createExecutingCommandsSelector';
import createSeriesQualityProfileSelector from 'Store/Selectors/createSeriesQualityProfileSelector';
import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
function selectShowSearchAction() {
return createSelector(
(state) => state.seriesIndex,
(seriesIndex) => {
const view = seriesIndex.view;
switch (view) {
case 'posters':
return seriesIndex.posterOptions.showSearchAction;
case 'overview':
return seriesIndex.overviewOptions.showSearchAction;
default:
return seriesIndex.tableOptions.showSearchAction;
}
}
);
}
function createMapStateToProps() {
return createSelector(
createSeriesSelector(),
createSeriesQualityProfileSelector(),
selectShowSearchAction(),
createExecutingCommandsSelector(),
(
series,
qualityProfile,
showSearchAction,
executingCommands
) => {
// If a series is deleted this selector may fire before the parent
// selecors, which will result in an undefined series, if that happens
// we want to return early here and again in the render function to avoid
// trying to show a series that has no information available.
if (!series) {
return {};
}
const isRefreshingSeries = executingCommands.some((command) => {
return (
command.name === commandNames.REFRESH_SERIES &&
command.body.seriesId === series.id
);
});
const isSearchingSeries = executingCommands.some((command) => {
return (
command.name === commandNames.SERIES_SEARCH &&
command.body.seriesId === series.id
);
});
const latestSeason = _.maxBy(series.seasons, (season) => season.seasonNumber);
return {
...series,
qualityProfile,
latestSeason,
showSearchAction,
isRefreshingSeries,
isSearchingSeries
};
}
);
}
const mapDispatchToProps = {
dispatchExecuteCommand: executeCommand
};
class SeriesIndexItemConnector extends Component {
//
// Listeners
onRefreshSeriesPress = () => {
this.props.dispatchExecuteCommand({
name: commandNames.REFRESH_SERIES,
seriesId: this.props.id
});
};
onSearchPress = () => {
this.props.dispatchExecuteCommand({
name: commandNames.SERIES_SEARCH,
seriesId: this.props.id
});
};
//
// Render
render() {
const {
id,
component: ItemComponent,
...otherProps
} = this.props;
if (!id) {
return null;
}
return (
<ItemComponent
{...otherProps}
id={id}
onRefreshSeriesPress={this.onRefreshSeriesPress}
onSearchPress={this.onSearchPress}
/>
);
}
}
SeriesIndexItemConnector.propTypes = {
id: PropTypes.number,
component: PropTypes.elementType.isRequired,
dispatchExecuteCommand: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(SeriesIndexItemConnector);

102
frontend/src/Series/Index/Table/SeriesIndexActionsCell.js
Unescape View File

@ -1,102 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import IconButton from 'Components/Link/IconButton';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
import { icons } from 'Helpers/Props';
import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
class SeriesIndexActionsCell extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
isEditSeriesModalOpen: false,
isDeleteSeriesModalOpen: false
};
}
//
// Listeners
onEditSeriesPress = () => {
this.setState({ isEditSeriesModalOpen: true });
};
onEditSeriesModalClose = () => {
this.setState({ isEditSeriesModalOpen: false });
};
onDeleteSeriesPress = () => {
this.setState({
isEditSeriesModalOpen: false,
isDeleteSeriesModalOpen: true
});
};
onDeleteSeriesModalClose = () => {
this.setState({ isDeleteSeriesModalOpen: false });
};
//
// Render
render() {
const {
id,
isRefreshingSeries,
onRefreshSeriesPress,
...otherProps
} = this.props;
const {
isEditSeriesModalOpen,
isDeleteSeriesModalOpen
} = this.state;
return (
<VirtualTableRowCell
{...otherProps}
>
<SpinnerIconButton
name={icons.REFRESH}
title="Refresh series"
isSpinning={isRefreshingSeries}
onPress={onRefreshSeriesPress}
/>
<IconButton
name={icons.EDIT}
title="Edit Series"
onPress={this.onEditSeriesPress}
/>
<EditSeriesModalConnector
isOpen={isEditSeriesModalOpen}
seriesId={id}
onModalClose={this.onEditSeriesModalClose}
onDeleteSeriesPress={this.onDeleteSeriesPress}
/>
<DeleteSeriesModal
isOpen={isDeleteSeriesModalOpen}
seriesId={id}
onModalClose={this.onDeleteSeriesModalClose}
/>
</VirtualTableRowCell>
);
}
}
SeriesIndexActionsCell.propTypes = {
id: PropTypes.number.isRequired,
isRefreshingSeries: PropTypes.bool.isRequired,
onRefreshSeriesPress: PropTypes.func.isRequired
};
export default SeriesIndexActionsCell;

86
frontend/src/Series/Index/Table/SeriesIndexHeader.js
Unescape View File

@ -1,86 +0,0 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import IconButton from 'Components/Link/IconButton';
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
import { icons } from 'Helpers/Props';
import hasGrowableColumns from './hasGrowableColumns';
import SeriesIndexTableOptionsConnector from './SeriesIndexTableOptionsConnector';
import styles from './SeriesIndexHeader.css';
function SeriesIndexHeader(props) {
const {
showBanners,
columns,
onTableOptionChange,
...otherProps
} = 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}
>
<TableOptionsModalWrapper
columns={columns}
optionsComponent={SeriesIndexTableOptionsConnector}
onTableOptionChange={onTableOptionChange}
>
<IconButton
name={icons.ADVANCED_SETTINGS}
/>
</TableOptionsModalWrapper>
</VirtualTableHeaderCell>
);
}
return (
<VirtualTableHeaderCell
key={name}
className={classNames(
styles[name],
name === 'sortTitle' && showBanners && styles.banner,
name === 'sortTitle' && showBanners && !hasGrowableColumns(columns) && styles.bannerGrow
)}
name={name}
isSortable={isSortable}
{...otherProps}
>
{label}
</VirtualTableHeaderCell>
);
})
}
</VirtualTableHeader>
);
}
SeriesIndexHeader.propTypes = {
showBanners: PropTypes.bool.isRequired,
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
onTableOptionChange: PropTypes.func.isRequired
};
export default SeriesIndexHeader;

13
frontend/src/Series/Index/Table/SeriesIndexHeaderConnector.js
Unescape View File

@ -1,13 +0,0 @@
import { connect } from 'react-redux';
import { setSeriesTableOption } from 'Store/Actions/seriesIndexActions';
import SeriesIndexHeader from './SeriesIndexHeader';
function createMapDispatchToProps(dispatch, props) {
return {
onTableOptionChange(payload) {
dispatch(setSeriesTableOption(payload));
}
};
}
export default connect(undefined, createMapDispatchToProps)(SeriesIndexHeader);

563
frontend/src/Series/Index/Table/SeriesIndexRow.js
Unescape View File

@ -1,563 +0,0 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import CheckInput from 'Components/Form/CheckInput';
import HeartRating from 'Components/HeartRating';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import ProgressBar from 'Components/ProgressBar';
import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
import TagListConnector from 'Components/TagListConnector';
import { icons } from 'Helpers/Props';
import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
import SeriesBanner from 'Series/SeriesBanner';
import SeriesTitleLink from 'Series/SeriesTitleLink';
import formatBytes from 'Utilities/Number/formatBytes';
import getProgressBarKind from 'Utilities/Series/getProgressBarKind';
import titleCase from 'Utilities/String/titleCase';
import hasGrowableColumns from './hasGrowableColumns';
import SeriesStatusCell from './SeriesStatusCell';
import styles from './SeriesIndexRow.css';
class SeriesIndexRow extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
hasBannerError: false,
isEditSeriesModalOpen: false,
isDeleteSeriesModalOpen: false
};
}
onEditSeriesPress = () => {
this.setState({ isEditSeriesModalOpen: true });
};
onEditSeriesModalClose = () => {
this.setState({ isEditSeriesModalOpen: false });
};
onDeleteSeriesPress = () => {
this.setState({
isEditSeriesModalOpen: false,
isDeleteSeriesModalOpen: true
});
};
onDeleteSeriesModalClose = () => {
this.setState({ isDeleteSeriesModalOpen: false });
};
onUseSceneNumberingChange = () => {
// Mock handler to satisfy `onChange` being required for `CheckInput`.
//
};
onBannerLoad = () => {
if (this.state.hasBannerError) {
this.setState({ hasBannerError: false });
}
};
onBannerLoadError = () => {
if (!this.state.hasBannerError) {
this.setState({ hasBannerError: true });
}
};
//
// Render
render() {
const {
id,
monitored,
status,
title,
titleSlug,
seriesType,
network,
originalLanguage,
qualityProfile,
nextAiring,
previousAiring,
added,
statistics,
latestSeason,
year,
path,
genres,
ratings,
certification,
tags,
images,
useSceneNumbering,
showBanners,
showSearchAction,
columns,
isRefreshingSeries,
isSearchingSeries,
onRefreshSeriesPress,
onSearchPress
} = this.props;
const {
seasonCount,
episodeCount,
episodeFileCount,
totalEpisodeCount,
releaseGroups,
sizeOnDisk
} = statistics;
const {
hasBannerError,
isEditSeriesModalOpen,
isDeleteSeriesModalOpen
} = this.state;
return (
<>
{
columns.map((column) => {
const {
name,
isVisible
} = column;
if (!isVisible) {
return null;
}
if (name === 'status') {
return (
<SeriesStatusCell
key={name}
className={styles[name]}
monitored={monitored}
status={status}
component={VirtualTableRowCell}
/>
);
}
if (name === 'sortTitle') {
return (
<VirtualTableRowCell
key={name}
className={classNames(
styles[name],
showBanners && styles.banner,
showBanners && !hasGrowableColumns(columns) && styles.bannerGrow
)}
>
{
showBanners ?
<Link
className={styles.link}
to={`/series/${titleSlug}`}
>
<SeriesBanner
className={styles.bannerImage}
images={images}
lazy={false}
overflow={true}
onError={this.onBannerLoadError}
onLoad={this.onBannerLoad}
/>
{
hasBannerError &&
<div className={styles.overlayTitle}>
{title}
</div>
}
</Link> :
<SeriesTitleLink
titleSlug={titleSlug}
title={title}
/>
}
</VirtualTableRowCell>
);
}
if (name === 'seriesType') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{titleCase(seriesType)}
</VirtualTableRowCell>
);
}
if (name === 'network') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{network}
</VirtualTableRowCell>
);
}
if (name === 'originalLanguage') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{originalLanguage.name}
</VirtualTableRowCell>
);
}
if (name === 'qualityProfileId') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{qualityProfile.name}
</VirtualTableRowCell>
);
}
if (name === 'nextAiring') {
return (
<RelativeDateCellConnector
key={name}
className={styles[name]}
date={nextAiring}
component={VirtualTableRowCell}
/>
);
}
if (name === 'previousAiring') {
return (
<RelativeDateCellConnector
key={name}
className={styles[name]}
date={previousAiring}
component={VirtualTableRowCell}
/>
);
}
if (name === 'added') {
return (
<RelativeDateCellConnector
key={name}
className={styles[name]}
date={added}
component={VirtualTableRowCell}
/>
);
}
if (name === 'seasonCount') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{seasonCount}
</VirtualTableRowCell>
);
}
if (name === 'episodeProgress') {
const progress = episodeCount ? episodeFileCount / episodeCount * 100 : 100;
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<ProgressBar
progress={progress}
kind={getProgressBarKind(status, monitored, progress)}
showText={true}
text={`${episodeFileCount} / ${episodeCount}`}
title={`${episodeFileCount} / ${episodeCount} (Total: ${totalEpisodeCount})`}
width={125}
/>
</VirtualTableRowCell>
);
}
if (name === 'latestSeason') {
if (!latestSeason) {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
/>
);
}
const seasonStatistics = latestSeason.statistics || {};
const progress = seasonStatistics.episodeCount ?
seasonStatistics.episodeFileCount / seasonStatistics.episodeCount * 100 :
100;
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<ProgressBar
progress={progress}
kind={getProgressBarKind(status, monitored, progress)}
showText={true}
text={`${seasonStatistics.episodeFileCount} / ${seasonStatistics.episodeCount}`}
title={`${seasonStatistics.episodeFileCount} / ${seasonStatistics.episodeCount} (Total: ${seasonStatistics.totalEpisodeCount})`}
width={125}
/>
</VirtualTableRowCell>
);
}
if (name === 'episodeCount') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{totalEpisodeCount}
</VirtualTableRowCell>
);
}
if (name === 'year') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{year}
</VirtualTableRowCell>
);
}
if (name === 'path') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{path}
</VirtualTableRowCell>
);
}
if (name === 'sizeOnDisk') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{formatBytes(sizeOnDisk)}
</VirtualTableRowCell>
);
}
if (name === 'genres') {
const joinedGenres = genres.join(', ');
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<span title={joinedGenres}>
{joinedGenres}
</span>
</VirtualTableRowCell>
);
}
if (name === 'ratings') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<HeartRating
rating={ratings.value}
/>
</VirtualTableRowCell>
);
}
if (name === 'certification') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
{certification}
</VirtualTableRowCell>
);
}
if (name === 'releaseGroups') {
const joinedReleaseGroups = releaseGroups.join(', ');
const truncatedReleaseGroups = releaseGroups.length > 3 ?
`${releaseGroups.slice(0, 3).join(', ')}...` :
joinedReleaseGroups;
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<span title={joinedReleaseGroups}>
{truncatedReleaseGroups}
</span>
</VirtualTableRowCell>
);
}
if (name === 'tags') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<TagListConnector
tags={tags}
/>
</VirtualTableRowCell>
);
}
if (name === 'useSceneNumbering') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<CheckInput
className={styles.checkInput}
name="useSceneNumbering"
value={useSceneNumbering}
isDisabled={true}
onChange={this.onUseSceneNumberingChange}
/>
</VirtualTableRowCell>
);
}
if (name === 'actions') {
return (
<VirtualTableRowCell
key={name}
className={styles[name]}
>
<SpinnerIconButton
name={icons.REFRESH}
title="Refresh series"
isSpinning={isRefreshingSeries}
onPress={onRefreshSeriesPress}
/>
{
showSearchAction &&
<SpinnerIconButton
className={styles.action}
name={icons.SEARCH}
title="Search for monitored episodes"
isSpinning={isSearchingSeries}
onPress={onSearchPress}
/>
}
<IconButton
name={icons.EDIT}
title="Edit Series"
onPress={this.onEditSeriesPress}
/>
</VirtualTableRowCell>
);
}
return null;
})
}
<EditSeriesModalConnector
isOpen={isEditSeriesModalOpen}
seriesId={id}
onModalClose={this.onEditSeriesModalClose}
onDeleteSeriesPress={this.onDeleteSeriesPress}
/>
<DeleteSeriesModal
isOpen={isDeleteSeriesModalOpen}
seriesId={id}
onModalClose={this.onDeleteSeriesModalClose}
/>
</>
);
}
}
SeriesIndexRow.propTypes = {
id: PropTypes.number.isRequired,
monitored: PropTypes.bool.isRequired,
status: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
titleSlug: PropTypes.string.isRequired,
seriesType: PropTypes.string.isRequired,
originalLanguage: PropTypes.object.isRequired,
network: PropTypes.string,
qualityProfile: PropTypes.object.isRequired,
nextAiring: PropTypes.string,
previousAiring: PropTypes.string,
added: PropTypes.string,
statistics: PropTypes.object.isRequired,
latestSeason: PropTypes.object,
year: PropTypes.number,
path: PropTypes.string.isRequired,
genres: PropTypes.arrayOf(PropTypes.string).isRequired,
ratings: PropTypes.object.isRequired,
certification: PropTypes.string,
tags: PropTypes.arrayOf(PropTypes.number).isRequired,
images: PropTypes.arrayOf(PropTypes.object).isRequired,
useSceneNumbering: PropTypes.bool.isRequired,
showBanners: PropTypes.bool.isRequired,
showSearchAction: PropTypes.bool.isRequired,
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
isRefreshingSeries: PropTypes.bool.isRequired,
isSearchingSeries: PropTypes.bool.isRequired,
onRefreshSeriesPress: PropTypes.func.isRequired,
onSearchPress: PropTypes.func.isRequired
};
SeriesIndexRow.defaultProps = {
statistics: {
seasonCount: 0,
episodeCount: 0,
episodeFileCount: 0,
totalEpisodeCount: 0,
releaseGroups: []
},
genres: [],
tags: []
};
export default SeriesIndexRow;

445
frontend/src/Series/Index/Table/SeriesIndexRow.tsx
Unescape View File

@ -0,0 +1,445 @@
import classNames from 'classnames';
import React, { useCallback, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { SelectActionType, useSelect } from 'App/SelectContext';
import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
import CheckInput from 'Components/Form/CheckInput';
import HeartRating from 'Components/HeartRating';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import ProgressBar from 'Components/ProgressBar';
import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
import Column from 'Components/Table/Column';
import TagListConnector from 'Components/TagListConnector';
import { icons } from 'Helpers/Props';
import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
import createSeriesIndexItemSelector from 'Series/Index/createSeriesIndexItemSelector';
import SeriesBanner from 'Series/SeriesBanner';
import SeriesTitleLink from 'Series/SeriesTitleLink';
import { executeCommand } from 'Store/Actions/commandActions';
import formatBytes from 'Utilities/Number/formatBytes';
import getProgressBarKind from 'Utilities/Series/getProgressBarKind';
import titleCase from 'Utilities/String/titleCase';
import hasGrowableColumns from './hasGrowableColumns';
import selectTableOptions from './selectTableOptions';
import SeriesStatusCell from './SeriesStatusCell';
import styles from './SeriesIndexRow.css';
interface SeriesIndexRowProps {
seriesId: number;
sortKey: string;
columns: Column[];
}
function SeriesIndexRow(props: SeriesIndexRowProps) {
const { seriesId, columns } = props;
const {
series,
qualityProfile,
latestSeason,
isRefreshingSeries,
isSearchingSeries,
} = useSelector(createSeriesIndexItemSelector(props.seriesId));
const { showBanners, showSearchAction } = useSelector(selectTableOptions);
const {
title,
monitored,
status,
path,
titleSlug,
nextAiring,
previousAiring,
added,
statistics = {},
images,
seriesType,
network,
originalLanguage,
certification,
year,
useSceneNumbering,
genres = [],
ratings,
tags = [],
} = series;
const {
seasonCount = 0,
episodeCount = 0,
episodeFileCount = 0,
totalEpisodeCount = 0,
sizeOnDisk = 0,
releaseGroups = [],
} = statistics;
const dispatch = useDispatch();
const [hasBannerError, setHasBannerError] = useState(false);
const [isEditSeriesModalOpen, setIsEditSeriesModalOpen] = useState(false);
const [isDeleteSeriesModalOpen, setIsDeleteSeriesModalOpen] = useState(false);
const onRefreshPress = useCallback(() => {
dispatch(
executeCommand({
name: REFRESH_SERIES,
seriesId,
})
);
}, [seriesId, dispatch]);
const onSearchPress = useCallback(() => {
dispatch(
executeCommand({
name: SERIES_SEARCH,
seriesId,
})
);
}, [seriesId, dispatch]);
const onBannerLoadError = useCallback(() => {
setHasBannerError(true);
}, [setHasBannerError]);
const onBannerLoad = useCallback(() => {
setHasBannerError(false);
}, [setHasBannerError]);
const onEditSeriesPress = useCallback(() => {
setIsEditSeriesModalOpen(true);
}, [setIsEditSeriesModalOpen]);
const onEditSeriesModalClose = useCallback(() => {
setIsEditSeriesModalOpen(false);
}, [setIsEditSeriesModalOpen]);
const onDeleteSeriesPress = useCallback(() => {
setIsEditSeriesModalOpen(false);
setIsDeleteSeriesModalOpen(true);
}, [setIsDeleteSeriesModalOpen]);
const onDeleteSeriesModalClose = useCallback(() => {
setIsDeleteSeriesModalOpen(false);
}, [setIsDeleteSeriesModalOpen]);
const onUseSceneNumberingChange = useCallback(() => {
// Mock handler to satisfy `onChange` being required for `CheckInput`.
}, []);
return (
<>
{columns.map((column) => {
const { name, isVisible } = column;
if (!isVisible) {
return null;
}
if (name === 'status') {
return (
<SeriesStatusCell
key={name}
className={styles[name]}
monitored={monitored}
status={status}
component={VirtualTableRowCell}
/>
);
}
if (name === 'sortTitle') {
return (
<VirtualTableRowCell
key={name}
className={classNames(
styles[name],
showBanners && styles.banner,
showBanners && !hasGrowableColumns(columns) && styles.bannerGrow
)}
>
{showBanners ? (
<Link className={styles.link} to={`/series/${titleSlug}`}>
<SeriesBanner
className={styles.bannerImage}
images={images}
lazy={false}
overflow={true}
onError={onBannerLoadError}
onLoad={onBannerLoad}
/>
{hasBannerError && (
<div className={styles.overlayTitle}>{title}</div>
)}
</Link>
) : (
<SeriesTitleLink titleSlug={titleSlug} title={title} />
)}
</VirtualTableRowCell>
);
}
if (name === 'seriesType') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
{titleCase(seriesType)}
</VirtualTableRowCell>
);
}
if (name === 'network') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
{network}
</VirtualTableRowCell>
);
}
if (name === 'originalLanguage') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
{originalLanguage.name}
</VirtualTableRowCell>
);
}
if (name === 'qualityProfileId') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
{qualityProfile.name}
</VirtualTableRowCell>
);
}
if (name === 'nextAiring') {
return (
<RelativeDateCellConnector
key={name}
className={styles[name]}
date={nextAiring}
component={VirtualTableRowCell}
/>
);
}
if (name === 'previousAiring') {
return (
<RelativeDateCellConnector
key={name}
className={styles[name]}
date={previousAiring}
component={VirtualTableRowCell}
/>
);
}
if (name === 'added') {
return (
<RelativeDateCellConnector
key={name}
className={styles[name]}
date={added}
component={VirtualTableRowCell}
/>
);
}
if (name === 'seasonCount') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
{seasonCount}
</VirtualTableRowCell>
);
}
if (name === 'episodeProgress') {
const progress = episodeCount
? (episodeFileCount / episodeCount) * 100
: 100;
return (
<VirtualTableRowCell key={name} className={styles[name]}>
<ProgressBar
progress={progress}
kind={getProgressBarKind(status, monitored, progress)}
showText={true}
text={`${episodeFileCount} / ${episodeCount}`}
title={`${episodeFileCount} / ${episodeCount} (Total: ${totalEpisodeCount})`}
width={125}
/>
</VirtualTableRowCell>
);
}
if (name === 'latestSeason') {
if (!latestSeason) {
return <VirtualTableRowCell key={name} className={styles[name]} />;
}
const seasonStatistics = latestSeason.statistics || {};
const progress = seasonStatistics.episodeCount
? (seasonStatistics.episodeFileCount /
seasonStatistics.episodeCount) *
100
: 100;
return (
<VirtualTableRowCell key={name} className={styles[name]}>
<ProgressBar
progress={progress}
kind={getProgressBarKind(status, monitored, progress)}
showText={true}
text={`${seasonStatistics.episodeFileCount} / ${seasonStatistics.episodeCount}`}
title={`${seasonStatistics.episodeFileCount} / ${seasonStatistics.episodeCount} (Total: ${seasonStatistics.totalEpisodeCount})`}
width={125}
/>
</VirtualTableRowCell>
);
}
if (name === 'episodeCount') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
{totalEpisodeCount}
</VirtualTableRowCell>
);
}
if (name === 'year') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
{year}
</VirtualTableRowCell>
);
}
if (name === 'path') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
{path}
</VirtualTableRowCell>
);
}
if (name === 'sizeOnDisk') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
{formatBytes(sizeOnDisk)}
</VirtualTableRowCell>
);
}
if (name === 'genres') {
const joinedGenres = genres.join(', ');
return (
<VirtualTableRowCell key={name} className={styles[name]}>
<span title={joinedGenres}>{joinedGenres}</span>
</VirtualTableRowCell>
);
}
if (name === 'ratings') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
<HeartRating rating={ratings.value} />
</VirtualTableRowCell>
);
}
if (name === 'certification') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
{certification}
</VirtualTableRowCell>
);
}
if (name === 'releaseGroups') {
const joinedReleaseGroups = releaseGroups.join(', ');
const truncatedReleaseGroups =
releaseGroups.length > 3
? `${releaseGroups.slice(0, 3).join(', ')}...`
: joinedReleaseGroups;
return (
<VirtualTableRowCell key={name} className={styles[name]}>
<span title={joinedReleaseGroups}>{truncatedReleaseGroups}</span>
</VirtualTableRowCell>
);
}
if (name === 'tags') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
<TagListConnector tags={tags} />
</VirtualTableRowCell>
);
}
if (name === 'useSceneNumbering') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
<CheckInput
className={styles.checkInput}
name="useSceneNumbering"
value={useSceneNumbering}
isDisabled={true}
onChange={onUseSceneNumberingChange}
/>
</VirtualTableRowCell>
);
}
if (name === 'actions') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
<SpinnerIconButton
name={icons.REFRESH}
title="Refresh series"
isSpinning={isRefreshingSeries}
onPress={onRefreshPress}
/>
{showSearchAction ? (
<SpinnerIconButton
name={icons.SEARCH}
title="Search for monitored episodes"
isSpinning={isSearchingSeries}
onPress={onSearchPress}
/>
) : null}
<IconButton
name={icons.EDIT}
title="Edit Series"
onPress={onEditSeriesPress}
/>
</VirtualTableRowCell>
);
}
return null;
})}
<EditSeriesModalConnector
isOpen={isEditSeriesModalOpen}
seriesId={seriesId}
onModalClose={onEditSeriesModalClose}
onDeleteSeriesPress={onDeleteSeriesPress}
/>
<DeleteSeriesModal
isOpen={isDeleteSeriesModalOpen}
seriesId={seriesId}
onModalClose={onDeleteSeriesModalClose}
/>
</>
);
}
export default SeriesIndexRow;

6
frontend/src/Series/Index/Table/SeriesIndexTable.css
Unescape View File

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

127
frontend/src/Series/Index/Table/SeriesIndexTable.js
Unescape View File

@ -1,127 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import VirtualTable from 'Components/Table/VirtualTable';
import VirtualTableRow from 'Components/Table/VirtualTableRow';
import { sortDirections } from 'Helpers/Props';
import SeriesIndexItemConnector from 'Series/Index/SeriesIndexItemConnector';
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
import SeriesIndexHeaderConnector from './SeriesIndexHeaderConnector';
import SeriesIndexRow from './SeriesIndexRow';
import styles from './SeriesIndexTable.css';
class SeriesIndexTable extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
scrollIndex: null
};
}
componentDidUpdate(prevProps) {
const {
items,
jumpToCharacter
} = this.props;
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,
showBanners
} = this.props;
const series = items[rowIndex];
return (
<VirtualTableRow
key={key}
style={style}
>
<SeriesIndexItemConnector
key={series.id}
component={SeriesIndexRow}
columns={columns}
seriesId={series.id}
qualityProfileId={series.qualityProfileId}
showBanners={showBanners}
/>
</VirtualTableRow>
);
};
//
// Render
render() {
const {
items,
columns,
sortKey,
sortDirection,
showBanners,
isSmallScreen,
onSortPress,
scroller,
scrollTop
} = this.props;
return (
<VirtualTable
className={styles.tableContainer}
items={items}
scrollIndex={this.state.scrollIndex}
scrollTop={scrollTop}
scroller={scroller}
isSmallScreen={isSmallScreen}
rowHeight={showBanners ? 70 : 38}
overscanRowCount={2}
rowRenderer={this.rowRenderer}
header={
<SeriesIndexHeaderConnector
showBanners={showBanners}
columns={columns}
sortKey={sortKey}
sortDirection={sortDirection}
onSortPress={onSortPress}
/>
}
columns={columns}
/>
);
}
}
SeriesIndexTable.propTypes = {
items: PropTypes.arrayOf(PropTypes.object).isRequired,
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
sortKey: PropTypes.string,
sortDirection: PropTypes.oneOf(sortDirections.all),
showBanners: PropTypes.bool.isRequired,
jumpToCharacter: PropTypes.string,
scrollTop: PropTypes.number,
scroller: PropTypes.instanceOf(Element).isRequired,
isSmallScreen: PropTypes.bool.isRequired,
onSortPress: PropTypes.func.isRequired
};
export default SeriesIndexTable;

205
frontend/src/Series/Index/Table/SeriesIndexTable.tsx
Unescape View File

@ -0,0 +1,205 @@
import { throttle } from 'lodash';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
import { createSelector } from 'reselect';
import Scroller from 'Components/Scroller/Scroller';
import Column from 'Components/Table/Column';
import useMeasure from 'Helpers/Hooks/useMeasure';
import ScrollDirection from 'Helpers/Props/ScrollDirection';
import SortDirection from 'Helpers/Props/SortDirection';
import Series from 'Series/Series';
import dimensions from 'Styles/Variables/dimensions';
import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
import selectTableOptions from './selectTableOptions';
import SeriesIndexRow from './SeriesIndexRow';
import SeriesIndexTableHeader from './SeriesIndexTableHeader';
import styles from './SeriesIndexTable.css';
const bodyPadding = parseInt(dimensions.pageContentBodyPadding);
const bodyPaddingSmallScreen = parseInt(
dimensions.pageContentBodyPaddingSmallScreen
);
interface RowItemData {
items: Series[];
sortKey: string;
columns: Column[];
}
interface SeriesIndexTableProps {
items: Series[];
sortKey?: string;
sortDirection?: SortDirection;
jumpToCharacter?: string;
scrollTop?: number;
scrollerRef: React.MutableRefObject<HTMLElement>;
isSmallScreen: boolean;
}
const columnsSelector = createSelector(
(state) => state.seriesIndex.columns,
(columns) => columns
);
const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
index,
style,
data,
}) => {
const { items, sortKey, columns } = data;
if (index >= items.length) {
return null;
}
const series = items[index];
return (
<div
style={{
display: 'flex',
justifyContent: 'space-between',
...style,
}}
>
<SeriesIndexRow
seriesId={series.id}
sortKey={sortKey}
columns={columns}
/>
</div>
);
};
function getWindowScrollTopPosition() {
return document.documentElement.scrollTop || document.body.scrollTop || 0;
}
function SeriesIndexTable(props: SeriesIndexTableProps) {
const {
items,
sortKey,
sortDirection,
jumpToCharacter,
isSmallScreen,
scrollerRef,
} = props;
const columns = useSelector(columnsSelector);
const { showBanners } = useSelector(selectTableOptions);
const listRef: React.MutableRefObject<List> = useRef();
const [measureRef, bounds] = useMeasure();
const [size, setSize] = useState({ width: 0, height: 0 });
const rowHeight = useMemo(() => {
return showBanners ? 70 : 38;
}, [showBanners]);
useEffect(() => {
const current = scrollerRef.current as HTMLElement;
if (isSmallScreen) {
setSize({
width: window.innerWidth,
height: window.innerHeight,
});
return;
}
if (current) {
const width = current.clientWidth;
const padding =
(isSmallScreen ? bodyPaddingSmallScreen : bodyPadding) - 5;
setSize({
width: width - padding * 2,
height: window.innerHeight,
});
}
}, [isSmallScreen, scrollerRef, bounds]);
useEffect(() => {
const currentScrollListener = isSmallScreen ? window : scrollerRef.current;
const currentScrollerRef = scrollerRef.current;
const handleScroll = throttle(() => {
const { offsetTop = 0 } = currentScrollerRef;
const scrollTop =
(isSmallScreen
? getWindowScrollTopPosition()
: currentScrollerRef.scrollTop) - offsetTop;
listRef.current.scrollTo(scrollTop);
}, 10);
currentScrollListener.addEventListener('scroll', handleScroll);
return () => {
handleScroll.cancel();
if (currentScrollListener) {
currentScrollListener.removeEventListener('scroll', handleScroll);
}
};
}, [isSmallScreen, listRef, scrollerRef]);
useEffect(() => {
if (jumpToCharacter) {
const index = getIndexOfFirstCharacter(items, jumpToCharacter);
if (index != null) {
let scrollTop = index * rowHeight;
// If the offset is zero go to the top, otherwise offset
// by the approximate size of the header + padding (37 + 20).
if (scrollTop > 0) {
const offset = 57;
scrollTop += offset;
}
listRef.current.scrollTo(scrollTop);
scrollerRef.current.scrollTo(0, scrollTop);
}
}
}, [jumpToCharacter, rowHeight, items, scrollerRef, listRef]);
return (
<div ref={measureRef}>
<Scroller
className={styles.tableScroller}
scrollDirection={ScrollDirection.Horizontal}
>
<SeriesIndexTableHeader
showBanners={showBanners}
columns={columns}
sortKey={sortKey}
sortDirection={sortDirection}
/>
<List<RowItemData>
ref={listRef}
style={{
width: '100%',
height: '100%',
overflow: 'none',
}}
width={size.width}
height={size.height}
itemCount={items.length}
itemSize={rowHeight}
itemData={{
items,
sortKey,
columns,
}}
>
{Row}
</List>
</Scroller>
</div>
);
}
export default SeriesIndexTable;

29
frontend/src/Series/Index/Table/SeriesIndexTableConnector.js
Unescape View File

@ -1,29 +0,0 @@
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { setSeriesSort } from 'Store/Actions/seriesIndexActions';
import SeriesIndexTable from './SeriesIndexTable';
function createMapStateToProps() {
return createSelector(
(state) => state.app.dimensions,
(state) => state.seriesIndex.tableOptions,
(state) => state.seriesIndex.columns,
(dimensions, tableOptions, columns) => {
return {
isSmallScreen: dimensions.isSmallScreen,
showBanners: tableOptions.showBanners,
columns
};
}
);
}
function createMapDispatchToProps(dispatch, props) {
return {
onSortPress(sortKey) {
dispatch(setSeriesSort({ sortKey }));
}
};
}
export default connect(createMapStateToProps, createMapDispatchToProps)(SeriesIndexTable);

0
frontend/src/Series/Index/Table/SeriesIndexHeader.css → frontend/src/Series/Index/Table/SeriesIndexTableHeader.css
Unescape View File

99
frontend/src/Series/Index/Table/SeriesIndexTableHeader.tsx
Unescape View File

@ -0,0 +1,99 @@
import classNames from 'classnames';
import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { SelectActionType, useSelect } from 'App/SelectContext';
import IconButton from 'Components/Link/IconButton';
import Column from 'Components/Table/Column';
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
import { icons } from 'Helpers/Props';
import SortDirection from 'Helpers/Props/SortDirection';
import {
setSeriesSort,
setSeriesTableOption,
} from 'Store/Actions/seriesIndexActions';
import hasGrowableColumns from './hasGrowableColumns';
import SeriesIndexTableOptions from './SeriesIndexTableOptions';
import styles from './SeriesIndexTableHeader.css';
interface SeriesIndexTableHeaderProps {
showBanners: boolean;
columns: Column[];
sortKey?: string;
sortDirection?: SortDirection;
}
function SeriesIndexTableHeader(props: SeriesIndexTableHeaderProps) {
const { showBanners, columns, sortKey, sortDirection } = props;
const dispatch = useDispatch();
const onSortPress = useCallback(
(value) => {
dispatch(setSeriesSort({ sortKey: value }));
},
[dispatch]
);
const onTableOptionChange = useCallback(
(payload) => {
dispatch(setSeriesTableOption(payload));
},
[dispatch]
);
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}
>
<TableOptionsModalWrapper
columns={columns}
optionsComponent={SeriesIndexTableOptions}
onTableOptionChange={onTableOptionChange}
>
<IconButton name={icons.ADVANCED_SETTINGS} />
</TableOptionsModalWrapper>
</VirtualTableHeaderCell>
);
}
return (
<VirtualTableHeaderCell
key={name}
className={classNames(
styles[name],
name === 'sortTitle' && showBanners && styles.banner,
name === 'sortTitle' &&
showBanners &&
!hasGrowableColumns(columns) &&
styles.bannerGrow
)}
name={name}
sortKey={sortKey}
sortDirection={sortDirection}
isSortable={isSortable}
onSortPress={onSortPress}
>
{label}
</VirtualTableHeaderCell>
);
})}
</VirtualTableHeader>
);
}
export default SeriesIndexTableHeader;

100
frontend/src/Series/Index/Table/SeriesIndexTableOptions.js
Unescape View File

@ -1,100 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component, Fragment } from 'react';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import { inputTypes } from 'Helpers/Props';
class SeriesIndexTableOptions extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
showBanners: props.showBanners,
showSearchAction: props.showSearchAction
};
}
componentDidUpdate(prevProps) {
const {
showBanners,
showSearchAction
} = this.props;
if (
showBanners !== prevProps.showBanners ||
showSearchAction !== prevProps.showSearchAction
) {
this.setState({
showBanners,
showSearchAction
});
}
}
//
// Listeners
onTableOptionChange = ({ name, value }) => {
this.setState({
[name]: value
}, () => {
this.props.onTableOptionChange({
tableOptions: {
...this.state,
[name]: value
}
});
});
};
//
// Render
render() {
const {
showBanners,
showSearchAction
} = this.state;
return (
<Fragment>
<FormGroup>
<FormLabel>Show Banners</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showBanners"
value={showBanners}
helpText="Show banners instead of titles"
onChange={this.onTableOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Search</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showSearchAction"
value={showSearchAction}
helpText="Show search button on hover"
onChange={this.onTableOptionChange}
/>
</FormGroup>
</Fragment>
);
}
}
SeriesIndexTableOptions.propTypes = {
showBanners: PropTypes.bool.isRequired,
showSearchAction: PropTypes.bool.isRequired,
onTableOptionChange: PropTypes.func.isRequired
};
export default SeriesIndexTableOptions;

61
frontend/src/Series/Index/Table/SeriesIndexTableOptions.tsx
Unescape View File

@ -0,0 +1,61 @@
import React, { Fragment, useCallback } from 'react';
import { useSelector } from 'react-redux';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import { inputTypes } from 'Helpers/Props';
import selectTableOptions from './selectTableOptions';
interface SeriesIndexTableOptionsProps {
onTableOptionChange(...args: unknown[]): unknown;
}
function SeriesIndexTableOptions(props: SeriesIndexTableOptionsProps) {
const { onTableOptionChange } = props;
const tableOptions = useSelector(selectTableOptions);
const { showBanners, showSearchAction } = tableOptions;
const onTableOptionChangeWrapper = useCallback(
({ name, value }) => {
onTableOptionChange({
tableOptions: {
...tableOptions,
[name]: value,
},
});
},
[tableOptions, onTableOptionChange]
);
return (
<Fragment>
<FormGroup>
<FormLabel>Show Banners</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showBanners"
value={showBanners}
helpText="Show banners instead of titles"
onChange={onTableOptionChangeWrapper}
/>
</FormGroup>
<FormGroup>
<FormLabel>Show Search</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showSearchAction"
value={showSearchAction}
helpText="Show search button on hover"
onChange={onTableOptionChangeWrapper}
/>
</FormGroup>
</Fragment>
);
}
export default SeriesIndexTableOptions;

14
frontend/src/Series/Index/Table/SeriesIndexTableOptionsConnector.js
Unescape View File

@ -1,14 +0,0 @@
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import SeriesIndexTableOptions from './SeriesIndexTableOptions';
function createMapStateToProps() {
return createSelector(
(state) => state.seriesIndex.tableOptions,
(tableOptions) => {
return tableOptions;
}
);
}
export default connect(createMapStateToProps)(SeriesIndexTableOptions);

30
frontend/src/Series/Index/Table/SeriesStatusCell.js → frontend/src/Series/Index/Table/SeriesStatusCell.tsx
Unescape View File

@ -1,4 +1,3 @@
import PropTypes from 'prop-types';
import React from 'react';
import Icon from 'Components/Icon';
import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
@ -6,22 +5,26 @@ import { icons } from 'Helpers/Props';
import { getSeriesStatusDetails } from 'Series/SeriesStatus';
import styles from './SeriesStatusCell.css';
function SeriesStatusCell(props) {
interface SeriesStatusCellProps {
className: string;
monitored: boolean;
status: string;
component?: React.ElementType;
}
function SeriesStatusCell(props: SeriesStatusCellProps) {
const {
className,
monitored,
status,
component: Component,
component: Component = VirtualTableRowCell,
...otherProps
} = props;
const statusDetails = getSeriesStatusDetails(status);
return (
<Component
className={className}
{...otherProps}
>
<Component className={className} {...otherProps}>
<Icon
className={styles.statusIcon}
name={monitored ? icons.MONITORED : icons.UNMONITORED}
@ -32,22 +35,9 @@ function SeriesStatusCell(props) {
className={styles.statusIcon}
name={statusDetails.icon}
title={`${statusDetails.title}: ${statusDetails.message}`}
/>
</Component>
);
}
SeriesStatusCell.propTypes = {
className: PropTypes.string.isRequired,
monitored: PropTypes.bool.isRequired,
status: PropTypes.string.isRequired,
component: PropTypes.elementType
};
SeriesStatusCell.defaultProps = {
className: styles.status,
component: VirtualTableRowCell
};
export default SeriesStatusCell;

12
frontend/src/Series/Index/Table/hasGrowableColumns.js → frontend/src/Series/Index/Table/hasGrowableColumns.ts
Unescape View File

@ -1,16 +1,8 @@
const growableColumns = [
'network',
'qualityProfileId',
'path',
'tags'
];
const growableColumns = ['network', 'qualityProfileId', 'path', 'tags'];
export default function hasGrowableColumns(columns) {
return columns.some((column) => {
const {
name,
isVisible
} = column;
const { name, isVisible } = column;
return growableColumns.includes(name) && isVisible;
});

8
frontend/src/Series/Index/Table/selectTableOptions.ts
Unescape View File

@ -0,0 +1,8 @@
import { createSelector } from 'reselect';
const selectTableOptions = createSelector(
(state) => state.seriesIndex.tableOptions,
(tableOptions) => tableOptions
);
export default selectTableOptions;

51
frontend/src/Series/Index/createSeriesIndexItemSelector.ts
Unescape View File

@ -0,0 +1,51 @@
import { maxBy } from 'lodash';
import { createSelector } from 'reselect';
import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
import createExecutingCommandsSelector from 'Store/Selectors/createExecutingCommandsSelector';
import createSeriesQualityProfileSelector from 'Store/Selectors/createSeriesQualityProfileSelector';
import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
function createSeriesIndexItemSelector(seriesId: number) {
return createSelector(
createSeriesSelector(seriesId),
createSeriesQualityProfileSelector(seriesId),
createExecutingCommandsSelector(),
(series, qualityProfile, executingCommands) => {
// If a series is deleted this selector may fire before the parent
// selectors, which will result in an undefined series, if that happens
// we want to return early here and again in the render function to avoid
// trying to show a series that has no information available.
if (!series) {
return {};
}
const isRefreshingSeries = executingCommands.some((command) => {
return (
command.name === REFRESH_SERIES && command.body.seriesId === series.id
);
});
const isSearchingSeries = executingCommands.some((command) => {
return (
command.name === SERIES_SEARCH && command.body.seriesId === series.id
);
});
const latestSeason = maxBy(
series.seasons,
(season) => season.seasonNumber
);
return {
series,
qualityProfile,
latestSeason,
isRefreshingSeries,
isSearchingSeries,
};
}
);
}
export default createSeriesIndexItemSelector;

75
frontend/src/Series/Series.ts
Unescape View File

@ -0,0 +1,75 @@
import ModelBase from 'App/ModelBase';
export interface Image {
coverType: string;
url: string;
remoteUrl: string;
}
export interface Language {
id: number;
name: string;
}
export interface Statistics {
episodeCount: number;
episodeFileCount: number;
percentOfEpisodes: number;
previousAiring?: Date;
releaseGroups: string[];
sizeOnDisk: number;
totalEpisodeCount: number;
}
export interface Season {
monitored: boolean;
seasonNumber: number;
statistics: Statistics;
}
export interface Ratings {
votes: number;
value: number;
}
export interface AlternateTitle {
seasonNumber: number;
title: string;
}
interface Series extends ModelBase {
added: Date;
alternateTitles: AlternateTitle[];
cleanTitle: string;
ended: boolean;
firstAired: Date;
genres: string[];
images: Image[];
imdbId: string;
monitored: boolean;
network: string;
originalLanguage: Language;
overview: string;
path: string;
previousAiring: Date;
qualityProfileId: number;
ratings: Ratings;
rootFolderPath: string;
runtime: number;
seasonFolder: boolean;
seasons: Season[];
seriesType: string;
sortTitle: string;
statistics: Statistics;
status: string;
tags: number[];
title: string;
titleSlug: string;
tvdbId: number;
tvMazeId: number;
tvRageId: number;
useSceneNumbering: boolean;
year: number;
}
export default Series;

4
frontend/src/Series/SeriesBanner.js
Unescape View File

@ -15,6 +15,10 @@ function SeriesBanner(props) {
}
SeriesBanner.propTypes = {
...SeriesImage.propTypes,
coverType: PropTypes.string,
placeholder: PropTypes.string,
overflow: PropTypes.bool,
size: PropTypes.number.isRequired
};

4
frontend/src/Series/SeriesPoster.js
Unescape View File

@ -15,6 +15,10 @@ function SeriesPoster(props) {
}
SeriesPoster.propTypes = {
...SeriesImage.propTypes,
coverType: PropTypes.string,
placeholder: PropTypes.string,
overflow: PropTypes.bool,
size: PropTypes.number.isRequired
};

4
frontend/src/Store/Selectors/createSeriesQualityProfileSelector.js
Unescape View File

@ -1,10 +1,10 @@
import { createSelector } from 'reselect';
import createSeriesSelector from './createSeriesSelector';
function createSeriesQualityProfileSelector() {
function createSeriesQualityProfileSelector(seriesId) {
return createSelector(
(state) => state.settings.qualityProfiles.items,
createSeriesSelector(),
createSeriesSelector(seriesId),
(qualityProfiles, series = {}) => {
return qualityProfiles.find((profile) => {
return profile.id === series.qualityProfileId;

18
frontend/src/Store/Selectors/createSeriesSelector.js
Unescape View File

@ -1,12 +1,22 @@
import { createSelector } from 'reselect';
function createSeriesSelector() {
function createSeriesSelector(id) {
if (id == null) {
return createSelector(
(state, { seriesId }) => seriesId,
(state) => state.series.itemMap,
(state) => state.series.items,
(seriesId, itemMap, allSeries) => {
return allSeries[itemMap[seriesId]];
}
);
}
return createSelector(
(state, { seriesId }) => seriesId,
(state) => state.series.itemMap,
(state) => state.series.items,
(seriesId, itemMap, allSeries) => {
return allSeries[itemMap[seriesId]];
(itemMap, allSeries) => {
return allSeries[itemMap[id]];
}
);
}

4
frontend/src/Utilities/Array/getIndexOfFirstCharacter.js
Unescape View File

@ -1,7 +1,5 @@
import _ from 'lodash';
export default function getIndexOfFirstCharacter(items, character) {
return _.findIndex(items, (item) => {
return items.findIndex((item) => {
const firstCharacter = item.sortTitle.charAt(0);
if (character === '#') {

4
package.json
Unescape View File

@ -29,6 +29,7 @@
"@fortawesome/free-regular-svg-icons": "6.1.1",
"@fortawesome/free-solid-svg-icons": "6.1.1",
"@fortawesome/react-fontawesome": "0.1.18",
"@juggle/resize-observer": "3.4.0",
"@microsoft/signalr": "6.0.3",
"@sentry/browser": "6.19.7",
"@sentry/integrations": "6.19.7",
@ -75,7 +76,9 @@
"react-slider": "1.1.4",
"react-tabs": "3.2.2",
"react-text-truncate": "0.18.0",
"react-use-measure": "2.1.1",
"react-virtualized": "9.21.1",
"react-window": "1.8.8",
"redux": "4.2.0",
"redux-actions": "2.6.5",
"redux-batched-actions": "0.5.0",
@ -100,6 +103,7 @@
"@babel/preset-env": "7.18.0",
"@babel/preset-react": "7.17.12",
"@babel/preset-typescript": "7.18.6",
"@types/react-window": "1.8.5",
"@typescript-eslint/eslint-plugin": "5.48.1",
"@typescript-eslint/parser": "5.48.0",
"autoprefixer": "10.4.7",

37
yarn.lock
Unescape View File

@ -1270,6 +1270,11 @@
"@jridgewell/resolve-uri" "3.1.0"
"@jridgewell/sourcemap-codec" "1.4.14"
"@juggle/resize-observer@3.4.0":
version "3.4.0"
resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
"@microsoft/signalr@6.0.3":
version "6.0.3"
resolved "https://registry.yarnpkg.com/@microsoft/signalr/-/signalr-6.0.3.tgz#9904efd48cd488e3c1c80930ff9fbb3c9f55895d"
@ -1539,6 +1544,13 @@
hoist-non-react-statics "^3.3.0"
redux "^4.0.0"
"@types/react-window@1.8.5":
version "1.8.5"
resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@18.0.26":
version "18.0.26"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917"
@ -2749,6 +2761,11 @@ cuint@^0.2.2:
resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
integrity sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==
debounce@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
debug@^2.1.3, debug@^2.6.8, debug@^2.6.9:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@ -4790,6 +4807,11 @@ memfs@^3.4.1:
dependencies:
fs-monkey "^1.0.3"
"memoize-one@>=3.1.1 <6":
version "5.2.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
meow@^9.0.0:
version "9.0.0"
resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@ -5912,6 +5934,13 @@ react-themeable@^1.1.0:
dependencies:
object-assign "^3.0.0"
react-use-measure@2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"
integrity sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==
dependencies:
debounce "^1.2.1"
react-virtualized@9.21.1:
version "9.21.1"
resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.1.tgz#4dbbf8f0a1420e2de3abf28fbb77120815277b3a"
@ -5925,6 +5954,14 @@ react-virtualized@9.21.1:
prop-types "^15.6.0"
react-lifecycles-compat "^3.0.4"
react-window@1.8.8:
version "1.8.8"
resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.8.tgz#1b52919f009ddf91970cbdb2050a6c7be44df243"
integrity sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==
dependencies:
"@babel/runtime" "^7.0.0"
memoize-one ">=3.1.1 <6"
react@17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"

Write Preview
Loading…
Cancel
Save