Add size and play count/date to Song Details

ui/src/common/SizeField.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const SizeField = ({ record = {}, source }) => {
+  return <span>{formatBytes(record[source])}</span>
+}
+
+function formatBytes(bytes, decimals = 2) {
+  if (bytes === 0) return '0 Bytes'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}
+
+SizeField.propTypes = {
+  label: PropTypes.string,
+  record: PropTypes.object,
+  source: PropTypes.string.isRequired
+}
+
+SizeField.defaultProps = {
+  addLabel: true
+}
+
+export default SizeField

ui/src/common/SongDetails.js

@@ -6,9 +6,10 @@ import {
   DateField,
   TextField
 } from 'react-admin'
-import { BitrateField } from './index'
+import { BitrateField, SizeField } from './index'
 
 const SongDetails = (props) => {
+  const { record } = props
   return (
     <Show {...props} title=" ">
       <SimpleShowLayout>
@@ -18,6 +19,9 @@ const SongDetails = (props) => {
         <BooleanField source="compilation" />
         <BitrateField source="bitRate" />
         <DateField source="updatedAt" showTime />
+        <SizeField source="size" />
+        <TextField source="playCount" />
+        {record.playCount > 0 && <DateField source="playDate" showTime />}
       </SimpleShowLayout>
     </Show>
   )

ui/src/common/index.js

@@ -6,10 +6,12 @@ import PlayButton from './PlayButton'
 import SimpleList from './SimpleList'
 import RangeField, { formatRange } from './RangeField'
 import SongDetails from './SongDetails'
+import SizeField from './SizeField'
 
 export {
   Title,
   DurationField,
+  SizeField,
   BitrateField,
   Pagination,
   PlayButton,