New: Project Aphrodite

frontend/src/.vscode/settings.json

@@ -0,0 +1,4 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "files.insertFinalNewline": true
+}

frontend/src/Activity/Blacklist/Blacklist.js

@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { align, icons } from 'Helpers/Props';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import TablePager from 'Components/Table/TablePager';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import BlacklistRowConnector from './BlacklistRowConnector';
+
+class Blacklist extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      columns,
+      totalRecords,
+      isClearingBlacklistExecuting,
+      onClearBlacklistPress,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <PageContent title="Blacklist">
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="Clear"
+              iconName={icons.CLEAR}
+              isSpinning={isClearingBlacklistExecuting}
+              onPress={onClearBlacklistPress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <TableOptionsModalWrapper
+              {...otherProps}
+              columns={columns}
+            >
+              <PageToolbarButton
+                label="Options"
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBodyConnector>
+          {
+            isFetching && !isPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>Unable to load blacklist</div>
+          }
+
+          {
+            isPopulated && !error && !items.length &&
+              <div>
+                No history blacklist
+              </div>
+          }
+
+          {
+            isPopulated && !error && !!items.length &&
+              <div>
+                <Table
+                  columns={columns}
+                  {...otherProps}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <BlacklistRowConnector
+                            key={item.id}
+                            columns={columns}
+                            {...item}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isFetching}
+                  {...otherProps}
+                />
+              </div>
+          }
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+}
+
+Blacklist.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  isClearingBlacklistExecuting: PropTypes.bool.isRequired,
+  onClearBlacklistPress: PropTypes.func.isRequired
+};
+
+export default Blacklist;

frontend/src/Activity/Blacklist/BlacklistConnector.js

@@ -0,0 +1,154 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import withCurrentPage from 'Components/withCurrentPage';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import * as blacklistActions from 'Store/Actions/blacklistActions';
+import { executeCommand } from 'Store/Actions/commandActions';
+import * as commandNames from 'Commands/commandNames';
+import Blacklist from './Blacklist';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.blacklist,
+    createCommandExecutingSelector(commandNames.CLEAR_BLACKLIST),
+    (blacklist, isClearingBlacklistExecuting) => {
+      return {
+        isClearingBlacklistExecuting,
+        ...blacklist
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...blacklistActions,
+  executeCommand
+};
+
+class BlacklistConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchBlacklist,
+      gotoBlacklistFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchBlacklist();
+    } else {
+      gotoBlacklistFirstPage();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.isClearingBlacklistExecuting && !this.props.isClearingBlacklistExecuting) {
+      this.props.gotoBlacklistFirstPage();
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.clearBlacklist();
+    unregisterPagePopulator(this.repopulate);
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    this.props.fetchBlacklist();
+  }
+  //
+  // Listeners
+
+  onFirstPagePress = () => {
+    this.props.gotoBlacklistFirstPage();
+  }
+
+  onPreviousPagePress = () => {
+    this.props.gotoBlacklistPreviousPage();
+  }
+
+  onNextPagePress = () => {
+    this.props.gotoBlacklistNextPage();
+  }
+
+  onLastPagePress = () => {
+    this.props.gotoBlacklistLastPage();
+  }
+
+  onPageSelect = (page) => {
+    this.props.gotoBlacklistPage({ page });
+  }
+
+  onSortPress = (sortKey) => {
+    this.props.setBlacklistSort({ sortKey });
+  }
+
+  onTableOptionChange = (payload) => {
+    this.props.setBlacklistTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoBlacklistFirstPage();
+    }
+  }
+
+  onClearBlacklistPress = () => {
+    this.props.executeCommand({ name: commandNames.CLEAR_BLACKLIST });
+  }
+
+  onTableOptionChange = (payload) => {
+    this.props.setBlacklistTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoBlacklistFirstPage();
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Blacklist
+        onFirstPagePress={this.onFirstPagePress}
+        onPreviousPagePress={this.onPreviousPagePress}
+        onNextPagePress={this.onNextPagePress}
+        onLastPagePress={this.onLastPagePress}
+        onPageSelect={this.onPageSelect}
+        onSortPress={this.onSortPress}
+        onTableOptionChange={this.onTableOptionChange}
+        onClearBlacklistPress={this.onClearBlacklistPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+BlacklistConnector.propTypes = {
+  useCurrentPage: PropTypes.bool.isRequired,
+  isClearingBlacklistExecuting: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchBlacklist: PropTypes.func.isRequired,
+  gotoBlacklistFirstPage: PropTypes.func.isRequired,
+  gotoBlacklistPreviousPage: PropTypes.func.isRequired,
+  gotoBlacklistNextPage: PropTypes.func.isRequired,
+  gotoBlacklistLastPage: PropTypes.func.isRequired,
+  gotoBlacklistPage: PropTypes.func.isRequired,
+  setBlacklistSort: PropTypes.func.isRequired,
+  setBlacklistTableOption: PropTypes.func.isRequired,
+  clearBlacklist: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(BlacklistConnector)
+);

frontend/src/Activity/Blacklist/BlacklistDetailsModal.js

@@ -0,0 +1,89 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Button from 'Components/Link/Button';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import Modal from 'Components/Modal/Modal';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+
+class BlacklistDetailsModal extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      sourceTitle,
+      protocol,
+      indexer,
+      message,
+      onModalClose
+    } = this.props;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        onModalClose={onModalClose}
+      >
+        <ModalContent
+          onModalClose={onModalClose}
+        >
+          <ModalHeader>
+            Details
+          </ModalHeader>
+
+          <ModalBody>
+            <DescriptionList>
+              <DescriptionListItem
+                title="Name"
+                data={sourceTitle}
+              />
+
+              <DescriptionListItem
+                title="Protocol"
+                data={protocol}
+              />
+
+              {
+                !!message &&
+                  <DescriptionListItem
+                    title="Indexer"
+                    data={indexer}
+                  />
+              }
+
+              {
+                !!message &&
+                  <DescriptionListItem
+                    title="Message"
+                    data={message}
+                  />
+              }
+            </DescriptionList>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={onModalClose}>
+              Close
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+BlacklistDetailsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  message: PropTypes.string,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default BlacklistDetailsModal;

frontend/src/Activity/Blacklist/BlacklistRow.css

@@ -0,0 +1,18 @@
+.language,
+.quality {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 100px;
+}
+
+.indexer {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 80px;
+}
+
+.actions {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 70px;
+}

frontend/src/Activity/Blacklist/BlacklistRow.js

@@ -0,0 +1,170 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, kinds } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import MovieQuality from 'Movie/MovieQuality';
+import MovieTitleLink from 'Movie/MovieTitleLink';
+import BlacklistDetailsModal from './BlacklistDetailsModal';
+import styles from './BlacklistRow.css';
+
+class BlacklistRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isDetailsModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onDetailsPress = () => {
+    this.setState({ isDetailsModalOpen: true });
+  }
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      movie,
+      sourceTitle,
+      quality,
+      date,
+      protocol,
+      indexer,
+      message,
+      columns,
+      onRemovePress
+    } = this.props;
+
+    return (
+      <TableRow>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'movie.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieTitleLink
+                    titleSlug={movie.titleSlug}
+                    title={movie.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'sourceTitle') {
+              return (
+                <TableRowCell key={name}>
+                  {sourceTitle}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.quality}
+                >
+                  <MovieQuality
+                    quality={quality}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'date') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  date={date}
+                />
+              );
+            }
+
+            if (name === 'indexer') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.indexer}
+                >
+                  {indexer}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'actions') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.actions}
+                >
+                  <IconButton
+                    name={icons.INFO}
+                    onPress={this.onDetailsPress}
+                  />
+
+                  <IconButton
+                    title="Remove from blacklist"
+                    name={icons.REMOVE}
+                    kind={kinds.DANGER}
+                    onPress={onRemovePress}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <BlacklistDetailsModal
+          isOpen={this.state.isDetailsModalOpen}
+          sourceTitle={sourceTitle}
+          protocol={protocol}
+          indexer={indexer}
+          message={message}
+          onModalClose={this.onDetailsModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+BlacklistRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  movie: PropTypes.object.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  quality: PropTypes.object.isRequired,
+  date: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  message: PropTypes.string,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onRemovePress: PropTypes.func.isRequired
+};
+
+export default BlacklistRow;

