Fix drag-n-drop from a playlist, also fix useDrag memoization

ui/src/album/AlbumGridView.js

@@ -103,11 +103,14 @@ const Cover = withContentRect('bounds')(
     // 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: DraggableTypes.ALBUM,
-      item: { albumIds: [record.id] },
-      options: { dropEffect: 'copy' },
-    }))
+    const [, dragAlbumRef] = useDrag(
+      () => ({
+        type: DraggableTypes.ALBUM,
+        item: { albumIds: [record.id] },
+        options: { dropEffect: 'copy' },
+      }),
+      [record]
+    )
     return (
       <div ref={measureRef}>
         <div ref={dragAlbumRef}>

ui/src/album/AlbumTableView.js

@@ -51,11 +51,14 @@ const useStyles = makeStyles({
 
 const AlbumDatagridRow = (props) => {
   const { record } = props
-  const [, dragAlbumRef] = useDrag(() => ({
-    type: DraggableTypes.ALBUM,
-    item: { albumIds: [record.id] },
-    options: { dropEffect: 'copy' },
-  }))
+  const [, dragAlbumRef] = useDrag(
+    () => ({
+      type: DraggableTypes.ALBUM,
+      item: { albumIds: [record.id] },
+      options: { dropEffect: 'copy' },
+    }),
+    [record]
+  )
   return <DatagridRow ref={dragAlbumRef} {...props} />
 }
 

ui/src/artist/ArtistList.js

@@ -84,11 +84,14 @@ const ArtistFilter = (props) => {
 
 const ArtistDatagridRow = (props) => {
   const { record } = props
-  const [, dragArtistRef] = useDrag(() => ({
-    type: DraggableTypes.ARTIST,
-    item: { artistIds: [record?.id] },
-    options: { dropEffect: 'copy' },
-  }))
+  const [, dragArtistRef] = useDrag(
+    () => ({
+      type: DraggableTypes.ARTIST,
+      item: { artistIds: [record?.id] },
+      options: { dropEffect: 'copy' },
+    }),
+    [record]
+  )
   return <DatagridRow ref={dragArtistRef} {...props} />
 }
 

ui/src/common/SongDatagrid.js

@@ -106,19 +106,25 @@ export const SongDatagridRow = ({
     isValidElement(c)
   )
 
-  const [, dragDiscRef] = useDrag(() => ({
-    type: DraggableTypes.DISC,
-    item: {
-      discs: [{ albumId: record?.albumId, discNumber: record?.discNumber }],
-    },
-    options: { dropEffect: 'copy' },
-  }))
+  const [, dragDiscRef] = useDrag(
+    () => ({
+      type: DraggableTypes.DISC,
+      item: {
+        discs: [{ albumId: record?.albumId, discNumber: record?.discNumber }],
+      },
+      options: { dropEffect: 'copy' },
+    }),
+    [record]
+  )
 
-  const [, dragSongRef] = useDrag(() => ({
-    type: DraggableTypes.SONG,
-    item: { ids: [record?.id] },
-    options: { dropEffect: 'copy' },
-  }))
+  const [, dragSongRef] = useDrag(
+    () => ({
+      type: DraggableTypes.SONG,
+      item: { ids: [record?.mediaFileId || record?.id] },
+      options: { dropEffect: 'copy' },
+    }),
+    [record]
+  )
 
   if (!record || !record.title) {
     return null