v3 UI

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,110 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { 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 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>
+        </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,145 @@
+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 });
+  }
+
+  //
+  // 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 = {
+  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,186 @@
+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 EpisodeLanguage from 'Episode/EpisodeLanguage';
+import EpisodeQuality from 'Episode/EpisodeQuality';
+import SeriesTitleLink from 'Series/SeriesTitleLink';
+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 {
+      series,
+      sourceTitle,
+      language,
+      quality,
+      date,
+      protocol,
+      indexer,
+      message,
+      columns,
+      onRemovePress
+    } = this.props;
+
+    return (
+      <TableRow>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'series.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <SeriesTitleLink
+                    titleSlug={series.titleSlug}
+                    title={series.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'sourceTitle') {
+              return (
+                <TableRowCell key={name}>
+                  {sourceTitle}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'language') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.language}
+                >
+                  <EpisodeLanguage
+                    language={language}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.quality}
+                >
+                  <EpisodeQuality
+                    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,
+  series: PropTypes.object.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  language: PropTypes.object.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 createSeriesSelector from 'Store/Selectors/createSeriesSelector';
+import BlacklistRow from './BlacklistRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createSeriesSelector(),
+    (series) => {
+      return {
+        series
+      };
+    }
+  );
+}
+
+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 = 'Sonarr 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/HistoryDetailsAge.js