frontend/src/Activity/Blacklist/BlacklistRowConnector.js

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { removeFromBlacklist } from 'Store/Actions/blacklistActions';
+import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import BlacklistRow from './BlacklistRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieSelector(),
+    (movie) => {
+      return {
+        movie
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onRemovePress() {
+      dispatch(removeFromBlacklist({ id: props.id }));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(BlacklistRow);

frontend/src/Activity/History/Details/HistoryDetails.css

@@ -0,0 +1,5 @@
+.description {
+  composes: title from 'Components/DescriptionList/DescriptionListItemDescription.css';
+
+  overflow-wrap: break-word;
+}

frontend/src/Activity/History/Details/HistoryDetails.js

@@ -0,0 +1,244 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatAge from 'Utilities/Number/formatAge';
+import Link from 'Components/Link/Link';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
+import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
+import styles from './HistoryDetails.css';
+
+function HistoryDetails(props) {
+  const {
+    eventType,
+    sourceTitle,
+    data,
+    shortDateFormat,
+    timeFormat
+  } = props;
+
+  if (eventType === 'grabbed') {
+    const {
+      indexer,
+      releaseGroup,
+      nzbInfoUrl,
+      downloadClient,
+      downloadId,
+      age,
+      ageHours,
+      ageMinutes,
+      publishedDate
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title="Name"
+          data={sourceTitle}
+        />
+
+        {
+          !!indexer &&
+            <DescriptionListItem
+              title="Indexer"
+              data={indexer}
+            />
+        }
+
+        {
+          !!releaseGroup &&
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title="Release Group"
+              data={releaseGroup}
+            />
+        }
+
+        {
+          !!nzbInfoUrl &&
+            <span>
+              <DescriptionListItemTitle>
+                Info URL
+              </DescriptionListItemTitle>
+
+              <DescriptionListItemDescription>
+                <Link to={nzbInfoUrl}>{nzbInfoUrl}</Link>
+              </DescriptionListItemDescription>
+            </span>
+        }
+
+        {
+          !!downloadClient &&
+            <DescriptionListItem
+              title="Download Client"
+              data={downloadClient}
+            />
+        }
+
+        {
+          !!downloadId &&
+            <DescriptionListItem
+              title="Grab ID"
+              data={downloadId}
+            />
+        }
+
+        {
+          !!indexer &&
+            <DescriptionListItem
+              title="Age (when grabbed)"
+              data={formatAge(age, ageHours, ageMinutes)}
+            />
+        }
+
+        {
+          !!publishedDate &&
+            <DescriptionListItem
+              title="Published Date"
+              data={formatDateTime(publishedDate, shortDateFormat, timeFormat, { includeSeconds: true })}
+            />
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'downloadFailed') {
+    const {
+      message
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title="Name"
+          data={sourceTitle}
+        />
+
+        {
+          !!message &&
+            <DescriptionListItem
+              title="Message"
+              data={message}
+            />
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'downloadFolderImported') {
+    const {
+      droppedPath,
+      importedPath
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title="Name"
+          data={sourceTitle}
+        />
+
+        {
+          !!droppedPath &&
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title="Source"
+              data={droppedPath}
+            />
+        }
+
+        {
+          !!importedPath &&
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title="Imported To"
+              data={importedPath}
+            />
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'episodeFileDeleted') {
+    const {
+      reason
+    } = data;
+
+    let reasonMessage = '';
+
+    switch (reason) {
+      case 'Manual':
+        reasonMessage = 'File was deleted by via UI';
+        break;
+      case 'MissingFromDisk':
+        reasonMessage = 'Radarr was unable to find the file on disk so it was removed';
+        break;
+      case 'Upgrade':
+        reasonMessage = 'File was deleted to import an upgrade';
+        break;
+      default:
+        reasonMessage = '';
+    }
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          title="Name"
+          data={sourceTitle}
+        />
+
+        <DescriptionListItem
+          title="Reason"
+          data={reasonMessage}
+        />
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'episodeFileRenamed') {
+    const {
+      sourcePath,
+      sourceRelativePath,
+      path,
+      relativePath
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          title="Source Path"
+          data={sourcePath}
+        />
+
+        <DescriptionListItem
+          title="Source Relative Path"
+          data={sourceRelativePath}
+        />
+
+        <DescriptionListItem
+          title="Destination Path"
+          data={path}
+        />
+
+        <DescriptionListItem
+          title="Destination Relative Path"
+          data={relativePath}
+        />
+      </DescriptionList>
+    );
+  }
+}
+
+HistoryDetails.propTypes = {
+  eventType: PropTypes.string.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired
+};
+
+export default HistoryDetails;

frontend/src/Activity/History/Details/HistoryDetailsConnector.js

@@ -0,0 +1,19 @@
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import HistoryDetails from './HistoryDetails';
+
+function createMapStateToProps() {
+  return createSelector(
+    createUISettingsSelector(),
+    (uiSettings) => {
+      return _.pick(uiSettings, [
+        'shortDateFormat',
+        'timeFormat'
+      ]);
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(HistoryDetails);

frontend/src/Activity/History/Details/HistoryDetailsModal.css

@@ -0,0 +1,5 @@
+.markAsFailedButton {
+  composes: button from 'Components/Link/Button.css';
+
+  margin-right: auto;
+}

frontend/src/Activity/History/Details/HistoryDetailsModal.js

@@ -0,0 +1,104 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { kinds } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import Modal from 'Components/Modal/Modal';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import HistoryDetails from './HistoryDetails';
+import styles from './HistoryDetailsModal.css';
+
+function getHeaderTitle(eventType) {
+  switch (eventType) {
+    case 'grabbed':
+      return 'Grabbed';
+    case 'downloadFailed':
+      return 'Download Failed';
+    case 'downloadFolderImported':
+      return 'Episode Imported';
+    case 'episodeFileDeleted':
+      return 'Episode File Deleted';
+    case 'episodeFileRenamed':
+      return 'Episode File Renamed';
+    default:
+      return 'Unknown';
+  }
+}
+
+function HistoryDetailsModal(props) {
+  const {
+    isOpen,
+    eventType,
+    sourceTitle,
+    data,
+    isMarkingAsFailed,
+    shortDateFormat,
+    timeFormat,
+    onMarkAsFailedPress,
+    onModalClose
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {getHeaderTitle(eventType)}
+        </ModalHeader>
+
+        <ModalBody>
+          <HistoryDetails
+            eventType={eventType}
+            sourceTitle={sourceTitle}
+            data={data}
+            shortDateFormat={shortDateFormat}
+            timeFormat={timeFormat}
+          />
+        </ModalBody>
+
+        <ModalFooter>
+          {
+            eventType === 'grabbed' &&
+              <SpinnerButton
+                className={styles.markAsFailedButton}
+                kind={kinds.DANGER}
+                isSpinning={isMarkingAsFailed}
+                onPress={onMarkAsFailedPress}
+              >
+                Mark as Failed
+              </SpinnerButton>
+          }
+
+          <Button
+            onPress={onModalClose}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+HistoryDetailsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  eventType: PropTypes.string.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  isMarkingAsFailed: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  onMarkAsFailedPress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+HistoryDetailsModal.defaultProps = {
+  isMarkingAsFailed: false
+};
+
+export default HistoryDetailsModal;

frontend/src/Activity/History/History.js

@@ -0,0 +1,163 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { align, icons } from 'Helpers/Props';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import TablePager from 'Components/Table/TablePager';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import HistoryRowConnector from './HistoryRowConnector';
+
+class History extends Component {
+
+  //
+  // Lifecycle
+
+  shouldComponentUpdate(nextProps) {
+    // Don't update when fetching has completed if items have changed,
+    // before episodes start fetching or when episodes start fetching.
+
+    if (
+      (
+        this.props.isFetching &&
+        nextProps.isPopulated &&
+        hasDifferentItems(this.props.items, nextProps.items)
+      )
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      columns,
+      selectedFilterKey,
+      filters,
+      totalRecords,
+      onFilterSelect,
+      onFirstPagePress,
+      ...otherProps
+    } = this.props;
+
+    const hasError = error;
+
+    return (
+      <PageContent title="History">
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="Refresh"
+              iconName={icons.REFRESH}
+              isSpinning={isFetching}
+              onPress={onFirstPagePress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <TableOptionsModalWrapper
+              {...otherProps}
+              columns={columns}
+            >
+              <PageToolbarButton
+                label="Options"
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+
+            <FilterMenu
+              alignMenu={align.RIGHT}
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={[]}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBodyConnector>
+          {
+            isFetching && !isPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && hasError &&
+              <div>Unable to load history</div>
+          }
+
+          {
+            // If history isPopulated and it's empty show no history found and don't
+            // wait for the episodes to populate because they are never coming.
+
+            isPopulated && !hasError && !items.length &&
+              <div>
+                No history found
+              </div>
+          }
+
+          {
+            isPopulated && !hasError && !!items.length &&
+              <div>
+                <Table
+                  columns={columns}
+                  {...otherProps}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <HistoryRowConnector
+                            key={item.id}
+                            columns={columns}
+                            {...item}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isFetching}
+                  onFirstPagePress={onFirstPagePress}
+                  {...otherProps}
+                />
+              </div>
+          }
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+}
+
+History.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.string.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  onFilterSelect: PropTypes.func.isRequired,
+  onFirstPagePress: PropTypes.func.isRequired
+};
+
+export default History;

frontend/src/Activity/History/HistoryConnector.js

@@ -0,0 +1,134 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import withCurrentPage from 'Components/withCurrentPage';
+import * as historyActions from 'Store/Actions/historyActions';
+import History from './History';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.history,
+    (history) => {
+      return {
+        ...history
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...historyActions
+};
+
+class HistoryConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchHistory,
+      gotoHistoryFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchHistory();
+    } else {
+      gotoHistoryFirstPage();
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearHistory();
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    this.props.fetchHistory();
+  }
+
+  //
+  // Listeners
+
+  onFirstPagePress = () => {
+    this.props.gotoHistoryFirstPage();
+  }
+
+  onPreviousPagePress = () => {
+    this.props.gotoHistoryPreviousPage();
+  }
+
+  onNextPagePress = () => {
+    this.props.gotoHistoryNextPage();
+  }
+
+  onLastPagePress = () => {
+    this.props.gotoHistoryLastPage();
+  }
+
+  onPageSelect = (page) => {
+    this.props.gotoHistoryPage({ page });
+  }
+
+  onSortPress = (sortKey) => {
+    this.props.setHistorySort({ sortKey });
+  }
+
+  onFilterSelect = (selectedFilterKey) => {
+    this.props.setHistoryFilter({ selectedFilterKey });
+  }
+
+  onTableOptionChange = (payload) => {
+    this.props.setHistoryTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoHistoryFirstPage();
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <History
+        onFirstPagePress={this.onFirstPagePress}
+        onPreviousPagePress={this.onPreviousPagePress}
+        onNextPagePress={this.onNextPagePress}
+        onLastPagePress={this.onLastPagePress}
+        onPageSelect={this.onPageSelect}
+        onSortPress={this.onSortPress}
+        onFilterSelect={this.onFilterSelect}
+        onTableOptionChange={this.onTableOptionChange}
+        {...this.props}
+      />
+    );
+  }
+}
+
+HistoryConnector.propTypes = {
+  useCurrentPage: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchHistory: PropTypes.func.isRequired,
+  gotoHistoryFirstPage: PropTypes.func.isRequired,
+  gotoHistoryPreviousPage: PropTypes.func.isRequired,
+  gotoHistoryNextPage: PropTypes.func.isRequired,
+  gotoHistoryLastPage: PropTypes.func.isRequired,
+  gotoHistoryPage: PropTypes.func.isRequired,
+  setHistorySort: PropTypes.func.isRequired,
+  setHistoryFilter: PropTypes.func.isRequired,
+  setHistoryTableOption: PropTypes.func.isRequired,
+  clearHistory: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(HistoryConnector)
+);

frontend/src/Activity/History/HistoryEventTypeCell.css

@@ -0,0 +1,6 @@
+.cell {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 35px;
+  text-align: center;
+}

frontend/src/Activity/History/HistoryEventTypeCell.js

@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { icons, kinds } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import styles from './HistoryEventTypeCell.css';
+
+function getIconName(eventType) {
+  switch (eventType) {
+    case 'grabbed':
+      return icons.DOWNLOADING;
+    case 'seriesFolderImported':
+      return icons.DRIVE;
+    case 'downloadFolderImported':
+      return icons.DOWNLOADED;
+    case 'downloadFailed':
+      return icons.DOWNLOADING;
+    case 'episodeFileDeleted':
+      return icons.DELETE;
+    case 'episodeFileRenamed':
+      return icons.ORGANIZE;
+    default:
+      return icons.UNKNOWN;
+  }
+}
+
+function getIconKind(eventType) {
+  switch (eventType) {
+    case 'downloadFailed':
+      return kinds.DANGER;
+    default:
+      return kinds.DEFAULT;
+  }
+}
+
+function getTooltip(eventType, data) {
+  switch (eventType) {
+    case 'grabbed':
+      return `Episode grabbed from ${data.indexer} and sent to ${data.downloadClient}`;
+    case 'seriesFolderImported':
+      return 'Episode imported from series folder';
+    case 'downloadFolderImported':
+      return 'Episode downloaded successfully and picked up from download client';
+    case 'downloadFailed':
+      return 'Episode download failed';
+    case 'episodeFileDeleted':
+      return 'Episode file deleted';
+    case 'episodeFileRenamed':
+      return 'Episode file renamed';
+    default:
+      return 'Unknown event';
+  }
+}
+
+function HistoryEventTypeCell({ eventType, data }) {
+  const iconName = getIconName(eventType);
+  const iconKind = getIconKind(eventType);
+  const tooltip = getTooltip(eventType, data);
+
+  return (
+    <TableRowCell
+      className={styles.cell}
+      title={tooltip}
+    >
+      <Icon
+        name={iconName}
+        kind={iconKind}
+      />
+    </TableRowCell>
+  );
+}
+
+HistoryEventTypeCell.propTypes = {
+  eventType: PropTypes.string.isRequired,
+  data: PropTypes.object
+};
+
+HistoryEventTypeCell.defaultProps = {
+  data: {}
+};
+
+export default HistoryEventTypeCell;

frontend/src/Activity/History/HistoryRow.css

@@ -0,0 +1,23 @@
+.downloadClient {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 120px;
+}
+
+.indexer {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 80px;
+}
+
+.releaseGroup {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 110px;
+}
+
+.details {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 30px;
+}

frontend/src/Activity/History/HistoryRow.js

@@ -0,0 +1,212 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import MovieQuality from 'Movie/MovieQuality';
+import MovieTitleLink from 'Movie/MovieTitleLink';
+import HistoryEventTypeCell from './HistoryEventTypeCell';
+import HistoryDetailsModal from './Details/HistoryDetailsModal';
+import styles from './HistoryRow.css';
+
+class HistoryRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isDetailsModalOpen: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.isMarkingAsFailed &&
+      !this.props.isMarkingAsFailed &&
+      !this.props.markAsFailedError
+    ) {
+      this.setState({ isDetailsModalOpen: false });
+    }
+  }
+
+  //
+  // Listeners
+
+  onDetailsPress = () => {
+    this.setState({ isDetailsModalOpen: true });
+  }
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      movie,
+      quality,
+      qualityCutoffNotMet,
+      eventType,
+      sourceTitle,
+      date,
+      data,
+      isMarkingAsFailed,
+      columns,
+      shortDateFormat,
+      timeFormat,
+      onMarkAsFailedPress
+    } = this.props;
+
+    if (!movie) {
+      return null;
+    }
+
+    return (
+      <TableRow>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'eventType') {
+              return (
+                <HistoryEventTypeCell
+                  key={name}
+                  eventType={eventType}
+                  data={data}
+                />
+              );
+            }
+
+            if (name === 'movie.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieTitleLink
+                    titleSlug={movie.titleSlug}
+                    title={movie.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieQuality
+                    quality={quality}
+                    isCutoffMet={qualityCutoffNotMet}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'date') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  date={date}
+                />
+              );
+            }
+
+            if (name === 'downloadClient') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.downloadClient}
+                >
+                  {data.downloadClient}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'indexer') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.indexer}
+                >
+                  {data.indexer}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'releaseGroup') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.releaseGroup}
+                >
+                  {data.releaseGroup}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'details') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.details}
+                >
+                  <IconButton
+                    name={icons.INFO}
+                    onPress={this.onDetailsPress}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <HistoryDetailsModal
+          isOpen={this.state.isDetailsModalOpen}
+          eventType={eventType}
+          sourceTitle={sourceTitle}
+          data={data}
+          isMarkingAsFailed={isMarkingAsFailed}
+          shortDateFormat={shortDateFormat}
+          timeFormat={timeFormat}
+          onMarkAsFailedPress={onMarkAsFailedPress}
+          onModalClose={this.onDetailsModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+HistoryRow.propTypes = {
+  movieId: PropTypes.number,
+  movie: PropTypes.object.isRequired,
+  language: PropTypes.object.isRequired,
+  languageCutoffNotMet: PropTypes.bool.isRequired,
+  quality: PropTypes.object.isRequired,
+  qualityCutoffNotMet: PropTypes.bool.isRequired,
+  eventType: PropTypes.string.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  isMarkingAsFailed: PropTypes.bool,
+  markAsFailedError: PropTypes.object,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  onMarkAsFailedPress: PropTypes.func.isRequired
+};
+
+export default HistoryRow;

frontend/src/Activity/History/HistoryRowConnector.js

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
+import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import HistoryRow from './HistoryRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieSelector(),
+    createUISettingsSelector(),
+    (movie, uiSettings) => {
+      return {
+        movie,
+        shortDateFormat: uiSettings.shortDateFormat,
+        timeFormat: uiSettings.timeFormat
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchHistory,
+  markAsFailed
+};
+
+class HistoryRowConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.isMarkingAsFailed &&
+      !this.props.isMarkingAsFailed &&
+      !this.props.markAsFailedError
+    ) {
+      this.props.fetchHistory();
+    }
+  }
+
+  //
+  // Listeners
+
+  onMarkAsFailedPress = () => {
+    this.props.markAsFailed({ id: this.props.id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <HistoryRow
+        {...this.props}
+        onMarkAsFailedPress={this.onMarkAsFailedPress}
+      />
+    );
+  }
+
+}
+
+HistoryRowConnector.propTypes = {
+  id: PropTypes.number.isRequired,
+  isMarkingAsFailed: PropTypes.bool,
+  markAsFailedError: PropTypes.object,
+  fetchHistory: PropTypes.func.isRequired,
+  markAsFailed: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(HistoryRowConnector);

frontend/src/Activity/Queue/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/Activity/Queue/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;

frontend/src/Activity/Queue/Queue.js

@@ -0,0 +1,278 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import { align, icons } from 'Helpers/Props';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TablePager from 'Components/Table/TablePager';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import RemoveQueueItemsModal from './RemoveQueueItemsModal';
+import QueueOptionsConnector from './QueueOptionsConnector';
+import QueueRowConnector from './QueueRowConnector';
+
+class Queue extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {},
+      isPendingSelected: false,
+      isConfirmRemoveModalOpen: false
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    // Don't update when fetching has completed if items have changed,
+    // before episodes start fetching or when episodes start fetching.
+
+    if (
+      this.props.isFetching &&
+      nextProps.isPopulated &&
+      hasDifferentItems(this.props.items, nextProps.items) &&
+      nextProps.items.some((e) => e.episodeId)
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (hasDifferentItems(prevProps.items, this.props.items)) {
+      this.setState((state) => {
+        return removeOldSelectedState(state, prevProps.items);
+      });
+
+      return;
+    }
+
+    const selectedIds = this.getSelectedIds();
+    const isPendingSelected = _.some(this.props.items, (item) => {
+      return selectedIds.indexOf(item.id) > -1 && item.status === 'Delay';
+    });
+
+    if (isPendingSelected !== this.state.isPendingSelected) {
+      this.setState({ isPendingSelected });
+    }
+  }
+
+  //
+  // Control
+
+  getSelectedIds = () => {
+    return getSelectedIds(this.state.selectedState);
+  }
+
+  //
+  // Listeners
+
+  onSelectAllChange = ({ value }) => {
+    this.setState(selectAll(this.state.selectedState, value));
+  }
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey);
+    });
+  }
+
+  onGrabSelectedPress = () => {
+    this.props.onGrabSelectedPress(this.getSelectedIds());
+  }
+
+  onRemoveSelectedPress = () => {
+    this.setState({ isConfirmRemoveModalOpen: true });
+  }
+
+  onRemoveSelectedConfirmed = (blacklist) => {
+    this.props.onRemoveSelectedPress(this.getSelectedIds(), blacklist);
+    this.setState({ isConfirmRemoveModalOpen: false });
+  }
+
+  onConfirmRemoveModalClose = () => {
+    this.setState({ isConfirmRemoveModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      columns,
+      totalRecords,
+      isGrabbing,
+      isRemoving,
+      isCheckForFinishedDownloadExecuting,
+      onRefreshPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      isConfirmRemoveModalOpen,
+      isPendingSelected
+    } = this.state;
+
+    const isRefreshing = isFetching || isCheckForFinishedDownloadExecuting;
+    const isAllPopulated = isPopulated && !items.length;
+    const hasError = error;
+    const selectedCount = this.getSelectedIds().length;
+    const disableSelectedActions = selectedCount === 0;
+
+    return (
+      <PageContent title="Queue">
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="Refresh"
+              iconName={icons.REFRESH}
+              isSpinning={isRefreshing}
+              onPress={onRefreshPress}
+            />
+
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label="Grab Selected"
+              iconName={icons.DOWNLOAD}
+              isDisabled={disableSelectedActions || !isPendingSelected}
+              isSpinning={isGrabbing}
+              onPress={this.onGrabSelectedPress}
+            />
+
+            <PageToolbarButton
+              label="Remove Selected"
+              iconName={icons.REMOVE}
+              isDisabled={disableSelectedActions}
+              isSpinning={isRemoving}
+              onPress={this.onRemoveSelectedPress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection
+            alignContent={align.RIGHT}
+          >
+            <TableOptionsModalWrapper
+              columns={columns}
+              {...otherProps}
+              optionsComponent={QueueOptionsConnector}
+            >
+              <PageToolbarButton
+                label="Options"
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBodyConnector>
+          {
+            isRefreshing && !isAllPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isRefreshing && hasError &&
+              <div>
+                Failed to load Queue
+              </div>
+          }
+
+          {
+            isPopulated && !hasError && !items.length &&
+              <div>
+                Queue is empty
+              </div>
+          }
+
+          {
+            isAllPopulated && !hasError && !!items.length &&
+              <div>
+                <Table
+                  columns={columns}
+                  selectAll={true}
+                  allSelected={allSelected}
+                  allUnselected={allUnselected}
+                  {...otherProps}
+                  optionsComponent={QueueOptionsConnector}
+                  onSelectAllChange={this.onSelectAllChange}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <QueueRowConnector
+                            key={item.id}
+                            episodeId={item.episodeId}
+                            isSelected={selectedState[item.id]}
+                            columns={columns}
+                            {...item}
+                            onSelectedChange={this.onSelectedChange}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isRefreshing}
+                  {...otherProps}
+                />
+              </div>
+          }
+        </PageContentBodyConnector>
+
+        <RemoveQueueItemsModal
+          isOpen={isConfirmRemoveModalOpen}
+          selectedCount={selectedCount}
+          onRemovePress={this.onRemoveSelectedConfirmed}
+          onModalClose={this.onConfirmRemoveModalClose}
+        />
+      </PageContent>
+    );
+  }
+}
+
+Queue.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  isGrabbing: PropTypes.bool.isRequired,
+  isRemoving: PropTypes.bool.isRequired,
+  isCheckForFinishedDownloadExecuting: PropTypes.bool.isRequired,
+  onRefreshPress: PropTypes.func.isRequired,
+  onGrabSelectedPress: PropTypes.func.isRequired,
+  onRemoveSelectedPress: PropTypes.func.isRequired
+};
+
+export default Queue;

frontend/src/Activity/Queue/QueueConnector.js

@@ -0,0 +1,164 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import withCurrentPage from 'Components/withCurrentPage';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import { executeCommand } from 'Store/Actions/commandActions';
+import * as queueActions from 'Store/Actions/queueActions';
+import * as commandNames from 'Commands/commandNames';
+import Queue from './Queue';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.queue.options,
+    (state) => state.queue.paged,
+    createCommandExecutingSelector(commandNames.CHECK_FOR_FINISHED_DOWNLOAD),
+    (options, queue, isCheckForFinishedDownloadExecuting) => {
+      return {
+        isCheckForFinishedDownloadExecuting,
+        ...options,
+        ...queue
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...queueActions,
+  executeCommand
+};
+
+class QueueConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchQueue,
+      gotoQueueFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchQueue();
+    } else {
+      gotoQueueFirstPage();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.includeUnknownMovieItems !==
+      prevProps.includeUnknownMovieItems
+    ) {
+      this.repopulate();
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearQueue();
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    this.props.fetchQueue();
+  }
+
+  //
+  // Listeners
+
+  onFirstPagePress = () => {
+    this.props.gotoQueueFirstPage();
+  }
+
+  onPreviousPagePress = () => {
+    this.props.gotoQueuePreviousPage();
+  }
+
+  onNextPagePress = () => {
+    this.props.gotoQueueNextPage();
+  }
+
+  onLastPagePress = () => {
+    this.props.gotoQueueLastPage();
+  }
+
+  onPageSelect = (page) => {
+    this.props.gotoQueuePage({ page });
+  }
+
+  onSortPress = (sortKey) => {
+    this.props.setQueueSort({ sortKey });
+  }
+
+  onTableOptionChange = (payload) => {
+    this.props.setQueueTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoQueueFirstPage();
+    }
+  }
+
+  onRefreshPress = () => {
+    this.props.executeCommand({
+      name: commandNames.CHECK_FOR_FINISHED_DOWNLOAD
+    });
+  }
+
+  onGrabSelectedPress = (ids) => {
+    this.props.grabQueueItems({ ids });
+  }
+
+  onRemoveSelectedPress = (ids, blacklist) => {
+    this.props.removeQueueItems({ ids, blacklist });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Queue
+        onFirstPagePress={this.onFirstPagePress}
+        onPreviousPagePress={this.onPreviousPagePress}
+        onNextPagePress={this.onNextPagePress}
+        onLastPagePress={this.onLastPagePress}
+        onPageSelect={this.onPageSelect}
+        onSortPress={this.onSortPress}
+        onTableOptionChange={this.onTableOptionChange}
+        onRefreshPress={this.onRefreshPress}
+        onGrabSelectedPress={this.onGrabSelectedPress}
+        onRemoveSelectedPress={this.onRemoveSelectedPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+QueueConnector.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchQueue: PropTypes.func.isRequired,
+  gotoQueueFirstPage: PropTypes.func.isRequired,
+  gotoQueuePreviousPage: PropTypes.func.isRequired,
+  gotoQueueNextPage: PropTypes.func.isRequired,
+  gotoQueueLastPage: PropTypes.func.isRequired,
+  gotoQueuePage: PropTypes.func.isRequired,
+  setQueueSort: PropTypes.func.isRequired,
+  setQueueTableOption: PropTypes.func.isRequired,
+  clearQueue: PropTypes.func.isRequired,
+  grabQueueItems: PropTypes.func.isRequired,
+  removeQueueItems: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(QueueConnector)
+);

frontend/src/Activity/Queue/QueueDetails.js

@@ -0,0 +1,97 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { icons, kinds } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+
+function QueueDetails(props) {
+  const {
+    title,
+    size,
+    sizeleft,
+    estimatedCompletionTime,
+    status: queueStatus,
+    errorMessage,
+    progressBar
+  } = props;
+
+  const status = queueStatus.toLowerCase();
+
+  const progress = (100 - sizeleft / size * 100);
+
+  if (status === 'pending') {
+    return (
+      <Icon
+        name={icons.PENDING}
+        title={`Release will be processed ${moment(estimatedCompletionTime).fromNow()}`}
+      />
+    );
+  }
+
+  if (status === 'completed') {
+    if (errorMessage) {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.DANGER}
+          title={`Import failed: ${errorMessage}`}
+        />
+      );
+    }
+
+    // TODO: show an icon when download is complete, but not imported yet?
+  }
+
+  if (errorMessage) {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.DANGER}
+        title={`Download failed: ${errorMessage}`}
+      />
+    );
+  }
+
+  if (status === 'failed') {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.DANGER}
+        title="Download failed: check download client for more details"
+      />
+    );
+  }
+
+  if (status === 'warning') {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.WARNING}
+        title="Download warning: check download client for more details"
+      />
+    );
+  }
+
+  if (progress < 5) {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        title={`Episode is downloading - ${progress.toFixed(1)}% ${title}`}
+      />
+    );
+  }
+
+  return progressBar;
+}
+
+QueueDetails.propTypes = {
+  title: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  sizeleft: PropTypes.number.isRequired,
+  estimatedCompletionTime: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  errorMessage: PropTypes.string,
+  progressBar: PropTypes.node.isRequired
+};
+
+export default QueueDetails;

