Renames in Frontend

frontend/src/Author/Index/AuthorIndex.css

@@ -0,0 +1,72 @@
+.pageContentBodyWrapper {
+  display: flex;
+  flex: 1 0 1px;
+  overflow: hidden;
+}
+
+.errorMessage {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 20px;
+}
+
+.contentBody {
+  composes: contentBody from '~Components/Page/PageContentBody.css';
+
+  display: flex;
+  flex-direction: column;
+}
+
+.postersInnerContentBody {
+  composes: innerContentBody from '~Components/Page/PageContentBody.css';
+
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  /* 5px less padding than normal to handle poster's 5px margin */
+  padding: calc($pageContentBodyPadding - 5px);
+}
+
+.bannersInnerContentBody {
+  composes: innerContentBody from '~Components/Page/PageContentBody.css';
+
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  /* 5px less padding than normal to handle poster's 5px margin */
+  padding: calc($pageContentBodyPadding - 5px);
+}
+
+.tableInnerContentBody {
+  composes: innerContentBody from '~Components/Page/PageContentBody.css';
+
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.contentBodyContainer {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .pageContentBodyWrapper {
+    flex-basis: auto;
+  }
+
+  .contentBody {
+    flex-basis: 1px;
+  }
+
+  .postersInnerContentBody {
+    padding: calc($pageContentBodyPaddingSmallScreen - 5px);
+  }
+
+  .bannersInnerContentBody {
+    padding: calc($pageContentBodyPaddingSmallScreen - 5px);
+  }
+}

frontend/src/Author/Index/AuthorIndex.js

@@ -0,0 +1,410 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import { align, icons, sortDirections } from 'Helpers/Props';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageJumpBar from 'Components/Page/PageJumpBar';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import NoAuthor from 'Author/NoAuthor';
+import AuthorIndexTableConnector from './Table/AuthorIndexTableConnector';
+import AuthorIndexTableOptionsConnector from './Table/AuthorIndexTableOptionsConnector';
+import AuthorIndexPosterOptionsModal from './Posters/Options/AuthorIndexPosterOptionsModal';
+import AuthorIndexPostersConnector from './Posters/AuthorIndexPostersConnector';
+import AuthorIndexBannerOptionsModal from './Banners/Options/AuthorIndexBannerOptionsModal';
+import AuthorIndexBannersConnector from './Banners/AuthorIndexBannersConnector';
+import AuthorIndexOverviewOptionsModal from './Overview/Options/AuthorIndexOverviewOptionsModal';
+import AuthorIndexOverviewsConnector from './Overview/AuthorIndexOverviewsConnector';
+import AuthorIndexFooterConnector from './AuthorIndexFooterConnector';
+import AuthorIndexFilterMenu from './Menus/AuthorIndexFilterMenu';
+import AuthorIndexSortMenu from './Menus/AuthorIndexSortMenu';
+import AuthorIndexViewMenu from './Menus/AuthorIndexViewMenu';
+import styles from './AuthorIndex.css';
+
+function getViewComponent(view) {
+  if (view === 'posters') {
+    return AuthorIndexPostersConnector;
+  }
+
+  if (view === 'banners') {
+    return AuthorIndexBannersConnector;
+  }
+
+  if (view === 'overview') {
+    return AuthorIndexOverviewsConnector;
+  }
+
+  return AuthorIndexTableConnector;
+}
+
+class AuthorIndex extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      scroller: null,
+      jumpBarItems: { order: [] },
+      jumpToCharacter: null,
+      isPosterOptionsModalOpen: false,
+      isBannerOptionsModalOpen: 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 sortName
+    if (sortKey !== 'sortName') {
+      this.setState({ jumpBarItems: { order: [] } });
+      return;
+    }
+
+    const characters = _.reduce(items, (acc, item) => {
+      let char = item.sortName.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 });
+  }
+
+  onBannerOptionsPress = () => {
+    this.setState({ isBannerOptionsModalOpen: true });
+  }
+
+  onBannerOptionsModalClose = () => {
+    this.setState({ isBannerOptionsModalOpen: 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,
+      isRefreshingAuthor,
+      isRssSyncExecuting,
+      onScroll,
+      onSortSelect,
+      onFilterSelect,
+      onViewSelect,
+      onRefreshAuthorPress,
+      onRssSyncPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      scroller,
+      jumpBarItems,
+      jumpToCharacter,
+      isPosterOptionsModalOpen,
+      isBannerOptionsModalOpen,
+      isOverviewOptionsModalOpen
+    } = this.state;
+
+    const ViewComponent = getViewComponent(view);
+    const isLoaded = !!(!error && isPopulated && items.length && scroller);
+    const hasNoAuthor = !totalItems;
+
+    return (
+      <PageContent>
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="Update all"
+              iconName={icons.REFRESH}
+              spinningName={icons.REFRESH}
+              isSpinning={isRefreshingAuthor}
+              onPress={onRefreshAuthorPress}
+            />
+
+            <PageToolbarButton
+              label="RSS Sync"
+              iconName={icons.RSS}
+              isSpinning={isRssSyncExecuting}
+              isDisabled={hasNoAuthor}
+              onPress={onRssSyncPress}
+            />
+
+          </PageToolbarSection>
+
+          <PageToolbarSection
+            alignContent={align.RIGHT}
+            collapseButtons={false}
+          >
+            {
+              view === 'table' ?
+                <TableOptionsModalWrapper
+                  {...otherProps}
+                  columns={columns}
+                  optionsComponent={AuthorIndexTableOptionsConnector}
+                >
+                  <PageToolbarButton
+                    label="Options"
+                    iconName={icons.TABLE}
+                  />
+                </TableOptionsModalWrapper> :
+                null
+            }
+
+            {
+              view === 'posters' ?
+                <PageToolbarButton
+                  label="Options"
+                  iconName={icons.POSTER}
+                  isDisabled={hasNoAuthor}
+                  onPress={this.onPosterOptionsPress}
+                /> :
+                null
+            }
+
+            {
+              view === 'banners' ?
+                <PageToolbarButton
+                  label="Options"
+                  iconName={icons.POSTER}
+                  isDisabled={hasNoAuthor}
+                  onPress={this.onBannerOptionsPress}
+                /> :
+                null
+            }
+
+            {
+              view === 'overview' ?
+                <PageToolbarButton
+                  label="Options"
+                  iconName={icons.OVERVIEW}
+                  isDisabled={hasNoAuthor}
+                  onPress={this.onOverviewOptionsPress}
+                /> :
+                null
+            }
+
+            {
+              (view === 'posters' || view === 'banners' || view === 'overview') &&
+
+                <PageToolbarSeparator />
+            }
+
+            <AuthorIndexViewMenu
+              view={view}
+              isDisabled={hasNoAuthor}
+              onViewSelect={onViewSelect}
+            />
+
+            <AuthorIndexSortMenu
+              sortKey={sortKey}
+              sortDirection={sortDirection}
+              isDisabled={hasNoAuthor}
+              onSortSelect={onSortSelect}
+            />
+
+            <AuthorIndexFilterMenu
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={customFilters}
+              isDisabled={hasNoAuthor}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <div className={styles.pageContentBodyWrapper}>
+          <PageContentBodyConnector
+            registerScroller={this.setScrollerRef}
+            className={styles.contentBody}
+            innerClassName={styles[`${view}InnerContentBody`]}
+            onScroll={onScroll}
+          >
+            {
+              isFetching && !isPopulated &&
+                <LoadingIndicator />
+            }
+
+            {
+              !isFetching && !!error &&
+                <div className={styles.errorMessage}>
+                  {getErrorMessage(error, 'Failed to load author from API')}
+                </div>
+            }
+
+            {
+              isLoaded &&
+                <div className={styles.contentBodyContainer}>
+                  <ViewComponent
+                    scroller={scroller}
+                    items={items}
+                    filters={filters}
+                    sortKey={sortKey}
+                    sortDirection={sortDirection}
+                    jumpToCharacter={jumpToCharacter}
+                    {...otherProps}
+                  />
+
+                  <AuthorIndexFooterConnector />
+                </div>
+            }
+
+            {
+              !error && isPopulated && !items.length &&
+                <NoAuthor totalItems={totalItems} />
+            }
+          </PageContentBodyConnector>
+
+          {
+            isLoaded && !!jumpBarItems.order.length &&
+              <PageJumpBar
+                items={jumpBarItems}
+                onItemPress={this.onJumpBarItemPress}
+              />
+          }
+        </div>
+
+        <AuthorIndexPosterOptionsModal
+          isOpen={isPosterOptionsModalOpen}
+          onModalClose={this.onPosterOptionsModalClose}
+        />
+
+        <AuthorIndexBannerOptionsModal
+          isOpen={isBannerOptionsModalOpen}
+          onModalClose={this.onBannerOptionsModalClose}
+
+        />
+
+        <AuthorIndexOverviewOptionsModal
+          isOpen={isOverviewOptionsModalOpen}
+          onModalClose={this.onOverviewOptionsModalClose}
+
+        />
+      </PageContent>
+    );
+  }
+}
+
+AuthorIndex.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,
+  isRefreshingAuthor: PropTypes.bool.isRequired,
+  isRssSyncExecuting: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onSortSelect: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired,
+  onViewSelect: PropTypes.func.isRequired,
+  onRefreshAuthorPress: PropTypes.func.isRequired,
+  onRssSyncPress: PropTypes.func.isRequired,
+  onScroll: PropTypes.func.isRequired
+};
+
+export default AuthorIndex;

frontend/src/Author/Index/AuthorIndexConnector.js

