Switch react-dnd to pragmatic drag and drop (#3043)

* Switch react-dnd to pragmatic DnD

* Drag as URL

* Drop URLs into playlists, closes #644

* Use InsertTarget everywhere

* ci: add dep group for pragmatic-dnd

* Update mock values

* Drag soundcloud as URL

* Fix waitlist drag interactions

* Prevent dropping on self

* Prevent dropping on self but better

.github/dependabot.yml

@@ -57,3 +57,7 @@ updates:
       patterns:
       - "stylelint"
       - "stylelint-config-*"
+    pragmatic-dnd:
+      patterns:
+      - "@atlaskit/pragmatic-drag-and-drop"
+      - "@atlaskit/pragmatic-drag-and-drop-*"

package.json

@@ -5,6 +5,8 @@
   "author": "Renée Kooi <[email protected]>",
   "type": "module",
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@emotion/cache": "^11.6.0",
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11.13.3",
@@ -61,8 +63,6 @@
     "react-abstract-autocomplete": "^2.0.3",
     "react-async-hook": "^4.0.0",
     "react-bus": "^3.0.0",
-    "react-dnd": "^16.0.0",
-    "react-dnd-html5-backend": "^16.0.0",
     "react-dom": "^18.0.0",
     "react-google-button": "^0.8.0",
     "react-markdown": "^9.0.1",

src/app.css

@@ -3,7 +3,6 @@
 @import url("./vars.css");
 @import url("./components/index.css");
 @import url("./sources/index.css");
-@import url("./containers/DragLayer.css");
 @import url("./mobile") (max-width: 768px);
 
 /* None of our buttons have a use for browser defaults! */

src/components/App/index.jsx

@@ -1,6 +1,4 @@
 import PropTypes from 'prop-types';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import FooterBar from '../FooterBar';
 import HeaderBar from '../../containers/HeaderBar';
 import Video from '../../containers/Video';
@@ -15,14 +13,13 @@ import ConnectionIndicator from '../ConnectionIndicator';
 import SidePanels from '../SidePanels';
 import Dialogs from '../Dialogs';
 import AddToPlaylistMenu from '../../containers/AddToPlaylistMenu';
-import DragLayer from '../../containers/DragLayer';
 
 function App({
   activeOverlay,
   isConnected,
   onCloseOverlay,
 }) {
-  const el = (
+  return (
     <div className="App">
       <div className="AppColumn AppColumn--left">
         <div className="AppRow AppRow--top">
@@ -53,15 +50,8 @@ function App({
       <Dialogs />
 
       <AddToPlaylistMenu />
-      <DragLayer />
     </div>
   );
-
-  return (
-    <DndProvider backend={HTML5Backend}>
-      {el}
-    </DndProvider>
-  );
 }
 
 App.propTypes = {

src/components/MediaList/MediaDragPreview.tsx

@@ -1,35 +1,14 @@
 import { mdiFormatListBulleted } from '@mdi/js';
 import SvgIcon from '../SvgIcon';
-import type { Media } from '../../reducers/booth';
-
-function getItemStyles(offset: { x: number, y: number } | null) {
-  if (offset != null) {
-    return {
-      display: 'inline-block',
-      transform: `translate(${offset.x}px, ${offset.y}px)`,
-    };
-  }
-  return { display: 'none' };
-}
 
 type MediaDragPreviewProps = {
-  items?: { media?: Media[] | null } | null,
-  currentOffset: { x: number, y: number } | null,
+  count: number,
 };
-function MediaDragPreview({
-  items,
-  currentOffset,
-}: MediaDragPreviewProps) {
-  if (!items || !items.media) {
-    return null;
-  }
+function MediaDragPreview({ count }: MediaDragPreviewProps) {
   return (
-    <div
-      className="MediaDragPreview"
-      style={getItemStyles(currentOffset)}
-    >
+    <div className="MediaDragPreview">
       <SvgIcon path={mdiFormatListBulleted} className="MediaDragPreview-icon" />
-      {items.media.length}
+      {count}
     </div>
   );
 }