feat: add song count and duration to AlbumDetails

ui/src/album/AlbumActions.js

@@ -19,7 +19,7 @@ export const AlbumActions = ({
   ...rest
 }) => {
   const dispatch = useDispatch()
-  const translation = useTranslate()
+  const translate = useTranslate()
 
   const shuffle = (data) => {
     const ids = Object.keys(data)
@@ -39,7 +39,7 @@ export const AlbumActions = ({
         onClick={() => {
           dispatch(playAlbum(ids[0], data))
         }}
-        label={translation('resources.album.actions.playAll')}
+        label={translate('resources.album.actions.playAll')}
       >
         <PlayArrowIcon />
       </Button>
@@ -50,7 +50,7 @@ export const AlbumActions = ({
           const firstId = Object.keys(shuffled)[0]
           dispatch(playAlbum(firstId, shuffled))
         }}
-        label={translation('resources.album.actions.shuffle')}
+        label={translate('resources.album.actions.shuffle')}
       >
         <ShuffleIcon />
       </Button>

ui/src/album/AlbumDetails.js

@@ -1,8 +1,11 @@
 import React from 'react'
 import { Card, CardContent, CardMedia, Typography } from '@material-ui/core'
+import { useTranslate } from 'react-admin'
 import { subsonicUrl } from '../subsonic'
+import { DurationField } from '../common'
 
 const AlbumDetails = ({ classes, record }) => {
+  const translate = useTranslate()
   const genreYear = (record) => {
     let genreDateLine = []
     if (record.genre) {
@@ -11,7 +14,7 @@ const AlbumDetails = ({ classes, record }) => {
     if (record.year) {
       genreDateLine.push(record.year)
     }
-    return genreDateLine.join(' - ')
+    return genreDateLine.join(' · ')
   }
 
   return (
@@ -32,6 +35,11 @@ const AlbumDetails = ({ classes, record }) => {
           {record.albumArtist || record.artist}
         </Typography>
         <Typography component="p">{genreYear(record)}</Typography>
+        <Typography component="p">
+          {record.songCount}{' '}
+          {translate('resources.song.name', { smart_count: record.songCount })}{' '}
+          · <DurationField record={record} source={'duration'} />
+        </Typography>
       </CardContent>
     </Card>
   )