New: Show indicator on poster for deleted series

frontend/src/Series/Details/SeriesDetails.css

@@ -130,6 +130,7 @@
 .sizeOnDisk,
 .qualityProfileName,
 .originalLanguageName,
+.statusName,
 .network,
 .links,
 .tags {

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

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

frontend/src/Series/Details/SeriesDetails.js

@@ -230,7 +230,7 @@ class SeriesDetails extends Component {
     } = this.state;
 
     const statusDetails = getSeriesStatusDetails(status);
-    const runningYears = statusDetails.title === translate('Ended') ? `${year}-${getDateYear(lastAired)}` : `${year}-`;
+    const runningYears = status === 'ended' ? `${year}-${getDateYear(lastAired)}` : `${year}-`;
 
     let episodeFilesCountMessage = translate('SeriesDetailsNoEpisodeFiles');
 
@@ -509,13 +509,14 @@ class SeriesDetails extends Component {
                     className={styles.detailsLabel}
                     title={statusDetails.message}
                     size={sizes.LARGE}
+                    kind={status === 'deleted' ? kinds.INVERSE : undefined}
                   >
                     <div>
                       <Icon
                         name={statusDetails.icon}
                         size={17}
                       />
-                      <span className={styles.qualityProfileName}>
+                      <span className={styles.statusName}>
                         {statusDetails.title}
                       </span>
                     </div>

frontend/src/Series/Index/Overview/SeriesIndexOverview.css

@@ -25,7 +25,7 @@ $hoverScale: 1.05;
   }
 }
 
