feat(ui): Allow drag-and-drop song title from player to sidebar playlist (#2435)

* feat(ui): Allow drag-and-drop song title from player to sidebar playlist

Signed-off-by: egor.aristov <egor.aristov@vk.team>

* prettier

---------

Signed-off-by: egor.aristov <egor.aristov@vk.team>
Co-authored-by: egor.aristov <egor.aristov@vk.team>
Co-authored-by: Deluan Quintão <deluan@navidrome.org>

ui/src/App.jsx

@@ -36,6 +36,8 @@ import config, { shareInfo } from './config'
 import { keyMap } from './hotkeys'
 import useChangeThemeColor from './useChangeThemeColor'
 import SharePlayer from './share/SharePlayer'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import { DndProvider } from 'react-dnd'
 
 const history = createHashHistory()
 
@@ -136,7 +138,9 @@ const AppWithHotkeys = () => {
   }
   return (
     <HotKeys keyMap={keyMap}>
-      <App />
+      <DndProvider backend={HTML5Backend}>
+        <App />
+      </DndProvider>
     </HotKeys>
   )
 }

ui/src/audioplayer/AudioTitle.jsx

@@ -4,17 +4,28 @@ import { Link } from 'react-router-dom'
 import clsx from 'clsx'
 import { QualityInfo } from '../common'
 import useStyle from './styles'
+import { useDrag } from 'react-dnd'
+import { DraggableTypes } from '../consts'
 
 const AudioTitle = React.memo(({ audioInfo, gainInfo, isMobile }) => {
   const classes = useStyle()
   const className = classes.audioTitle
   const isDesktop = useMediaQuery('(min-width:810px)')
 
-  if (!audioInfo.song) {
+  const song = audioInfo.song
+  const [, dragSongRef] = useDrag(
+    () => ({
+      type: DraggableTypes.SONG,
+      item: { ids: [song?.id] },
+      options: { dropEffect: 'copy' },
+    }),
+    [song],
+  )
+
+  if (!song) {
     return ''
   }
 
-  const song = audioInfo.song
   const qi = {
     suffix: song.suffix,
     bitRate: song.bitRate,
@@ -32,6 +43,7 @@ const AudioTitle = React.memo(({ audioInfo, gainInfo, isMobile }) => {
           : `/album/${song.albumId}/show`
       }
       className={className}
+      ref={dragSongRef}
     >
       <span>
         <span className={clsx(classes.songTitle, 'songTitle')}>

ui/src/layout/Layout.jsx

@@ -3,8 +3,6 @@ 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'
@@ -25,18 +23,16 @@ const Layout = (props) => {
   }
 
   return (
-    <DndProvider backend={HTML5Backend}>
-      <HotKeys handlers={keyHandlers}>
-        <RALayout
-          {...props}
-          className={classes.root}
-          menu={Menu}
-          appBar={AppBar}
-          theme={theme}
-          notification={Notification}
-        />
-      </HotKeys>
-    </DndProvider>
+    <HotKeys handlers={keyHandlers}>
+      <RALayout
+        {...props}
+        className={classes.root}
+        menu={Menu}
+        appBar={AppBar}
+        theme={theme}
+        notification={Notification}
+      />
+    </HotKeys>
   )
 }