frontend/src/Activity/Queue/QueueOptions.js

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import React, { Component, Fragment } from 'react';
+import { inputTypes } from 'Helpers/Props';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+
+class QueueOptions extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      includeUnknownSeriesItems: props.includeUnknownSeriesItems
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      includeUnknownSeriesItems
+    } = this.props;
+
+    if (includeUnknownSeriesItems !== prevProps.includeUnknownSeriesItems) {
+      this.setState({
+        includeUnknownSeriesItems
+      });
+    }
+  }
+
+  //
+  // Listeners
+
+  onOptionChange = ({ name, value }) => {
+    this.setState({
+      [name]: value
+    }, () => {
+      this.props.onOptionChange({
+        [name]: value
+      });
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      includeUnknownSeriesItems
+    } = this.state;
+
+    return (
+      <Fragment>
+        <FormGroup>
+          <FormLabel>Show Unknown Series Items</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.CHECK}
+            name="includeUnknownSeriesItems"
+            value={includeUnknownSeriesItems}
+            helpText="Show items without a series in the queue, this could include removed series, movies or anything else in Sonarr's category"
+            onChange={this.onOptionChange}
+          />
+        </FormGroup>
+      </Fragment>
+    );
+  }
+}
+
+QueueOptions.propTypes = {
+  includeUnknownSeriesItems: PropTypes.bool.isRequired,
+  onOptionChange: PropTypes.func.isRequired
+};
+
+export default QueueOptions;

frontend/src/Activity/Queue/QueueOptionsConnector.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setQueueOption } from 'Store/Actions/queueActions';
+import QueueOptions from './QueueOptions';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.queue.options,
+    (options) => {
+      return options;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  onOptionChange: setQueueOption
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueOptions);

frontend/src/Activity/Queue/QueueRow.css

@@ -0,0 +1,23 @@
+.quality {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 150px;
+}
+
+.protocol {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 100px;
+}
+
+.progress {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 150px;
+}
+
+.actions {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 70px;
+}

frontend/src/Activity/Queue/QueueRow.js

@@ -0,0 +1,326 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, kinds } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import ProgressBar from 'Components/ProgressBar';
+import TableRow from 'Components/Table/TableRow';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
+import MovieQuality from 'Movie/MovieQuality';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import MovieTitleLink from 'Movie/MovieTitleLink';
+import QueueStatusCell from './QueueStatusCell';
+import TimeleftCell from './TimeleftCell';
+import RemoveQueueItemModal from './RemoveQueueItemModal';
+import styles from './QueueRow.css';
+
+class QueueRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isRemoveQueueItemModalOpen: false,
+      isInteractiveImportModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onRemoveQueueItemPress = () => {
+    this.setState({ isRemoveQueueItemModalOpen: true });
+  }
+
+  onRemoveQueueItemModalConfirmed = (blacklist) => {
+    this.props.onRemoveQueueItemPress(blacklist);
+    this.setState({ isRemoveQueueItemModalOpen: false });
+  }
+
+  onRemoveQueueItemModalClose = () => {
+    this.setState({ isRemoveQueueItemModalOpen: false });
+  }
+
+  onInteractiveImportPress = () => {
+    this.setState({ isInteractiveImportModalOpen: true });
+  }
+
+  onInteractiveImportModalClose = () => {
+    this.setState({ isInteractiveImportModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      downloadId,
+      title,
+      status,
+      trackedDownloadStatus,
+      statusMessages,
+      errorMessage,
+      series,
+      episode,
+      quality,
+      protocol,
+      indexer,
+      downloadClient,
+      estimatedCompletionTime,
+      timeleft,
+      size,
+      sizeleft,
+      showRelativeDates,
+      shortDateFormat,
+      timeFormat,
+      isGrabbing,
+      grabError,
+      isRemoving,
+      isSelected,
+      columns,
+      onSelectedChange,
+      onGrabPress
+    } = this.props;
+
+    const {
+      isRemoveQueueItemModalOpen,
+      isInteractiveImportModalOpen
+    } = this.state;
+
+    const progress = 100 - (sizeleft / size * 100);
+    const showInteractiveImport = status === 'Completed' && trackedDownloadStatus === 'Warning';
+    const isPending = status === 'Delay' || status === 'DownloadClientUnavailable';
+
+    return (
+      <TableRow>
+        <TableSelectCell
+          id={id}
+          isSelected={isSelected}
+          onSelectedChange={onSelectedChange}
+        />
+
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'status') {
+              return (
+                <QueueStatusCell
+                  key={name}
+                  sourceTitle={title}
+                  status={status}
+                  trackedDownloadStatus={trackedDownloadStatus}
+                  statusMessages={statusMessages}
+                  errorMessage={errorMessage}
+                />
+              );
+            }
+
+            if (name === 'series.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieTitleLink
+                    titleSlug={series.titleSlug}
+                    title={series.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'series') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieTitleLink
+                    titleSlug={series.titleSlug}
+                    title={series.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'episode.airDateUtc') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  date={episode.airDateUtc}
+                />
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieQuality
+                    quality={quality}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'protocol') {
+              return (
+                <TableRowCell key={name}>
+                  <ProtocolLabel
+                    protocol={protocol}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'indexer') {
+              return (
+                <TableRowCell key={name}>
+                  {indexer}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'downloadClient') {
+              return (
+                <TableRowCell key={name}>
+                  {downloadClient}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'estimatedCompletionTime') {
+              return (
+                <TimeleftCell
+                  key={name}
+                  status={status}
+                  estimatedCompletionTime={estimatedCompletionTime}
+                  timeleft={timeleft}
+                  size={size}
+                  sizeleft={sizeleft}
+                  showRelativeDates={showRelativeDates}
+                  shortDateFormat={shortDateFormat}
+                  timeFormat={timeFormat}
+                />
+              );
+            }
+
+            if (name === 'progress') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.progress}
+                >
+                  {
+                    !!progress &&
+                      <ProgressBar
+                        progress={progress}
+                        title={`${progress.toFixed(1)}%`}
+                      />
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'actions') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.actions}
+                >
+                  {
+                    showInteractiveImport &&
+                      <IconButton
+                        name={icons.INTERACTIVE}
+                        onPress={this.onInteractiveImportPress}
+                      />
+                  }
+
+                  {
+                    isPending &&
+                      <SpinnerIconButton
+                        name={icons.DOWNLOAD}
+                        kind={grabError ? kinds.DANGER : kinds.DEFAULT}
+                        isSpinning={isGrabbing}
+                        onPress={onGrabPress}
+                      />
+                  }
+
+                  <SpinnerIconButton
+                    title="Remove from queue"
+                    name={icons.REMOVE}
+                    isSpinning={isRemoving}
+                    onPress={this.onRemoveQueueItemPress}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <InteractiveImportModal
+          isOpen={isInteractiveImportModalOpen}
+          downloadId={downloadId}
+          title={title}
+          onModalClose={this.onInteractiveImportModalClose}
+        />
+
+        <RemoveQueueItemModal
+          isOpen={isRemoveQueueItemModalOpen}
+          sourceTitle={title}
+          onRemovePress={this.onRemoveQueueItemModalConfirmed}
+          onModalClose={this.onRemoveQueueItemModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+QueueRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  downloadId: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
+  errorMessage: PropTypes.string,
+  series: PropTypes.object.isRequired,
+  episode: PropTypes.object.isRequired,
+  quality: PropTypes.object.isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  downloadClient: PropTypes.string,
+  estimatedCompletionTime: PropTypes.string,
+  timeleft: PropTypes.string,
+  size: PropTypes.number,
+  sizeleft: PropTypes.number,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  isGrabbing: PropTypes.bool.isRequired,
+  grabError: PropTypes.object,
+  isRemoving: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onGrabPress: PropTypes.func.isRequired,
+  onRemoveQueueItemPress: PropTypes.func.isRequired
+};
+
+QueueRow.defaultProps = {
+  isGrabbing: false,
+  isRemoving: false
+};
+
+export default QueueRow;

frontend/src/Activity/Queue/QueueRowConnector.js

@@ -0,0 +1,68 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { grabQueueItem, removeQueueItem } from 'Store/Actions/queueActions';
+import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import QueueRow from './QueueRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieSelector(),
+    createUISettingsSelector(),
+    (series, uiSettings) => {
+      const result = _.pick(uiSettings, [
+        'showRelativeDates',
+        'shortDateFormat',
+        'timeFormat'
+      ]);
+
+      result.series = series;
+
+      return result;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  grabQueueItem,
+  removeQueueItem
+};
+
+class QueueRowConnector extends Component {
+
+  //
+  // Listeners
+
+  onGrabPress = () => {
+    this.props.grabQueueItem({ id: this.props.id });
+  }
+
+  onRemoveQueueItemPress = (blacklist) => {
+    this.props.removeQueueItem({ id: this.props.id, blacklist });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <QueueRow
+        {...this.props}
+        onGrabPress={this.onGrabPress}
+        onRemoveQueueItemPress={this.onRemoveQueueItemPress}
+      />
+    );
+  }
+}
+
+QueueRowConnector.propTypes = {
+  id: PropTypes.number.isRequired,
+  episode: PropTypes.object,
+  grabQueueItem: PropTypes.func.isRequired,
+  removeQueueItem: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueRowConnector);

frontend/src/Activity/Queue/QueueStatusCell.css

@@ -0,0 +1,5 @@
+.status {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 30px;
+}

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -0,0 +1,132 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Popover from 'Components/Tooltip/Popover';
+import styles from './QueueStatusCell.css';
+
+function getDetailedPopoverBody(statusMessages) {
+  return (
+    <div>
+      {
+        statusMessages.map(({ title, messages }) => {
+          return (
+            <div key={title}>
+              {title}
+              <ul>
+                {
+                  messages.map((message) => {
+                    return (
+                      <li key={message}>
+                        {message}
+                      </li>
+                    );
+                  })
+                }
+              </ul>
+            </div>
+          );
+        })
+      }
+    </div>
+  );
+}
+
+function QueueStatusCell(props) {
+  const {
+    sourceTitle,
+    status,
+    trackedDownloadStatus = 'Ok',
+    statusMessages,
+    errorMessage
+  } = props;
+
+  const hasWarning = trackedDownloadStatus === 'Warning';
+  const hasError = trackedDownloadStatus === 'Error';
+
+  // status === 'downloading'
+  let iconName = icons.DOWNLOADING;
+  let iconKind = kinds.DEFAULT;
+  let title = 'Downloading';
+
+  if (hasWarning) {
+    iconKind = kinds.WARNING;
+  }
+
+  if (status === 'Paused') {
+    iconName = icons.PAUSED;
+    title = 'Paused';
+  }
+
+  if (status === 'Queued') {
+    iconName = icons.QUEUED;
+    title = 'Queued';
+  }
+
+  if (status === 'Completed') {
+    iconName = icons.DOWNLOADED;
+    title = 'Downloaded';
+  }
+
+  if (status === 'Delay') {
+    iconName = icons.PENDING;
+    title = 'Pending';
+  }
+
+  if (status === 'DownloadClientUnavailable') {
+    iconName = icons.PENDING;
+    iconKind = kinds.WARNING;
+    title = 'Pending - Download client is unavailable';
+  }
+
+  if (status === 'Failed') {
+    iconName = icons.DOWNLOADING;
+    iconKind = kinds.DANGER;
+    title = 'Download failed';
+  }
+
+  if (status === 'Warning') {
+    iconName = icons.DOWNLOADING;
+    iconKind = kinds.WARNING;
+    title = `Download warning: ${errorMessage || 'check download client for more details'}`;
+  }
+
+  if (hasError) {
+    if (status === 'Completed') {
+      iconName = icons.DOWNLOAD;
+      iconKind = kinds.DANGER;
+      title = `Import failed: ${sourceTitle}`;
+    } else {
+      iconName = icons.DOWNLOADING;
+      iconKind = kinds.DANGER;
+      title = 'Download failed';
+    }
+  }
+
+  return (
+    <TableRowCell className={styles.status}>
+      <Popover
+        anchor={
+          <Icon
+            name={iconName}
+            kind={iconKind}
+          />
+        }
+        title={title}
+        body={hasWarning || hasError ? getDetailedPopoverBody(statusMessages) : sourceTitle}
+        position={tooltipPositions.RIGHT}
+      />
+    </TableRowCell>
+  );
+}
+
+QueueStatusCell.propTypes = {
+  sourceTitle: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
+  errorMessage: PropTypes.string
+};
+
+export default QueueStatusCell;

frontend/src/Activity/Queue/RemoveQueueItemModal.css

@@ -0,0 +1,3 @@
+.message {
+  margin-bottom: 30px;
+}

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Modal from 'Components/Modal/Modal';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import styles from './RemoveQueueItemModal.css';
+
+class RemoveQueueItemModal extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      blacklist: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onBlacklistChange = ({ value }) => {
+    this.setState({ blacklist: value });
+  }
+
+  onRemoveQueueItemConfirmed = () => {
+    const blacklist = this.state.blacklist;
+
+    this.setState({ blacklist: false });
+    this.props.onRemovePress(blacklist);
+  }
+
+  onModalClose = () => {
+    this.setState({ blacklist: false });
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      sourceTitle
+    } = this.props;
+
+    const blacklist = this.state.blacklist;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        size={sizes.MEDIUM}
+        onModalClose={this.onModalClose}
+      >
+        <ModalContent
+          onModalClose={this.onModalClose}
+        >
+          <ModalHeader>
+            Remove - {sourceTitle}
+          </ModalHeader>
+
+          <ModalBody>
+            <div className={styles.message}>
+              Are you sure you want to remove '{sourceTitle}' from the queue?
+            </div>
+
+            <FormGroup>
+              <FormLabel>Blacklist Release</FormLabel>
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="blacklist"
+                value={blacklist}
+                helpText="Prevents Radarr from automatically grabbing this movie again"
+                onChange={this.onBlacklistChange}
+              />
+            </FormGroup>
+
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={this.onModalClose}>
+              Close
+            </Button>
+
+            <Button
+              kind={kinds.DANGER}
+              onPress={this.onRemoveQueueItemConfirmed}
+            >
+              Remove
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+RemoveQueueItemModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  onRemovePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default RemoveQueueItemModal;

frontend/src/Activity/Queue/RemoveQueueItemsModal.css

@@ -0,0 +1,3 @@
+.message {
+  margin-bottom: 30px;
+}

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Modal from 'Components/Modal/Modal';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import styles from './RemoveQueueItemsModal.css';
+
+class RemoveQueueItemsModal extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      blacklist: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onBlacklistChange = ({ value }) => {
+    this.setState({ blacklist: value });
+  }
+
+  onRemoveQueueItemConfirmed = () => {
+    const blacklist = this.state.blacklist;
+
+    this.setState({ blacklist: false });
+    this.props.onRemovePress(blacklist);
+  }
+
+  onModalClose = () => {
+    this.setState({ blacklist: false });
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      selectedCount
+    } = this.props;
+
+    const blacklist = this.state.blacklist;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        size={sizes.MEDIUM}
+        onModalClose={this.onModalClose}
+      >
+        <ModalContent
+          onModalClose={this.onModalClose}
+        >
+          <ModalHeader>
+            Remove Selected Item{selectedCount > 1 ? 's' : ''}
+          </ModalHeader>
+
+          <ModalBody>
+            <div className={styles.message}>
+              Are you sure you want to remove {selectedCount} item{selectedCount > 1 ? 's' : ''} from the queue?
+            </div>
+
+            <FormGroup>
+              <FormLabel>Blacklist Release</FormLabel>
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="blacklist"
+                value={blacklist}
+                helpText="Prevents Radarr from automatically grabbing this movie again"
+                onChange={this.onBlacklistChange}
+              />
+            </FormGroup>
+
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={this.onModalClose}>
+              Close
+            </Button>
+
+            <Button
+              kind={kinds.DANGER}
+              onPress={this.onRemoveQueueItemConfirmed}
+            >
+              Remove
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+RemoveQueueItemsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  selectedCount: PropTypes.number.isRequired,
+  onRemovePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default RemoveQueueItemsModal;

frontend/src/Activity/Queue/Status/QueueStatusConnector.js

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchQueueStatus } from 'Store/Actions/queueActions';
+import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.app,
+    (state) => state.queue.status,
+    (state) => state.queue.options.includeUnknownMovieItems,
+    (app, status, includeUnknownMovieItems) => {
+      const {
+        count,
+        unknownCount
+      } = status.item;
+
+      return {
+        isConnected: app.isConnected,
+        isReconnecting: app.isReconnecting,
+        isPopulated: status.isPopulated,
+        ...status.item,
+        count: includeUnknownMovieItems ? count : count - unknownCount
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchQueueStatus
+};
+
+class QueueStatusConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    if (!this.props.isPopulated) {
+      this.props.fetchQueueStatus();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.isConnected && prevProps.isReconnecting) {
+      this.props.fetchQueueStatus();
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <PageSidebarStatus
+        {...this.props}
+      />
+    );
+  }
+}
+
+QueueStatusConnector.propTypes = {
+  isConnected: PropTypes.bool.isRequired,
+  isReconnecting: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  fetchQueueStatus: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueStatusConnector);

frontend/src/Activity/Queue/TimeleftCell.css

@@ -0,0 +1,5 @@
+.timeleft {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 100px;
+}

frontend/src/Activity/Queue/TimeleftCell.js

@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import formatTime from 'Utilities/Date/formatTime';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import formatBytes from 'Utilities/Number/formatBytes';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import styles from './TimeleftCell.css';
+
+function TimeleftCell(props) {
+  const {
+    estimatedCompletionTime,
+    timeleft,
+    status,
+    size,
+    sizeleft,
+    showRelativeDates,
+    shortDateFormat,
+    timeFormat
+  } = props;
+
+  if (status === 'Delay') {
+    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
+
+    return (
+      <TableRowCell
+        className={styles.timeleft}
+        title={`Delaying download until ${date} at ${time}`}
+      >
+        -
+      </TableRowCell>
+    );
+  }
+
+  if (status === 'DownloadClientUnavailable') {
+    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
+
+    return (
+      <TableRowCell
+        className={styles.timeleft}
+        title={`Retrying download ${date} at ${time}`}
+      >
+        -
+      </TableRowCell>
+    );
+  }
+
+  if (!timeleft) {
+    return (
+      <TableRowCell className={styles.timeleft}>
+        -
+      </TableRowCell>
+    );
+  }
+
+  const totalSize = formatBytes(size);
+  const remainingSize = formatBytes(sizeleft);
+
+  return (
+    <TableRowCell
+      className={styles.timeleft}
+      title={`${remainingSize} / ${totalSize}`}
+    >
+      {formatTimeSpan(timeleft)}
+    </TableRowCell>
+  );
+}
+
+TimeleftCell.propTypes = {
+  estimatedCompletionTime: PropTypes.string,
+  timeleft: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  sizeleft: PropTypes.number.isRequired,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired
+};
+
+export default TimeleftCell;

frontend/src/AddMovie/AddNewMovie/AddNewMovie.css

