Add songs to playlists with drag and drop

model/album.go

@@ -38,7 +38,13 @@ type Album struct {
 	UpdatedAt            time.Time `structs:"updated_at" json:"updatedAt"`
 }
 
-type Albums []Album
+type (
+	Albums []Album
+	DiscID struct {
+		AlbumID    string `json:"albumId"`
+		DiscNumber int    `json:"discNumber"`
+	}
+)
 
 type AlbumRepository interface {
 	CountAll(...QueryOptions) (int64, error)

model/playlist.go

@@ -44,7 +44,10 @@ type PlaylistTracks []PlaylistTrack
 
 type PlaylistTrackRepository interface {
 	ResourceRepository
-	Add(mediaFileIds []string) error
+	Add(mediaFileIds []string) (int, error)
+	AddAlbums(albumIds []string) (int, error)
+	AddArtists(artistIds []string) (int, error)
+	AddDiscs(discs []DiscID) (int, error)
 	Update(mediaFileIds []string) error
 	Delete(id string) error
 	Reorder(pos int, newPos int) error

persistence/playlist_repository.go

@@ -214,8 +214,8 @@ func (r *playlistRepository) removeOrphans() error {
 		log.Debug(r.ctx, "Deleted tracks, now reordering", "id", pl.Id, "name", pl.Name, "deleted", n)
 
 		// To reorganize the playlist, just add an empty list of new tracks
-		trks := r.Tracks(pl.Id)
+		tracks := r.Tracks(pl.Id)
-		if err := trks.Add(nil); err != nil {
+		if _, err := tracks.Add(nil); err != nil {
 			return err
 		}
 	}

persistence/playlist_track_repository.go

@@ -70,9 +70,9 @@ func (r *playlistTrackRepository) NewInstance() interface{} {
 	return &model.PlaylistTrack{}
 }
 
-func (r *playlistTrackRepository) Add(mediaFileIds []string) error {
+func (r *playlistTrackRepository) Add(mediaFileIds []string) (int, error) {
 	if !r.isWritable() {
-		return rest.ErrPermissionDenied
+		return 0, rest.ErrPermissionDenied
 	}
 
 	if len(mediaFileIds) > 0 {
@@ -81,14 +81,53 @@ func (r *playlistTrackRepository) Add(mediaFileIds []string) error {
 
 	ids, err := r.getTracks()
 	if err != nil {
-		return err
+		return 0, err
 	}
 
 	// Append new tracks
 	ids = append(ids, mediaFileIds...)
 
 	// Update tracks and playlist
-	return r.Update(ids)
+	return len(mediaFileIds), r.Update(ids)
+}
+
+func (r *playlistTrackRepository) AddAlbums(albumIds []string) (int, error) {
+	sq := Select("id").From("media_file").Where(Eq{"album_id": albumIds})
+	return r.addMediaFileIds(sq)
+}
+
+func (r *playlistTrackRepository) AddArtists(artistIds []string) (int, error) {
+	sq := Select("id").From("media_file").Where(Eq{"album_artist_id": artistIds})
+	return r.addMediaFileIds(sq)
+}
+
+func (r *playlistTrackRepository) AddDiscs(discs []model.DiscID) (int, error) {
+	sq := Select("id").From("media_file")
+	if len(discs) == 0 {
+		return 0, nil
+	}
+	var clauses []Sqlizer
+	for _, d := range discs {
+		clauses = append(clauses, And{Eq{"album_id": d.AlbumID}, Eq{"disc_number": d.DiscNumber}})
+	}
+	sq = sq.Where(Or(clauses))
+	return r.addMediaFileIds(sq)
+}
+
+func (r *playlistTrackRepository) addMediaFileIds(sq SelectBuilder) (int, error) {
+	var res []struct{ Id string }
+	err := r.queryAll(sq, &res)
+	if err != nil {
+		return 0, err
+	}
+	if len(res) == 0 {
+		return 0, nil
+	}
+	var ids []string
+	for _, r := range res {
+		ids = append(ids, r.Id)
+	}
+	return r.Add(ids)
 }
 
 func (r *playlistTrackRepository) getTracks() ([]string, error) {

server/nativeapi/playlists.go

@@ -4,7 +4,6 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
-	"html"
 	"net/http"
 	"strconv"
 	"strings"
@@ -107,7 +106,10 @@ func deleteFromPlaylist(ds model.DataStore) http.HandlerFunc {
 
 func addToPlaylist(ds model.DataStore) http.HandlerFunc {
 	type addTracksPayload struct {
-		Ids []string `json:"ids"`
+		Ids       []string       `json:"ids"`
+		AlbumIds  []string       `json:"albumIds"`
+		ArtistIds []string       `json:"artistIds"`
+		Discs     []model.DiscID `json:"discs"`
 	}
 
 	return func(w http.ResponseWriter, r *http.Request) {
@@ -119,14 +121,30 @@ func addToPlaylist(ds model.DataStore) http.HandlerFunc {
 			http.Error(w, err.Error(), http.StatusBadRequest)
 			return
 		}
-		err = tracksRepo.Add(payload.Ids)
+		count, c := 0, 0
-		if err != nil {
+		if c, err = tracksRepo.Add(payload.Ids); err != nil {
 			http.Error(w, err.Error(), http.StatusBadRequest)
 			return
 		}
+		count += c
+		if c, err = tracksRepo.AddAlbums(payload.AlbumIds); err != nil {
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
+		}
+		count += c
+		if c, err = tracksRepo.AddArtists(payload.ArtistIds); err != nil {
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
+		}
+		count += c
+		if c, err = tracksRepo.AddDiscs(payload.Discs); err != nil {
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
+		}
+		count += c
 
 		// Must return an object with an ID, to satisfy ReactAdmin `create` call
-		_, err = fmt.Fprintf(w, `{"id":"%s"}`, html.EscapeString(playlistId))
+		_, err = fmt.Fprintf(w, `{"added":%d}`, count)
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 		}

ui/package-lock.json

@@ -26,6 +26,8 @@
         "ra-i18n-polyglot": "^3.18.3",
         "react": "^17.0.2",
         "react-admin": "^3.18.3",
+        "react-dnd": "^14.0.4",
+        "react-dnd-html5-backend": "^14.0.2",
         "react-dom": "^17.0.2",
         "react-drag-listview": "^0.1.8",
         "react-ga": "^3.3.0",
@@ -2208,6 +2210,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@react-dnd/asap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
+      "integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ=="
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
+      "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw=="
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
+      "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg=="
+    },
     "node_modules/@react-icons/all-files": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
@@ -6588,6 +6605,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/dnd-core": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
+      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "dependencies": {
+        "@react-dnd/asap": "^4.0.0",
+        "@react-dnd/invariant": "^2.0.0",
+        "redux": "^4.1.1"
+      }
+    },
     "node_modules/dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -16242,6 +16269,43 @@
         "node": ">= 8"
       }
     },
+    "node_modules/react-dnd": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz",
+      "integrity": "sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==",
+      "dependencies": {
+        "@react-dnd/invariant": "^2.0.0",
+        "@react-dnd/shallowequal": "^2.0.0",
+        "dnd-core": "14.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz",
+      "integrity": "sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==",
+      "dependencies": {
+        "dnd-core": "14.0.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -24174,6 +24238,21 @@
         }
       }
     },
+    "@react-dnd/asap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
+      "integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ=="
+    },
+    "@react-dnd/invariant": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
+      "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw=="
+    },
+    "@react-dnd/shallowequal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
+      "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg=="
+    },
     "@react-icons/all-files": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
@@ -27883,6 +27962,16 @@
         "path-type": "^4.0.0"
       }
     },
