diff --git a/extension/spotiqueue.js b/extension/spotiqueue.js index da999b1..e24742b 100644 --- a/extension/spotiqueue.js +++ b/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", - `

hi

`, // 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(); })(); diff --git a/static/index.html b/static/index.html index 32fd221..7e8513f 100644 --- a/static/index.html +++ b/static/index.html @@ -7,6 +7,11 @@ SpotiQueue + @@ -35,7 +40,7 @@