@@ -0,0 +1,21 @@
+var Handlebars = require('handlebars');
+var FormatHelpers = require('Shared/FormatHelpers');
+
+Handlebars.registerHelper('historyAge', function() {
+  var age = this.age;
+  var unit = FormatHelpers.plural(Math.round(age), 'day');
+  var ageHours = parseFloat(this.ageHours);
+  var ageMinutes = this.ageMinutes ? parseFloat(this.ageMinutes) : null;
+
+  if (age < 2) {
+    age = ageHours.toFixed(1);
+    unit = FormatHelpers.plural(Math.round(ageHours), 'hour');
+  }
+
+  if (age < 2 && ageMinutes) {
+    age = parseFloat(ageMinutes).toFixed(1);
+    unit = FormatHelpers.plural(Math.round(ageMinutes), 'minute');
+  }
+
+  return new Handlebars.SafeString(`<dt>Age (when grabbed):</dt><dd>${age} ${unit}</dd>`);
+});

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,161 @@
+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 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)
+      ) ||
+      (!this.props.isEpisodesFetching && nextProps.isEpisodesFetching)
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      columns,
+      selectedFilterKey,
+      filters,
+      totalRecords,
+      isEpisodesFetching,
+      isEpisodesPopulated,
+      episodesError,
+      onFilterSelect,
+      onFirstPagePress,
+      ...otherProps
+    } = this.props;
+
+    const isFetchingAny = isFetching || isEpisodesFetching;
+    const isAllPopulated = isPopulated && (isEpisodesPopulated || !items.length);
+    const hasError = error || episodesError;
+
+    return (
+      <PageContent title="History">
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="Refresh"
+              iconName={icons.REFRESH}
+              isSpinning={isFetching}
+              onPress={onFirstPagePress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <FilterMenu
+              alignMenu={align.RIGHT}
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={[]}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBodyConnector>
+          {
+            isFetchingAny && !isAllPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetchingAny && 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>
+          }
+
+          {
+            isAllPopulated && !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={isFetchingAny}
+                  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,
+  isEpisodesFetching: PropTypes.bool.isRequired,
+  isEpisodesPopulated: PropTypes.bool.isRequired,
+  episodesError: PropTypes.object,
+  onFilterSelect: PropTypes.func.isRequired,
+  onFirstPagePress: PropTypes.func.isRequired
+};
+
+export default History;

frontend/src/Activity/History/HistoryConnector.js

@@ -0,0 +1,157 @@
+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 withCurrentPage from 'Components/withCurrentPage';
+import * as historyActions from 'Store/Actions/historyActions';
+import { fetchEpisodes, clearEpisodes } from 'Store/Actions/episodeActions';
+import History from './History';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.history,
+    (state) => state.episodes,
+    (history, episodes) => {
+      return {
+        isEpisodesFetching: episodes.isFetching,
+        isEpisodesPopulated: episodes.isPopulated,
+        episodesError: episodes.error,
+        ...history
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...historyActions,
+  fetchEpisodes,
+  clearEpisodes
+};
+
+class HistoryConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchHistory,
+      gotoHistoryFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchHistory();
+    } else {
+      gotoHistoryFirstPage();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (hasDifferentItems(prevProps.items, this.props.items)) {
+      const episodeIds = selectUniqueIds(this.props.items, 'episodeId');
+
+      if (episodeIds.length) {
+        this.props.fetchEpisodes({ episodeIds });
+      } else {
+        this.props.clearEpisodes();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearHistory();
+    this.props.clearEpisodes();
+  }
+
+  //
+  // 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 = {
+  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,
+  fetchEpisodes: PropTypes.func.isRequired,
+  clearEpisodes: 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,263 @@
+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 episodeEntities from 'Episode/episodeEntities';
+import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
+import EpisodeTitleLink from 'Episode/EpisodeTitleLink';
+import EpisodeLanguage from 'Episode/EpisodeLanguage';
+import EpisodeQuality from 'Episode/EpisodeQuality';
+import SeriesTitleLink from 'Series/SeriesTitleLink';
+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 {
+      episodeId,
+      series,
+      episode,
+      language,
+      languageCutoffNotMet,
+      quality,
+      qualityCutoffNotMet,
+      eventType,
+      sourceTitle,
+      date,
+      data,
+      isMarkingAsFailed,
+      columns,
+      shortDateFormat,
+      timeFormat,
+      onMarkAsFailedPress
+    } = this.props;
+
+    if (!episode) {
+      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 === 'series.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <SeriesTitleLink
+                    titleSlug={series.titleSlug}
+                    title={series.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'episode') {
+              return (
+                <TableRowCell key={name}>
+                  <SeasonEpisodeNumber
+                    seasonNumber={episode.seasonNumber}
+                    episodeNumber={episode.episodeNumber}
+                    absoluteEpisodeNumber={episode.absoluteEpisodeNumber}
+                    seriesType={series.seriesType}
+                    alternateTitles={series.alternateTitles}
+                    sceneSeasonNumber={episode.sceneSeasonNumber}
+                    sceneEpisodeNumber={episode.sceneEpisodeNumber}
+                    sceneAbsoluteEpisodeNumber={episode.sceneAbsoluteEpisodeNumber}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'episodeTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeTitleLink
+                    episodeId={episodeId}
+                    episodeEntity={episodeEntities.EPISODES}
+                    seriesId={series.id}
+                    episodeTitle={episode.title}
+                    showOpenSeriesButton={true}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'language') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeLanguage
+                    language={language}
+                    isCutoffMet={languageCutoffNotMet}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeQuality
+                    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 = {
+  episodeId: PropTypes.number,
+  series: PropTypes.object.isRequired,
+  episode: PropTypes.object,
+  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,76 @@
+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 createSeriesSelector from 'Store/Selectors/createSeriesSelector';
+import createEpisodeSelector from 'Store/Selectors/createEpisodeSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import HistoryRow from './HistoryRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createSeriesSelector(),
+    createEpisodeSelector(),
+    createUISettingsSelector(),
+    (series, episode, uiSettings) => {
+      return {
+        series,
+        episode,
+        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,266 @@
+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 selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import { 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 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)
+      ) ||
+      (!this.props.isEpisodesFetching && nextProps.isEpisodesFetching)
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (hasDifferentItems(prevProps.items, this.props.items)) {
+      this.setState({ selectedState: {} });
+      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,
+      isEpisodesFetching,
+      isEpisodesPopulated,
+      episodesError,
+      columns,
+      totalRecords,
+      isGrabbing,
+      isRemoving,
+      isCheckForFinishedDownloadExecuting,
+      onRefreshPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      isConfirmRemoveModalOpen,
+      isPendingSelected
+    } = this.state;
+
+    const isRefreshing = isFetching || isEpisodesFetching || isCheckForFinishedDownloadExecuting;
+    const isAllPopulated = isPopulated && (isEpisodesPopulated || !items.length);
+    const hasError = error || episodesError;
+    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>
+        </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,
+  isEpisodesFetching: PropTypes.bool.isRequired,
+  isEpisodesPopulated: PropTypes.bool.isRequired,
+  episodesError: PropTypes.object,
+  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,186 @@
+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 withCurrentPage from 'Components/withCurrentPage';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import { executeCommand } from 'Store/Actions/commandActions';
+import * as queueActions from 'Store/Actions/queueActions';
+import { fetchEpisodes, clearEpisodes } from 'Store/Actions/episodeActions';
+import * as commandNames from 'Commands/commandNames';
+import Queue from './Queue';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.episodes,
+    (state) => state.queue.options,
+    (state) => state.queue.paged,
+    createCommandExecutingSelector(commandNames.CHECK_FOR_FINISHED_DOWNLOAD),
+    (episodes, options, queue, isCheckForFinishedDownloadExecuting) => {
+      return {
+        isEpisodesFetching: episodes.isFetching,
+        isEpisodesPopulated: episodes.isPopulated,
+        episodesError: episodes.error,
+        isCheckForFinishedDownloadExecuting,
+        ...options,
+        ...queue
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...queueActions,
+  fetchEpisodes,
+  clearEpisodes,
+  executeCommand
+};
+
+class QueueConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchQueue,
+      gotoQueueFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchQueue();
+    } else {
+      gotoQueueFirstPage();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (hasDifferentItems(prevProps.items, this.props.items)) {
+      const episodeIds = selectUniqueIds(this.props.items, 'episodeId');
+
+      if (episodeIds.length) {
+        this.props.fetchEpisodes({ episodeIds });
+      } else {
+        this.props.clearEpisodes();
+      }
+    }
+
+    if (
+      this.props.includeUnknownSeriesItems !==
+      prevProps.includeUnknownSeriesItems
+    ) {
+      this.repopulate();
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearQueue();
+    this.props.clearEpisodes();
+  }
+
+  //
+  // 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,
+  fetchEpisodes: PropTypes.func.isRequired,
+  clearEpisodes: 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,369 @@
+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 EpisodeTitleLink from 'Episode/EpisodeTitleLink';
+import EpisodeQuality from 'Episode/EpisodeQuality';
+import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import SeriesTitleLink from 'Series/SeriesTitleLink';
+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}>
+                  {
+                    series ?
+                      <SeriesTitleLink
+                        titleSlug={series.titleSlug}
+                        title={series.title}
+                      /> :
+                      title
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'episode') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    episode ?
+                      <SeasonEpisodeNumber
+                        seasonNumber={episode.seasonNumber}
+                        episodeNumber={episode.episodeNumber}
+                        absoluteEpisodeNumber={episode.absoluteEpisodeNumber}
+                        seriesType={series.seriesType}
+                        alternateTitles={series.alternateTitles}
+                        sceneSeasonNumber={episode.sceneSeasonNumber}
+                        sceneEpisodeNumber={episode.sceneEpisodeNumber}
+                        sceneAbsoluteEpisodeNumber={episode.sceneAbsoluteEpisodeNumber}
+                        unverifiedSceneNumbering={episode.unverifiedSceneNumbering}
+                      /> :
+                      '-'
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'episode.title') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    episode ?
+                      <EpisodeTitleLink
+                        episodeId={episode.id}
+                        seriesId={series.id}
+                        episodeFileId={episode.episodeFileId}
+                        episodeTitle={episode.title}
+                        showOpenSeriesButton={true}
+                      /> :
+                      '-'
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'episode.airDateUtc') {
+              if (episode) {
+                return (
+                  <RelativeDateCellConnector
+                    key={name}
+                    date={episode.airDateUtc}
+                  />
+                );
+              }
+
+              return (
+                <TableRowCell key={name}>
+                  -
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeQuality
+                    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,
+  episode: PropTypes.object,
+  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,71 @@
+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 createSeriesSelector from 'Store/Selectors/createSeriesSelector';
+import createEpisodeSelector from 'Store/Selectors/createEpisodeSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import QueueRow from './QueueRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createSeriesSelector(),
+    createEpisodeSelector(),
+    createUISettingsSelector(),
+    (series, episode, uiSettings) => {
+      const result = _.pick(uiSettings, [
+        'showRelativeDates',
+        'shortDateFormat',
+        'timeFormat'
+      ]);
+
+      result.series = series;
+      result.episode = episode;
+
+      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 Sonarr from automatically grabbing this episode 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 Sonarr from automatically grabbing this episode 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.includeUnknownSeriesItems,
+    (app, status, includeUnknownSeriesItems) => {
+      const {
+        count,
+        unknownCount
+      } = status.item;
+
+      return {
+        isConnected: app.isConnected,
+        isReconnecting: app.isReconnecting,
+        isPopulated: status.isPopulated,
+        ...status.item,
+        count: includeUnknownSeriesItems ? 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/AddSeries/AddNewSeries/AddNewSeries.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/AddSeries/AddNewSeries/AddNewSeries.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 AddNewSeriesSearchResultConnector from './AddNewSeriesSearchResultConnector';
+import styles from './AddNewSeries.css';
+
+class AddNewSeries 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.onSeriesLookupChange(term);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      term,
+      isFetching
+    } = this.props;
+
+    if (term && term !== prevProps.term) {
+      this.setState({
+        term,
+        isFetching: true
+      });
+      this.props.onSeriesLookupChange(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.onSeriesLookupChange(value);
+      } else {
+        this.props.onClearSeriesLookup();
+      }
+    });
+  }
+
+  onClearSeriesLookupPress = () => {
+    this.setState({ term: '' });
+    this.props.onClearSeriesLookup();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      error,
+      items
+    } = this.props;
+
+    const term = this.state.term;
+    const isFetching = this.state.isFetching;
+
+    return (
+      <PageContent title="Add New Series">
+        <PageContentBodyConnector>
+          <div className={styles.searchContainer}>
+            <div className={styles.searchIconContainer}>
+              <Icon
+                name={icons.SEARCH}
+                size={20}
+              />
+            </div>
+
+            <TextInput
+              className={styles.searchInput}
+              name="seriesLookup"
+              value={term}
+              placeholder="eg. Breaking Bad, tvdb:####"
+              onChange={this.onSearchInputChange}
+            />
+
+            <Button
+              className={styles.clearLookupButton}
+              onPress={this.onClearSeriesLookupPress}
+            >
+              <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 (
+                      <AddNewSeriesSearchResultConnector
+                        key={item.tvdbId}
+                        {...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 TVDB ID of a show. eg. tvdb:71663</div>
+                <div>
+                  <Link to="https://github.com/Sonarr/Sonarr/wiki/FAQ#why-cant-i-add-a-new-series-when-i-know-the-tvdb-id">
+                    Why can't I find my show?
+                  </Link>
+                </div>
+              </div>
+          }
+
+          {
+            !term &&
+              <div className={styles.message}>
+                <div className={styles.helpText}>It's easy to add a new series, just start typing the name the series you want to add.</div>
+                <div>You can also search using TVDB ID of a show. eg. tvdb:71663</div>
+              </div>
+          }
+
+          <div />
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+}
+
+AddNewSeries.propTypes = {
+  term: PropTypes.string,
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isAdding: PropTypes.bool.isRequired,
+  addError: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSeriesLookupChange: PropTypes.func.isRequired,
+  onClearSeriesLookup: PropTypes.func.isRequired
+};
+
+export default AddNewSeries;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesConnector.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 { lookupSeries, clearAddSeries } from 'Store/Actions/addSeriesActions';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import AddNewSeries from './AddNewSeries';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.addSeries,
+    (state) => state.routing.location,
+    (addSeries, location) => {
+      const { params } = parseUrl(location.search);
+
+      return {
+        term: params.term,
+        ...addSeries
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  lookupSeries,
+  clearAddSeries,
+  fetchRootFolders
+};
+
+class AddNewSeriesConnector extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._seriesLookupTimeout = null;
+  }
+
+  componentDidMount() {
+    this.props.fetchRootFolders();
+  }
+
+  componentWillUnmount() {
+    if (this._seriesLookupTimeout) {
+      clearTimeout(this._seriesLookupTimeout);
+    }
+
+    this.props.clearAddSeries();
+  }
+
+  //
+  // Listeners
+
+  onSeriesLookupChange = (term) => {
+    if (this._seriesLookupTimeout) {
+      clearTimeout(this._seriesLookupTimeout);
+    }
+
+    if (term.trim() === '') {
+      this.props.clearAddSeries();
+    } else {
+      this._seriesLookupTimeout = setTimeout(() => {
+        this.props.lookupSeries({ term });
+      }, 300);
+    }
+  }
+
+  onClearSeriesLookup = () => {
+    this.props.clearAddSeries();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      term,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <AddNewSeries
+        term={term}
+        {...otherProps}
+        onSeriesLookupChange={this.onSeriesLookupChange}
+        onClearSeriesLookup={this.onClearSeriesLookup}
+      />
+    );
+  }
+}
+
+AddNewSeriesConnector.propTypes = {
+  term: PropTypes.string,
+  lookupSeries: PropTypes.func.isRequired,
+  clearAddSeries: PropTypes.func.isRequired,
+  fetchRootFolders: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddNewSeriesConnector);

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModal.js

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

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.css

@@ -0,0 +1,74 @@
+.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';
+}
+
+.hideLanguageProfile {
+  composes: group from 'Components/Form/FormGroup.css';
+
+  display: none;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .modalFooter {
+    display: block;
+    text-align: center;
+  }
+
+  .addButton {
+    margin-top: 10px;
+  }
+}

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.js

@@ -0,0 +1,265 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, kinds, inputTypes, tooltipPositions } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+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 Popover from 'Components/Tooltip/Popover';
+import SeriesPoster from 'Series/SeriesPoster';
+import SeriesMonitoringOptionsPopoverContent from 'AddSeries/SeriesMonitoringOptionsPopoverContent';
+import SeriesTypePopoverContent from 'AddSeries/SeriesTypePopoverContent';
+import styles from './AddNewSeriesModalContent.css';
+
+class AddNewSeriesModalContent 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) });
+  }
+
+  onLanguageProfileIdChange = ({ value }) => {
+    this.props.onInputChange({ name: 'languageProfileId', value: parseInt(value) });
+  }
+
+  onAddSeriesPress = () => {
+    this.props.onAddSeriesPress(this.state.searchForMissingEpisodes);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      title,
+      year,
+      overview,
+      images,
+      isAdding,
+      rootFolderPath,
+      monitor,
+      qualityProfileId,
+      languageProfileId,
+      seriesType,
+      seasonFolder,
+      tags,
+      showLanguageProfile,
+      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}>
+                  <SeriesPoster
+                    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
+
+                    <Popover
+                      anchor={
+                        <Icon
+                          className={styles.labelIcon}
+                          name={icons.INFO}
+                        />
+                      }
+                      title="Monitoring Options"
+                      body={<SeriesMonitoringOptionsPopoverContent />}
+                      position={tooltipPositions.RIGHT}
+                    />
+                  </FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.MONITOR_EPISODES_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 className={showLanguageProfile ? undefined : styles.hideLanguageProfile}>
+                  <FormLabel>Language Profile</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.LANGUAGE_PROFILE_SELECT}
+                    name="languageProfileId"
+                    onChange={this.onLanguageProfileIdChange}
+                    {...languageProfileId}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>
+                    Series Type
+
+                    <Popover
+                      anchor={
+                        <Icon
+                          className={styles.labelIcon}
+                          name={icons.INFO}
+                        />
+                      }
+                      title="Series Types"
+                      body={<SeriesTypePopoverContent />}
+                      position={tooltipPositions.RIGHT}
+                    />
+                  </FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.SERIES_TYPE_SELECT}
+                    name="seriesType"
+                    onChange={onInputChange}
+                    {...seriesType}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>Season Folder</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="seasonFolder"
+                    onChange={onInputChange}
+                    {...seasonFolder}
+                  />
+                </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 episodes
+            </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.onAddSeriesPress}
+          >
+            Add {title}
+          </SpinnerButton>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+AddNewSeriesModalContent.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,
+  languageProfileId: PropTypes.object,
+  seriesType: PropTypes.object.isRequired,
+  seasonFolder: PropTypes.object.isRequired,
+  tags: PropTypes.object.isRequired,
+  showLanguageProfile: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onAddSeriesPress: PropTypes.func.isRequired
+};
+
+export default AddNewSeriesModalContent;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContentConnector.js

