New: Add series progress to details header

frontend/src/Series/Details/SeriesDetails.css

@@ -153,6 +153,13 @@
   padding: 20px;
 }
 
+.seriesProgressLabel {
+  composes: label from '~Components/Label.css';
+
+  margin: 0;
+  font-size: 17px;
+}
+
 @media only screen and (max-width: $breakpointSmall) {
   .contentContainer {
     padding: 20px 0;

frontend/src/Series/Details/SeriesDetails.css.d.ts

@@ -24,6 +24,7 @@ interface CssExports {
   'runtime': string;
   'seriesNavigationButton': string;
   'seriesNavigationButtons': string;
+  'seriesProgressLabel': string;
   'sizeOnDisk': string;
   'statusName': string;
   'tags': string;

frontend/src/Series/Details/SeriesDetails.tsx

@@ -70,6 +70,7 @@ import toggleSelected from 'Utilities/Table/toggleSelected';
 import SeriesAlternateTitles from './SeriesAlternateTitles';
 import SeriesDetailsLinks from './SeriesDetailsLinks';
 import SeriesDetailsSeason from './SeriesDetailsSeason';
+import SeriesProgressLabel from './SeriesProgressLabel';
 import SeriesTags from './SeriesTags';
 import styles from './SeriesDetails.css';
 
@@ -441,7 +442,12 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
     isSaving = false,
   } = series;
 
-  const { episodeFileCount = 0, sizeOnDisk = 0, lastAired } = statistics;
+  const {
+    episodeCount = 0,
+    episodeFileCount = 0,
+    sizeOnDisk = 0,
+    lastAired,
+  } = statistics;
 
   const statusDetails = getSeriesStatusDetails(status);
   const runningYears =
@@ -779,6 +785,14 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
                     position={tooltipPositions.BOTTOM}
                   />
                 ) : null}
+
+                <SeriesProgressLabel
+                  className={styles.seriesProgressLabel}
+                  seriesId={seriesId}
+                  monitored={monitored}
+                  episodeCount={episodeCount}
+                  episodeFileCount={episodeFileCount}
+                />
               </div>
 
               <div ref={overviewRef} className={styles.overview}>

frontend/src/Series/Details/SeriesProgressLabel.tsx

@@ -0,0 +1,70 @@
+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 SeriesProgressLabelProps {
+  className: string;
+  seriesId: number;
+  monitored: boolean;
+  episodeCount: number;
+  episodeFileCount: number;
+}
+
+function SeriesProgressLabel({
+  className,
+  seriesId,
+  monitored,
+  episodeCount,
+  episodeFileCount,
+}: SeriesProgressLabelProps) {
+  const queueDetails: SeriesQueueDetails = useSelector(
+    createSeriesQueueItemsDetailsSelector(seriesId)
+  );
+
+  const newDownloads = queueDetails.count - queueDetails.episodesWithFiles;
+  const text = newDownloads
+    ? `${episodeFileCount} + ${newDownloads} / ${episodeCount}`
+    : `${episodeFileCount} / ${episodeCount}`;
+
+  return (
+    <Label
+      className={className}
+      kind={getEpisodeCountKind(
+        monitored,
+        episodeFileCount,
+        episodeCount,
+        queueDetails.count > 0
+      )}
+      size={sizes.LARGE}
+    >
+      <span>{text}</span>
+    </Label>
+  );
+}
+
+export default SeriesProgressLabel;