@@ -0,0 +1,54 @@
+.searchContainer {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.searchIconContainer {
+  width: 58px;
+  height: 46px;
+  border: 1px solid $inputBorderColor;
+  border-right: none;
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  background-color: #edf1f2;
+  text-align: center;
+  line-height: 46px;
+}
+
+.searchInput {
+  composes: input from 'Components/Form/TextInput.css';
+
+  height: 46px;
+  border-radius: 0;
+  font-size: 18px;
+}
+
+.clearLookupButton {
+  border: 1px solid $inputBorderColor;
+  border-left: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.message {
+  margin-top: 30px;
+  text-align: center;
+}
+
+.helpText {
+  margin-bottom: 10px;
+  font-weight: 300;
+  font-size: 24px;
+}
+
+.noResults {
+  margin-bottom: 10px;
+  font-weight: 300;
+  font-size: 30px;
+}
+
+.searchResults {
+  margin-top: 30px;
+}

frontend/src/AddMovie/AddNewMovie/AddNewMovie.js

@@ -0,0 +1,182 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Link from 'Components/Link/Link';
+import Icon from 'Components/Icon';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import TextInput from 'Components/Form/TextInput';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import AddNewMovieSearchResultConnector from './AddNewMovieSearchResultConnector';
+import styles from './AddNewMovie.css';
+
+class AddNewMovie extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      term: props.term || '',
+      isFetching: false
+    };
+  }
+
+  componentDidMount() {
+    const term = this.state.term;
+
+    if (term) {
+      this.props.onMovieLookupChange(term);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      term,
+      isFetching
+    } = this.props;
+
+    if (term && term !== prevProps.term) {
+      this.setState({
+        term,
+        isFetching: true
+      });
+      this.props.onMovieLookupChange(term);
+    } else if (isFetching !== prevProps.isFetching) {
+      this.setState({
+        isFetching
+      });
+    }
+  }
+
+  //
+  // Listeners
+
+  onSearchInputChange = ({ value }) => {
+    const hasValue = !!value.trim();
+
+    this.setState({ term: value, isFetching: hasValue }, () => {
+      if (hasValue) {
+        this.props.onMovieLookupChange(value);
+      } else {
+        this.props.onClearMovieLookup();
+      }
+    });
+  }
+
+  onClearMovieLookupPress = () => {
+    this.setState({ term: '' });
+    this.props.onClearMovieLookup();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      error,
+      items
+    } = this.props;
+
+    const term = this.state.term;
+    const isFetching = this.state.isFetching;
+
+    return (
+      <PageContent title="Add New Movie">
+        <PageContentBodyConnector>
+          <div className={styles.searchContainer}>
+            <div className={styles.searchIconContainer}>
+              <Icon
+                name={icons.SEARCH}
+                size={20}
+              />
+            </div>
+
+            <TextInput
+              className={styles.searchInput}
+              name="movieLookup"
+              value={term}
+              placeholder="eg. Some Movie, tmdb:####, imdb:####"
+              onChange={this.onSearchInputChange}
+            />
+
+            <Button
+              className={styles.clearLookupButton}
+              onPress={this.onClearMovieLookupPress}
+            >
+              <Icon
+                name={icons.REMOVE}
+                size={20}
+              />
+            </Button>
+          </div>
+
+          {
+            isFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>Failed to load search results, please try again.</div>
+          }
+
+          {
+            !isFetching && !error && !!items.length &&
+              <div className={styles.searchResults}>
+                {
+                  items.map((item) => {
+                    return (
+                      <AddNewMovieSearchResultConnector
+                        key={item.tmdbId}
+                        {...item}
+                      />
+                    );
+                  })
+                }
+              </div>
+          }
+
+          {
+            !isFetching && !error && !items.length && !!term &&
+              <div className={styles.message}>
+                <div className={styles.noResults}>Couldn't find any results for '{term}'</div>
+                <div>You can also search using TMDB ID or IMDB ID of a movie. eg. tmdb:71663</div>
+                <div>
+                  <Link to="https://github.com/Radarr/Radarr/wiki/FAQ#why-cant-i-add-a-new-movie-when-i-know-the-tmdb-id">
+                    Why can't I find my movie?
+                  </Link>
+                </div>
+              </div>
+          }
+
+          {
+            !term &&
+              <div className={styles.message}>
+                <div className={styles.helpText}>It's easy to add a new movie, just start typing the name the movie you want to add.</div>
+                <div>You can also search using TMDB ID of a movie. eg. tmdb:71663</div>
+              </div>
+          }
+
+          <div />
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+}
+
+AddNewMovie.propTypes = {
+  term: PropTypes.string,
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isAdding: PropTypes.bool.isRequired,
+  addError: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onMovieLookupChange: PropTypes.func.isRequired,
+  onClearMovieLookup: PropTypes.func.isRequired
+};
+
+export default AddNewMovie;

frontend/src/AddMovie/AddNewMovie/AddNewMovieConnector.js

@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import parseUrl from 'Utilities/String/parseUrl';
+import { lookupMovie, clearAddMovie } from 'Store/Actions/addMovieActions';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import AddNewMovie from './AddNewMovie';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.addMovie,
+    (state) => state.routing.location,
+    (addMovie, location) => {
+      const { params } = parseUrl(location.search);
+
+      return {
+        term: params.term,
+        ...addMovie
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  lookupMovie,
+  clearAddMovie,
+  fetchRootFolders
+};
+
+class AddNewMovieConnector extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._movieLookupTimeout = null;
+  }
+
+  componentDidMount() {
+    this.props.fetchRootFolders();
+  }
+
+  componentWillUnmount() {
+    if (this._movieLookupTimeout) {
+      clearTimeout(this._movieLookupTimeout);
+    }
+
+    this.props.clearAddMovie();
+  }
+
+  //
+  // Listeners
+
+  onMovieLookupChange = (term) => {
+    if (this._movieLookupTimeout) {
+      clearTimeout(this._movieLookupTimeout);
+    }
+
+    if (term.trim() === '') {
+      this.props.clearAddMovie();
+    } else {
+      this._movieLookupTimeout = setTimeout(() => {
+        this.props.lookupMovie({ term });
+      }, 300);
+    }
+  }
+
+  onClearMovieLookup = () => {
+    this.props.clearAddMovie();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      term,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <AddNewMovie
+        term={term}
+        {...otherProps}
+        onMovieLookupChange={this.onMovieLookupChange}
+        onClearMovieLookup={this.onClearMovieLookup}
+      />
+    );
+  }
+}
+
+AddNewMovieConnector.propTypes = {
+  term: PropTypes.string,
+  lookupMovie: PropTypes.func.isRequired,
+  clearAddMovie: PropTypes.func.isRequired,
+  fetchRootFolders: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddNewMovieConnector);

frontend/src/AddMovie/AddNewMovie/AddNewMovieModal.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import AddNewMovieModalContentConnector from './AddNewMovieModalContentConnector';
+
+function AddNewMovieModal(props) {
+  const {
+    isOpen,
+    onModalClose,
+    ...otherProps
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <AddNewMovieModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+AddNewMovieModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AddNewMovieModal;

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css

@@ -0,0 +1,68 @@
+.container {
+  display: flex;
+}
+
+.year {
+  margin-left: 5px;
+  color: $disabledColor;
+}
+
+.poster {
+  flex: 0 0 170px;
+  margin-right: 20px;
+  height: 250px;
+}
+
+.info {
+  flex-grow: 1;
+}
+
+.overview {
+  margin-bottom: 30px;
+}
+
+.labelIcon {
+  margin-left: 8px;
+}
+
+.searchForMissingEpisodesLabelContainer {
+  display: flex;
+  margin-top: 2px;
+}
+
+.searchForMissingEpisodesLabel {
+  margin-right: 8px;
+  font-weight: normal;
+}
+
+.searchForMissingEpisodesContainer {
+  composes: container from 'Components/Form/CheckInput.css';
+
+  flex: 0 1 0;
+}
+
+.searchForMissingEpisodesInput {
+  composes: input from 'Components/Form/CheckInput.css';
+
+  margin-top: 0;
+}
+
+.modalFooter {
+  composes: modalFooter from 'Components/Modal/ModalFooter.css';
+}
+
+.addButton {
+  @add-mixin truncate;
+  composes: button from 'Components/Link/SpinnerButton.css';
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .modalFooter {
+    display: block;
+    text-align: center;
+  }
+
+  .addButton {
+    margin-top: 10px;
+  }
+}

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.js

@@ -0,0 +1,190 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { kinds, inputTypes } from 'Helpers/Props';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import CheckInput from 'Components/Form/CheckInput';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import MoviePoster from 'Movie/MoviePoster';
+import styles from './AddNewMovieModalContent.css';
+
+class AddNewMovieModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      searchForMissingEpisodes: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onSearchForMissingEpisodesChange = ({ value }) => {
+    this.setState({ searchForMissingEpisodes: value });
+  }
+
+  onQualityProfileIdChange = ({ value }) => {
+    this.props.onInputChange({ name: 'qualityProfileId', value: parseInt(value) });
+  }
+
+  onAddMoviePress = () => {
+    this.props.onAddMoviePress(this.state.searchForMissingEpisodes);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      title,
+      year,
+      overview,
+      images,
+      isAdding,
+      rootFolderPath,
+      monitor,
+      qualityProfileId,
+      tags,
+      isSmallScreen,
+      onModalClose,
+      onInputChange
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {title}
+
+          {
+            !title.contains(year) && !!year &&
+              <span className={styles.year}>({year})</span>
+          }
+        </ModalHeader>
+
+        <ModalBody>
+          <div className={styles.container}>
+            {
+              !isSmallScreen &&
+                <div className={styles.poster}>
+                  <MoviePoster
+                    className={styles.poster}
+                    images={images}
+                    size={250}
+                  />
+                </div>
+            }
+
+            <div className={styles.info}>
+              <div className={styles.overview}>
+                {overview}
+              </div>
+
+              <Form>
+                <FormGroup>
+                  <FormLabel>Root Folder</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.ROOT_FOLDER_SELECT}
+                    name="rootFolderPath"
+                    onChange={onInputChange}
+                    {...rootFolderPath}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>
+                    Monitor
+                  </FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.MOVIE_MONITORED_SELECT}
+                    name="monitor"
+                    onChange={onInputChange}
+                    {...monitor}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>Quality Profile</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.QUALITY_PROFILE_SELECT}
+                    name="qualityProfileId"
+                    onChange={this.onQualityProfileIdChange}
+                    {...qualityProfileId}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>Tags</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.TAG}
+                    name="tags"
+                    onChange={onInputChange}
+                    {...tags}
+                  />
+                </FormGroup>
+              </Form>
+            </div>
+          </div>
+        </ModalBody>
+
+        <ModalFooter className={styles.modalFooter}>
+          <label className={styles.searchForMissingEpisodesLabelContainer}>
+            <span className={styles.searchForMissingEpisodesLabel}>
+              Start search for missing movie
+            </span>
+
+            <CheckInput
+              containerClassName={styles.searchForMissingEpisodesContainer}
+              className={styles.searchForMissingEpisodesInput}
+              name="searchForMissingEpisodes"
+              value={this.state.searchForMissingEpisodes}
+              onChange={this.onSearchForMissingEpisodesChange}
+            />
+          </label>
+
+          <SpinnerButton
+            className={styles.addButton}
+            kind={kinds.SUCCESS}
+            isSpinning={isAdding}
+            onPress={this.onAddMoviePress}
+          >
+            Add {title}
+          </SpinnerButton>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+AddNewMovieModalContent.propTypes = {
+  title: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
+  overview: PropTypes.string,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isAdding: PropTypes.bool.isRequired,
+  addError: PropTypes.object,
+  rootFolderPath: PropTypes.object,
+  monitor: PropTypes.object.isRequired,
+  qualityProfileId: PropTypes.object,
+  tags: PropTypes.object.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onAddMoviePress: PropTypes.func.isRequired
+};
+
+export default AddNewMovieModalContent;

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContentConnector.js

@@ -0,0 +1,97 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setAddMovieDefault, addMovie } from 'Store/Actions/addMovieActions';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import selectSettings from 'Store/Selectors/selectSettings';
+import AddNewMovieModalContent from './AddNewMovieModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.addMovie,
+    createDimensionsSelector(),
+    (addMovieState, dimensions) => {
+      const {
+        isAdding,
+        addError,
+        defaults
+      } = addMovieState;
+
+      const {
+        settings,
+        validationErrors,
+        validationWarnings
+      } = selectSettings(defaults, {}, addError);
+
+      return {
+        isAdding,
+        addError,
+        isSmallScreen: dimensions.isSmallScreen,
+        validationErrors,
+        validationWarnings,
+        ...settings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setAddMovieDefault,
+  addMovie
+};
+
+class AddNewMovieModalContentConnector extends Component {
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setAddMovieDefault({ [name]: value });
+  }
+
+  onAddMoviePress = (searchForMissingEpisodes) => {
+    const {
+      tmdbId,
+      rootFolderPath,
+      monitor,
+      qualityProfileId,
+      tags
+    } = this.props;
+
+    this.props.addMovie({
+      tmdbId,
+      rootFolderPath: rootFolderPath.value,
+      monitor: monitor.value,
+      qualityProfileId: qualityProfileId.value,
+      tags: tags.value,
+      searchForMissingEpisodes
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AddNewMovieModalContent
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onAddMoviePress={this.onAddMoviePress}
+      />
+    );
+  }
+}
+
+AddNewMovieModalContentConnector.propTypes = {
+  tmdbId: PropTypes.number.isRequired,
+  rootFolderPath: PropTypes.object,
+  monitor: PropTypes.object.isRequired,
+  qualityProfileId: PropTypes.object,
+  tags: PropTypes.object.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  setAddMovieDefault: PropTypes.func.isRequired,
+  addMovie: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddNewMovieModalContentConnector);

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css

@@ -0,0 +1,40 @@
+.searchResult {
+  display: flex;
+  margin: 20px 0;
+  padding: 20px;
+  width: 100%;
+  background-color: $white;
+  color: inherit;
+  transition: background 500ms;
+
+  &:hover {
+    background-color: #eaf2ff;
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.poster {
+  flex: 0 0 170px;
+  margin-right: 20px;
+  height: 250px;
+}
+
+.title {
+  font-weight: 300;
+  font-size: 36px;
+}
+
+.year {
+  margin-left: 10px;
+  color: $disabledColor;
+}
+
+.alreadyExistsIcon {
+  margin-left: 10px;
+  color: #37bc9b;
+}
+
+.overview {
+  margin-top: 20px;
+}

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -0,0 +1,162 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import HeartRating from 'Components/HeartRating';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
+import MoviePoster from 'Movie/MoviePoster';
+import AddNewMovieModal from './AddNewMovieModal';
+import styles from './AddNewMovieSearchResult.css';
+
+class AddNewMovieSearchResult extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isNewAddMovieModalOpen: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.isExistingMovie && this.props.isExistingMovie) {
+      this.onAddSerisModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onPress = () => {
+    this.setState({ isNewAddMovieModalOpen: true });
+  }
+
+  onAddSerisModalClose = () => {
+    this.setState({ isNewAddMovieModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      tmdbId,
+      title,
+      titleSlug,
+      year,
+      studio,
+      status,
+      overview,
+      ratings,
+      images,
+      isExistingMovie,
+      isSmallScreen
+    } = this.props;
+    const {
+      isNewAddMovieModalOpen
+    } = this.state;
+
+    const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
+
+    return (
+      <div>
+        <Link
+          className={styles.searchResult}
+          {...linkProps}
+        >
+          {
+            isSmallScreen ?
+              null :
+              <MoviePoster
+                className={styles.poster}
+                images={images}
+                size={250}
+                overflow={true}
+              />
+          }
+
+          <div>
+            <div className={styles.title}>
+              {title}
+
+              {
+                !title.contains(year) && !!year &&
+                <span className={styles.year}>({year})</span>
+              }
+
+              {
+                isExistingMovie &&
+                <Icon
+                  className={styles.alreadyExistsIcon}
+                  name={icons.CHECK_CIRCLE}
+                  size={36}
+                  title="Already in your library"
+                />
+              }
+            </div>
+
+            <div>
+              <Label size={sizes.LARGE}>
+                <HeartRating
+                  rating={ratings.value}
+                  iconSize={13}
+                />
+              </Label>
+
+              {
+                !!studio &&
+                <Label size={sizes.LARGE}>
+                  {studio}
+                </Label>
+              }
+
+              {
+                status === 'ended' &&
+                <Label
+                  kind={kinds.DANGER}
+                  size={sizes.LARGE}
+                >
+                  Ended
+                </Label>
+              }
+            </div>
+
+            <div className={styles.overview}>
+              {overview}
+            </div>
+          </div>
+        </Link>
+
+        <AddNewMovieModal
+          isOpen={isNewAddMovieModalOpen && !isExistingMovie}
+          tmdbId={tmdbId}
+          title={title}
+          year={year}
+          overview={overview}
+          images={images}
+          onModalClose={this.onAddSerisModalClose}
+        />
+      </div>
+    );
+  }
+}
+
+AddNewMovieSearchResult.propTypes = {
+  tmdbId: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  titleSlug: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
+  studio: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  overview: PropTypes.string,
+  ratings: PropTypes.object.isRequired,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isExistingMovie: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired
+};
+
+export default AddNewMovieSearchResult;

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResultConnector.js

@@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createExistingMovieSelector from 'Store/Selectors/createExistingMovieSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import AddNewMovieSearchResult from './AddNewMovieSearchResult';
+
+function createMapStateToProps() {
+  return createSelector(
+    createExistingMovieSelector(),
+    createDimensionsSelector(),
+    (isExistingMovie, dimensions) => {
+      return {
+        isExistingMovie,
+        isSmallScreen: dimensions.isSmallScreen
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(AddNewMovieSearchResult);

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

@@ -0,0 +1,169 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import ImportMovieTableConnector from './ImportMovieTableConnector';
+import ImportMovieFooterConnector from './ImportMovieFooterConnector';
+
+class ImportMovie extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {},
+      contentBody: null,
+      scrollTop: 0
+    };
+  }
+
+  //
+  // Control
+
+  setContentBodyRef = (ref) => {
+    this.setState({ contentBody: ref });
+  }
+
+  //
+  // Listeners
+
+  getSelectedIds = () => {
+    return getSelectedIds(this.state.selectedState, { parseIds: false });
+  }
+
+  onSelectAllChange = ({ value }) => {
+    // Only select non-dupes
+    this.setState(selectAll(this.state.selectedState, value));
+  }
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey);
+    });
+  }
+
+  onRemoveSelectedStateItem = (id) => {
+    this.setState((state) => {
+      const selectedState = Object.assign({}, state.selectedState);
+      delete selectedState[id];
+
+      return {
+        ...state,
+        selectedState
+      };
+    });
+  }
+
+  onInputChange = ({ name, value }) => {
+    this.props.onInputChange(this.getSelectedIds(), name, value);
+  }
+
+  onImportPress = () => {
+    this.props.onImportPress(this.getSelectedIds());
+  }
+
+  onScroll = ({ scrollTop }) => {
+    this.setState({ scrollTop });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      rootFolderId,
+      path,
+      rootFoldersFetching,
+      rootFoldersPopulated,
+      rootFoldersError,
+      unmappedFolders
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      contentBody
+    } = this.state;
+
+    return (
+      <PageContent title="Import Series">
+        <PageContentBodyConnector
+          ref={this.setContentBodyRef}
+          onScroll={this.onScroll}
+        >
+          {
+            rootFoldersFetching && !rootFoldersPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !rootFoldersFetching && !!rootFoldersError &&
+              <div>Unable to load root folders</div>
+          }
+
+          {
+            !rootFoldersError && rootFoldersPopulated && !unmappedFolders.length &&
+              <div>
+                All series in {path} have been imported
+              </div>
+          }
+
+          {
+            !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length && contentBody &&
+              <ImportMovieTableConnector
+                rootFolderId={rootFolderId}
+                unmappedFolders={unmappedFolders}
+                allSelected={allSelected}
+                allUnselected={allUnselected}
+                selectedState={selectedState}
+                contentBody={contentBody}
+                scrollTop={this.state.scrollTop}
+                onSelectAllChange={this.onSelectAllChange}
+                onSelectedChange={this.onSelectedChange}
+                onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}
+                onScroll={this.onScroll}
+              />
+          }
+        </PageContentBodyConnector>
+
+        {
+          !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length &&
+            <ImportMovieFooterConnector
+              selectedIds={this.getSelectedIds()}
+              onInputChange={this.onInputChange}
+              onImportPress={this.onImportPress}
+            />
+        }
+      </PageContent>
+    );
+  }
+}
+
+ImportMovie.propTypes = {
+  rootFolderId: PropTypes.number.isRequired,
+  path: PropTypes.string,
+  rootFoldersFetching: PropTypes.bool.isRequired,
+  rootFoldersPopulated: PropTypes.bool.isRequired,
+  rootFoldersError: PropTypes.object,
+  unmappedFolders: PropTypes.arrayOf(PropTypes.object),
+  items: PropTypes.arrayOf(PropTypes.object),
+  onInputChange: PropTypes.func.isRequired,
+  onImportPress: PropTypes.func.isRequired
+};
+
+ImportMovie.defaultProps = {
+  unmappedFolders: []
+};
+
+export default ImportMovie;

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

