diff --git a/frontend/src/Activity/History/HistoryRow.js b/frontend/src/Activity/History/HistoryRow.js
index f2f0cb732..c98027496 100644
--- a/frontend/src/Activity/History/HistoryRow.js
+++ b/frontend/src/Activity/History/HistoryRow.js
@@ -5,7 +5,6 @@ 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 albumEntities from 'Album/albumEntities';
import AlbumTitleLink from 'Album/AlbumTitleLink';
import EpisodeLanguage from 'Album/EpisodeLanguage';
import EpisodeQuality from 'Album/EpisodeQuality';
@@ -53,7 +52,6 @@ class HistoryRow extends Component {
render() {
const {
- albumId,
artist,
album,
track,
@@ -114,12 +112,8 @@ class HistoryRow extends Component {
return (
);
diff --git a/frontend/src/Activity/Queue/QueueRow.js b/frontend/src/Activity/Queue/QueueRow.js
index 266a4a836..cb34d6796 100644
--- a/frontend/src/Activity/Queue/QueueRow.js
+++ b/frontend/src/Activity/Queue/QueueRow.js
@@ -156,12 +156,8 @@ class QueueRow extends Component {
return (
);
diff --git a/frontend/src/Album/AlbumDetailsModal.js b/frontend/src/Album/AlbumDetailsModal.js
deleted file mode 100644
index 5f55cd10f..000000000
--- a/frontend/src/Album/AlbumDetailsModal.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Modal from 'Components/Modal/Modal';
-import AlbumDetailsModalContentConnector from './AlbumDetailsModalContentConnector';
-
-class AlbumDetailsModal extends Component {
-
- //
- // Render
-
- render() {
- const {
- isOpen,
- onModalClose,
- ...otherProps
- } = this.props;
-
- return (
-
-
-
- );
- }
-}
-
-AlbumDetailsModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- onModalClose: PropTypes.func.isRequired
-};
-
-export default AlbumDetailsModal;
diff --git a/frontend/src/Album/AlbumDetailsModalContent.css b/frontend/src/Album/AlbumDetailsModalContent.css
deleted file mode 100644
index b9edb1d33..000000000
--- a/frontend/src/Album/AlbumDetailsModalContent.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.artistName {
- margin-left: 5px;
-}
-
-.separator {
- margin: 0 5px;
-}
-
-.tabs {
- margin-top: -32px;
-}
-
-.tabList {
- margin: 0 0 10px;
- padding: 0;
-}
-
-.tab {
- position: relative;
- bottom: -1px;
- display: inline-block;
- padding: 6px 12px;
- border: 1px solid transparent;
- border-top: none;
- list-style: none;
- cursor: pointer;
-}
-
-.selectedTab {
- border-color: $borderColor;
- border-radius: 0 0 5px 5px;
- background-color: rgba(239, 239, 239, 0.4);
- color: $black;
-}
-
-.tabPanel {
- margin-top: 20px;
-}
-
-.openArtistButton {
- composes: button from 'Components/Link/Button.css';
-
- margin-right: auto;
-}
-
-.openButtons {
- margin-right: auto;
-}
diff --git a/frontend/src/Album/AlbumDetailsModalContent.js b/frontend/src/Album/AlbumDetailsModalContent.js
deleted file mode 100644
index 675a567e7..000000000
--- a/frontend/src/Album/AlbumDetailsModalContent.js
+++ /dev/null
@@ -1,190 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import albumEntities from 'Album/albumEntities';
-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 MonitorToggleButton from 'Components/MonitorToggleButton';
-import AlbumHistoryConnector from './History/AlbumHistoryConnector';
-import AlbumSearchConnector from './Search/AlbumSearchConnector';
-import styles from './AlbumDetailsModalContent.css';
-
-const tabs = [
- 'history',
- 'search'
-];
-
-class AlbumDetailsModalContent extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- selectedTab: props.selectedTab
- };
- }
-
- //
- // Listeners
-
- onTabSelect = (index, lastIndex) => {
- this.setState({ selectedTab: tabs[index] });
- }
-
- //
- // Render
-
- render() {
- const {
- albumId,
- artistName,
- foreignArtistId,
- foreignAlbumId,
- artistMonitored,
- albumTitle,
- monitored,
- isSaving,
- showOpenArtistButton,
- showOpenAlbumButton,
- startInteractiveSearch,
- onMonitorAlbumPress,
- onModalClose
- } = this.props;
-
- const artistLink = `/artist/${foreignArtistId}`;
- const albumLink = `/album/${foreignAlbumId}`;
-
- return (
-
-
-
-
-
- {artistName}
-
-
- -
-
- {albumTitle}
-
-
-
-
-
-
- History
-
-
-
- Search
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- showOpenArtistButton &&
-
- }
-
- {
- showOpenAlbumButton &&
-
- }
-
-
-
-
- );
- }
-}
-
-AlbumDetailsModalContent.propTypes = {
- albumId: PropTypes.number.isRequired,
- albumEntity: PropTypes.string.isRequired,
- artistId: PropTypes.number.isRequired,
- artistName: PropTypes.string.isRequired,
- foreignArtistId: PropTypes.string.isRequired,
- foreignAlbumId: PropTypes.string.isRequired,
- artistMonitored: PropTypes.bool.isRequired,
- releaseDate: PropTypes.string.isRequired,
- albumLabel: PropTypes.arrayOf(PropTypes.string).isRequired,
- albumTitle: PropTypes.string.isRequired,
- monitored: PropTypes.bool.isRequired,
- isSaving: PropTypes.bool,
- showOpenArtistButton: PropTypes.bool,
- showOpenAlbumButton: PropTypes.bool,
- selectedTab: PropTypes.string.isRequired,
- startInteractiveSearch: PropTypes.bool.isRequired,
- onMonitorAlbumPress: PropTypes.func.isRequired,
- onModalClose: PropTypes.func.isRequired
-};
-
-AlbumDetailsModalContent.defaultProps = {
- selectedTab: 'history',
- albumLabel: ['Unknown'],
- albumEntity: albumEntities.ALBUMS,
- startInteractiveSearch: false
-};
-
-export default AlbumDetailsModalContent;
diff --git a/frontend/src/Album/AlbumDetailsModalContentConnector.js b/frontend/src/Album/AlbumDetailsModalContentConnector.js
deleted file mode 100644
index 5f2c52690..000000000
--- a/frontend/src/Album/AlbumDetailsModalContentConnector.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { cancelFetchReleases, clearReleases } from 'Store/Actions/releaseActions';
-import { toggleAlbumMonitored } from 'Store/Actions/albumActions';
-import createAlbumSelector from 'Store/Selectors/createAlbumSelector';
-import createArtistSelector from 'Store/Selectors/createArtistSelector';
-import albumEntities from 'Album/albumEntities';
-import { fetchTracks, clearTracks } from 'Store/Actions/trackActions';
-import AlbumDetailsModalContent from './AlbumDetailsModalContent';
-
-function createMapStateToProps() {
- return createSelector(
- createAlbumSelector(),
- createArtistSelector(),
- (album, artist) => {
- const {
- artistName,
- foreignArtistId,
- monitored: artistMonitored
- } = artist;
-
- return {
- artistName,
- foreignArtistId,
- artistMonitored,
- ...album
- };
- }
- );
-}
-
-function createMapDispatchToProps(dispatch, props) {
- return {
- dispatchCancelFetchReleases() {
- dispatch(cancelFetchReleases());
- },
-
- dispatchClearReleases() {
- dispatch(clearReleases());
- },
-
- dispatchFetchTracks({ artistId, albumId }) {
- dispatch(fetchTracks({ artistId, albumId }));
- },
-
- dispatchClearTracks() {
- dispatch(clearTracks());
- },
-
- onMonitorAlbumPress(monitored) {
- const {
- albumId,
- albumEntity
- } = this.props;
-
- dispatch(toggleAlbumMonitored({
- albumEntity,
- albumId,
- monitored
- }));
- }
- };
-}
-
-class AlbumDetailsModalContentConnector extends Component {
-
- //
- // Lifecycle
- componentDidMount() {
- this._populate();
- }
-
- componentWillUnmount() {
- // Clear pending releases here so we can reshow the search
- // results even after switching tabs.
- this._unpopulate();
- this.props.dispatchCancelFetchReleases();
- this.props.dispatchClearReleases();
- }
-
- //
- // Control
-
- _populate() {
- const artistId = this.props.artistId;
- const albumId = this.props.albumId;
- this.props.dispatchFetchTracks({ artistId, albumId });
- }
-
- _unpopulate() {
- this.props.dispatchClearTracks();
- }
-
- //
- // Render
-
- render() {
- const {
- dispatchClearReleases,
- ...otherProps
- } = this.props;
-
- return (
-
- );
- }
-}
-
-AlbumDetailsModalContentConnector.propTypes = {
- albumId: PropTypes.number.isRequired,
- albumEntity: PropTypes.string.isRequired,
- artistId: PropTypes.number.isRequired,
- dispatchFetchTracks: PropTypes.func.isRequired,
- dispatchClearTracks: PropTypes.func.isRequired,
- dispatchCancelFetchReleases: PropTypes.func.isRequired,
- dispatchClearReleases: PropTypes.func.isRequired
-};
-
-AlbumDetailsModalContentConnector.defaultProps = {
- albumEntity: albumEntities.ALBUMS
-};
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(AlbumDetailsModalContentConnector);
diff --git a/frontend/src/Album/AlbumSearchCell.js b/frontend/src/Album/AlbumSearchCell.js
index f99abfe6c..83b7c2f23 100644
--- a/frontend/src/Album/AlbumSearchCell.js
+++ b/frontend/src/Album/AlbumSearchCell.js
@@ -4,7 +4,7 @@ import { icons } from 'Helpers/Props';
import IconButton from 'Components/Link/IconButton';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import AlbumDetailsModal from './AlbumDetailsModal';
+import InteractiveAlbumSearchModal from './Search/InteractiveAlbumSearchModal';
import styles from './AlbumSearchCell.css';
class AlbumSearchCell extends Component {
@@ -37,8 +37,6 @@ class AlbumSearchCell extends Component {
render() {
const {
albumId,
- artistId,
- albumTitle,
isSearching,
onSearchPress,
...otherProps
@@ -57,13 +55,9 @@ class AlbumSearchCell extends Component {
onPress={this.onManualSearchPress}
/>
-
diff --git a/frontend/src/Album/AlbumTitleDetailLink.js b/frontend/src/Album/AlbumTitleDetailLink.js
deleted file mode 100644
index f357e5a3f..000000000
--- a/frontend/src/Album/AlbumTitleDetailLink.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Link from 'Components/Link/Link';
-
-function AlbumTitleDetailLink({ foreignAlbumId, title }) {
- const link = `/album/${foreignAlbumId}`;
-
- return (
-
- {title}
-
- );
-}
-
-AlbumTitleDetailLink.propTypes = {
- foreignAlbumId: PropTypes.string.isRequired,
- title: PropTypes.string.isRequired
-};
-
-export default AlbumTitleDetailLink;
diff --git a/frontend/src/Album/AlbumTitleLink.js b/frontend/src/Album/AlbumTitleLink.js
index 3b7b86535..42945430b 100644
--- a/frontend/src/Album/AlbumTitleLink.js
+++ b/frontend/src/Album/AlbumTitleLink.js
@@ -1,68 +1,20 @@
import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
import Link from 'Components/Link/Link';
-import AlbumDetailsModal from 'Album/AlbumDetailsModal';
-import styles from './AlbumTitleLink.css';
-class AlbumTitleLink extends Component {
+function AlbumTitleLink({ foreignAlbumId, title }) {
+ const link = `/album/${foreignAlbumId}`;
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- isDetailsModalOpen: false
- };
- }
-
- //
- // Listeners
-
- onLinkPress = () => {
- this.setState({ isDetailsModalOpen: true });
- }
-
- onModalClose = () => {
- this.setState({ isDetailsModalOpen: false });
- }
-
- //
- // Render
-
- render() {
- const {
- albumTitle,
- ...otherProps
- } = this.props;
-
- return (
-
- );
- }
+ return (
+
+ {title}
+
+ );
}
AlbumTitleLink.propTypes = {
- albumTitle: PropTypes.string.isRequired
-};
-
-AlbumTitleLink.defaultProps = {
- showArtistButton: false
+ foreignAlbumId: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired
};
export default AlbumTitleLink;
diff --git a/frontend/src/Album/Details/AlbumDetails.js b/frontend/src/Album/Details/AlbumDetails.js
index bedc98047..d4e76e3f0 100644
--- a/frontend/src/Album/Details/AlbumDetails.js
+++ b/frontend/src/Album/Details/AlbumDetails.js
@@ -22,6 +22,7 @@ import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
import AlbumDetailsMediumConnector from './AlbumDetailsMediumConnector';
import ArtistHistoryModal from 'Artist/History/ArtistHistoryModal';
+import InteractiveAlbumSearchModal from 'Album/Search/InteractiveAlbumSearchModal';
import TrackFileEditorModal from 'TrackFile/Editor/TrackFileEditorModal';
import styles from './AlbumDetails.css';
@@ -53,6 +54,7 @@ class AlbumDetails extends Component {
this.state = {
isOrganizeModalOpen: false,
isArtistHistoryModalOpen: false,
+ isInteractiveSearchModalOpen: false,
isManageTracksOpen: false,
isEditAlbumModalOpen: false,
allExpanded: false,
@@ -88,6 +90,14 @@ class AlbumDetails extends Component {
this.setState({ isManageTracksOpen: false });
}
+ onInteractiveSearchPress = () => {
+ this.setState({ isInteractiveSearchModalOpen: true });
+ }
+
+ onInteractiveSearchModalClose = () => {
+ this.setState({ isInteractiveSearchModalOpen: false });
+ }
+
onArtistHistoryPress = () => {
this.setState({ isArtistHistoryModalOpen: true });
}
@@ -147,6 +157,7 @@ class AlbumDetails extends Component {
const {
isOrganizeModalOpen,
isArtistHistoryModalOpen,
+ isInteractiveSearchModalOpen,
isEditAlbumModalOpen,
isManageTracksOpen,
allExpanded,
@@ -173,6 +184,12 @@ class AlbumDetails extends Component {
onPress={onSearchPress}
/>
+
+
+
+
- );
- }
-
- if (!isFetching && !!error) {
- return (
- Unable to load album history.
- );
- }
-
- if (isPopulated && !hasItems && !error) {
- return (
- No album history.
- );
- }
-
- if (isPopulated && hasItems && !error) {
- return (
-
-
- {
- items.map((item) => {
- return (
-
- );
- })
- }
-
-
- );
- }
-
- return null;
- }
-}
-
-AlbumHistory.propTypes = {
- isFetching: PropTypes.bool.isRequired,
- isPopulated: PropTypes.bool.isRequired,
- error: PropTypes.object,
- items: PropTypes.arrayOf(PropTypes.object).isRequired,
- onMarkAsFailedPress: PropTypes.func.isRequired
-};
-
-AlbumHistory.defaultProps = {
- selectedTab: 'details'
-};
-
-export default AlbumHistory;
diff --git a/frontend/src/Album/History/AlbumHistoryConnector.js b/frontend/src/Album/History/AlbumHistoryConnector.js
deleted file mode 100644
index 0218e72db..000000000
--- a/frontend/src/Album/History/AlbumHistoryConnector.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchAlbumHistory, clearAlbumHistory, albumHistoryMarkAsFailed } from 'Store/Actions/albumHistoryActions';
-import AlbumHistory from './AlbumHistory';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.albumHistory,
- (albumHistory) => {
- return albumHistory;
- }
- );
-}
-
-const mapDispatchToProps = {
- fetchAlbumHistory,
- clearAlbumHistory,
- albumHistoryMarkAsFailed
-};
-
-class AlbumHistoryConnector extends Component {
-
- //
- // Lifecycle
-
- componentDidMount() {
- this.props.fetchAlbumHistory({ albumId: this.props.albumId });
- }
-
- componentWillUnmount() {
- this.props.clearAlbumHistory();
- }
-
- //
- // Listeners
-
- onMarkAsFailedPress = (historyId) => {
- this.props.albumHistoryMarkAsFailed({ historyId, albumId: this.props.albumId });
- }
-
- //
- // Render
-
- render() {
- return (
-
- );
- }
-}
-
-AlbumHistoryConnector.propTypes = {
- albumId: PropTypes.number.isRequired,
- fetchAlbumHistory: PropTypes.func.isRequired,
- clearAlbumHistory: PropTypes.func.isRequired,
- albumHistoryMarkAsFailed: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(AlbumHistoryConnector);
diff --git a/frontend/src/Album/History/AlbumHistoryRow.css b/frontend/src/Album/History/AlbumHistoryRow.css
deleted file mode 100644
index 8c3fb8272..000000000
--- a/frontend/src/Album/History/AlbumHistoryRow.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.details,
-.actions {
- composes: cell from 'Components/Table/Cells/TableRowCell.css';
-
- width: 65px;
-}
diff --git a/frontend/src/Album/History/AlbumHistoryRow.js b/frontend/src/Album/History/AlbumHistoryRow.js
deleted file mode 100644
index 30b2d6fff..000000000
--- a/frontend/src/Album/History/AlbumHistoryRow.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { icons, kinds, tooltipPositions } from 'Helpers/Props';
-import Icon from 'Components/Icon';
-import IconButton from 'Components/Link/IconButton';
-import ConfirmModal from 'Components/Modal/ConfirmModal';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
-import TableRow from 'Components/Table/TableRow';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import Popover from 'Components/Tooltip/Popover';
-import EpisodeLanguage from 'Album/EpisodeLanguage';
-import EpisodeQuality from 'Album/EpisodeQuality';
-import HistoryDetailsConnector from 'Activity/History/Details/HistoryDetailsConnector';
-import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell';
-import styles from './AlbumHistoryRow.css';
-
-function getTitle(eventType) {
- switch (eventType) {
- case 'grabbed': return 'Grabbed';
- case 'artistFolderImported': return 'Artist Folder Imported';
- case 'downloadFolderImported': return 'Download Folder Imported';
- case 'downloadFailed': return 'Download Failed';
- case 'trackFileDeleted': return 'Track File Deleted';
- case 'trackFileRenamed': return 'Track File Renamed';
- default: return 'Unknown';
- }
-}
-
-class AlbumHistoryRow extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- isMarkAsFailedModalOpen: false
- };
- }
-
- //
- // Listeners
-
- onMarkAsFailedPress = () => {
- this.setState({ isMarkAsFailedModalOpen: true });
- }
-
- onConfirmMarkAsFailed = () => {
- this.props.onMarkAsFailedPress(this.props.id);
- this.setState({ isMarkAsFailedModalOpen: false });
- }
-
- onMarkAsFailedModalClose = () => {
- this.setState({ isMarkAsFailedModalOpen: false });
- }
-
- //
- // Render
-
- render() {
- const {
- eventType,
- sourceTitle,
- language,
- languageCutoffNotMet,
- quality,
- qualityCutoffNotMet,
- date,
- data
- } = this.props;
-
- const {
- isMarkAsFailedModalOpen
- } = this.state;
-
- return (
-
-
-
-
- {sourceTitle}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
- title={getTitle(eventType)}
- body={
-
- }
- position={tooltipPositions.LEFT}
- />
-
-
-
- {
- eventType === 'grabbed' &&
-
- }
-
-
-
-
- );
- }
-}
-
-AlbumHistoryRow.propTypes = {
- id: PropTypes.number.isRequired,
- eventType: PropTypes.string.isRequired,
- sourceTitle: PropTypes.string.isRequired,
- language: PropTypes.object.isRequired,
- languageCutoffNotMet: PropTypes.bool.isRequired,
- quality: PropTypes.object.isRequired,
- qualityCutoffNotMet: PropTypes.bool.isRequired,
- date: PropTypes.string.isRequired,
- data: PropTypes.object.isRequired,
- onMarkAsFailedPress: PropTypes.func.isRequired
-};
-
-export default AlbumHistoryRow;
diff --git a/frontend/src/Album/Search/AlbumSearch.css b/frontend/src/Album/Search/AlbumSearch.css
deleted file mode 100644
index 2f7ddfd19..000000000
--- a/frontend/src/Album/Search/AlbumSearch.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.buttonContainer {
- display: flex;
- justify-content: center;
-
- margin-top: 10px;
-}
-
-.button {
- composes: button from 'Components/Link/Button.css';
-
- width: 300px;
-}
-
-.buttonIcon {
- margin-right: 5px;
-}
diff --git a/frontend/src/Album/Search/AlbumSearch.js b/frontend/src/Album/Search/AlbumSearch.js
deleted file mode 100644
index 3fd280b3d..000000000
--- a/frontend/src/Album/Search/AlbumSearch.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { icons, kinds, sizes } from 'Helpers/Props';
-import Button from 'Components/Link/Button';
-import Icon from 'Components/Icon';
-import styles from './AlbumSearch.css';
-
-function AlbumSearch(props) {
- const {
- onQuickSearchPress,
- onInteractiveSearchPress
- } = props;
-
- return (
-
-
-
-
-
-
-
-
-
Unable to load results for this album search. Try again later.
;
- } else if (isPopulated && !items.length) {
- return No results found.
;
- }
-
- return (
-
-
- {
- items.map((item) => {
- return (
-
- );
- })
- }
-
-
- );
-}
-
-InteractiveAlbumSearch.propTypes = {
- isFetching: PropTypes.bool.isRequired,
- isPopulated: PropTypes.bool.isRequired,
- error: PropTypes.object,
- items: PropTypes.arrayOf(PropTypes.object).isRequired,
- sortKey: PropTypes.string,
- sortDirection: PropTypes.string,
- longDateFormat: PropTypes.string.isRequired,
- timeFormat: PropTypes.string.isRequired,
- onSortPress: PropTypes.func.isRequired,
- onGrabPress: PropTypes.func.isRequired
-};
-
-export default InteractiveAlbumSearch;
diff --git a/frontend/src/Album/Search/InteractiveAlbumSearchConnector.js b/frontend/src/Album/Search/InteractiveAlbumSearchConnector.js
deleted file mode 100644
index d7b3d041d..000000000
--- a/frontend/src/Album/Search/InteractiveAlbumSearchConnector.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { createSelector } from 'reselect';
-import connectSection from 'Store/connectSection';
-import { fetchReleases, setReleasesSort, grabRelease } from 'Store/Actions/releaseActions';
-import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import InteractiveAlbumSearch from './InteractiveAlbumSearch';
-
-function createMapStateToProps() {
- return createSelector(
- createClientSideCollectionSelector(),
- createUISettingsSelector(),
- (releases, uiSettings) => {
- return {
- longDateFormat: uiSettings.longDateFormat,
- timeFormat: uiSettings.timeFormat,
- ...releases
- };
- }
- );
-}
-
-const mapDispatchToProps = {
- fetchReleases,
- setReleasesSort,
- grabRelease
-};
-
-class InteractiveAlbumSearchConnector extends Component {
-
- //
- // Lifecycle
-
- componentDidMount() {
- const {
- albumId,
- isPopulated
- } = this.props;
-
- // If search results are not yet isPopulated fetch them,
- // otherwise re-show the existing props.
-
- if (!isPopulated) {
- this.props.fetchReleases({
- albumId
- });
- }
- }
-
- //
- // Listeners
-
- onSortPress = (sortKey, sortDirection) => {
- this.props.setReleasesSort({ sortKey, sortDirection });
- }
-
- onGrabPress = (guid, indexerId) => {
- this.props.grabRelease({ guid, indexerId });
- }
-
- //
- // Render
-
- render() {
- return (
-
- );
- }
-}
-
-InteractiveAlbumSearchConnector.propTypes = {
- albumId: PropTypes.number.isRequired,
- isPopulated: PropTypes.bool.isRequired,
- fetchReleases: PropTypes.func.isRequired,
- setReleasesSort: PropTypes.func.isRequired,
- grabRelease: PropTypes.func.isRequired
-};
-
-export default connectSection(
- createMapStateToProps,
- mapDispatchToProps,
- undefined,
- undefined,
- { section: 'releases' }
-)(InteractiveAlbumSearchConnector);
diff --git a/frontend/src/Album/Search/InteractiveAlbumSearchModal.js b/frontend/src/Album/Search/InteractiveAlbumSearchModal.js
new file mode 100644
index 000000000..7b4081fbf
--- /dev/null
+++ b/frontend/src/Album/Search/InteractiveAlbumSearchModal.js
@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import InteractiveAlbumSearchModalContentConnector from './InteractiveAlbumSearchModalContentConnector';
+
+function InteractiveAlbumSearchModal(props) {
+ const {
+ isOpen,
+ onModalClose,
+ ...otherProps
+ } = props;
+
+ return (
+
+
+
+ );
+}
+
+InteractiveAlbumSearchModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default InteractiveAlbumSearchModal;
diff --git a/frontend/src/Album/Search/InteractiveAlbumSearchModalContent.js b/frontend/src/Album/Search/InteractiveAlbumSearchModalContent.js
new file mode 100644
index 000000000..f12f3d9a0
--- /dev/null
+++ b/frontend/src/Album/Search/InteractiveAlbumSearchModalContent.js
@@ -0,0 +1,169 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, sortDirections } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Icon from 'Components/Icon';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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 Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import InteractiveAlbumSearchRow from './InteractiveAlbumSearchRow';
+
+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
+ }
+];
+
+class InteractiveAlbumSearchModalContent extends Component {
+
+ //
+ // Render
+
+ render() {
+ const {
+ isFetching,
+ isPopulated,
+ error,
+ items,
+ sortKey,
+ sortDirection,
+ longDateFormat,
+ timeFormat,
+ onSortPress,
+ onGrabPress,
+ onModalClose
+ } = this.props;
+
+ const hasItems = !!items.length;
+
+ return (
+
+
+ Interactive Album Search
+
+
+
+ {
+ isFetching &&
+
+ }
+
+ {
+ !isFetching && !!error &&
+ Unable to load releases.
+ }
+
+ {
+ isPopulated && !hasItems && !error &&
+ No results.
+ }
+
+ {
+ isPopulated && hasItems && !error &&
+
+
+ {
+ items.map((item) => {
+ return (
+
+ );
+ })
+ }
+
+
+ }
+
+
+
+
+
+
+ );
+ }
+}
+
+InteractiveAlbumSearchModalContent.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ isPopulated: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ longDateFormat: PropTypes.string.isRequired,
+ timeFormat: PropTypes.string.isRequired,
+ sortKey: PropTypes.string,
+ sortDirection: PropTypes.string,
+ onSortPress: PropTypes.func.isRequired,
+ onGrabPress: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default InteractiveAlbumSearchModalContent;
diff --git a/frontend/src/Album/Search/InteractiveAlbumSearchModalContentConnector.js b/frontend/src/Album/Search/InteractiveAlbumSearchModalContentConnector.js
new file mode 100644
index 000000000..e7b615678
--- /dev/null
+++ b/frontend/src/Album/Search/InteractiveAlbumSearchModalContentConnector.js
@@ -0,0 +1,109 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import connectSection from 'Store/connectSection';
+import { createSelector } from 'reselect';
+import { fetchReleases, clearReleases, cancelFetchReleases, setReleasesSort, grabRelease } from 'Store/Actions/releaseActions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import InteractiveAlbumSearchModalContent from './InteractiveAlbumSearchModalContent';
+
+function createMapStateToProps() {
+ return createSelector(
+ createClientSideCollectionSelector(),
+ createUISettingsSelector(),
+ (releases, uiSettings) => {
+ return {
+ longDateFormat: uiSettings.longDateFormat,
+ timeFormat: uiSettings.timeFormat,
+ ...releases
+ };
+ }
+ );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+ return {
+ dispatchFetchReleases({ albumId }) {
+ dispatch(fetchReleases({ albumId }));
+ },
+
+ dispatchCancelFetchReleases() {
+ dispatch(cancelFetchReleases());
+ },
+
+ dispatchClearReleases() {
+ dispatch(clearReleases());
+ },
+
+ dispatchSetReleasesSort({ sortKey, sortDirection }) {
+ dispatch(setReleasesSort({ sortKey, sortDirection }));
+ },
+
+ dispatchGrabRelease({ guid, indexerId }) {
+ dispatch(grabRelease({ guid, indexerId }));
+ }
+ };
+}
+
+class InteractiveAlbumSearchModalContentConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ const {
+ albumId
+ } = this.props;
+
+ this.props.dispatchFetchReleases({
+ albumId
+ });
+ }
+
+ componentWillUnmount() {
+ this.props.dispatchCancelFetchReleases();
+ this.props.dispatchClearReleases();
+ }
+
+ //
+ // Listeners
+
+ onSortPress = (sortKey, sortDirection) => {
+ this.props.dispatchSetReleasesSort({ sortKey, sortDirection });
+ }
+
+ onGrabPress = (guid, indexerId) => {
+ this.props.dispatchGrabRelease({ guid, indexerId });
+ }
+
+ //
+ // Render
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+InteractiveAlbumSearchModalContentConnector.propTypes = {
+ albumId: PropTypes.number,
+ dispatchFetchReleases: PropTypes.func.isRequired,
+ dispatchClearReleases: PropTypes.func.isRequired,
+ dispatchCancelFetchReleases: PropTypes.func.isRequired,
+ dispatchSetReleasesSort: PropTypes.func.isRequired,
+ dispatchGrabRelease: PropTypes.func.isRequired
+};
+
+export default connectSection(
+ createMapStateToProps,
+ createMapDispatchToProps,
+ undefined,
+ undefined,
+ { section: 'releases' }
+)(InteractiveAlbumSearchModalContentConnector);
diff --git a/frontend/src/Album/Summary/AlbumReleasing.js b/frontend/src/Album/Summary/AlbumReleasing.js
deleted file mode 100644
index 581b960eb..000000000
--- a/frontend/src/Album/Summary/AlbumReleasing.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React from 'react';
-import isInNextWeek from 'Utilities/Date/isInNextWeek';
-import isToday from 'Utilities/Date/isToday';
-import isTomorrow from 'Utilities/Date/isTomorrow';
-import { kinds, sizes } from 'Helpers/Props';
-import Label from 'Components/Label';
-
-function AlbumReleasing(props) {
- const {
- releaseDate,
- albumLabel,
- shortDateFormat,
- showRelativeDates
- } = props;
-
- const networkLabel = (
-
- );
-
- if (!releaseDate) {
- return (
-
- TBA on {networkLabel}
-
- );
- }
-
- if (!showRelativeDates) {
- return (
-
- {moment(releaseDate).format(shortDateFormat)} on {networkLabel}
-
- );
- }
-
- if (isToday(releaseDate)) {
- return (
-
- Today on {networkLabel}
-
- );
- }
-
- if (isTomorrow(releaseDate)) {
- return (
-
- Tomorrow on {networkLabel}
-
- );
- }
-
- if (isInNextWeek(releaseDate)) {
- return (
-
- {moment(releaseDate).format('dddd')} on {networkLabel}
-
- );
- }
-
- return (
-
- {moment(releaseDate).format(shortDateFormat)} on {networkLabel}
-
- );
-}
-
-AlbumReleasing.propTypes = {
- releaseDate: PropTypes.string.isRequired,
- albumLabel: PropTypes.arrayOf(PropTypes.string).isRequired,
- shortDateFormat: PropTypes.string.isRequired,
- showRelativeDates: PropTypes.bool.isRequired
-};
-
-export default AlbumReleasing;
diff --git a/frontend/src/Album/Summary/AlbumReleasingConnector.js b/frontend/src/Album/Summary/AlbumReleasingConnector.js
deleted file mode 100644
index e1ac54d56..000000000
--- a/frontend/src/Album/Summary/AlbumReleasingConnector.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import _ from 'lodash';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import AlbumReleasing from './AlbumReleasing';
-
-function createMapStateToProps() {
- return createSelector(
- createUISettingsSelector(),
- (uiSettings) => {
- return _.pick(uiSettings, [
- 'shortDateFormat',
- 'showRelativeDates'
- ]);
- }
- );
-}
-
-export default connect(createMapStateToProps)(AlbumReleasing);
diff --git a/frontend/src/Album/Summary/AlbumSummary.css b/frontend/src/Album/Summary/AlbumSummary.css
deleted file mode 100644
index c05234997..000000000
--- a/frontend/src/Album/Summary/AlbumSummary.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.infoTitle {
- display: inline-block;
- width: 100px;
- font-weight: bold;
-}
-
-.overview,
-.files {
- margin-top: 20px;
-}
-
-.filesHeader {
- display: flex;
- font-weight: bold;
-}
-
-.filesHeader {
- display: flex;
- margin-bottom: 10px;
- border-bottom: 1px solid $borderColor;
-}
-
-.fileRow {
- display: flex;
-}
-
-.path {
- @add-mixin truncate;
-
- flex: 1 0 1px;
-}
-
-.size,
-.quality {
- flex: 0 0 125px;
-}
-
-.actions {
- flex: 0 0 20px;
- text-align: center;
-}
-
-@media only screen and (max-width: $breakpointMedium) {
- .size,
- .quality {
- flex: 0 0 80px;
- }
-}
diff --git a/frontend/src/Album/Summary/AlbumSummary.js b/frontend/src/Album/Summary/AlbumSummary.js
deleted file mode 100644
index 28a8441d8..000000000
--- a/frontend/src/Album/Summary/AlbumSummary.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { kinds, sizes } from 'Helpers/Props';
-import ConfirmModal from 'Components/Modal/ConfirmModal';
-import Label from 'Components/Label';
-import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import AlbumReleasingConnector from './AlbumReleasingConnector';
-import TrackDetailRow from './TrackDetailRow';
-import styles from './AlbumSummary.css';
-
-class AlbumSummary extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- isRemoveTrackFileModalOpen: false
- };
- }
-
- //
- // Listeners
-
- onRemoveTrackFilePress = () => {
- this.setState({ isRemoveTrackFileModalOpen: true });
- }
-
- onConfirmRemoveTrackFile = () => {
- this.props.onDeleteTrackFile();
- this.setState({ isRemoveTrackFileModalOpen: false });
- }
-
- onRemoveTrackFileModalClose = () => {
- this.setState({ isRemoveTrackFileModalOpen: false });
- }
-
- //
- // Render
-
- render() {
- const {
- qualityProfileId,
- overview,
- releaseDate,
- albumLabel,
- path,
- items,
- size,
- quality,
- qualityCutoffNotMet,
- columns
- } = this.props;
-
- const hasOverview = !!overview;
-
- return (
-
-
-
-
- Quality Profile
-
-
-
-
-
- {
- hasOverview ?
- overview :
- 'No album overview.'
- }
-
-
-
- {
-
- {
- items.length ?
-
-
- {
- items.map((item) => {
- return (
-
- );
- })
- }
-
-
:
-
-
- No tracks in this group
-
- }
-
- }
-
-
-
-