New: Album Status on Cutoff/Wanted/Artist Page

This commit is contained in:
Qstick 2019-10-06 12:06:10 -04:00
parent 9f082c849a
commit 533919ccdd
10 changed files with 221 additions and 26 deletions

View File

@ -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 (
<div className={styles.center}>
<QueueDetails
{...queueItem}
progressBar={
<ProgressBar
title={`Album is downloading - ${progress.toFixed(1)}% ${queueItem.title}`}
progress={progress}
kind={kinds.PURPLE}
size={sizes.MEDIUM}
/>
}
/>
</div>
);
}
if (grabbed) {
return (
<div className={styles.center}>
<Icon
name={icons.DOWNLOADING}
title="Album is downloading"
/>
</div>
);
}
// if (hasTrackFile) {
// const quality = trackFile.quality;
// const isCutoffNotMet = trackFile.qualityCutoffNotMet;
// return (
// <div className={styles.center}>
// <TrackQuality
// quality={quality}
// size={trackFile.size}
// isCutoffNotMet={isCutoffNotMet}
// title="Track Downloaded"
// />
// </div>
// );
// }
if (!releaseDate) {
return (
<div className={styles.center}>
<Icon
name={icons.TBA}
title="TBA"
/>
</div>
);
}
if (!monitored) {
return (
<div className={styles.center}>
<Icon
name={icons.UNMONITORED}
title="Album is not monitored"
/>
</div>
);
}
if (hasReleased) {
return (
<div className={styles.center}>
<Icon
name={icons.MISSING}
title="Album missing from disk"
/>
</div>
);
}
return (
<div className={styles.center}>
<Icon
name={icons.NOT_AIRED}
title="Album has not released"
/>
</div>
);
}
AlbumStatus.propTypes = {
releaseDate: PropTypes.string,
monitored: PropTypes.bool,
grabbed: PropTypes.bool,
queueItem: PropTypes.object
};
export default AlbumStatus;

View File

@ -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 (
<AlbumStatus
{...this.props}
/>
);
}
}
AlbumStatusConnector.propTypes = {
albumId: PropTypes.number.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(AlbumStatusConnector);

View File

@ -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}
>
<EpisodeStatusConnector
<TrackStatusConnector
albumId={id}
trackFileId={trackFileId}
/>

View File

@ -0,0 +1,4 @@
.center {
display: flex;
justify-content: center;
}

View File

@ -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 (
<div className={styles.center}>
<Icon
@ -95,7 +95,7 @@ function EpisodeStatus(props) {
);
}
if (hasAired) {
if (hasReleased) {
return (
<div className={styles.center}>
<Icon
@ -110,18 +110,18 @@ function EpisodeStatus(props) {
<div className={styles.center}>
<Icon
name={icons.NOT_AIRED}
title="Album has not aired"
title="Album has not released"
/>
</div>
);
}
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;

View File

@ -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 (
<EpisodeStatus
<TrackStatus
{...this.props}
/>
);
}
}
EpisodeStatusConnector.propTypes = {
TrackStatusConnector.propTypes = {
albumId: PropTypes.number.isRequired,
trackFileId: PropTypes.number.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(EpisodeStatusConnector);
export default connect(createMapStateToProps, mapDispatchToProps)(TrackStatusConnector);

View File

@ -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;

View File

@ -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}
>
<EpisodeStatusConnector
<AlbumStatusConnector
albumId={id}
trackFileId={trackFileId}
trackFiles={trackFiles}
albumEntity={albumEntities.WANTED_CUTOFF_UNMET}
/>
</TableRowCell>
@ -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,

View File

@ -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
};
}
);