/
SongList.js
111 lines (107 loc) 路 3.13 KB
/
SongList.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React from 'react'
import {
Filter,
FunctionField,
NumberField,
SearchInput,
TextField,
} from 'react-admin'
import { useMediaQuery } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import StarBorderIcon from '@material-ui/icons/StarBorder'
import StarIcon from '@material-ui/icons/Star'
import {
DurationField,
List,
SimpleList,
SongContextMenu,
SongDatagrid,
SongDetails,
QuickFilter,
} from '../common'
import { useDispatch } from 'react-redux'
import { setTrack } from '../audioplayer'
import { SongBulkActions } from './SongBulkActions'
import { AlbumLinkField } from './AlbumLinkField'
import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
const useStyles = makeStyles({
columnIcon: {
marginLeft: '3px',
marginTop: '-2px',
verticalAlign: 'text-top',
},
})
const SongFilter = (props) => (
<Filter {...props}>
<SearchInput source="title" alwaysOn />
<QuickFilter
source="starred"
label={<StarIcon fontSize={'small'} />}
defaultValue={true}
/>
</Filter>
)
const SongList = (props) => {
const classes = useStyles()
const dispatch = useDispatch()
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
return (
<>
<List
{...props}
sort={{ field: 'title', order: 'ASC' }}
exporter={false}
bulkActionButtons={<SongBulkActions />}
filters={<SongFilter />}
perPage={isXsmall ? 50 : 15}
>
{isXsmall ? (
<SimpleList
primaryText={(r) => r.title}
secondaryText={(r) => r.artist}
tertiaryText={(r) => (
<>
<DurationField record={r} source={'duration'} />
</>
)}
linkType={(id, basePath, record) => dispatch(setTrack(record))}
rightIcon={(r) => <SongContextMenu record={r} visible={true} />}
/>
) : (
<SongDatagrid
expand={<SongDetails />}
rowClick={(id, basePath, record) => dispatch(setTrack(record))}
>
<TextField source="title" />
{isDesktop && <AlbumLinkField source="album" />}
<TextField source="artist" />
{isDesktop && <NumberField source="trackNumber" />}
{isDesktop && <NumberField source="playCount" />}
{isDesktop && (
<FunctionField source="year" render={(r) => r.year || ''} />
)}
<DurationField source="duration" />
{isDesktop ? (
<SongContextMenu
source={'starred'}
label={
<StarBorderIcon
fontSize={'small'}
className={classes.columnIcon}
/>
}
sortBy={'starred DESC, starredAt DESC'}
/>
) : (
<SongContextMenu showStar={false} />
)}
</SongDatagrid>
)}
</List>
<AddToPlaylistDialog />,
</>
)
}
export default SongList