diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js index 4038de418..4a03c35d3 100644 --- a/ui/src/playlist/PlaylistSongs.js +++ b/ui/src/playlist/PlaylistSongs.js @@ -10,6 +10,7 @@ import { useNotify, } from 'react-admin' import classnames from 'classnames' +import { useDispatch } from 'react-redux' import { Card, useMediaQuery } from '@material-ui/core' import { makeStyles } from '@material-ui/core/styles' import ReactDragListView from 'react-drag-listview' @@ -21,6 +22,7 @@ import { } from '../common' import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog' import { AlbumLinkField } from '../song/AlbumLinkField' +import { playTracks } from '../audioplayer' const useStyles = makeStyles( (theme) => ({ @@ -48,9 +50,6 @@ const useStyles = makeStyles( flexWrap: 'wrap', }, noResults: { padding: 20 }, - row: { - cursor: (props) => (props.readOnly ? 'arrow' : 'move'), - }, }), { name: 'RaList' } ) @@ -71,6 +70,7 @@ const ReorderableList = ({ readOnly, children, ...rest }) => { const PlaylistSongs = (props) => { const classes = useStyles(props) const classesToolbar = useStylesListToolbar(props) + const dispatch = useDispatch() const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs')) const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md')) const controllerProps = useListController(props) @@ -153,9 +153,8 @@ const PlaylistSongs = (props) => { nodeSelector={'tr'} > } - rowClick={null} + rowClick={(id) => dispatch(playTracks(data, ids, id))} {...controllerProps} hasBulkActions={hasBulkActions} contextAlwaysVisible={!isDesktop}