-.ended {
+.status {
   position: absolute;
   top: 0;
   right: 0;
@@ -34,8 +34,15 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent var(--dangerColor) transparent transparent;
   color: var(--white);
+
+  &.ended {
+    border-color: transparent var(--dangerColor) transparent transparent;
+  }
+
+  &.deleted {
+    border-color: transparent var(--gray) transparent transparent;
+  }
 }
 
 .info {

frontend/src/Series/Index/Overview/SeriesIndexOverview.css.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'actions': string;
   'content': string;
+  'deleted': string;
   'details': string;
   'ended': string;
   'info': string;
@@ -11,6 +12,7 @@ interface CssExports {
   'overviewContainer': string;
   'poster': string;
   'posterContainer': string;
+  'status': string;
   'tags': string;
   'title': string;
   'titleRow': string;

frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import TextTruncate from 'react-text-truncate';
@@ -146,9 +147,19 @@ function SeriesIndexOverview(props: SeriesIndexOverviewProps) {
               <SeriesIndexPosterSelect seriesId={seriesId} />
             ) : null}
 
-            {status === 'ended' && (
-              <div className={styles.ended} title={translate('Ended')} />
-            )}
+            {status === 'ended' ? (
+              <div
+                className={classNames(styles.status, styles.ended)}
+                title={translate('Ended')}
+              />
+            ) : null}
+
+            {status === 'deleted' ? (
+              <div
+                className={classNames(styles.status, styles.deleted)}
+                title={translate('Deleted')}
+              />
+            ) : null}
 
             <Link className={styles.link} style={elementStyle} to={link}>
               <SeriesPoster

frontend/src/Series/Index/Posters/SeriesIndexPoster.css

@@ -71,7 +71,7 @@ $hoverScale: 1.05;
   overflow: hidden;
 }
 
-.ended {
+.status {
   position: absolute;
   top: 0;
   right: 0;
@@ -80,8 +80,15 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent var(--dangerColor) transparent transparent;
   color: var(--white);
+
+  &.ended {
+    border-color: transparent var(--dangerColor) transparent transparent;
+  }
+
+  &.deleted {
+    border-color: transparent var(--gray) transparent transparent;
+  }
 }
 
 .controls {

frontend/src/Series/Index/Posters/SeriesIndexPoster.css.d.ts

@@ -5,11 +5,13 @@ interface CssExports {
   'container': string;
   'content': string;
   'controls': string;
+  'deleted': string;
   'ended': string;
   'link': string;
   'nextAiring': string;
   'overlayTitle': string;
   'posterContainer': string;
+  'status': string;
   'tags': string;
   'tagsList': string;
   'title': string;

frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
@@ -161,7 +162,17 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
         </Label>
 
         {status === 'ended' ? (
-          <div className={styles.ended} title={translate('Ended')} />
+          <div
+            className={classNames(styles.status, styles.ended)}
+            title={translate('Ended')}
+          />
+        ) : null}
+
+        {status === 'deleted' ? (
+          <div
+            className={classNames(styles.status, styles.deleted)}
+            title={translate('Deleted')}
+          />
         ) : null}
 
         <Link className={styles.link} style={elementStyle} to={link}>

frontend/src/Series/Index/ProgressBar/SeriesIndexProgressBar.tsx

@@ -5,6 +5,7 @@ import { sizes } from 'Helpers/Props';
 import createSeriesQueueItemsDetailsSelector, {
   SeriesQueueDetails,
 } from 'Series/Index/createSeriesQueueDetailsSelector';
+import { SeriesStatus } from 'Series/Series';
 import getProgressBarKind from 'Utilities/Series/getProgressBarKind';
 import translate from 'Utilities/String/translate';
 import styles from './SeriesIndexProgressBar.css';
@@ -13,7 +14,7 @@ interface SeriesIndexProgressBarProps {
   seriesId: number;
   seasonNumber?: number;
   monitored: boolean;
-  status: string;
+  status: SeriesStatus;
   episodeCount: number;
   episodeFileCount: number;
   totalEpisodeCount: number;

frontend/src/Series/Index/Table/SeriesStatusCell.tsx

@@ -4,6 +4,7 @@ import Icon from 'Components/Icon';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
 import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
 import { icons } from 'Helpers/Props';
+import { SeriesStatus } from 'Series/Series';
 import { getSeriesStatusDetails } from 'Series/SeriesStatus';
 import { toggleSeriesMonitored } from 'Store/Actions/seriesActions';
 import translate from 'Utilities/String/translate';
@@ -13,7 +14,7 @@ interface SeriesStatusCellProps {
   className: string;
   seriesId: number;
   monitored: boolean;
-  status: string;
+  status: SeriesStatus;
   isSelectMode: boolean;
   isSaving: boolean;
   component?: React.ElementType;

frontend/src/Series/Series.ts

@@ -15,6 +15,8 @@ export type SeriesMonitor =
   | 'unmonitorSpecials'
   | 'none';
 
+export type SeriesStatus = 'continuing' | 'ended' | 'upcoming' | 'deleted';
+
 export type MonitorNewItems = 'all' | 'none';
 
 export interface Image {
@@ -86,7 +88,7 @@ interface Series extends ModelBase {
   seriesType: SeriesType;
   sortTitle: string;
   statistics: Statistics;
-  status: string;
+  status: SeriesStatus;
   tags: number[];
   title: string;
   titleSlug: string;

frontend/src/Series/SeriesStatus.ts

@@ -1,32 +1,31 @@
-
 import { icons } from 'Helpers/Props';
+import { SeriesStatus } from 'Series/Series';
 import translate from 'Utilities/String/translate';
 
-export function getSeriesStatusDetails(status) {
-
+export function getSeriesStatusDetails(status: SeriesStatus) {
   let statusDetails = {
     icon: icons.SERIES_CONTINUING,
     title: translate('Continuing'),
-    message: translate('ContinuingSeriesDescription')
+    message: translate('ContinuingSeriesDescription'),
   };
 
   if (status === 'deleted') {
     statusDetails = {
       icon: icons.SERIES_DELETED,
       title: translate('Deleted'),
-      message: translate('DeletedSeriesDescription')
+      message: translate('DeletedSeriesDescription'),
     };
   } else if (status === 'ended') {
     statusDetails = {
       icon: icons.SERIES_ENDED,
       title: translate('Ended'),
-      message: translate('EndedSeriesDescription')
+      message: translate('EndedSeriesDescription'),
     };
   } else if (status === 'upcoming') {
     statusDetails = {
       icon: icons.SERIES_CONTINUING,
       title: translate('Upcoming'),
-      message: translate('UpcomingSeriesDescription')
+      message: translate('UpcomingSeriesDescription'),
     };
   }
 

frontend/src/Utilities/Series/getProgressBarKind.ts

@@ -1,7 +1,8 @@
 import { kinds } from 'Helpers/Props';
+import { SeriesStatus } from 'Series/Series';
 
 function getProgressBarKind(
-  status: string,
+  status: SeriesStatus,
   monitored: boolean,
   progress: number,
   isDownloading: boolean