From 51085482bc945bb000b3fb0c156e44764f82e831 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Wed, 20 Dec 2023 04:00:47 +0200
Subject: [PATCH] New: Size column for tracks

---
 frontend/src/Album/Details/TrackRow.css         |  1 +
 frontend/src/Album/Details/TrackRow.css.d.ts    |  1 +
 frontend/src/Album/Details/TrackRow.js          | 14 ++++++++++++++
 frontend/src/Album/Details/TrackRowConnector.js |  1 +
 frontend/src/Store/Actions/trackActions.js      |  5 +++++
 5 files changed, 22 insertions(+)

diff --git a/frontend/src/Album/Details/TrackRow.css b/frontend/src/Album/Details/TrackRow.css
index 3162ac9cc..11ebb64fa 100644
--- a/frontend/src/Album/Details/TrackRow.css
+++ b/frontend/src/Album/Details/TrackRow.css
@@ -23,6 +23,7 @@
 }
 
 .duration,
+.size,
 .status {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
diff --git a/frontend/src/Album/Details/TrackRow.css.d.ts b/frontend/src/Album/Details/TrackRow.css.d.ts
index 7b473fe05..c5644a2d4 100644
--- a/frontend/src/Album/Details/TrackRow.css.d.ts
+++ b/frontend/src/Album/Details/TrackRow.css.d.ts
@@ -5,6 +5,7 @@ interface CssExports {
   'customFormatScore': string;
   'duration': string;
   'monitored': string;
+  'size': string;
   'status': string;
   'title': string;
   'trackNumber': string;
diff --git a/frontend/src/Album/Details/TrackRow.js b/frontend/src/Album/Details/TrackRow.js
index a8deb3e98..5f60df882 100644
--- a/frontend/src/Album/Details/TrackRow.js
+++ b/frontend/src/Album/Details/TrackRow.js
@@ -9,6 +9,7 @@ import { tooltipPositions } from 'Helpers/Props';
 import MediaInfoConnector from 'TrackFile/MediaInfoConnector';
 import * as mediaInfoTypes from 'TrackFile/mediaInfoTypes';
 import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import formatBytes from 'Utilities/Number/formatBytes';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import TrackActionsCell from './TrackActionsCell';
 import styles from './TrackRow.css';
@@ -28,6 +29,7 @@ class TrackRow extends Component {
       title,
       duration,
       trackFilePath,
+      trackFileSize,
       customFormats,
       customFormatScore,
       columns,
@@ -145,6 +147,17 @@ class TrackRow extends Component {
               );
             }
 
+            if (name === 'size') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.size}
+                >
+                  {!!trackFileSize && formatBytes(trackFileSize)}
+                </TableRowCell>
+              );
+            }
+
             if (name === 'status') {
               return (
                 <TableRowCell
@@ -192,6 +205,7 @@ TrackRow.propTypes = {
   duration: PropTypes.number.isRequired,
   isSaving: PropTypes.bool,
   trackFilePath: PropTypes.string,
+  trackFileSize: PropTypes.number,
   customFormats: PropTypes.arrayOf(PropTypes.object),
   customFormatScore: PropTypes.number.isRequired,
   mediaInfo: PropTypes.object,
diff --git a/frontend/src/Album/Details/TrackRowConnector.js b/frontend/src/Album/Details/TrackRowConnector.js
index f1bba9fa8..aee72e39a 100644
--- a/frontend/src/Album/Details/TrackRowConnector.js
+++ b/frontend/src/Album/Details/TrackRowConnector.js
@@ -11,6 +11,7 @@ function createMapStateToProps() {
     (id, trackFile) => {
       return {
         trackFilePath: trackFile ? trackFile.path : null,
+        trackFileSize: trackFile ? trackFile.size : null,
         customFormats: trackFile ? trackFile.customFormats : [],
         customFormatScore: trackFile ? trackFile.customFormatScore : 0
       };
diff --git a/frontend/src/Store/Actions/trackActions.js b/frontend/src/Store/Actions/trackActions.js
index 3522939eb..bd1f472c3 100644
--- a/frontend/src/Store/Actions/trackActions.js
+++ b/frontend/src/Store/Actions/trackActions.js
@@ -58,6 +58,11 @@ export const defaultState = {
       label: () => translate('AudioInfo'),
       isVisible: true
     },
+    {
+      name: 'size',
+      label: () => translate('Size'),
+      isVisible: false
+    },
     {
       name: 'customFormats',
       label: 'Formats',