mirror of
https://github.com/Sonarr/Sonarr.git
synced 2024-10-29 23:12:39 +01:00
New: Queued episode count for seasons in series details
This commit is contained in:
parent
bfcdc89f6a
commit
1d06e40acb
@ -88,6 +88,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.purple {
|
||||
border-color: var(--purple);
|
||||
background-color: var(--purple);
|
||||
|
||||
&.outline {
|
||||
color: var(--purple);
|
||||
}
|
||||
}
|
||||
|
||||
/** Sizes **/
|
||||
|
||||
.small {
|
||||
|
1
frontend/src/Components/Label.css.d.ts
vendored
1
frontend/src/Components/Label.css.d.ts
vendored
@ -11,6 +11,7 @@ interface CssExports {
|
||||
'medium': string;
|
||||
'outline': string;
|
||||
'primary': string;
|
||||
'purple': string;
|
||||
'small': string;
|
||||
'success': string;
|
||||
'warning': string;
|
||||
|
69
frontend/src/Series/Details/SeasonProgressLabel.tsx
Normal file
69
frontend/src/Series/Details/SeasonProgressLabel.tsx
Normal file
@ -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 (
|
||||
<Label
|
||||
kind={getEpisodeCountKind(
|
||||
monitored,
|
||||
episodeFileCount,
|
||||
episodeCount,
|
||||
queueDetails.count > 0
|
||||
)}
|
||||
size={sizes.LARGE}
|
||||
>
|
||||
<span>{text}</span>
|
||||
</Label>
|
||||
);
|
||||
}
|
||||
|
||||
export default SeasonProgressLabel;
|
@ -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={
|
||||
<Label
|
||||
kind={getEpisodeCountKind(monitored, episodeFileCount, episodeCount)}
|
||||
size={sizes.LARGE}
|
||||
>
|
||||
<span>{episodeFileCount} / {episodeCount}</span>
|
||||
</Label>
|
||||
<SeasonProgressLabel
|
||||
seriesId={seriesId}
|
||||
seasonNumber={seasonNumber}
|
||||
monitored={monitored}
|
||||
episodeCount={episodeCount}
|
||||
episodeFileCount={episodeFileCount}
|
||||
/>
|
||||
}
|
||||
title={translate('SeasonInformation')}
|
||||
body={
|
||||
|
Loading…
Reference in New Issue
Block a user