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={