Fix: Aphrodite UI enhancements

* New: Display UI before movies have loaded

* Revised webpack bundling

* New: Option for production build with profiling

* Fixed: Faster hasDifferentItems and specialized OrOrder version

* Fixed: Faster movie selector

* Fixed: Speed up release processing, add indices (migration 161)

* Fixed: Use a worker for UI fuzzy search

* Fixed: Don't loop over all movies if we know none selected

* Fixed: Strip UrlBase from UI events before sending to sentry

Should mean that source maps are picked up correctly.

* Better selection of jump bar items

Show first, last and most common items

* Fixed: Don't repeatedly re-render cells

* Rework Movie Index and virtualTable

* Corresponding improvements for AddListMovie and ImportMovie

frontend/src/Movie/Index/Table/MovieIndexRow.css

@@ -79,6 +79,7 @@
   composes: cell;
 
   flex: 0 1 90px;
+  min-width: 60px;
 }
 
 .checkInput {

frontend/src/Movie/Index/Table/MovieIndexRow.js

@@ -1,15 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-// import getProgressBarKind from 'Utilities/Series/getProgressBarKind';
 import titleCase from 'Utilities/String/titleCase';
 import { icons } from 'Helpers/Props';
 import HeartRating from 'Components/HeartRating';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-// import ProgressBar from 'Components/ProgressBar';
 import TagListConnector from 'Components/TagListConnector';
-// import CheckInput from 'Components/Form/CheckInput';
-import VirtualTableRow from 'Components/Table/VirtualTableRow';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import MovieTitleLink from 'Movie/MovieTitleLink';
@@ -63,7 +59,6 @@ class MovieIndexRow extends Component {
 
   render() {
     const {
-      style,
       id,
       monitored,
       status,
@@ -97,7 +92,7 @@ class MovieIndexRow extends Component {
     } = this.state;
 
     return (
-      <VirtualTableRow style={style}>
+      <>
         {
           columns.map((column) => {
             const {
@@ -339,13 +334,12 @@ class MovieIndexRow extends Component {
           movieId={id}
           onModalClose={this.onDeleteMovieModalClose}
         />
-      </VirtualTableRow>
+      </>
     );
   }
 }
 
 MovieIndexRow.propTypes = {
-  style: PropTypes.object.isRequired,
   id: PropTypes.number.isRequired,
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,

frontend/src/Movie/Index/Table/MovieIndexTable.js

@@ -3,6 +3,7 @@ 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 MovieIndexItemConnector from 'Movie/Index/MovieIndexItemConnector';
 import MovieIndexHeaderConnector from './MovieIndexHeaderConnector';
 import MovieIndexRow from './MovieIndexRow';
@@ -23,11 +24,10 @@ class MovieIndexTable extends Component {
 
   componentDidUpdate(prevProps) {
     const {
-      items
+      items,
+      jumpToCharacter
     } = this.props;
 
-    const jumpToCharacter = this.props.jumpToCharacter;
-
     if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
 
       const scrollIndex = getIndexOfFirstCharacter(items, jumpToCharacter);
@@ -55,17 +55,21 @@ class MovieIndexTable extends Component {
     const movie = items[rowIndex];
 
     return (
-      <MovieIndexItemConnector
+      <VirtualTableRow
         key={key}
-        component={MovieIndexRow}
         style={style}
-        columns={columns}
-        movieId={movie.id}
-        qualityProfileId={movie.qualityProfileId}
-        isSelected={selectedState[movie.id]}
-        onSelectedChange={onSelectedChange}
-        isMovieEditorActive={isMovieEditorActive}
-      />
+      >
+        <MovieIndexItemConnector
+          key={movie.id}
+          component={MovieIndexRow}
+          columns={columns}
+          movieId={movie.id}
+          qualityProfileId={movie.qualityProfileId}
+          isSelected={selectedState[movie.id]}
+          onSelectedChange={onSelectedChange}
+          isMovieEditorActive={isMovieEditorActive}
+        />
+      </VirtualTableRow>
     );
   }
 
@@ -76,15 +80,11 @@ class MovieIndexTable extends Component {
     const {
       items,
       columns,
-      filters,
       sortKey,
       sortDirection,
       isSmallScreen,
-      scrollTop,
-      contentBody,
       onSortPress,
-      onRender,
-      onScroll,
+      scroller,
       allSelected,
       allUnselected,
       onSelectAllChange,
@@ -96,10 +96,9 @@ class MovieIndexTable extends Component {
       <VirtualTable
         className={styles.tableContainer}
         items={items}
-        scrollTop={scrollTop}
         scrollIndex={this.state.scrollIndex}
-        contentBody={contentBody}
         isSmallScreen={isSmallScreen}
+        scroller={scroller}
         rowHeight={38}
         overscanRowCount={2}
         rowRenderer={this.rowRenderer}
@@ -117,11 +116,6 @@ class MovieIndexTable extends Component {
         }
         selectedState={selectedState}
         columns={columns}
-        filters={filters}
-        sortKey={sortKey}
-        sortDirection={sortDirection}
-        onRender={onRender}
-        onScroll={onScroll}
       />
     );
   }
@@ -130,16 +124,12 @@ class MovieIndexTable extends Component {
 MovieIndexTable.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   sortKey: PropTypes.string,
   sortDirection: PropTypes.oneOf(sortDirections.all),
-  scrollTop: PropTypes.number.isRequired,
   jumpToCharacter: PropTypes.string,
-  contentBody: PropTypes.object.isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
+  scroller: PropTypes.instanceOf(Element).isRequired,
   onSortPress: PropTypes.func.isRequired,
-  onRender: PropTypes.func.isRequired,
-  onScroll: PropTypes.func.isRequired,
   allSelected: PropTypes.bool.isRequired,
   allUnselected: PropTypes.bool.isRequired,
   selectedState: PropTypes.object.isRequired,