diff --git a/ui/src/common/SizeField.js b/ui/src/common/SizeField.js new file mode 100644 index 000000000..be895ec99 --- /dev/null +++ b/ui/src/common/SizeField.js @@ -0,0 +1,30 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const SizeField = ({ record = {}, source }) => { + return {formatBytes(record[source])} +} + +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 diff --git a/ui/src/common/SongDetails.js b/ui/src/common/SongDetails.js index 4ea823a8e..4ba32719f 100644 --- a/ui/src/common/SongDetails.js +++ b/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 ( @@ -18,6 +19,9 @@ const SongDetails = (props) => { + + + {record.playCount > 0 && } ) diff --git a/ui/src/common/index.js b/ui/src/common/index.js index c5b435cf0..6d3b14078 100644 --- a/ui/src/common/index.js +++ b/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,