diff --git a/frontend/src/Series/Delete/DeleteSeriesModalContent.css b/frontend/src/Series/Delete/DeleteSeriesModalContent.css
index a6ac76133..d19745c2b 100644
--- a/frontend/src/Series/Delete/DeleteSeriesModalContent.css
+++ b/frontend/src/Series/Delete/DeleteSeriesModalContent.css
@@ -14,4 +14,9 @@
.deleteFilesMessage {
margin-top: 20px;
color: var(--dangerColor);
+
+ .deleteCount {
+ margin-top: 20px;
+ color: var(--warningColor);
+ }
}
diff --git a/frontend/src/Series/Delete/DeleteSeriesModalContent.css.d.ts b/frontend/src/Series/Delete/DeleteSeriesModalContent.css.d.ts
index f43438341..2b4dea066 100644
--- a/frontend/src/Series/Delete/DeleteSeriesModalContent.css.d.ts
+++ b/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;
diff --git a/frontend/src/Series/Delete/DeleteSeriesModalContent.js b/frontend/src/Series/Delete/DeleteSeriesModalContent.js
index 2af242499..233f355e1 100644
--- a/frontend/src/Series/Delete/DeleteSeriesModalContent.js
+++ b/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 {
{
- deleteFiles &&
+ deleteFiles ?
+
{
- !!episodeFileCount &&
-
{translate('DeleteSeriesFolderEpisodeCount', { episodeFileCount, size: formatBytes(sizeOnDisk) })}
+ episodeFileCount ?
+
+ {translate('DeleteSeriesFolderEpisodeCount', { episodeFileCount, size: formatBytes(sizeOnDisk) })}
+
:
+ null
}
-
+ :
+ null
}
-
diff --git a/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css b/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css
index 02a0514be..09cf7e58b 100644
--- a/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css
+++ b/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);
}
diff --git a/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css.d.ts b/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css.d.ts
index bcc2e2492..ca4650422 100644
--- a/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.css.d.ts
+++ b/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;
diff --git a/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.tsx b/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.tsx
index 8904a24ce..ea35657e3 100644
--- a/frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.tsx
+++ b/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 (
{translate('DeleteSelectedSeries')}
@@ -137,19 +156,43 @@ function DeleteSeriesModalContent(props: DeleteSeriesModalContentProps) {
{series.map((s) => {
+ const { episodeFileCount = 0, sizeOnDisk = 0 } = s.statistics;
+
return (
-
{s.title}
{deleteFiles && (
-
- -{s.path}
+
+
+ -{s.path}
+
+
+ {!!episodeFileCount && (
+
+ (
+ {translate('DeleteSeriesFolderEpisodeCount', {
+ episodeFileCount,
+ size: formatBytes(sizeOnDisk),
+ })}
+ )
+
+ )}
)}
);
})}
+
+ {deleteFiles && !!totalEpisodeFileCount ? (
+
+ {translate('DeleteSeriesFolderEpisodeCount', {
+ episodeFileCount: totalEpisodeFileCount,
+ size: formatBytes(totalSizeOnDisk),
+ })}
+
+ ) : null}