fix(web): websocket should now work properly

TheTipo01 · Nov 5, 2023 · 26d78f5 · 26d78f5
1 parent beb62bd
commit 26d78f5
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 52 deletions.
diff --git a/web/src/lib/song.js b/web/src/lib/song.js
@@ -23,7 +23,7 @@ export async function ToggleSong(GuildID, token, action = "", host) {
                 return Response.QUEUE_TOKEN_ERR;
                 break;
             case 406:
-                return Response.QUEUE_EMPTY_ERR;
+                return Response.SONG_PAUSED_ERR;
                 break;
             case 500:
                 return Response.SONG_TOGGLE_ERR;

diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
@@ -4,20 +4,83 @@
     import {Avatar, TabItem, Tabs} from "flowbite-svelte"
     import StarSolid from "flowbite-svelte-icons/StarSolid.svelte"
     import ListMusicSolid from "flowbite-svelte-icons/ListMusicSolid.svelte"
-    import {GetGuildID, GetToken, GetHost} from "../lib/utilities"
+    import {
+        AddObjectToArray, 
+        ClearArray, 
+        RemoveFirstObjectFromArray, 
+        SetPause, 
+        TogglePause,
+        GetGuildID, 
+        GetToken, 
+        GetHost,
+    } from "../lib/utilities"
     import {onMount} from "svelte";
+    import {GetQueue} from "$lib/queue"
     import logo from "../assets/logo_yadmb.png"
 
     // variables
     let GuildId = '';
     let token = '';
     let host = '';
     let activetab = "queue";
+    let queue = null;
 
     onMount(() => {
         GuildId = GetGuildID();
         token = GetToken();
         host = GetHost();
+        queue = GetQueue(GuildId, token, host);
+
+        let websocket_url = `${host}/ws/${GuildId}?` + new URLSearchParams({"token": token}).toString();
+        // If the host is in https, use wss instead of ws
+        if (window.location.protocol === "https:") {
+            websocket_url = websocket_url.replace("https://", "wss://");
+        } else {
+            websocket_url = websocket_url.replace("http://", "ws://");
+        }
+
+        // Connects to the websocket
+        function start() {
+            const socket = new WebSocket(websocket_url);
+            socket.onmessage = function (e) {
+                // Enum for the events
+                const Notification = Object.freeze({
+                    NewSong: 0,
+                    Skip: 1,
+                    Pause: 2,
+                    Resume: 3,
+                    Clear: 4,
+                    Finished: 5,
+                });
+                let signal = JSON.parse(e.data)
+                switch (signal.notification) {
+                    case Notification.NewSong: // New song
+                        queue = AddObjectToArray(queue, signal.song);
+                        break;
+                    case Notification.Skip:
+                    case Notification.Finished: // Song skipped or finished
+                        queue = RemoveFirstObjectFromArray(queue);
+                        queue = SetPause(queue, false);
+                        break;
+                    case Notification.Clear: // Queue cleared
+                        queue = ClearArray(queue);
+                        queue = SetPause(queue, false);
+                        break;
+                    case Notification.Resume:
+                    case Notification.Pause: // Song paused or resumed
+                        queue = TogglePause(queue);
+                        break;
+                }
+            }
+
+            socket.onclose = function(e) {
+                if(!socket || socket.readyState === WebSocket.CLOSED) start();
+            }
+            socket.onerror = socket.onclose;
+
+        }
+        
+        start();
     });
 
 
@@ -34,8 +97,8 @@
             Queue
         </div>
         {#if activetab === "queue"}
-            {#if GuildId !== '' && token !== '' && host !== ''}
-                <Queue GuildId={GuildId} token={token} host={host}/>
+            {#if GuildId !== '' && token !== '' && host !== '' && queue != null}
+                <Queue GuildId={GuildId} token={token} host={host} queue={queue}/>
             {/if}
         {/if}
     </TabItem>

diff --git a/web/src/routes/errors.svelte b/web/src/routes/errors.svelte
@@ -1,5 +1,5 @@
 <script>
-    import {Toast, P} from "flowbite-svelte";
+    import {Toast} from "flowbite-svelte";
     import {get_message, Response} from "../lib/error"
     import CheckCircleSolid from "flowbite-svelte-icons/CheckCircleSolid.svelte"
     import CloseCircleSolid from "flowbite-svelte-icons/CloseCircleSolid.svelte"

diff --git a/web/src/routes/queue.svelte b/web/src/routes/queue.svelte
@@ -3,68 +3,22 @@
     import {A, Avatar, Button, Checkbox, Heading, Input, Label, Modal, P} from "flowbite-svelte";
     import {AddToQueueHTML, GetQueue, RemoveFromQueue} from "../lib/queue";
     import {ToggleSong} from "../lib/song";
-    import {AddObjectToArray, ClearArray, RemoveFirstObjectFromArray, SetPause, TogglePause} from "../lib/utilities"
     import PlaySolid from "flowbite-svelte-icons/PlaySolid.svelte";
     import PauseSolid from "flowbite-svelte-icons/PauseSolid.svelte";
     import Error from "./errors.svelte"
-    import {onMount} from "svelte";
 
     // props
     export let GuildId;
     export let token;
     export let host;
+    export let queue;
 
 
     // variables
-    let queue = GetQueue(GuildId, token, host);
     let code = queue;
     let showModal = false;
     let isPlaylist = false;
 
-    // WebSocket
-    onMount(async () => {
-        let websocket_url = `${host}/ws/${GuildId}?` + new URLSearchParams({"token": token}).toString();
-        // If the host is in https, use wss instead of ws
-        if (window.location.protocol === "https:") {
-            websocket_url = websocket_url.replace("https://", "wss://");
-        } else {
-            websocket_url = websocket_url.replace("http://", "ws://");
-        }
-
-        // Connects to the websocket
-        const socket = new WebSocket(websocket_url);
-        socket.onmessage = function (e) {
-            // Enum for the events
-            const Notification = Object.freeze({
-                NewSong: 0,
-                Skip: 1,
-                Pause: 2,
-                Resume: 3,
-                Clear: 4,
-                Finished: 5,
-            });
-            let signal = JSON.parse(e.data)
-            switch (signal.notification) {
-                case Notification.NewSong: // New song
-                    queue = AddObjectToArray(queue, signal.song);
-                    break;
-                case Notification.Skip:
-                case Notification.Finished: // Song skipped or finished
-                    queue = RemoveFirstObjectFromArray(queue);
-                    queue = SetPause(queue, false);
-                    break;
-                case Notification.Clear: // Queue cleared
-                    queue = ClearArray(queue);
-                    queue = SetPause(queue, false);
-                    break;
-                case Notification.Resume:
-                case Notification.Pause: // Song paused or resumed
-                    queue = TogglePause(queue);
-                    break;
-            }
-        }
-    });
-
 </script>
 
 <!-- Modal Button -->