feat: added mobile drag and drop polyfill for custom draggable

frontend/package-lock.json

@@ -18,6 +18,7 @@
         "eslint-config-airbnb-base": "^15.0.0",
         "lofig": "^1.3.4",
         "marked": "^4.0.18",
+        "mobile-drag-drop": "^2.3.0-rc.2",
         "normalize.css": "^8.0.1",
         "pinia": "^2.0.17",
         "toasters": "^2.3.1",
@@ -3395,6 +3396,11 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/mobile-drag-drop": {
+      "version": "2.3.0-rc.2",
+      "resolved": "https://registry.npmjs.org/mobile-drag-drop/-/mobile-drag-drop-2.3.0-rc.2.tgz",
+      "integrity": "sha512-4rHP0PUeWkSp0O3waNHPQZCHeZnLu8bE59MerWOnZJ249BCyICXL1WWp3xqkMKXEDFYuhfk3bS42bKB9IeN9uw=="
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -7011,6 +7017,11 @@
         "minimist": "^1.2.6"
       }
     },
+    "mobile-drag-drop": {
+      "version": "2.3.0-rc.2",
+      "resolved": "https://registry.npmjs.org/mobile-drag-drop/-/mobile-drag-drop-2.3.0-rc.2.tgz",
+      "integrity": "sha512-4rHP0PUeWkSp0O3waNHPQZCHeZnLu8bE59MerWOnZJ249BCyICXL1WWp3xqkMKXEDFYuhfk3bS42bKB9IeN9uw=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

frontend/package.json

@@ -41,6 +41,7 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "lofig": "^1.3.4",
     "marked": "^4.0.18",
+    "mobile-drag-drop": "^2.3.0-rc.2",
     "normalize.css": "^8.0.1",
     "pinia": "^2.0.17",
     "toasters": "^2.3.1",

frontend/src/App.vue

@@ -307,6 +307,7 @@ onMounted(async () => {
 @import "normalize.css/normalize.css";
 @import "tippy.js/dist/tippy.css";
 @import "tippy.js/animations/scale.css";
+@import "mobile-drag-drop/default.css";
 
 :root {
 	--primary-color: var(--blue);

frontend/src/components/PlaylistTabBase.vue

@@ -812,7 +812,6 @@ onMounted(() => {
 					v-if="playlists.length > 0"
 				>
 					<draggable
-						:name="`my-playlists-${type}-${sector}-${modalUuid}`"
 						v-model:list="playlists"
 						item-key="_id"
 						@start="drag = true"

frontend/src/components/modals/ImportAlbum.vue

@@ -333,53 +333,6 @@ const updateTrackSong = updatedSong => {
 	});
 };
 
-// const updatePlaylistSongPosition = ({ oldIndex, newIndex }) => {
-// 	if (oldIndex === newIndex) return;
-// 	const oldSongs = playlistSongs.value;
-// 	oldSongs.splice(newIndex, 0, oldSongs.splice(oldIndex, 1)[0]);
-// 	playlistSongs.value = oldSongs;
-// };
-
-// const updateTrackSongPosition = (trackIndex, { oldIndex, newIndex }) => {
-// 	if (oldIndex === newIndex) return;
-// 	const oldSongs = trackSongs.value[trackIndex];
-// 	oldSongs.splice(newIndex, 0, oldSongs.splice(oldIndex, 1)[0]);
-// 	trackSongs.value[trackIndex] = oldSongs;
-// };
-
-// const playlistSongAdded = event => {
-// 	const fromTrack = event.from;
-// 	const fromTrackIndex = Number(fromTrack.dataset.trackIndex);
-// 	const song = trackSongs.value[fromTrackIndex][event.oldIndex];
-// 	const newPlaylistSongs = JSON.parse(JSON.stringify(playlistSongs.value));
-// 	newPlaylistSongs.splice(event.newIndex, 0, song);
-// 	playlistSongs.value = newPlaylistSongs;
-// };
-
-// const playlistSongRemoved = event => {
-// 	playlistSongs.value.splice(event.oldIndex, 1);
-// };
-
-// const trackSongAdded = (trackIndex, event) => {
-// 	const fromElement = event.from;
-// 	let song = null;
-// 	if (fromElement.dataset.trackIndex) {
-// 		const fromTrackIndex = Number(fromElement.dataset.trackIndex);
-// 		song = trackSongs.value[fromTrackIndex][event.oldIndex];
-// 	} else {
-// 		song = playlistSongs.value[event.oldIndex];
-// 	}
-// 	const newTrackSongs = JSON.parse(
-// 		JSON.stringify(trackSongs.value[trackIndex])
-// 	);
-// 	newTrackSongs.splice(event.newIndex, 0, song);
-// 	trackSongs.value[trackIndex] = newTrackSongs;
-// };
-
-// const trackSongRemoved = (trackIndex, event) => {
-// 	trackSongs.value[trackIndex].splice(event.oldIndex, 1);
-// };
-
 onMounted(() => {
 	ws.onConnect(init);
 

frontend/src/main.ts

@@ -4,6 +4,8 @@ import { createApp } from "vue";
 import VueTippy, { Tippy } from "vue-tippy";
 import { createRouter, createWebHistory } from "vue-router";
 import { createPinia } from "pinia";
+import { polyfill as mobileDragDropPolyfill } from "mobile-drag-drop";
+import { scrollBehaviourDragImageTranslateOverride as mobileDragDropScrollBehaviourDragImageTranslateOverride } from "mobile-drag-drop/scroll-behaviour";
 import "lofig";
 
 import { useUserAuthStore } from "@/stores/userAuth";
@@ -298,6 +300,13 @@ lofig.folder = defaultConfigURL;
 	const websocketsDomain = await lofig.get("backend.websocketsDomain");
 	ws.init(websocketsDomain);
 
+	mobileDragDropPolyfill({
+		dragImageTranslateOverride:
+			mobileDragDropScrollBehaviourDragImageTranslateOverride
+	});
+
+	window.addEventListener("touchmove", () => {});
+
 	if (await lofig.get("siteSettings.mediasession")) ms.init();
 
 	ws.socket.on("ready", res => {