Add songs to playlists with drag and drop

ui/src/album/AlbumGridView.js

@@ -11,6 +11,7 @@ import withWidth from '@material-ui/core/withWidth'
 import { Link } from 'react-router-dom'
 import { linkToRecord, useListContext, Loading } from 'react-admin'
 import { withContentRect } from 'react-measure'
+import { useDrag } from 'react-dnd'
 import subsonic from '../subsonic'
 import {
   AlbumContextMenu,
@@ -97,17 +98,24 @@ const getColsForWidth = (width) => {
 }
 
 const Cover = withContentRect('bounds')(
-  ({ album, measureRef, contentRect }) => {
+  ({ record, measureRef, contentRect }) => {
     // Force height to be the same as the width determined by the GridList
     // noinspection JSSuspiciousNameCombination
     const classes = useCoverStyles({ height: contentRect.bounds.width })
+    const [, dragAlbumRef] = useDrag(() => ({
+      type: 'album',
+      item: { albumIds: [record.id] },
+      options: { dropEffect: 'copy' },
+    }))
     return (
       <div ref={measureRef}>
-        <img
-          src={subsonic.getCoverArtUrl(album, 300)}
-          alt={album.name}
-          className={classes.cover}
-        />
+        <div ref={dragAlbumRef}>
+          <img
+            src={subsonic.getCoverArtUrl(record, 300)}
+            alt={record.name}
+            className={classes.cover}
+          />
+        </div>
       </div>
     )
   }
@@ -127,7 +135,7 @@ const AlbumGridTile = ({ showArtist, record, basePath, ...props }) => {
         className={classes.link}
         to={linkToRecord(basePath, record.id, 'show')}
       >
-        <Cover album={record} />
+        <Cover record={record} />
         <GridListTileBar
           className={isDesktop ? classes.tileBar : classes.tileBarMobile}
           subtitle={

ui/src/album/AlbumTableView.js

@@ -1,8 +1,15 @@
 import React, { useMemo } from 'react'
-import { Datagrid, NumberField, TextField } from 'react-admin'
+import {
+  Datagrid,
+  DatagridBody,
+  DatagridRow,
+  NumberField,
+  TextField,
+} from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import { makeStyles } from '@material-ui/core/styles'
+import { useDrag } from 'react-dnd'
 import {
   ArtistLinkField,
   DurationField,
@@ -41,6 +48,24 @@ const useStyles = makeStyles({
   },
 })
 
+const AlbumDatagridRow = (props) => {
+  const { record } = props
+  const [, dragAlbumRef] = useDrag(() => ({
+    type: 'album',
+    item: { albumIds: [record.id] },
+    options: { dropEffect: 'copy' },
+  }))
+  return <DatagridRow ref={dragAlbumRef} {...props} />
+}
+
+const AlbumDatagridBody = (props) => (
+  <DatagridBody {...props} row={<AlbumDatagridRow />} />
+)
+
+const AlbumDatagrid = (props) => (
+  <Datagrid {...props} body={<AlbumDatagridBody />} />
+)
+
 const AlbumTableView = ({
   hasShow,
   hasEdit,
@@ -112,7 +137,7 @@ const AlbumTableView = ({
       {...rest}
     />
   ) : (
-    <Datagrid rowClick={'show'} classes={{ row: classes.row }} {...rest}>
+    <AlbumDatagrid rowClick={'show'} classes={{ row: classes.row }} {...rest}>
       <TextField source="name" />
       {columns}
       <AlbumContextMenu
@@ -130,7 +155,7 @@ const AlbumTableView = ({
           )
         }
       />
-    </Datagrid>
+    </AlbumDatagrid>
   )
 }