Change styling for bitRate and size columns

src/components/settings/ListViewColumns.ts

@@ -139,7 +139,7 @@ export const songColumnList = [
       alignment: 'center',
       resizable: true,
       width: 150,
-      label: 'size',
+      label: 'Size',
     },
   },
   {
@@ -301,6 +301,16 @@ export const songColumnListAuto = [
       label: 'Rating',
     },
   },
+  {
+    label: 'Size',
+    value: {
+      id: 'Size',
+      dataKey: 'size',
+      alignment: 'center',
+      flexGrow: 1,
+      label: 'Size',
+    },
+  },
   {
     label: 'Track',
     value: {

src/components/viewtypes/ListViewTable.tsx

@@ -17,7 +17,13 @@ import {
   StyledTableHeaderCell,
   TableCellWrapper,
 } from './styled';
-import { formatSongDuration, isCached, getImageCachePath, formatDate } from '../../shared/utils';
+import {
+  formatSongDuration,
+  isCached,
+  getImageCachePath,
+  formatDate,
+  convertByteToMegabyte,
+} from '../../shared/utils';
 import cacheImage from '../shared/cacheImage';
 import { setRating } from '../../api/api';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
@@ -767,6 +773,8 @@ const ListViewTable = ({
                           formatSongDuration(rowData[column.dataKey])
                         ) : column.dataKey === 'changed' || column.dataKey === 'created' ? (
                           formatDate(rowData[column.dataKey])
+                        ) : column.dataKey === 'size' ? (
+                          `${convertByteToMegabyte(rowData[column.dataKey])} MB`
                         ) : column.dataKey === 'starred' ? (
                           <StyledIconToggle
                             tabIndex={0}
@@ -785,14 +793,14 @@ const ListViewTable = ({
                           />
                         ) : column.dataKey === 'bitRate' ? (
                           !rowData[column.dataKey] ? (
-                            'N/a'
+                            ''
                           ) : (
                             `${rowData[column.dataKey]} kbps`
                           )
                         ) : rowData[column.dataKey] ? (
                           rowData[column.dataKey]
                         ) : (
-                          'N/a'
+                          ''
                         )}
                       </div>
                     </TableCellWrapper>

src/shared/utils.ts

@@ -115,7 +115,11 @@ export const formatSongDuration = (duration: number) => {
 };
 
 export const formatDate = (date: string) => {
-  return moment(date).format('L');
+  return moment(date).format('MMM D YYYY');
+};
+
+export const convertByteToMegabyte = (kb: number) => {
+  return (kb * 0.000001).toFixed(1);
 };
 
 // https://www.geeksforgeeks.org/check-if-array-elements-are-consecutive/