More Cleanup

frontend/src/Indexer/Index/Menus/MovieIndexFilterMenu.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import { align } from 'Helpers/Props';
+import MovieIndexFilterModalConnector from 'Indexer/Index/MovieIndexFilterModalConnector';
+
+function MovieIndexFilterMenu(props) {
+  const {
+    selectedFilterKey,
+    filters,
+    customFilters,
+    isDisabled,
+    onFilterSelect
+  } = props;
+
+  return (
+    <FilterMenu
+      alignMenu={align.RIGHT}
+      isDisabled={isDisabled}
+      selectedFilterKey={selectedFilterKey}
+      filters={filters}
+      customFilters={customFilters}
+      filterModalConnectorComponent={MovieIndexFilterModalConnector}
+      onFilterSelect={onFilterSelect}
+    />
+  );
+}
+
+MovieIndexFilterMenu.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
+};
+
+MovieIndexFilterMenu.defaultProps = {
+  showCustomFilters: false
+};
+
+export default MovieIndexFilterMenu;

frontend/src/Indexer/Index/Menus/MovieIndexSearchMenu.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Menu from 'Components/Menu/Menu';
+import MenuContent from 'Components/Menu/MenuContent';
+import SearchMenuItem from 'Components/Menu/SearchMenuItem';
+import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
+import { align, icons } from 'Helpers/Props';
+
+class MovieIndexSearchMenu extends Component {
+
+  render() {
+    const {
+      isDisabled,
+      onSearchPress
+    } = this.props;
+
+    return (
+      <Menu
+        isDisabled={isDisabled}
+        alignMenu={align.RIGHT}
+      >
+        <ToolbarMenuButton
+          iconName={icons.SEARCH}
+          text="Search"
+          isDisabled={isDisabled}
+        />
+        <MenuContent>
+          <SearchMenuItem
+            name="missingMoviesSearch"
+            onPress={onSearchPress}
+          >
+            Search Missing
+          </SearchMenuItem>
+
+          <SearchMenuItem
+            name="cutoffUnmetMoviesSearch"
+            onPress={onSearchPress}
+          >
+            Search Cutoff Unmet
+          </SearchMenuItem>
+        </MenuContent>
+      </Menu>
+    );
+  }
+}
+
+MovieIndexSearchMenu.propTypes = {
+  isDisabled: PropTypes.bool.isRequired,
+  onSearchPress: PropTypes.func.isRequired
+};
+
+export default MovieIndexSearchMenu;

frontend/src/Indexer/Index/Menus/MovieIndexSortMenu.js

@@ -0,0 +1,142 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import MenuContent from 'Components/Menu/MenuContent';
+import SortMenu from 'Components/Menu/SortMenu';
+import SortMenuItem from 'Components/Menu/SortMenuItem';
+import { align, sortDirections } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+function MovieIndexSortMenu(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="sortTitle"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Title')}
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="studio"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Studio')}
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="qualityProfileId"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('QualityProfile')}
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="added"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Added')}
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="year"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Year')}
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="inCinemas"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('InCinemas')}
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="physicalRelease"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('PhysicalRelease')}
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="digitalRelease"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('DigitalRelease')}
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="path"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Path')}
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="sizeOnDisk"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('SizeOnDisk')}
+        </SortMenuItem>
+
+        <SortMenuItem
+          name="certification"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Certification')}
+        </SortMenuItem>
+      </MenuContent>
+    </SortMenu>
+  );
+}
+
+MovieIndexSortMenu.propTypes = {
+  sortKey: PropTypes.string,
+  sortDirection: PropTypes.oneOf(sortDirections.all),
+  isDisabled: PropTypes.bool.isRequired,
+  onSortSelect: PropTypes.func.isRequired
+};
+
+export default MovieIndexSortMenu;

frontend/src/Indexer/Index/MovieIndex.css

@@ -0,0 +1,57 @@
+.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);
+}
+
+.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);
+  }
+}

frontend/src/Indexer/Index/MovieIndex.js

