From 7682fddec0f55b81581e367fef1d766b0f8b0090 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Mon, 16 Jan 2023 15:00:50 -0500
Subject: [PATCH] Add Size column to Artist and Album views

---
 ui/src/album/AlbumList.js      |  3 ++-
 ui/src/album/AlbumTableView.js |  2 ++
 ui/src/artist/ArtistList.js    | 15 ++++++++++-----
 ui/src/i18n/en.json            |  2 ++
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/ui/src/album/AlbumList.js b/ui/src/album/AlbumList.js
index 09446fb6..d1f79df9 100644
--- a/ui/src/album/AlbumList.js
+++ b/ui/src/album/AlbumList.js
@@ -103,9 +103,10 @@ const AlbumList = (props) => {
       'year',
       'duration',
       'rating',
+      'size',
       'createdAt',
     ],
-    ['createdAt']
+    ['createdAt', 'size']
   )
 
   // If it does not have filter/sort params (usually coming from Menu),
diff --git a/ui/src/album/AlbumTableView.js b/ui/src/album/AlbumTableView.js
index 6d7fa43a..b11d55f0 100644
--- a/ui/src/album/AlbumTableView.js
+++ b/ui/src/album/AlbumTableView.js
@@ -19,6 +19,7 @@ import {
   AlbumContextMenu,
   RatingField,
   useSelectedFields,
+  SizeField,
 } from '../common'
 import config from '../config'
 import { DraggableTypes } from '../consts'
@@ -95,6 +96,7 @@ const AlbumTableView = ({
         <RangeField source={'year'} sortBy={'max_year'} sortByOrder={'DESC'} />
       ),
       duration: isDesktop && <DurationField source="duration" />,
+      size: isDesktop && <SizeField source="size" />,
       rating: config.enableStarRating && (
         <RatingField
           source={'rating'}
diff --git a/ui/src/artist/ArtistList.js b/ui/src/artist/ArtistList.js
index 427d4cbe..c22f61c1 100644
--- a/ui/src/artist/ArtistList.js
+++ b/ui/src/artist/ArtistList.js
@@ -27,6 +27,7 @@ import {
   RatingField,
   useSelectedFields,
   useResourceRefresh,
+  SizeField,
 } from '../common'
 import config from '../config'
 import ArtistListActions from './ArtistListActions'
@@ -115,6 +116,7 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
     return {
       albumCount: <NumberField source="albumCount" sortByOrder={'DESC'} />,
       songCount: <NumberField source="songCount" sortByOrder={'DESC'} />,
+      size: !isXsmall && <SizeField source="size" />,
       playCount: <NumberField source="playCount" sortByOrder={'DESC'} />,
       rating: config.enableStarRating && (
         <RatingField
@@ -125,12 +127,15 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
         />
       ),
     }
-  }, [classes.ratingField])
+  }, [classes.ratingField, isXsmall])
 
-  const columns = useSelectedFields({
-    resource: 'artist',
-    columns: toggleableFields,
-  })
+  const columns = useSelectedFields(
+    {
+      resource: 'artist',
+      columns: toggleableFields,
+    },
+    ['size']
+  )
 
   return isXsmall ? (
     <ArtistSimpleList
diff --git a/ui/src/i18n/en.json b/ui/src/i18n/en.json
index dd4a4942..5946a5ae 100644
--- a/ui/src/i18n/en.json
+++ b/ui/src/i18n/en.json
@@ -46,6 +46,7 @@
                 "duration": "Time",
                 "songCount": "Songs",
                 "playCount": "Plays",
+                "size": "Size",
                 "name": "Name",
                 "genre": "Genre",
                 "compilation": "Compilation",
@@ -80,6 +81,7 @@
                 "name": "Name",
                 "albumCount": "Album Count",
                 "songCount": "Song Count",
+                "size": "Size",
                 "playCount": "Plays",
                 "rating": "Rating",
                 "genre": "Genre"