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

Added individual AddToPlaylistDialogs to each list view

Browse Source
This commit is contained in:
Deluan
2020-05-25 18:34:31 -04:00
committed by Deluan Quintão
parent 00811f8000
commit f9dae2dd2a
5 changed files with 82 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/song/SongList.js
+56 -52
View File
@@ -23,6 +23,7 @@ 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: {
@@ -48,58 +49,61 @@ const SongList = (props) => {
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'} />
&nbsp;&nbsp;&nbsp;
</>
)}
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>
<>
<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'} />
&nbsp;&nbsp;&nbsp;
</>
)}
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 />,
</>
)
}