third-party-mirrors/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2025-06-06 18:33:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: song list xsmall view

Browse Source
This commit is contained in:
Deluan 2020-02-05 18:16:00 -05:00
parent cc229dcee6
commit c57007db52
3 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/src/player/Player.js
View File

@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
import { fetchUtils, useAuthState, useDataProvider } from 'react-admin' import { fetchUtils, useAuthState, useDataProvider } from 'react-admin'
import ReactJkMusicPlayer from 'react-jinke-music-player' import ReactJkMusicPlayer from 'react-jinke-music-player'
import 'react-jinke-music-player/assets/index.css' import 'react-jinke-music-player/assets/index.css'
import { markScrobbled, syncQueue } from './queue' import { scrobble, syncQueue } from './queue'
const defaultOptions = { const defaultOptions = {
bounds: 'body', bounds: 'body',
@ -55,7 +55,7 @@ const Player = () => {
} }
const item = queue.queue.find((item) => item.id === info.id) const item = queue.queue.find((item) => item.id === info.id)
if (item && !item.scrobbled) { if (item && !item.scrobbled) {
dispatch(markScrobbled(info.id, true)) dispatch(scrobble(info.id))
fetchUtils.fetchJson( fetchUtils.fetchJson(
`/rest/scrobble?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=NavidromeUI&id=${info.id}&submission=true` `/rest/scrobble?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=NavidromeUI&id=${info.id}&submission=true`
) )
@ -63,13 +63,10 @@ const Player = () => {
} }
const OnAudioPlay = (info) => { const OnAudioPlay = (info) => {
console.log('AUDIOPLAY: ', info)
if (info.duration) { if (info.duration) {
dispatch(markScrobbled(info.id, false))
fetchUtils.fetchJson( fetchUtils.fetchJson(
`/rest/scrobble?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=NavidromeUI&id=${info.id}&submission=false` `/rest/scrobble?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=NavidromeUI&id=${info.id}&submission=false`
) )
//
dataProvider.getOne('keepalive', { id: info.id }) dataProvider.getOne('keepalive', { id: info.id })
} }
} }

8
ui/src/player/queue.js
View File

@ -30,9 +30,9 @@ const syncQueue = (data) => ({
data data
}) })
const markScrobbled = (id, submission = false) => ({ const scrobble = (id) => ({
type: PLAYER_SCROBBLE, type: PLAYER_SCROBBLE,
data: { id, submission } data: id
}) })
const playQueueReducer = ( const playQueueReducer = (
@ -52,7 +52,7 @@ const playQueueReducer = (
const newQueue = previousState.queue.map((item) => { const newQueue = previousState.queue.map((item) => {
return { return {
...item, ...item,
scrobbled: item.scrobbled || (item.id === data.id && data.submission) scrobbled: item.scrobbled || (item.id === data)
} }
}) })
return { queue: newQueue, clear: false } return { queue: newQueue, clear: false }
@ -61,4 +61,4 @@ const playQueueReducer = (
} }
} }
export { addTrack, setTrack, syncQueue, markScrobbled, playQueueReducer } export { addTrack, setTrack, syncQueue, scrobble, playQueueReducer }

41
ui/src/song/SongList.js
View File

@ -10,8 +10,10 @@ import {
Show, Show,
SimpleShowLayout, SimpleShowLayout,
TextField, TextField,
TextInput TextInput,
SimpleList
} from 'react-admin' } from 'react-admin'
import { useMediaQuery } from '@material-ui/core'
import { BitrateField, DurationField, Pagination, Title } from '../common' import { BitrateField, DurationField, Pagination, Title } from '../common'
import AddToQueueButton from './AddToQueueButton' import AddToQueueButton from './AddToQueueButton'
import PlayButton from './PlayButton' import PlayButton from './PlayButton'
@ -46,6 +48,7 @@ const SongDetails = (props) => {
} }
const SongList = (props) => { const SongList = (props) => {
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
return ( return (
<List <List
{...props} {...props}
@ -57,16 +60,32 @@ const SongList = (props) => {
perPage={15} perPage={15}
pagination={<Pagination />} pagination={<Pagination />}
> >
<Datagrid expand={<SongDetails />}> {isXsmall ? (
<PlayButton {...props} /> <SimpleList
<TextField source="title" /> primaryText={(record) => (
<TextField source="album" /> <>
<TextField source="artist" /> <PlayButton record={record} />
<NumberField label="Track #" source="trackNumber" /> {record.title}
<NumberField label="Disc #" source="discNumber" /> </>
<TextField source="year" /> )}
<DurationField label="Time" source="duration" /> secondaryText={(record) => record.artist}
</Datagrid> tertiaryText={(record) => (
<DurationField record={record} source={'duration'} />
)}
linkType={false}
/>
) : (
<Datagrid expand={<SongDetails />}>
<PlayButton {...props} />
<TextField source="title" />
<TextField source="album" />
<TextField source="artist" />
<NumberField label="Track #" source="trackNumber" />
<NumberField label="Disc #" source="discNumber" />
<TextField source="year" />
<DurationField label="Time" source="duration" />
</Datagrid>
)}
</List> </List>
) )
} }