@@ -0,0 +1,593 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageJumpBar from 'Components/Page/PageJumpBar';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
+import MovieEditorFooter from 'Indexer/Editor/MovieEditorFooter.js';
+import OrganizeMovieModal from 'Indexer/Editor/Organize/OrganizeMovieModal';
+import NoMovie from 'Indexer/NoMovie';
+import * as keyCodes from 'Utilities/Constants/keyCodes';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import MovieIndexFilterMenu from './Menus/MovieIndexFilterMenu';
+import MovieIndexSortMenu from './Menus/MovieIndexSortMenu';
+import MovieIndexFooterConnector from './MovieIndexFooterConnector';
+import MovieIndexTableConnector from './Table/MovieIndexTableConnector';
+import MovieIndexTableOptionsConnector from './Table/MovieIndexTableOptionsConnector';
+import styles from './MovieIndex.css';
+
+function getViewComponent(view) {
+  return MovieIndexTableConnector;
+}
+
+class MovieIndex extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      scroller: null,
+      jumpBarItems: { order: [] },
+      jumpToCharacter: null,
+      isPosterOptionsModalOpen: false,
+      isOverviewOptionsModalOpen: false,
+      isMovieEditorActive: false,
+      isOrganizingMovieModalOpen: false,
+      isConfirmSearchModalOpen: false,
+      searchType: null,
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {}
+    };
+  }
+
+  componentDidMount() {
+    this.setJumpBarItems();
+    this.setSelectedState();
+
+    window.addEventListener('keyup', this.onKeyUp);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      sortKey,
+      sortDirection,
+      isDeleting,
+      deleteError
+    } = this.props;
+
+    if (sortKey !== prevProps.sortKey ||
+        sortDirection !== prevProps.sortDirection ||
+        hasDifferentItemsOrOrder(prevProps.items, items)
+    ) {
+      this.setJumpBarItems();
+      this.setSelectedState();
+    }
+
+    if (this.state.jumpToCharacter != null) {
+      this.setState({ jumpToCharacter: null });
+    }
+
+    const hasFinishedDeleting = prevProps.isDeleting &&
+                                !isDeleting &&
+                                !deleteError;
+
+    if (hasFinishedDeleting) {
+      this.onSelectAllChange({ value: false });
+    }
+  }
+
+  //
+  // Control
+
+  setScrollerRef = (ref) => {
+    this.setState({ scroller: ref });
+  }
+
+  getSelectedIds = () => {
+    if (this.state.allUnselected) {
+      return [];
+    }
+    return getSelectedIds(this.state.selectedState);
+  }
+
+  setSelectedState() {
+    const {
+      items
+    } = this.props;
+
+    const {
+      selectedState
+    } = this.state;
+
+    const newSelectedState = {};
+
+    items.forEach((movie) => {
+      const isItemSelected = selectedState[movie.id];
+
+      if (isItemSelected) {
+        newSelectedState[movie.id] = isItemSelected;
+      } else {
+        newSelectedState[movie.id] = false;
+      }
+    });
+
+    const selectedCount = getSelectedIds(newSelectedState).length;
+    const newStateCount = Object.keys(newSelectedState).length;
+    let isAllSelected = false;
+    let isAllUnselected = false;
+
+    if (selectedCount === 0) {
+      isAllUnselected = true;
+    } else if (selectedCount === newStateCount) {
+      isAllSelected = true;
+    }
+
+    this.setState({ selectedState: newSelectedState, allSelected: isAllSelected, allUnselected: isAllUnselected });
+  }
+
+  setJumpBarItems() {
+    const {
+      items,
+      sortKey,
+      sortDirection
+    } = this.props;
+
+    // Reset if not sorting by sortTitle
+    if (sortKey !== 'sortTitle') {
+      this.setState({ jumpBarItems: { order: [] } });
+      return;
+    }
+
+    const characters = _.reduce(items, (acc, item) => {
+      let char = item.sortTitle.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 });
+  }
+
+  onOverviewOptionsPress = () => {
+    this.setState({ isOverviewOptionsModalOpen: true });
+  }
+
+  onOverviewOptionsModalClose = () => {
+    this.setState({ isOverviewOptionsModalOpen: false });
+  }
+
+  onMovieEditorTogglePress = () => {
+    if (this.state.isMovieEditorActive) {
+      this.setState({ isMovieEditorActive: false });
+    } else {
+      const newState = selectAll(this.state.selectedState, false);
+      newState.isMovieEditorActive = true;
+      this.setState(newState);
+    }
+  }
+
+  onJumpBarItemPress = (jumpToCharacter) => {
+    this.setState({ jumpToCharacter });
+  }
+
+  onKeyUp = (event) => {
+    const jumpBarItems = this.state.jumpBarItems.order;
+    if (event.path.length === 4) {
+      if (event.keyCode === keyCodes.HOME && event.ctrlKey) {
+        this.setState({ jumpToCharacter: jumpBarItems[0] });
+      }
+      if (event.keyCode === keyCodes.END && event.ctrlKey) {
+        this.setState({ jumpToCharacter: jumpBarItems[jumpBarItems.length - 1] });
+      }
+    }
+  }
+
+  onSelectAllChange = ({ value }) => {
+    this.setState(selectAll(this.state.selectedState, value));
+  }
+
+  onSelectAllPress = () => {
+    this.onSelectAllChange({ value: !this.state.allSelected });
+  }
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey);
+    });
+  }
+
+  onSaveSelected = (changes) => {
+    this.props.onSaveSelected({
+      movieIds: this.getSelectedIds(),
+      ...changes
+    });
+  }
+
+  onOrganizeMoviePress = () => {
+    this.setState({ isOrganizingMovieModalOpen: true });
+  }
+
+  onOrganizeMovieModalClose = (organized) => {
+    this.setState({ isOrganizingMovieModalOpen: false });
+
+    if (organized === true) {
+      this.onSelectAllChange({ value: false });
+    }
+  }
+
+  onSearchPress = () => {
+    this.setState({ isConfirmSearchModalOpen: true, searchType: 'moviesSearch' });
+  }
+
+  onRefreshMoviePress = () => {
+    const selectedMovieIds = this.getSelectedIds();
+    const refreshIds = this.state.isMovieEditorActive && selectedMovieIds.length > 0 ? selectedMovieIds : [];
+
+    this.props.onRefreshMoviePress(refreshIds);
+  }
+
+  onSearchConfirmed = () => {
+    const selectedMovieIds = this.getSelectedIds();
+    const searchIds = this.state.isMovieEditorActive && selectedMovieIds.length > 0 ? selectedMovieIds : this.props.items.map((m) => m.id);
+
+    this.props.onSearchPress(this.state.searchType, searchIds);
+    this.setState({ isConfirmSearchModalOpen: false });
+  }
+
+  onConfirmSearchModalClose = () => {
+    this.setState({ isConfirmSearchModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      totalItems,
+      items,
+      columns,
+      selectedFilterKey,
+      filters,
+      customFilters,
+      sortKey,
+      sortDirection,
+      view,
+      isRefreshingMovie,
+      isRssSyncExecuting,
+      isOrganizingMovie,
+      isSearchingMovies,
+      isSaving,
+      saveError,
+      isDeleting,
+      deleteError,
+      onScroll,
+      onSortSelect,
+      onFilterSelect,
+      onViewSelect,
+      onRefreshMoviePress,
+      onRssSyncPress,
+      onSearchPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      scroller,
+      jumpBarItems,
+      jumpToCharacter,
+      isConfirmSearchModalOpen,
+      isMovieEditorActive,
+      selectedState,
+      allSelected,
+      allUnselected
+    } = this.state;
+
+    const selectedMovieIds = this.getSelectedIds();
+
+    const ViewComponent = getViewComponent(view);
+    const isLoaded = !!(!error && isPopulated && items.length && scroller);
+    const hasNoMovie = !totalItems;
+
+    return (
+      <PageContent>
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label={'Add Indexer'}
+              iconName={icons.ADD}
+              spinningName={icons.ADD}
+              isSpinning={isRefreshingMovie}
+              isDisabled={hasNoMovie}
+              onPress={this.onRefreshMoviePress}
+            />
+
+            <PageToolbarButton
+              label={'Test All Indexers'}
+              iconName={icons.TEST}
+              spinningName={icons.TEST}
+              isSpinning={isRefreshingMovie}
+              isDisabled={hasNoMovie}
+              onPress={this.onRefreshMoviePress}
+            />
+
+            <PageToolbarSeparator />
+
+            {
+              isMovieEditorActive ?
+                <PageToolbarButton
+                  label={'Indexers'}
+                  iconName={icons.MOVIE_CONTINUING}
+                  isDisabled={hasNoMovie}
+                  onPress={this.onMovieEditorTogglePress}
+                /> :
+                <PageToolbarButton
+                  label={'Mass Editor'}
+                  iconName={icons.EDIT}
+                  isDisabled={hasNoMovie}
+                  onPress={this.onMovieEditorTogglePress}
+                />
+            }
+
+            {
+              isMovieEditorActive ?
+                <PageToolbarButton
+                  label={allSelected ? translate('UnselectAll') : translate('SelectAll')}
+                  iconName={icons.CHECK_SQUARE}
+                  isDisabled={hasNoMovie}
+                  onPress={this.onSelectAllPress}
+                /> :
+                null
+            }
+
+          </PageToolbarSection>
+
+          <PageToolbarSection
+            alignContent={align.RIGHT}
+            collapseButtons={false}
+          >
+            {
+              view === 'table' ?
+                <TableOptionsModalWrapper
+                  {...otherProps}
+                  columns={columns}
+                  optionsComponent={MovieIndexTableOptionsConnector}
+                >
+                  <PageToolbarButton
+                    label={translate('Options')}
+                    iconName={icons.TABLE}
+                  />
+                </TableOptionsModalWrapper> :
+                null
+            }
+
+            {
+              view === 'posters' ?
+                <PageToolbarButton
+                  label={translate('Options')}
+                  iconName={icons.POSTER}
+                  isDisabled={hasNoMovie}
+                  onPress={this.onPosterOptionsPress}
+                /> :
+                null
+            }
+
+            {
+              view === 'overview' ?
+                <PageToolbarButton
+                  label={translate('Options')}
+                  iconName={icons.OVERVIEW}
+                  isDisabled={hasNoMovie}
+                  onPress={this.onOverviewOptionsPress}
+                /> :
+                null
+            }
+
+            <PageToolbarSeparator />
+
+            <MovieIndexSortMenu
+              sortKey={sortKey}
+              sortDirection={sortDirection}
+              isDisabled={hasNoMovie}
+              onSortSelect={onSortSelect}
+            />
+
+            <MovieIndexFilterMenu
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={customFilters}
+              isDisabled={hasNoMovie}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <div className={styles.pageContentBodyWrapper}>
+          <PageContentBody
+            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 movie from API')}
+                </div>
+            }
+
+            {
+              isLoaded &&
+                <div className={styles.contentBodyContainer}>
+                  <ViewComponent
+                    scroller={scroller}
+                    items={items}
+                    filters={filters}
+                    sortKey={sortKey}
+                    sortDirection={sortDirection}
+                    jumpToCharacter={jumpToCharacter}
+                    isMovieEditorActive={isMovieEditorActive}
+                    allSelected={allSelected}
+                    allUnselected={allUnselected}
+                    onSelectedChange={this.onSelectedChange}
+                    onSelectAllChange={this.onSelectAllChange}
+                    selectedState={selectedState}
+                    {...otherProps}
+                  />
+
+                  {
+                    !isMovieEditorActive &&
+                      <MovieIndexFooterConnector />
+                  }
+                </div>
+            }
+
+            {
+              !error && isPopulated && !items.length &&
+                <NoMovie totalItems={totalItems} />
+            }
+          </PageContentBody>
+
+          {
+            isLoaded && !!jumpBarItems.order.length &&
+              <PageJumpBar
+                items={jumpBarItems}
+                onItemPress={this.onJumpBarItemPress}
+              />
+          }
+        </div>
+
+        {
+          isLoaded && isMovieEditorActive &&
+            <MovieEditorFooter
+              movieIds={selectedMovieIds}
+              selectedCount={selectedMovieIds.length}
+              isSaving={isSaving}
+              saveError={saveError}
+              isDeleting={isDeleting}
+              deleteError={deleteError}
+              isOrganizingMovie={isOrganizingMovie}
+              onSaveSelected={this.onSaveSelected}
+              onOrganizeMoviePress={this.onOrganizeMoviePress}
+            />
+        }
+
+        <OrganizeMovieModal
+          isOpen={this.state.isOrganizingMovieModalOpen}
+          movieIds={selectedMovieIds}
+          onModalClose={this.onOrganizeMovieModalClose}
+        />
+
+        <ConfirmModal
+          isOpen={isConfirmSearchModalOpen}
+          kind={kinds.DANGER}
+          title={translate('MassMovieSearch')}
+          message={
+            <div>
+              <div>
+                Are you sure you want to perform mass movie search for {isMovieEditorActive && selectedMovieIds.length > 0 ? selectedMovieIds.length : this.props.items.length} movies?
+              </div>
+              <div>
+                This cannot be cancelled once started without restarting Prowlarr.
+              </div>
+            </div>
+          }
+          confirmLabel={translate('Search')}
+          onConfirm={this.onSearchConfirmed}
+          onCancel={this.onConfirmSearchModalClose}
+        />
+      </PageContent>
+    );
+  }
+}
+
+MovieIndex.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,
+  isRefreshingMovie: PropTypes.bool.isRequired,
+  isOrganizingMovie: PropTypes.bool.isRequired,
+  isSearchingMovies: PropTypes.bool.isRequired,
+  isRssSyncExecuting: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  isDeleting: PropTypes.bool.isRequired,
+  deleteError: PropTypes.object,
+  onSortSelect: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired,
+  onViewSelect: PropTypes.func.isRequired,
+  onRefreshMoviePress: PropTypes.func.isRequired,
+  onRssSyncPress: PropTypes.func.isRequired,
+  onSearchPress: PropTypes.func.isRequired,
+  onScroll: PropTypes.func.isRequired,
+  onSaveSelected: PropTypes.func.isRequired
+};
+
+export default MovieIndex;

