Indexer and Search page work

frontend/src/Search/IndexerIndex.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/Search/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/Search/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/Search/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/Search/MovieEditorFooter.css

@@ -0,0 +1,57 @@
+.inputContainer {
+  margin-right: 20px;
+  min-width: 150px;
+}
+
+.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+}
+
+.buttonContainerContent {
+  flex-grow: 0;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+}
+
+.organizeSelectedButton,
+.tagsButton {
+  composes: button from '~Components/Link/SpinnerButton.css';
+
+  margin-right: 10px;
+  height: 35px;
+}
+
+.deleteSelectedButton {
+  composes: button from '~Components/Link/SpinnerButton.css';
+
+  margin-left: 50px;
+  height: 35px;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .inputContainer {
+    margin-right: 0;
+  }
+
+  .buttonContainer {
+    justify-content: flex-start;
+  }
+
+  .buttonContainerContent {
+    flex-grow: 1;
+  }
+
+  .buttons {
+    justify-content: space-between;
+  }
+
+  .selectedMovieLabel {
+    text-align: left;
+  }
+}

frontend/src/Search/MovieEditorFooter.js

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TextInput from 'Components/Form/TextInput';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import PageContentFooter from 'Components/Page/PageContentFooter';
+import styles from './MovieEditorFooter.css';
+
+class MovieEditorFooter extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      searchingReleases: false,
+      searchQuery: ''
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      isFetching,
+      searchError
+    } = this.props;
+
+    if (prevProps.isFetching && !isFetching && !searchError) {
+      this.setState({
+        searchingReleases: false
+      });
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.setState({ [name]: value });
+  }
+
+  onSearchPress = () => {
+    this.props.onSearchPress(this.state.searchQuery);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching
+    } = this.props;
+
+    const {
+      searchQuery
+    } = this.state;
+
+    return (
+      <PageContentFooter>
+        <div className={styles.inputContainer}>
+          <TextInput
+            name='searchQuery'
+            placeholder='Query'
+            value={searchQuery}
+            isDisabled={isFetching}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div className={styles.buttonContainer}>
+          <div className={styles.buttonContainerContent}>
+            <div className={styles.buttons}>
+
+              <SpinnerButton
+                className={styles.deleteSelectedButton}
+                isSpinning={isFetching}
+                isDisabled={isFetching}
+                onPress={this.onSearchPress}
+              >
+                Search
+              </SpinnerButton>
+            </div>
+          </div>
+        </div>
+      </PageContentFooter>
+    );
+  }
+}
+
+MovieEditorFooter.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  onSearchPress: PropTypes.func.isRequired,
+  searchError: PropTypes.object
+};
+
+export default MovieEditorFooter;

frontend/src/Search/MovieEditorFooterLabel.css

@@ -0,0 +1,8 @@
+.label {
+  margin-bottom: 3px;
+  font-weight: bold;
+}
+
+.savingIcon {
+  margin-left: 8px;
+}

frontend/src/Search/MovieEditorFooterLabel.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import SpinnerIcon from 'Components/SpinnerIcon';
+import { icons } from 'Helpers/Props';
+import styles from './MovieEditorFooterLabel.css';
+
+function MovieEditorFooterLabel(props) {
+  const {
+    className,
+    label,
+    isSaving
+  } = props;
+
+  return (
+    <div className={className}>
+      {label}
+
+      {
+        isSaving &&
+          <SpinnerIcon
+            className={styles.savingIcon}
+            name={icons.SPINNER}
+            isSpinning={true}
+          />
+      }
+    </div>
+  );
+}
+
+MovieEditorFooterLabel.propTypes = {
+  className: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  isSaving: PropTypes.bool.isRequired
+};
+
+MovieEditorFooterLabel.defaultProps = {
+  className: styles.label
+};
+
+export default MovieEditorFooterLabel;

frontend/src/Search/SearchConnector.js