+    "dnd-core": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
+      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "requires": {
+        "@react-dnd/asap": "^4.0.0",
+        "@react-dnd/invariant": "^2.0.0",
+        "redux": "^4.1.1"
+      }
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -35798,6 +35887,26 @@
         }
       }
     },
+    "react-dnd": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz",
+      "integrity": "sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==",
+      "requires": {
+        "@react-dnd/invariant": "^2.0.0",
+        "@react-dnd/shallowequal": "^2.0.0",
+        "dnd-core": "14.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      }
+    },
+    "react-dnd-html5-backend": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz",
+      "integrity": "sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==",
+      "requires": {
+        "dnd-core": "14.0.1"
+      }
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",

ui/package.json

@@ -21,6 +21,8 @@
     "ra-i18n-polyglot": "^3.18.3",
     "react": "^17.0.2",
     "react-admin": "^3.18.3",
+    "react-dnd": "^14.0.4",
+    "react-dnd-html5-backend": "^14.0.2",
     "react-dom": "^17.0.2",
     "react-drag-listview": "^0.1.8",
     "react-ga": "^3.3.0",

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
+        <div ref={dragAlbumRef}>
-          src={subsonic.getCoverArtUrl(album, 300)}
+          <img
-          alt={album.name}
+            src={subsonic.getCoverArtUrl(record, 300)}
-          className={classes.cover}
+            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>
   )
 }
 