frontend/src/Indexer/Index/MovieIndexConnector.js

@@ -0,0 +1,133 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import withScrollPosition from 'Components/withScrollPosition';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { saveMovieEditor, setMovieFilter, setMovieSort, setMovieTableOption, setMovieView } from 'Store/Actions/movieIndexActions';
+import scrollPositions from 'Store/scrollPositions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createMovieClientSideCollectionItemsSelector from 'Store/Selectors/createMovieClientSideCollectionItemsSelector';
+import MovieIndex from './MovieIndex';
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieClientSideCollectionItemsSelector('movieIndex'),
+    createCommandExecutingSelector(commandNames.REFRESH_MOVIE),
+    createCommandExecutingSelector(commandNames.RSS_SYNC),
+    createCommandExecutingSelector(commandNames.RENAME_MOVIE),
+    createCommandExecutingSelector(commandNames.CUTOFF_UNMET_MOVIES_SEARCH),
+    createCommandExecutingSelector(commandNames.MISSING_MOVIES_SEARCH),
+    createDimensionsSelector(),
+    (
+      movies,
+      isRefreshingMovie,
+      isRssSyncExecuting,
+      isOrganizingMovie,
+      isCutoffMoviesSearch,
+      isMissingMoviesSearch,
+      dimensionsState
+    ) => {
+      return {
+        ...movies,
+        isRefreshingMovie,
+        isRssSyncExecuting,
+        isOrganizingMovie,
+        isSearchingMovies: isCutoffMoviesSearch || isMissingMoviesSearch,
+        isSmallScreen: dimensionsState.isSmallScreen
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onTableOptionChange(payload) {
+      dispatch(setMovieTableOption(payload));
+    },
+
+    onSortSelect(sortKey) {
+      dispatch(setMovieSort({ sortKey }));
+    },
+
+    onFilterSelect(selectedFilterKey) {
+      dispatch(setMovieFilter({ selectedFilterKey }));
+    },
+
+    dispatchSetMovieView(view) {
+      dispatch(setMovieView({ view }));
+    },
+
+    dispatchSaveMovieEditor(payload) {
+      dispatch(saveMovieEditor(payload));
+    },
+
+    onRefreshMoviePress(items) {
+      dispatch(executeCommand({
+        name: commandNames.REFRESH_MOVIE,
+        movieIds: items
+      }));
+    },
+
+    onRssSyncPress() {
+      dispatch(executeCommand({
+        name: commandNames.RSS_SYNC
+      }));
+    },
+
+    onSearchPress(command, items) {
+      dispatch(executeCommand({
+        name: command,
+        movieIds: items
+      }));
+    }
+  };
+}
+
+class MovieIndexConnector extends Component {
+
+  //
+  // Listeners
+
+  onViewSelect = (view) => {
+    // Reset the scroll position before changing the view
+    this.props.dispatchSetMovieView(view);
+  }
+
+  onSaveSelected = (payload) => {
+    this.props.dispatchSaveMovieEditor(payload);
+  }
+
+  onScroll = ({ scrollTop }) => {
+    scrollPositions.movieIndex = scrollTop;
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <MovieIndex
+        {...this.props}
+        onViewSelect={this.onViewSelect}
+        onScroll={this.onScroll}
+        onSaveSelected={this.onSaveSelected}
+      />
+    );
+  }
+}
+
+MovieIndexConnector.propTypes = {
+  isSmallScreen: PropTypes.bool.isRequired,
+  view: PropTypes.string.isRequired,
+  dispatchSetMovieView: PropTypes.func.isRequired,
+  dispatchSaveMovieEditor: PropTypes.func.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object)
+};
+
+export default withScrollPosition(
+  connect(createMapStateToProps, createMapDispatchToProps)(MovieIndexConnector),
+  'movieIndex'
+);