@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import withScrollPosition from 'Components/withScrollPosition';
+import { fetchReleases, setReleasesFilter, setReleasesSort, setReleasesTableOption } from 'Store/Actions/releaseActions';
+import scrollPositions from 'Store/scrollPositions';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createReleaseClientSideCollectionItemsSelector from 'Store/Selectors/createReleaseClientSideCollectionItemsSelector';
+import SearchIndex from './SearchIndex';
+
+function createMapStateToProps() {
+  return createSelector(
+    createReleaseClientSideCollectionItemsSelector('releases'),
+    createDimensionsSelector(),
+    (
+      movies,
+      dimensionsState
+    ) => {
+      return {
+        ...movies,
+        isSmallScreen: dimensionsState.isSmallScreen
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onTableOptionChange(payload) {
+      dispatch(setReleasesTableOption(payload));
+    },
+
+    onSortSelect(sortKey) {
+      dispatch(setReleasesSort({ sortKey }));
+    },
+
+    onFilterSelect(selectedFilterKey) {
+      dispatch(setReleasesFilter({ selectedFilterKey }));
+    },
+
+    onSearchPress(payload) {
+      dispatch(fetchReleases(payload));
+    }
+  };
+}
+
+class SearchConnector extends Component {
+
+  onScroll = ({ scrollTop }) => {
+    scrollPositions.movieIndex = scrollTop;
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <SearchIndex
+        {...this.props}
+        onScroll={this.onScroll}
+      />
+    );
+  }
+}
+
+SearchConnector.propTypes = {
+  isSmallScreen: PropTypes.bool.isRequired,
+  onSearchPress: PropTypes.func.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object)
+};
+
+export default withScrollPosition(
+  connect(createMapStateToProps, createMapDispatchToProps)(SearchConnector),
+  'releases'
+);

frontend/src/Search/SearchIndex.js

@@ -0,0 +1,291 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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, sortDirections } from 'Helpers/Props';
+import NoIndexer from 'Indexer/NoIndexer';
+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 MovieIndexFilterMenu from './Menus/MovieIndexFilterMenu';
+import MovieIndexSortMenu from './Menus/MovieIndexSortMenu';
+import MovieEditorFooter from './MovieEditorFooter.js';
+import MovieIndexTableConnector from './Table/MovieIndexTableConnector';
+import styles from './IndexerIndex.css';
+
+function getViewComponent() {
+  return MovieIndexTableConnector;
+}
+
+class SearchIndex extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      scroller: null,
+      jumpBarItems: { order: [] },
+      jumpToCharacter: null,
+      searchType: null,
+      lastToggled: null
+    };
+  }
+
+  componentDidMount() {
+    this.setJumpBarItems();
+
+    window.addEventListener('keyup', this.onKeyUp);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      sortKey,
+      sortDirection
+    } = this.props;
+
+    if (sortKey !== prevProps.sortKey ||
+        sortDirection !== prevProps.sortDirection ||
+        hasDifferentItemsOrOrder(prevProps.items, items)
+    ) {
+      this.setJumpBarItems();
+    }
+
+    if (this.state.jumpToCharacter != null) {
+      this.setState({ jumpToCharacter: null });
+    }
+  }
+
+  //
+  // Control
+
+  setScrollerRef = (ref) => {
+    this.setState({ scroller: ref });
+  }
+
+  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
+
+  onJumpBarItemPress = (jumpToCharacter) => {
+    this.setState({ jumpToCharacter });
+  }
+
+  onSearchPress = (query) => {
+    console.log('index', query);
+    this.props.onSearchPress({ query });
+  }
+
+  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] });
+      }
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      totalItems,
+      items,
+      columns,
+      selectedFilterKey,
+      filters,
+      customFilters,
+      sortKey,
+      sortDirection,
+      onScroll,
+      onSortSelect,
+      onFilterSelect,
+      ...otherProps
+    } = this.props;
+
+    const {
+      scroller,
+      jumpBarItems,
+      jumpToCharacter
+    } = this.state;
+
+    const ViewComponent = getViewComponent();
+    const isLoaded = !!(!error && isPopulated && items.length && scroller);
+    const hasNoIndexer = !totalItems;
+
+    return (
+      <PageContent>
+        <PageToolbar>
+          <PageToolbarSection
+            alignContent={align.RIGHT}
+            collapseButtons={false}
+          >
+            <TableOptionsModalWrapper
+              {...otherProps}
+              columns={columns}
+            >
+              <PageToolbarButton
+                label={translate('Options')}
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+
+            <PageToolbarSeparator />
+
+            <MovieIndexSortMenu
+              sortKey={sortKey}
+              sortDirection={sortDirection}
+              isDisabled={hasNoIndexer}
+              onSortSelect={onSortSelect}
+            />
+
+            <MovieIndexFilterMenu
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={customFilters}
+              isDisabled={hasNoIndexer}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <div className={styles.pageContentBodyWrapper}>
+          <PageContentBody
+            registerScroller={this.setScrollerRef}
+            className={styles.contentBody}
+            innerClassName={styles.tableInnerContentBody}
+            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}
+                    {...otherProps}
+                  />
+                </div>
+            }
+
+            {
+              !error && isPopulated && !items.length &&
+                <NoIndexer totalItems={totalItems} />
+            }
+          </PageContentBody>
+
+          {
+            isLoaded && !!jumpBarItems.order.length &&
+              <PageJumpBar
+                items={jumpBarItems}
+                onItemPress={this.onJumpBarItemPress}
+              />
+          }
+        </div>
+
+        <MovieEditorFooter
+          isFetching={isFetching}
+          onSearchPress={this.onSearchPress}
+        />
+      </PageContent>
+    );
+  }
+}
+
+SearchIndex.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),
+  isSmallScreen: PropTypes.bool.isRequired,
+  onSortSelect: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired,
+  onSearchPress: PropTypes.func.isRequired,
+  onScroll: PropTypes.func.isRequired
+};
+
+export default SearchIndex;

