diff --git a/frontend/src/Author/Index/AuthorIndex.js b/frontend/src/Author/Index/AuthorIndex.js index d0d0b59e8..3d89c4872 100644 --- a/frontend/src/Author/Index/AuthorIndex.js +++ b/frontend/src/Author/Index/AuthorIndex.js @@ -16,8 +16,6 @@ import getErrorMessage from 'Utilities/Object/getErrorMessage'; import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder'; import translate from 'Utilities/String/translate'; import AuthorIndexFooterConnector from './AuthorIndexFooterConnector'; -import AuthorIndexBannersConnector from './Banners/AuthorIndexBannersConnector'; -import AuthorIndexBannerOptionsModal from './Banners/Options/AuthorIndexBannerOptionsModal'; import AuthorIndexFilterMenu from './Menus/AuthorIndexFilterMenu'; import AuthorIndexSortMenu from './Menus/AuthorIndexSortMenu'; import AuthorIndexViewMenu from './Menus/AuthorIndexViewMenu'; @@ -34,10 +32,6 @@ function getViewComponent(view) { return AuthorIndexPostersConnector; } - if (view === 'banners') { - return AuthorIndexBannersConnector; - } - if (view === 'overview') { return AuthorIndexOverviewsConnector; } @@ -58,7 +52,6 @@ class AuthorIndex extends Component { jumpBarItems: { order: [] }, jumpToCharacter: null, isPosterOptionsModalOpen: false, - isBannerOptionsModalOpen: false, isOverviewOptionsModalOpen: false }; } @@ -148,14 +141,6 @@ class AuthorIndex extends Component { this.setState({ isPosterOptionsModalOpen: false }); } - onBannerOptionsPress = () => { - this.setState({ isBannerOptionsModalOpen: true }); - } - - onBannerOptionsModalClose = () => { - this.setState({ isBannerOptionsModalOpen: false }); - } - onOverviewOptionsPress = () => { this.setState({ isOverviewOptionsModalOpen: true }); } @@ -201,7 +186,6 @@ class AuthorIndex extends Component { jumpBarItems, jumpToCharacter, isPosterOptionsModalOpen, - isBannerOptionsModalOpen, isOverviewOptionsModalOpen } = this.state; @@ -261,17 +245,6 @@ class AuthorIndex extends Component { null } - { - view === 'banners' ? - : - null - } - { view === 'overview' ? - - { - this.setState({ isEditAuthorModalOpen: true }); - } - - onEditAuthorModalClose = () => { - this.setState({ isEditAuthorModalOpen: false }); - } - - onDeleteAuthorPress = () => { - this.setState({ - isEditAuthorModalOpen: false, - isDeleteAuthorModalOpen: true - }); - } - - onDeleteAuthorModalClose = () => { - this.setState({ isDeleteAuthorModalOpen: false }); - } - - // - // Render - - render() { - const { - id, - authorName, - monitored, - status, - titleSlug, - nextAiring, - statistics, - images, - bannerWidth, - bannerHeight, - detailedProgressBar, - showTitle, - showMonitored, - showQualityProfile, - showSearchAction, - qualityProfile, - showRelativeDates, - shortDateFormat, - timeFormat, - isRefreshingAuthor, - isSearchingAuthor, - onRefreshAuthorPress, - onSearchPress, - ...otherProps - } = this.props; - - const { - bookCount, - sizeOnDisk, - bookFileCount, - totalBookCount - } = statistics; - - const { - isEditAuthorModalOpen, - isDeleteAuthorModalOpen - } = this.state; - - const link = `/author/${titleSlug}`; - - const elementStyle = { - width: `${bannerWidth}px`, - height: `${bannerHeight}px` - }; - - return ( -
-
-
- - - { - status === 'ended' && -
- } - - - - -
- - - - { - showTitle && -
- {authorName} -
- } - - { - showMonitored && -
- {monitored ? 'Monitored' : 'Unmonitored'} -
- } - - { - showQualityProfile && -
- {qualityProfile.name} -
- } - { - nextAiring && -
- { - getRelativeDate( - nextAiring, - shortDateFormat, - showRelativeDates, - { - timeFormat, - timeForToday: true - } - ) - } -
- } - - - - - - -
-
- ); - } -} - -AuthorIndexBanner.propTypes = { - id: PropTypes.number.isRequired, - authorName: 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, - bannerWidth: PropTypes.number.isRequired, - bannerHeight: 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, - isRefreshingAuthor: PropTypes.bool.isRequired, - isSearchingAuthor: PropTypes.bool.isRequired, - onRefreshAuthorPress: PropTypes.func.isRequired, - onSearchPress: PropTypes.func.isRequired -}; - -AuthorIndexBanner.defaultProps = { - statistics: { - bookCount: 0, - bookFileCount: 0, - totalBookCount: 0 - } -}; - -export default AuthorIndexBanner; diff --git a/frontend/src/Author/Index/Banners/AuthorIndexBannerInfo.css b/frontend/src/Author/Index/Banners/AuthorIndexBannerInfo.css deleted file mode 100644 index aab27d827..000000000 --- a/frontend/src/Author/Index/Banners/AuthorIndexBannerInfo.css +++ /dev/null @@ -1,5 +0,0 @@ -.info { - background-color: #fafbfc; - text-align: center; - font-size: $smallFontSize; -} diff --git a/frontend/src/Author/Index/Banners/AuthorIndexBannerInfo.js b/frontend/src/Author/Index/Banners/AuthorIndexBannerInfo.js deleted file mode 100644 index c989a14f1..000000000 --- a/frontend/src/Author/Index/Banners/AuthorIndexBannerInfo.js +++ /dev/null @@ -1,115 +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 './AuthorIndexBannerInfo.css'; - -function AuthorIndexBannerInfo(props) { - const { - qualityProfile, - showQualityProfile, - previousAiring, - added, - bookCount, - path, - sizeOnDisk, - sortKey, - showRelativeDates, - shortDateFormat, - timeFormat - } = props; - - if (sortKey === 'qualityProfileId' && !showQualityProfile) { - return ( -
- {qualityProfile.name} -
- ); - } - - if (sortKey === 'previousAiring' && previousAiring) { - return ( -
- { - getRelativeDate( - previousAiring, - shortDateFormat, - showRelativeDates, - { - timeFormat, - timeForToday: true - } - ) - } -
- ); - } - - if (sortKey === 'added' && added) { - const addedDate = getRelativeDate( - added, - shortDateFormat, - showRelativeDates, - { - timeFormat, - timeForToday: false - } - ); - - return ( -
- {`Added ${addedDate}`} -
- ); - } - - if (sortKey === 'bookCount') { - let books = '1 book'; - - if (bookCount === 0) { - books = 'No books'; - } else if (bookCount > 1) { - books = `${bookCount} books`; - } - - return ( -
- {books} -
- ); - } - - if (sortKey === 'path') { - return ( -
- {path} -
- ); - } - - if (sortKey === 'sizeOnDisk') { - return ( -
- {formatBytes(sizeOnDisk)} -
- ); - } - - return null; -} - -AuthorIndexBannerInfo.propTypes = { - qualityProfile: PropTypes.object.isRequired, - showQualityProfile: PropTypes.bool.isRequired, - previousAiring: PropTypes.string, - added: PropTypes.string, - bookCount: 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 AuthorIndexBannerInfo; diff --git a/frontend/src/Author/Index/Banners/AuthorIndexBanners.css b/frontend/src/Author/Index/Banners/AuthorIndexBanners.css deleted file mode 100644 index 9c6520fb5..000000000 --- a/frontend/src/Author/Index/Banners/AuthorIndexBanners.css +++ /dev/null @@ -1,3 +0,0 @@ -.grid { - flex: 1 0 auto; -} diff --git a/frontend/src/Author/Index/Banners/AuthorIndexBanners.js b/frontend/src/Author/Index/Banners/AuthorIndexBanners.js deleted file mode 100644 index 2b063454d..000000000 --- a/frontend/src/Author/Index/Banners/AuthorIndexBanners.js +++ /dev/null @@ -1,326 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; -import { Grid, WindowScroller } from 'react-virtualized'; -import AuthorIndexItemConnector from 'Author/Index/AuthorIndexItemConnector'; -import Measure from 'Components/Measure'; -import dimensions from 'Styles/Variables/dimensions'; -import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter'; -import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder'; -import AuthorIndexBanner from './AuthorIndexBanner'; -import styles from './AuthorIndexBanners.css'; - -// container dimensions -const columnPadding = parseInt(dimensions.authorIndexColumnPadding); -const columnPaddingSmallScreen = parseInt(dimensions.authorIndexColumnPaddingSmallScreen); -const progressBarHeight = parseInt(dimensions.progressBarSmallHeight); -const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight); - -const additionalColumnCount = { - small: 3, - medium: 2, - large: 1 -}; - -function calculateColumnWidth(width, bannerSize, isSmallScreen) { - const maxiumColumnWidth = isSmallScreen ? 344 : 364; - const columns = Math.floor(width / maxiumColumnWidth); - const remainder = width % maxiumColumnWidth; - - if (remainder === 0 && bannerSize === 'large') { - return maxiumColumnWidth; - } - - return Math.floor(width / (columns + additionalColumnCount[bannerSize])); -} - -function calculateRowHeight(bannerHeight, sortKey, isSmallScreen, bannerOptions) { - const { - detailedProgressBar, - showTitle, - showMonitored, - showQualityProfile - } = bannerOptions; - - const nextAiringHeight = 19; - - const heights = [ - bannerHeight, - 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 '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 calculateHeight(bannerWidth) { - return Math.ceil((88/476) * bannerWidth); -} - -class AuthorIndexBanners extends Component { - - // - // Lifecycle - - constructor(props, context) { - super(props, context); - - this.state = { - width: 0, - columnWidth: 364, - columnCount: 1, - bannerWidth: 476, - bannerHeight: 88, - rowHeight: calculateRowHeight(88, null, props.isSmallScreen, {}), - scrollRestored: false - }; - - this._isInitialized = false; - this._grid = null; - } - - componentDidUpdate(prevProps, prevState) { - const { - items, - sortKey, - bannerOptions, - jumpToCharacter, - scrollTop - } = this.props; - - const { - width, - columnWidth, - columnCount, - rowHeight, - scrollRestored - } = this.state; - - if (prevProps.sortKey !== sortKey || - prevProps.bannerOptions !== bannerOptions) { - this.calculateGrid(); - } - - 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, - bannerOptions - } = this.props; - - const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding; - const columnWidth = calculateColumnWidth(width, bannerOptions.size, isSmallScreen); - const columnCount = Math.max(Math.floor(width / columnWidth), 1); - const bannerWidth = columnWidth - padding; - const bannerHeight = calculateHeight(bannerWidth); - const rowHeight = calculateRowHeight(bannerHeight, sortKey, isSmallScreen, bannerOptions); - - this.setState({ - width, - columnWidth, - columnCount, - bannerWidth, - bannerHeight, - rowHeight - }); - } - - cellRenderer = ({ key, rowIndex, columnIndex, style }) => { - const { - items, - sortKey, - bannerOptions, - showRelativeDates, - shortDateFormat, - timeFormat - } = this.props; - - const { - bannerWidth, - bannerHeight, - columnCount - } = this.state; - - const { - detailedProgressBar, - showTitle, - showMonitored, - showQualityProfile - } = bannerOptions; - - const author = items[rowIndex * columnCount + columnIndex]; - - if (!author) { - return null; - } - - return ( -
- -
- ); - } - - // - // Listeners - - onMeasure = ({ width }) => { - this.calculateGrid(width, this.props.isSmallScreen); - } - - // - // Render - - render() { - const { - items, - isSmallScreen, - scroller - } = this.props; - - const { - width, - columnWidth, - columnCount, - rowHeight - } = this.state; - - const rowCount = Math.ceil(items.length / columnCount); - - return ( - - - {({ height, registerChild, onChildScroll, scrollTop }) => { - if (!height) { - return
; - } - - return ( - - ); - } - } - - - ); - } -} - -AuthorIndexBanners.propTypes = { - items: PropTypes.arrayOf(PropTypes.object).isRequired, - sortKey: PropTypes.string, - bannerOptions: 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 AuthorIndexBanners; diff --git a/frontend/src/Author/Index/Banners/AuthorIndexBannersConnector.js b/frontend/src/Author/Index/Banners/AuthorIndexBannersConnector.js deleted file mode 100644 index 85a306e87..000000000 --- a/frontend/src/Author/Index/Banners/AuthorIndexBannersConnector.js +++ /dev/null @@ -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 AuthorIndexBanners from './AuthorIndexBanners'; - -function createMapStateToProps() { - return createSelector( - (state) => state.authorIndex.bannerOptions, - createUISettingsSelector(), - createDimensionsSelector(), - (bannerOptions, uiSettings, dimensions) => { - return { - bannerOptions, - showRelativeDates: uiSettings.showRelativeDates, - shortDateFormat: uiSettings.shortDateFormat, - timeFormat: uiSettings.timeFormat, - isSmallScreen: dimensions.isSmallScreen - }; - } - ); -} - -export default connect(createMapStateToProps)(AuthorIndexBanners); diff --git a/frontend/src/Author/Index/Banners/Options/AuthorIndexBannerOptionsModal.js b/frontend/src/Author/Index/Banners/Options/AuthorIndexBannerOptionsModal.js deleted file mode 100644 index 0f0b268cf..000000000 --- a/frontend/src/Author/Index/Banners/Options/AuthorIndexBannerOptionsModal.js +++ /dev/null @@ -1,25 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import Modal from 'Components/Modal/Modal'; -import AuthorIndexBannerOptionsModalContentConnector from './AuthorIndexBannerOptionsModalContentConnector'; - -function AuthorIndexBannerOptionsModal({ isOpen, onModalClose, ...otherProps }) { - return ( - - - - ); -} - -AuthorIndexBannerOptionsModal.propTypes = { - isOpen: PropTypes.bool.isRequired, - onModalClose: PropTypes.func.isRequired -}; - -export default AuthorIndexBannerOptionsModal; diff --git a/frontend/src/Author/Index/Banners/Options/AuthorIndexBannerOptionsModalContent.js b/frontend/src/Author/Index/Banners/Options/AuthorIndexBannerOptionsModalContent.js deleted file mode 100644 index 83e6a4ff0..000000000 --- a/frontend/src/Author/Index/Banners/Options/AuthorIndexBannerOptionsModalContent.js +++ /dev/null @@ -1,226 +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'; -import translate from 'Utilities/String/translate'; - -const bannerSizeOptions = [ - { key: 'small', value: 'Small' }, - { key: 'medium', value: 'Medium' }, - { key: 'large', value: 'Large' } -]; - -class AuthorIndexBannerOptionsModalContent 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 - - onChangeBannerOption = ({ name, value }) => { - this.setState({ - [name]: value - }, () => { - this.props.onChangeBannerOption({ [name]: value }); - }); - } - - // - // Render - - render() { - const { - onModalClose - } = this.props; - - const { - detailedProgressBar, - size, - showTitle, - showMonitored, - showQualityProfile, - showSearchAction - } = this.state; - - return ( - - - Options - - - -
- - - {translate('Size')} - - - - - - - - {translate('DetailedProgressBar')} - - - - - - - - {translate('ShowName')} - - - - - - - - {translate('ShowMonitored')} - - - - - - - - {translate('ShowQualityProfile')} - - - - - - - - {translate('ShowSearch')} - - - - -
-
- - - - -
- ); - } -} - -AuthorIndexBannerOptionsModalContent.propTypes = { - size: PropTypes.string.isRequired, - showTitle: PropTypes.bool.isRequired, - showQualityProfile: PropTypes.bool.isRequired, - detailedProgressBar: PropTypes.bool.isRequired, - showSearchAction: PropTypes.bool.isRequired, - onChangeBannerOption: PropTypes.func.isRequired, - showMonitored: PropTypes.bool.isRequired, - onModalClose: PropTypes.func.isRequired -}; - -export default AuthorIndexBannerOptionsModalContent; diff --git a/frontend/src/Author/Index/Banners/Options/AuthorIndexBannerOptionsModalContentConnector.js b/frontend/src/Author/Index/Banners/Options/AuthorIndexBannerOptionsModalContentConnector.js deleted file mode 100644 index ec4f1bfce..000000000 --- a/frontend/src/Author/Index/Banners/Options/AuthorIndexBannerOptionsModalContentConnector.js +++ /dev/null @@ -1,23 +0,0 @@ -import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; -import { setAuthorBannerOption } from 'Store/Actions/authorIndexActions'; -import AuthorIndexBannerOptionsModalContent from './AuthorIndexBannerOptionsModalContent'; - -function createMapStateToProps() { - return createSelector( - (state) => state.authorIndex, - (authorIndex) => { - return authorIndex.bannerOptions; - } - ); -} - -function createMapDispatchToProps(dispatch, props) { - return { - onChangeBannerOption(payload) { - dispatch(setAuthorBannerOption(payload)); - } - }; -} - -export default connect(createMapStateToProps, createMapDispatchToProps)(AuthorIndexBannerOptionsModalContent); diff --git a/frontend/src/Author/Index/Menus/AuthorIndexViewMenu.js b/frontend/src/Author/Index/Menus/AuthorIndexViewMenu.js index 2eeb1a0f8..54e8f987c 100644 --- a/frontend/src/Author/Index/Menus/AuthorIndexViewMenu.js +++ b/frontend/src/Author/Index/Menus/AuthorIndexViewMenu.js @@ -34,14 +34,6 @@ function AuthorIndexViewMenu(props) { Posters - - Banners - -