Add Song Details to Album view
This commit is contained in:
parent
da45bcf448
commit
f0d18d2cb3
|
@ -14,6 +14,7 @@ import { Card, useMediaQuery } from '@material-ui/core'
|
|||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import { setTrack } from '../audioplayer'
|
||||
import { DurationField } from '../common'
|
||||
import { SongDetails } from '../common'
|
||||
|
||||
const useStyles = makeStyles(
|
||||
(theme) => ({
|
||||
|
@ -64,6 +65,7 @@ const AlbumSongs = (props) => {
|
|||
const classes = useStyles(props)
|
||||
const classesToolbar = useStylesListToolbar(props)
|
||||
const dispatch = useDispatch()
|
||||
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
|
||||
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
|
||||
const controllerProps = useListController(props)
|
||||
const { bulkActionButtons, albumId, expand, className } = props
|
||||
|
@ -106,6 +108,7 @@ const AlbumSongs = (props) => {
|
|||
/>
|
||||
) : (
|
||||
<Datagrid
|
||||
expand={!isXsmall && <SongDetails />}
|
||||
rowClick={(id, basePath, record) => dispatch(setTrack(record))}
|
||||
{...controllerProps}
|
||||
hasBulkActions={hasBulkActions}
|
||||
|
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react'
|
||||
import {
|
||||
Show,
|
||||
SimpleShowLayout,
|
||||
BooleanField,
|
||||
DateField,
|
||||
TextField
|
||||
} from 'react-admin'
|
||||
import { BitrateField } from './index'
|
||||
|
||||
const SongDetails = (props) => {
|
||||
return (
|
||||
<Show {...props} title=" ">
|
||||
<SimpleShowLayout>
|
||||
<TextField source="path" />
|
||||
<TextField source="albumArtist" />
|
||||
<TextField source="genre" />
|
||||
<BooleanField source="compilation" />
|
||||
<BitrateField source="bitRate" />
|
||||
<DateField source="updatedAt" showTime />
|
||||
</SimpleShowLayout>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
export default SongDetails
|
|
@ -5,6 +5,7 @@ import Pagination from './Pagination'
|
|||
import PlayButton from './PlayButton'
|
||||
import SimpleList from './SimpleList'
|
||||
import RangeField, { formatRange } from './RangeField'
|
||||
import SongDetails from './SongDetails'
|
||||
|
||||
export {
|
||||
Title,
|
||||
|
@ -14,5 +15,6 @@ export {
|
|||
PlayButton,
|
||||
SimpleList,
|
||||
RangeField,
|
||||
SongDetails,
|
||||
formatRange
|
||||
}
|
||||
|
|
|
@ -1,20 +1,15 @@
|
|||
import React from 'react'
|
||||
import {
|
||||
BooleanField,
|
||||
Datagrid,
|
||||
DateField,
|
||||
Filter,
|
||||
FunctionField,
|
||||
List,
|
||||
NumberField,
|
||||
SearchInput,
|
||||
Show,
|
||||
SimpleShowLayout,
|
||||
TextField
|
||||
} from 'react-admin'
|
||||
import { useMediaQuery } from '@material-ui/core'
|
||||
import {
|
||||
BitrateField,
|
||||
DurationField,
|
||||
Pagination,
|
||||
PlayButton,
|
||||
|
@ -26,6 +21,7 @@ import { addTrack, setTrack } from '../audioplayer'
|
|||
import AddIcon from '@material-ui/icons/Add'
|
||||
import { SongBulkActions } from './SongBulkActions'
|
||||
import { AlbumLinkField } from './AlbumLinkField'
|
||||
import { SongDetails } from '../common'
|
||||
|
||||
const SongFilter = (props) => (
|
||||
<Filter {...props}>
|
||||
|
@ -33,21 +29,6 @@ const SongFilter = (props) => (
|
|||
</Filter>
|
||||
)
|
||||
|
||||
const SongDetails = (props) => {
|
||||
return (
|
||||
<Show {...props} title=" ">
|
||||
<SimpleShowLayout>
|
||||
<TextField source="path" />
|
||||
<TextField source="albumArtist" />
|
||||
<TextField source="genre" />
|
||||
<BooleanField source="compilation" />
|
||||
<BitrateField source="bitRate" />
|
||||
<DateField source="updatedAt" showTime />
|
||||
</SimpleShowLayout>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
const SongList = (props) => {
|
||||
const dispatch = useDispatch()
|
||||
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
|
||||
|
|
Loading…
Reference in New Issue