frontend/src/Indexer/Index/MovieIndexFilterModalConnector.js

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

frontend/src/Indexer/Index/MovieIndexFooter.css

@@ -0,0 +1,86 @@
+.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;
+}
+
+.queue {
+  composes: legendItemColor;
+
+  background-color: $queueColor;
+}
+
+.continuing {
+  composes: legendItemColor;
+
+  background-color: $primaryColor;
+}
+
+.availNotMonitored {
+  composes: legendItemColor;
+
+  background-color: $darkGray;
+}
+
+.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/Indexer/Index/MovieIndexFooter.js

@@ -0,0 +1,132 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
+import styles from './MovieIndexFooter.css';
+
+class MovieIndexFooter extends PureComponent {
+
+  render() {
+    const {
+      movies,
+      colorImpairedMode
+    } = this.props;
+
+    const count = movies.length;
+    let movieFiles = 0;
+    let monitored = 0;
+    let totalFileSize = 0;
+
+    movies.forEach((s) => {
+
+      if (s.hasFile) {
+        movieFiles += 1;
+      }
+
+      if (s.monitored) {
+        monitored++;
+      }
+
+      totalFileSize += s.sizeOnDisk;
+    });
+
+    return (
+      <div className={styles.footer}>
+        <div>
+          <div className={styles.legendItem}>
+            <div className={styles.ended} />
+            <div>
+              {translate('DownloadedAndMonitored')}
+            </div>
+          </div>
+
+          <div className={styles.legendItem}>
+            <div className={styles.availNotMonitored} />
+            <div>
+              {translate('DownloadedButNotMonitored')}
+            </div>
+          </div>
+
+          <div className={styles.legendItem}>
+            <div className={classNames(
+              styles.missingMonitored,
+              colorImpairedMode && 'colorImpaired'
+            )}
+            />
+            <div>
+              {translate('MissingMonitoredAndConsideredAvailable')}
+            </div>
+          </div>
+
+          <div className={styles.legendItem}>
+            <div className={classNames(
+              styles.missingUnmonitored,
+              colorImpairedMode && 'colorImpaired'
+            )}
+            />
+            <div>
+              {translate('MissingNotMonitored')}
+            </div>
+          </div>
+
+          <div className={styles.legendItem}>
+            <div className={styles.queue} />
+            <div>
+              {translate('Queued')}
+            </div>
+          </div>
+
+          <div className={styles.legendItem}>
+            <div className={styles.continuing} />
+            <div>
+              {translate('Unreleased')}
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.statistics}>
+          <DescriptionList>
+            <DescriptionListItem
+              title={translate('Movies')}
+              data={count}
+            />
+
+            <DescriptionListItem
+              title={translate('MovieFiles')}
+              data={movieFiles}
+            />
+          </DescriptionList>
+
+          <DescriptionList>
+            <DescriptionListItem
+              title={translate('Monitored')}
+              data={monitored}
+            />
+
+            <DescriptionListItem
+              title={translate('Unmonitored')}
+              data={count - monitored}
+            />
+          </DescriptionList>
+
+          <DescriptionList>
+            <DescriptionListItem
+              title={translate('TotalFileSize')}
+              data={formatBytes(totalFileSize)}
+            />
+          </DescriptionList>
+        </div>
+      </div>
+    );
+  }
+}
+
+MovieIndexFooter.propTypes = {
+  movies: PropTypes.arrayOf(PropTypes.object).isRequired,
+  colorImpairedMode: PropTypes.bool.isRequired
+};
+
+export default MovieIndexFooter;

frontend/src/Indexer/Index/MovieIndexFooterConnector.js