@@ -0,0 +1,107 @@
+/* eslint max-params: 0 */
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createAuthorClientSideCollectionItemsSelector
+  from 'Store/Selectors/createAuthorClientSideCollectionItemsSelector';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import scrollPositions from 'Store/scrollPositions';
+import { setAuthorFilter, setAuthorSort, setAuthorTableOption, setAuthorView } from 'Store/Actions/authorIndexActions';
+import { executeCommand } from 'Store/Actions/commandActions';
+import * as commandNames from 'Commands/commandNames';
+import withScrollPosition from 'Components/withScrollPosition';
+import AuthorIndex from './AuthorIndex';
+
+function createMapStateToProps() {
+  return createSelector(
+    createAuthorClientSideCollectionItemsSelector('authorIndex'),
+    createCommandExecutingSelector(commandNames.REFRESH_AUTHOR),
+    createCommandExecutingSelector(commandNames.RSS_SYNC),
+    createDimensionsSelector(),
+    (
+      author,
+      isRefreshingAuthor,
+      isRssSyncExecuting,
+      dimensionsState
+    ) => {
+      return {
+        ...author,
+        isRefreshingAuthor,
+        isRssSyncExecuting,
+        isSmallScreen: dimensionsState.isSmallScreen
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onTableOptionChange(payload) {
+      dispatch(setAuthorTableOption(payload));
+    },
+
+    onSortSelect(sortKey) {
+      dispatch(setAuthorSort({ sortKey }));
+    },
+
+    onFilterSelect(selectedFilterKey) {
+      dispatch(setAuthorFilter({ selectedFilterKey }));
+    },
+
+    dispatchSetAuthorView(view) {
+      dispatch(setAuthorView({ view }));
+    },
+
+    onRefreshAuthorPress() {
+      dispatch(executeCommand({
+        name: commandNames.REFRESH_AUTHOR
+      }));
+    },
+
+    onRssSyncPress() {
+      dispatch(executeCommand({
+        name: commandNames.RSS_SYNC
+      }));
+    }
+  };
+}
+
+class AuthorIndexConnector extends Component {
+
+  //
+  // Listeners
+
+  onViewSelect = (view) => {
+    this.props.dispatchSetAuthorView(view);
+  }
+
+  onScroll = ({ scrollTop }) => {
+    scrollPositions.authorIndex = scrollTop;
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AuthorIndex
+        {...this.props}
+        onViewSelect={this.onViewSelect}
+        onScroll={this.onScroll}
+      />
+    );
+  }
+}
+
+AuthorIndexConnector.propTypes = {
+  isSmallScreen: PropTypes.bool.isRequired,
+  view: PropTypes.string.isRequired,
+  dispatchSetAuthorView: PropTypes.func.isRequired
+};
+
+export default withScrollPosition(
+  connect(createMapStateToProps, createMapDispatchToProps)(AuthorIndexConnector),
+  'authorIndex'
+);

frontend/src/Author/Index/AuthorIndexFilterModalConnector.js

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

frontend/src/Author/Index/AuthorIndexFooter.css

@@ -0,0 +1,74 @@
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+  font-size: $smallFontSize;
+}
+
+.legendItem {
+  display: flex;
+  margin-bottom: 4px;
+  line-height: 16px;
+}
+
+.legendItemColor {
+  margin-right: 8px;
+  width: 30px;
+  height: 16px;
+  border-radius: 4px;
+}
+
+.continuing {
+  composes: legendItemColor;
+
+  background-color: $primaryColor;
+}
+
+.ended {
+  composes: legendItemColor;
+
+  background-color: $successColor;
+}
+
+.missingMonitored {
+  composes: legendItemColor;
+
+  background-color: $dangerColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
+  }
+}
+
+.missingUnmonitored {
+  composes: legendItemColor;
+
+  background-color: $warningColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
+  }
+}
+
+.statistics {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+@media (max-width: $breakpointLarge) {
+  .statistics {
+    display: block;
+  }
+}
+
+@media (max-width: $breakpointSmall) {
+  .footer {
+    display: block;
+  }
+
+  .statistics {
+    display: flex;
+    margin-top: 20px;
+  }
+}

frontend/src/Author/Index/AuthorIndexFooter.js

@@ -0,0 +1,158 @@
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import formatBytes from 'Utilities/Number/formatBytes';
+import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import styles from './AuthorIndexFooter.css';
+
+class AuthorIndexFooter extends PureComponent {
+
+  //
+  // Render
+
+  render() {
+    const { author } = this.props;
+    const count = author.length;
+    let books = 0;
+    let bookFiles = 0;
+    let ended = 0;
+    let continuing = 0;
+    let monitored = 0;
+    let totalFileSize = 0;
+
+    author.forEach((s) => {
+      const { statistics = {} } = s;
+
+      const {
+        bookCount = 0,
+        bookFileCount = 0,
+        sizeOnDisk = 0
+      } = statistics;
+
+      books += bookCount;
+      bookFiles += bookFileCount;
+
+      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 books downloaded)</div>
+                </div>
+
+                <div className={styles.legendItem}>
+                  <div
+                    className={classNames(
+                      styles.ended,
+                      enableColorImpairedMode && 'colorImpaired'
+                    )}
+                  />
+                  <div>Ended (All books downloaded)</div>
+                </div>
+
+                <div className={styles.legendItem}>
+                  <div
+                    className={classNames(
+                      styles.missingMonitored,
+                      enableColorImpairedMode && 'colorImpaired'
+                    )}
+                  />
+                  <div>Missing Books (Author monitored)</div>
+                </div>
+
+                <div className={styles.legendItem}>
+                  <div
+                    className={classNames(
+                      styles.missingUnmonitored,
+                      enableColorImpairedMode && 'colorImpaired'
+                    )}
+                  />
+                  <div>Missing Books (Author not monitored)</div>
+                </div>
+              </div>
+
+              <div className={styles.statistics}>
+                <DescriptionList>
+                  <DescriptionListItem
+                    title="Authors"
+                    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="Books"
+                    data={books}
+                  />
+
+                  <DescriptionListItem
+                    title="Files"
+                    data={bookFiles}
+                  />
+                </DescriptionList>
+
+                <DescriptionList>
+                  <DescriptionListItem
+                    title="Total File Size"
+                    data={formatBytes(totalFileSize)}
+                  />
+                </DescriptionList>
+              </div>
+            </div>
+          );
+        }}
+      </ColorImpairedConsumer>
+    );
+  }
+}
+
+AuthorIndexFooter.propTypes = {
+  author: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default AuthorIndexFooter;

frontend/src/Author/Index/AuthorIndexFooterConnector.js

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

frontend/src/Author/Index/AuthorIndexItemConnector.js

@@ -0,0 +1,141 @@
+/* eslint max-params: 0 */
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createAuthorSelector from 'Store/Selectors/createAuthorSelector';
+import createExecutingCommandsSelector from 'Store/Selectors/createExecutingCommandsSelector';
+import createAuthorQualityProfileSelector from 'Store/Selectors/createAuthorQualityProfileSelector';
+import createAuthorMetadataProfileSelector from 'Store/Selectors/createAuthorMetadataProfileSelector';
+import { executeCommand } from 'Store/Actions/commandActions';
+import * as commandNames from 'Commands/commandNames';
+
+function selectShowSearchAction() {
+  return createSelector(
+    (state) => state.authorIndex,
+    (authorIndex) => {
+      const view = authorIndex.view;
+
+      switch (view) {
+        case 'posters':
+          return authorIndex.posterOptions.showSearchAction;
+        case 'banners':
+          return authorIndex.bannerOptions.showSearchAction;
+        case 'overview':
+          return authorIndex.overviewOptions.showSearchAction;
+        default:
+          return authorIndex.tableOptions.showSearchAction;
+      }
+    }
+  );
+}
+
+function createMapStateToProps() {
+  return createSelector(
+    createAuthorSelector(),
+    createAuthorQualityProfileSelector(),
+    createAuthorMetadataProfileSelector(),
+    selectShowSearchAction(),
+    createExecutingCommandsSelector(),
+    (
+      author,
+      qualityProfile,
+      metadataProfile,
+      showSearchAction,
+      executingCommands
+    ) => {
+
+      // If an author is deleted this selector may fire before the parent
+      // selectors, which will result in an undefined author, if that happens
+      // we want to return early here and again in the render function to avoid
+      // trying to show an author that has no information available.
+
+      if (!author) {
+        return {};
+      }
+
+      const isRefreshingAuthor = executingCommands.some((command) => {
+        return (
+          command.name === commandNames.REFRESH_AUTHOR &&
+          command.body.authorId === author.id
+        );
+      });
+
+      const isSearchingAuthor = executingCommands.some((command) => {
+        return (
+          command.name === commandNames.AUTHOR_SEARCH &&
+          command.body.authorId === author.id
+        );
+      });
+
+      const latestBook = _.maxBy(author.books, (book) => book.releaseDate);
+
+      return {
+        ...author,
+        qualityProfile,
+        metadataProfile,
+        latestBook,
+        showSearchAction,
+        isRefreshingAuthor,
+        isSearchingAuthor
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchExecuteCommand: executeCommand
+};
+
+class AuthorIndexItemConnector extends Component {
+
+  //
+  // Listeners
+
+  onRefreshAuthorPress = () => {
+    this.props.dispatchExecuteCommand({
+      name: commandNames.REFRESH_AUTHOR,
+      authorId: this.props.id
+    });
+  }
+
+  onSearchPress = () => {
+    this.props.dispatchExecuteCommand({
+      name: commandNames.AUTHOR_SEARCH,
+      authorId: this.props.id
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      component: ItemComponent,
+      ...otherProps
+    } = this.props;
+
+    if (!id) {
+      return null;
+    }
+
+    return (
+      <ItemComponent
+        {...otherProps}
+        id={id}
+        onRefreshAuthorPress={this.onRefreshAuthorPress}
+        onSearchPress={this.onSearchPress}
+      />
+    );
+  }
+}
+
+AuthorIndexItemConnector.propTypes = {
+  id: PropTypes.number,
+  component: PropTypes.elementType.isRequired,
+  dispatchExecuteCommand: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AuthorIndexItemConnector);

frontend/src/Author/Index/Banners/AuthorIndexBanner.css

@@ -0,0 +1,85 @@
+$hoverScale: 1.05;
+
+.container {
+  padding: 10px;
+}
+
+.content {
+  transition: all 200ms ease-in;
+
+  &:hover {
+    z-index: 2;
+    box-shadow: 0 0 12px $black;
+    transition: all 200ms ease-in;
+
+    .controls {
+      opacity: 0.9;
+      transition: opacity 200ms linear 150ms;
+    }
+  }
+}
+
+.bannerContainer {
+  position: relative;
+}
+
+.link {
+  composes: link from '~Components/Link/Link.css';
+
+  display: block;
+  background-color: $defaultColor;
+}
+
+.nextAiring {
+  background-color: #fafbfc;
+  text-align: center;
+  font-size: $smallFontSize;
+}
+
+.title {
+  @add-mixin truncate;
+
+  background-color: $defaultColor;
+  color: $white;
+  text-align: center;
+  font-size: $smallFontSize;
+}
+
+.ended {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-width: 0 25px 25px 0;
+  border-style: solid;
+  border-color: transparent $dangerColor transparent transparent;
+  color: $white;
+}
+
+.controls {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  z-index: 3;
+  border-radius: 4px;
+  background-color: $themeLightColor;
+  color: $white;
+  font-size: $smallFontSize;
+  opacity: 0;
+  transition: opacity 0;
+}
+
+.action {
+  composes: button from '~Components/Link/IconButton.css';
+
+  &:hover {
+    color: #ccc;
+  }
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .container {
+    padding: 5px;
+  }
+}

frontend/src/Author/Index/Banners/AuthorIndexBanner.js

@@ -0,0 +1,268 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
+import AuthorBanner from 'Author/AuthorBanner';
+import EditAuthorModalConnector from 'Author/Edit/EditAuthorModalConnector';
+import DeleteAuthorModal from 'Author/Delete/DeleteAuthorModal';
+import AuthorIndexProgressBar from 'Author/Index/ProgressBar/AuthorIndexProgressBar';
+import AuthorIndexBannerInfo from './AuthorIndexBannerInfo';
+import styles from './AuthorIndexBanner.css';
+
+class AuthorIndexBanner extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditAuthorModalOpen: false,
+      isDeleteAuthorModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditAuthorPress = () => {
+    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 (
+      <div className={styles.container}>
+        <div className={styles.content}>
+          <div className={styles.bannerContainer}>
+            <Label className={styles.controls}>
+              <SpinnerIconButton
+                className={styles.action}
+                name={icons.REFRESH}
+                title="Refresh Author"
+                isSpinning={isRefreshingAuthor}
+                onPress={onRefreshAuthorPress}
+              />
+
+              {
+                showSearchAction &&
+                  <SpinnerIconButton
+                    className={styles.action}
+                    name={icons.SEARCH}
+                    title="Search for monitored books"
+                    isSpinning={isSearchingAuthor}
+                    onPress={onSearchPress}
+                  />
+              }
+
+              <IconButton
+                className={styles.action}
+                name={icons.EDIT}
+                title="Edit Author"
+                onPress={this.onEditAuthorPress}
+              />
+            </Label>
+
+            {
+              status === 'ended' &&
+                <div
+                  className={styles.ended}
+                  title="Ended"
+                />
+            }
+
+            <Link
+              className={styles.link}
+              style={elementStyle}
+              to={link}
+            >
+              <AuthorBanner
+                className={styles.banner}
+                style={elementStyle}
+                images={images}
+                size={70}
+                lazy={false}
+                overflow={true}
+              />
+            </Link>
+          </div>
+
+          <AuthorIndexProgressBar
+            monitored={monitored}
+            status={status}
+            bookCount={bookCount}
+            bookFileCount={bookFileCount}
+            totalBookCount={totalBookCount}
+            posterWidth={bannerWidth}
+            detailedProgressBar={detailedProgressBar}
+          />
+
+          {
+            showTitle &&
+              <div className={styles.title}>
+                {authorName}
+              </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>
+          }
+
+          <AuthorIndexBannerInfo
+            bookCount={bookCount}
+            sizeOnDisk={sizeOnDisk}
+            qualityProfile={qualityProfile}
+            showQualityProfile={showQualityProfile}
+            showRelativeDates={showRelativeDates}
+            shortDateFormat={shortDateFormat}
+            timeFormat={timeFormat}
+            {...otherProps}
+          />
+
+          <EditAuthorModalConnector
+            isOpen={isEditAuthorModalOpen}
+            authorId={id}
+            onModalClose={this.onEditAuthorModalClose}
+            onDeleteAuthorPress={this.onDeleteAuthorPress}
+          />
+
+          <DeleteAuthorModal
+            isOpen={isDeleteAuthorModalOpen}
+            authorId={id}
+            onModalClose={this.onDeleteAuthorModalClose}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+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;

frontend/src/Author/Index/Banners/AuthorIndexBannerInfo.css

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

frontend/src/Author/Index/Banners/AuthorIndexBannerInfo.js

@@ -0,0 +1,115 @@
+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 (
+      <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 === 'bookCount') {
+    let books = '1 book';
+
+    if (bookCount === 0) {
+      books = 'No books';
+    } else if (bookCount > 1) {
+      books = `${bookCount} books`;
+    }
+
+    return (
+      <div className={styles.info}>
+        {books}
+      </div>
+    );
+  }
+
+  if (sortKey === 'path') {
+    return (
+      <div className={styles.info}>
+        {path}
+      </div>
+    );
+  }
+
+  if (sortKey === 'sizeOnDisk') {
+    return (
+      <div className={styles.info}>
+        {formatBytes(sizeOnDisk)}
+      </div>
+    );
+  }
+
+  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;

frontend/src/Author/Index/Banners/AuthorIndexBanners.css

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

frontend/src/Author/Index/Banners/AuthorIndexBanners.js

@@ -0,0 +1,317 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Grid, WindowScroller } from 'react-virtualized';
+import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
+import dimensions from 'Styles/Variables/dimensions';
+import Measure from 'Components/Measure';
+import AuthorIndexItemConnector from 'Author/Index/AuthorIndexItemConnector';
+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, {})
+    };
+
+    this._isInitialized = false;
+    this._grid = null;
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      items,
+      sortKey,
+      bannerOptions,
+      jumpToCharacter
+    } = this.props;
+
+    const {
+      width,
+      columnWidth,
+      columnCount,
+      rowHeight
+    } = 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 (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 (
+      <div
+        style={style}
+        key={key}
+      >
+        <AuthorIndexItemConnector
+          key={author.id}
+          component={AuthorIndexBanner}
+          sortKey={sortKey}
+          bannerWidth={bannerWidth}
+          bannerHeight={bannerHeight}
+          detailedProgressBar={detailedProgressBar}
+          showTitle={showTitle}
+          showMonitored={showMonitored}
+          showQualityProfile={showQualityProfile}
+          showRelativeDates={showRelativeDates}
+          shortDateFormat={shortDateFormat}
+          timeFormat={timeFormat}
+          authorId={author.id}
+          qualityProfileId={author.qualityProfileId}
+          metadataProfileId={author.metadataProfileId}
+        />
+      </div>
+    );
+  }
+
+  //
+  // 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 (
+      <Measure
+        whitelist={['width']}
+        onMeasure={this.onMeasure}
+      >
+        <WindowScroller
+          scrollElement={isSmallScreen ? undefined : scroller}
+        >
+          {({ height, registerChild, onChildScroll, scrollTop }) => {
+            if (!height) {
+              return <div />;
+            }
+
+            return (
+              <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}
+              />
+            );
+          }
+          }
+        </WindowScroller>
+      </Measure>
+    );
+  }
+}
+
+AuthorIndexBanners.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  sortKey: PropTypes.string,
+  bannerOptions: PropTypes.object.isRequired,
+  jumpToCharacter: PropTypes.string,
+  scroller: PropTypes.instanceOf(Element).isRequired,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  timeFormat: PropTypes.string.isRequired
+};
+
+export default AuthorIndexBanners;

