Add songs to playlists with drag and drop

2025-04-03 20:47:35 +03:00 · 2021-10-01 10:37:05 -04:00 · 2021-10-01 10:37:05 -04:00 · 6c3e45de41
commit 6c3e45de41
parent 2ab4647420
14 changed files with 392 additions and 94 deletions
--- a/model/album.go
+++ b/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)
--- a/model/playlist.go
+++ b/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
--- a/persistence/playlist_repository.go
+++ b/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)
-		if err := trks.Add(nil); err != nil {
+		tracks := r.Tracks(pl.Id)
+		if _, err := tracks.Add(nil); err != nil {
 			return err
 		}
 	}
--- a/persistence/playlist_track_repository.go
+++ b/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) {
--- a/server/nativeapi/playlists.go
+++ b/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)
-		if err != nil {
+		count, c := 0, 0
+		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)
 		}
--- a/ui/package-lock.json
+++ b/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",
--- a/ui/package.json
+++ b/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",
--- a/ui/src/album/AlbumGridView.js
+++ b/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={
--- a/ui/src/album/AlbumTableView.js
+++ b/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>
  )
 }

--- a/ui/src/artist/ArtistList.js
+++ b/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>
  )
 }

--- a/ui/src/common/SongDatagrid.js
+++ b/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 = ({
-  record,
-  onClick,
-  colSpan,
-  contextAlwaysVisible,
-}) => {
-  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
-  const classes = useStyles({ isDesktop })
-  const handlePlayDisc = (discNumber) => () => {
-    onClick(discNumber)
-  }
+const DiscSubtitleRow = forwardRef(
+  ({ record, onClick, colSpan, contextAlwaysVisible }, ref) => {
+    const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+    const classes = useStyles({ isDesktop })
+    const handlePlayDisc = (discNumber) => () => {
+      onClick(discNumber)
+    }

-  let subtitle = []
-  if (record.discNumber > 0) {
-    subtitle.push(record.discNumber)
-  }
-  if (record.discSubtitle) {
-    subtitle.push(record.discSubtitle)
-  }
+    let subtitle = []
+    if (record.discNumber > 0) {
+      subtitle.push(record.discNumber)
+    }
+    if (record.discSubtitle) {
+      subtitle.push(record.discSubtitle)
+    }

-  return (
-    <TableRow
-      hover
-      onClick={handlePlayDisc(record.discNumber)}
-      className={classes.row}
-    >
-      <TableCell colSpan={colSpan}>
-        <Typography variant="h6" className={classes.subtitle}>
-          <AlbumIcon className={classes.discIcon} fontSize={'small'} />
-          {subtitle.join(': ')}
-        </Typography>
-      </TableCell>
-      <TableCell>
-        <AlbumContextMenu
-          record={{ id: record.albumId }}
-          discNumber={record.discNumber}
-          showLove={false}
-          className={classes.contextMenu}
-          visible={contextAlwaysVisible}
-        />
-      </TableCell>
-    </TableRow>
-  )
-}
+    return (
+      <TableRow
+        hover
+        ref={ref}
+        onClick={handlePlayDisc(record.discNumber)}
+        className={classes.row}
+      >
+        <TableCell colSpan={colSpan}>
+          <Typography variant="h6" className={classes.subtitle}>
+            <AlbumIcon className={classes.discIcon} fontSize={'small'} />
+            {subtitle.join(': ')}
+          </Typography>
+        </TableCell>
+        <TableCell>
+          <AlbumContextMenu
+            record={{ id: record.albumId }}
+            discNumber={record.discNumber}
+            showLove={false}
+            className={classes.contextMenu}
+            visible={contextAlwaysVisible}
+          />
+        </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)}
--- a/ui/src/dataProvider/wrapperDataProvider.js
+++ b/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
--- a/ui/src/layout/Layout.js
+++ b/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}>
-      <RALayout
-        {...props}
-        className={classes.root}
-        menu={Menu}
-        appBar={AppBar}
-        theme={theme}
-        notification={Notification}
-      />
-    </HotKeys>
+    <DndProvider backend={HTML5Backend}>
+      <HotKeys handlers={keyHandlers}>
+        <RALayout
+          {...props}
+          className={classes.root}
+          menu={Menu}
+          appBar={AppBar}
+          theme={theme}
+          notification={Notification}
+        />
+      </HotKeys>
+    </DndProvider>
  )
 }

--- a/ui/src/layout/PlaylistsSubMenu.js
+++ b/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) => {
-    return (
-      <MenuItemLink
-        key={pls.id}
-        to={`/playlist/${pls.id}/show`}
-        primaryText={
-          <Typography variant="inherit" noWrap>
-            {pls.name}
-          </Typography>
-        }
-        sidebarIsOpen={sidebarIsOpen}
-        dense={false}
-      />
-    )
-  }
+  const renderPlaylistMenuItemLink = (pls) => (
+    <PlaylistMenuItemLink
+      pls={pls}
+      sidebarIsOpen={sidebarIsOpen}
+      key={pls.id}
+    />
+  )

  const user = localStorage.getItem('username')
  const myPlaylists = []