@@ -0,0 +1,53 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import createDeepEqualSelector from 'Store/Selectors/createDeepEqualSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import MovieIndexFooter from './MovieIndexFooter';
+
+function createUnoptimizedSelector() {
+  return createSelector(
+    createClientSideCollectionSelector('movies', 'movieIndex'),
+    (movies) => {
+      return movies.items.map((s) => {
+        const {
+          monitored,
+          status,
+          statistics,
+          sizeOnDisk,
+          hasFile
+        } = s;
+
+        return {
+          monitored,
+          status,
+          statistics,
+          sizeOnDisk,
+          hasFile
+        };
+      });
+    }
+  );
+}
+
+function createMoviesSelector() {
+  return createDeepEqualSelector(
+    createUnoptimizedSelector(),
+    (movies) => movies
+  );
+}
+
+function createMapStateToProps() {
+  return createSelector(
+    createMoviesSelector(),
+    createUISettingsSelector(),
+    (movies, uiSettings) => {
+      return {
+        movies,
+        colorImpairedMode: uiSettings.enableColorImpairedMode
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(MovieIndexFooter);

frontend/src/Indexer/Index/MovieIndexItemConnector.js

@@ -0,0 +1,117 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import { executeCommand } from 'Store/Actions/commandActions';
+import createExecutingCommandsSelector from 'Store/Selectors/createExecutingCommandsSelector';
+import createMovieSelector from 'Store/Selectors/createMovieSelector';
+
+function selectShowSearchAction() {
+  return createSelector(
+    (state) => state.movieIndex,
+    (movieIndex) => {
+      return movieIndex.tableOptions.showSearchAction;
+    }
+  );
+}
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieSelector(),
+    selectShowSearchAction(),
+    createExecutingCommandsSelector(),
+    (
+      movie,
+      showSearchAction,
+      executingCommands
+    ) => {
+
+      // If a movie is deleted this selector may fire before the parent
+      // selecors, which will result in an undefined movie, if that happens
+      // we want to return early here and again in the render function to avoid
+      // trying to show a movie that has no information available.
+
+      if (!movie) {
+        return {};
+      }
+
+      const isRefreshingMovie = executingCommands.some((command) => {
+        return (
+          command.name === commandNames.REFRESH_MOVIE &&
+          command.body.movieIds.includes(movie.id)
+        );
+      });
+
+      const isSearchingMovie = executingCommands.some((command) => {
+        return (
+          command.name === commandNames.MOVIE_SEARCH &&
+          command.body.movieIds.includes(movie.id)
+        );
+      });
+
+      return {
+        ...movie,
+        showSearchAction,
+        isRefreshingMovie,
+        isSearchingMovie
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchExecuteCommand: executeCommand
+};
+
+class MovieIndexItemConnector extends Component {
+
+  //
+  // Listeners
+
+  onRefreshMoviePress = () => {
+    this.props.dispatchExecuteCommand({
+      name: commandNames.REFRESH_MOVIE,
+      movieIds: [this.props.id]
+    });
+  }
+
+  onSearchPress = () => {
+    this.props.dispatchExecuteCommand({
+      name: commandNames.MOVIE_SEARCH,
+      movieIds: [this.props.id]
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      component: ItemComponent,
+      ...otherProps
+    } = this.props;
+
+    if (!id) {
+      return null;
+    }
+
+    return (
+      <ItemComponent
+        {...otherProps}
+        id={id}
+        onRefreshMoviePress={this.onRefreshMoviePress}
+        onSearchPress={this.onSearchPress}
+      />
+    );
+  }
+}
+
+MovieIndexItemConnector.propTypes = {
+  id: PropTypes.number,
+  component: PropTypes.elementType.isRequired,
+  dispatchExecuteCommand: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(MovieIndexItemConnector);

frontend/src/Indexer/Index/ProgressBar/MovieIndexProgressBar.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/Indexer/Index/ProgressBar/MovieIndexProgressBar.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ProgressBar from 'Components/ProgressBar';
+import { sizes } from 'Helpers/Props';
+import getProgressBarKind from 'Utilities/Movie/getProgressBarKind';
+import getQueueStatusText from 'Utilities/Movie/getQueueStatusText';
+import translate from 'Utilities/String/translate';
+import styles from './MovieIndexProgressBar.css';
+
+function MovieIndexProgressBar(props) {
+  const {
+    monitored,
+    status,
+    hasFile,
+    isAvailable,
+    posterWidth,
+    detailedProgressBar,
+    queueStatus,
+    queueState
+  } = props;
+
+  const progress = 100;
+  const queueStatusText = getQueueStatusText(queueStatus, queueState);
+  let movieStatus = (status === 'released' && hasFile) ? 'downloaded' : status;
+
+  if (movieStatus === 'deleted') {
+    movieStatus = 'Missing';
+
+    if (hasFile) {
+      movieStatus = 'Downloaded';
+    }
+  } else if (hasFile) {
+    movieStatus = 'Downloaded';
+  } else if (isAvailable && !hasFile) {
+    movieStatus = 'Missing';
+  } else {
+    movieStatus = 'NotAvailable';
+  }
+
+  return (
+    <ProgressBar
+      className={styles.progressBar}
+      containerClassName={styles.progress}
+      progress={progress}
+      kind={getProgressBarKind(status, monitored, hasFile, isAvailable, queueStatusText)}
+      size={detailedProgressBar ? sizes.MEDIUM : sizes.SMALL}
+      showText={detailedProgressBar}
+      width={posterWidth}
+      text={(queueStatusText) ? queueStatusText : translate(movieStatus)}
+    />
+  );
+}
+
+MovieIndexProgressBar.propTypes = {
+  monitored: PropTypes.bool.isRequired,
+  hasFile: PropTypes.bool.isRequired,
+  isAvailable: PropTypes.bool.isRequired,
+  status: PropTypes.string.isRequired,
+  posterWidth: PropTypes.number.isRequired,
+  detailedProgressBar: PropTypes.bool.isRequired,
+  queueStatus: PropTypes.string,
+  queueState: PropTypes.string
+};
+
+export default MovieIndexProgressBar;

frontend/src/Indexer/Index/Table/MovieIndexActionsCell.js

@@ -0,0 +1,103 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import { icons } from 'Helpers/Props';
+import DeleteMovieModal from 'Indexer/Delete/DeleteMovieModal';
+import EditMovieModalConnector from 'Indexer/Edit/EditMovieModalConnector';
+import translate from 'Utilities/String/translate';
+
+class MovieIndexActionsCell extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditMovieModalOpen: false,
+      isDeleteMovieModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditMoviePress = () => {
+    this.setState({ isEditMovieModalOpen: true });
+  }
+
+  onEditMovieModalClose = () => {
+    this.setState({ isEditMovieModalOpen: false });
+  }
+
+  onDeleteMoviePress = () => {
+    this.setState({
+      isEditMovieModalOpen: false,
+      isDeleteMovieModalOpen: true
+    });
+  }
+
+  onDeleteMovieModalClose = () => {
+    this.setState({ isDeleteMovieModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      isRefreshingMovie,
+      onRefreshMoviePress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      isEditMovieModalOpen,
+      isDeleteMovieModalOpen
+    } = this.state;
+
+    return (
+      <VirtualTableRowCell
+        {...otherProps}
+      >
+        <SpinnerIconButton
+          name={icons.REFRESH}
+          title={translate('RefreshMovie')}
+          isSpinning={isRefreshingMovie}
+          onPress={onRefreshMoviePress}
+        />
+
+        <IconButton
+          name={icons.EDIT}
+          title={translate('EditMovie')}
+          onPress={this.onEditMoviePress}
+        />
+
+        <EditMovieModalConnector
+          isOpen={isEditMovieModalOpen}
+          movieId={id}
+          onModalClose={this.onEditMovieModalClose}
+          onDeleteMoviePress={this.onDeleteMoviePress}
+        />
+
+        <DeleteMovieModal
+          isOpen={isDeleteMovieModalOpen}
+          movieId={id}
+          onModalClose={this.onDeleteMovieModalClose}
+        />
+      </VirtualTableRowCell>
+    );
+  }
+}
+
+MovieIndexActionsCell.propTypes = {
+  id: PropTypes.number.isRequired,
+  isRefreshingMovie: PropTypes.bool.isRequired,
+  onRefreshMoviePress: PropTypes.func.isRequired
+};
+
+export default MovieIndexActionsCell;

frontend/src/Indexer/Index/Table/MovieIndexHeader.css

@@ -0,0 +1,89 @@
+.status {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 60px;
+}
+
+.collection,
+.sortTitle {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 4 0 110px;
+}
+
+.minimumAvailability {
+  composes: headerCell  from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 140px;
+}
+
+.studio {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 2 0 90px;
+}
+
+.qualityProfileId {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 1 0 125px;
+}
+
+.inCinemas,
+.physicalRelease,
+.digitalRelease,
+.genres {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 180px;
+}
+
+.added,
+.runtime {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 100px;
+}
+
+.movieStatus,
+.certification {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 100px;
+}
+
+.year {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 80px;
+}
+
+.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;
+}
+
+.actions {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 1 90px;
+}

frontend/src/Indexer/Index/Table/MovieIndexHeader.js

@@ -0,0 +1,132 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import IconButton from 'Components/Link/IconButton';
+import TableOptionsModal from 'Components/Table/TableOptions/TableOptionsModal';
+import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
+import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
+import VirtualTableSelectAllHeaderCell from 'Components/Table/VirtualTableSelectAllHeaderCell';
+import { icons } from 'Helpers/Props';
+import MovieIndexTableOptionsConnector from './MovieIndexTableOptionsConnector';
+import styles from './MovieIndexHeader.css';
+
+class MovieIndexHeader extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isTableOptionsModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onTableOptionsPress = () => {
+    this.setState({ isTableOptionsModalOpen: true });
+  }
+
+  onTableOptionsModalClose = () => {
+    this.setState({ isTableOptionsModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      columns,
+      onTableOptionChange,
+      allSelected,
+      allUnselected,
+      onSelectAllChange,
+      isMovieEditorActive,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <VirtualTableHeader>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              label,
+              isSortable,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'select') {
+              if (isMovieEditorActive) {
+                return (
+                  <VirtualTableSelectAllHeaderCell
+                    key={name}
+                    allSelected={allSelected}
+                    allUnselected={allUnselected}
+                    onSelectAllChange={onSelectAllChange}
+                  />
+                );
+              }
+
+              return null;
+            }
+
+            if (name === 'actions') {
+              return (
+                <VirtualTableHeaderCell
+                  key={name}
+                  className={styles[name]}
+                  name={name}
+                  isSortable={false}
+                  {...otherProps}
+                >
+                  <IconButton
+                    name={icons.ADVANCED_SETTINGS}
+                    onPress={this.onTableOptionsPress}
+                  />
+                </VirtualTableHeaderCell>
+              );
+            }
+
+            return (
+              <VirtualTableHeaderCell
+                key={name}
+                className={styles[name]}
+                name={name}
+                isSortable={isSortable}
+                {...otherProps}
+              >
+                {label}
+              </VirtualTableHeaderCell>
+            );
+          })
+        }
+
+        <TableOptionsModal
+          isOpen={this.state.isTableOptionsModalOpen}
+          columns={columns}
+          optionsComponent={MovieIndexTableOptionsConnector}
+          onTableOptionChange={onTableOptionChange}
+          onModalClose={this.onTableOptionsModalClose}
+        />
+      </VirtualTableHeader>
+    );
+  }
+}
+
+MovieIndexHeader.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onTableOptionChange: PropTypes.func.isRequired,
+  allSelected: PropTypes.bool.isRequired,
+  allUnselected: PropTypes.bool.isRequired,
+  onSelectAllChange: PropTypes.func.isRequired,
+  isMovieEditorActive: PropTypes.bool.isRequired
+};
+
+export default MovieIndexHeader;

frontend/src/Indexer/Index/Table/MovieIndexHeaderConnector.js

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

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

@@ -0,0 +1,109 @@
+.cell {
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+
+  display: flex;
+  align-items: center;
+}
+
+.status {
+  composes: cell;
+
+  flex: 0 0 60px;
+}
+
+.collection,
+.sortTitle {
+  composes: cell;
+
+  flex: 4 0 110px;
+}
+
+.minimumAvailability {
+  composes: cell;
+
+  flex: 0 0 140px;
+}
+
+.studio {
+  composes: cell;
+
+  flex: 2 0 90px;
+}
+
+.qualityProfileId {
+  composes: cell;
+
+  flex: 1 0 125px;
+}
+
+.inCinemas,
+.physicalRelease,
+.digitalRelease,
+.genres {
+  composes: cell;
+
+  flex: 0 0 180px;
+}
+
+.added,
+.runtime {
+  composes: cell;
+
+  flex: 0 0 100px;
+}
+
+.movieStatus,
+.certification {
+  composes: cell;
+
+  flex: 0 0 100px;
+}
+
+.year {
+  composes: cell;
+
+  flex: 0 0 80px;
+}
+
+.path {
+  composes: cell;
+
+  flex: 1 0 150px;
+}
+
+.sizeOnDisk {
+  composes: cell;
+
+  flex: 0 0 120px;
+}
+
+.ratings {
+  composes: cell;
+
+  flex: 0 0 80px;
+}
+
+.tags {
+  composes: cell;
+
+  flex: 1 0 60px;
+}
+
+.actions {
+  composes: cell;
+
+  flex: 0 1 90px;
+  min-width: 90px;
+}
+
+.checkInput {
+  composes: input from '~Components/Form/CheckInput.css';
+
+  margin-top: 0;
+}
+
+.externalLinks {
+  margin: 0 2px;
+  width: 22px;
+  text-align: center;
+}

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

@@ -0,0 +1,475 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import HeartRating from 'Components/HeartRating';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
+import TagListConnector from 'Components/TagListConnector';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds } from 'Helpers/Props';
+import DeleteMovieModal from 'Indexer/Delete/DeleteMovieModal';
+import EditMovieModalConnector from 'Indexer/Edit/EditMovieModalConnector';
+import MovieFileStatusConnector from 'Indexer/MovieFileStatusConnector';
+import MovieTitleLink from 'Indexer/MovieTitleLink';
+import formatRuntime from 'Utilities/Date/formatRuntime';
+import formatBytes from 'Utilities/Number/formatBytes';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import MovieStatusCell from './MovieStatusCell';
+import styles from './MovieIndexRow.css';
+
+class MovieIndexRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditMovieModalOpen: false,
+      isDeleteMovieModalOpen: false
+    };
+  }
+
+  onEditMoviePress = () => {
+    this.setState({ isEditMovieModalOpen: true });
+  }
+
+  onEditMovieModalClose = () => {
+    this.setState({ isEditMovieModalOpen: false });
+  }
+
+  onDeleteMoviePress = () => {
+    this.setState({
+      isEditMovieModalOpen: false,
+      isDeleteMovieModalOpen: true
+    });
+  }
+
+  onDeleteMovieModalClose = () => {
+    this.setState({ isDeleteMovieModalOpen: false });
+  }
+
+  onUseSceneNumberingChange = () => {
+    // Mock handler to satisfy `onChange` being required for `CheckInput`.
+    //
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      tmdbId,
+      imdbId,
+      youTubeTrailerId,
+      monitored,
+      status,
+      title,
+      titleSlug,
+      collection,
+      studio,
+      qualityProfile,
+      added,
+      year,
+      inCinemas,
+      physicalRelease,
+      digitalRelease,
+      runtime,
+      minimumAvailability,
+      path,
+      sizeOnDisk,
+      genres,
+      ratings,
+      certification,
+      tags,
+      showSearchAction,
+      columns,
+      isRefreshingMovie,
+      isSearchingMovie,
+      isMovieEditorActive,
+      isSelected,
+      onRefreshMoviePress,
+      onSearchPress,
+      onSelectedChange,
+      queueStatus,
+      queueState,
+      movieRuntimeFormat
+    } = this.props;
+
+    const {
+      isEditMovieModalOpen,
+      isDeleteMovieModalOpen
+    } = this.state;
+
+    return (
+      <>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (isMovieEditorActive && name === 'select') {
+              return (
+                <VirtualTableSelectCell
+                  inputClassName={styles.checkInput}
+                  id={id}
+                  key={name}
+                  isSelected={isSelected}
+                  isDisabled={false}
+                  onSelectedChange={onSelectedChange}
+                />
+              );
+            }
+
+            if (name === 'status') {
+              return (
+                <MovieStatusCell
+                  key={name}
+                  className={styles[name]}
+                  monitored={monitored}
+                  status={status}
+                  component={VirtualTableRowCell}
+                />
+              );
+            }
+
+            if (name === 'sortTitle') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+
+                  <MovieTitleLink
+                    titleSlug={titleSlug}
+                    title={title}
+                  />
+
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'collection') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {collection ? collection.name : null }
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'studio') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {studio}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'qualityProfileId') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {qualityProfile.name}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'added') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  className={styles[name]}
+                  date={added}
+                  component={VirtualTableRowCell}
+                />
+              );
+            }
+
+            if (name === 'year') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {year}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'inCinemas') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  className={styles[name]}
+                  date={inCinemas}
+                  component={VirtualTableRowCell}
+                />
+              );
+            }
+
+            if (name === 'digitalRelease') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  className={styles[name]}
+                  date={digitalRelease}
+                  component={VirtualTableRowCell}
+                />
+              );
+            }
+
+            if (name === 'physicalRelease') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  className={styles[name]}
+                  date={physicalRelease}
+                  component={VirtualTableRowCell}
+                />
+              );
+            }
+
+            if (name === 'runtime') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {formatRuntime(runtime, movieRuntimeFormat)}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'minimumAvailability') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {titleCase(minimumAvailability)}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'path') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                  title={path}
+                >
+                  {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 === 'movieStatus') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <MovieFileStatusConnector
+                    movieId={id}
+                    queueStatus={queueStatus}
+                    queueState={queueState}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'ratings') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <HeartRating
+                    rating={ratings.value}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'certification') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  {certification}
+                </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]}
+                >
+                  <span className={styles.externalLinks}>
+                    <Tooltip
+                      anchor={
+                        <Icon
+                          name={icons.EXTERNAL_LINK}
+                          size={12}
+                        />
+                      }
+                      canFlip={true}
+                      kind={kinds.INVERSE}
+                    />
+                  </span>
+
+                  <SpinnerIconButton
+                    name={icons.REFRESH}
+                    title={translate('RefreshMovie')}
+                    isSpinning={isRefreshingMovie}
+                    onPress={onRefreshMoviePress}
+                  />
+
+                  {
+                    showSearchAction &&
+                      <SpinnerIconButton
+                        className={styles.action}
+                        name={icons.SEARCH}
+                        title={translate('SearchForMovie')}
+                        isSpinning={isSearchingMovie}
+                        onPress={onSearchPress}
+                      />
+                  }
+
+                  <IconButton
+                    name={icons.EDIT}
+                    title={translate('EditMovie')}
+                    onPress={this.onEditMoviePress}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <EditMovieModalConnector
+          isOpen={isEditMovieModalOpen}
+          movieId={id}
+          onModalClose={this.onEditMovieModalClose}
+          onDeleteMoviePress={this.onDeleteMoviePress}
+        />
+
+        <DeleteMovieModal
+          isOpen={isDeleteMovieModalOpen}
+          movieId={id}
+          onModalClose={this.onDeleteMovieModalClose}
+        />
+      </>
+    );
+  }
+}
+
+MovieIndexRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  monitored: PropTypes.bool.isRequired,
+  status: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  titleSlug: PropTypes.string.isRequired,
+  studio: PropTypes.string,
+  collection: PropTypes.object,
+  qualityProfile: PropTypes.object.isRequired,
+  added: PropTypes.string,
+  year: PropTypes.number,
+  inCinemas: PropTypes.string,
+  physicalRelease: PropTypes.string,
+  digitalRelease: PropTypes.string,
+  runtime: PropTypes.number,
+  minimumAvailability: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  sizeOnDisk: PropTypes.number.isRequired,
+  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
+  ratings: PropTypes.object.isRequired,
+  certification: PropTypes.string,
+  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  showSearchAction: PropTypes.bool.isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isRefreshingMovie: PropTypes.bool.isRequired,
+  isSearchingMovie: PropTypes.bool.isRequired,
+  onRefreshMoviePress: PropTypes.func.isRequired,
+  onSearchPress: PropTypes.func.isRequired,
+  isMovieEditorActive: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
+  onSelectedChange: PropTypes.func.isRequired,
+  tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string,
+  youTubeTrailerId: PropTypes.string,
+  queueStatus: PropTypes.string,
+  queueState: PropTypes.string,
+  movieRuntimeFormat: PropTypes.string.isRequired
+};
+
+MovieIndexRow.defaultProps = {
+  genres: [],
+  tags: []
+};
+
+export default MovieIndexRow;