@@ -0,0 +1,108 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setAddSeriesDefault, addSeries } from 'Store/Actions/addSeriesActions';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import selectSettings from 'Store/Selectors/selectSettings';
+import AddNewSeriesModalContent from './AddNewSeriesModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.addSeries,
+    (state) => state.settings.languageProfiles,
+    createDimensionsSelector(),
+    (addSeriesState, languageProfiles, dimensions) => {
+      const {
+        isAdding,
+        addError,
+        defaults
+      } = addSeriesState;
+
+      const {
+        settings,
+        validationErrors,
+        validationWarnings
+      } = selectSettings(defaults, {}, addError);
+
+      return {
+        isAdding,
+        addError,
+        showLanguageProfile: languageProfiles.items.length > 1,
+        isSmallScreen: dimensions.isSmallScreen,
+        validationErrors,
+        validationWarnings,
+        ...settings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setAddSeriesDefault,
+  addSeries
+};
+
+class AddNewSeriesModalContentConnector extends Component {
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setAddSeriesDefault({ [name]: value });
+  }
+
+  onAddSeriesPress = (searchForMissingEpisodes) => {
+    const {
+      tvdbId,
+      rootFolderPath,
+      monitor,
+      qualityProfileId,
+      languageProfileId,
+      seriesType,
+      seasonFolder,
+      tags
+    } = this.props;
+
+    this.props.addSeries({
+      tvdbId,
+      rootFolderPath: rootFolderPath.value,
+      monitor: monitor.value,
+      qualityProfileId: qualityProfileId.value,
+      languageProfileId: languageProfileId.value,
+      seriesType: seriesType.value,
+      seasonFolder: seasonFolder.value,
+      tags: tags.value,
+      searchForMissingEpisodes
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AddNewSeriesModalContent
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onAddSeriesPress={this.onAddSeriesPress}
+      />
+    );
+  }
+}
+
+AddNewSeriesModalContentConnector.propTypes = {
+  tvdbId: PropTypes.number.isRequired,
+  rootFolderPath: PropTypes.object,
+  monitor: PropTypes.object.isRequired,
+  qualityProfileId: PropTypes.object,
+  languageProfileId: PropTypes.object,
+  seriesType: PropTypes.object.isRequired,
+  seasonFolder: PropTypes.object.isRequired,
+  tags: PropTypes.object.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  setAddSeriesDefault: PropTypes.func.isRequired,
+  addSeries: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddNewSeriesModalContentConnector);

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.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/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js

@@ -0,0 +1,177 @@
+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 SeriesPoster from 'Series/SeriesPoster';
+import AddNewSeriesModal from './AddNewSeriesModal';
+import styles from './AddNewSeriesSearchResult.css';
+
+class AddNewSeriesSearchResult extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isNewAddSeriesModalOpen: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.isExistingSeries && this.props.isExistingSeries) {
+      this.onAddSerisModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onPress = () => {
+    this.setState({ isNewAddSeriesModalOpen: true });
+  }
+
+  onAddSerisModalClose = () => {
+    this.setState({ isNewAddSeriesModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      tvdbId,
+      title,
+      titleSlug,
+      year,
+      network,
+      status,
+      overview,
+      statistics,
+      ratings,
+      images,
+      isExistingSeries,
+      isSmallScreen
+    } = this.props;
+
+    const seasonCount = statistics.seasonCount;
+
+    const {
+      isNewAddSeriesModalOpen
+    } = this.state;
+
+    const linkProps = isExistingSeries ? { to: `/series/${titleSlug}` } : { onPress: this.onPress };
+    let seasons = '1 Season';
+
+    if (seasonCount > 1) {
+      seasons = `${seasonCount} Seasons`;
+    }
+
+    return (
+      <div>
+        <Link
+          className={styles.searchResult}
+          {...linkProps}
+        >
+          {
+            !isSmallScreen &&
+            <SeriesPoster
+              className={styles.poster}
+              images={images}
+              size={250}
+            />
+          }
+
+          <div>
+            <div className={styles.title}>
+              {title}
+
+              {
+                !title.contains(year) && !!year &&
+                <span className={styles.year}>({year})</span>
+              }
+
+              {
+                isExistingSeries &&
+                <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>
+
+              {
+                !!network &&
+                <Label size={sizes.LARGE}>
+                  {network}
+                </Label>
+              }
+
+              {
+                !!seasonCount &&
+                <Label size={sizes.LARGE}>
+                  {seasons}
+                </Label>
+              }
+
+              {
+                status === 'ended' &&
+                <Label
+                  kind={kinds.DANGER}
+                  size={sizes.LARGE}
+                >
+                  Ended
+                </Label>
+              }
+            </div>
+
+            <div className={styles.overview}>
+              {overview}
+            </div>
+          </div>
+        </Link>
+
+        <AddNewSeriesModal
+          isOpen={isNewAddSeriesModalOpen && !isExistingSeries}
+          tvdbId={tvdbId}
+          title={title}
+          year={year}
+          overview={overview}
+          images={images}
+          onModalClose={this.onAddSerisModalClose}
+        />
+      </div>
+    );
+  }
+}
+
+AddNewSeriesSearchResult.propTypes = {
+  tvdbId: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  titleSlug: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
+  network: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  overview: PropTypes.string,
+  statistics: PropTypes.object.isRequired,
+  ratings: PropTypes.object.isRequired,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isExistingSeries: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired
+};
+
+export default AddNewSeriesSearchResult;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResultConnector.js

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

frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js

@@ -0,0 +1,173 @@
+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 ImportSeriesTableConnector from './ImportSeriesTableConnector';
+import ImportSeriesFooterConnector from './ImportSeriesFooterConnector';
+
+class ImportSeries 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,
+      showLanguageProfile
+    } = 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 &&
+              <ImportSeriesTableConnector
+                rootFolderId={rootFolderId}
+                unmappedFolders={unmappedFolders}
+                allSelected={allSelected}
+                allUnselected={allUnselected}
+                selectedState={selectedState}
+                contentBody={contentBody}
+                showLanguageProfile={showLanguageProfile}
+                scrollTop={this.state.scrollTop}
+                onSelectAllChange={this.onSelectAllChange}
+                onSelectedChange={this.onSelectedChange}
+                onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}
+                onScroll={this.onScroll}
+              />
+          }
+        </PageContentBodyConnector>
+
+        {
+          !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length &&
+            <ImportSeriesFooterConnector
+              selectedIds={this.getSelectedIds()}
+              showLanguageProfile={showLanguageProfile}
+              onInputChange={this.onInputChange}
+              onImportPress={this.onImportPress}
+            />
+        }
+      </PageContent>
+    );
+  }
+}
+
+ImportSeries.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),
+  showLanguageProfile: PropTypes.bool.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onImportPress: PropTypes.func.isRequired
+};
+
+ImportSeries.defaultProps = {
+  unmappedFolders: []
+};
+
+export default ImportSeries;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesConnector.js

