Add size to album details (#561)

* add size to album details

for #534

* addressing review comments:

* create index album(size)
* remove unneeded Size field from refresh struct
* add whitespace to album details
* add size to album list view

* prettier

ui/src/album/AlbumDetails.js

@@ -4,7 +4,7 @@ import { useTranslate } from 'react-admin'
 import Lightbox from 'react-image-lightbox'
 import 'react-image-lightbox/style.css'
 import subsonic from '../subsonic'
-import { DurationField, formatRange, StarButton } from '../common'
+import { DurationField, formatRange, StarButton, SizeField } from '../common'
 import { ArtistLinkField } from '../common'
 
 const AlbumDetails = ({ classes, record }) => {
@@ -48,7 +48,8 @@ const AlbumDetails = ({ classes, record }) => {
         <Typography component="p">
           {record.songCount}{' '}
           {translate('resources.song.name', { smart_count: record.songCount })}{' '}
-          · <DurationField record={record} source={'duration'} />
+          · <DurationField record={record} source={'duration'} /> ·{' '}
+          <SizeField record={record} source="size" />
         </Typography>
         <StarButton record={record} resource={'album'} size={'large'} />
       </CardContent>

ui/src/album/AlbumListView.js

@@ -17,6 +17,7 @@ import {
   DurationField,
   RangeField,
   SimpleList,
+  SizeField,
 } from '../common'
 import { AlbumContextMenu } from '../common'
 import { makeStyles } from '@material-ui/core/styles'
@@ -37,6 +38,7 @@ const AlbumDetails = (props) => {
         <TextField source="genre" />
         <BooleanField source="compilation" />
         <DateField source="updatedAt" showTime />
+        <SizeField source="size" />
       </SimpleShowLayout>
     </Show>
   )