v3 UI

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;