Fixed dragging and improved mobile phone support

extension/spotiqueue.js

@@ -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,14 +73,16 @@ 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 =
-      ? objOrString
+      typeof objOrString === "string"
-      : JSON.stringify(objOrString);
+        ? objOrString
+        : JSON.stringify(objOrString);
     try {
       this.socket.send(payload);
     } catch (err) {
@@ -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) =>
+              coverUrl: album.coverArt.sources
-                b.height - a.height
+                .sort((a, b) => b.height - a.height)
-              ).map((v) =>
+                .map((v) => v.url)[0],
-                v.url
-              )[0],
             },
           });
 
@@ -171,16 +172,17 @@ class SpotiQueue {
       console.log("[SpotiQueue] Found", songs);
 
       this.send({
-        "c": "search",
+        c: "search",
-        "d": {
+        d: {
-          "id": id,
+          id: id,
-          "results": songs,
+          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
+      "enhance", // 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.")
-            return
-          }
-
-          this.connect();
-          this.button.innerText = "bye";
-        } else {
-          this.stop();
-          this.button.innerText = "hi";
-        }
-      },
     );
+
     this.button = btn.button;
+    this.button.style.color = "#e22134"
+    this.button.addEventListener("click", (e) => {
+      console.log(e.pointerId);
+      if (this.socket) {
+        this.stop();
+        return
+      } 
+
+      if (Spicetify.GraphQL.Definitions.searchDesktop === undefined) {
+        Spicetify.Platform.History.push("/search/");
+        setTimeout(() => {
+          this.button.click();
+          Spicetify.Platform.History.goBack();
+        }, 200);
+        return;
+      }
+
+      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.Player ||
-    !Spicetify.GraphQL.Request || !Spicetify.GraphQL.Definitions
+    !Spicetify.Platform ||
+    !Spicetify.GraphQL ||
+    !Spicetify.GraphQL.Request ||
+    !Spicetify.GraphQL.Definitions
   ) {
     setTimeout(init, 100);
     console.log("[SpotiQueue] loading extension... ");
     return;
   }
 
-  const client = new SpotiQueue();
+  globalThis.spotiQueue = new SpotiQueue();
-  client.initUi();
+  globalThis.spotiQueue.initUi();
 })();

static/index.html

@@ -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">
+  <dialog id="search-dock-modal" class="modal modal-bottom md:modal-middle">
-    <div class="modal-box flex flex-col  sm:h-auto max-h-[50dvh]">
+    <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) => {
+    sortable.on("sortable:start", (evt) => {
-      if (evt.source.draggable) return;
+      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);