mirror of
https://github.com/navidrome/navidrome.git
synced 2025-06-10 04:12:29 +03:00
Add size and play count/date to Song Details
This commit is contained in:
parent
f0d18d2cb3
commit
afba4c9915
30
ui/src/common/SizeField.js
Normal file
30
ui/src/common/SizeField.js
Normal file
@ -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
|
@ -6,9 +6,10 @@ import {
|
|||||||
DateField,
|
DateField,
|
||||||
TextField
|
TextField
|
||||||
} from 'react-admin'
|
} from 'react-admin'
|
||||||
import { BitrateField } from './index'
|
import { BitrateField, SizeField } from './index'
|
||||||
|
|
||||||
const SongDetails = (props) => {
|
const SongDetails = (props) => {
|
||||||
|
const { record } = props
|
||||||
return (
|
return (
|
||||||
<Show {...props} title=" ">
|
<Show {...props} title=" ">
|
||||||
<SimpleShowLayout>
|
<SimpleShowLayout>
|
||||||
@ -18,6 +19,9 @@ const SongDetails = (props) => {
|
|||||||
<BooleanField source="compilation" />
|
<BooleanField source="compilation" />
|
||||||
<BitrateField source="bitRate" />
|
<BitrateField source="bitRate" />
|
||||||
<DateField source="updatedAt" showTime />
|
<DateField source="updatedAt" showTime />
|
||||||
|
<SizeField source="size" />
|
||||||
|
<TextField source="playCount" />
|
||||||
|
{record.playCount > 0 && <DateField source="playDate" showTime />}
|
||||||
</SimpleShowLayout>
|
</SimpleShowLayout>
|
||||||
</Show>
|
</Show>
|
||||||
)
|
)
|
||||||
|
@ -6,10 +6,12 @@ import PlayButton from './PlayButton'
|
|||||||
import SimpleList from './SimpleList'
|
import SimpleList from './SimpleList'
|
||||||
import RangeField, { formatRange } from './RangeField'
|
import RangeField, { formatRange } from './RangeField'
|
||||||
import SongDetails from './SongDetails'
|
import SongDetails from './SongDetails'
|
||||||
|
import SizeField from './SizeField'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Title,
|
Title,
|
||||||
DurationField,
|
DurationField,
|
||||||
|
SizeField,
|
||||||
BitrateField,
|
BitrateField,
|
||||||
Pagination,
|
Pagination,
|
||||||
PlayButton,
|
PlayButton,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user