frontend/src/Indexer/Index/Table/MovieIndexTable.css

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

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

@@ -0,0 +1,144 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import VirtualTable from 'Components/Table/VirtualTable';
+import VirtualTableRow from 'Components/Table/VirtualTableRow';
+import { sortDirections } from 'Helpers/Props';
+import MovieIndexItemConnector from 'Indexer/Index/MovieIndexItemConnector';
+import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
+import MovieIndexHeaderConnector from './MovieIndexHeaderConnector';
+import MovieIndexRow from './MovieIndexRow';
+import styles from './MovieIndexTable.css';
+
+class MovieIndexTable 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,
+      selectedState,
+      onSelectedChange,
+      isMovieEditorActive,
+      movieRuntimeFormat
+    } = this.props;
+
+    const movie = items[rowIndex];
+
+    return (
+      <VirtualTableRow
+        key={key}
+        style={style}
+      >
+        <MovieIndexItemConnector
+          key={movie.id}
+          component={MovieIndexRow}
+          columns={columns}
+          movieId={movie.id}
+          qualityProfileId={movie.qualityProfileId}
+          isSelected={selectedState[movie.id]}
+          onSelectedChange={onSelectedChange}
+          isMovieEditorActive={isMovieEditorActive}
+          movieRuntimeFormat={movieRuntimeFormat}
+        />
+      </VirtualTableRow>
+    );
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      columns,
+      sortKey,
+      sortDirection,
+      isSmallScreen,
+      onSortPress,
+      scroller,
+      allSelected,
+      allUnselected,
+      onSelectAllChange,
+      isMovieEditorActive,
+      selectedState
+    } = this.props;
+
+    return (
+      <VirtualTable
+        className={styles.tableContainer}
+        items={items}
+        scrollIndex={this.state.scrollIndex}
+        isSmallScreen={isSmallScreen}
+        scroller={scroller}
+        rowHeight={38}
+        overscanRowCount={2}
+        rowRenderer={this.rowRenderer}
+        header={
+          <MovieIndexHeaderConnector
+            columns={columns}
+            sortKey={sortKey}
+            sortDirection={sortDirection}
+            onSortPress={onSortPress}
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            onSelectAllChange={onSelectAllChange}
+            isMovieEditorActive={isMovieEditorActive}
+          />
+        }
+        selectedState={selectedState}
+        columns={columns}
+      />
+    );
+  }
+}
+
+MovieIndexTable.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  sortKey: PropTypes.string,
+  sortDirection: PropTypes.oneOf(sortDirections.all),
+  jumpToCharacter: PropTypes.string,
+  isSmallScreen: PropTypes.bool.isRequired,
+  scroller: PropTypes.instanceOf(Element).isRequired,
+  onSortPress: PropTypes.func.isRequired,
+  allSelected: PropTypes.bool.isRequired,
+  allUnselected: PropTypes.bool.isRequired,
+  selectedState: PropTypes.object.isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onSelectAllChange: PropTypes.func.isRequired,
+  isMovieEditorActive: PropTypes.bool.isRequired,
+  movieRuntimeFormat: PropTypes.string.isRequired
+};
+
+export default MovieIndexTable;

