arian/navidrome
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Make Players and Transcodings view mobile-friendly

Browse Source
This commit is contained in:
Deluan
2020-04-19 13:54:51 -04:00
parent f83d0d471d
commit 579294b0f1
2 changed files with 50 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/player/PlayerList.js
+27 -15
View File
@@ -7,22 +7,34 @@ import {
FunctionField, FunctionField,
ReferenceField ReferenceField
} from 'react-admin' } from 'react-admin'
import { Title } from '../common' import { useMediaQuery } from '@material-ui/core'
import { SimpleList, Title } from '../common'
const PlayerList = (props) => ( const PlayerList = (props) => {
<List title={<Title subTitle={'Players'} />} exporter={false} {...props}> const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
<Datagrid rowClick="edit"> return (
<TextField source="name" /> <List title={<Title subTitle={'Players'} />} exporter={false} {...props}>
<ReferenceField source="transcodingId" reference="transcoding"> {isXsmall ? (
<SimpleList
primaryText={(r) => r.client}
secondaryText={(r) => r.userName}
tertiaryText={(r) => (r.maxBitRate ? r.maxBitRate : 'Unlimited')}
/>
) : (
<Datagrid rowClick="edit">
<TextField source="name" /> <TextField source="name" />
</ReferenceField> <ReferenceField source="transcodingId" reference="transcoding">
<FunctionField <TextField source="name" />
source="maxBitRate" </ReferenceField>
render={(r) => (r.maxBitRate ? r.maxBitRate : 'Unlimited')} <FunctionField
/> source="maxBitRate"
<DateField source="lastSeen" showTime /> render={(r) => (r.maxBitRate ? r.maxBitRate : 'Unlimited')}
</Datagrid> />
</List> <DateField source="lastSeen" showTime />
) </Datagrid>
)}
</List>
)
}
export default PlayerList export default PlayerList
ui/src/transcoding/TranscodingList.js
+23 -11
View File
@@ -1,16 +1,28 @@
import React from 'react' import React from 'react'
import { Datagrid, List, TextField } from 'react-admin' import { Datagrid, List, TextField } from 'react-admin'
import { Title } from '../common' import { useMediaQuery } from '@material-ui/core'
import { SimpleList, Title } from '../common'
const TranscodingList = (props) => ( const TranscodingList = (props) => {
<List title={<Title subTitle={'Transcodings'} />} exporter={false} {...props}> const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
<Datagrid rowClick="edit"> return (
<TextField source="name" /> <List title={<Title subTitle={'Transcodings'} />} exporter={false} {...props}>
<TextField source="targetFormat" /> {isXsmall ? (
<TextField source="defaultBitRate" /> <SimpleList
<TextField source="command" /> primaryText={(r) => r.name}
</Datagrid> secondaryText={(r) => `format: ${r.targetFormat}`}
</List> tertiaryText={(r) => r.defaultBitRate}
) />
) : (
<Datagrid rowClick="edit">
<TextField source="name" />
<TextField source="targetFormat" />
<TextField source="defaultBitRate" />
<TextField source="command" />
</Datagrid>
)}
</List>
)
}
export default TranscodingList export default TranscodingList