v3 UI

frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModal.js

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

frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModalContent.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 SeriesIndexPosterOptionsModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      detailedProgressBar: props.detailedProgressBar,
+      size: props.size,
+      showTitle: props.showTitle,
+      showMonitored: props.showMonitored,
+      showQualityProfile: props.showQualityProfile,
+      showSearchAction: props.showSearchAction
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      detailedProgressBar,
+      size,
+      showTitle,
+      showMonitored,
+      showQualityProfile,
+      showSearchAction
+    } = this.props;
+
+    const state = {};
+
+    if (detailedProgressBar !== prevProps.detailedProgressBar) {
+      state.detailedProgressBar = detailedProgressBar;
+    }
+
+    if (size !== prevProps.size) {
+      state.size = size;
+    }
+
+    if (showTitle !== prevProps.showTitle) {
+      state.showTitle = showTitle;
+    }
+
+    if (showMonitored !== prevProps.showMonitored) {
+      state.showMonitored = showMonitored;
+    }
+
+    if (showQualityProfile !== prevProps.showQualityProfile) {
+      state.showQualityProfile = showQualityProfile;
+    }
+
+    if (showSearchAction !== prevProps.showSearchAction) {
+      state.showSearchAction = showSearchAction;
+    }
+
+    if (!_.isEmpty(state)) {
+      this.setState(state);
+    }
+  }
+
+  //
+  // Listeners
+
+  onChangePosterOption = ({ name, value }) => {
+    this.setState({
+      [name]: value
+    }, () => {
+      this.props.onChangePosterOption({ [name]: value });
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      onModalClose
+    } = this.props;
+
+    const {
+      detailedProgressBar,
+      size,
+      showTitle,
+      showMonitored,
+      showQualityProfile,
+      showSearchAction
+    } = this.state;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Poster Options
+        </ModalHeader>
+
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <FormLabel>Poster Size</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.SELECT}
+                name="size"
+                value={size}
+                values={posterSizeOptions}
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Detailed Progress Bar</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="detailedProgressBar"
+                value={detailedProgressBar}
+                helpText="Show text on progess bar"
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Title</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showTitle"
+                value={showTitle}
+                helpText="Show series title under poster"
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Monitored</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showMonitored"
+                value={showMonitored}
+                helpText="Show monitored status under poster"
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Quality Profile</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showQualityProfile"
+                value={showQualityProfile}
+                helpText="Show quality profile under poster"
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Show Search</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="showSearchAction"
+                value={showSearchAction}
+                helpText="Show search button on hover"
+                onChange={this.onChangePosterOption}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+SeriesIndexPosterOptionsModalContent.propTypes = {
+  size: PropTypes.string.isRequired,
+  showTitle: PropTypes.bool.isRequired,
+  showMonitored: PropTypes.bool.isRequired,
+  showQualityProfile: PropTypes.bool.isRequired,
+  detailedProgressBar: PropTypes.bool.isRequired,
+  showSearchAction: PropTypes.bool.isRequired,
+  onChangePosterOption: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default SeriesIndexPosterOptionsModalContent;

frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModalContentConnector.js

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

frontend/src/Series/Index/Posters/SeriesIndexPoster.css

@@ -0,0 +1,102 @@
+$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: #fafbfc;
+  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: #4f566f;
+  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/Series/Index/Posters/SeriesIndexPoster.js

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

frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css

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

frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.js

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

frontend/src/Series/Index/Posters/SeriesIndexPosters.css

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

frontend/src/Series/Index/Posters/SeriesIndexPosters.js

@@ -0,0 +1,327 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Grid, WindowScroller } from 'react-virtualized';
+import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import dimensions from 'Styles/Variables/dimensions';
+import { sortDirections } from 'Helpers/Props';
+import Measure from 'Components/Measure';
+import SeriesIndexItemConnector from 'Series/Index/SeriesIndexItemConnector';
+import SeriesIndexPoster from './SeriesIndexPoster';
+import styles from './SeriesIndexPosters.css';
+
+// Poster container dimensions
+const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
+const columnPaddingSmallScreen = parseInt(dimensions.seriesIndexColumnPaddingSmallScreen);
+const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
+const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
+
+const additionalColumnCount = {
+  small: 3,
+  medium: 2,
+  large: 1
+};
+
+function calculateColumnWidth(width, posterSize, isSmallScreen) {
+  const maxiumColumnWidth = isSmallScreen ? 172 : 182;
+  const columns = Math.floor(width / maxiumColumnWidth);
+  const remainder = width % maxiumColumnWidth;
+
+  if (remainder === 0 && posterSize === 'large') {
+    return maxiumColumnWidth;
+  }
+
+  return Math.floor(width / (columns + additionalColumnCount[posterSize]));
+}
+
+function calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions) {
+  const {
+    detailedProgressBar,
+    showTitle,
+    showMonitored,
+    showQualityProfile
+  } = posterOptions;
+
+  const nextAiringHeight = 19;
+
+  const heights = [
+    posterHeight,
+    detailedProgressBar ? detailedProgressBarHeight : progressBarHeight,
+    nextAiringHeight,
+    isSmallScreen ? columnPaddingSmallScreen : columnPadding
+  ];
+
+  if (showTitle) {
+    heights.push(19);
+  }
+
+  if (showMonitored) {
+    heights.push(19);
+  }
+
+  if (showQualityProfile) {
+    heights.push(19);
+  }
+
+  switch (sortKey) {
+    case 'network':
+    case 'seasons':
+    case 'previousAiring':
+    case 'added':
+    case 'path':
+    case 'sizeOnDisk':
+      heights.push(19);
+      break;
+    case 'qualityProfileId':
+      if (!showQualityProfile) {
+        heights.push(19);
+      }
+      break;
+    default:
+      // No need to add a height of 0
+  }
+
+  return heights.reduce((acc, height) => acc + height, 0);
+}
+
+function calculatePosterHeight(posterWidth) {
+  return Math.ceil((250 / 170) * posterWidth);
+}
+
+class SeriesIndexPosters extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      width: 0,
+      columnWidth: 182,
+      columnCount: 1,
+      posterWidth: 162,
+      posterHeight: 238,
+      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {})
+    };
+
+    this._isInitialized = false;
+    this._grid = null;
+  }
+
+  componentDidMount() {
+    this._contentBodyNode = ReactDOM.findDOMNode(this.props.contentBody);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      filters,
+      sortKey,
+      sortDirection,
+      posterOptions,
+      jumpToCharacter
+    } = this.props;
+
+    const itemsChanged = hasDifferentItems(prevProps.items, items);
+
+    if (
+      prevProps.sortKey !== sortKey ||
+      prevProps.posterOptions !== posterOptions ||
+      itemsChanged
+    ) {
+      this.calculateGrid();
+    }
+
+    if (
+      prevProps.filters !== filters ||
+      prevProps.sortKey !== sortKey ||
+      prevProps.sortDirection !== sortDirection ||
+      itemsChanged
+    ) {
+      this._grid.recomputeGridSize();
+    }
+
+    if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
+      const index = getIndexOfFirstCharacter(items, jumpToCharacter);
+
+      if (index != null) {
+        const {
+          columnCount,
+          rowHeight
+        } = this.state;
+
+        const row = Math.floor(index / columnCount);
+        const scrollTop = rowHeight * row;
+
+        this.props.onScroll({ scrollTop });
+      }
+    }
+  }
+
+  //
+  // Control
+
+  setGridRef = (ref) => {
+    this._grid = ref;
+  }
+
+  calculateGrid = (width = this.state.width, isSmallScreen) => {
+    const {
+      sortKey,
+      posterOptions
+    } = this.props;
+
+    const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
+    const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen);
+    const columnCount = Math.max(Math.floor(width / columnWidth), 1);
+    const posterWidth = columnWidth - padding;
+    const posterHeight = calculatePosterHeight(posterWidth);
+    const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions);
+
+    this.setState({
+      width,
+      columnWidth,
+      columnCount,
+      posterWidth,
+      posterHeight,
+      rowHeight
+    });
+  }
+
+  cellRenderer = ({ key, rowIndex, columnIndex, style }) => {
+    const {
+      items,
+      sortKey,
+      posterOptions,
+      showRelativeDates,
+      shortDateFormat,
+      timeFormat
+    } = this.props;
+
+    const {
+      posterWidth,
+      posterHeight,
+      columnCount
+    } = this.state;
+
+    const {
+      detailedProgressBar,
+      showTitle,
+      showMonitored,
+      showQualityProfile
+    } = posterOptions;
+
+    const series = items[rowIndex * columnCount + columnIndex];
+
+    if (!series) {
+      return null;
+    }
+
+    return (
+      <SeriesIndexItemConnector
+        key={key}
+        component={SeriesIndexPoster}
+        sortKey={sortKey}
+        posterWidth={posterWidth}
+        posterHeight={posterHeight}
+        detailedProgressBar={detailedProgressBar}
+        showTitle={showTitle}
+        showMonitored={showMonitored}
+        showQualityProfile={showQualityProfile}
+        showRelativeDates={showRelativeDates}
+        shortDateFormat={shortDateFormat}
+        timeFormat={timeFormat}
+        style={style}
+        seriesId={series.id}
+        languageProfileId={series.languageProfileId}
+        qualityProfileId={series.qualityProfileId}
+      />
+    );
+  }
+
+  //
+  // Listeners
+
+  onMeasure = ({ width }) => {
+    this.calculateGrid(width, this.props.isSmallScreen);
+  }
+
+  onSectionRendered = () => {
+    if (!this._isInitialized && this._contentBodyNode) {
+      this.props.onRender();
+      this._isInitialized = true;
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      scrollTop,
+      isSmallScreen,
+      onScroll
+    } = this.props;
+
+    const {
+      width,
+      columnWidth,
+      columnCount,
+      rowHeight
+    } = this.state;
+
+    const rowCount = Math.ceil(items.length / columnCount);
+
+    return (
+      <Measure onMeasure={this.onMeasure}>
+        <WindowScroller
+          scrollElement={isSmallScreen ? undefined : this._contentBodyNode}
+          onScroll={onScroll}
+        >
+          {({ height, isScrolling }) => {
+            return (
+              <Grid
+                ref={this.setGridRef}
+                className={styles.grid}
+                autoHeight={true}
+                height={height}
+                columnCount={columnCount}
+                columnWidth={columnWidth}
+                rowCount={rowCount}
+                rowHeight={rowHeight}
+                width={width}
+                scrollTop={scrollTop}
+                overscanRowCount={2}
+                cellRenderer={this.cellRenderer}
+                onSectionRendered={this.onSectionRendered}
+              />
+            );
+          }
+          }
+        </WindowScroller>
+      </Measure>
+    );
+  }
+}
+
+SeriesIndexPosters.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  sortKey: PropTypes.string,
+  sortDirection: PropTypes.oneOf(sortDirections.all),
+  posterOptions: PropTypes.object.isRequired,
+  scrollTop: PropTypes.number.isRequired,
+  jumpToCharacter: PropTypes.string,
+  contentBody: PropTypes.object.isRequired,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  onRender: PropTypes.func.isRequired,
+  onScroll: PropTypes.func.isRequired
+};
+
+export default SeriesIndexPosters;

frontend/src/Series/Index/Posters/SeriesIndexPostersConnector.js

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