New: Display stats for delete multiple series modal

frontend/src/Series/Delete/DeleteSeriesModalContent.css

@@ -14,4 +14,9 @@
 .deleteFilesMessage {
   margin-top: 20px;
   color: var(--dangerColor);
+
+  .deleteCount {
+    margin-top: 20px;
+    color: var(--warningColor);
+  }
 }

frontend/src/Series/Delete/DeleteSeriesModalContent.css.d.ts

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'deleteCount': string;
   'deleteFilesMessage': string;
   'folderPath': string;
   'pathContainer': string;

frontend/src/Series/Delete/DeleteSeriesModalContent.js

@@ -50,15 +50,15 @@ class DeleteSeriesModalContent extends Component {
     const {
       title,
       path,
-      statistics,
+      statistics = {},
       deleteOptions,
       onModalClose,
       onDeleteOptionChange
     } = this.props;
 
     const {
-      episodeFileCount,
-      sizeOnDisk
+      episodeFileCount = 0,
+      sizeOnDisk = 0
     } = statistics;
 
     const deleteFiles = this.state.deleteFiles;
@@ -108,16 +108,20 @@ class DeleteSeriesModalContent extends Component {
           </FormGroup>
 
           {
-            deleteFiles &&
+            deleteFiles ?
               <div className={styles.deleteFilesMessage}>
                 <div><InlineMarkdown data={translate('DeleteSeriesFolderConfirmation', { path })} blockClassName={styles.folderPath} /></div>
+
                 {
-                  !!episodeFileCount &&
-                    <div>{translate('DeleteSeriesFolderEpisodeCount', { episodeFileCount, size: formatBytes(sizeOnDisk) })}</div>
+                  episodeFileCount ?
+                    <div className={styles.deleteCount}>
+                      {translate('DeleteSeriesFolderEpisodeCount', { episodeFileCount, size: formatBytes(sizeOnDisk) })}
+                    </div> :
+                    null
                 }
-              </div>
+              </div> :
+              null
           }
-
         </ModalBody>
 
         <ModalFooter>

frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css

@@ -10,4 +10,15 @@
 .path {
   margin-left: 5px;
   color: var(--dangerColor);
+  font-weight: bold;
+}
+
+.statistics {
+  margin-left: 5px;
+  color: var(--warningColor);
+}
+
+.deleteFilesMessage {
+  margin-top: 20px;
+  color: var(--warningColor);
 }

frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css.d.ts

@@ -1,9 +1,11 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'deleteFilesMessage': string;
   'message': string;
   'path': string;
   'pathContainer': string;
+  'statistics': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.tsx

@@ -16,6 +16,7 @@ import Series from 'Series/Series';
 import { bulkDeleteSeries, setDeleteOption } from 'Store/Actions/seriesActions';
 import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
 import { CheckInputChanged } from 'typings/inputs';
+import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
 import styles from './DeleteSeriesModalContent.css';
 
@@ -85,6 +86,24 @@ function DeleteSeriesModalContent(props: DeleteSeriesModalContentProps) {
     onModalClose,
   ]);
 
+  const { totalEpisodeFileCount, totalSizeOnDisk } = useMemo(() => {
+    return series.reduce(
+      (acc, s) => {
+        const { statistics = { episodeFileCount: 0, sizeOnDisk: 0 } } = s;
+        const { episodeFileCount = 0, sizeOnDisk = 0 } = statistics;
+
+        acc.totalEpisodeFileCount += episodeFileCount;
+        acc.totalSizeOnDisk += sizeOnDisk;
+
+        return acc;
+      },
+      {
+        totalEpisodeFileCount: 0,
+        totalSizeOnDisk: 0,
+      }
+    );
+  }, [series]);
+
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>{translate('DeleteSelectedSeries')}</ModalHeader>
@@ -137,19 +156,43 @@ function DeleteSeriesModalContent(props: DeleteSeriesModalContentProps) {
 
         <ul>
           {series.map((s) => {
+            const { episodeFileCount = 0, sizeOnDisk = 0 } = s.statistics;
+
             return (
               <li key={s.title}>
                 <span>{s.title}</span>
 
                 {deleteFiles && (
-                  <span className={styles.pathContainer}>
-                    -<span className={styles.path}>{s.path}</span>
+                  <span>
+                    <span className={styles.pathContainer}>
+                      -<span className={styles.path}>{s.path}</span>
+                    </span>
+
+                    {!!episodeFileCount && (
+                      <span className={styles.statistics}>
+                        (
+                        {translate('DeleteSeriesFolderEpisodeCount', {
+                          episodeFileCount,
+                          size: formatBytes(sizeOnDisk),
+                        })}
+                        )
+                      </span>
+                    )}
                   </span>
                 )}
               </li>
             );
           })}
         </ul>
+
+        {deleteFiles && !!totalEpisodeFileCount ? (
+          <div className={styles.deleteFilesMessage}>
+            {translate('DeleteSeriesFolderEpisodeCount', {
+              episodeFileCount: totalEpisodeFileCount,
+              size: formatBytes(totalSizeOnDisk),
+            })}
+          </div>
+        ) : null}
       </ModalBody>
 
       <ModalFooter>