frontend/src/Search/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/Search/Table/MovieIndexHeader.css

@@ -0,0 +1,37 @@
+.status {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 60px;
+}
+
+.title {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 4 0 110px;
+}
+
+.indexer {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 85px;
+}
+
+.age,
+.size,
+.peers {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 75px;
+}
+
+.indexerFlags {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 50px;
+}
+
+.actions {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 1 90px;
+}

frontend/src/Search/Table/MovieIndexHeader.js

@@ -0,0 +1,106 @@
+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 { icons } from 'Helpers/Props';
+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,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <VirtualTableHeader>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              label,
+              isSortable,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              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}
+          onTableOptionChange={onTableOptionChange}
+          onModalClose={this.onTableOptionsModalClose}
+        />
+      </VirtualTableHeader>
+    );
+  }
+}
+
+MovieIndexHeader.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onTableOptionChange: PropTypes.func.isRequired
+};
+
+export default MovieIndexHeader;

frontend/src/Search/Table/MovieIndexHeaderConnector.js

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

frontend/src/Search/Table/MovieIndexItemConnector.js

@@ -0,0 +1,74 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { executeCommand } from 'Store/Actions/commandActions';
+
+function createReleaseSelector() {
+  return createSelector(
+    (state, { guid }) => guid,
+    (state) => state.releases.items,
+    (guid, releases) => {
+      return releases.find((t) => t.guid === guid);
+    }
+  );
+}
+
+function createMapStateToProps() {
+  return createSelector(
+    createReleaseSelector(),
+    (
+      movie
+    ) => {
+
+      // 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 {};
+      }
+
+      return {
+        ...movie
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchExecuteCommand: executeCommand
+};
+
+class MovieIndexItemConnector extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      guid,
+      component: ItemComponent,
+      ...otherProps
+    } = this.props;
+
+    if (!guid) {
+      return null;
+    }
+
+    return (
+      <ItemComponent
+        {...otherProps}
+        guid={guid}
+      />
+    );
+  }
+}
+
+MovieIndexItemConnector.propTypes = {
+  guid: PropTypes.string,
+  component: PropTypes.elementType.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(MovieIndexItemConnector);

frontend/src/Search/Table/MovieIndexRow.css

@@ -0,0 +1,57 @@
+.cell {
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+
+  display: flex;
+  align-items: center;
+}
+
+.status {
+  composes: cell;
+
+  flex: 0 0 60px;
+}
+
+.title {
+  composes: cell;
+
+  flex: 4 0 110px;
+}
+
+.indexer {
+  composes: cell;
+
+  flex: 0 0 85px;
+}
+
+.age,
+.size,
+.peers {
+  composes: cell;
+
+  flex: 0 0 75px;
+}
+
+.indexerFlags {
+  composes: cell;
+
+  flex: 0 0 50px;
+}
+
+.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/Search/Table/MovieIndexRow.js

@@ -0,0 +1,213 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import Popover from 'Components/Tooltip/Popover';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatAge from 'Utilities/Number/formatAge';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
+import Peers from './Peers';
+import ProtocolLabel from './ProtocolLabel';
+import styles from './MovieIndexRow.css';
+
+class MovieIndexRow extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      protocol,
+      age,
+      ageHours,
+      ageMinutes,
+      publishDate,
+      title,
+      infoUrl,
+      indexer,
+      size,
+      seeders,
+      leechers,
+      indexerFlags,
+      columns,
+      longDateFormat,
+      timeFormat
+    } = this.props;
+
+    return (
+      <>
+        {
+          columns.map((column) => {
+            const {
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (column.name === 'protocol') {
+              return (
+                <VirtualTableRowCell
+                  key={column.name}
+                  className={styles[column.name]}
+                >
+                  <ProtocolLabel
+                    protocol={protocol}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (column.name === 'age') {
+              return (
+                <VirtualTableRowCell
+                  key={column.name}
+                  className={styles[column.name]}
+                  title={formatDateTime(publishDate, longDateFormat, timeFormat, { includeSeconds: true })}
+                >
+                  {formatAge(age, ageHours, ageMinutes)}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (column.name === 'title') {
+              return (
+                <VirtualTableRowCell
+                  key={column.name}
+                  className={styles[column.name]}
+                >
+                  <Link
+                    to={infoUrl}
+                    title={title}
+                  >
+                    <div>
+                      {title}
+                    </div>
+                  </Link>
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (column.name === 'indexer') {
+              return (
+                <VirtualTableRowCell
+                  key={column.name}
+                  className={styles[column.name]}
+                >
+                  {indexer}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (column.name === 'size') {
+              return (
+                <VirtualTableRowCell
+                  key={column.name}
+                  className={styles[column.name]}
+                >
+                  {formatBytes(size)}
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (column.name === 'peers') {
+              return (
+                <VirtualTableRowCell
+                  key={column.name}
+                  className={styles[column.name]}
+                >
+                  {
+                    protocol === 'torrent' &&
+                      <Peers
+                        seeders={seeders}
+                        leechers={leechers}
+                      />
+                  }
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (column.name === 'indexerFlags') {
+              return (
+                <VirtualTableRowCell
+                  key={column.name}
+                  className={styles[column.name]}
+                >
+                  {
+                    !!indexerFlags.length &&
+                      <Popover
+                        anchor={
+                          <Icon
+                            name={icons.FLAG}
+                            kind={kinds.PRIMARY}
+                          />
+                        }
+                        title={translate('IndexerFlags')}
+                        body={
+                          <ul>
+                            {
+                              indexerFlags.map((flag, index) => {
+                                return (
+                                  <li key={index}>
+                                    {flag}
+                                  </li>
+                                );
+                              })
+                            }
+                          </ul>
+                        }
+                        position={tooltipPositions.LEFT}
+                      />
+                  }
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (column.name === 'actions') {
+              return (
+                <VirtualTableRowCell
+                  key={column.name}
+                  className={styles[column.name]}
+                >
+                  <IconButton
+                    name={icons.EXTERNAL_LINK}
+                    title={'Website'}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+      </>
+    );
+  }
+}
+
+MovieIndexRow.propTypes = {
+  guid: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  age: PropTypes.number.isRequired,
+  ageHours: PropTypes.number.isRequired,
+  ageMinutes: PropTypes.number.isRequired,
+  publishDate: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  infoUrl: PropTypes.string.isRequired,
+  indexerId: PropTypes.number.isRequired,
+  indexer: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  seeders: PropTypes.number,
+  leechers: PropTypes.number,
+  indexerFlags: PropTypes.arrayOf(PropTypes.string).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  longDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired
+};
+
+export default MovieIndexRow;

frontend/src/Search/Table/MovieIndexTable.css

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

frontend/src/Search/Table/MovieIndexTable.js

@@ -0,0 +1,124 @@
+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 getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
+import MovieIndexHeaderConnector from './MovieIndexHeaderConnector';
+import MovieIndexItemConnector from './MovieIndexItemConnector';
+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,
+      longDateFormat,
+      timeFormat
+    } = this.props;
+
+    const release = items[rowIndex];
+
+    return (
+      <VirtualTableRow
+        key={key}
+        style={style}
+      >
+        <MovieIndexItemConnector
+          key={release.guid}
+          component={MovieIndexRow}
+          columns={columns}
+          guid={release.guid}
+          longDateFormat={longDateFormat}
+          timeFormat={timeFormat}
+        />
+      </VirtualTableRow>
+    );
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      columns,
+      sortKey,
+      sortDirection,
+      isSmallScreen,
+      onSortPress,
+      scroller
+    } = 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}
+          />
+        }
+        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,
+  longDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  onSortPress: PropTypes.func.isRequired
+};
+
+export default MovieIndexTable;

frontend/src/Search/Table/MovieIndexTableConnector.js

@@ -0,0 +1,31 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setMovieSort } from 'Store/Actions/indexerIndexActions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import MovieIndexTable from './MovieIndexTable';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.app.dimensions,
+    (state) => state.releases.columns,
+    createUISettingsSelector(),
+    (dimensions, columns, uiSettings) => {
+      return {
+        isSmallScreen: dimensions.isSmallScreen,
+        columns,
+        longDateFormat: uiSettings.longDateFormat,
+        timeFormat: uiSettings.timeFormat
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onSortPress(sortKey) {
+      dispatch(setMovieSort({ sortKey }));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(MovieIndexTable);

frontend/src/Search/Table/Peers.js

@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Label from 'Components/Label';
+import { kinds } from 'Helpers/Props';
+
+function getKind(seeders) {
+  if (seeders > 50) {
+    return kinds.PRIMARY;
+  }
+
+  if (seeders > 10) {
+    return kinds.INFO;
+  }
+
+  if (seeders > 0) {
+    return kinds.WARNING;
+  }
+
+  return kinds.DANGER;
+}
+
+function getPeersTooltipPart(peers, peersUnit) {
+  if (peers == null) {
+    return `Unknown ${peersUnit}s`;
+  }
+
+  if (peers === 1) {
+    return `1 ${peersUnit}`;
+  }
+
+  return `${peers} ${peersUnit}s`;
+}
+
+function Peers(props) {
+  const {
+    seeders,
+    leechers
+  } = props;
+
+  const kind = getKind(seeders);
+
+  return (
+    <Label
+      kind={kind}
+      title={`${getPeersTooltipPart(seeders, 'seeder')}, ${getPeersTooltipPart(leechers, 'leecher')}`}
+    >
+      {seeders == null ? '-' : seeders} / {leechers == null ? '-' : leechers}
+    </Label>
+  );
+}
+
+Peers.propTypes = {
+  seeders: PropTypes.number,
+  leechers: PropTypes.number
+};
+
+export default Peers;

frontend/src/Search/Table/ProtocolLabel.css

@@ -0,0 +1,13 @@
+.torrent {
+  composes: label from '~Components/Label.css';
+
+  border-color: $torrentColor;
+  background-color: $torrentColor;
+}
+
+.usenet {
+  composes: label from '~Components/Label.css';
+
+  border-color: $usenetColor;
+  background-color: $usenetColor;
+}

frontend/src/Search/Table/ProtocolLabel.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Label from 'Components/Label';
+import styles from './ProtocolLabel.css';
+
+function ProtocolLabel({ protocol }) {
+  const protocolName = protocol === 'usenet' ? 'nzb' : protocol;
+
+  return (
+    <Label className={styles[protocol]}>
+      {protocolName}
+    </Label>
+  );
+}
+
+ProtocolLabel.propTypes = {
+  protocol: PropTypes.string.isRequired
+};
+
+export default ProtocolLabel;