frontend/src/Indexer/Index/Table/MovieIndexTableConnector.js

@@ -0,0 +1,31 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setMovieSort } from 'Store/Actions/movieIndexActions';
+import MovieIndexTable from './MovieIndexTable';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.app.dimensions,
+    (state) => state.movieIndex.tableOptions,
+    (state) => state.movieIndex.columns,
+    (state) => state.settings.ui.item.movieRuntimeFormat,
+    (dimensions, tableOptions, columns, movieRuntimeFormat) => {
+      return {
+        isSmallScreen: dimensions.isSmallScreen,
+        showBanners: tableOptions.showBanners,
+        columns,
+        movieRuntimeFormat
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onSortPress(sortKey) {
+      dispatch(setMovieSort({ sortKey }));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(MovieIndexTable);

frontend/src/Indexer/Index/Table/MovieIndexTableOptions.js

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+class MovieIndexTableOptions extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      showSearchAction: props.showSearchAction
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const { showSearchAction } = this.props;
+
+    if (showSearchAction !== prevProps.showSearchAction) {
+      this.setState({
+        showSearchAction
+      });
+    }
+  }
+
+  //
+  // Listeners
+
+  onTableOptionChange = ({ name, value }) => {
+    this.setState({
+      [name]: value
+    }, () => {
+      this.props.onTableOptionChange({
+        tableOptions: {
+          ...this.state,
+          [name]: value
+        }
+      });
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      showSearchAction
+    } = this.state;
+
+    return (
+      <FormGroup>
+        <FormLabel>{translate('ShowSearch')}</FormLabel>
+
+        <FormInputGroup
+          type={inputTypes.CHECK}
+          name="showSearchAction"
+          value={showSearchAction}
+          helpText={translate('ShowSearchHelpText')}
+          onChange={this.onTableOptionChange}
+        />
+      </FormGroup>
+    );
+  }
+}
+
+MovieIndexTableOptions.propTypes = {
+  showSearchAction: PropTypes.bool.isRequired,
+  onTableOptionChange: PropTypes.func.isRequired
+};
+
+export default MovieIndexTableOptions;

frontend/src/Indexer/Index/Table/MovieIndexTableOptionsConnector.js

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

frontend/src/Indexer/Index/Table/MovieStatusCell.css

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

frontend/src/Indexer/Index/Table/MovieStatusCell.js

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Icon from 'Components/Icon';
+import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
+import { icons } from 'Helpers/Props';
+import { getMovieStatusDetails } from 'Indexer/MovieStatus';
+import translate from 'Utilities/String/translate';
+import styles from './MovieStatusCell.css';
+
+function MovieStatusCell(props) {
+  const {
+    className,
+    monitored,
+    status,
+    component: Component,
+    ...otherProps
+  } = props;
+
+  const statusDetails = getMovieStatusDetails(status);
+
+  return (
+    <Component
+      className={className}
+      {...otherProps}
+    >
+      <Icon
+        className={styles.statusIcon}
+        name={monitored ? icons.MONITORED : icons.UNMONITORED}
+        title={monitored ? translate('MovieIsMonitored') : translate('MovieIsUnmonitored')}
+      />
+
+      <Icon
+        className={styles.statusIcon}
+        name={statusDetails.icon}
+        title={`${statusDetails.title}: ${statusDetails.message}`}
+      />
+
+    </Component>
+  );
+}
+
+MovieStatusCell.propTypes = {
+  className: PropTypes.string.isRequired,
+  monitored: PropTypes.bool.isRequired,
+  status: PropTypes.string.isRequired,
+  component: PropTypes.elementType
+};
+
+MovieStatusCell.defaultProps = {
+  className: styles.status,
+  component: VirtualTableRowCell
+};
+
+export default MovieStatusCell;