From ebe2ad152045679797add3758b0d58e50ede7ad9 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sun, 24 May 2020 14:38:37 -0700
Subject: [PATCH] New: Show size on disk for each season

Closes #3432
---
 frontend/src/Series/Details/SeasonInfo.js        | 14 ++++++++++++--
 .../src/Series/Details/SeriesDetailsSeason.css   | 10 ++++++++++
 .../src/Series/Details/SeriesDetailsSeason.js    | 16 +++++++++++++++-
 .../Details/SeriesDetailsSeasonConnector.js      |  5 ++---
 4 files changed, 39 insertions(+), 6 deletions(-)

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}
       />
+
+      <DescriptionListItem
+        titleClassName={styles.title}
+        descriptionClassName={styles.description}
+        title="Size on Disk"
+        data={formatBytes(sizeOnDisk)}
+      />
     </DescriptionList>
   );
 }
@@ -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}
                   />
                 </div>
               }
               position={tooltipPositions.BOTTOM}
             />
+
+            {
+              statistics.sizeOnDisk ?
+                <div className={styles.sizeOnDisk}>
+                  {formatBytes(statistics.sizeOnDisk)}
+                </div> :
+                null
+            }
           </div>
 
           <Link
@@ -504,6 +517,7 @@ SeriesDetailsSeason.propTypes = {
   seasonNumber: PropTypes.number.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  statistics: PropTypes.object.isRequired,
   isSaving: PropTypes.bool,
   isExpanded: PropTypes.bool,
   isSearching: PropTypes.bool.isRequired,
diff --git a/frontend/src/Series/Details/SeriesDetailsSeasonConnector.js b/frontend/src/Series/Details/SeriesDetailsSeasonConnector.js
index 12b9a3166..c69c9810c 100644
--- a/frontend/src/Series/Details/SeriesDetailsSeasonConnector.js
+++ b/frontend/src/Series/Details/SeriesDetailsSeasonConnector.js
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -27,8 +26,8 @@ function createMapStateToProps() {
         seasonNumber
       }));
 
-      const episodesInSeason = _.filter(episodes.items, { seasonNumber });
-      const sortedEpisodes = _.orderBy(episodesInSeason, 'episodeNumber', 'desc');
+      const episodesInSeason = episodes.items.filter((episode) => episode.seasonNumber === seasonNumber);
+      const sortedEpisodes = episodesInSeason.sort((a, b) => b.episodeNumber - a.episodeNumber);
 
       return {
         items: sortedEpisodes,