frontend/src/Author/Index/Banners/AuthorIndexBannersConnector.js

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import 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);

frontend/src/Author/Index/Banners/Options/AuthorIndexBannerOptionsModal.js

@@ -0,0 +1,25 @@
+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 (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <AuthorIndexBannerOptionsModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+AuthorIndexBannerOptionsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AuthorIndexBannerOptionsModal;

frontend/src/Author/Index/Banners/Options/AuthorIndexBannerOptionsModalContent.js

@@ -0,0 +1,213 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+
+const 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 (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+           Options
+        </ModalHeader>
+
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <FormLabel> Size</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.SELECT}
+                name="size"
+                value={size}
+                values={bannerSizeOptions}
+                onChange={this.onChangeBannerOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Detailed Progress Bar</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="detailedProgressBar"
+                value={detailedProgressBar}
+                helpText="Show text on progess bar"
+                onChange={this.onChangeBannerOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Name</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showTitle"
+                value={showTitle}
+                helpText="Show author name under banner"
+                onChange={this.onChangeBannerOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Monitored</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showMonitored"
+                value={showMonitored}
+                helpText="Show monitored status under banner"
+                onChange={this.onChangeBannerOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Quality Profile</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showQualityProfile"
+                value={showQualityProfile}
+                helpText="Show quality profile under banner"
+                onChange={this.onChangeBannerOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Search</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showSearchAction"
+                value={showSearchAction}
+                helpText="Show search button on hover"
+                onChange={this.onChangeBannerOption}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+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;

frontend/src/Author/Index/Banners/Options/AuthorIndexBannerOptionsModalContentConnector.js

@@ -0,0 +1,23 @@
+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);

frontend/src/Author/Index/Menus/AuthorIndexFilterMenu.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { align } from 'Helpers/Props';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import AuthorIndexFilterModalConnector from 'Author/Index/AuthorIndexFilterModalConnector';
+
+function AuthorIndexFilterMenu(props) {
+  const {
+    selectedFilterKey,
+    filters,
+    customFilters,
+    isDisabled,
+    onFilterSelect
+  } = props;
+
+  return (
+    <FilterMenu
+      alignMenu={align.RIGHT}
+      isDisabled={isDisabled}
+      selectedFilterKey={selectedFilterKey}
+      filters={filters}
+      customFilters={customFilters}
+      filterModalConnectorComponent={AuthorIndexFilterModalConnector}
+      onFilterSelect={onFilterSelect}
+    />
+  );
+}
+
+AuthorIndexFilterMenu.propTypes = {
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+  onFilterSelect: PropTypes.func.isRequired
+};
+
+AuthorIndexFilterMenu.defaultProps = {
+  showCustomFilters: false
+};
+
+export default AuthorIndexFilterMenu;

frontend/src/Author/Index/Menus/AuthorIndexSortMenu.js

@@ -0,0 +1,150 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { align, sortDirections } from 'Helpers/Props';
+import SortMenu from 'Components/Menu/SortMenu';
+import MenuContent from 'Components/Menu/MenuContent';
+import SortMenuItem from 'Components/Menu/SortMenuItem';
+
+function AuthorIndexSortMenu(props) {
+  const {
+    sortKey,
+    sortDirection,
+    isDisabled,
+    onSortSelect
+  } = props;
+
+  return (
+    <SortMenu
+      isDisabled={isDisabled}
+      alignMenu={align.RIGHT}
+    >
+      <MenuContent>
+        <SortMenuItem
+          name="status"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Monitored/Status
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="sortName"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Name
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="authorType"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Type
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="qualityProfileId"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Quality Profile
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="metadataProfileId"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Metadata Profile
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="nextBook"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Next Book
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="lastBook"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Last Book
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="added"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Added
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="bookCount"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Books
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="trackProgress"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Books
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="bookCount"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Book Count
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="path"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Path
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="sizeOnDisk"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          Size on Disk
+        </SortMenuItem>
+      </MenuContent>
+    </SortMenu>
+  );
+}
+
+AuthorIndexSortMenu.propTypes = {
+  sortKey: PropTypes.string,
+  sortDirection: PropTypes.oneOf(sortDirections.all),
+  isDisabled: PropTypes.bool.isRequired,
+  onSortSelect: PropTypes.func.isRequired
+};
+
+export default AuthorIndexSortMenu;

frontend/src/Author/Index/Menus/AuthorIndexViewMenu.js

@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { align } from 'Helpers/Props';
+import ViewMenu from 'Components/Menu/ViewMenu';
+import MenuContent from 'Components/Menu/MenuContent';
+import ViewMenuItem from 'Components/Menu/ViewMenuItem';
+
+function AuthorIndexViewMenu(props) {
+  const {
+    view,
+    isDisabled,
+    onViewSelect
+  } = props;
+
+  return (
+    <ViewMenu
+      isDisabled={isDisabled}
+      alignMenu={align.RIGHT}
+    >
+      <MenuContent>
+        <ViewMenuItem
+          name="table"
+          selectedView={view}
+          onPress={onViewSelect}
+        >
+          Table
+        </ViewMenuItem>
+
+        <ViewMenuItem
+          name="posters"
+          selectedView={view}
+          onPress={onViewSelect}
+        >
+          Posters
+        </ViewMenuItem>
+
+        <ViewMenuItem
+          name="banners"
+          selectedView={view}
+          onPress={onViewSelect}
+        >
+          Banners
+        </ViewMenuItem>
+
+        <ViewMenuItem
+          name="overview"
+          selectedView={view}
+          onPress={onViewSelect}
+        >
+          Overview
+        </ViewMenuItem>
+      </MenuContent>
+    </ViewMenu>
+  );
+}
+
+AuthorIndexViewMenu.propTypes = {
+  view: PropTypes.string.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+  onViewSelect: PropTypes.func.isRequired
+};
+
+export default AuthorIndexViewMenu;

frontend/src/Author/Index/Overview/AuthorIndexOverview.css

@@ -0,0 +1,96 @@
+$hoverScale: 1.05;
+
+.container {
+  &:hover {
+    .content {
+      background-color: $tableRowHoverBackgroundColor;
+    }
+  }
+}
+
+.content {
+  display: flex;
+  flex-grow: 1;
+}
+
+.poster {
+  position: relative;
+}
+
+.posterContainer {
+  position: relative;
+}
+
+.link {
+  composes: link from '~Components/Link/Link.css';
+
+  display: block;
+  color: $defaultColor;
+
+  &:hover {
+    color: $defaultColor;
+    text-decoration: none;
+  }
+}
+
+.ended {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  border-width: 0 25px 25px 0;
+  border-style: solid;
+  border-color: transparent $dangerColor transparent transparent;
+  color: $white;
+}
+
+.info {
+  display: flex;
+  flex: 1 0 1px;
+  flex-direction: column;
+  overflow: hidden;
+  padding-left: 10px;
+}
+
+.titleRow {
+  display: flex;
+  justify-content: space-between;
+  flex: 0 0 auto;
+  margin-bottom: 10px;
+  line-height: 32px;
+}
+
+.title {
+  @add-mixin truncate;
+  composes: link;
+
+  flex: 1 0 1px;
+  font-weight: 300;
+  font-size: 30px;
+}
+
+.actions {
+  white-space: nowrap;
+}
+
+.details {
+  display: flex;
+  justify-content: space-between;
+  flex: 1 0 auto;
+}
+
+.overview {
+  composes: link;
+
+  flex: 0 1 1000px;
+  overflow: hidden;
+  min-height: 0;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .overview {
+    display: none;
+  }
+}

frontend/src/Author/Index/Overview/AuthorIndexOverview.js

@@ -0,0 +1,280 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TextTruncate from 'react-text-truncate';
+import { icons } from 'Helpers/Props';
+import dimensions from 'Styles/Variables/dimensions';
+import fonts from 'Styles/Variables/fonts';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import AuthorPoster from 'Author/AuthorPoster';
+import EditAuthorModalConnector from 'Author/Edit/EditAuthorModalConnector';
+import DeleteAuthorModal from 'Author/Delete/DeleteAuthorModal';
+import AuthorIndexProgressBar from 'Author/Index/ProgressBar/AuthorIndexProgressBar';
+import AuthorIndexOverviewInfo from './AuthorIndexOverviewInfo';
+import styles from './AuthorIndexOverview.css';
+
+const columnPadding = parseInt(dimensions.authorIndexColumnPadding);
+const columnPaddingSmallScreen = parseInt(dimensions.authorIndexColumnPaddingSmallScreen);
+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 AuthorIndexOverview extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditAuthorModalOpen: false,
+      isDeleteAuthorModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditAuthorPress = () => {
+    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,
+      overview,
+      monitored,
+      status,
+      titleSlug,
+      nextAiring,
+      statistics,
+      images,
+      posterWidth,
+      posterHeight,
+      qualityProfile,
+      overviewOptions,
+      showSearchAction,
+      showRelativeDates,
+      shortDateFormat,
+      longDateFormat,
+      timeFormat,
+      rowHeight,
+      isSmallScreen,
+      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: `${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}
+              >
+                <AuthorPoster
+                  className={styles.poster}
+                  style={elementStyle}
+                  images={images}
+                  size={250}
+                  lazy={false}
+                  overflow={true}
+                />
+              </Link>
+            </div>
+
+            <AuthorIndexProgressBar
+              monitored={monitored}
+              status={status}
+              bookCount={bookCount}
+              bookFileCount={bookFileCount}
+              totalBookCount={totalBookCount}
+              posterWidth={posterWidth}
+              detailedProgressBar={overviewOptions.detailedProgressBar}
+            />
+          </div>
+
+          <div className={styles.info} style={{ maxHeight: contentHeight }}>
+            <div className={styles.titleRow}>
+              <Link
+                className={styles.title}
+                to={link}
+              >
+                {authorName}
+              </Link>
+
+              <div className={styles.actions}>
+                <SpinnerIconButton
+                  name={icons.REFRESH}
+                  title="Refresh Author"
+                  isSpinning={isRefreshingAuthor}
+                  onPress={onRefreshAuthorPress}
+                />
+
+                {
+                  showSearchAction &&
+                    <SpinnerIconButton
+                      className={styles.action}
+                      name={icons.SEARCH}
+                      title="Search for monitored books"
+                      isSpinning={isSearchingAuthor}
+                      onPress={onSearchPress}
+                    />
+                }
+
+                <IconButton
+                  name={icons.EDIT}
+                  title="Edit Author"
+                  onPress={this.onEditAuthorPress}
+                />
+              </div>
+            </div>
+
+            <div className={styles.details}>
+
+              <Link
+                className={styles.overview}
+                to={link}
+              >
+                <TextTruncate
+                  line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
+                  text={overview}
+                />
+              </Link>
+
+              <AuthorIndexOverviewInfo
+                height={overviewHeight}
+                monitored={monitored}
+                nextAiring={nextAiring}
+                bookCount={bookCount}
+                sizeOnDisk={sizeOnDisk}
+                qualityProfile={qualityProfile}
+                showRelativeDates={showRelativeDates}
+                shortDateFormat={shortDateFormat}
+                longDateFormat={longDateFormat}
+                timeFormat={timeFormat}
+                {...overviewOptions}
+                {...otherProps}
+              />
+            </div>
+          </div>
+        </div>
+
+        <EditAuthorModalConnector
+          isOpen={isEditAuthorModalOpen}
+          authorId={id}
+          onModalClose={this.onEditAuthorModalClose}
+          onDeleteAuthorPress={this.onDeleteAuthorPress}
+        />
+
+        <DeleteAuthorModal
+          isOpen={isDeleteAuthorModalOpen}
+          authorId={id}
+          onModalClose={this.onDeleteAuthorModalClose}
+        />
+      </div>
+    );
+  }
+}
+
+AuthorIndexOverview.propTypes = {
+  id: PropTypes.number.isRequired,
+  authorName: 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,
+  isRefreshingAuthor: PropTypes.bool.isRequired,
+  isSearchingAuthor: PropTypes.bool.isRequired,
+  onRefreshAuthorPress: PropTypes.func.isRequired,
+  onSearchPress: PropTypes.func.isRequired
+};
+
+AuthorIndexOverview.defaultProps = {
+  statistics: {
+    bookCount: 0,
+    bookFileCount: 0,
+    totalBookCount: 0
+  }
+};
+
+export default AuthorIndexOverview;

frontend/src/Author/Index/Overview/AuthorIndexOverviewInfo.css

@@ -0,0 +1,12 @@
+.infos {
+  display: flex;
+  flex: 0 0 250px;
+  flex-direction: column;
+  margin-left: 10px;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .infos {
+    margin-left: 0;
+  }
+}

frontend/src/Author/Index/Overview/AuthorIndexOverviewInfo.js

@@ -0,0 +1,250 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import formatBytes from 'Utilities/Number/formatBytes';
+import { icons } from 'Helpers/Props';
+import dimensions from 'Styles/Variables/dimensions';
+import AuthorIndexOverviewInfoRow from './AuthorIndexOverviewInfoRow';
+import styles from './AuthorIndexOverviewInfo.css';
+
+const infoRowHeight = parseInt(dimensions.authorIndexOverviewInfoRowHeight);
+
+const rows = [
+  {
+    name: 'monitored',
+    showProp: 'showMonitored',
+    valueProp: 'monitored'
+
+  },
+  {
+    name: 'qualityProfileId',
+    showProp: 'showQualityProfile',
+    valueProp: 'qualityProfileId'
+  },
+  {
+    name: 'lastBook',
+    showProp: 'showLastBook',
+    valueProp: 'lastBook'
+  },
+  {
+    name: 'added',
+    showProp: 'showAdded',
+    valueProp: 'added'
+  },
+  {
+    name: 'bookCount',
+    showProp: 'showBookCount',
+    valueProp: 'bookCount'
+  },
+  {
+    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 === 'qualityProfileId') {
+    return {
+      title: 'Quality Profile',
+      iconName: icons.PROFILE,
+      label: props.qualityProfile.name
+    };
+  }
+
+  if (name === 'lastBook') {
+    const {
+      lastBook,
+      showRelativeDates,
+      shortDateFormat,
+      timeFormat
+    } = props;
+
+    return {
+      title: `Last Book: ${lastBook.title}`,
+      iconName: icons.CALENDAR,
+      label: getRelativeDate(
+        lastBook.releaseDate,
+        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 === 'bookCount') {
+    const { bookCount } = props;
+    let books = '1 book';
+
+    if (bookCount === 0) {
+      books = 'No books';
+    } else if (bookCount > 1) {
+      books = `${bookCount} books`;
+    }
+
+    return {
+      title: 'Book Count',
+      iconName: icons.BOOK,
+      label: books
+    };
+  }
+
+  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 AuthorIndexOverviewInfo(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 &&
+        <AuthorIndexOverviewInfoRow
+          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 (
+            <AuthorIndexOverviewInfoRow
+              key={row.name}
+              {...infoRowProps}
+            />
+          );
+        })
+      }
+    </div>
+  );
+}
+
+AuthorIndexOverviewInfo.propTypes = {
+  height: PropTypes.number.isRequired,
+  showMonitored: PropTypes.bool.isRequired,
+  showQualityProfile: PropTypes.bool.isRequired,
+  showAdded: PropTypes.bool.isRequired,
+  showBookCount: PropTypes.bool.isRequired,
+  showPath: PropTypes.bool.isRequired,
+  showSizeOnDisk: PropTypes.bool.isRequired,
+  monitored: PropTypes.bool.isRequired,
+  nextAiring: PropTypes.string,
+  qualityProfile: PropTypes.object.isRequired,
+  lastBook: PropTypes.object,
+  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,
+  longDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired
+};
+
+export default AuthorIndexOverviewInfo;

frontend/src/Author/Index/Overview/AuthorIndexOverviewInfoRow.css

@@ -0,0 +1,10 @@
+.infoRow {
+  flex: 0 0 $authorIndexOverviewInfoRowHeight;
+  margin: 2px 0;
+}
+
+.icon {
+  margin-right: 5px;
+  width: 25px !important;
+  text-align: center;
+}

frontend/src/Author/Index/Overview/AuthorIndexOverviewInfoRow.js

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

frontend/src/Author/Index/Overview/AuthorIndexOverviews.css

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

frontend/src/Author/Index/Overview/AuthorIndexOverviews.js

@@ -0,0 +1,262 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Grid, WindowScroller } from 'react-virtualized';
+import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
+import dimensions from 'Styles/Variables/dimensions';
+import Measure from 'Components/Measure';
+import AuthorIndexItemConnector from 'Author/Index/AuthorIndexItemConnector';
+import AuthorIndexOverview from './AuthorIndexOverview';
+import styles from './AuthorIndexOverviews.css';
+
+// Poster container dimensions
+const columnPadding = parseInt(dimensions.authorIndexColumnPadding);
+const columnPaddingSmallScreen = parseInt(dimensions.authorIndexColumnPaddingSmallScreen);
+const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
+const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
+
+function calculatePosterWidth(posterSize, isSmallScreen) {
+  const maxiumPosterWidth = isSmallScreen ? 192 : 202;
+
+  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 posterWidth;
+}
+
+class AuthorIndexOverviews extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      width: 0,
+      columnCount: 1,
+      posterWidth: 238,
+      posterHeight: 238,
+      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {})
+    };
+
+    this._grid = null;
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      items,
+      sortKey,
+      overviewOptions,
+      jumpToCharacter
+    } = this.props;
+
+    const {
+      width,
+      rowHeight
+    } = this.state;
+
+    if (prevProps.sortKey !== sortKey ||
+        prevProps.overviewOptions !== overviewOptions) {
+      this.calculateGrid();
+    }
+
+    if (this._grid &&
+        (prevState.width !== width ||
+            prevState.rowHeight !== rowHeight ||
+            hasDifferentItemsOrOrder(prevProps.items, items))) {
+      // recomputeGridSize also forces Grid to discard its cache of rendered cells
+      this._grid.recomputeGridSize();
+    }
+
+    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 author = items[rowIndex];
+
+    if (!author) {
+      return null;
+    }
+
+    return (
+      <div
+        key={key}
+        style={style}
+      >
+        <AuthorIndexItemConnector
+          key={author.id}
+          component={AuthorIndexOverview}
+          sortKey={sortKey}
+          posterWidth={posterWidth}
+          posterHeight={posterHeight}
+          rowHeight={rowHeight}
+          overviewOptions={overviewOptions}
+          showRelativeDates={showRelativeDates}
+          shortDateFormat={shortDateFormat}
+          longDateFormat={longDateFormat}
+          timeFormat={timeFormat}
+          isSmallScreen={isSmallScreen}
+          authorId={author.id}
+          qualityProfileId={author.qualityProfileId}
+          metadataProfileId={author.metadataProfileId}
+        />
+      </div>
+    );
+  }
+
+  //
+  // Listeners
+
+  onMeasure = ({ width }) => {
+    this.calculateGrid(width, this.props.isSmallScreen);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      isSmallScreen,
+      scroller
+    } = 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}
+                  onSectionRendered={this.onSectionRendered}
+                  scrollToAlignment={'start'}
+                  isScrollingOptOut={true}
+                />
+              </div>
+            );
+          }
+          }
+        </WindowScroller>
+      </Measure>
+    );
+  }
+}
+
+AuthorIndexOverviews.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 AuthorIndexOverviews;

frontend/src/Author/Index/Overview/AuthorIndexOverviewsConnector.js

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

frontend/src/Author/Index/Overview/Options/AuthorIndexOverviewOptionsModal.js

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

frontend/src/Author/Index/Overview/Options/AuthorIndexOverviewOptionsModalContent.js

@@ -0,0 +1,287 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+
+const posterSizeOptions = [
+  { key: 'small', value: 'Small' },
+  { key: 'medium', value: 'Medium' },
+  { key: 'large', value: 'Large' }
+];
+
+class AuthorIndexOverviewOptionsModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      detailedProgressBar: props.detailedProgressBar,
+      size: props.size,
+      showMonitored: props.showMonitored,
+      showQualityProfile: props.showQualityProfile,
+      showLastBook: props.showLastBook,
+      showAdded: props.showAdded,
+      showBookCount: props.showBookCount,
+      showPath: props.showPath,
+      showSizeOnDisk: props.showSizeOnDisk,
+      showSearchAction: props.showSearchAction
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      detailedProgressBar,
+      size,
+      showMonitored,
+      showQualityProfile,
+      showLastBook,
+      showAdded,
+      showBookCount,
+      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 (showQualityProfile !== prevProps.showQualityProfile) {
+      state.showQualityProfile = showQualityProfile;
+    }
+
+    if (showLastBook !== prevProps.showLastBook) {
+      state.showLastBook = showLastBook;
+    }
+
+    if (showAdded !== prevProps.showAdded) {
+      state.showAdded = showAdded;
+    }
+
+    if (showBookCount !== prevProps.showBookCount) {
+      state.showBookCount = showBookCount;
+    }
+
+    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,
+      showQualityProfile,
+      showLastBook,
+      showAdded,
+      showBookCount,
+      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 progess 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 Quality Profile</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showQualityProfile"
+                value={showQualityProfile}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Last Book</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showLastBook"
+                value={showLastBook}
+                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 Book Count</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showBookCount"
+                value={showBookCount}
+                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"
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+AuthorIndexOverviewOptionsModalContent.propTypes = {
+  size: PropTypes.string.isRequired,
+  detailedProgressBar: PropTypes.bool.isRequired,
+  showMonitored: PropTypes.bool.isRequired,
+  showQualityProfile: PropTypes.bool.isRequired,
+  showLastBook: PropTypes.bool.isRequired,
+  showAdded: PropTypes.bool.isRequired,
+  showBookCount: 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 AuthorIndexOverviewOptionsModalContent;

frontend/src/Author/Index/Overview/Options/AuthorIndexOverviewOptionsModalContentConnector.js

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

frontend/src/Author/Index/Posters/AuthorIndexPoster.css

@@ -0,0 +1,103 @@
+$hoverScale: 1.05;
+
+.container {
+  padding: 10px;
+}
+
+.content {
+  transition: all 200ms ease-in;
+
+  &:hover {
+    z-index: 2;
+    box-shadow: 0 0 12px $black;
+    transition: all 200ms ease-in;
+
+    .controls {
+      opacity: 0.9;
+      transition: opacity 200ms linear 150ms;
+    }
+  }
+}
+
+.posterContainer {
+  position: relative;
+}
+
+.link {
+  composes: link from '~Components/Link/Link.css';
+
+  position: relative;
+  display: block;
+  height: 70px;
+  background-color: $defaultColor;
+}
+
+.overlayTitle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  width: 100%;
+  height: 100%;
+  color: $offWhite;
+  text-align: center;
+  font-size: 20px;
+}
+
+.nextAiring {
+  background-color: #fafbfc;
+  text-align: center;
+  font-size: $smallFontSize;
+}
+
+.title {
+  @add-mixin truncate;
+
+  background-color: $defaultColor;
+  color: $white;
+  text-align: center;
+  font-size: $smallFontSize;
+}
+
+.ended {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  border-width: 0 25px 25px 0;
+  border-style: solid;
+  border-color: transparent $dangerColor transparent transparent;
+  color: $white;
+}
+
+.controls {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  z-index: 3;
+  border-radius: 4px;
+  background-color: $themeLightColor;
+  color: $white;
+  font-size: $smallFontSize;
+  opacity: 0;
+  transition: opacity 0;
+}
+
+.action {
+  composes: button from '~Components/Link/IconButton.css';
+
+  &:hover {
+    color: #ccc;
+  }
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .container {
+    padding: 5px;
+  }
+}

frontend/src/Author/Index/Posters/AuthorIndexPoster.js

@@ -0,0 +1,292 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
+import AuthorPoster from 'Author/AuthorPoster';
+import EditAuthorModalConnector from 'Author/Edit/EditAuthorModalConnector';
+import DeleteAuthorModal from 'Author/Delete/DeleteAuthorModal';
+import AuthorIndexProgressBar from 'Author/Index/ProgressBar/AuthorIndexProgressBar';
+import AuthorIndexPosterInfo from './AuthorIndexPosterInfo';
+import styles from './AuthorIndexPoster.css';
+
+class AuthorIndexPoster extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      hasPosterError: false,
+      isEditAuthorModalOpen: false,
+      isDeleteAuthorModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditAuthorPress = () => {
+    this.setState({ isEditAuthorModalOpen: true });
+  }
+
+  onEditAuthorModalClose = () => {
+    this.setState({ isEditAuthorModalOpen: false });
+  }
+
+  onDeleteAuthorPress = () => {
+    this.setState({
+      isEditAuthorModalOpen: false,
+      isDeleteAuthorModalOpen: true
+    });
+  }
+
+  onDeleteAuthorModalClose = () => {
+    this.setState({ isDeleteAuthorModalOpen: false });
+  }
+
+  onPosterLoad = () => {
+    if (this.state.hasPosterError) {
+      this.setState({ hasPosterError: false });
+    }
+  }
+
+  onPosterLoadError = () => {
+    if (!this.state.hasPosterError) {
+      this.setState({ hasPosterError: true });
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      authorName,
+      monitored,
+      titleSlug,
+      status,
+      nextAiring,
+      statistics,
+      images,
+      posterWidth,
+      posterHeight,
+      detailedProgressBar,
+      showTitle,
+      showMonitored,
+      showQualityProfile,
+      qualityProfile,
+      showSearchAction,
+      showRelativeDates,
+      shortDateFormat,
+      timeFormat,
+      isRefreshingAuthor,
+      isSearchingAuthor,
+      onRefreshAuthorPress,
+      onSearchPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      bookCount,
+      sizeOnDisk,
+      bookFileCount,
+      totalBookCount
+    } = statistics;
+
+    const {
+      hasPosterError,
+      isEditAuthorModalOpen,
+      isDeleteAuthorModalOpen
+    } = this.state;
+
+    const link = `/author/${titleSlug}`;
+
+    const elementStyle = {
+      width: `${posterWidth}px`,
+      height: `${posterHeight}px`
+    };
+    elementStyle.objectFit = 'contain';
+
+    return (
+      <div className={styles.container}>
+        <div className={styles.content}>
+          <div className={styles.posterContainer}>
+            <Label className={styles.controls}>
+              <SpinnerIconButton
+                className={styles.action}
+                name={icons.REFRESH}
+                title="Refresh Author"
+                isSpinning={isRefreshingAuthor}
+                onPress={onRefreshAuthorPress}
+              />
+
+              {
+                showSearchAction &&
+                  <SpinnerIconButton
+                    className={styles.action}
+                    name={icons.SEARCH}
+                    title="Search for monitored books"
+                    isSpinning={isSearchingAuthor}
+                    onPress={onSearchPress}
+                  />
+              }
+
+              <IconButton
+                className={styles.action}
+                name={icons.EDIT}
+                title="Edit Author"
+                onPress={this.onEditAuthorPress}
+              />
+            </Label>
+
+            {
+              status === 'ended' &&
+                <div
+                  className={styles.ended}
+                  title="Ended"
+                />
+            }
+
+            <Link
+              className={styles.link}
+              style={elementStyle}
+              to={link}
+            >
+              <AuthorPoster
+                className={styles.poster}
+                style={elementStyle}
+                images={images}
+                size={250}
+                lazy={false}
+                overflow={true}
+                onError={this.onPosterLoadError}
+                onLoad={this.onPosterLoad}
+              />
+
+              {
+                hasPosterError &&
+                  <div className={styles.overlayTitle}>
+                    {authorName}
+                  </div>
+              }
+
+            </Link>
+          </div>
+
+          <AuthorIndexProgressBar
+            monitored={monitored}
+            status={status}
+            bookCount={bookCount}
+            bookFileCount={bookFileCount}
+            totalBookCount={totalBookCount}
+            posterWidth={posterWidth}
+            detailedProgressBar={detailedProgressBar}
+          />
+
+          {
+            showTitle &&
+              <div className={styles.title}>
+                {authorName}
+              </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>
+          }
+          <AuthorIndexPosterInfo
+            bookCount={bookCount}
+            sizeOnDisk={sizeOnDisk}
+            qualityProfile={qualityProfile}
+            showQualityProfile={showQualityProfile}
+            showRelativeDates={showRelativeDates}
+            shortDateFormat={shortDateFormat}
+            timeFormat={timeFormat}
+            {...otherProps}
+          />
+
+          <EditAuthorModalConnector
+            isOpen={isEditAuthorModalOpen}
+            authorId={id}
+            onModalClose={this.onEditAuthorModalClose}
+            onDeleteAuthorPress={this.onDeleteAuthorPress}
+          />
+
+          <DeleteAuthorModal
+            isOpen={isDeleteAuthorModalOpen}
+            authorId={id}
+            onModalClose={this.onDeleteAuthorModalClose}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+AuthorIndexPoster.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,
+  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,
+  isRefreshingAuthor: PropTypes.bool.isRequired,
+  isSearchingAuthor: PropTypes.bool.isRequired,
+  onRefreshAuthorPress: PropTypes.func.isRequired,
+  onSearchPress: PropTypes.func.isRequired
+};
+
+AuthorIndexPoster.defaultProps = {
+  statistics: {
+    bookCount: 0,
+    bookFileCount: 0,
+    totalBookCount: 0
+  }
+};
+
+export default AuthorIndexPoster;

frontend/src/Author/Index/Posters/AuthorIndexPosterInfo.css

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

frontend/src/Author/Index/Posters/AuthorIndexPosterInfo.js

@@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import formatBytes from 'Utilities/Number/formatBytes';
+import styles from './AuthorIndexPosterInfo.css';
+
+function AuthorIndexPosterInfo(props) {
+  const {
+    qualityProfile,
+    showQualityProfile,
+    previousAiring,
+    added,
+    bookCount,
+    path,
+    sizeOnDisk,
+    sortKey,
+    showRelativeDates,
+    shortDateFormat,
+    timeFormat
+  } = props;
+
+  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 === 'bookCount') {
+    let books = '1 book';
+
+    if (bookCount === 0) {
+      books = 'No books';
+    } else if (bookCount > 1) {
+      books = `${bookCount} books`;
+    }
+
+    return (
+      <div className={styles.info}>
+        {books}
+      </div>
+    );
+  }
+
+  if (sortKey === 'path') {
+    return (
+      <div className={styles.info}>
+        {path}
+      </div>
+    );
+  }
+
+  if (sortKey === 'sizeOnDisk') {
+    return (
+      <div className={styles.info}>
+        {formatBytes(sizeOnDisk)}
+      </div>
+    );
+  }
+
+  return null;
+}
+
+AuthorIndexPosterInfo.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 AuthorIndexPosterInfo;

frontend/src/Author/Index/Posters/AuthorIndexPosters.css

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

frontend/src/Author/Index/Posters/AuthorIndexPosters.js

@@ -0,0 +1,320 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Grid, WindowScroller } from 'react-virtualized';
+import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
+import dimensions from 'Styles/Variables/dimensions';
+import Measure from 'Components/Measure';
+import AuthorIndexItemConnector from 'Author/Index/AuthorIndexItemConnector';
+import AuthorIndexPoster from './AuthorIndexPoster';
+import styles from './AuthorIndexPosters.css';
+
+// Poster 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, 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 '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(posterWidth);
+}
+
+class AuthorIndexPosters extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      width: 0,
+      columnWidth: 182,
+      columnCount: 1,
+      posterWidth: 238,
+      posterHeight: 238,
+      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {})
+    };
+
+    this._isInitialized = false;
+    this._grid = null;
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      items,
+      sortKey,
+      posterOptions,
+      jumpToCharacter
+    } = this.props;
+
+    const {
+      width,
+      columnWidth,
+      columnCount,
+      rowHeight
+    } = this.state;
+
+    if (prevProps.sortKey !== sortKey ||
+        prevProps.posterOptions !== posterOptions) {
+      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 (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 padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
+    const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen);
+    const columnCount = Math.max(Math.floor(width / columnWidth), 1);
+    const posterWidth = columnWidth - padding;
+    const posterHeight = calculatePosterHeight(posterWidth);
+    const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions);
+
+    this.setState({
+      width,
+      columnWidth,
+      columnCount,
+      posterWidth,
+      posterHeight,
+      rowHeight
+    });
+  }
+
+  cellRenderer = ({ key, rowIndex, columnIndex, style }) => {
+    const {
+      items,
+      sortKey,
+      posterOptions,
+      showRelativeDates,
+      shortDateFormat,
+      timeFormat
+    } = this.props;
+
+    const {
+      posterWidth,
+      posterHeight,
+      columnCount
+    } = this.state;
+
+    const {
+      detailedProgressBar,
+      showTitle,
+      showMonitored,
+      showQualityProfile
+    } = posterOptions;
+
+    const authorIdx = rowIndex * columnCount + columnIndex;
+    const author = items[authorIdx];
+
+    if (!author) {
+      return null;
+    }
+
+    return (
+      <div
+        key={key}
+        style={style}
+      >
+        <AuthorIndexItemConnector
+          key={author.id}
+          component={AuthorIndexPoster}
+          sortKey={sortKey}
+          posterWidth={posterWidth}
+          posterHeight={posterHeight}
+          detailedProgressBar={detailedProgressBar}
+          showTitle={showTitle}
+          showMonitored={showMonitored}
+          showQualityProfile={showQualityProfile}
+          showRelativeDates={showRelativeDates}
+          shortDateFormat={shortDateFormat}
+          timeFormat={timeFormat}
+          authorId={author.id}
+          qualityProfileId={author.qualityProfileId}
+          metadataProfileId={author.metadataProfileId}
+        />
+      </div>
+    );
+  }
+
+  //
+  // 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 (
+      <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>
+    );
+  }
+}
+
+AuthorIndexPosters.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  sortKey: PropTypes.string,
+  posterOptions: PropTypes.object.isRequired,
+  jumpToCharacter: PropTypes.string,
+  scroller: PropTypes.instanceOf(Element).isRequired,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  timeFormat: PropTypes.string.isRequired
+};
+
+export default AuthorIndexPosters;

frontend/src/Author/Index/Posters/AuthorIndexPostersConnector.js

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

frontend/src/Author/Index/Posters/Options/AuthorIndexPosterOptionsModal.js

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

frontend/src/Author/Index/Posters/Options/AuthorIndexPosterOptionsModalContent.js

@@ -0,0 +1,213 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+
+const posterSizeOptions = [
+  { key: 'small', value: 'Small' },
+  { key: 'medium', value: 'Medium' },
+  { key: 'large', value: 'Large' }
+];
+
+class AuthorIndexPosterOptionsModalContent 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 progess bar"
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Name</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showTitle"
+                value={showTitle}
+                helpText="Show author name 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>
+    );
+  }
+}
+
+AuthorIndexPosterOptionsModalContent.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 AuthorIndexPosterOptionsModalContent;

frontend/src/Author/Index/Posters/Options/AuthorIndexPosterOptionsModalContentConnector.js

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

frontend/src/Author/Index/ProgressBar/AuthorIndexProgressBar.css

@@ -0,0 +1,14 @@
+.progress {
+  composes: container from '~Components/ProgressBar.css';
+
+  border-radius: 0;
+  background-color: #5b5b5b;
+  color: $white;
+  transition: width 200ms ease;
+}
+
+.progressBar {
+  composes: progressBar from '~Components/ProgressBar.css';
+
+  transition: width 200ms ease;
+}

frontend/src/Author/Index/ProgressBar/AuthorIndexProgressBar.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import getProgressBarKind from 'Utilities/Author/getProgressBarKind';
+import { sizes } from 'Helpers/Props';
+import ProgressBar from 'Components/ProgressBar';
+import styles from './AuthorIndexProgressBar.css';
+
+function AuthorIndexProgressBar(props) {
+  const {
+    monitored,
+    status,
+    bookCount,
+    bookFileCount,
+    totalBookCount,
+    posterWidth,
+    detailedProgressBar
+  } = props;
+
+  const progress = bookCount ? bookFileCount / bookCount * 100 : 100;
+  const text = `${bookFileCount} / ${bookCount}`;
+
+  return (
+    <ProgressBar
+      className={styles.progressBar}
+      containerClassName={styles.progress}
+      progress={progress}
+      kind={getProgressBarKind(status, monitored, progress)}
+      size={detailedProgressBar ? sizes.MEDIUM : sizes.SMALL}
+      showText={detailedProgressBar}
+      text={text}
+      title={`${bookFileCount} / ${bookCount} (Total: ${totalBookCount})`}
+      width={posterWidth}
+    />
+  );
+}
+
+AuthorIndexProgressBar.propTypes = {
+  monitored: PropTypes.bool.isRequired,
+  status: PropTypes.string.isRequired,
+  bookCount: PropTypes.number.isRequired,
+  bookFileCount: PropTypes.number.isRequired,
+  totalBookCount: PropTypes.number.isRequired,
+  posterWidth: PropTypes.number.isRequired,
+  detailedProgressBar: PropTypes.bool.isRequired
+};
+
+export default AuthorIndexProgressBar;

frontend/src/Author/Index/Table/AuthorIndexActionsCell.js

@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import EditAuthorModalConnector from 'Author/Edit/EditAuthorModalConnector';
+import DeleteAuthorModal from 'Author/Delete/DeleteAuthorModal';
+
+class AuthorIndexActionsCell extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditAuthorModalOpen: false,
+      isDeleteAuthorModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditAuthorPress = () => {
+    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,
+      isRefreshingAuthor,
+      onRefreshAuthorPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      isEditAuthorModalOpen,
+      isDeleteAuthorModalOpen
+    } = this.state;
+
+    return (
+      <VirtualTableRowCell
+        {...otherProps}
+      >
+        <SpinnerIconButton
+          name={icons.REFRESH}
+          title="Refresh Author"
+          isSpinning={isRefreshingAuthor}
+          onPress={onRefreshAuthorPress}
+        />
+
+        <IconButton
+          name={icons.EDIT}
+          title="Edit Author"
+          onPress={this.onEditAuthorPress}
+        />
+
+        <EditAuthorModalConnector
+          isOpen={isEditAuthorModalOpen}
+          authorId={id}
+          onModalClose={this.onEditAuthorModalClose}
+          onDeleteAuthorPress={this.onDeleteAuthorPress}
+        />
+
+        <DeleteAuthorModal
+          isOpen={isDeleteAuthorModalOpen}
+          authorId={id}
+          onModalClose={this.onDeleteAuthorModalClose}
+        />
+      </VirtualTableRowCell>
+    );
+  }
+}
+
+AuthorIndexActionsCell.propTypes = {
+  id: PropTypes.number.isRequired,
+  isRefreshingAuthor: PropTypes.bool.isRequired,
+  onRefreshAuthorPress: PropTypes.func.isRequired
+};
+
+export default AuthorIndexActionsCell;

frontend/src/Author/Index/Table/AuthorIndexHeader.css

@@ -0,0 +1,96 @@
+.status {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 60px;
+}
+
+.sortName {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 4 0 110px;
+}
+
+.banner {
+  flex: 0 0 379px;
+}
+
+.bannerGrow {
+  flex-grow: 1;
+}
+
+.authorType {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 100px;
+}
+
+.qualityProfileId,
+.metadataProfileId {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 1 0 125px;
+}
+
+.nextBook,
+.lastBook,
+.added,
+.genres {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 180px;
+}
+
+.bookCount {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 100px;
+}
+
+.bookProgress,
+.latestBook {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 150px;
+}
+
+.bookCount {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 130px;
+}
+
+.path {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 1 0 150px;
+}
+
+.sizeOnDisk {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 120px;
+}
+
+.ratings {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 80px;
+}
+
+.tags {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 1 0 60px;
+}
+
+.useSceneNumbering {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 145px;
+}
+
+.actions {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 1 90px;
+}

frontend/src/Author/Index/Table/AuthorIndexHeader.js

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

frontend/src/Author/Index/Table/AuthorIndexHeaderConnector.js

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

frontend/src/Author/Index/Table/AuthorIndexRow.css

@@ -0,0 +1,129 @@
+.cell {
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+
+  display: flex;
+  align-items: center;
+}
+
+.status {
+  composes: cell;
+
+  flex: 0 0 60px;
+}
+
+.sortName {
+  composes: cell;
+
+  flex: 4 0 110px;
+}
+
+.authorType {
+  composes: cell;
+
+  flex: 0 0 100px;
+}
+
+.banner {
+  flex: 0 0 379px;
+}
+
+.bannerGrow {
+  flex-grow: 1;
+}
+
+.link {
+  composes: link from '~Components/Link/Link.css';
+
+  position: relative;
+  display: block;
+  height: 70px;
+  background-color: $defaultColor;
+}
+
+.bannerImage {
+  width: 379px;
+  height: 70px;
+}
+
+.overlayTitle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  width: 100%;
+  height: 100%;
+  color: $offWhite;
+  text-align: center;
+  font-size: 20px;
+}
+
+.qualityProfileId,
+.metadataProfileId {
+  composes: cell;
+
+  flex: 1 0 125px;
+}
+
+.nextBook,
+.lastBook,
+.added,
+.genres {
+  composes: cell;
+
+  flex: 0 0 180px;
+}
+
+.bookProgress {
+  composes: cell;
+
+  display: flex;
+  justify-content: center;
+  flex: 0 0 150px;
+  flex-direction: column;
+}
+
+.path {
+  composes: cell;
+
+  flex: 1 0 150px;
+}
+
+.sizeOnDisk {
+  composes: cell;
+
+  flex: 0 0 120px;
+}
+
+.ratings {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 80px;
+}
+
+.tags {
+  composes: cell;
+
+  flex: 1 0 60px;
+}
+
+.useSceneNumbering {
+  composes: cell;
+
+  flex: 0 0 145px;
+}
+
+.actions {
+  composes: cell;
+
+  flex: 0 1 90px;
+  min-width: 60px;
+}
+
+.checkInput {
+  composes: input from '~Components/Form/CheckInput.css';
+
+  margin-top: 0;
+}

frontend/src/Author/Index/Table/AuthorIndexRow.js

@@ -0,0 +1,456 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import getProgressBarKind from 'Utilities/Author/getProgressBarKind';
+import formatBytes from 'Utilities/Number/formatBytes';
+import { icons } from 'Helpers/Props';
+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 TagListConnector from 'Components/TagListConnector';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import AuthorNameLink from 'Author/AuthorNameLink';
+import BookTitleLink from 'Book/BookTitleLink';
+import EditAuthorModalConnector from 'Author/Edit/EditAuthorModalConnector';
+import DeleteAuthorModal from 'Author/Delete/DeleteAuthorModal';
+import AuthorBanner from 'Author/AuthorBanner';
+import hasGrowableColumns from './hasGrowableColumns';
+import AuthorStatusCell from './AuthorStatusCell';
+import styles from './AuthorIndexRow.css';
+
+class AuthorIndexRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      hasBannerError: false,
+      isEditAuthorModalOpen: false,
+      isDeleteAuthorModalOpen: false
+    };
+  }
+
+  onEditAuthorPress = () => {
+    this.setState({ isEditAuthorModalOpen: true });
+  }
+
+  onEditAuthorModalClose = () => {
+    this.setState({ isEditAuthorModalOpen: false });
+  }
+
+  onDeleteAuthorPress = () => {
+    this.setState({
+      isEditAuthorModalOpen: false,
+      isDeleteAuthorModalOpen: true
+    });
+  }
+
+  onDeleteAuthorModalClose = () => {
+    this.setState({ isDeleteAuthorModalOpen: 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,
+      authorName,
+      titleSlug,
+      authorType,
+      qualityProfile,
+      metadataProfile,
+      nextBook,
+      lastBook,
+      added,
+      statistics,
+      genres,
+      ratings,
+      path,
+      tags,
+      images,
+      showBanners,
+      showSearchAction,
+      columns,
+      isRefreshingAuthor,
+      isSearchingAuthor,
+      onRefreshAuthorPress,
+      onSearchPress
+    } = this.props;
+
+    const {
+      bookCount,
+      bookFileCount,
+      totalBookCount,
+      sizeOnDisk
+    } = statistics;
+
+    const {
+      hasBannerError,
+      isEditAuthorModalOpen,
+      isDeleteAuthorModalOpen
+    } = this.state;
+
+    return (
+      <>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'status') {
+              return (
+                <AuthorStatusCell
+                  key={name}
+                  className={styles[name]}
+                  authorType={authorType}
+                  monitored={monitored}
+                  status={status}
+                  component={VirtualTableRowCell}
+                />
+              );
+            }
+
+            if (name === 'sortName') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={classNames(
+                    styles[name],
+                    showBanners && styles.banner,
+                    showBanners && !hasGrowableColumns(columns) && styles.bannerGrow
+                  )}
+                >
+                  {
+                    showBanners ?
+                      <Link
+                        className={styles.link}
+                        to={`/author/${titleSlug}`}
+                      >
+                        <AuthorBanner
+                          className={styles.bannerImage}
+                          images={images}
+                          lazy={false}
+                          overflow={true}
+                          onError={this.onBannerLoadError}
+                          onLoad={this.onBannerLoad}
+                        />
+
+                        {
+                          hasBannerError &&
+                            <div className={styles.overlayTitle}>
+                              {authorName}
+                            </div>
+                        }
+                      </Link> :
+
+                      <AuthorNameLink
+                        titleSlug={titleSlug}
+                        authorName={authorName}
+                      />
+                  }
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'authorType') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {authorType}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'qualityProfileId') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {qualityProfile.name}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'metadataProfileId') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {metadataProfile.name}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'nextBook') {
+              if (nextBook) {
+                return (
+                  <VirtualTableRowCell
+                    key={name}
+                    className={styles[name]}
+                  >
+                    <BookTitleLink
+                      title={nextBook.title}
+                      disambiguation={nextBook.disambiguation}
+                      titleSlug={nextBook.titleSlug}
+                    />
+                  </VirtualTableRowCell>
+                );
+              }
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  None
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'lastBook') {
+              if (lastBook) {
+                return (
+                  <VirtualTableRowCell
+                    key={name}
+                    className={styles[name]}
+                  >
+                    <BookTitleLink
+                      title={lastBook.title}
+                      disambiguation={lastBook.disambiguation}
+                      titleSlug={lastBook.titleSlug}
+                    />
+                  </VirtualTableRowCell>
+                );
+              }
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  None
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'added') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  className={styles[name]}
+                  date={added}
+                  component={VirtualTableRowCell}
+                />
+              );
+            }
+
+            if (name === 'bookProgress') {
+              const progress = bookCount ? bookFileCount / bookCount * 100 : 100;
+
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <ProgressBar
+                    progress={progress}
+                    kind={getProgressBarKind(status, monitored, progress)}
+                    showText={true}
+                    text={`${bookFileCount} / ${bookCount}`}
+                    title={`${bookFileCount} / ${bookCount} (Total: ${totalBookCount})`}
+                    width={125}
+                  />
+                </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 === 'tags') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <TagListConnector
+                    tags={tags}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'actions') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <SpinnerIconButton
+                    name={icons.REFRESH}
+                    title="Refresh Author"
+                    isSpinning={isRefreshingAuthor}
+                    onPress={onRefreshAuthorPress}
+                  />
+
+                  {
+                    showSearchAction &&
+                      <SpinnerIconButton
+                        className={styles.action}
+                        name={icons.SEARCH}
+                        title="Search for monitored books"
+                        isSpinning={isSearchingAuthor}
+                        onPress={onSearchPress}
+                      />
+                  }
+
+                  <IconButton
+                    name={icons.EDIT}
+                    title="Edit Author"
+                    onPress={this.onEditAuthorPress}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <EditAuthorModalConnector
+          isOpen={isEditAuthorModalOpen}
+          authorId={id}
+          onModalClose={this.onEditAuthorModalClose}
+          onDeleteAuthorPress={this.onDeleteAuthorPress}
+        />
+
+        <DeleteAuthorModal
+          isOpen={isDeleteAuthorModalOpen}
+          authorId={id}
+          onModalClose={this.onDeleteAuthorModalClose}
+        />
+      </>
+    );
+  }
+}
+
+AuthorIndexRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  monitored: PropTypes.bool.isRequired,
+  status: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
+  titleSlug: PropTypes.string.isRequired,
+  authorType: PropTypes.string,
+  qualityProfile: PropTypes.object.isRequired,
+  metadataProfile: PropTypes.object.isRequired,
+  nextBook: PropTypes.object,
+  lastBook: PropTypes.object,
+  added: PropTypes.string,
+  statistics: PropTypes.object.isRequired,
+  latestBook: PropTypes.object,
+  path: PropTypes.string.isRequired,
+  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
+  ratings: PropTypes.object.isRequired,
+  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  showBanners: PropTypes.bool.isRequired,
+  showSearchAction: PropTypes.bool.isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isRefreshingAuthor: PropTypes.bool.isRequired,
+  isSearchingAuthor: PropTypes.bool.isRequired,
+  onRefreshAuthorPress: PropTypes.func.isRequired,
+  onSearchPress: PropTypes.func.isRequired
+};
+
+AuthorIndexRow.defaultProps = {
+  statistics: {
+    bookCount: 0,
+    bookFileCount: 0,
+    totalBookCount: 0
+  },
+  genres: [],
+  tags: []
+};
+
+export default AuthorIndexRow;

frontend/src/Author/Index/Table/AuthorIndexTable.css

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

frontend/src/Author/Index/Table/AuthorIndexTable.js

@@ -0,0 +1,128 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
+import { sortDirections } from 'Helpers/Props';
+import VirtualTable from 'Components/Table/VirtualTable';
+import VirtualTableRow from 'Components/Table/VirtualTableRow';
+import AuthorIndexItemConnector from 'Author/Index/AuthorIndexItemConnector';
+import AuthorIndexHeaderConnector from './AuthorIndexHeaderConnector';
+import AuthorIndexRow from './AuthorIndexRow';
+import styles from './AuthorIndexTable.css';
+
+class AuthorIndexTable 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 author = items[rowIndex];
+
+    return (
+      <VirtualTableRow
+        key={key}
+        style={style}
+      >
+        <AuthorIndexItemConnector
+          key={author.id}
+          component={AuthorIndexRow}
+          style={style}
+          columns={columns}
+          authorId={author.id}
+          qualityProfileId={author.qualityProfileId}
+          metadataProfileId={author.metadataProfileId}
+          showBanners={showBanners}
+        />
+      </VirtualTableRow>
+    );
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      columns,
+      sortKey,
+      sortDirection,
+      showBanners,
+      isSmallScreen,
+      onSortPress,
+      scroller
+    } = this.props;
+
+    return (
+      <VirtualTable
+        className={styles.tableContainer}
+        items={items}
+        scrollIndex={this.state.scrollIndex}
+        isSmallScreen={isSmallScreen}
+        scroller={scroller}
+        rowHeight={showBanners ? 70 : 38}
+        overscanRowCount={2}
+        rowRenderer={this.rowRenderer}
+        header={
+          <AuthorIndexHeaderConnector
+            showBanners={showBanners}
+            columns={columns}
+            sortKey={sortKey}
+            sortDirection={sortDirection}
+            onSortPress={onSortPress}
+          />
+        }
+        columns={columns}
+        sortKey={sortKey}
+        sortDirection={sortDirection}
+      />
+    );
+  }
+}
+
+AuthorIndexTable.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,
+  scroller: PropTypes.instanceOf(Element).isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onSortPress: PropTypes.func.isRequired
+};
+
+export default AuthorIndexTable;

frontend/src/Author/Index/Table/AuthorIndexTableConnector.js

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

frontend/src/Author/Index/Table/AuthorIndexTableOptions.js

@@ -0,0 +1,100 @@
+import PropTypes from 'prop-types';
+import React, { Component, Fragment } from 'react';
+import { inputTypes } from 'Helpers/Props';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+
+class AuthorIndexTableOptions 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 names"
+            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>
+    );
+  }
+}
+
+AuthorIndexTableOptions.propTypes = {
+  showBanners: PropTypes.bool.isRequired,
+  showSearchAction: PropTypes.bool.isRequired,
+  onTableOptionChange: PropTypes.func.isRequired
+};
+
+export default AuthorIndexTableOptions;

frontend/src/Author/Index/Table/AuthorIndexTableOptionsConnector.js

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

frontend/src/Author/Index/Table/AuthorStatusCell.css

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

frontend/src/Author/Index/Table/AuthorStatusCell.js

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { icons } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
+import styles from './AuthorStatusCell.css';
+
+function AuthorStatusCell(props) {
+  const {
+    className,
+    authorType,
+    monitored,
+    status,
+    component: Component,
+    ...otherProps
+  } = props;
+
+  const endedString = authorType === 'Person' ? 'Deceased' : 'Ended';
+
+  return (
+    <Component
+      className={className}
+      {...otherProps}
+    >
+      <Icon
+        className={styles.statusIcon}
+        name={monitored ? icons.MONITORED : icons.UNMONITORED}
+        title={monitored ? 'Author is monitored' : 'Author is unmonitored'}
+      />
+
+      <Icon
+        className={styles.statusIcon}
+        name={status === 'ended' ? icons.AUTHOR_ENDED : icons.AUTHOR_CONTINUING}
+        title={status === 'ended' ? endedString : 'Continuing'}
+      />
+    </Component>
+  );
+}
+
+AuthorStatusCell.propTypes = {
+  className: PropTypes.string.isRequired,
+  authorType: PropTypes.string,
+  monitored: PropTypes.bool.isRequired,
+  status: PropTypes.string.isRequired,
+  component: PropTypes.elementType
+};
+
+AuthorStatusCell.defaultProps = {
+  className: styles.status,
+  component: VirtualTableRowCell
+};
+
+export default AuthorStatusCell;

frontend/src/Author/Index/Table/hasGrowableColumns.js

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