diff --git a/frontend/src/Series/Details/SeasonInfo.js b/frontend/src/Series/Details/SeasonInfo.js index f89542b49..3ea927556 100644 --- a/frontend/src/Series/Details/SeasonInfo.js +++ b/frontend/src/Series/Details/SeasonInfo.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; +import formatBytes from 'Utilities/Number/formatBytes'; import DescriptionList from 'Components/DescriptionList/DescriptionList'; import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem'; import styles from './SeasonInfo.css'; @@ -8,7 +9,8 @@ function SeasonInfo(props) { const { totalEpisodeCount, monitoredEpisodeCount, - episodeFileCount + episodeFileCount, + sizeOnDisk } = props; return ( @@ -33,6 +35,13 @@ function SeasonInfo(props) { title="With Files" data={episodeFileCount} /> + + ); } @@ -40,7 +49,8 @@ function SeasonInfo(props) { SeasonInfo.propTypes = { totalEpisodeCount: PropTypes.number.isRequired, monitoredEpisodeCount: PropTypes.number.isRequired, - episodeFileCount: PropTypes.number.isRequired + episodeFileCount: PropTypes.number.isRequired, + sizeOnDisk: PropTypes.number.isRequired }; export default SeasonInfo; diff --git a/frontend/src/Series/Details/SeriesDetailsSeason.css b/frontend/src/Series/Details/SeriesDetailsSeason.css index 24631da2d..ca421a133 100644 --- a/frontend/src/Series/Details/SeriesDetailsSeason.css +++ b/frontend/src/Series/Details/SeriesDetailsSeason.css @@ -26,6 +26,12 @@ display: flex; } +.sizeOnDisk { + margin-left: 10px; + color: #777; + font-size: $defaultFontSize; +} + .expandButton { composes: link from '~Components/Link/Link.css'; @@ -115,4 +121,8 @@ position: static; margin: 0; } + + .sizeOnDisk { + display: none; + } } diff --git a/frontend/src/Series/Details/SeriesDetailsSeason.js b/frontend/src/Series/Details/SeriesDetailsSeason.js index 25ec6b8e7..b8dd772c9 100644 --- a/frontend/src/Series/Details/SeriesDetailsSeason.js +++ b/frontend/src/Series/Details/SeriesDetailsSeason.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import isAfter from 'Utilities/Date/isAfter'; import isBefore from 'Utilities/Date/isBefore'; +import formatBytes from 'Utilities/Number/formatBytes'; import getToggledRange from 'Utilities/Table/getToggledRange'; import { align, icons, kinds, sizes, tooltipPositions } from 'Helpers/Props'; import Icon from 'Components/Icon'; @@ -33,6 +34,7 @@ function getSeasonStatistics(episodes) { let totalEpisodeCount = 0; let monitoredEpisodeCount = 0; let hasMonitoredEpisodes = false; + const sizeOnDisk = 0; episodes.forEach((episode) => { if (episode.episodeFileId || (episode.monitored && isBefore(episode.airDateUtc))) { @@ -56,7 +58,8 @@ function getSeasonStatistics(episodes) { episodeFileCount, totalEpisodeCount, monitoredEpisodeCount, - hasMonitoredEpisodes + hasMonitoredEpisodes, + sizeOnDisk }; } @@ -205,6 +208,7 @@ class SeriesDetailsSeason extends Component { seasonNumber, items, columns, + statistics, isSaving, isExpanded, isSearching, @@ -271,11 +275,20 @@ class SeriesDetailsSeason extends Component { totalEpisodeCount={totalEpisodeCount} monitoredEpisodeCount={monitoredEpisodeCount} episodeFileCount={episodeFileCount} + sizeOnDisk={statistics.sizeOnDisk} /> } position={tooltipPositions.BOTTOM} /> + + { + statistics.sizeOnDisk ? +
+ {formatBytes(statistics.sizeOnDisk)} +
: + null + } episode.seasonNumber === seasonNumber); + const sortedEpisodes = episodesInSeason.sort((a, b) => b.episodeNumber - a.episodeNumber); return { items: sortedEpisodes,