@@ -0,0 +1,169 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setImportSeriesValue, importSeries, clearImportSeries } from 'Store/Actions/importSeriesActions';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import { setAddSeriesDefault } from 'Store/Actions/addSeriesActions';
+import createRouteMatchShape from 'Helpers/Props/Shapes/createRouteMatchShape';
+import ImportSeries from './ImportSeries';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { match }) => match,
+    (state) => state.rootFolders,
+    (state) => state.addSeries,
+    (state) => state.importSeries,
+    (state) => state.settings.qualityProfiles,
+    (state) => state.settings.languageProfiles,
+    (
+      match,
+      rootFolders,
+      addSeries,
+      importSeriesState,
+      qualityProfiles,
+      languageProfiles
+    ) => {
+      const {
+        isFetching: rootFoldersFetching,
+        isPopulated: rootFoldersPopulated,
+        error: rootFoldersError,
+        items
+      } = rootFolders;
+
+      const rootFolderId = parseInt(match.params.rootFolderId);
+
+      const result = {
+        rootFolderId,
+        rootFoldersFetching,
+        rootFoldersPopulated,
+        rootFoldersError,
+        qualityProfiles: qualityProfiles.items,
+        languageProfiles: languageProfiles.items,
+        showLanguageProfile: languageProfiles.items.length > 1,
+        defaultQualityProfileId: addSeries.defaults.qualityProfileId,
+        defaultLanguageProfileId: addSeries.defaults.languageProfileId
+      };
+
+      if (items.length) {
+        const rootFolder = _.find(items, { id: rootFolderId });
+
+        return {
+          ...result,
+          ...rootFolder,
+          items: importSeriesState.items
+        };
+      }
+
+      return result;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchSetImportSeriesValue: setImportSeriesValue,
+  dispatchImportSeries: importSeries,
+  dispatchClearImportSeries: clearImportSeries,
+  dispatchFetchRootFolders: fetchRootFolders,
+  dispatchSetAddSeriesDefault: setAddSeriesDefault
+};
+
+class ImportSeriesConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      qualityProfiles,
+      languageProfiles,
+      defaultQualityProfileId,
+      defaultLanguageProfileId,
+      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 (
+      !defaultLanguageProfileId ||
+      !languageProfiles.some((p) => p.id === defaultLanguageProfileId)
+    ) {
+      setDefaults = true;
+      setDefaultPayload.languageProfileId = languageProfiles[0].id;
+    }
+
+    if (setDefaults) {
+      dispatchSetAddSeriesDefault(setDefaultPayload);
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.dispatchClearImportSeries();
+  }
+
+  //
+  // Listeners
+
+  onInputChange = (ids, name, value) => {
+    this.props.dispatchSetAddSeriesDefault({ [name]: value });
+
+    ids.forEach((id) => {
+      this.props.dispatchSetImportSeriesValue({
+        id,
+        [name]: value
+      });
+    });
+  }
+
+  onImportPress = (ids) => {
+    this.props.dispatchImportSeries({ ids });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportSeries
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onImportPress={this.onImportPress}
+      />
+    );
+  }
+}
+
+const routeMatchShape = createRouteMatchShape({
+  rootFolderId: PropTypes.string.isRequired
+});
+
+ImportSeriesConnector.propTypes = {
+  match: routeMatchShape.isRequired,
+  rootFoldersPopulated: PropTypes.bool.isRequired,
+  qualityProfiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  languageProfiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  defaultQualityProfileId: PropTypes.number.isRequired,
+  defaultLanguageProfileId: PropTypes.number.isRequired,
+  dispatchSetImportSeriesValue: PropTypes.func.isRequired,
+  dispatchImportSeries: PropTypes.func.isRequired,
+  dispatchClearImportSeries: PropTypes.func.isRequired,
+  dispatchFetchRootFolders: PropTypes.func.isRequired,
+  dispatchSetAddSeriesDefault: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportSeriesConnector);

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooter.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/AddSeries/ImportSeries/Import/ImportSeriesFooter.js

@@ -0,0 +1,291 @@
+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 './ImportSeriesFooter.css';
+
+const MIXED = 'mixed';
+
+class ImportSeriesFooter extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    const {
+      defaultMonitor,
+      defaultQualityProfileId,
+      defaultLanguageProfileId,
+      defaultSeasonFolder,
+      defaultSeriesType
+    } = props;
+
+    this.state = {
+      monitor: defaultMonitor,
+      qualityProfileId: defaultQualityProfileId,
+      languageProfileId: defaultLanguageProfileId,
+      seriesType: defaultSeriesType,
+      seasonFolder: defaultSeasonFolder
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      defaultMonitor,
+      defaultQualityProfileId,
+      defaultLanguageProfileId,
+      defaultSeriesType,
+      defaultSeasonFolder,
+      isMonitorMixed,
+      isQualityProfileIdMixed,
+      isLanguageProfileIdMixed,
+      isSeriesTypeMixed,
+      isSeasonFolderMixed
+    } = this.props;
+
+    const {
+      monitor,
+      qualityProfileId,
+      languageProfileId,
+      seriesType,
+      seasonFolder
+    } = 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 (isLanguageProfileIdMixed && languageProfileId !== MIXED) {
+      newState.languageProfileId = MIXED;
+    } else if (!isLanguageProfileIdMixed && languageProfileId !== defaultLanguageProfileId) {
+      newState.languageProfileId = defaultLanguageProfileId;
+    }
+
+    if (isSeriesTypeMixed && seriesType !== MIXED) {
+      newState.seriesType = MIXED;
+    } else if (!isSeriesTypeMixed && seriesType !== defaultSeriesType) {
+      newState.seriesType = defaultSeriesType;
+    }
+
+    if (isSeasonFolderMixed && seasonFolder != null) {
+      newState.seasonFolder = null;
+    } else if (!isSeasonFolderMixed && seasonFolder !== defaultSeasonFolder) {
+      newState.seasonFolder = defaultSeasonFolder;
+    }
+
+    if (!_.isEmpty(newState)) {
+      this.setState(newState);
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.setState({ [name]: value });
+    this.props.onInputChange({ name, value });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      selectedCount,
+      isImporting,
+      isLookingUpSeries,
+      isMonitorMixed,
+      isQualityProfileIdMixed,
+      isLanguageProfileIdMixed,
+      isSeriesTypeMixed,
+      hasUnsearchedItems,
+      showLanguageProfile,
+      onImportPress,
+      onLookupPress,
+      onCancelLookupPress
+    } = this.props;
+
+    const {
+      monitor,
+      qualityProfileId,
+      languageProfileId,
+      seriesType,
+      seasonFolder
+    } = this.state;
+
+    return (
+      <PageContentFooter>
+        <div className={styles.inputContainer}>
+          <div className={styles.label}>
+            Monitor
+          </div>
+
+          <FormInputGroup
+            type={inputTypes.MONITOR_EPISODES_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>
+
+        {
+          showLanguageProfile &&
+            <div className={styles.inputContainer}>
+              <div className={styles.label}>
+                Language Profile
+              </div>
+
+              <FormInputGroup
+                type={inputTypes.LANGUAGE_PROFILE_SELECT}
+                name="languageProfileId"
+                value={languageProfileId}
+                isDisabled={!selectedCount}
+                includeMixed={isLanguageProfileIdMixed}
+                onChange={this.onInputChange}
+              />
+            </div>
+        }
+
+        <div className={styles.inputContainer}>
+          <div className={styles.label}>
+            Series Type
+          </div>
+
+          <FormInputGroup
+            type={inputTypes.SERIES_TYPE_SELECT}
+            name="seriesType"
+            value={seriesType}
+            isDisabled={!selectedCount}
+            includeMixed={isSeriesTypeMixed}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div className={styles.inputContainer}>
+          <div className={styles.label}>
+            Season Folder
+          </div>
+
+          <CheckInput
+            name="seasonFolder"
+            value={seasonFolder}
+            isDisabled={!selectedCount}
+            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 || isLookingUpSeries}
+              onPress={onImportPress}
+            >
+              Import {selectedCount} Series
+            </SpinnerButton>
+
+            {
+              isLookingUpSeries &&
+                <Button
+                  className={styles.loadingButton}
+                  kind={kinds.WARNING}
+                  onPress={onCancelLookupPress}
+                >
+                  Cancel Processing
+                </Button>
+            }
+
+            {
+              hasUnsearchedItems &&
+                <Button
+                  className={styles.loadingButton}
+                  kind={kinds.SUCCESS}
+                  onPress={onLookupPress}
+                >
+                  Start Processing
+                </Button>
+            }
+
+            {
+              isLookingUpSeries &&
+                <LoadingIndicator
+                  className={styles.loading}
+                  size={24}
+                />
+            }
+
+            {
+              isLookingUpSeries &&
+                'Processing Folders'
+            }
+          </div>
+        </div>
+      </PageContentFooter>
+    );
+  }
+}
+
+ImportSeriesFooter.propTypes = {
+  selectedCount: PropTypes.number.isRequired,
+  isImporting: PropTypes.bool.isRequired,
+  isLookingUpSeries: PropTypes.bool.isRequired,
+  defaultMonitor: PropTypes.string.isRequired,
+  defaultQualityProfileId: PropTypes.number,
+  defaultLanguageProfileId: PropTypes.number,
+  defaultSeriesType: PropTypes.string.isRequired,
+  defaultSeasonFolder: PropTypes.bool.isRequired,
+  isMonitorMixed: PropTypes.bool.isRequired,
+  isQualityProfileIdMixed: PropTypes.bool.isRequired,
+  isLanguageProfileIdMixed: PropTypes.bool.isRequired,
+  isSeriesTypeMixed: PropTypes.bool.isRequired,
+  isSeasonFolderMixed: PropTypes.bool.isRequired,
+  hasUnsearchedItems: PropTypes.bool.isRequired,
+  showLanguageProfile: PropTypes.bool.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onImportPress: PropTypes.func.isRequired,
+  onLookupPress: PropTypes.func.isRequired,
+  onCancelLookupPress: PropTypes.func.isRequired
+};
+
+export default ImportSeriesFooter;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooterConnector.js

