diff --git a/spotify.html b/spotify.html new file mode 100644 index 0000000..89aee31 --- /dev/null +++ b/spotify.html @@ -0,0 +1,32 @@ + + + + + + + + + + Spotify Widget + + +
+
+ +
+ +
+

+
+
+ + + + + + + \ No newline at end of file diff --git a/static/js/spotify_widget.js b/static/js/spotify_widget.js new file mode 100644 index 0000000..477f618 --- /dev/null +++ b/static/js/spotify_widget.js @@ -0,0 +1,23 @@ +const socket = io("https://api.thatalex.dev") + +// divs used +var div = document.getElementById("container"); +var image = div.querySelector("#cover-img"); +var text = div.querySelector("#cover-text"); +var content = div.querySelector(".cover-text"); + +console.log("[ws] asked server to initiate connection..") +socket.emit("spotify_status", "listen"); +socket.on("api_update", (song_data) => { + image.src = song_data.cover + text.innerHTML = `${song_data.title} - ${song_data.album}
${song_data.artist}
${song_data.position}/${song_data.duration}`; +}); + +// on connect + error events +socket.on("connect", () => { + console.log('[ws] hello dear friend! connected successfully to backend, formatting page') +}) + +socket.on("error", (e) => { + console.log(e) +}) \ No newline at end of file