@@ -0,0 +1,152 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setImportMovieValue, importMovie, clearImportMovie } from 'Store/Actions/importMovieActions';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import { setAddMovieDefault } from 'Store/Actions/addMovieActions';
+import createRouteMatchShape from 'Helpers/Props/Shapes/createRouteMatchShape';
+import ImportMovie from './ImportMovie';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { match }) => match,
+    (state) => state.rootFolders,
+    (state) => state.addMovie,
+    (state) => state.importMovie,
+    (state) => state.settings.qualityProfiles,
+    (
+      match,
+      rootFolders,
+      addMovie,
+      importMovieState,
+      qualityProfiles,
+    ) => {
+      const {
+        isFetching: rootFoldersFetching,
+        isPopulated: rootFoldersPopulated,
+        error: rootFoldersError,
+        items
+      } = rootFolders;
+
+      const rootFolderId = parseInt(match.params.rootFolderId);
+
+      const result = {
+        rootFolderId,
+        rootFoldersFetching,
+        rootFoldersPopulated,
+        rootFoldersError,
+        qualityProfiles: qualityProfiles.items,
+        defaultQualityProfileId: addMovie.defaults.qualityProfileId
+      };
+
+      if (items.length) {
+        const rootFolder = _.find(items, { id: rootFolderId });
+
+        return {
+          ...result,
+          ...rootFolder,
+          items: importMovieState.items
+        };
+      }
+
+      return result;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchSetImportMovieValue: setImportMovieValue,
+  dispatchImportMovie: importMovie,
+  dispatchClearImportMovie: clearImportMovie,
+  dispatchFetchRootFolders: fetchRootFolders,
+  dispatchSetAddSeriesDefault: setAddMovieDefault
+};
+
+class ImportMovieConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      qualityProfiles,
+      defaultQualityProfileId,
+      dispatchFetchRootFolders,
+      dispatchSetAddSeriesDefault
+    } = this.props;
+
+    if (!this.props.rootFoldersPopulated) {
+      dispatchFetchRootFolders();
+    }
+
+    let setDefaults = false;
+    const setDefaultPayload = {};
+
+    if (
+      !defaultQualityProfileId ||
+      !qualityProfiles.some((p) => p.id === defaultQualityProfileId)
+    ) {
+      setDefaults = true;
+      setDefaultPayload.qualityProfileId = qualityProfiles[0].id;
+    }
+
+    if (setDefaults) {
+      dispatchSetAddSeriesDefault(setDefaultPayload);
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.dispatchClearImportMovie();
+  }
+
+  //
+  // Listeners
+
+  onInputChange = (ids, name, value) => {
+    this.props.dispatchSetAddSeriesDefault({ [name]: value });
+
+    ids.forEach((id) => {
+      this.props.dispatchSetImportMovieValue({
+        id,
+        [name]: value
+      });
+    });
+  }
+
+  onImportPress = (ids) => {
+    this.props.dispatchImportMovie({ ids });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportMovie
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onImportPress={this.onImportPress}
+      />
+    );
+  }
+}
+
+const routeMatchShape = createRouteMatchShape({
+  rootFolderId: PropTypes.string.isRequired
+});
+
+ImportMovieConnector.propTypes = {
+  match: routeMatchShape.isRequired,
+  rootFoldersPopulated: PropTypes.bool.isRequired,
+  qualityProfiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  defaultQualityProfileId: PropTypes.number.isRequired,
+  dispatchSetImportMovieValue: PropTypes.func.isRequired,
+  dispatchImportMovie: PropTypes.func.isRequired,
+  dispatchClearImportMovie: PropTypes.func.isRequired,
+  dispatchFetchRootFolders: PropTypes.func.isRequired,
+  dispatchSetAddSeriesDefault: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportMovieConnector);

frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.css

@@ -0,0 +1,33 @@
+.inputContainer {
+  margin-right: 20px;
+  min-width: 150px;
+}
+
+.label {
+  margin-bottom: 3px;
+  font-weight: bold;
+}
+
+.importButtonContainer {
+  display: flex;
+  align-items: center;
+}
+
+.importButton {
+  composes: button from 'Components/Link/SpinnerButton.css';
+
+  height: 35px;
+}
+
+.loadingButton {
+  composes: importButton;
+
+  margin-left: 10px;
+}
+
+.loading {
+  composes: loading from 'Components/Loading/LoadingIndicator.css';
+
+  margin: 0 10px 0 12px;
+  text-align: left;
+}

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

@@ -0,0 +1,184 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes, kinds } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+// import CheckInput from 'Components/Form/CheckInput';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import PageContentFooter from 'Components/Page/PageContentFooter';
+import styles from './ImportMovieFooter.css';
+
+const MIXED = 'mixed';
+
+class ImportMovieFooter extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    const {
+      defaultMonitor,
+      defaultQualityProfileId
+    } = props;
+
+    this.state = {
+      monitor: defaultMonitor,
+      qualityProfileId: defaultQualityProfileId
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      defaultMonitor,
+      defaultQualityProfileId,
+      isMonitorMixed,
+      isQualityProfileIdMixed
+    } = this.props;
+
+    const {
+      monitor,
+      qualityProfileId
+    } = this.state;
+
+    const newState = {};
+
+    if (isMonitorMixed && monitor !== MIXED) {
+      newState.monitor = MIXED;
+    } else if (!isMonitorMixed && monitor !== defaultMonitor) {
+      newState.monitor = defaultMonitor;
+    }
+
+    if (isQualityProfileIdMixed && qualityProfileId !== MIXED) {
+      newState.qualityProfileId = MIXED;
+    } else if (!isQualityProfileIdMixed && qualityProfileId !== defaultQualityProfileId) {
+      newState.qualityProfileId = defaultQualityProfileId;
+    }
+
+    if (!_.isEmpty(newState)) {
+      this.setState(newState);
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.setState({ [name]: value });
+    this.props.onInputChange({ name, value });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      selectedCount,
+      isImporting,
+      isLookingUpMovie,
+      isMonitorMixed,
+      isQualityProfileIdMixed,
+      onImportPress,
+      onCancelLookupPress
+    } = this.props;
+
+    const {
+      monitor,
+      qualityProfileId
+    } = this.state;
+
+    return (
+      <PageContentFooter>
+        <div className={styles.inputContainer}>
+          <div className={styles.label}>
+            Monitor
+          </div>
+
+          <FormInputGroup
+            type={inputTypes.MOVIE_MONITORED_SELECT}
+            name="monitor"
+            value={monitor}
+            isDisabled={!selectedCount}
+            includeMixed={isMonitorMixed}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div className={styles.inputContainer}>
+          <div className={styles.label}>
+            Quality Profile
+          </div>
+
+          <FormInputGroup
+            type={inputTypes.QUALITY_PROFILE_SELECT}
+            name="qualityProfileId"
+            value={qualityProfileId}
+            isDisabled={!selectedCount}
+            includeMixed={isQualityProfileIdMixed}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div>
+          <div className={styles.label}>
+            &nbsp;
+          </div>
+
+          <div className={styles.importButtonContainer}>
+            <SpinnerButton
+              className={styles.importButton}
+              kind={kinds.PRIMARY}
+              isSpinning={isImporting}
+              isDisabled={!selectedCount || isLookingUpMovie}
+              onPress={onImportPress}
+            >
+              Import {selectedCount} {selectedCount > 1 ? 'Movies' : 'Movie'}
+            </SpinnerButton>
+
+            {
+              isLookingUpMovie &&
+                <Button
+                  className={styles.loadingButton}
+                  kind={kinds.WARNING}
+                  onPress={onCancelLookupPress}
+                >
+                  Cancel Processing
+                </Button>
+            }
+
+            {
+              isLookingUpMovie &&
+                <LoadingIndicator
+                  className={styles.loading}
+                  size={24}
+                />
+            }
+
+            {
+              isLookingUpMovie &&
+                'Processing Folders'
+            }
+          </div>
+        </div>
+      </PageContentFooter>
+    );
+  }
+}
+
+ImportMovieFooter.propTypes = {
+  selectedCount: PropTypes.number.isRequired,
+  isImporting: PropTypes.bool.isRequired,
+  isLookingUpMovie: PropTypes.bool.isRequired,
+  defaultMonitor: PropTypes.string.isRequired,
+  defaultQualityProfileId: PropTypes.number,
+  isMonitorMixed: PropTypes.bool.isRequired,
+  isQualityProfileIdMixed: PropTypes.bool.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onImportPress: PropTypes.func.isRequired,
+  onCancelLookupPress: PropTypes.func.isRequired
+};
+
+export default ImportMovieFooter;

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

@@ -0,0 +1,50 @@
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { cancelLookupMovie } from 'Store/Actions/importMovieActions';
+import ImportMovieFooter from './ImportMovieFooter';
+
+function isMixed(items, selectedIds, defaultValue, key) {
+  return _.some(items, (series) => {
+    return selectedIds.indexOf(series.id) > -1 && series[key] !== defaultValue;
+  });
+}
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.addMovie,
+    (state) => state.importMovie,
+    (state, { selectedIds }) => selectedIds,
+    (addMovie, importMovie, selectedIds) => {
+      const {
+        monitor: defaultMonitor,
+        qualityProfileId: defaultQualityProfileId
+      } = addMovie.defaults;
+
+      const {
+        isLookingUpMovie,
+        isImporting,
+        items
+      } = importMovie;
+
+      const isMonitorMixed = isMixed(items, selectedIds, defaultMonitor, 'monitor');
+      const isQualityProfileIdMixed = isMixed(items, selectedIds, defaultQualityProfileId, 'qualityProfileId');
+
+      return {
+        selectedCount: selectedIds.length,
+        isLookingUpMovie,
+        isImporting,
+        defaultMonitor,
+        defaultQualityProfileId,
+        isMonitorMixed,
+        isQualityProfileIdMixed
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  onCancelLookupPress: cancelLookupMovie
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportMovieFooter);

frontend/src/AddMovie/ImportMovie/Import/ImportMovieHeader.css

@@ -0,0 +1,30 @@
+.folder {
+  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 1 0 200px;
+}
+
+.monitor {
+  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 1 200px;
+  min-width: 185px;
+}
+
+.qualityProfile {
+  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 1 250px;
+  min-width: 170px;
+}
+
+.movie {
+  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 1 400px;
+  min-width: 300px;
+}
+
+.detailsIcon {
+  margin-left: 8px;
+}

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

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
+import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
+import VirtualTableSelectAllHeaderCell from 'Components/Table/VirtualTableSelectAllHeaderCell';
+import styles from './ImportMovieHeader.css';
+
+function ImportMovieHeader(props) {
+  const {
+    allSelected,
+    allUnselected,
+    onSelectAllChange
+  } = props;
+
+  return (
+    <VirtualTableHeader>
+      <VirtualTableSelectAllHeaderCell
+        allSelected={allSelected}
+        allUnselected={allUnselected}
+        onSelectAllChange={onSelectAllChange}
+      />
+
+      <VirtualTableHeaderCell
+        className={styles.folder}
+        name="folder"
+      >
+        Folder
+      </VirtualTableHeaderCell>
+
+      <VirtualTableHeaderCell
+        className={styles.monitor}
+        name="monitor"
+      >
+        Monitor
+      </VirtualTableHeaderCell>
+
+      <VirtualTableHeaderCell
+        className={styles.qualityProfile}
+        name="qualityProfileId"
+      >
+        Quality Profile
+      </VirtualTableHeaderCell>
+
+      <VirtualTableHeaderCell
+        className={styles.movie}
+        name="movie"
+      >
+        Movie
+      </VirtualTableHeaderCell>
+    </VirtualTableHeader>
+  );
+}
+
+ImportMovieHeader.propTypes = {
+  allSelected: PropTypes.bool.isRequired,
+  allUnselected: PropTypes.bool.isRequired,
+  onSelectAllChange: PropTypes.func.isRequired
+};
+
+export default ImportMovieHeader;

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

@@ -0,0 +1,31 @@
+.selectInput {
+  composes: input from 'Components/Form/CheckInput.css';
+}
+
+.folder {
+  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+
+  flex: 1 0 200px;
+  line-height: 36px;
+}
+
+.monitor {
+  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+
+  flex: 0 1 200px;
+  min-width: 185px;
+}
+
+.qualityProfile {
+  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+
+  flex: 0 1 250px;
+  min-width: 170px;
+}
+
+.series {
+  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+
+  flex: 0 1 400px;
+  min-width: 300px;
+}

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

@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { inputTypes } from 'Helpers/Props';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import VirtualTableRow from 'Components/Table/VirtualTableRow';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
+import ImportMovieSelectMovieConnector from './SelectMovie/ImportMovieSelectMovieConnector';
+import styles from './ImportMovieRow.css';
+
+function ImportMovieRow(props) {
+  const {
+    style,
+    id,
+    monitor,
+    qualityProfileId,
+    selectedMovie,
+    isExistingMovie,
+    isSelected,
+    onSelectedChange,
+    onInputChange
+  } = props;
+
+  return (
+    <VirtualTableRow style={style}>
+      <VirtualTableSelectCell
+        inputClassName={styles.selectInput}
+        id={id}
+        isSelected={isSelected}
+        isDisabled={!selectedMovie || isExistingMovie}
+        onSelectedChange={onSelectedChange}
+      />
+
+      <VirtualTableRowCell className={styles.folder}>
+        {id}
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.monitor}>
+        <FormInputGroup
+          type={inputTypes.MOVIE_MONITORED_SELECT}
+          name="monitor"
+          value={monitor}
+          onChange={onInputChange}
+        />
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.qualityProfile}>
+        <FormInputGroup
+          type={inputTypes.QUALITY_PROFILE_SELECT}
+          name="qualityProfileId"
+          value={qualityProfileId}
+          onChange={onInputChange}
+        />
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.series}>
+        <ImportMovieSelectMovieConnector
+          id={id}
+          isExistingMovie={isExistingMovie}
+        />
+      </VirtualTableRowCell>
+    </VirtualTableRow>
+  );
+}
+
+ImportMovieRow.propTypes = {
+  style: PropTypes.object.isRequired,
+  id: PropTypes.string.isRequired,
+  monitor: PropTypes.string.isRequired,
+  qualityProfileId: PropTypes.number.isRequired,
+  selectedMovie: PropTypes.object,
+  isExistingMovie: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  queued: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
+  onSelectedChange: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired
+};
+
+ImportMovieRow.defaultsProps = {
+  items: []
+};
+
+export default ImportMovieRow;

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