@@ -0,0 +1,65 @@
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { lookupUnsearchedSeries, cancelLookupSeries } from 'Store/Actions/importSeriesActions';
+import ImportSeriesFooter from './ImportSeriesFooter';
+
+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.addSeries,
+    (state) => state.importSeries,
+    (state, { selectedIds }) => selectedIds,
+    (addSeries, importSeries, selectedIds) => {
+      const {
+        monitor: defaultMonitor,
+        qualityProfileId: defaultQualityProfileId,
+        languageProfileId: defaultLanguageProfileId,
+        seriesType: defaultSeriesType,
+        seasonFolder: defaultSeasonFolder
+      } = addSeries.defaults;
+
+      const {
+        isLookingUpSeries,
+        isImporting,
+        items
+      } = importSeries;
+
+      const isMonitorMixed = isMixed(items, selectedIds, defaultMonitor, 'monitor');
+      const isQualityProfileIdMixed = isMixed(items, selectedIds, defaultQualityProfileId, 'qualityProfileId');
+      const isLanguageProfileIdMixed = isMixed(items, selectedIds, defaultLanguageProfileId, 'languageProfileId');
+      const isSeriesTypeMixed = isMixed(items, selectedIds, defaultSeriesType, 'seriesType');
+      const isSeasonFolderMixed = isMixed(items, selectedIds, defaultSeasonFolder, 'seasonFolder');
+      const hasUnsearchedItems = !isLookingUpSeries && items.some((item) => !item.isPopulated);
+
+      return {
+        selectedCount: selectedIds.length,
+        isLookingUpSeries,
+        isImporting,
+        defaultMonitor,
+        defaultQualityProfileId,
+        defaultLanguageProfileId,
+        defaultSeriesType,
+        defaultSeasonFolder,
+        isMonitorMixed,
+        isQualityProfileIdMixed,
+        isLanguageProfileIdMixed,
+        isSeriesTypeMixed,
+        isSeasonFolderMixed,
+        hasUnsearchedItems
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  onLookupPress: lookupUnsearchedSeries,
+  onCancelLookupPress: cancelLookupSeries
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportSeriesFooter);

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesHeader.css

@@ -0,0 +1,45 @@
+.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,
+.languageProfile {
+  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 1 250px;
+  min-width: 170px;
+}
+
+.seriesType {
+  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 1 200px;
+  min-width: 120px;
+}
+
+.seasonFolder {
+  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 1 150px;
+  min-width: 120px;
+}
+
+.series {
+  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 1 400px;
+  min-width: 300px;
+}
+
+.detailsIcon {
+  margin-left: 8px;
+}

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesHeader.js

@@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { icons, tooltipPositions } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import Popover from 'Components/Tooltip/Popover';
+import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
+import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
+import VirtualTableSelectAllHeaderCell from 'Components/Table/VirtualTableSelectAllHeaderCell';
+import SeriesMonitoringOptionsPopoverContent from 'AddSeries/SeriesMonitoringOptionsPopoverContent';
+import SeriesTypePopoverContent from 'AddSeries/SeriesTypePopoverContent';
+import styles from './ImportSeriesHeader.css';
+
+function ImportSeriesHeader(props) {
+  const {
+    showLanguageProfile,
+    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
+
+        <Popover
+          anchor={
+            <Icon
+              className={styles.detailsIcon}
+              name={icons.INFO}
+            />
+          }
+          title="Monitoring Options"
+          body={<SeriesMonitoringOptionsPopoverContent />}
+          position={tooltipPositions.RIGHT}
+        />
+      </VirtualTableHeaderCell>
+
+      <VirtualTableHeaderCell
+        className={styles.qualityProfile}
+        name="qualityProfileId"
+      >
+        Quality Profile
+      </VirtualTableHeaderCell>
+
+      {
+        showLanguageProfile &&
+          <VirtualTableHeaderCell
+            className={styles.languageProfile}
+            name="languageProfileId"
+          >
+            Language Profile
+          </VirtualTableHeaderCell>
+      }
+
+      <VirtualTableHeaderCell
+        className={styles.seriesType}
+        name="seriesType"
+      >
+        Series Type
+
+        <Popover
+          anchor={
+            <Icon
+              className={styles.detailsIcon}
+              name={icons.INFO}
+            />
+          }
+          title="Series Type"
+          body={<SeriesTypePopoverContent />}
+          position={tooltipPositions.RIGHT}
+        />
+      </VirtualTableHeaderCell>
+
+      <VirtualTableHeaderCell
+        className={styles.seasonFolder}
+        name="seasonFolder"
+      >
+        Season Folder
+      </VirtualTableHeaderCell>
+
+      <VirtualTableHeaderCell
+        className={styles.series}
+        name="series"
+      >
+        Series
+      </VirtualTableHeaderCell>
+    </VirtualTableHeader>
+  );
+}
+
+ImportSeriesHeader.propTypes = {
+  showLanguageProfile: PropTypes.bool.isRequired,
+  allSelected: PropTypes.bool.isRequired,
+  allUnselected: PropTypes.bool.isRequired,
+  onSelectAllChange: PropTypes.func.isRequired
+};
+
+export default ImportSeriesHeader;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesRow.css

@@ -0,0 +1,52 @@
+.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,
+.languageProfile {
+  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+
+  flex: 0 1 250px;
+  min-width: 170px;
+}
+
+.seriesType {
+  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+
+  flex: 0 1 200px;
+  min-width: 120px;
+}
+
+.seasonFolder {
+  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+
+  flex: 0 1 150px;
+  min-width: 120px;
+}
+
+.series {
+  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+
+  flex: 0 1 400px;
+  min-width: 300px;
+}
+
+.hideLanguageProfile {
+  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+
+  display: none;
+}

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesRow.js

@@ -0,0 +1,120 @@
+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 ImportSeriesSelectSeriesConnector from './SelectSeries/ImportSeriesSelectSeriesConnector';
+import styles from './ImportSeriesRow.css';
+
+function ImportSeriesRow(props) {
+  const {
+    style,
+    id,
+    monitor,
+    qualityProfileId,
+    languageProfileId,
+    seasonFolder,
+    seriesType,
+    selectedSeries,
+    isExistingSeries,
+    showLanguageProfile,
+    isSelected,
+    onSelectedChange,
+    onInputChange
+  } = props;
+
+  return (
+    <VirtualTableRow style={style}>
+      <VirtualTableSelectCell
+        inputClassName={styles.selectInput}
+        id={id}
+        isSelected={isSelected}
+        isDisabled={!selectedSeries || isExistingSeries}
+        onSelectedChange={onSelectedChange}
+      />
+
+      <VirtualTableRowCell className={styles.folder}>
+        {id}
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.monitor}>
+        <FormInputGroup
+          type={inputTypes.MONITOR_EPISODES_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={showLanguageProfile ? styles.languageProfile : styles.hideLanguageProfile}
+      >
+        <FormInputGroup
+          type={inputTypes.LANGUAGE_PROFILE_SELECT}
+          name="languageProfileId"
+          value={languageProfileId}
+          onChange={onInputChange}
+        />
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.seriesType}>
+        <FormInputGroup
+          type={inputTypes.SERIES_TYPE_SELECT}
+          name="seriesType"
+          value={seriesType}
+          onChange={onInputChange}
+        />
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.seasonFolder}>
+        <FormInputGroup
+          type={inputTypes.CHECK}
+          name="seasonFolder"
+          value={seasonFolder}
+          onChange={onInputChange}
+        />
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.series}>
+        <ImportSeriesSelectSeriesConnector
+          id={id}
+          isExistingSeries={isExistingSeries}
+        />
+      </VirtualTableRowCell>
+    </VirtualTableRow>
+  );
+}
+
+ImportSeriesRow.propTypes = {
+  style: PropTypes.object.isRequired,
+  id: PropTypes.string.isRequired,
+  monitor: PropTypes.string.isRequired,
+  qualityProfileId: PropTypes.number.isRequired,
+  languageProfileId: PropTypes.number.isRequired,
+  seriesType: PropTypes.string.isRequired,
+  seasonFolder: PropTypes.bool.isRequired,
+  selectedSeries: PropTypes.object,
+  isExistingSeries: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  showLanguageProfile: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
+  onSelectedChange: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired
+};
+
+ImportSeriesRow.defaultsProps = {
+  items: []
+};
+
+export default ImportSeriesRow;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesRowConnector.js

