Check permissions before adding songs to playlists

ui/src/album/AlbumGridView.js

@@ -19,6 +19,7 @@ import {
   ArtistLinkField,
   RangeField,
 } from '../common'
+import { DraggableTypes } from '../consts'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -103,7 +104,7 @@ const Cover = withContentRect('bounds')(
     // noinspection JSSuspiciousNameCombination
     const classes = useCoverStyles({ height: contentRect.bounds.width })
     const [, dragAlbumRef] = useDrag(() => ({
-      type: 'album',
+      type: DraggableTypes.ALBUM,
       item: { albumIds: [record.id] },
       options: { dropEffect: 'copy' },
     }))

ui/src/album/AlbumTableView.js

@@ -20,6 +20,7 @@ import {
   useSelectedFields,
 } from '../common'
 import config from '../config'
+import { DraggableTypes } from '../consts'
 
 const useStyles = makeStyles({
   columnIcon: {
@@ -51,7 +52,7 @@ const useStyles = makeStyles({
 const AlbumDatagridRow = (props) => {
   const { record } = props
   const [, dragAlbumRef] = useDrag(() => ({
-    type: 'album',
+    type: DraggableTypes.ALBUM,
     item: { albumIds: [record.id] },
     options: { dropEffect: 'copy' },
   }))

ui/src/artist/ArtistList.js

@@ -30,6 +30,7 @@ import {
 } from '../common'
 import config from '../config'
 import ArtistListActions from './ArtistListActions'
+import { DraggableTypes } from '../consts'
 
 const useStyles = makeStyles({
   contextHeader: {
@@ -84,7 +85,7 @@ const ArtistFilter = (props) => {
 const ArtistDatagridRow = (props) => {
   const { record } = props
   const [, dragArtistRef] = useDrag(() => ({
-    type: 'artist',
+    type: DraggableTypes.ARTIST,
     item: { artistIds: [record.id] },
     options: { dropEffect: 'copy' },
   }))

ui/src/common/SongDatagrid.js

@@ -14,6 +14,7 @@ import clsx from 'clsx'
 import { useDrag } from 'react-dnd'
 import { playTracks } from '../actions'
 import { AlbumContextMenu } from '../common'
+import { DraggableTypes } from '../consts'
 
 const useStyles = makeStyles({
   subtitle: {
@@ -106,7 +107,7 @@ export const SongDatagridRow = ({
   )
 
   const [, dragDiscRef] = useDrag(() => ({
-    type: 'disc',
+    type: DraggableTypes.DISC,
     item: {
       discs: [{ albumId: record.albumId, discNumber: record.discNumber }],
     },
@@ -114,7 +115,7 @@ export const SongDatagridRow = ({
   }))
 
   const [, dragSongRef] = useDrag(() => ({
-    type: 'song',
+    type: DraggableTypes.SONG,
     item: { ids: [record.id] },
     options: { dropEffect: 'copy' },
   }))

ui/src/consts.js

@@ -3,3 +3,18 @@ export const REST_URL = '/api'
 export const M3U_MIME_TYPE = 'audio/x-mpegurl'
 
 export const AUTO_THEME_ID = 'AUTO_THEME_ID'
+
+export const DraggableTypes = {
+  SONG: 'song',
+  ALBUM: 'album',
+  DISC: 'disc',
+  ARTIST: 'artist',
+  ALL: [],
+}
+
+DraggableTypes.ALL.push(
+  DraggableTypes.SONG,
+  DraggableTypes.ALBUM,
+  DraggableTypes.DISC,
+  DraggableTypes.ARTIST
+)

ui/src/layout/PlaylistsSubMenu.js

@@ -12,35 +12,28 @@ import QueueMusicOutlinedIcon from '@material-ui/icons/QueueMusicOutlined'
 import { BiCog } from 'react-icons/all'
 import { useDrop } from 'react-dnd'
 import SubMenu from './SubMenu'
+import { isWritable } from '../common'
+import { DraggableTypes } from '../consts'
 
 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'],
+    accept: isWritable(pls.owner) ? DraggableTypes.ALL : [],
-    drop: (item) => {
+    drop: (item) =>
-      addToPlaylist(pls.id, item)
+      dataProvider
-    },
+        .addToPlaylist(pls.id, item)
+        .then((res) => {
+          notify('message.songsAddedToPlaylist', 'info', {
+            smart_count: res.data?.added,
+          })
+        })
+        .catch(() => {
+          notify('ra.page.error', 'warning')
+        }),
   }))
 
-  if (!pls) {
-    return null
-  }
-
   return (
     <MenuItemLink
       to={`/playlist/${pls.id}/show`}