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/AddMovie/ImportMovie/Import/ImportMovie.js

@@ -22,16 +22,15 @@ class ImportMovie extends Component {
       allUnselected: false,
       lastToggled: null,
       selectedState: {},
-      contentBody: null,
-      scrollTop: 0
+      contentBody: null
     };
   }
 
   //
   // Control
 
-  setContentBodyRef = (ref) => {
-    this.setState({ contentBody: ref });
+  setScrollerRef = (ref) => {
+    this.setState({ scroller: ref });
   }
 
   //
@@ -72,10 +71,6 @@ class ImportMovie extends Component {
     this.props.onImportPress(this.getSelectedIds());
   }
 
-  onScroll = ({ scrollTop }) => {
-    this.setState({ scrollTop });
-  }
-
   //
   // Render
 
@@ -93,13 +88,13 @@ class ImportMovie extends Component {
       allSelected,
       allUnselected,
       selectedState,
-      contentBody
+      scroller
     } = this.state;
 
     return (
       <PageContent title="Import Movies">
         <PageContentBodyConnector
-          ref={this.setContentBodyRef}
+          registerScroller={this.setScrollerRef}
           onScroll={this.onScroll}
         >
           {
@@ -120,19 +115,17 @@ class ImportMovie extends Component {
           }
 
           {
-            !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length && contentBody &&
+            !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length && scroller &&
               <ImportMovieTableConnector
                 rootFolderId={rootFolderId}
                 unmappedFolders={unmappedFolders}
                 allSelected={allSelected}
                 allUnselected={allUnselected}
                 selectedState={selectedState}
-                contentBody={contentBody}
-                scrollTop={this.state.scrollTop}
+                scroller={scroller}
                 onSelectAllChange={this.onSelectAllChange}
                 onSelectedChange={this.onSelectedChange}
                 onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}
-                onScroll={this.onScroll}
               />
           }
         </PageContentBodyConnector>

frontend/src/AddMovie/ImportMovie/Import/ImportMovieRow.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { inputTypes } from 'Helpers/Props';
 import FormInputGroup from 'Components/Form/FormInputGroup';
-import VirtualTableRow from 'Components/Table/VirtualTableRow';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import ImportMovieSelectMovieConnector from './SelectMovie/ImportMovieSelectMovieConnector';
@@ -10,7 +9,6 @@ import styles from './ImportMovieRow.css';
 
 function ImportMovieRow(props) {
   const {
-    style,
     id,
     monitor,
     qualityProfileId,
@@ -23,7 +21,7 @@ function ImportMovieRow(props) {
   } = props;
 
   return (
-    <VirtualTableRow style={style}>
+    <>
       <VirtualTableSelectCell
         inputClassName={styles.selectInput}
         id={id}
@@ -69,12 +67,11 @@ function ImportMovieRow(props) {
           isExistingMovie={isExistingMovie}
         />
       </VirtualTableRowCell>
-    </VirtualTableRow>
+    </>
   );
 }
 
 ImportMovieRow.propTypes = {
-  style: PropTypes.object.isRequired,
   id: PropTypes.string.isRequired,
   monitor: PropTypes.string.isRequired,
   qualityProfileId: PropTypes.number.isRequired,

frontend/src/AddMovie/ImportMovie/Import/ImportMovieTable.js

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import VirtualTable from 'Components/Table/VirtualTable';
+import VirtualTableRow from 'Components/Table/VirtualTableRow';
 import ImportMovieHeader from './ImportMovieHeader';
 import ImportMovieRowConnector from './ImportMovieRowConnector';
 
@@ -107,14 +108,18 @@ class ImportMovieTable extends Component {
     const item = items[rowIndex];
 
     return (
-      <ImportMovieRowConnector
+      <VirtualTableRow
         key={key}
         style={style}
-        rootFolderId={rootFolderId}
-        isSelected={selectedState[item.id]}
-        onSelectedChange={onSelectedChange}
-        id={item.id}
-      />
+      >
+        <ImportMovieRowConnector
+          key={item.id}
+          rootFolderId={rootFolderId}
+          isSelected={selectedState[item.id]}
+          onSelectedChange={onSelectedChange}
+          id={item.id}
+        />
+      </VirtualTableRow>
     );
   }
 
@@ -127,11 +132,9 @@ class ImportMovieTable extends Component {
       allSelected,
       allUnselected,
       isSmallScreen,
-      contentBody,
-      scrollTop,
+      scroller,
       selectedState,
-      onSelectAllChange,
-      onScroll
+      onSelectAllChange
     } = this.props;
 
     if (!items.length) {
@@ -141,10 +144,9 @@ class ImportMovieTable extends Component {
     return (
       <VirtualTable
         items={items}
-        contentBody={contentBody}
         isSmallScreen={isSmallScreen}
+        scroller={scroller}
         rowHeight={52}
-        scrollTop={scrollTop}
         overscanRowCount={2}
         rowRenderer={this.rowRenderer}
         header={
@@ -155,7 +157,6 @@ class ImportMovieTable extends Component {
           />
         }
         selectedState={selectedState}
-        onScroll={onScroll}
       />
     );
   }
@@ -173,14 +174,12 @@ ImportMovieTable.propTypes = {
   selectedState: PropTypes.object.isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
   allMovies: PropTypes.arrayOf(PropTypes.object),
-  contentBody: PropTypes.object.isRequired,
-  scrollTop: PropTypes.number.isRequired,
+  scroller: PropTypes.instanceOf(Element).isRequired,
   onSelectAllChange: PropTypes.func.isRequired,
   onSelectedChange: PropTypes.func.isRequired,
   onRemoveSelectedStateItem: PropTypes.func.isRequired,
   onMovieLookup: PropTypes.func.isRequired,
-  onSetImportMovieValue: PropTypes.func.isRequired,
-  onScroll: PropTypes.func.isRequired
+  onSetImportMovieValue: PropTypes.func.isRequired
 };
 
 export default ImportMovieTable;

frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.css

@@ -3,6 +3,7 @@
 
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding: 6px 16px;
   width: 100%;
   height: 35px;
@@ -25,7 +26,6 @@
 }
 
 .dropdownArrowContainer {
-  position: absolute;
   right: 16px;
 }