From 533919ccdd45221734970f63cd15e68bf29a7b5b Mon Sep 17 00:00:00 2001 From: Qstick Date: Sun, 6 Oct 2019 12:06:10 -0400 Subject: [PATCH] New: Album Status on Cutoff/Wanted/Artist Page --- .../{EpisodeStatus.css => AlbumStatus.css} | 0 frontend/src/Album/AlbumStatus.js | 125 ++++++++++++++++++ frontend/src/Album/AlbumStatusConnector.js | 50 +++++++ frontend/src/Album/Details/TrackRow.js | 4 +- frontend/src/Album/Details/TrackStatus.css | 4 + .../TrackStatus.js} | 22 +-- .../TrackStatusConnector.js} | 12 +- .../createAlbumTrackFilesSelector.js | 13 ++ .../src/Wanted/CutoffUnmet/CutoffUnmetRow.js | 10 +- .../CutoffUnmet/CutoffUnmetRowConnector.js | 7 +- 10 files changed, 221 insertions(+), 26 deletions(-) rename frontend/src/Album/{EpisodeStatus.css => AlbumStatus.css} (100%) create mode 100644 frontend/src/Album/AlbumStatus.js create mode 100644 frontend/src/Album/AlbumStatusConnector.js create mode 100644 frontend/src/Album/Details/TrackStatus.css rename frontend/src/Album/{EpisodeStatus.js => Details/TrackStatus.js} (86%) rename frontend/src/Album/{EpisodeStatusConnector.js => Details/TrackStatusConnector.js} (84%) create mode 100644 frontend/src/Store/Selectors/createAlbumTrackFilesSelector.js diff --git a/frontend/src/Album/EpisodeStatus.css b/frontend/src/Album/AlbumStatus.css similarity index 100% rename from frontend/src/Album/EpisodeStatus.css rename to frontend/src/Album/AlbumStatus.css diff --git a/frontend/src/Album/AlbumStatus.js b/frontend/src/Album/AlbumStatus.js new file mode 100644 index 000000000..5b9b20200 --- /dev/null +++ b/frontend/src/Album/AlbumStatus.js @@ -0,0 +1,125 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import isBefore from 'Utilities/Date/isBefore'; +import { icons, kinds, sizes } from 'Helpers/Props'; +import Icon from 'Components/Icon'; +import ProgressBar from 'Components/ProgressBar'; +import QueueDetails from 'Activity/Queue/QueueDetails'; +// import TrackQuality from './TrackQuality'; +import styles from './AlbumStatus.css'; + +function AlbumStatus(props) { + const { + releaseDate, + monitored, + grabbed, + queueItem + } = props; + + // const hasTrackFile = !!trackFile; + const isQueued = !!queueItem; + const hasReleased = isBefore(releaseDate); + + if (isQueued) { + const { + sizeleft, + size + } = queueItem; + + const progress = (100 - sizeleft / size * 100); + + return ( +
+ + } + /> +
+ ); + } + + if (grabbed) { + return ( +
+ +
+ ); + } + + // if (hasTrackFile) { + // const quality = trackFile.quality; + // const isCutoffNotMet = trackFile.qualityCutoffNotMet; + + // return ( + //
+ // + //
+ // ); + // } + + if (!releaseDate) { + return ( +
+ +
+ ); + } + + if (!monitored) { + return ( +
+ +
+ ); + } + + if (hasReleased) { + return ( +
+ +
+ ); + } + + return ( +
+ +
+ ); +} + +AlbumStatus.propTypes = { + releaseDate: PropTypes.string, + monitored: PropTypes.bool, + grabbed: PropTypes.bool, + queueItem: PropTypes.object +}; + +export default AlbumStatus; diff --git a/frontend/src/Album/AlbumStatusConnector.js b/frontend/src/Album/AlbumStatusConnector.js new file mode 100644 index 000000000..70072df0a --- /dev/null +++ b/frontend/src/Album/AlbumStatusConnector.js @@ -0,0 +1,50 @@ +import _ from 'lodash'; +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; +import createAlbumSelector from 'Store/Selectors/createAlbumSelector'; +import createQueueItemSelector from 'Store/Selectors/createQueueItemSelector'; +// import createTrackFileSelector from 'Store/Selectors/createTrackFileSelector'; +import AlbumStatus from './AlbumStatus'; + +function createMapStateToProps() { + return createSelector( + createAlbumSelector(), + createQueueItemSelector(), + (album, queueItem) => { + const result = _.pick(album, [ + 'releaseDate', + 'monitored', + 'grabbed' + ]); + + result.queueItem = queueItem; + + return result; + } + ); +} + +const mapDispatchToProps = { +}; + +class AlbumStatusConnector extends Component { + + // + // Render + + render() { + return ( + + ); + } +} + +AlbumStatusConnector.propTypes = { + albumId: PropTypes.number.isRequired +}; + +export default connect(createMapStateToProps, mapDispatchToProps)(AlbumStatusConnector); diff --git a/frontend/src/Album/Details/TrackRow.js b/frontend/src/Album/Details/TrackRow.js index 217215f5c..7b645e2ef 100644 --- a/frontend/src/Album/Details/TrackRow.js +++ b/frontend/src/Album/Details/TrackRow.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import TableRow from 'Components/Table/TableRow'; import TableRowCell from 'Components/Table/Cells/TableRowCell'; import formatTimeSpan from 'Utilities/Date/formatTimeSpan'; -import EpisodeStatusConnector from 'Album/EpisodeStatusConnector'; +import TrackStatusConnector from './TrackStatusConnector'; import MediaInfoConnector from 'TrackFile/MediaInfoConnector'; import TrackActionsCell from './TrackActionsCell'; import * as mediaInfoTypes from 'TrackFile/mediaInfoTypes'; @@ -129,7 +129,7 @@ class TrackRow extends Component { key={name} className={styles.status} > - diff --git a/frontend/src/Album/Details/TrackStatus.css b/frontend/src/Album/Details/TrackStatus.css new file mode 100644 index 000000000..3833887df --- /dev/null +++ b/frontend/src/Album/Details/TrackStatus.css @@ -0,0 +1,4 @@ +.center { + display: flex; + justify-content: center; +} diff --git a/frontend/src/Album/EpisodeStatus.js b/frontend/src/Album/Details/TrackStatus.js similarity index 86% rename from frontend/src/Album/EpisodeStatus.js rename to frontend/src/Album/Details/TrackStatus.js index a2c792752..120a3d830 100644 --- a/frontend/src/Album/EpisodeStatus.js +++ b/frontend/src/Album/Details/TrackStatus.js @@ -5,12 +5,12 @@ import { icons, kinds, sizes } from 'Helpers/Props'; import Icon from 'Components/Icon'; import ProgressBar from 'Components/ProgressBar'; import QueueDetails from 'Activity/Queue/QueueDetails'; -import TrackQuality from './TrackQuality'; -import styles from './EpisodeStatus.css'; +import TrackQuality from 'Album/TrackQuality'; +import styles from './TrackStatus.css'; -function EpisodeStatus(props) { +function TrackStatus(props) { const { - airDateUtc, + releaseDate, monitored, grabbed, queueItem, @@ -19,7 +19,7 @@ function EpisodeStatus(props) { const hasTrackFile = !!trackFile; const isQueued = !!queueItem; - const hasAired = isBefore(airDateUtc); + const hasReleased = isBefore(releaseDate); if (isQueued) { const { @@ -73,7 +73,7 @@ function EpisodeStatus(props) { ); } - if (!airDateUtc) { + if (!releaseDate) { return (
); } -EpisodeStatus.propTypes = { - airDateUtc: PropTypes.string, +TrackStatus.propTypes = { + releaseDate: PropTypes.string, monitored: PropTypes.bool, grabbed: PropTypes.bool, queueItem: PropTypes.object, trackFile: PropTypes.object }; -export default EpisodeStatus; +export default TrackStatus; diff --git a/frontend/src/Album/EpisodeStatusConnector.js b/frontend/src/Album/Details/TrackStatusConnector.js similarity index 84% rename from frontend/src/Album/EpisodeStatusConnector.js rename to frontend/src/Album/Details/TrackStatusConnector.js index f3a390748..e6fcf78a9 100644 --- a/frontend/src/Album/EpisodeStatusConnector.js +++ b/frontend/src/Album/Details/TrackStatusConnector.js @@ -6,7 +6,7 @@ import { createSelector } from 'reselect'; import createAlbumSelector from 'Store/Selectors/createAlbumSelector'; import createQueueItemSelector from 'Store/Selectors/createQueueItemSelector'; import createTrackFileSelector from 'Store/Selectors/createTrackFileSelector'; -import EpisodeStatus from './EpisodeStatus'; +import TrackStatus from './TrackStatus'; function createMapStateToProps() { return createSelector( @@ -15,7 +15,7 @@ function createMapStateToProps() { createTrackFileSelector(), (album, queueItem, trackFile) => { const result = _.pick(album, [ - 'airDateUtc', + 'releaseDate', 'monitored', 'grabbed' ]); @@ -31,23 +31,23 @@ function createMapStateToProps() { const mapDispatchToProps = { }; -class EpisodeStatusConnector extends Component { +class TrackStatusConnector extends Component { // // Render render() { return ( - ); } } -EpisodeStatusConnector.propTypes = { +TrackStatusConnector.propTypes = { albumId: PropTypes.number.isRequired, trackFileId: PropTypes.number.isRequired }; -export default connect(createMapStateToProps, mapDispatchToProps)(EpisodeStatusConnector); +export default connect(createMapStateToProps, mapDispatchToProps)(TrackStatusConnector); diff --git a/frontend/src/Store/Selectors/createAlbumTrackFilesSelector.js b/frontend/src/Store/Selectors/createAlbumTrackFilesSelector.js new file mode 100644 index 000000000..69c7f5197 --- /dev/null +++ b/frontend/src/Store/Selectors/createAlbumTrackFilesSelector.js @@ -0,0 +1,13 @@ +import { createSelector } from 'reselect'; + +function createAlbumTrackFilesSelector() { + return createSelector( + (state, { albumId }) => albumId, + (state) => state.trackFiles(), + (albumId, trackFiles) => { + return trackFiles.find((trackFile) => trackFile.albumId === albumId ); + } + ); +} + +export default createAlbumTrackFilesSelector; diff --git a/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js index 6cf592fa6..8d58da761 100644 --- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js +++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import albumEntities from 'Album/albumEntities'; import AlbumTitleLink from 'Album/AlbumTitleLink'; -import EpisodeStatusConnector from 'Album/EpisodeStatusConnector'; +import AlbumStatusConnector from 'Album/AlbumStatusConnector'; import AlbumSearchCellConnector from 'Album/AlbumSearchCellConnector'; import ArtistNameLink from 'Artist/ArtistNameLink'; import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector'; @@ -14,8 +14,8 @@ import styles from './CutoffUnmetRow.css'; function CutoffUnmetRow(props) { const { id, - trackFileId, artist, + trackFiles, releaseDate, foreignAlbumId, albumType, @@ -95,9 +95,9 @@ function CutoffUnmetRow(props) { key={name} className={styles.status} > - @@ -126,8 +126,8 @@ function CutoffUnmetRow(props) { CutoffUnmetRow.propTypes = { id: PropTypes.number.isRequired, - trackFileId: PropTypes.number, artist: PropTypes.object.isRequired, + trackFiles: PropTypes.arrayOf(PropTypes.object), releaseDate: PropTypes.string.isRequired, foreignAlbumId: PropTypes.string.isRequired, albumType: PropTypes.string.isRequired, diff --git a/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRowConnector.js b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRowConnector.js index 625055c57..833609d26 100644 --- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRowConnector.js +++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRowConnector.js @@ -1,14 +1,17 @@ import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import createArtistSelector from 'Store/Selectors/createArtistSelector'; +import createAlbumTrackFilesSelector from 'Store/Selectors/createAlbumTrackFilesSelector'; import CutoffUnmetRow from './CutoffUnmetRow'; function createMapStateToProps() { return createSelector( createArtistSelector(), - (artist) => { + createAlbumTrackFilesSelector(), + (artist, trackFiles) => { return { - artist + artist, + trackFiles }; } );