New: Project Aphrodite

frontend/src/InteractiveSearch/InteractiveSearch.css

@@ -0,0 +1,9 @@
+.filterMenuContainer {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+
+.filteredMessage {
+  margin-top: 10px;
+}

frontend/src/InteractiveSearch/InteractiveSearch.js

@@ -0,0 +1,192 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { align, icons, sortDirections } from 'Helpers/Props';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Icon from 'Components/Icon';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import PageMenuButton from 'Components/Menu/PageMenuButton';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import InteractiveSearchFilterModalConnector from './InteractiveSearchFilterModalConnector';
+import InteractiveSearchRow from './InteractiveSearchRow';
+import styles from './InteractiveSearch.css';
+
+const columns = [
+  {
+    name: 'protocol',
+    label: 'Source',
+    isSortable: true,
+    isVisible: true
+  },
+  {
+    name: 'age',
+    label: 'Age',
+    isSortable: true,
+    isVisible: true
+  },
+  {
+    name: 'title',
+    label: 'Title',
+    isSortable: true,
+    isVisible: true
+  },
+  {
+    name: 'indexer',
+    label: 'Indexer',
+    isSortable: true,
+    isVisible: true
+  },
+  {
+    name: 'size',
+    label: 'Size',
+    isSortable: true,
+    isVisible: true
+  },
+  {
+    name: 'peers',
+    label: 'Peers',
+    isSortable: true,
+    isVisible: true
+  },
+  {
+    name: 'qualityWeight',
+    label: 'Quality',
+    isSortable: true,
+    isVisible: true
+  },
+  {
+    name: 'rejections',
+    label: React.createElement(Icon, { name: icons.DANGER }),
+    isSortable: true,
+    fixedSortDirection: sortDirections.ASCENDING,
+    isVisible: true
+  },
+  {
+    name: 'releaseWeight',
+    label: React.createElement(Icon, { name: icons.DOWNLOAD }),
+    isSortable: true,
+    fixedSortDirection: sortDirections.ASCENDING,
+    isVisible: true
+  }
+];
+
+function InteractiveSearch(props) {
+  const {
+    searchPayload,
+    isFetching,
+    isPopulated,
+    error,
+    totalReleasesCount,
+    items,
+    selectedFilterKey,
+    filters,
+    customFilters,
+    sortKey,
+    sortDirection,
+    type,
+    longDateFormat,
+    timeFormat,
+    onSortPress,
+    onFilterSelect,
+    onGrabPress
+  } = props;
+
+  return (
+    <div>
+      <div className={styles.filterMenuContainer}>
+        <FilterMenu
+          alignMenu={align.RIGHT}
+          selectedFilterKey={selectedFilterKey}
+          filters={filters}
+          customFilters={customFilters}
+          buttonComponent={PageMenuButton}
+          filterModalConnectorComponent={InteractiveSearchFilterModalConnector}
+          filterModalConnectorComponentProps={{ type }}
+          onFilterSelect={onFilterSelect}
+        />
+      </div>
+
+      {
+        isFetching &&
+          <LoadingIndicator />
+      }
+
+      {
+        !isFetching && !!error &&
+          <div>
+            Unable to load results for this episode search. Try again later
+          </div>
+      }
+
+      {
+        !isFetching && isPopulated && !totalReleasesCount &&
+          <div>
+            No results found
+          </div>
+      }
+
+      {
+        !!totalReleasesCount && isPopulated && !items.length &&
+          <div>
+            All results are hidden by the applied filter
+          </div>
+      }
+
+      {
+        isPopulated && !!items.length &&
+          <Table
+            columns={columns}
+            sortKey={sortKey}
+            sortDirection={sortDirection}
+            onSortPress={onSortPress}
+          >
+            <TableBody>
+              {
+                items.map((item) => {
+                  return (
+                    <InteractiveSearchRow
+                      key={item.guid}
+                      {...item}
+                      searchPayload={searchPayload}
+                      longDateFormat={longDateFormat}
+                      timeFormat={timeFormat}
+                      onGrabPress={onGrabPress}
+                    />
+                  );
+                })
+              }
+            </TableBody>
+          </Table>
+      }
+
+      {
+        totalReleasesCount !== items.length && !!items.length &&
+          <div className={styles.filteredMessage}>
+                Some results are hidden by the applied filter
+          </div>
+      }
+    </div>
+  );
+}
+
+InteractiveSearch.propTypes = {
+  searchPayload: PropTypes.object.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  totalReleasesCount: PropTypes.number.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  sortKey: PropTypes.string,
+  sortDirection: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  longDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  onSortPress: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired,
+  onGrabPress: PropTypes.func.isRequired
+};
+
+export default InteractiveSearch;

frontend/src/InteractiveSearch/InteractiveSearchConnector.js

@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as releaseActions from 'Store/Actions/releaseActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import InteractiveSearch from './InteractiveSearch';
+
+function createMapStateToProps(appState, { type }) {
+  return createSelector(
+    (state) => state.releases.items.length,
+    createClientSideCollectionSelector('releases', `releases.${type}`),
+    createUISettingsSelector(),
+    (totalReleasesCount, releases, uiSettings) => {
+      return {
+        totalReleasesCount,
+        longDateFormat: uiSettings.longDateFormat,
+        timeFormat: uiSettings.timeFormat,
+        ...releases
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    dispatchFetchReleases(payload) {
+      dispatch(releaseActions.fetchReleases(payload));
+    },
+
+    onSortPress(sortKey, sortDirection) {
+      dispatch(releaseActions.setReleasesSort({ sortKey, sortDirection }));
+    },
+
+    onFilterSelect(selectedFilterKey) {
+      const action = props.type === 'episode' ?
+        releaseActions.setEpisodeReleasesFilter :
+        releaseActions.setSeasonReleasesFilter;
+
+      dispatch(action({ selectedFilterKey }));
+    },
+
+    onGrabPress(payload) {
+      dispatch(releaseActions.grabRelease(payload));
+    }
+  };
+}
+
+class InteractiveSearchConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      searchPayload,
+      isPopulated,
+      dispatchFetchReleases
+    } = this.props;
+
+    // If search results are not yet isPopulated fetch them,
+    // otherwise re-show the existing props.
+
+    if (!isPopulated) {
+      dispatchFetchReleases(searchPayload);
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      dispatchFetchReleases,
+      ...otherProps
+    } = this.props;
+
+    return (
+
+      <InteractiveSearch
+        {...otherProps}
+      />
+    );
+  }
+}
+
+InteractiveSearchConnector.propTypes = {
+  searchPayload: PropTypes.object.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  dispatchFetchReleases: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(InteractiveSearchConnector);

frontend/src/InteractiveSearch/InteractiveSearchFilterModalConnector.js

@@ -0,0 +1,32 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setEpisodeReleasesFilter, setSeasonReleasesFilter } from 'Store/Actions/releaseActions';
+import FilterModal from 'Components/Filter/FilterModal';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.releases.items,
+    (state) => state.releases.filterBuilderProps,
+    (sectionItems, filterBuilderProps) => {
+      return {
+        sectionItems,
+        filterBuilderProps,
+        customFilterType: 'releases'
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    dispatchSetFilter(payload) {
+      const action = props.type === 'episode' ?
+        setEpisodeReleasesFilter:
+        setSeasonReleasesFilter;
+
+      dispatch(action(payload));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(FilterModal);

frontend/src/InteractiveSearch/InteractiveSearchRow.css

@@ -0,0 +1,25 @@
+.title {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  word-break: break-all;
+}
+
+.quality {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  text-align: center;
+}
+
+.rejected,
+.download {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 50px;
+}
+
+.age,
+.size {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  white-space: nowrap;
+}

frontend/src/InteractiveSearch/InteractiveSearchRow.js

@@ -0,0 +1,253 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatAge from 'Utilities/Number/formatAge';
+import formatBytes from 'Utilities/Number/formatBytes';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import Link from 'Components/Link/Link';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Popover from 'Components/Tooltip/Popover';
+import EpisodeQuality from 'Episode/EpisodeQuality';
+import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
+import Peers from './Peers';
+import styles from './InteractiveSearchRow.css';
+
+function getDownloadIcon(isGrabbing, isGrabbed, grabError) {
+  if (isGrabbing) {
+    return icons.SPINNER;
+  } else if (isGrabbed) {
+    return icons.DOWNLOADING;
+  } else if (grabError) {
+    return icons.DOWNLOADING;
+  }
+
+  return icons.DOWNLOAD;
+}
+
+function getDownloadTooltip(isGrabbing, isGrabbed, grabError) {
+  if (isGrabbing) {
+    return '';
+  } else if (isGrabbed) {
+    return 'Added to downloaded queue';
+  } else if (grabError) {
+    return grabError;
+  }
+
+  return 'Add to downloaded queue';
+}
+
+class InteractiveSearchRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isConfirmGrabModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onGrabPress = () => {
+    const {
+      guid,
+      indexerId,
+      onGrabPress
+    } = this.props;
+
+    onGrabPress({
+      guid,
+      indexerId
+    });
+  }
+
+  onConfirmGrabPress = () => {
+    this.setState({ isConfirmGrabModalOpen: true });
+  }
+
+  onGrabConfirm = () => {
+    this.setState({ isConfirmGrabModalOpen: false });
+
+    const {
+      guid,
+      indexerId,
+      searchPayload,
+      onGrabPress
+    } = this.props;
+
+    onGrabPress({
+      guid,
+      indexerId,
+      ...searchPayload
+    });
+  }
+
+  onGrabCancel = () => {
+    this.setState({ isConfirmGrabModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      protocol,
+      age,
+      ageHours,
+      ageMinutes,
+      publishDate,
+      title,
+      infoUrl,
+      indexer,
+      size,
+      seeders,
+      leechers,
+      quality,
+      rejections,
+      downloadAllowed,
+      isGrabbing,
+      isGrabbed,
+      longDateFormat,
+      timeFormat,
+      grabError
+    } = this.props;
+
+    return (
+      <TableRow>
+        <TableRowCell>
+          <ProtocolLabel
+            protocol={protocol}
+          />
+        </TableRowCell>
+
+        <TableRowCell
+          className={styles.age}
+          title={formatDateTime(publishDate, longDateFormat, timeFormat, { includeSeconds: true })}
+        >
+          {formatAge(age, ageHours, ageMinutes)}
+        </TableRowCell>
+
+        <TableRowCell className={styles.title}>
+          <Link to={infoUrl}>
+            {title}
+          </Link>
+        </TableRowCell>
+
+        <TableRowCell>
+          {indexer}
+        </TableRowCell>
+
+        <TableRowCell className={styles.size}>
+          {formatBytes(size)}
+        </TableRowCell>
+
+        <TableRowCell>
+          {
+            protocol === 'torrent' &&
+              <Peers
+                seeders={seeders}
+                leechers={leechers}
+              />
+          }
+        </TableRowCell>
+
+        <TableRowCell className={styles.quality}>
+          <EpisodeQuality
+            quality={quality}
+          />
+        </TableRowCell>
+
+        <TableRowCell className={styles.rejected}>
+          {
+            !!rejections.length &&
+              <Popover
+                anchor={
+                  <Icon
+                    name={icons.DANGER}
+                    kind={kinds.DANGER}
+                  />
+                }
+                title="Release Rejected"
+                body={
+                  <ul>
+                    {
+                      rejections.map((rejection, index) => {
+                        return (
+                          <li key={index}>
+                            {rejection}
+                          </li>
+                        );
+                      })
+                    }
+                  </ul>
+                }
+                position={tooltipPositions.LEFT}
+              />
+          }
+        </TableRowCell>
+
+        <TableRowCell className={styles.download}>
+          <SpinnerIconButton
+            name={getDownloadIcon(isGrabbing, isGrabbed, grabError)}
+            kind={grabError ? kinds.DANGER : kinds.DEFAULT}
+            title={getDownloadTooltip(isGrabbing, isGrabbed, grabError)}
+            isSpinning={isGrabbing}
+            onPress={downloadAllowed ? this.onGrabPress : this.onConfirmGrabPress}
+          />
+        </TableRowCell>
+
+        <ConfirmModal
+          isOpen={this.state.isConfirmGrabModalOpen}
+          kind={kinds.WARNING}
+          title="Grab Release"
+          message={`Sonarr was unable to determine which series and episode this release was for. Sonarr may be unable to automatically import this release. Do you want to grab '${title}'?`}
+          confirmLabel="Grab"
+          onConfirm={this.onGrabConfirm}
+          onCancel={this.onGrabCancel}
+        />
+      </TableRow>
+    );
+  }
+}
+
+InteractiveSearchRow.propTypes = {
+  guid: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  age: PropTypes.number.isRequired,
+  ageHours: PropTypes.number.isRequired,
+  ageMinutes: PropTypes.number.isRequired,
+  publishDate: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  infoUrl: PropTypes.string.isRequired,
+  indexerId: PropTypes.number.isRequired,
+  indexer: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  seeders: PropTypes.number,
+  leechers: PropTypes.number,
+  quality: PropTypes.object.isRequired,
+  rejections: PropTypes.arrayOf(PropTypes.string).isRequired,
+  downloadAllowed: PropTypes.bool.isRequired,
+  isGrabbing: PropTypes.bool.isRequired,
+  isGrabbed: PropTypes.bool.isRequired,
+  grabError: PropTypes.string,
+  longDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  searchPayload: PropTypes.object.isRequired,
+  onGrabPress: PropTypes.func.isRequired
+};
+
+InteractiveSearchRow.defaultProps = {
+  rejections: [],
+  isGrabbing: false,
+  isGrabbed: false
+};
+
+export default InteractiveSearchRow;

frontend/src/InteractiveSearch/Peers.js

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