ui/src/artist/ArtistList.js

@@ -3,6 +3,8 @@ import { useHistory } from 'react-router-dom'
 import {
   AutocompleteInput,
   Datagrid,
+  DatagridBody,
+  DatagridRow,
   Filter,
   NumberField,
   ReferenceInput,
@@ -14,6 +16,7 @@ import { useMediaQuery, withWidth } from '@material-ui/core'
 import FavoriteIcon from '@material-ui/icons/Favorite'
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import { makeStyles } from '@material-ui/core/styles'
+import { useDrag } from 'react-dnd'
 import { AddToPlaylistDialog } from '../dialogs'
 import {
   ArtistContextMenu,
@@ -78,6 +81,24 @@ const ArtistFilter = (props) => {
   )
 }
 
+const ArtistDatagridRow = (props) => {
+  const { record } = props
+  const [, dragArtistRef] = useDrag(() => ({
+    type: 'artist',
+    item: { artistIds: [record.id] },
+    options: { dropEffect: 'copy' },
+  }))
+  return <DatagridRow ref={dragArtistRef} {...props} />
+}
+
+const ArtistDatagridBody = (props) => (
+  <DatagridBody {...props} row={<ArtistDatagridRow />} />
+)
+
+const ArtistDatagrid = (props) => (
+  <Datagrid {...props} body={<ArtistDatagridBody />} />
+)
+
 const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
   const classes = useStyles()
   const handleArtistLink = useGetHandleArtistClick(width)
@@ -112,7 +133,7 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
       {...rest}
     />
   ) : (
-    <Datagrid rowClick={handleArtistLink} classes={{ row: classes.row }}>
+    <ArtistDatagrid rowClick={handleArtistLink} classes={{ row: classes.row }}>
       <TextField source="name" />
       {columns}
       <ArtistContextMenu
@@ -130,7 +151,7 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
           )
         }
       />
-    </Datagrid>
+    </ArtistDatagrid>
   )
 }
 

ui/src/common/SongDatagrid.js

@@ -1,4 +1,4 @@
-import React, { isValidElement, useMemo, useCallback } from 'react'
+import React, { isValidElement, useMemo, useCallback, forwardRef } from 'react'
 import { useDispatch } from 'react-redux'
 import { Datagrid, PureDatagridBody, PureDatagridRow } from 'react-admin'
 import {
@@ -11,6 +11,7 @@ import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
 import AlbumIcon from '@material-ui/icons/Album'
 import clsx from 'clsx'
+import { useDrag } from 'react-dnd'
 import { playTracks } from '../actions'
 import { AlbumContextMenu } from '../common'
 
@@ -47,50 +48,48 @@ const useStyles = makeStyles({
   },
 })
 
