New: Show size on disk for each season

Closes #3432

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;

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;
+  }
 }

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,

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 episodesInSeason = episodes.items.filter((episode) => episode.seasonNumber === seasonNumber);
-      const sortedEpisodes = _.orderBy(episodesInSeason, 'episodeNumber', 'desc');
+      const sortedEpisodes = episodesInSeason.sort((a, b) => b.episodeNumber - a.episodeNumber);
 
       return {
         items: sortedEpisodes,