@@ -0,0 +1,87 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { queueLookupMovie, setImportMovieValue } from 'Store/Actions/importMovieActions';
+import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
+import ImportMovieRow from './ImportMovieRow';
+
+function createImportMovieItemSelector() {
+  return createSelector(
+    (state, { id }) => id,
+    (state) => state.importMovie.items,
+    (id, items) => {
+      return _.find(items, { id }) || {};
+    }
+  );
+}
+
+function createMapStateToProps() {
+  return createSelector(
+    createImportMovieItemSelector(),
+    createAllMoviesSelector(),
+    (item, movies) => {
+      const selectedMovie = item && item.selectedMovie;
+      const isExistingMovie = !!selectedMovie && _.some(movies, { tmdbId: selectedMovie.tmdbId });
+
+      return {
+        ...item,
+        isExistingMovie
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  queueLookupMovie,
+  setImportMovieValue
+};
+
+class ImportMovieRowConnector extends Component {
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setImportMovieValue({
+      id: this.props.id,
+      [name]: value
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    // Don't show the row until we have the information we require for it.
+
+    const {
+      items,
+      monitor
+    } = this.props;
+
+    if (!items || !monitor) {
+      return null;
+    }
+
+    return (
+      <ImportMovieRow
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onMovieSelect={this.onMovieSelect}
+      />
+    );
+  }
+}
+
+ImportMovieRowConnector.propTypes = {
+  rootFolderId: PropTypes.number.isRequired,
+  id: PropTypes.string.isRequired,
+  monitor: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.object),
+  queueLookupMovie: PropTypes.func.isRequired,
+  setImportMovieValue: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportMovieRowConnector);

frontend/src/AddMovie/ImportMovie/Import/ImportMovieSelected.css

@@ -0,0 +1,3 @@
+.input {
+  composes: input from 'Components/Form/CheckInput.css';
+}

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

@@ -0,0 +1,183 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import VirtualTable from 'Components/Table/VirtualTable';
+import ImportMovieHeader from './ImportMovieHeader';
+import ImportMovieRowConnector from './ImportMovieRowConnector';
+
+class ImportMovieTable extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      unmappedFolders,
+      defaultMonitor,
+      defaultQualityProfileId,
+      onMovieLookup,
+      onSetImportMovieValue
+    } = this.props;
+
+    const values = {
+      monitor: defaultMonitor,
+      qualityProfileId: defaultQualityProfileId
+    };
+
+    unmappedFolders.forEach((unmappedFolder) => {
+      const id = unmappedFolder.name;
+
+      onMovieLookup(id, unmappedFolder.path);
+
+      onSetImportMovieValue({
+        id,
+        ...values
+      });
+    });
+  }
+
+  // This isn't great, but it's the most reliable way to ensure the items
+  // are checked off even if they aren't actually visible since the cells
+  // are virtualized.
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      selectedState,
+      onSelectedChange,
+      onRemoveSelectedStateItem
+    } = this.props;
+
+    prevProps.items.forEach((prevItem) => {
+      const {
+        id
+      } = prevItem;
+
+      const item = _.find(items, { id });
+
+      if (!item) {
+        onRemoveSelectedStateItem(id);
+        return;
+      }
+
+      const selectedMovie = item.selectedMovie;
+      const isSelected = selectedState[id];
+
+      const isExistingMovie = !!selectedMovie &&
+        _.some(prevProps.allMovies, { tmdbId: selectedMovie.tmdbId });
+
+      // Props doesn't have a selected series or
+      // the selected series is an existing series.
+      if ((!selectedMovie && prevItem.selectedMovie) || (isExistingMovie && !prevItem.selectedMovie)) {
+        onSelectedChange({ id, value: false });
+
+        return;
+      }
+
+      // State is selected, but a series isn't selected or
+      // the selected series is an existing series.
+      if (isSelected && (!selectedMovie || isExistingMovie)) {
+        onSelectedChange({ id, value: false });
+
+        return;
+      }
+
+      // A series is being selected that wasn't previously selected.
+      if (selectedMovie && selectedMovie !== prevItem.selectedMovie) {
+        onSelectedChange({ id, value: true });
+
+        return;
+      }
+    });
+  }
+
+  //
+  // Control
+
+  rowRenderer = ({ key, rowIndex, style }) => {
+    const {
+      rootFolderId,
+      items,
+      selectedState,
+      onSelectedChange
+    } = this.props;
+
+    const item = items[rowIndex];
+
+    return (
+      <ImportMovieRowConnector
+        key={key}
+        style={style}
+        rootFolderId={rootFolderId}
+        isSelected={selectedState[item.id]}
+        onSelectedChange={onSelectedChange}
+        id={item.id}
+      />
+    );
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      allSelected,
+      allUnselected,
+      isSmallScreen,
+      contentBody,
+      scrollTop,
+      selectedState,
+      onSelectAllChange,
+      onScroll
+    } = this.props;
+
+    if (!items.length) {
+      return null;
+    }
+
+    return (
+      <VirtualTable
+        items={items}
+        contentBody={contentBody}
+        isSmallScreen={isSmallScreen}
+        rowHeight={52}
+        scrollTop={scrollTop}
+        overscanRowCount={2}
+        rowRenderer={this.rowRenderer}
+        header={
+          <ImportMovieHeader
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            onSelectAllChange={onSelectAllChange}
+          />
+        }
+        selectedState={selectedState}
+        onScroll={onScroll}
+      />
+    );
+  }
+}
+
+ImportMovieTable.propTypes = {
+  rootFolderId: PropTypes.number.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object),
+  unmappedFolders: PropTypes.arrayOf(PropTypes.object),
+  defaultMonitor: PropTypes.string.isRequired,
+  defaultQualityProfileId: PropTypes.number,
+  allSelected: PropTypes.bool.isRequired,
+  allUnselected: PropTypes.bool.isRequired,
+  selectedState: PropTypes.object.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  allMovies: PropTypes.arrayOf(PropTypes.object),
+  contentBody: PropTypes.object.isRequired,
+  scrollTop: PropTypes.number.isRequired,
+  onSelectAllChange: PropTypes.func.isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onRemoveSelectedStateItem: PropTypes.func.isRequired,
+  onMovieLookup: PropTypes.func.isRequired,
+  onSetImportMovieValue: PropTypes.func.isRequired,
+  onScroll: PropTypes.func.isRequired
+};
+
+export default ImportMovieTable;

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

