2021-05-24 17:09:06 +02:00
|
|
|
import React, { useCallback, useMemo } from 'react'
|
2020-05-15 19:48:33 +02:00
|
|
|
import {
|
|
|
|
BulkActionsToolbar,
|
|
|
|
ListToolbar,
|
|
|
|
TextField,
|
2021-05-06 03:35:01 +02:00
|
|
|
NumberField,
|
2020-06-05 01:05:41 +02:00
|
|
|
useDataProvider,
|
|
|
|
useNotify,
|
2020-11-26 23:00:53 +01:00
|
|
|
useVersion,
|
|
|
|
useListContext,
|
2021-06-28 15:45:30 +02:00
|
|
|
FunctionField,
|
2020-05-15 19:48:33 +02:00
|
|
|
} from 'react-admin'
|
2020-11-28 00:27:32 +01:00
|
|
|
import clsx from 'clsx'
|
2020-06-09 14:54:11 +02:00
|
|
|
import { useDispatch } from 'react-redux'
|
2020-05-15 19:48:33 +02:00
|
|
|
import { Card, useMediaQuery } from '@material-ui/core'
|
|
|
|
import { makeStyles } from '@material-ui/core/styles'
|
2020-06-05 01:05:41 +02:00
|
|
|
import ReactDragListView from 'react-drag-listview'
|
2020-05-23 02:15:58 +02:00
|
|
|
import {
|
|
|
|
DurationField,
|
2021-09-21 02:30:43 +02:00
|
|
|
SongInfo,
|
2020-05-23 02:15:58 +02:00
|
|
|
SongContextMenu,
|
2020-05-26 22:18:28 +02:00
|
|
|
SongDatagrid,
|
2020-06-19 15:12:45 +02:00
|
|
|
SongTitleField,
|
2021-05-26 15:35:13 +02:00
|
|
|
QualityInfo,
|
|
|
|
useSelectedFields,
|
2021-06-10 18:20:52 +02:00
|
|
|
useResourceRefresh,
|
2021-10-20 15:37:25 +02:00
|
|
|
DateField,
|
2021-11-06 01:25:12 +01:00
|
|
|
ArtistLinkField,
|
2020-05-23 02:15:58 +02:00
|
|
|
} from '../common'
|
2020-05-30 17:17:33 +02:00
|
|
|
import { AlbumLinkField } from '../song/AlbumLinkField'
|
2020-11-08 19:15:46 +01:00
|
|
|
import { playTracks } from '../actions'
|
2020-11-26 23:00:53 +01:00
|
|
|
import PlaylistSongBulkActions from './PlaylistSongBulkActions'
|
2021-09-21 02:30:43 +02:00
|
|
|
import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
|
2020-05-15 19:48:33 +02:00
|
|
|
|
|
|
|
const useStyles = makeStyles(
|
|
|
|
(theme) => ({
|
|
|
|
root: {},
|
|
|
|
main: {
|
|
|
|
display: 'flex',
|
|
|
|
},
|
|
|
|
content: {
|
|
|
|
marginTop: 0,
|
|
|
|
transition: theme.transitions.create('margin-top'),
|
|
|
|
position: 'relative',
|
|
|
|
flex: '1 1 auto',
|
|
|
|
[theme.breakpoints.down('xs')]: {
|
|
|
|
boxShadow: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
bulkActionsDisplayed: {
|
|
|
|
marginTop: -theme.spacing(8),
|
|
|
|
transition: theme.transitions.create('margin-top'),
|
|
|
|
},
|
|
|
|
actions: {
|
|
|
|
zIndex: 2,
|
|
|
|
display: 'flex',
|
|
|
|
justifyContent: 'flex-end',
|
|
|
|
flexWrap: 'wrap',
|
|
|
|
},
|
|
|
|
noResults: { padding: 20 },
|
2020-11-26 23:00:53 +01:00
|
|
|
toolbar: {
|
|
|
|
justifyContent: 'flex-start',
|
|
|
|
},
|
|
|
|
row: {
|
|
|
|
'&:hover': {
|
|
|
|
'& $contextMenu': {
|
|
|
|
visibility: 'visible',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
contextMenu: {
|
2020-11-28 05:52:23 +01:00
|
|
|
visibility: (props) => (props.isDesktop ? 'hidden' : 'visible'),
|
2020-11-26 23:00:53 +01:00
|
|
|
},
|
2020-05-15 19:48:33 +02:00
|
|
|
}),
|
|
|
|
{ name: 'RaList' }
|
|
|
|
)
|
|
|
|
|
2020-06-05 16:22:31 +02:00
|
|
|
const ReorderableList = ({ readOnly, children, ...rest }) => {
|
|
|
|
if (readOnly) {
|
|
|
|
return children
|
|
|
|
}
|
|
|
|
return <ReactDragListView {...rest}>{children}</ReactDragListView>
|
|
|
|
}
|
|
|
|
|
2021-04-06 00:21:47 +02:00
|
|
|
const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
|
|
|
|
const listContext = useListContext()
|
2021-10-28 02:53:58 +02:00
|
|
|
const { data, ids, selectedIds, onUnselectItems, refetch } = listContext
|
2020-05-19 00:00:55 +02:00
|
|
|
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
|
2020-11-28 05:52:23 +01:00
|
|
|
const classes = useStyles({ isDesktop })
|
|
|
|
const dispatch = useDispatch()
|
2020-06-05 01:05:41 +02:00
|
|
|
const dataProvider = useDataProvider()
|
|
|
|
const notify = useNotify()
|
2020-11-26 23:00:53 +01:00
|
|
|
const version = useVersion()
|
2021-06-10 18:20:52 +02:00
|
|
|
useResourceRefresh('song', 'playlist')
|
2020-05-15 19:48:33 +02:00
|
|
|
|
2020-11-26 23:00:53 +01:00
|
|
|
const onAddToPlaylist = useCallback(
|
|
|
|
(pls) => {
|
2023-02-06 16:40:29 +01:00
|
|
|
if (pls.id === playlistId) {
|
2021-10-28 02:53:58 +02:00
|
|
|
refetch()
|
2020-11-26 23:00:53 +01:00
|
|
|
}
|
|
|
|
},
|
2021-10-28 02:53:58 +02:00
|
|
|
[playlistId, refetch]
|
2020-11-26 23:00:53 +01:00
|
|
|
)
|
2020-05-16 02:47:15 +02:00
|
|
|
|
2020-11-26 23:00:53 +01:00
|
|
|
const reorder = useCallback(
|
|
|
|
(playlistId, id, newPos) => {
|
|
|
|
dataProvider
|
|
|
|
.update('playlistTrack', {
|
|
|
|
id,
|
|
|
|
data: { insert_before: newPos },
|
|
|
|
filter: { playlist_id: playlistId },
|
|
|
|
})
|
|
|
|
.then(() => {
|
2021-10-28 02:53:58 +02:00
|
|
|
refetch()
|
2020-11-26 23:00:53 +01:00
|
|
|
})
|
|
|
|
.catch(() => {
|
|
|
|
notify('ra.page.error', 'warning')
|
|
|
|
})
|
|
|
|
},
|
2021-10-28 02:53:58 +02:00
|
|
|
[dataProvider, notify, refetch]
|
2020-11-26 23:00:53 +01:00
|
|
|
)
|
2020-05-18 19:05:54 +02:00
|
|
|
|
2020-11-26 23:00:53 +01:00
|
|
|
const handleDragEnd = useCallback(
|
|
|
|
(from, to) => {
|
|
|
|
const toId = ids[to]
|
|
|
|
const fromId = ids[from]
|
|
|
|
reorder(playlistId, fromId, toId)
|
|
|
|
},
|
|
|
|
[playlistId, reorder, ids]
|
|
|
|
)
|
2020-06-05 01:05:41 +02:00
|
|
|
|
2021-05-24 17:09:06 +02:00
|
|
|
const toggleableFields = useMemo(() => {
|
|
|
|
return {
|
|
|
|
trackNumber: isDesktop && <TextField source="id" label={'#'} />,
|
|
|
|
title: <SongTitleField source="title" showTrackNumbers={false} />,
|
|
|
|
album: isDesktop && <AlbumLinkField source="album" />,
|
2021-11-06 01:25:12 +01:00
|
|
|
artist: isDesktop && <ArtistLinkField source="artist" />,
|
|
|
|
albumArtist: isDesktop && <ArtistLinkField source="albumArtist" />,
|
2021-05-24 17:09:06 +02:00
|
|
|
duration: (
|
|
|
|
<DurationField source="duration" className={classes.draggable} />
|
|
|
|
),
|
2021-06-28 15:45:30 +02:00
|
|
|
year: isDesktop && (
|
|
|
|
<FunctionField
|
|
|
|
source="year"
|
|
|
|
render={(r) => r.year || ''}
|
|
|
|
sortByOrder={'DESC'}
|
|
|
|
/>
|
|
|
|
),
|
2021-10-20 15:37:25 +02:00
|
|
|
playCount: isDesktop && (
|
|
|
|
<NumberField source="playCount" sortByOrder={'DESC'} />
|
|
|
|
),
|
|
|
|
playDate: <DateField source="playDate" sortByOrder={'DESC'} showTime />,
|
2021-05-24 17:09:06 +02:00
|
|
|
quality: isDesktop && <QualityInfo source="quality" sortable={false} />,
|
2021-10-27 20:35:58 +02:00
|
|
|
channels: isDesktop && <NumberField source="channels" />,
|
2021-05-24 17:09:06 +02:00
|
|
|
bpm: isDesktop && <NumberField source="bpm" />,
|
|
|
|
}
|
|
|
|
}, [isDesktop, classes.draggable])
|
|
|
|
|
|
|
|
const columns = useSelectedFields({
|
|
|
|
resource: 'playlistTrack',
|
|
|
|
columns: toggleableFields,
|
2021-11-06 01:25:12 +01:00
|
|
|
defaultOff: [
|
|
|
|
'channels',
|
|
|
|
'bpm',
|
|
|
|
'year',
|
|
|
|
'playCount',
|
|
|
|
'playDate',
|
|
|
|
'albumArtist',
|
|
|
|
],
|
2021-05-24 17:09:06 +02:00
|
|
|
})
|
|
|
|
|
2020-05-15 19:48:33 +02:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<ListToolbar
|
2020-11-26 23:00:53 +01:00
|
|
|
classes={{ toolbar: classes.toolbar }}
|
2020-05-15 19:48:33 +02:00
|
|
|
filters={props.filters}
|
2021-04-06 00:21:47 +02:00
|
|
|
actions={actions}
|
2020-05-15 19:48:33 +02:00
|
|
|
/>
|
|
|
|
<div className={classes.main}>
|
|
|
|
<Card
|
2020-11-28 00:27:32 +01:00
|
|
|
className={clsx(classes.content, {
|
2021-10-28 02:53:58 +02:00
|
|
|
[classes.bulkActionsDisplayed]: selectedIds.length > 0,
|
2020-05-15 19:48:33 +02:00
|
|
|
})}
|
|
|
|
key={version}
|
|
|
|
>
|
2021-10-28 02:53:58 +02:00
|
|
|
<BulkActionsToolbar>
|
2021-03-26 02:40:31 +01:00
|
|
|
<PlaylistSongBulkActions
|
|
|
|
playlistId={playlistId}
|
|
|
|
onUnselectItems={onUnselectItems}
|
2021-10-23 03:11:44 +02:00
|
|
|
readOnly={readOnly}
|
2021-03-26 02:40:31 +01:00
|
|
|
/>
|
2020-11-26 23:00:53 +01:00
|
|
|
</BulkActionsToolbar>
|
|
|
|
<ReorderableList
|
|
|
|
readOnly={readOnly}
|
|
|
|
onDragEnd={handleDragEnd}
|
|
|
|
nodeSelector={'tr'}
|
|
|
|
>
|
|
|
|
<SongDatagrid
|
|
|
|
rowClick={(id) => dispatch(playTracks(data, ids, id))}
|
2021-04-06 00:21:47 +02:00
|
|
|
{...listContext}
|
2021-10-23 03:11:44 +02:00
|
|
|
hasBulkActions={!readOnly}
|
2020-11-26 23:00:53 +01:00
|
|
|
contextAlwaysVisible={!isDesktop}
|
|
|
|
classes={{ row: classes.row }}
|
2020-06-05 16:22:31 +02:00
|
|
|
>
|
2021-05-24 17:09:06 +02:00
|
|
|
{columns}
|
2020-11-26 23:00:53 +01:00
|
|
|
<SongContextMenu
|
|
|
|
onAddToPlaylist={onAddToPlaylist}
|
2021-04-06 04:32:25 +02:00
|
|
|
showLove={false}
|
2020-11-26 23:00:53 +01:00
|
|
|
className={classes.contextMenu}
|
|
|
|
/>
|
|
|
|
</SongDatagrid>
|
|
|
|
</ReorderableList>
|
2020-05-15 19:48:33 +02:00
|
|
|
</Card>
|
|
|
|
</div>
|
2021-09-21 02:30:43 +02:00
|
|
|
<ExpandInfoDialog content={<SongInfo />} />
|
2021-04-06 00:21:47 +02:00
|
|
|
{React.cloneElement(props.pagination, listContext)}
|
2020-05-15 19:48:33 +02:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-11-26 23:00:53 +01:00
|
|
|
const SanitizedPlaylistSongs = (props) => {
|
2021-04-06 00:21:47 +02:00
|
|
|
const { loaded, ...rest } = props
|
2020-11-26 23:00:53 +01:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{loaded && (
|
2021-10-19 18:54:05 +02:00
|
|
|
<PlaylistSongs
|
2023-02-06 16:40:29 +01:00
|
|
|
playlistId={props.id}
|
2021-10-19 18:54:05 +02:00
|
|
|
actions={props.actions}
|
|
|
|
pagination={props.pagination}
|
|
|
|
{...rest}
|
|
|
|
/>
|
2020-11-26 23:00:53 +01:00
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default SanitizedPlaylistSongs
|