@@ -0,0 +1,89 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setImportSeriesValue } from 'Store/Actions/importSeriesActions';
+import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
+import ImportSeriesRow from './ImportSeriesRow';
+
+function createImportSeriesItemSelector() {
+  return createSelector(
+    (state, { id }) => id,
+    (state) => state.importSeries.items,
+    (id, items) => {
+      return _.find(items, { id }) || {};
+    }
+  );
+}
+
+function createMapStateToProps() {
+  return createSelector(
+    createImportSeriesItemSelector(),
+    createAllSeriesSelector(),
+    (item, series) => {
+      const selectedSeries = item && item.selectedSeries;
+      const isExistingSeries = !!selectedSeries && _.some(series, { tvdbId: selectedSeries.tvdbId });
+
+      return {
+        ...item,
+        isExistingSeries
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setImportSeriesValue
+};
+
+class ImportSeriesRowConnector extends Component {
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setImportSeriesValue({
+      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,
+      seriesType,
+      seasonFolder
+    } = this.props;
+
+    if (!items || !monitor || !seriesType || !seasonFolder == null) {
+      return null;
+    }
+
+    return (
+      <ImportSeriesRow
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onSeriesSelect={this.onSeriesSelect}
+      />
+    );
+  }
+}
+
+ImportSeriesRowConnector.propTypes = {
+  rootFolderId: PropTypes.number.isRequired,
+  id: PropTypes.string.isRequired,
+  monitor: PropTypes.string,
+  seriesType: PropTypes.string,
+  seasonFolder: PropTypes.bool,
+  items: PropTypes.arrayOf(PropTypes.object),
+  setImportSeriesValue: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportSeriesRowConnector);

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesSelected.css

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

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesTable.js

@@ -0,0 +1,197 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import VirtualTable from 'Components/Table/VirtualTable';
+import ImportSeriesHeader from './ImportSeriesHeader';
+import ImportSeriesRowConnector from './ImportSeriesRowConnector';
+
+class ImportSeriesTable extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      unmappedFolders,
+      defaultMonitor,
+      defaultQualityProfileId,
+      defaultLanguageProfileId,
+      defaultSeriesType,
+      defaultSeasonFolder,
+      onSeriesLookup,
+      onSetImportSeriesValue
+    } = this.props;
+
+    const values = {
+      monitor: defaultMonitor,
+      qualityProfileId: defaultQualityProfileId,
+      languageProfileId: defaultLanguageProfileId,
+      seriesType: defaultSeriesType,
+      seasonFolder: defaultSeasonFolder
+    };
+
+    unmappedFolders.forEach((unmappedFolder) => {
+      const id = unmappedFolder.name;
+
+      onSeriesLookup(id, unmappedFolder.path);
+
+      onSetImportSeriesValue({
+        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 selectedSeries = item.selectedSeries;
+      const isSelected = selectedState[id];
+
+      const isExistingSeries = !!selectedSeries &&
+        _.some(prevProps.allSeries, { tvdbId: selectedSeries.tvdbId });
+
+      // Props doesn't have a selected series or
+      // the selected series is an existing series.
+      if ((!selectedSeries && prevItem.selectedSeries) || (isExistingSeries && !prevItem.selectedSeries)) {
+        onSelectedChange({ id, value: false });
+
+        return;
+      }
+
+      // State is selected, but a series isn't selected or
+      // the selected series is an existing series.
+      if (isSelected && (!selectedSeries || isExistingSeries)) {
+        onSelectedChange({ id, value: false });
+
+        return;
+      }
+
+      // A series is being selected that wasn't previously selected.
+      if (selectedSeries && selectedSeries !== prevItem.selectedSeries) {
+        onSelectedChange({ id, value: true });
+
+        return;
+      }
+    });
+  }
+
+  //
+  // Control
+
+  rowRenderer = ({ key, rowIndex, style }) => {
+    const {
+      rootFolderId,
+      items,
+      selectedState,
+      showLanguageProfile,
+      onSelectedChange
+    } = this.props;
+
+    const item = items[rowIndex];
+
+    return (
+      <ImportSeriesRowConnector
+        key={key}
+        style={style}
+        rootFolderId={rootFolderId}
+        showLanguageProfile={showLanguageProfile}
+        isSelected={selectedState[item.id]}
+        onSelectedChange={onSelectedChange}
+        id={item.id}
+      />
+    );
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      allSelected,
+      allUnselected,
+      isSmallScreen,
+      contentBody,
+      showLanguageProfile,
+      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={
+          <ImportSeriesHeader
+            showLanguageProfile={showLanguageProfile}
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            onSelectAllChange={onSelectAllChange}
+          />
+        }
+        selectedState={selectedState}
+        onScroll={onScroll}
+      />
+    );
+  }
+}
+
+ImportSeriesTable.propTypes = {
+  rootFolderId: PropTypes.number.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object),
+  unmappedFolders: PropTypes.arrayOf(PropTypes.object),
+  defaultMonitor: PropTypes.string.isRequired,
+  defaultQualityProfileId: PropTypes.number,
+  defaultLanguageProfileId: PropTypes.number,
+  defaultSeriesType: PropTypes.string.isRequired,
+  defaultSeasonFolder: PropTypes.bool.isRequired,
+  allSelected: PropTypes.bool.isRequired,
+  allUnselected: PropTypes.bool.isRequired,
+  selectedState: PropTypes.object.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  allSeries: PropTypes.arrayOf(PropTypes.object),
+  contentBody: PropTypes.object.isRequired,
+  showLanguageProfile: PropTypes.bool.isRequired,
+  scrollTop: PropTypes.number.isRequired,
+  onSelectAllChange: PropTypes.func.isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onRemoveSelectedStateItem: PropTypes.func.isRequired,
+  onSeriesLookup: PropTypes.func.isRequired,
+  onSetImportSeriesValue: PropTypes.func.isRequired,
+  onScroll: PropTypes.func.isRequired
+};
+
+export default ImportSeriesTable;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesTableConnector.js

@@ -0,0 +1,44 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { queueLookupSeries, setImportSeriesValue } from 'Store/Actions/importSeriesActions';
+import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
+import ImportSeriesTable from './ImportSeriesTable';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.addSeries,
+    (state) => state.importSeries,
+    (state) => state.app.dimensions,
+    createAllSeriesSelector(),
+    (addSeries, importSeries, dimensions, allSeries) => {
+      return {
+        defaultMonitor: addSeries.defaults.monitor,
+        defaultQualityProfileId: addSeries.defaults.qualityProfileId,
+        defaultLanguageProfileId: addSeries.defaults.languageProfileId,
+        defaultSeriesType: addSeries.defaults.seriesType,
+        defaultSeasonFolder: addSeries.defaults.seasonFolder,
+        items: importSeries.items,
+        isSmallScreen: dimensions.isSmallScreen,
+        allSeries
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onSeriesLookup(name, path) {
+      dispatch(queueLookupSeries({
+        name,
+        path,
+        term: name
+      }));
+    },
+
+    onSetImportSeriesValue(values) {
+      dispatch(setImportSeriesValue(values));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(ImportSeriesTable);

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css

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

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.js

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

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResultConnector.js

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

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.css

@@ -0,0 +1,81 @@
+.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 {
+  flex: 1 0 auto;
+  margin-left: 5px;
+  text-align: right;
+}
+
+.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;
+}
+
+.results {
+  @add-mixin scrollbar;
+  @add-mixin scrollbarTrack;
+  @add-mixin scrollbarThumb;
+
+  overflow-x: hidden;
+  overflow-y: scroll;
+  max-height: 165px;
+}

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.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 ImportSeriesSearchResultConnector from './ImportSeriesSearchResultConnector';
+import ImportSeriesTitle from './ImportSeriesTitle';
+import styles from './ImportSeriesSelectSeries.css';
+
+const tetherOptions = {
+  skipMoveElement: true,
+  constraints: [
+    {
+      to: 'window',
+      attachment: 'together',
+      pin: true
+    }
+  ],
+  attachment: 'top center',
+  targetAttachment: 'bottom center'
+};
+
+class ImportSeriesSelectSeries extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._seriesLookupTimeout = 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._seriesLookupTimeout) {
+      clearTimeout(this._seriesLookupTimeout);
+    }
+
+    this.setState({ term: value }, () => {
+      this._seriesLookupTimeout = setTimeout(() => {
+        this.props.onSearchInputChange(value);
+      }, 200);
+    });
+  }
+
+  onRefreshPress = () => {
+    this.props.onSearchInputChange(this.state.term);
+  }
+
+  onSeriesSelect = (tvdbId) => {
+    this.setState({ isOpen: false });
+
+    this.props.onSeriesSelect(tvdbId);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      selectedSeries,
+      isExistingSeries,
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      isQueued,
+      isLookingUpSeries
+    } = 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}
+        >
+          {
+            isLookingUpSeries && isQueued && !isPopulated &&
+              <LoadingIndicator
+                className={styles.loading}
+                size={20}
+              />
+          }
+
+          {
+            isPopulated && selectedSeries && isExistingSeries &&
+              <Icon
+                className={styles.warningIcon}
+                name={icons.WARNING}
+                kind={kinds.WARNING}
+              />
+          }
+
+          {
+            isPopulated && selectedSeries &&
+              <ImportSeriesTitle
+                title={selectedSeries.title}
+                year={selectedSeries.year}
+                network={selectedSeries.network}
+                isExistingSeries={isExistingSeries}
+              />
+          }
+
+          {
+            isPopulated && !selectedSeries &&
+              <div className={styles.noMatches}>
+                <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 (
+                        <ImportSeriesSearchResultConnector
+                          key={item.tvdbId}
+                          tvdbId={item.tvdbId}
+                          title={item.title}
+                          year={item.year}
+                          network={item.network}
+                          onPress={this.onSeriesSelect}
+                        />
+                      );
+                    })
+                  }
+                </div>
+              </div>
+            </div>
+        }
+      </TetherComponent>
+    );
+  }
+}
+
+ImportSeriesSelectSeries.propTypes = {
+  id: PropTypes.string.isRequired,
+  selectedSeries: PropTypes.object,
+  isExistingSeries: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isQueued: PropTypes.bool.isRequired,
+  isLookingUpSeries: PropTypes.bool.isRequired,
+  onSearchInputChange: PropTypes.func.isRequired,
+  onSeriesSelect: PropTypes.func.isRequired
+};
+
+ImportSeriesSelectSeries.defaultProps = {
+  isFetching: true,
+  isPopulated: false,
+  items: [],
+  isQueued: true
+};
+
+export default ImportSeriesSelectSeries;

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeriesConnector.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 { queueLookupSeries, setImportSeriesValue } from 'Store/Actions/importSeriesActions';
+import createImportSeriesItemSelector from 'Store/Selectors/createImportSeriesItemSelector';
+import ImportSeriesSelectSeries from './ImportSeriesSelectSeries';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.importSeries.isLookingUpSeries,
+    createImportSeriesItemSelector(),
+    (isLookingUpSeries, item) => {
+      return {
+        isLookingUpSeries,
+        ...item
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  queueLookupSeries,
+  setImportSeriesValue
+};
+
+class ImportSeriesSelectSeriesConnector extends Component {
+
+  //
+  // Listeners
+
+  onSearchInputChange = (term) => {
+    this.props.queueLookupSeries({
+      name: this.props.id,
+      term,
+      topOfQueue: true
+    });
+  }
+
+  onSeriesSelect = (tvdbId) => {
+    const {
+      id,
+      items
+    } = this.props;
+
+    this.props.setImportSeriesValue({
+      id,
+      selectedSeries: _.find(items, { tvdbId })
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportSeriesSelectSeries
+        {...this.props}
+        onSearchInputChange={this.onSearchInputChange}
+        onSeriesSelect={this.onSeriesSelect}
+      />
+    );
+  }
+}
+
+ImportSeriesSelectSeriesConnector.propTypes = {
+  id: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object),
+  selectedSeries: PropTypes.object,
+  isSelected: PropTypes.bool,
+  queueLookupSeries: PropTypes.func.isRequired,
+  setImportSeriesValue: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportSeriesSelectSeriesConnector);

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesTitle.css

@@ -0,0 +1,20 @@
+.titleContainer {
+  display: flex;
+  align-items: center;
+  flex: 0 1 auto;
+  overflow: hidden;
+}
+
+.title {
+  @add-mixin truncate;
+}
+
+.year {
+  margin-right: 5px;
+  margin-left: 5px;
+  color: $disabledColor;
+}
+
+.existing {
+  margin-left: 5px;
+}

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesTitle.js

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

frontend/src/AddSeries/ImportSeries/ImportSeries.js

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

frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesRootFolderRow.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/AddSeries/ImportSeries/SelectFolder/ImportSeriesRootFolderRow.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 './ImportSeriesRootFolderRow.css';
+
+function ImportSeriesRootFolderRow(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>
+  );
+}
+
+ImportSeriesRootFolderRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  path: PropTypes.string.isRequired,
+  freeSpace: PropTypes.number.isRequired,
+  unmappedFolders: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onDeletePress: PropTypes.func.isRequired
+};
+
+ImportSeriesRootFolderRow.defaultProps = {
+  freeSpace: 0,
+  unmappedFolders: []
+};
+
+export default ImportSeriesRootFolderRow;

frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesRootFolderRowConnector.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 ImportSeriesRootFolderRow from './ImportSeriesRootFolderRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    () => {
+      return {
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  deleteRootFolder
+};
+
+class ImportSeriesRootFolderRowConnector extends Component {
+
+  //
+  // Listeners
+
+  onDeletePress = () => {
+    this.props.deleteRootFolder({ id: this.props.id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportSeriesRootFolderRow
+        {...this.props}
+        onDeletePress={this.onDeletePress}
+      />
+    );
+  }
+}
+
+ImportSeriesRootFolderRowConnector.propTypes = {
+  id: PropTypes.number.isRequired,
+  deleteRootFolder: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportSeriesRootFolderRowConnector);

frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.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/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.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 ImportSeriesRootFolderRowConnector from './ImportSeriesRootFolderRowConnector';
+import styles from './ImportSeriesSelectFolder.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 ImportSeriesSelectFolder 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 series 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 Sonarr to the folder containing all of your tv shows not a specific one. eg. <span className={styles.code}>"{isWindows ? 'C:\\tv shows' : '/tv shows'}"</span> and not <span className={styles.code}>"{isWindows ? 'C:\\tv shows\\the simpsons' : '/tv shows/the simpsons'}"</span>
+                    </li>
+                  </ul>
+                </div>
+
+                {
+                  items.length > 0 ?
+                    <div className={styles.recentFolders}>
+                      <FieldSet legend="Recent Folders">
+                        <Table
+                          columns={rootFolderColumns}
+                        >
+                          <TableBody>
+                            {
+                              items.map((rootFolder) => {
+                                return (
+                                  <ImportSeriesRootFolderRowConnector
+                                    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>
+    );
+  }
+}
+
+ImportSeriesSelectFolder.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 ImportSeriesSelectFolder;

frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolderConnector.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 ImportSeriesSelectFolder from './ImportSeriesSelectFolder';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.rootFolders,
+    createSystemStatusSelector(),
+    (rootFolders, systemStatus) => {
+      return {
+        ...rootFolders,
+        isWindows: systemStatus.isWindows
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchRootFolders,
+  addRootFolder,
+  deleteRootFolder,
+  push
+};
+
+class ImportSeriesSelectFolderConnector 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.Sonarr.urlBase}/add/import/${newRootFolders[0].id}`);
+      }
+    }
+  }
+
+  //
+  // Listeners
+
+  onNewRootFolderSelect = (path) => {
+    this.props.addRootFolder({ path });
+  }
+
+  onDeleteRootFolderPress = (id) => {
+    this.props.deleteRootFolder({ id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportSeriesSelectFolder
+        {...this.props}
+        onNewRootFolderSelect={this.onNewRootFolderSelect}
+        onDeleteRootFolderPress={this.onDeleteRootFolderPress}
+      />
+    );
+  }
+}
+
+ImportSeriesSelectFolderConnector.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)(ImportSeriesSelectFolderConnector);

frontend/src/AddSeries/SeriesMonitoringOptionsPopoverContent.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+
+function SeriesMonitoringOptionsPopoverContent() {
+  return (
+    <DescriptionList>
+      <DescriptionListItem
+        title="All Episodes"
+        data="Monitor all episodes except specials"
+      />
+
+      <DescriptionListItem
+        title="Future Episodes"
+        data="Monitor episodes that have not aired yet"
+      />
+
+      <DescriptionListItem
+        title="Missing Episodes"
+        data="Monitor episodes that do not have files or have not aired yet"
+      />
+
+      <DescriptionListItem
+        title="Existing Episodes"
+        data="Monitor episodes that have files or have not aired yet"
+      />
+
+      <DescriptionListItem
+        title="First Season"
+        data="Monitor all episodes of the first season. All other seasons will be ignored"
+      />
+
+      <DescriptionListItem
+        title="Latest Season"
+        data="Monitor all episodes of the latest season and future seasons"
+      />
+
+      <DescriptionListItem
+        title="None"
+        data="No episodes will be monitored"
+      />
+    </DescriptionList>
+  );
+}
+
+export default SeriesMonitoringOptionsPopoverContent;

frontend/src/AddSeries/SeriesTypePopoverContent.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+
+function SeriesTypePopoverContent() {
+  return (
+    <DescriptionList>
+      <DescriptionListItem
+        title="Anime"
+        data="Episodes released using an absolute episode number"
+      />
+
+      <DescriptionListItem
+        title="Daily"
+        data="Episodes released daily or less frequently that use year-month-day (2017-05-25)"
+      />
+
+      <DescriptionListItem
+        title="Standard"
+        data="Episodes released with SxxEyy pattern"
+      />
+    </DescriptionList>
+  );
+}
+
+export default SeriesTypePopoverContent;

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="Sonarr">
+      <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,248 @@
+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 SeriesIndexConnector from 'Series/Index/SeriesIndexConnector';
+import AddNewSeriesConnector from 'AddSeries/AddNewSeries/AddNewSeriesConnector';
+import ImportSeries from 'AddSeries/ImportSeries/ImportSeries';
+import SeriesEditorConnector from 'Series/Editor/SeriesEditorConnector';
+import SeasonPassConnector from 'SeasonPass/SeasonPassConnector';
+import SeriesDetailsPageConnector from 'Series/Details/SeriesDetailsPageConnector';
+import CalendarPageConnector from 'Calendar/CalendarPageConnector';
+import HistoryConnector from 'Activity/History/HistoryConnector';
+import QueueConnector from 'Activity/Queue/QueueConnector';
+import BlacklistConnector from 'Activity/Blacklist/BlacklistConnector';
+import MissingConnector from 'Wanted/Missing/MissingConnector';
+import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
+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 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>
+      {/*
+        Series
+      */}
+
+      <Route
+        exact={true}
+        path="/"
+        component={SeriesIndexConnector}
+      />
+
+      {
+        window.Sonarr.urlBase &&
+        <Route
+          exact={true}
+          path="/"
+          addUrlBase={false}
+          render={() => {
+            return (
+              <Redirect
+                to={getPathWithUrlBase('/')}
+                component={app}
+              />
+            );
+          }}
+        />
+      }
+
+      <Route
+        path="/add/new"
+        component={AddNewSeriesConnector}
+      />
+
+      <Route
+        path="/add/import"
+        component={ImportSeries}
+      />
+
+      <Route
+        path="/serieseditor"
+        component={SeriesEditorConnector}
+      />
+
+      <Route
+        path="/seasonpass"
+        component={SeasonPassConnector}
+      />
+
+      <Route
+        path="/series/:titleSlug"
+        component={SeriesDetailsPageConnector}
+      />
+
+      {/*
+        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}
+      />
+
+      {/*
+        Wanted
+      */}
+
+      <Route
+        path="/wanted/missing"
+        component={MissingConnector}
+      />
+
+      <Route
+        path="/wanted/cutoffunmet"
+        component={CutoffUnmetConnector}
+      />
+
+      {/*
+        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/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>
+        Sonarr Updated
+      </ModalHeader>
+
+      <ModalBody>
+        <div>
+          Version <span className={styles.version}>{version}</span> of Sonarr has been installed, in order to get the latest changes you'll need to reload Sonarr.
+        </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.Sonarr.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/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>
+            Sonarr has lost it's connection to the backend and will need to be reloaded to restore functionality.
+          </div>
+
+          <div className={styles.automatic}>
+            Sonarr 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: $defaultFontSize;
+
+  &: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,253 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import formatTime from 'Utilities/Date/formatTime';
+import padNumber from 'Utilities/Number/padNumber';
+import { icons, kinds } from 'Helpers/Props';
+import getStatusStyle from 'Calendar/getStatusStyle';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import episodeEntities from 'Episode/episodeEntities';
+import EpisodeDetailsModal from 'Episode/EpisodeDetailsModal';
+import CalendarEventQueueDetails from 'Calendar/Events/CalendarEventQueueDetails';
+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 {
+      id,
+      series,
+      episodeFile,
+      title,
+      seasonNumber,
+      episodeNumber,
+      absoluteEpisodeNumber,
+      airDateUtc,
+      monitored,
+      hasFile,
+      grabbed,
+      queueItem,
+      showDate,
+      showEpisodeInformation,
+      showFinaleIcon,
+      showSpecialIcon,
+      showCutoffUnmetIcon,
+      timeFormat,
+      longDateFormat,
+      colorImpairedMode
+    } = this.props;
+
+    const startTime = moment(airDateUtc);
+    const endTime = moment(airDateUtc).add(series.runtime, 'minutes');
+    const downloading = !!(queueItem || grabbed);
+    const isMonitored = series.monitored && monitored;
+    const statusStyle = getStatusStyle(hasFile, downloading, startTime, endTime, isMonitored);
+    const missingAbsoluteNumber = series.seriesType === 'anime' && seasonNumber > 0 && !absoluteEpisodeNumber;
+    const season = series.seasons.find((s) => s.seasonNumber === seasonNumber);
+    const seasonStatistics = season.statistics || {};
+
+    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.time}>
+              {formatTime(airDateUtc, timeFormat)} - {formatTime(endTime.toISOString(), timeFormat, { includeMinuteZero: true })}
+            </div>
+
+            <div className={styles.seriesTitle}>
+              {series.title}
+            </div>
+
+            {
+              showEpisodeInformation &&
+                <div className={styles.seasonEpisodeNumber}>
+                  {seasonNumber}x{padNumber(episodeNumber, 2)}
+
+                  {
+                    series.seriesType === 'anime' && absoluteEpisodeNumber &&
+                      <span className={styles.absoluteEpisodeNumber}>({absoluteEpisodeNumber})</span>
+                  }
+
+                  <div className={styles.episodeSeparator}> - </div>
+                </div>
+            }
+
+            <div className={styles.episodeTitle}>
+              {
+                showEpisodeInformation &&
+                title
+              }
+            </div>
+
+            {
+              missingAbsoluteNumber &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.WARNING}
+                  title="Episode does not have an absolute episode number"
+                />
+            }
+
+            {
+              !!queueItem &&
+                <span className={styles.statusIcon}>
+                  <CalendarEventQueueDetails
+                    seriesType={series.seriesType}
+                    seasonNumber={seasonNumber}
+                    absoluteEpisodeNumber={absoluteEpisodeNumber}
+                    {...queueItem}
+                  />
+                </span>
+            }
+
+            {
+              !queueItem && grabbed &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.DOWNLOADING}
+                  title="Episode is downloading"
+                />
+            }
+
+            {
+              showCutoffUnmetIcon &&
+              !!episodeFile &&
+              episodeFile.qualityCutoffNotMet &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.EPISODE_FILE}
+                  kind={kinds.WARNING}
+                  title="Quality cutoff has not been met"
+                />
+            }
+
+            {
+              showCutoffUnmetIcon &&
+              !!episodeFile &&
+              episodeFile.languageCutoffNotMet &&
+              !episodeFile.qualityCutoffNotMet &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.EPISODE_FILE}
+                  kind={kinds.WARNING}
+                  title="Language cutoff has not been met"
+                />
+            }
+
+            {
+              episodeNumber === 1 && seasonNumber > 0 &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.INFO}
+                  kind={kinds.INFO}
+                  title={seasonNumber === 1 ? 'Series Premiere' : 'Season Premiere'}
+                />
+            }
+
+            {
+              showFinaleIcon &&
+              episodeNumber !== 1 &&
+              seasonNumber > 0 &&
+              episodeNumber === seasonStatistics.totalEpisodeCount &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.INFO}
+                  kind={kinds.WARNING}
+                  title={series.status === 'ended' ? 'Series finale' : 'Season finale'}
+                />
+            }
+
+            {
+              showSpecialIcon &&
+              (episodeNumber === 0 || seasonNumber === 0) &&
+                <Icon
+                  className={styles.statusIcon}
+                  name={icons.INFO}
+                  kind={kinds.PINK}
+                  title="Special"
+                />
+            }
+          </div>
+        </Link>
+
+        <EpisodeDetailsModal
+          isOpen={this.state.isDetailsModalOpen}
+          episodeId={id}
+          episodeEntity={episodeEntities.CALENDAR}
+          seriesId={series.id}
+          episodeTitle={title}
+          showOpenSeriesButton={true}
+          onModalClose={this.onDetailsModalClose}
+        />
+      </div>
+    );
+  }
+}
+
+AgendaEvent.propTypes = {
+  id: PropTypes.number.isRequired,
+  series: PropTypes.object.isRequired,
+  episodeFile: PropTypes.object,
+  title: PropTypes.string.isRequired,
+  seasonNumber: PropTypes.number.isRequired,
+  episodeNumber: PropTypes.number.isRequired,
+  absoluteEpisodeNumber: PropTypes.number,
+  airDateUtc: PropTypes.string.isRequired,
+  monitored: PropTypes.bool.isRequired,
+  hasFile: PropTypes.bool.isRequired,
+  grabbed: PropTypes.bool,
+  queueItem: PropTypes.object,
+  showDate: PropTypes.bool.isRequired,
+  showEpisodeInformation: PropTypes.bool.isRequired,
+  showFinaleIcon: PropTypes.bool.isRequired,
+  showSpecialIcon: 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 createEpisodeFileSelector from 'Store/Selectors/createEpisodeFileSelector';
+import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
+import createQueueItemSelector from 'Store/Selectors/createQueueItemSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import AgendaEvent from './AgendaEvent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.calendar.options,
+    createSeriesSelector(),
+    createEpisodeFileSelector(),
+    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,195 @@
+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 { fetchEpisodeFiles, clearEpisodeFiles } from 'Store/Actions/episodeFileActions';
+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_SERIES),
+    (calendar, firstDayOfWeek, isRefreshingSeries) => {
+      return {
+        ...calendar,
+        isRefreshingSeries,
+        firstDayOfWeek
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...calendarActions,
+  fetchEpisodeFiles,
+  clearEpisodeFiles,
+  fetchQueueDetails,
+  clearQueueDetails
+};
+
+class CalendarConnector extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.updateTimeoutId = null;
+  }
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchCalendar,
+      gotoCalendarToday
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchCalendar();
+    } else {
+      gotoCalendarToday();
+    }
+
+    this.scheduleUpdate();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      time,
+      view,
+      isRefreshingSeries,
+      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.fetchEpisodeFiles({ episodeFileIds });
+      }
+    }
+
+    if (prevProps.time !== time) {
+      this.scheduleUpdate();
+    }
+
+    if (prevProps.firstDayOfWeek !== firstDayOfWeek) {
+      this.props.fetchCalendar({ time, view });
+    }
+
+    if (prevProps.isRefreshingSeries && !isRefreshingSeries) {
+      this.props.fetchCalendar({ time, view });
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearCalendar();
+    this.props.clearQueueDetails();
+    this.props.clearEpisodeFiles();
+    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,
+  isRefreshingSeries: 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,
+  fetchEpisodeFiles: PropTypes.func.isRequired,
+  clearEpisodeFiles: 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,178 @@
+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 NoSeries from 'Series/NoSeries';
+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 });
+  }
+
+  onSearchMissingPress = () => {
+    const {
+      missingEpisodeIds,
+      onSearchMissingPress
+    } = this.props;
+
+    onSearchMissingPress(missingEpisodeIds);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      selectedFilterKey,
+      filters,
+      hasSeries,
+      missingEpisodeIds,
+      isSearchingForMissing,
+      useCurrentPage,
+      onFilterSelect
+    } = this.props;
+
+    const {
+      isCalendarLinkModalOpen,
+      isOptionsModalOpen
+    } = this.state;
+
+    const isMeasured = this.state.width > 0;
+    const PageComponent = hasSeries ? CalendarConnector : NoSeries;
+
+    return (
+      <PageContent title="Calendar">
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="iCal Link"
+              iconName={icons.CALENDAR}
+              onPress={this.onGetCalendarLinkPress}
+            />
+
+            <PageToolbarButton
+              label="Search for Missing"
+              iconName={icons.SEARCH}
+              isDisabled={!missingEpisodeIds.length}
+              isSpinning={isSearchingForMissing}
+              onPress={this.onSearchMissingPress}
+            />
+          </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}
+          >
+            {
+              isMeasured ?
+                <PageComponent
+                  useCurrentPage={useCurrentPage}
+                /> :
+                <div />
+            }
+          </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,
+  missingEpisodeIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+  isSearchingForMissing: PropTypes.bool.isRequired,
+  useCurrentPage: PropTypes.bool.isRequired,
+  onSearchMissingPress: PropTypes.func.isRequired,
+  onDaysCountChange: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired
+};
+
+export default CalendarPage;