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")
-      ? objOrString
-      : JSON.stringify(objOrString);
+    const payload =
+      typeof objOrString === "string"
+        ? 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) =>
-                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.")
-            return
-          }
-
-          this.connect();
-          this.button.innerText = "bye";
-        } else {
-          this.stop();
-          this.button.innerText = "hi";
-        }
-      },
+      "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
+      } 
+
+      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.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();
 })();