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

81
extension/spotiqueue.js
View file

@ -1,4 +1,5 @@
const DEFAULT_WS_URL = "ws://localhost:8000/ws/spotify";
const DEFAULT_WS_URL =
localStorage.getItem("spotiqueueUrl") ?? "ws://localhost:8000/ws/spotify";
const DEFAULT_RECONNECT_MS = 1000;
class SpotiQueue {
@ -72,12 +73,14 @@ class SpotiQueue {
this.socket = null;
}
if (this.button) this.button.style.color = "#e22134";
console.log("[SpotiQueue] Disconnecting from server, Bye!");
}
send(objOrString) {
if (!this.socket || this.socket.readyState !== WebSocket.OPEN) return;
const payload = (typeof objOrString === "string")
const payload =
typeof objOrString === "string"
? objOrString
: JSON.stringify(objOrString);
try {
@ -141,7 +144,7 @@ class SpotiQueue {
includeAuthors: true,
});
console.log(data)
console.log(data);
songs = data.searchV2.tracksV2.items.reduce((o, c) => {
const item = c.item.data;
@ -151,14 +154,12 @@ class SpotiQueue {
o.push({
name: item.name,
uri: item.uri,
artists: item.artists.items.map(v => v.profile?.name),
artists: item.artists.items.map((v) => v.profile?.name),
album: {
name: album.name,
coverUrl: album.coverArt.sources.sort((a, b) =>
b.height - a.height
).map((v) =>
v.url
)[0],
coverUrl: album.coverArt.sources
.sort((a, b) => b.height - a.height)
.map((v) => v.url)[0],
},
});
@ -171,16 +172,17 @@ class SpotiQueue {
console.log("[SpotiQueue] Found", songs);
this.send({
"c": "search",
"d": {
"id": id,
"results": songs,
c: "search",
d: {
id: id,
results: songs,
},
});
}
}
_onError() {
_onError(e) {
try {
console.log(e);
if (this.socket) this.socket.close();
} catch {
// ignore
@ -200,35 +202,45 @@ class SpotiQueue {
);
}
if (this.button) this.button.style.color = "";
if (this.button) this.button.style.color = ""
this.closing = false;
}
initUi() {
const btn = new Spicetify.Topbar.Button(
"SpotiQueue",
`<p>hi</p>`, // SVG icon or markup
() => {
if (!this.socket) {
if (Spicetify.GraphQL.Definitions.searchDesktop === undefined) {
Spicetify.showNotification("Please search something (e.g a song) before trying to use SpotiQueue. This will load required dependencies.")
"enhance", // SVG icon or markup
() => {},
);
this.button = btn.button;
this.button.style.color = "#e22134"
this.button.addEventListener("click", (e) => {
console.log(e.pointerId);
if (this.socket) {
this.stop();
return
}
this.connect();
this.button.innerText = "bye";
} else {
this.stop();
this.button.innerText = "hi";
if (Spicetify.GraphQL.Definitions.searchDesktop === undefined) {
Spicetify.Platform.History.push("/search/");
setTimeout(() => {
this.button.click();
Spicetify.Platform.History.goBack();
}, 200);
return;
}
},
);
this.button = btn.button;
this.closing = false;
this.button.style.color = ""
this.connect();
});
Spicetify.Player.addEventListener("songchange", (info) => {
console.log(info);
if (
this.socket && this.socket.readyState === WebSocket.OPEN &&
this.socket &&
this.socket.readyState === WebSocket.OPEN &&
!this.startedPlaying
) {
Spicetify.Player.pause();
@ -242,14 +254,17 @@ class SpotiQueue {
(function init() {
if (
!Spicetify.Player || !Spicetify.Platform || !Spicetify.GraphQL ||
!Spicetify.GraphQL.Request || !Spicetify.GraphQL.Definitions
!Spicetify.Player ||
!Spicetify.Platform ||
!Spicetify.GraphQL ||
!Spicetify.GraphQL.Request ||
!Spicetify.GraphQL.Definitions
) {
setTimeout(init, 100);
console.log("[SpotiQueue] loading extension... ");
return;
}
const client = new SpotiQueue();
client.initUi();
globalThis.spotiQueue = new SpotiQueue();
globalThis.spotiQueue.initUi();
})();

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);