jsw/spotiqueue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed dragging and improved mobile phone support

Browse source
This commit is contained in:
Jurn Wubben 2026-02-03 14:23:25 +01:00
parent 241b5c5a3e
commit 2ac96108d8
2 changed files with 77 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

39
static/index.html
View file

@ -7,6 +7,11 @@
<title>SpotiQueue</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style>
li.song.draggable-mirror {
@apply bg-base-200
}
</style>
</head>
<body>
@ -35,7 +40,7 @@
<!-- Main page -->
<div id="m-page" class="hidden w-full h-dvh flex flex-col p-2">
<!-- Desktop navbar -->
<div class="hidden sm:block pb-2 w-full flex-none">
<div class="hidden md:block pb-2 w-full flex-none">
<div class="navbar bg-base-300 shadow-sm rounded-md">
<div class="navbar-start">
<a class="btn btn-ghost text-xl">SpotiQueue</a>
@ -69,12 +74,12 @@
<!-- Main content -->
<div class="flex-grow flex flex-col md:flex-row-reverse gap-4 m-2">
<div class="flex-3 bg-base-200 rounded-md shadow-md">
<ul class="list bg-base-100 rounded-box shadow-md m-1" id="songlist-merged">
<ul class="list bg-base-100 rounded-box shadow-md m-1 overflow-y-scroll" id="songlist-merged">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Merged Queue</li>
</ul>
</div>
<div class="flex-5 md:flex-4 lg:flex-5 bg-base-200 rounded-md shadow-md">
<ul class="list bg-base-100 rounded-box shadow-md m-1" id="songlist-personal">
<ul class="list bg-base-100 rounded-box shadow-md m-1 overflow-y-scroll" id="songlist-personal">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Personal Queue</li>
</ul>
</div>
@ -82,7 +87,7 @@
<!-- Mobile dock -->
<div class="dock sm:hidden justify-self-end z-0 static">
<div class="dock md:hidden justify-self-end z-0 static">
<button class="dock-active">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256" class="size-[1.2em]">
<path fill="currentColor"
@ -118,7 +123,7 @@
<div class="hidden">
<!-- template song personal -->
<template id="template-song-personal">
<li class="list-row song">
<li class="list-row song " draggable="true">
<div class="drag-handle cursor-move select-none touch-none text-2xl opacity-50 mr-2">⋮⋮</div>
<div><img class="size-10 rounded-box"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="thumbnail"></div>
@ -168,7 +173,7 @@
</template>
</div>
<dialog id="modal" class="modal modal-bottom sm:modal-middle">
<dialog id="modal" class="modal modal-bottom md:modal-middle">
<div class="modal-box">
<h3 id="modal-header" class="text-lg font-bold"></h3>
<p id="modal-text" class="py-4"></p>
@ -183,8 +188,8 @@
<button>close</button>
</form>
</dialog>
<dialog id="search-dock-modal" class="modal modal-bottom sm:modal-middle">
<div class="modal-box flex flex-col sm:h-auto max-h-[50dvh]">
<dialog id="search-dock-modal" class="modal modal-bottom md:modal-middle">
<div class="modal-box flex flex-col md:h-auto max-h-[50dvh]">
<ul id="search-dock-songs" class="list overflow-y-auto flex-grow">
</ul>
@ -397,6 +402,9 @@
connected.value = msg.d.status ? 0 : 1;
}
else if (msg.c === "search") {
DOMSearchNavDropown.innerHTML = "";
DOMSearchDockSongs.innerHTML = "";
for (let song of msg.d.songs) {
const el = document.importNode(DOMTemplateSongSearch.content, true);
//el.querySelector(".tabular-nums").innerText = (index + 1).toString().padStart(2, "0");
@ -471,7 +479,7 @@
d: {query}
}))
DOMSearchNavDropown.innerHTML = "";
DOMSearchNavDropown.innerHTML = '<div class="skeleton w-full h-16"></div>';
DOMSearchNavDropown.showPopover();
}
function dockSearch(e) {
@ -484,6 +492,8 @@
c: "search",
d: {query}
}))
DOMSearchDockSongs.innerHTML = '<div class="skeleton w-full h-16 mb-4"></div>';
}
Array.prototype.move = function (from, to) {
@ -492,12 +502,13 @@
let sortable = new Sortable(DOMMainSongPersonal, {
draggable: '.song',
handle: '.drag-handle',
mirror: {
/*mirror: {
constrainDimensions: true,
}
}*/
});
sortable.on("drag:start", (evt) => {
if (evt.source.draggable) return;
sortable.on("sortable:start", (evt) => {
if (evt.dragEvent.source.draggable) return;
evt.cancel()
})
sortable.on('sortable:stop', (evt) => {
@ -518,7 +529,7 @@
DOMSearchNavForm.addEventListener("submit", navSearch)
DOMSearchDockForm.addEventListener("submit", dockSearch)
DOMSearchDockButton.addEventListener("click", () => {
DOMSearchDockSongs.innerHTML = "";
DOMSearchDockSongs.innerHTML = '';
DOMSearchDockModal.showModal()
DOMSearchDockInput.focus();
setTimeout(window.scrollTo({left: 0, top: document.body.scrollHeight, behavior: "smooth"}), 500);