@@ -0,0 +1,41 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { queueLookupMovie, setImportMovieValue } from 'Store/Actions/importMovieActions';
+import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
+import ImportMovieTable from './ImportMovieTable';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.addMovie,
+    (state) => state.importMovie,
+    (state) => state.app.dimensions,
+    createAllMoviesSelector(),
+    (addMovie, importMovie, dimensions, allMovies) => {
+      return {
+        defaultMonitor: addMovie.defaults.monitor,
+        defaultQualityProfileId: addMovie.defaults.qualityProfileId,
+        items: importMovie.items,
+        isSmallScreen: dimensions.isSmallScreen,
+        allMovies
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onMovieLookup(name, path) {
+      dispatch(queueLookupMovie({
+        name,
+        path,
+        term: name
+      }));
+    },
+
+    onSetImportMovieValue(values) {
+      dispatch(setImportMovieValue(values));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(ImportMovieTable);

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

@@ -0,0 +1,8 @@
+.series {
+  padding: 10px 20px;
+  width: 100%;
+
+  &:hover {
+    background-color: $menuItemHoverBackgroundColor;
+  }
+}

frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Link from 'Components/Link/Link';
+import ImportMovieTitle from './ImportMovieTitle';
+import styles from './ImportMovieSearchResult.css';
+
+class ImportMovieSearchResult extends Component {
+
+  //
+  // Listeners
+
+  onPress = () => {
+    this.props.onPress(this.props.tmdbId);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      title,
+      year,
+      studio,
+      isExistingMovie
+    } = this.props;
+
+    return (
+      <Link
+        className={styles.series}
+        onPress={this.onPress}
+      >
+        <ImportMovieTitle
+          title={title}
+          year={year}
+          network={studio}
+          isExistingMovie={isExistingMovie}
+        />
+      </Link>
+    );
+  }
+}
+
+ImportMovieSearchResult.propTypes = {
+  tmdbId: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
+  studio: PropTypes.string,
+  isExistingMovie: PropTypes.bool.isRequired,
+  onPress: PropTypes.func.isRequired
+};
+
+export default ImportMovieSearchResult;

frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResultConnector.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createExistingMovieSelector from 'Store/Selectors/createExistingMovieSelector';
+import ImportMovieSearchResult from './ImportMovieSearchResult';
+
+function createMapStateToProps() {
+  return createSelector(
+    createExistingMovieSelector(),
+    (isExistingMovie) => {
+      return {
+        isExistingMovie
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(ImportMovieSearchResult);

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

@@ -0,0 +1,70 @@
+.tether {
+  z-index: 2000;
+}
+
+.button {
+  composes: link from 'Components/Link/Link.css';
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 6px 16px;
+  width: 100%;
+  height: 35px;
+  border: 1px solid $inputBorderColor;
+  border-radius: 4px;
+  background-color: $white;
+  box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+}
+
+.loading {
+  display: inline-block;
+}
+
+.warningIcon {
+  margin-right: 8px;
+}
+
+.existing {
+  margin-left: 5px;
+}
+
+.dropdownArrowContainer {
+  position: absolute;
+  right: 16px;
+}
+
+.contentContainer {
+  margin-top: 4px;
+  padding: 0 8px;
+  width: 400px;
+}
+
+.content {
+  padding: 4px;
+  border: 1px solid $inputBorderColor;
+  border-radius: 4px;
+  background-color: $white;
+}
+
+.searchContainer {
+  display: flex;
+}
+
+.searchIconContainer {
+  width: 58px;
+  border: 1px solid $inputBorderColor;
+  border-right: none;
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  background-color: #edf1f2;
+  text-align: center;
+  line-height: 33px;
+}
+
+.searchInput {
+  composes: input from 'Components/Form/TextInput.css';
+
+  border-radius: 0;
+}

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

@@ -0,0 +1,280 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import TetherComponent from 'react-tether';
+import { icons, kinds } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import FormInputButton from 'Components/Form/FormInputButton';
+import Link from 'Components/Link/Link';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import TextInput from 'Components/Form/TextInput';
+import ImportMovieSearchResultConnector from './ImportMovieSearchResultConnector';
+import ImportMovieTitle from './ImportMovieTitle';
+import styles from './ImportMovieSelectMovie.css';
+
+const tetherOptions = {
+  skipMoveElement: true,
+  constraints: [
+    {
+      to: 'window',
+      attachment: 'together',
+      pin: true
+    }
+  ],
+  attachment: 'top center',
+  targetAttachment: 'bottom center'
+};
+
+class ImportMovieSelectMovie extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._movieLookupTimeout = null;
+
+    this.state = {
+      term: props.id,
+      isOpen: false
+    };
+  }
+
+  //
+  // Control
+
+  _setButtonRef = (ref) => {
+    this._buttonRef = ref;
+  }
+
+  _setContentRef = (ref) => {
+    this._contentRef = ref;
+  }
+
+  _addListener() {
+    window.addEventListener('click', this.onWindowClick);
+  }
+
+  _removeListener() {
+    window.removeEventListener('click', this.onWindowClick);
+  }
+
+  //
+  // Listeners
+
+  onWindowClick = (event) => {
+    const button = ReactDOM.findDOMNode(this._buttonRef);
+    const content = ReactDOM.findDOMNode(this._contentRef);
+
+    if (!button) {
+      return;
+    }
+
+    if (!button.contains(event.target) && content && !content.contains(event.target) && this.state.isOpen) {
+      this.setState({ isOpen: false });
+      this._removeListener();
+    }
+  }
+
+  onPress = () => {
+    if (this.state.isOpen) {
+      this._removeListener();
+    } else {
+      this._addListener();
+    }
+
+    this.setState({ isOpen: !this.state.isOpen });
+  }
+
+  onSearchInputChange = ({ value }) => {
+    if (this._movieLookupTimeout) {
+      clearTimeout(this._movieLookupTimeout);
+    }
+
+    this.setState({ term: value }, () => {
+      this._movieLookupTimeout = setTimeout(() => {
+        this.props.onSearchInputChange(value);
+      }, 200);
+    });
+  }
+
+  onRefreshPress = () => {
+    this.props.onSearchInputChange(this.state.term);
+  }
+
+  onMovieSelect = (tmdbId) => {
+    this.setState({ isOpen: false });
+
+    this.props.onMovieSelect(tmdbId);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      selectedMovie,
+      isExistingMovie,
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      queued,
+      isLookingUpMovie
+    } = this.props;
+
+    const errorMessage = error &&
+      error.responseJSON &&
+      error.responseJSON.message;
+
+    return (
+      <TetherComponent
+        classes={{
+          element: styles.tether
+        }}
+        {...tetherOptions}
+      >
+        <Link
+          ref={this._setButtonRef}
+          className={styles.button}
+          component="div"
+          onPress={this.onPress}
+        >
+          {
+            isLookingUpMovie && queued && !isPopulated &&
+              <LoadingIndicator
+                className={styles.loading}
+                size={20}
+              />
+          }
+
+          {
+            isPopulated && selectedMovie && isExistingMovie &&
+              <Icon
+                className={styles.warningIcon}
+                name={icons.WARNING}
+                kind={kinds.WARNING}
+              />
+          }
+
+          {
+            isPopulated && selectedMovie &&
+              <ImportMovieTitle
+                title={selectedMovie.title}
+                year={selectedMovie.year}
+                network={selectedMovie.network}
+                isExistingMovie={isExistingMovie}
+              />
+          }
+
+          {
+            isPopulated && !selectedMovie &&
+              <div>
+                <Icon
+                  className={styles.warningIcon}
+                  name={icons.WARNING}
+                  kind={kinds.WARNING}
+                />
+
+                No match found!
+              </div>
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>
+                <Icon
+                  className={styles.warningIcon}
+                  title={errorMessage}
+                  name={icons.WARNING}
+                  kind={kinds.WARNING}
+                />
+
+                Search failed, please try again later.
+              </div>
+          }
+
+          <div className={styles.dropdownArrowContainer}>
+            <Icon
+              name={icons.CARET_DOWN}
+            />
+          </div>
+        </Link>
+
+        {
+          this.state.isOpen &&
+            <div
+              ref={this._setContentRef}
+              className={styles.contentContainer}
+            >
+              <div className={styles.content}>
+                <div className={styles.searchContainer}>
+                  <div className={styles.searchIconContainer}>
+                    <Icon name={icons.SEARCH} />
+                  </div>
+
+                  <TextInput
+                    className={styles.searchInput}
+                    name={`${name}_textInput`}
+                    value={this.state.term}
+                    onChange={this.onSearchInputChange}
+                  />
+
+                  <FormInputButton
+                    kind={kinds.DEFAULT}
+                    spinnerIcon={icons.REFRESH}
+                    canSpin={true}
+                    isSpinning={isFetching}
+                    onPress={this.onRefreshPress}
+                  >
+                    <Icon name={icons.REFRESH} />
+                  </FormInputButton>
+                </div>
+
+                <div className={styles.results}>
+                  {
+                    items.map((item) => {
+                      return (
+                        <ImportMovieSearchResultConnector
+                          key={item.tmdbId}
+                          tmdbId={item.tmdbId}
+                          title={item.title}
+                          year={item.year}
+                          studio={item.studio}
+                          onPress={this.onMovieSelect}
+                        />
+                      );
+                    })
+                  }
+                </div>
+              </div>
+            </div>
+        }
+      </TetherComponent>
+    );
+  }
+}
+
+ImportMovieSelectMovie.propTypes = {
+  id: PropTypes.string.isRequired,
+  selectedMovie: PropTypes.object,
+  isExistingMovie: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  queued: PropTypes.bool.isRequired,
+  isLookingUpMovie: PropTypes.bool.isRequired,
+  onSearchInputChange: PropTypes.func.isRequired,
+  onMovieSelect: PropTypes.func.isRequired
+};
+
+ImportMovieSelectMovie.defaultProps = {
+  isFetching: true,
+  isPopulated: false,
+  items: [],
+  queued: true
+};
+
+export default ImportMovieSelectMovie;

frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovieConnector.js

@@ -0,0 +1,76 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { queueLookupMovie, setImportMovieValue } from 'Store/Actions/importMovieActions';
+import createImportMovieItemSelector from 'Store/Selectors/createImportMovieItemSelector';
+import ImportMovieSelectMovie from './ImportMovieSelectMovie';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.importMovie.isLookingUpMovie,
+    createImportMovieItemSelector(),
+    (isLookingUpMovie, item) => {
+      return {
+        isLookingUpMovie,
+        ...item
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  queueLookupMovie,
+  setImportMovieValue
+};
+
+class ImportMovieSelectMovieConnector extends Component {
+
+  //
+  // Listeners
+
+  onSearchInputChange = (term) => {
+    this.props.queueLookupMovie({
+      name: this.props.id,
+      term,
+      topOfQueue: true
+    });
+  }
+
+  onMovieSelect = (tmdbId) => {
+    const {
+      id,
+      items
+    } = this.props;
+
+    this.props.setImportMovieValue({
+      id,
+      selectedMovie: _.find(items, { tmdbId })
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportMovieSelectMovie
+        {...this.props}
+        onSearchInputChange={this.onSearchInputChange}
+        onMovieSelect={this.onMovieSelect}
+      />
+    );
+  }
+}
+
+ImportMovieSelectMovieConnector.propTypes = {
+  id: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object),
+  selectedMovie: PropTypes.object,
+  isSelected: PropTypes.bool,
+  queueLookupMovie: PropTypes.func.isRequired,
+  setImportMovieValue: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportMovieSelectMovieConnector);

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

@@ -0,0 +1,17 @@
+.titleContainer {
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  margin-right: 5px;
+}
+
+.year {
+  margin-left: 5px;
+  color: $disabledColor;
+}
+
+.existing {
+  margin-left: 5px;
+}

frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieTitle.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { kinds } from 'Helpers/Props';
+import Label from 'Components/Label';
+import styles from './ImportMovieTitle.css';
+
+function ImportMovieTitle(props) {
+  const {
+    title,
+    year,
+    studio,
+    isExistingMovie
+  } = props;
+
+  return (
+    <div className={styles.titleContainer}>
+      <div className={styles.title}>
+        {title}
+
+        {
+          !title.contains(year) &&
+            <span className={styles.year}>({year})</span>
+        }
+      </div>
+
+      {
+        !!studio &&
+          <Label>{studio}</Label>
+      }
+
+      {
+        isExistingMovie &&
+          <Label
+            kind={kinds.WARNING}
+          >
+            Existing
+          </Label>
+      }
+    </div>
+  );
+}
+
+ImportMovieTitle.propTypes = {
+  title: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
+  studio: PropTypes.string,
+  isExistingMovie: PropTypes.bool.isRequired
+};
+
+export default ImportMovieTitle;

frontend/src/AddMovie/ImportMovie/ImportMovies.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { Route } from 'react-router-dom';
+import Switch from 'Components/Router/Switch';
+import ImportMovieSelectFolderConnector from 'AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolderConnector';
+import ImportMovieConnector from 'AddMovie/ImportMovie/Import/ImportMovieConnector';
+
+class ImportMovies extends Component {
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Switch>
+        <Route
+          exact={true}
+          path="/add/import"
+          component={ImportMovieSelectFolderConnector}
+        />
+
+        <Route
+          path="/add/import/:rootFolderId"
+          component={ImportMovieConnector}
+        />
+      </Switch>
+    );
+  }
+}
+
+export default ImportMovies;

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieRootFolderRow.css

@@ -0,0 +1,18 @@
+.link {
+  composes: link from 'Components/Link/Link.css';
+
+  display: block;
+}
+
+.freeSpace,
+.unmappedFolders {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 150px;
+}
+
+.actions {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 45px;
+}

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieRootFolderRow.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import formatBytes from 'Utilities/Number/formatBytes';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import styles from './ImportMovieRootFolderRow.css';
+
+function ImportMovieRootFolderRow(props) {
+  const {
+    id,
+    path,
+    freeSpace,
+    unmappedFolders,
+    onDeletePress
+  } = props;
+
+  const unmappedFoldersCount = unmappedFolders.length || '-';
+
+  return (
+    <TableRow>
+      <TableRowCell>
+        <Link
+          className={styles.link}
+          to={`/add/import/${id}`}
+        >
+          {path}
+        </Link>
+      </TableRowCell>
+
+      <TableRowCell className={styles.freeSpace}>
+        {formatBytes(freeSpace) || '-'}
+      </TableRowCell>
+
+      <TableRowCell className={styles.unmappedFolders}>
+        {unmappedFoldersCount}
+      </TableRowCell>
+
+      <TableRowCell className={styles.actions}>
+        <IconButton
+          title="Remove root folder"
+          name={icons.REMOVE}
+          onPress={onDeletePress}
+        />
+      </TableRowCell>
+    </TableRow>
+  );
+}
+
+ImportMovieRootFolderRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  path: PropTypes.string.isRequired,
+  freeSpace: PropTypes.number.isRequired,
+  unmappedFolders: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onDeletePress: PropTypes.func.isRequired
+};
+
+ImportMovieRootFolderRow.defaultProps = {
+  freeSpace: 0,
+  unmappedFolders: []
+};
+
+export default ImportMovieRootFolderRow;

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieRootFolderRowConnector.js

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { deleteRootFolder } from 'Store/Actions/rootFolderActions';
+import ImportMovieRootFolderRow from './ImportMovieRootFolderRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    () => {
+      return {
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  deleteRootFolder
+};
+
+class ImportMovieRootFolderRowConnector extends Component {
+
+  //
+  // Listeners
+
+  onDeletePress = () => {
+    this.props.deleteRootFolder({ id: this.props.id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportMovieRootFolderRow
+        {...this.props}
+        onDeletePress={this.onDeletePress}
+      />
+    );
+  }
+}
+
+ImportMovieRootFolderRowConnector.propTypes = {
+  id: PropTypes.number.isRequired,
+  deleteRootFolder: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportMovieRootFolderRowConnector);

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.css

@@ -0,0 +1,32 @@
+.header {
+  margin-bottom: 40px;
+  text-align: center;
+  font-weight: 300;
+  font-size: 36px;
+}
+
+.tips {
+  font-size: 20px;
+}
+
+.tip {
+  font-size: $defaultFontSize;
+}
+
+.code {
+  font-size: 12px;
+  font-family: $monoSpaceFontFamily;
+}
+
+.recentFolders {
+  margin-top: 40px;
+}
+
+.startImport {
+  margin-top: 40px;
+  text-align: center;
+}
+
+.importButtonIcon {
+  margin-right: 8px;
+}

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js

@@ -0,0 +1,188 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import ImportMovieRootFolderRowConnector from './ImportMovieRootFolderRowConnector';
+import styles from './ImportMovieSelectFolder.css';
+
+const rootFolderColumns = [
+  {
+    name: 'path',
+    label: 'Path',
+    isVisible: true
+  },
+  {
+    name: 'freeSpace',
+    label: 'Free Space',
+    isVisible: true
+  },
+  {
+    name: 'unmappedFolders',
+    label: 'Unmapped Folders',
+    isVisible: true
+  },
+  {
+    name: 'actions',
+    isVisible: true
+  }
+];
+
+class ImportMovieSelectFolder extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isAddNewRootFolderModalOpen: false
+    };
+  }
+
+  //
+  // Lifecycle
+
+  onAddNewRootFolderPress = () => {
+    this.setState({ isAddNewRootFolderModalOpen: true });
+  }
+
+  onNewRootFolderSelect = ({ value }) => {
+    this.props.onNewRootFolderSelect(value);
+  }
+
+  onAddRootFolderModalClose = () => {
+    this.setState({ isAddNewRootFolderModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isWindows,
+      isFetching,
+      isPopulated,
+      error,
+      items
+    } = this.props;
+
+    return (
+      <PageContent title="Import Series">
+        <PageContentBodyConnector>
+          {
+            isFetching && !isPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>Unable to load root folders</div>
+          }
+
+          {
+            !error && isPopulated &&
+              <div>
+                <div className={styles.header}>
+                  Import movies you already have
+                </div>
+
+                <div className={styles.tips}>
+                  Some tips to ensure the import goes smoothly:
+                  <ul>
+                    <li className={styles.tip}>
+                      Make sure your files include the quality in the name. eg. <span className={styles.code}>episode.s02e15.bluray.mkv</span>
+                    </li>
+                    <li className={styles.tip}>
+                      Point Radarr to the folder containing all of your movies not a specific one. eg. <span className={styles.code}>"{isWindows ? 'C:\\movies' : '/movies'}"</span> and not <span className={styles.code}>"{isWindows ? 'C:\\movies\\the matrix' : '/movies/the matrix'}"</span>
+                    </li>
+                  </ul>
+                </div>
+
+                {
+                  items.length > 0 ?
+                    <div className={styles.recentFolders}>
+                      <FieldSet legend="Recent Folders">
+                        <Table
+                          columns={rootFolderColumns}
+                        >
+                          <TableBody>
+                            {
+                              items.map((rootFolder) => {
+                                return (
+                                  <ImportMovieRootFolderRowConnector
+                                    key={rootFolder.id}
+                                    id={rootFolder.id}
+                                    path={rootFolder.path}
+                                    freeSpace={rootFolder.freeSpace}
+                                    unmappedFolders={rootFolder.unmappedFolders}
+                                  />
+                                );
+                              })
+                            }
+                          </TableBody>
+                        </Table>
+                      </FieldSet>
+
+                      <Button
+                        kind={kinds.PRIMARY}
+                        size={sizes.LARGE}
+                        onPress={this.onAddNewRootFolderPress}
+                      >
+                        <Icon
+                          className={styles.importButtonIcon}
+                          name={icons.DRIVE}
+                        />
+                        Choose another folder
+                      </Button>
+                    </div> :
+
+                    <div className={styles.startImport}>
+                      <Button
+                        kind={kinds.PRIMARY}
+                        size={sizes.LARGE}
+                        onPress={this.onAddNewRootFolderPress}
+                      >
+                        <Icon
+                          className={styles.importButtonIcon}
+                          name={icons.DRIVE}
+                        />
+                        Start Import
+                      </Button>
+                    </div>
+                }
+
+                <FileBrowserModal
+                  isOpen={this.state.isAddNewRootFolderModalOpen}
+                  name="rootFolderPath"
+                  value=""
+                  onChange={this.onNewRootFolderSelect}
+                  onModalClose={this.onAddRootFolderModalClose}
+                />
+              </div>
+          }
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+}
+
+ImportMovieSelectFolder.propTypes = {
+  isWindows: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onNewRootFolderSelect: PropTypes.func.isRequired,
+  onDeleteRootFolderPress: PropTypes.func.isRequired
+};
+
+export default ImportMovieSelectFolder;

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolderConnector.js

@@ -0,0 +1,91 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { push } from 'react-router-redux';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import { fetchRootFolders, addRootFolder, deleteRootFolder } from 'Store/Actions/rootFolderActions';
+import ImportMovieSelectFolder from './ImportMovieSelectFolder';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.rootFolders,
+    createSystemStatusSelector(),
+    (rootFolders, systemStatus) => {
+      return {
+        ...rootFolders,
+        isWindows: systemStatus.isWindows
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchRootFolders,
+  addRootFolder,
+  deleteRootFolder,
+  push
+};
+
+class ImportMovieSelectFolderConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchRootFolders();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      isSaving,
+      saveError
+    } = this.props;
+
+    if (prevProps.isSaving && !isSaving && !saveError) {
+      const newRootFolders = _.differenceBy(items, prevProps.items, (item) => item.id);
+
+      if (newRootFolders.length === 1) {
+        this.props.push(`${window.Radarr.urlBase}/add/import/${newRootFolders[0].id}`);
+      }
+    }
+  }
+
+  //
+  // Listeners
+
+  onNewRootFolderSelect = (path) => {
+    this.props.addRootFolder({ path });
+  }
+
+  onDeleteRootFolderPress = (id) => {
+    this.props.deleteRootFolder({ id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportMovieSelectFolder
+        {...this.props}
+        onNewRootFolderSelect={this.onNewRootFolderSelect}
+        onDeleteRootFolderPress={this.onDeleteRootFolderPress}
+      />
+    );
+  }
+}
+
+ImportMovieSelectFolderConnector.propTypes = {
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchRootFolders: PropTypes.func.isRequired,
+  addRootFolder: PropTypes.func.isRequired,
+  deleteRootFolder: PropTypes.func.isRequired,
+  push: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportMovieSelectFolderConnector);

frontend/src/App/App.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import DocumentTitle from 'react-document-title';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'react-router-redux';
+import PageConnector from 'Components/Page/PageConnector';
+import AppRoutes from './AppRoutes';
+
+function App({ store, history }) {
+  return (
+    <DocumentTitle title="Radarr">
+      <Provider store={store}>
+        <ConnectedRouter history={history}>
+          <PageConnector>
+            <AppRoutes app={App} />
+          </PageConnector>
+        </ConnectedRouter>
+      </Provider>
+    </DocumentTitle>
+  );
+}
+
+App.propTypes = {
+  store: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired
+};
+
+export default App;

frontend/src/App/AppRoutes.js

@@ -0,0 +1,232 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
+import NotFound from 'Components/NotFound';
+import Switch from 'Components/Router/Switch';
+import MovieIndexConnector from 'Movie/Index/MovieIndexConnector';
+import AddNewMovieConnector from 'AddMovie/AddNewMovie/AddNewMovieConnector';
+import ImportMovies from 'AddMovie/ImportMovie/ImportMovies';
+import SeriesEditorConnector from 'Movie/Editor/SeriesEditorConnector';
+import MovieDetailsPageConnector from 'Movie/Details/MovieDetailsPageConnector';
+import CalendarPageConnector from 'Calendar/CalendarPageConnector';
+import HistoryConnector from 'Activity/History/HistoryConnector';
+import QueueConnector from 'Activity/Queue/QueueConnector';
+import BlacklistConnector from 'Activity/Blacklist/BlacklistConnector';
+import Settings from 'Settings/Settings';
+import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementConnector';
+import Profiles from 'Settings/Profiles/Profiles';
+import Quality from 'Settings/Quality/Quality';
+import IndexerSettingsConnector from 'Settings/Indexers/IndexerSettingsConnector';
+import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
+import NetImportSettingsConnector from 'Settings/NetImport/NetImportSettingsConnector';
+import NotificationSettings from 'Settings/Notifications/NotificationSettings';
+import MetadataSettings from 'Settings/Metadata/MetadataSettings';
+import TagSettings from 'Settings/Tags/TagSettings';
+import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
+import UISettingsConnector from 'Settings/UI/UISettingsConnector';
+import Status from 'System/Status/Status';
+import Tasks from 'System/Tasks/Tasks';
+import BackupsConnector from 'System/Backup/BackupsConnector';
+import UpdatesConnector from 'System/Updates/UpdatesConnector';
+import LogsTableConnector from 'System/Events/LogsTableConnector';
+import Logs from 'System/Logs/Logs';
+
+function AppRoutes(props) {
+  const {
+    app
+  } = props;
+
+  return (
+    <Switch>
+      {/*
+        Movies
+      */}
+
+      <Route
+        exact={true}
+        path="/"
+        component={MovieIndexConnector}
+      />
+
+      {
+        window.Radarr.urlBase &&
+        <Route
+          exact={true}
+          path="/"
+          addUrlBase={false}
+          render={() => {
+            return (
+              <Redirect
+                to={getPathWithUrlBase('/')}
+                component={app}
+              />
+            );
+          }}
+        />
+      }
+
+      <Route
+        path="/add/new"
+        component={AddNewMovieConnector}
+      />
+
+      <Route
+        path="/add/import"
+        component={ImportMovies}
+      />
+
+      <Route
+        path="/serieseditor"
+        component={SeriesEditorConnector}
+      />
+
+      <Route
+        path="/movie/:titleSlug"
+        component={MovieDetailsPageConnector}
+      />
+
+      {/*
+        Calendar
+      */}
+
+      <Route
+        path="/calendar"
+        component={CalendarPageConnector}
+      />
+
+      {/*
+        Activity
+      */}
+
+      <Route
+        path="/activity/history"
+        component={HistoryConnector}
+      />
+
+      <Route
+        path="/activity/queue"
+        component={QueueConnector}
+      />
+
+      <Route
+        path="/activity/blacklist"
+        component={BlacklistConnector}
+      />
+
+      {/*
+        Settings
+      */}
+
+      <Route
+        exact={true}
+        path="/settings"
+        component={Settings}
+      />
+
+      <Route
+        path="/settings/mediamanagement"
+        component={MediaManagementConnector}
+      />
+
+      <Route
+        path="/settings/profiles"
+        component={Profiles}
+      />
+
+      <Route
+        path="/settings/quality"
+        component={Quality}
+      />
+
+      <Route
+        path="/settings/indexers"
+        component={IndexerSettingsConnector}
+      />
+
+      <Route
+        path="/settings/downloadclients"
+        component={DownloadClientSettingsConnector}
+      />
+
+      <Route
+        path="/settings/netimports"
+        component={NetImportSettingsConnector}
+      />
+
+      <Route
+        path="/settings/connect"
+        component={NotificationSettings}
+      />
+
+      <Route
+        path="/settings/metadata"
+        component={MetadataSettings}
+      />
+
+      <Route
+        path="/settings/tags"
+        component={TagSettings}
+      />
+
+      <Route
+        path="/settings/general"
+        component={GeneralSettingsConnector}
+      />
+
+      <Route
+        path="/settings/ui"
+        component={UISettingsConnector}
+      />
+
+      {/*
+        System
+      */}
+
+      <Route
+        path="/system/status"
+        component={Status}
+      />
+
+      <Route
+        path="/system/tasks"
+        component={Tasks}
+      />
+
+      <Route
+        path="/system/backup"
+        component={BackupsConnector}
+      />
+
+      <Route
+        path="/system/updates"
+        component={UpdatesConnector}
+      />
+
+      <Route
+        path="/system/events"
+        component={LogsTableConnector}
+      />
+
+      <Route
+        path="/system/logs/files"
+        component={Logs}
+      />
+
+      {/*
+        Not Found
+      */}
+
+      <Route
+        path="*"
+        component={NotFound}
+      />
+    </Switch>
+  );
+}
+
+AppRoutes.propTypes = {
+  app: PropTypes.func.isRequired
+};
+
+export default AppRoutes;

frontend/src/App/AppUpdatedModal.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import AppUpdatedModalContentConnector from './AppUpdatedModalContentConnector';
+
+function AppUpdatedModal(props) {
+  const {
+    isOpen,
+    onModalClose
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      closeOnBackgroundClick={false}
+      onModalClose={onModalClose}
+    >
+      <AppUpdatedModalContentConnector
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+AppUpdatedModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AppUpdatedModal;

frontend/src/App/AppUpdatedModalConnector.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import AppUpdatedModal from './AppUpdatedModal';
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onModalClose() {
+      location.reload();
+    }
+  };
+}
+
+export default connect(null, createMapDispatchToProps)(AppUpdatedModal);

frontend/src/App/AppUpdatedModalContent.css

@@ -0,0 +1,15 @@
+.version {
+  margin: 0 3px;
+  font-weight: bold;
+}
+
+.maintenance {
+  margin-top: 20px;
+}
+
+.changes {
+  margin-top: 20px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #e5e5e5;
+  font-size: 18px;
+}

frontend/src/App/AppUpdatedModalContent.js

@@ -0,0 +1,98 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { kinds } from 'Helpers/Props';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Button from 'Components/Link/Button';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import UpdateChanges from 'System/Updates/UpdateChanges';
+import styles from './AppUpdatedModalContent.css';
+
+function AppUpdatedModalContent(props) {
+  const {
+    version,
+    isPopulated,
+    error,
+    items,
+    onSeeChangesPress,
+    onModalClose
+  } = props;
+
+  const update = items[0];
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        Radarr Updated
+      </ModalHeader>
+
+      <ModalBody>
+        <div>
+          Version <span className={styles.version}>{version}</span> of Radarr has been installed, in order to get the latest changes you'll need to reload Radarr.
+        </div>
+
+        {
+          isPopulated && !error && !!update &&
+            <div>
+              {
+                !update.changes &&
+                  <div className={styles.maintenance}>Maintenance release</div>
+              }
+
+              {
+                !!update.changes &&
+                  <div>
+                    <div className={styles.changes}>
+                      What's new?
+                    </div>
+
+                    <UpdateChanges
+                      title="New"
+                      changes={update.changes.new}
+                    />
+
+                    <UpdateChanges
+                      title="Fixed"
+                      changes={update.changes.fixed}
+                    />
+                  </div>
+              }
+            </div>
+        }
+
+        {
+          !isPopulated && !error &&
+            <LoadingIndicator />
+        }
+      </ModalBody>
+
+      <ModalFooter>
+        <Button
+          onPress={onSeeChangesPress}
+        >
+          Recent Changes
+        </Button>
+
+        <Button
+          kind={kinds.PRIMARY}
+          onPress={onModalClose}
+        >
+          Reload
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+AppUpdatedModalContent.propTypes = {
+  version: PropTypes.string.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSeeChangesPress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AppUpdatedModalContent;

frontend/src/App/AppUpdatedModalContentConnector.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 { fetchUpdates } from 'Store/Actions/systemActions';
+import AppUpdatedModalContent from './AppUpdatedModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.app.version,
+    (state) => state.system.updates,
+    (version, updates) => {
+      const {
+        isPopulated,
+        error,
+        items
+      } = updates;
+
+      return {
+        version,
+        isPopulated,
+        error,
+        items
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    dispatchFetchUpdates() {
+      dispatch(fetchUpdates());
+    },
+
+    onSeeChangesPress() {
+      window.location = `${window.Radarr.urlBase}/system/updates`;
+    }
+  };
+}
+
+class AppUpdatedModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.dispatchFetchUpdates();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.version !== this.props.version) {
+      this.props.dispatchFetchUpdates();
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      dispatchFetchUpdates,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <AppUpdatedModalContent {...otherProps} />
+    );
+  }
+}
+
+AppUpdatedModalContentConnector.propTypes = {
+  version: PropTypes.string.isRequired,
+  dispatchFetchUpdates: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(AppUpdatedModalContentConnector);

frontend/src/App/ColorImpairedContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const ColorImpairedContext = React.createContext(false);
+export const ColorImpairedConsumer = ColorImpairedContext.Consumer;
+
+export default ColorImpairedContext;

frontend/src/App/ConnectionLostModal.css

@@ -0,0 +1,3 @@
+.automatic {
+  margin-top: 20px;
+}

frontend/src/App/ConnectionLostModal.js

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { kinds } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Modal from 'Components/Modal/Modal';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import styles from './ConnectionLostModal.css';
+
+function ConnectionLostModal(props) {
+  const {
+    isOpen,
+    onModalClose
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Connnection Lost
+        </ModalHeader>
+
+        <ModalBody>
+          <div>
+            Radarr has lost it's connection to the backend and will need to be reloaded to restore functionality.
+          </div>
+
+          <div className={styles.automatic}>
+            Radarr will try to connect automatically, or you can click reload below.
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            kind={kinds.PRIMARY}
+            onPress={onModalClose}
+          >
+            Reload
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+ConnectionLostModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default ConnectionLostModal;

frontend/src/App/ConnectionLostModalConnector.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import ConnectionLostModal from './ConnectionLostModal';
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onModalClose() {
+      location.reload();
+    }
+  };
+}
+
+export default connect(undefined, createMapDispatchToProps)(ConnectionLostModal);

frontend/src/Calendar/Agenda/Agenda.css

@@ -0,0 +1,3 @@
+.agenda {
+  margin-top: 10px;
+}

frontend/src/Calendar/Agenda/Agenda.js

@@ -0,0 +1,38 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React from 'react';
+import AgendaEventConnector from './AgendaEventConnector';
+import styles from './Agenda.css';
+
+function Agenda(props) {
+  const {
+    items
+  } = props;
+
+  return (
+    <div className={styles.agenda}>
+      {
+        items.map((item, index) => {
+          const momentDate = moment(item.airDateUtc);
+          const showDate = index === 0 ||
+            !moment(items[index - 1].airDateUtc).isSame(momentDate, 'day');
+
+          return (
+            <AgendaEventConnector
+              key={item.id}
+              episodeId={item.id}
+              showDate={showDate}
+              {...item}
+            />
+          );
+        })
+      }
+    </div>
+  );
+}
+
+Agenda.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default Agenda;

frontend/src/Calendar/Agenda/AgendaConnector.js

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

frontend/src/Calendar/Agenda/AgendaEvent.css

@@ -0,0 +1,117 @@
+.event {
+  display: flex;
+  overflow-x: hidden;
+  padding: 5px;
+  border-bottom: 1px solid $borderColor;
+  font-size: 14px;
+
+  &:hover {
+    background-color: $tableRowHoverBackgroundColor;
+  }
+}
+
+.eventWrapper {
+  display: flex;
+  flex: 1 0 1px;
+  overflow-x: hidden;
+  padding-left: 6px;
+  border-left-width: 4px;
+  border-left-style: solid;
+}
+
+.date {
+  flex: 0 0 250px;
+  font-weight: bold;
+}
+
+.time {
+  flex: 0 0 120px;
+  margin-right: 10px;
+  border: none !important;
+}
+
+.seriesTitle,
+.episodeTitle {
+  @add-mixin truncate;
+
+  flex: 0 1 300px;
+  margin-right: 10px;
+}
+
+.episodeTitle {
+  flex: 1 1 1px;
+}
+
+.seasonEpisodeNumber {
+  flex: 0 0 100px;
+}
+
+.episodeSeparator {
+  display: none;
+}
+
+.absoluteEpisodeNumber {
+  margin-left: 3px;
+}
+
+.statusIcon {
+  margin-left: 3px;
+}
+
+/*
+ * Status
+ */
+
+.downloaded {
+  composes: downloaded from 'Calendar/Events/CalendarEvent.css';
+}
+
+.downloading {
+  composes: downloading from 'Calendar/Events/CalendarEvent.css';
+}
+
+.unmonitored {
+  composes: unmonitored from 'Calendar/Events/CalendarEvent.css';
+}
+
+.onAir {
+  composes: onAir from 'Calendar/Events/CalendarEvent.css';
+}
+
+.missing {
+  composes: missing from 'Calendar/Events/CalendarEvent.css';
+}
+
+.premiere {
+  composes: premiere from 'Calendar/Events/CalendarEvent.css';
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .event {
+    flex-direction: column;
+  }
+
+  .eventWrapper {
+    display: block;
+    flex: 0 0 auto;
+  }
+
+  .date {
+    margin-left: 10px;
+  }
+
+  .date,
+  .time,
+  .seriesTitle {
+    flex: 0 0 100%;
+  }
+
+  .seasonEpisodeNumber {
+    flex: 0 0 auto;
+  }
+
+  .episodeSeparator {
+    display: inline-block;
+    margin: 0 5px;
+  }
+}

frontend/src/Calendar/Agenda/AgendaEvent.js

@@ -0,0 +1,141 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import { icons, kinds } from 'Helpers/Props';
+import getStatusStyle from 'Calendar/getStatusStyle';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import CalendarEventQueueDetails from 'Calendar/Events/CalendarEventQueueDetails';
+import MovieTitleLink from 'Movie/MovieTitleLink';
+import styles from './AgendaEvent.css';
+
+class AgendaEvent extends Component {
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isDetailsModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onPress = () => {
+    this.setState({ isDetailsModalOpen: true });
+  }
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      movieFile,
+      title,
+      titleSlug,
+      inCinemas,
+      monitored,
+      hasFile,
+      grabbed,
+      queueItem,
+      showDate,
+      showCutoffUnmetIcon,
+      longDateFormat,
+      colorImpairedMode
+    } = this.props;
+
+    const startTime = moment(inCinemas);
+    const downloading = !!(queueItem || grabbed);
+    const isMonitored = monitored;
+    const statusStyle = getStatusStyle(hasFile, downloading, startTime, isMonitored);
+
+    return (
+      <div>
+        <Link
+          className={styles.event}
+          component="div"
+          onPress={this.onPress}
+        >
+          <div className={styles.date}>
+            {
+              showDate &&
+                startTime.format(longDateFormat)
+            }
+          </div>
+
+          <div
+            className={classNames(
+              styles.eventWrapper,
+              styles[statusStyle],
+              colorImpairedMode && 'colorImpaired'
+            )}
+          >
+            <div className={styles.seriesTitle}>
+              <MovieTitleLink
+                titleSlug={titleSlug}
+                title={title}
+              />
+            </div>
+
+            {
+              !!queueItem &&
+                <span className={styles.statusIcon}>
+                  <CalendarEventQueueDetails
+                    {...queueItem}
+                  />
+                </span>
+            }
+
+            {
+              !queueItem && grabbed &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.DOWNLOADING}
+                  title="Movie is downloading"
+                />
+            }
+
+            {
+              showCutoffUnmetIcon &&
+              !!movieFile &&
+              movieFile.qualityCutoffNotMet &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.MOVIE_FILE}
+                  kind={kinds.WARNING}
+                  title="Quality cutoff has not been met"
+                />
+            }
+          </div>
+        </Link>
+      </div>
+    );
+  }
+}
+
+AgendaEvent.propTypes = {
+  id: PropTypes.number.isRequired,
+  episodeFile: PropTypes.object,
+  title: PropTypes.string.isRequired,
+  titleSlug: PropTypes.string.isRequired,
+  inCinemas: PropTypes.string.isRequired,
+  monitored: PropTypes.bool.isRequired,
+  hasFile: PropTypes.bool.isRequired,
+  grabbed: PropTypes.bool,
+  queueItem: PropTypes.object,
+  showDate: PropTypes.bool.isRequired,
+  showCutoffUnmetIcon: PropTypes.bool.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  longDateFormat: PropTypes.string.isRequired,
+  colorImpairedMode: PropTypes.bool.isRequired
+};
+
+export default AgendaEvent;

