diff --git a/frontend/src/Components/Label.css b/frontend/src/Components/Label.css
index f3ff83993..c7512987a 100644
--- a/frontend/src/Components/Label.css
+++ b/frontend/src/Components/Label.css
@@ -88,6 +88,15 @@
}
}
+.purple {
+ border-color: var(--purple);
+ background-color: var(--purple);
+
+ &.outline {
+ color: var(--purple);
+ }
+}
+
/** Sizes **/
.small {
diff --git a/frontend/src/Components/Label.css.d.ts b/frontend/src/Components/Label.css.d.ts
index 1a0b4d9e0..778ba6faf 100644
--- a/frontend/src/Components/Label.css.d.ts
+++ b/frontend/src/Components/Label.css.d.ts
@@ -11,6 +11,7 @@ interface CssExports {
'medium': string;
'outline': string;
'primary': string;
+ 'purple': string;
'small': string;
'success': string;
'warning': string;
diff --git a/frontend/src/Series/Details/SeasonProgressLabel.tsx b/frontend/src/Series/Details/SeasonProgressLabel.tsx
new file mode 100644
index 000000000..466d5c31b
--- /dev/null
+++ b/frontend/src/Series/Details/SeasonProgressLabel.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import Label from 'Components/Label';
+import { kinds, sizes } from 'Helpers/Props';
+import createSeriesQueueItemsDetailsSelector, {
+ SeriesQueueDetails,
+} from 'Series/Index/createSeriesQueueDetailsSelector';
+
+function getEpisodeCountKind(
+ monitored: boolean,
+ episodeFileCount: number,
+ episodeCount: number,
+ isDownloading: boolean
+) {
+ if (isDownloading) {
+ return kinds.PURPLE;
+ }
+
+ if (episodeFileCount === episodeCount && episodeCount > 0) {
+ return kinds.SUCCESS;
+ }
+
+ if (!monitored) {
+ return kinds.WARNING;
+ }
+
+ return kinds.DANGER;
+}
+
+interface SeasonProgressLabelProps {
+ seriesId: number;
+ seasonNumber: number;
+ monitored: boolean;
+ episodeCount: number;
+ episodeFileCount: number;
+}
+
+function SeasonProgressLabel({
+ seriesId,
+ seasonNumber,
+ monitored,
+ episodeCount,
+ episodeFileCount,
+}: SeasonProgressLabelProps) {
+ const queueDetails: SeriesQueueDetails = useSelector(
+ createSeriesQueueItemsDetailsSelector(seriesId, seasonNumber)
+ );
+
+ const newDownloads = queueDetails.count - queueDetails.episodesWithFiles;
+ const text = newDownloads
+ ? `${episodeFileCount} + ${newDownloads} / ${episodeCount}`
+ : `${episodeFileCount} / ${episodeCount}`;
+
+ return (
+
+ );
+}
+
+export default SeasonProgressLabel;
diff --git a/frontend/src/Series/Details/SeriesDetailsSeason.js b/frontend/src/Series/Details/SeriesDetailsSeason.js
index 4268dddff..9ec7edcc8 100644
--- a/frontend/src/Series/Details/SeriesDetailsSeason.js
+++ b/frontend/src/Series/Details/SeriesDetailsSeason.js
@@ -2,7 +2,6 @@ import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Icon from 'Components/Icon';
-import Label from 'Components/Label';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
@@ -15,7 +14,7 @@ import SpinnerIcon from 'Components/SpinnerIcon';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import Popover from 'Components/Tooltip/Popover';
-import { align, icons, kinds, sizes, sortDirections, tooltipPositions } from 'Helpers/Props';
+import { align, icons, sortDirections, tooltipPositions } from 'Helpers/Props';
import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
import SeriesHistoryModal from 'Series/History/SeriesHistoryModal';
@@ -27,6 +26,7 @@ import translate from 'Utilities/String/translate';
import getToggledRange from 'Utilities/Table/getToggledRange';
import EpisodeRowConnector from './EpisodeRowConnector';
import SeasonInfo from './SeasonInfo';
+import SeasonProgressLabel from './SeasonProgressLabel';
import styles from './SeriesDetailsSeason.css';
function getSeasonStatistics(episodes) {
@@ -64,18 +64,6 @@ function getSeasonStatistics(episodes) {
};
}
-function getEpisodeCountKind(monitored, episodeFileCount, episodeCount) {
- if (episodeFileCount === episodeCount && episodeCount > 0) {
- return kinds.SUCCESS;
- }
-
- if (!monitored) {
- return kinds.WARNING;
- }
-
- return kinds.DANGER;
-}
-
class SeriesDetailsSeason extends Component {
//
@@ -265,12 +253,13 @@ class SeriesDetailsSeason extends Component {
className={styles.episodeCountTooltip}
canFlip={true}
anchor={
-
+
}
title={translate('SeasonInformation')}
body={