replace react-sortable-hoc with dnd-kit

js/webui/package.json

@@ -13,6 +13,9 @@
     "watch": "webpack-cli --watch"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "detect-it": "^4.0.1",
     "lodash": "^4.17.21",
     "navigo": "^8.11.1",
@@ -22,7 +25,6 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-modal": "^3.16.1",
-    "react-sortable-hoc": "^2.0.0",
     "shallowequal": "^1.1.0",
     "use-sync-external-store": "^1.6.0"
   },

js/webui/sources.cmake

@@ -25,6 +25,7 @@ src/file_browser.js
 src/file_browser_header.js
 src/file_browser_model.js
 src/general_settings.js
+src/hooks.js
 src/index.html
 src/index.js
 src/loader.gif
@@ -59,6 +60,7 @@ src/settings_header.js
 src/settings_model.js
 src/settings_model_base.js
 src/settings_store.js
+src/sortable.js
 src/status_bar.js
 src/style.less
 src/tests/index.html

js/webui/src/app.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { PanelHeader } from './elements.js'
 import { ControlBarNarrowCompact, ControlBarNarrowFull, ControlBarWide } from './control_bar.js'
-import PlaylistSwitcher from './playlist_switcher.js'
+import { PlaylistSelector, TabbedPlaylistSwitcher } from './playlist_switcher.js'
 import PlaylistMenu from './playlist_menu.js'
 import PlaylistContent from './playlist_content.js'
 import FileBrowser from './file_browser.js'
@@ -16,12 +16,14 @@ import { useCurrentView, useSettingValue } from './hooks.js';
 import { MediaSize } from './settings_model.js';
 
 const viewContent = {
-    [View.playlist]: {
-        header: <div className="panel panel-header">
-            <PlaylistSwitcher/>
-            <PlaylistMenu/>
-        </div>,
-        main: <PlaylistContent/>,
+    [View.playlist]: mediaSize => {
+        return {
+            header: <div className="panel panel-header">
+                { mediaSize === MediaSize.small ? <PlaylistSelector/> : <TabbedPlaylistSwitcher/> }
+                <PlaylistMenu/>
+            </div>,
+            main: <PlaylistContent/>,
+        };
     },
     [View.fileBrowser]: {
         header: <FileBrowserHeader />,
@@ -47,7 +49,8 @@ export function App()
     const showStatusBar = useSettingValue('showStatusBar');
     const mediaSize = useSettingValue('mediaSize');
 
-    const { header, main } = viewContent[view];
+    const contentProvider = viewContent[view];
+    const { header, main } = typeof contentProvider === 'function' ? contentProvider(mediaSize) : contentProvider;
 
     const playbackInfoBar = mediaSize === MediaSize.small && showPlaybackInfo ? <PlaybackInfoBar/> : null;
     const statusBar = showStatusBar ? <StatusBar/> : null;