-const DiscSubtitleRow = ({
+const DiscSubtitleRow = forwardRef(
-  record,
+  ({ record, onClick, colSpan, contextAlwaysVisible }, ref) => {
-  onClick,
+    const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
-  colSpan,
+    const classes = useStyles({ isDesktop })
-  contextAlwaysVisible,
+    const handlePlayDisc = (discNumber) => () => {
-}) => {
+      onClick(discNumber)
-  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+    }
-  const classes = useStyles({ isDesktop })
-  const handlePlayDisc = (discNumber) => () => {
-    onClick(discNumber)
-  }
 
-  let subtitle = []
+    let subtitle = []
-  if (record.discNumber > 0) {
+    if (record.discNumber > 0) {
-    subtitle.push(record.discNumber)
+      subtitle.push(record.discNumber)
-  }
+    }
-  if (record.discSubtitle) {
+    if (record.discSubtitle) {
-    subtitle.push(record.discSubtitle)
+      subtitle.push(record.discSubtitle)
-  }
+    }
 
-  return (
+    return (
-    <TableRow
+      <TableRow
-      hover
+        hover
-      onClick={handlePlayDisc(record.discNumber)}
+        ref={ref}
-      className={classes.row}
+        onClick={handlePlayDisc(record.discNumber)}
-    >
+        className={classes.row}
-      <TableCell colSpan={colSpan}>
+      >
-        <Typography variant="h6" className={classes.subtitle}>
+        <TableCell colSpan={colSpan}>
-          <AlbumIcon className={classes.discIcon} fontSize={'small'} />
+          <Typography variant="h6" className={classes.subtitle}>
-          {subtitle.join(': ')}
+            <AlbumIcon className={classes.discIcon} fontSize={'small'} />
-        </Typography>
+            {subtitle.join(': ')}
-      </TableCell>
+          </Typography>
-      <TableCell>
+        </TableCell>
-        <AlbumContextMenu
+        <TableCell>
-          record={{ id: record.albumId }}
+          <AlbumContextMenu
-          discNumber={record.discNumber}
+            record={{ id: record.albumId }}
-          showLove={false}
+            discNumber={record.discNumber}
-          className={classes.contextMenu}
+            showLove={false}
-          visible={contextAlwaysVisible}
+            className={classes.contextMenu}
-        />
+            visible={contextAlwaysVisible}
-      </TableCell>
+          />
-    </TableRow>
+        </TableCell>
-  )
+      </TableRow>
-}
+    )
+  }
+)
 
 export const SongDatagridRow = ({
   record,
@@ -105,14 +104,31 @@ export const SongDatagridRow = ({
   const fields = React.Children.toArray(children).filter((c) =>
     isValidElement(c)
   )
+
+  const [, dragDiscRef] = useDrag(() => ({
+    type: 'disc',
+    item: {
+      discs: [{ albumId: record.albumId, discNumber: record.discNumber }],
+    },
+    options: { dropEffect: 'copy' },
+  }))
+
+  const [, dragSongRef] = useDrag(() => ({
+    type: 'song',
+    item: { ids: [record.id] },
+    options: { dropEffect: 'copy' },
+  }))
+
   if (!record || !record.title) {
     return null
   }
+
   const childCount = fields.length
   return (
     <>
       {firstTracks.has(record.id) && (
         <DiscSubtitleRow
+          ref={dragDiscRef}
           record={record}
           onClick={onClickDiscSubtitle}
           contextAlwaysVisible={contextAlwaysVisible}
@@ -120,6 +136,7 @@ export const SongDatagridRow = ({
         />
       )}
       <PureDatagridRow
+        ref={dragSongRef}
         record={record}
         {...rest}
         className={clsx(className, classes.row)}

ui/src/dataProvider/wrapperDataProvider.js

@@ -57,6 +57,12 @@ const wrapperDataProvider = {
     const [r, p] = mapResource(resource, params)
     return dataProvider.deleteMany(r, p)
   },
+  addToPlaylist: (playlistId, data) => {
+    return httpClient(`${REST_URL}/playlist/${playlistId}/tracks`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }).then(({ json }) => ({ data: json }))
+  },
 }
 
 export default wrapperDataProvider

ui/src/layout/Layout.js

@@ -3,6 +3,8 @@ import { useDispatch, useSelector } from 'react-redux'
 import { Layout as RALayout, toggleSidebar } from 'react-admin'
 import { makeStyles } from '@material-ui/core/styles'
 import { HotKeys } from 'react-hotkeys'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import { DndProvider } from 'react-dnd'
 import Menu from './Menu'
 import AppBar from './AppBar'
 import Notification from './Notification'
@@ -23,16 +25,18 @@ const Layout = (props) => {
   }
 
   return (
-    <HotKeys handlers={keyHandlers}>
+    <DndProvider backend={HTML5Backend}>
-      <RALayout
+      <HotKeys handlers={keyHandlers}>
-        {...props}
+        <RALayout
-        className={classes.root}
+          {...props}
-        menu={Menu}
+          className={classes.root}
-        appBar={AppBar}
+          menu={Menu}
-        theme={theme}
+          appBar={AppBar}
-        notification={Notification}
+          theme={theme}
-      />
+          notification={Notification}
-    </HotKeys>
+        />
+      </HotKeys>
+    </DndProvider>
   )
 }
 

ui/src/layout/PlaylistsSubMenu.js

@@ -1,12 +1,60 @@
 import React, { useCallback } from 'react'
-import { MenuItemLink, useQueryWithStore } from 'react-admin'
+import {
+  MenuItemLink,
+  useDataProvider,
+  useNotify,
+  useQueryWithStore,
+} from 'react-admin'
 import { useHistory } from 'react-router-dom'
 import QueueMusicIcon from '@material-ui/icons/QueueMusic'
 import { Typography } from '@material-ui/core'
 import QueueMusicOutlinedIcon from '@material-ui/icons/QueueMusicOutlined'
 import { BiCog } from 'react-icons/all'
+import { useDrop } from 'react-dnd'
 import SubMenu from './SubMenu'
 
+const PlaylistMenuItemLink = ({ pls, sidebarIsOpen }) => {
+  const dataProvider = useDataProvider()
+  const notify = useNotify()
+
+  const addToPlaylist = (playlistId, data) => {
+    dataProvider
+      .addToPlaylist(playlistId, data)
+      .then((res) => {
+        notify('message.songsAddedToPlaylist', 'info', {
+          smart_count: res.data?.added,
+        })
+      })
+      .catch(() => {
+        notify('ra.page.error', 'warning')
+      })
+  }
+
+  const [, dropRef] = useDrop(() => ({
+    accept: ['song', 'album', 'disc', 'artist'],
+    drop: (item) => {
+      addToPlaylist(pls.id, item)
+    },
+  }))
+
+  if (!pls) {
+    return null
+  }
+
+  return (
+    <MenuItemLink
+      to={`/playlist/${pls.id}/show`}
+      primaryText={
+        <Typography variant="inherit" noWrap ref={dropRef}>
+          {pls.name}
+        </Typography>
+      }
+      sidebarIsOpen={sidebarIsOpen}
+      dense={false}
+    />
+  )
+}
+
 const PlaylistsSubMenu = ({ state, setState, sidebarIsOpen, dense }) => {
   const history = useHistory()
   const { data, loaded } = useQueryWithStore({
@@ -25,21 +73,13 @@ const PlaylistsSubMenu = ({ state, setState, sidebarIsOpen, dense }) => {
     setState((state) => ({ ...state, [menu]: !state[menu] }))
   }
 
-  const renderPlaylistMenuItemLink = (pls) => {
+  const renderPlaylistMenuItemLink = (pls) => (
-    return (
+    <PlaylistMenuItemLink
-      <MenuItemLink
+      pls={pls}
-        key={pls.id}
+      sidebarIsOpen={sidebarIsOpen}
-        to={`/playlist/${pls.id}/show`}
+      key={pls.id}
-        primaryText={
+    />
-          <Typography variant="inherit" noWrap>
+  )
-            {pls.name}
-          </Typography>
-        }
-        sidebarIsOpen={sidebarIsOpen}
-        dense={false}
-      />
-    )
-  }
 
   const user = localStorage.getItem('username')
   const myPlaylists = []