frontend/src/Calendar/Agenda/AgendaEventConnector.js

@@ -0,0 +1,30 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createMovieFileSelector from 'Store/Selectors/createMovieFileSelector';
+import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import createQueueItemSelector from 'Store/Selectors/createQueueItemSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import AgendaEvent from './AgendaEvent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.calendar.options,
+    createMovieSelector(),
+    createMovieFileSelector(),
+    createQueueItemSelector(),
+    createUISettingsSelector(),
+    (calendarOptions, series, episodeFile, queueItem, uiSettings) => {
+      return {
+        series,
+        episodeFile,
+        queueItem,
+        ...calendarOptions,
+        timeFormat: uiSettings.timeFormat,
+        longDateFormat: uiSettings.longDateFormat,
+        colorImpairedMode: uiSettings.enableColorImpairedMode
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(AgendaEvent);

frontend/src/Calendar/Calendar.css

@@ -0,0 +1,8 @@
+.calendar {
+  flex-grow: 1;
+  width: 100%;
+}
+
+.calendarContent {
+  width: 100%;
+}

frontend/src/Calendar/Calendar.js

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import * as calendarViews from './calendarViews';
+import CalendarHeaderConnector from './Header/CalendarHeaderConnector';
+import DaysOfWeekConnector from './Day/DaysOfWeekConnector';
+import CalendarDaysConnector from './Day/CalendarDaysConnector';
+import AgendaConnector from './Agenda/AgendaConnector';
+import styles from './Calendar.css';
+
+class Calendar extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      view
+    } = this.props;
+
+    return (
+      <div className={styles.calendar}>
+        {
+          isFetching && !isPopulated &&
+            <LoadingIndicator />
+        }
+
+        {
+          !isFetching && !!error &&
+            <div>Unable to load the calendar</div>
+        }
+
+        {
+          !error && isPopulated && view === calendarViews.AGENDA &&
+            <div className={styles.calendarContent}>
+              <CalendarHeaderConnector />
+              <AgendaConnector />
+            </div>
+        }
+
+        {
+          !error && isPopulated && view !== calendarViews.AGENDA &&
+            <div className={styles.calendarContent}>
+              <CalendarHeaderConnector />
+              <DaysOfWeekConnector />
+              <CalendarDaysConnector />
+            </div>
+        }
+      </div>
+    );
+  }
+}
+
+Calendar.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  view: PropTypes.string.isRequired
+};
+
+export default Calendar;

frontend/src/Calendar/CalendarConnector.js

@@ -0,0 +1,183 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
+import * as calendarActions from 'Store/Actions/calendarActions';
+import { fetchMovieFiles, clearMovieFiles } from 'Store/Actions/movieFileActions';
+import { fetchQueueDetails, clearQueueDetails } from 'Store/Actions/queueActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import * as commandNames from 'Commands/commandNames';
+import Calendar from './Calendar';
+
+const UPDATE_DELAY = 3600000; // 1 hour
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.calendar,
+    (state) => state.settings.ui.item.firstDayOfWeek,
+    createCommandExecutingSelector(commandNames.REFRESH_MOVIE),
+    (calendar, firstDayOfWeek, isRefreshingMovie) => {
+      return {
+        ...calendar,
+        isRefreshingMovie,
+        firstDayOfWeek
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...calendarActions,
+  fetchMovieFiles,
+  clearMovieFiles,
+  fetchQueueDetails,
+  clearQueueDetails
+};
+
+class CalendarConnector extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.updateTimeoutId = null;
+  }
+
+  componentDidMount() {
+    registerPagePopulator(this.repopulate);
+    this.props.gotoCalendarToday();
+    this.scheduleUpdate();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      time,
+      view,
+      isRefreshingMovie,
+      firstDayOfWeek
+    } = this.props;
+
+    if (hasDifferentItems(prevProps.items, items)) {
+      const episodeIds = selectUniqueIds(items, 'id');
+      const episodeFileIds = selectUniqueIds(items, 'episodeFileId');
+
+      if (items.length) {
+        this.props.fetchQueueDetails({ episodeIds });
+      }
+
+      if (episodeFileIds.length) {
+        this.props.fetchMovieFiles({ episodeFileIds });
+      }
+    }
+
+    if (prevProps.time !== time) {
+      this.scheduleUpdate();
+    }
+
+    if (prevProps.firstDayOfWeek !== firstDayOfWeek) {
+      this.props.fetchCalendar({ time, view });
+    }
+
+    if (prevProps.isRefreshingMovie && !isRefreshingMovie) {
+      this.props.fetchCalendar({ time, view });
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearCalendar();
+    this.props.clearQueueDetails();
+    this.props.clearMovieFiles();
+    this.clearUpdateTimeout();
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    const {
+      time,
+      view
+    } = this.props;
+
+    this.props.fetchQueueDetails({ time, view });
+    this.props.fetchCalendar({ time, view });
+  }
+
+  scheduleUpdate = () => {
+    this.clearUpdateTimeout();
+
+    this.updateTimeoutId = setTimeout(this.updateCalendar, UPDATE_DELAY);
+  }
+
+  clearUpdateTimeout = () => {
+    if (this.updateTimeoutId) {
+      clearTimeout(this.updateTimeoutId);
+    }
+  }
+
+  updateCalendar = () => {
+    this.props.gotoCalendarToday();
+    this.scheduleUpdate();
+  }
+
+  //
+  // Listeners
+
+  onCalendarViewChange = (view) => {
+    this.props.setCalendarView({ view });
+  }
+
+  onTodayPress = () => {
+    this.props.gotoCalendarToday();
+  }
+
+  onPreviousPress = () => {
+    this.props.gotoCalendarPreviousRange();
+  }
+
+  onNextPress = () => {
+    this.props.gotoCalendarNextRange();
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Calendar
+        {...this.props}
+        onCalendarViewChange={this.onCalendarViewChange}
+        onTodayPress={this.onTodayPress}
+        onPreviousPress={this.onPreviousPress}
+        onNextPress={this.onNextPress}
+      />
+    );
+  }
+}
+
+CalendarConnector.propTypes = {
+  time: PropTypes.string,
+  view: PropTypes.string.isRequired,
+  firstDayOfWeek: PropTypes.number.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isRefreshingMovie: PropTypes.bool.isRequired,
+  setCalendarView: PropTypes.func.isRequired,
+  gotoCalendarToday: PropTypes.func.isRequired,
+  gotoCalendarPreviousRange: PropTypes.func.isRequired,
+  gotoCalendarNextRange: PropTypes.func.isRequired,
+  clearCalendar: PropTypes.func.isRequired,
+  fetchCalendar: PropTypes.func.isRequired,
+  fetchMovieFiles: PropTypes.func.isRequired,
+  clearMovieFiles: PropTypes.func.isRequired,
+  fetchQueueDetails: PropTypes.func.isRequired,
+  clearQueueDetails: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(CalendarConnector);

frontend/src/Calendar/CalendarPage.css

@@ -0,0 +1,14 @@
+.calendarPageBody {
+  composes: contentBody from 'Components/Page/PageContentBody.css';
+
+  display: flex;
+}
+
+.calendarInnerPageBody {
+  composes: innerContentBody from 'Components/Page/PageContentBody.css';
+
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+}

frontend/src/Calendar/CalendarPage.js

@@ -0,0 +1,152 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { align, icons } from 'Helpers/Props';
+import PageContent from 'Components/Page/PageContent';
+import Measure from 'Components/Measure';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import NoMovie from 'Movie/NoMovie';
+import CalendarLinkModal from './iCal/CalendarLinkModal';
+import CalendarOptionsModal from './Options/CalendarOptionsModal';
+import LegendConnector from './Legend/LegendConnector';
+import CalendarConnector from './CalendarConnector';
+import styles from './CalendarPage.css';
+
+const MINIMUM_DAY_WIDTH = 120;
+
+class CalendarPage extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isCalendarLinkModalOpen: false,
+      isOptionsModalOpen: false,
+      width: 0
+    };
+  }
+
+  //
+  // Listeners
+
+  onMeasure = ({ width }) => {
+    this.setState({ width });
+    const days = Math.max(3, Math.min(7, Math.floor(width / MINIMUM_DAY_WIDTH)));
+
+    this.props.onDaysCountChange(days);
+  }
+
+  onGetCalendarLinkPress = () => {
+    this.setState({ isCalendarLinkModalOpen: true });
+  }
+
+  onGetCalendarLinkModalClose = () => {
+    this.setState({ isCalendarLinkModalOpen: false });
+  }
+
+  onOptionsPress = () => {
+    this.setState({ isOptionsModalOpen: true });
+  }
+
+  onOptionsModalClose = () => {
+    this.setState({ isOptionsModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      selectedFilterKey,
+      filters,
+      hasSeries,
+      onFilterSelect
+    } = this.props;
+
+    const {
+      isCalendarLinkModalOpen,
+      isOptionsModalOpen
+    } = this.state;
+
+    const isMeasured = this.state.width > 0;
+    let PageComponent = 'div';
+
+    if (isMeasured) {
+      PageComponent = hasSeries ? CalendarConnector : NoMovie;
+    }
+
+    return (
+      <PageContent title="Calendar">
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="iCal Link"
+              iconName={icons.CALENDAR}
+              onPress={this.onGetCalendarLinkPress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <PageToolbarButton
+              label="Options"
+              iconName={icons.POSTER}
+              onPress={this.onOptionsPress}
+            />
+
+            <FilterMenu
+              alignMenu={align.RIGHT}
+              isDisabled={!hasSeries}
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={[]}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBodyConnector
+          className={styles.calendarPageBody}
+          innerClassName={styles.calendarInnerPageBody}
+        >
+          <Measure
+            whitelist={['width']}
+            onMeasure={this.onMeasure}
+          >
+            <PageComponent />
+          </Measure>
+
+          {
+            hasSeries &&
+              <LegendConnector />
+          }
+        </PageContentBodyConnector>
+
+        <CalendarLinkModal
+          isOpen={isCalendarLinkModalOpen}
+          onModalClose={this.onGetCalendarLinkModalClose}
+        />
+
+        <CalendarOptionsModal
+          isOpen={isOptionsModalOpen}
+          onModalClose={this.onOptionsModalClose}
+        />
+      </PageContent>
+    );
+  }
+}
+
+CalendarPage.propTypes = {
+  selectedFilterKey: PropTypes.string.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  hasSeries: PropTypes.bool.isRequired,
+  onDaysCountChange: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired
+};
+
+export default CalendarPage;

frontend/src/Calendar/CalendarPageConnector.js

@@ -0,0 +1,36 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setCalendarDaysCount, setCalendarFilter } from 'Store/Actions/calendarActions';
+import createMovieCountSelector from 'Store/Selectors/createMovieCountSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import CalendarPage from './CalendarPage';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.calendar,
+    createMovieCountSelector(),
+    createUISettingsSelector(),
+    (calendar, seriesCount, uiSettings) => {
+      return {
+        selectedFilterKey: calendar.selectedFilterKey,
+        filters: calendar.filters,
+        colorImpairedMode: uiSettings.enableColorImpairedMode,
+        hasSeries: !!seriesCount
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onDaysCountChange(dayCount) {
+      dispatch(setCalendarDaysCount({ dayCount }));
+    },
+
+    onFilterSelect(selectedFilterKey) {
+      dispatch(setCalendarFilter({ selectedFilterKey }));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(CalendarPage);

frontend/src/Calendar/Day/CalendarDay.css

@@ -0,0 +1,25 @@
+.day {
+  flex: 1 0 14.28%;
+  overflow: hidden;
+  min-height: 70px;
+  border-bottom: 1px solid $borderColor;
+  border-left: 1px solid $borderColor;
+}
+
+.isSingleDay {
+  width: 100%;
+}
+
+.dayOfMonth {
+  padding-right: 5px;
+  border-bottom: 1px solid $borderColor;
+  text-align: right;
+}
+
+.isToday {
+  background-color: $calendarTodayBackgroundColor;
+}
+
+.isDifferentMonth {
+  color: $disabledColor;
+}