fix(web): Pressing enter when adding a song should now send the request

chore(web): Added some documentation
TheTipo01 · Nov 2, 2023 · 8aa2b12 · 8aa2b12
1 parent f61737e
commit 8aa2b12
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 12 deletions.
diff --git a/web/src/lib/error.js b/web/src/lib/error.js
@@ -14,9 +14,9 @@ export const Response = Object.freeze({
     FAVORITE_TOKEN_ERROR: 12,
 })
 
+// Function to handle the status code of each function
 export function get_message(code) {
     let msg = ""
-    console.log(code);
     switch(code) {
         case Response.SUCCESS:
             msg = "Done.";

diff --git a/web/src/lib/favorites.js b/web/src/lib/favorites.js
@@ -1,5 +1,6 @@
 import { Response } from "./error";
 
+// Function to add a song to the favorites
 export async function AddFavorite(token, host) {
     let name = document.getElementById("name").value.trim();
     let link = document.getElementById("link").value.trim();
@@ -32,6 +33,7 @@ export async function AddFavorite(token, host) {
     }
 }
 
+// Function to remove a song from the favorites
 export async function RemoveFavorite(token, name, host) {
     // Request
     let route = `${host}/favorites?` + new URLSearchParams({'name': name, 'token': token}).toString();
@@ -58,6 +60,7 @@ export async function RemoveFavorite(token, name, host) {
     }
 }
 
+// Function to get the favorite songs
 export async function GetFavorites(token, host) {
     // Request
     let route = `${host}/favorites?` + new URLSearchParams({"token": token}).toString();

diff --git a/web/src/lib/queue.js b/web/src/lib/queue.js
@@ -12,6 +12,7 @@ export async function AddToQueueHTML(GuildID, token, host) {
     return AddToQueue(GuildID, token, host, song, shuffle, playlist, loop, priority);
 }
 
+// Function to add a song to the queue
 export async function AddToQueue(GuildID, token, host, song, shuffle, playlist, loop, priority) {
     // Request
     let route = `${host}/queue/${GuildID}`
@@ -44,6 +45,7 @@ export async function AddToQueue(GuildID, token, host, song, shuffle, playlist,
     }
 }
 
+// Function to remove a song from the queue or clear it
 export async function RemoveFromQueue(GuildID, token, clear=false, host) { // AKA skip
     // Request
     let route = `${host}/queue/${GuildID}?` + new URLSearchParams({'clean': clear.toString(), 'token': token}).toString();
@@ -68,6 +70,7 @@ export async function RemoveFromQueue(GuildID, token, clear=false, host) { // AK
     }
 }
 
+// Function to get the queue
 export async function GetQueue(GuildID, token, host) {
     // Request
     let route = `${host}/queue/${GuildID}?` + new URLSearchParams({"token": token}).toString();

diff --git a/web/src/lib/song.js b/web/src/lib/song.js
@@ -1,6 +1,7 @@
 // This file contains a function used in the queue.svelte component
 
-export async function ToggleSong(GuildID, token, action = "", host) {  // AKA Pause/Resume Song
+// Function to pause or resume the current song 
+export async function ToggleSong(GuildID, token, action = "", host) {
     // Request
     if(action === "") {
         return -8

diff --git a/web/src/lib/utilities.js b/web/src/lib/utilities.js
@@ -1,5 +1,5 @@
 import { AddFavorite } from "./favorites";
-import { AddToQueue } from "./queue";
+import { AddToQueueHTML } from "./queue";
 
 // Function to add an object to the array 
 export function AddObjectToArray(promise, objectToAdd) {
@@ -46,35 +46,47 @@ export function SetPause(promise, isPaused) {
     });
 }
 
+// Function used when clearing the queue
 export function ClearArray(promise) {
     return promise.then(() => {
         return [];
     })
 }
 
+// Function to get the GuildID from URL query
 export function GetGuildID() {
     let query = new URLSearchParams(window.location.search);
     return query.get("GuildId");
 }
 
+// Function to get the Token from URL query
 export function GetToken() {
     let query = new URLSearchParams(window.location.search);
     return query.get('token');
 }
 
+// Function to get the hostname and protocol from URL
 export function GetHost() {
     return window.location.protocol + "//" + window.location.host;
 }
 
+// Function to handle keyboard inputs
 export function KeyPressed(e, scope, GuildId = "", token = "", host = "") {
     switch(e.key) {
         case 'Enter':
             switch(scope) {
                 case 'queue':
-                    AddToQueue(GuildId, token, host);
+                    console.log(e.target.value);
+                    AddToQueueHTML(GuildId, token, host);
+                    break;
                 case 'favorite':
                     AddFavorite(token, host);
+                    break;
+                default:
+                    break;
             }
             break;
+        default:
+            break;
     }
 }
diff --git a/web/src/routes/favorites.svelte b/web/src/routes/favorites.svelte
@@ -21,12 +21,15 @@
     let showModal = false;
 </script>
 
+<!-- Modal Button -->
 <Button class="w-25 absolute right-9 bottom-5" on:click={() => (showModal = true)}>
     Add to Favorites
 </Button>
 
+<!-- Modal Component -->
 <Modal title="Add Favorite" bind:open={showModal} autoclose>
     <form id="form">
+        <!-- Form inputs -->
         <div class="grid grid-rows-3">
             <div>
                 <Label for="name" class="mb-2">Song Name</Label>
@@ -42,6 +45,8 @@
             </div>
         </div>
     </form>
+
+    <!-- Submit button -->
     <svelte:fragment slot="footer">
         <Button on:click={ async () => {
             let result = await AddFavorite(token, host, favorites);

diff --git a/web/src/routes/queue.svelte b/web/src/routes/queue.svelte
@@ -37,8 +37,10 @@
             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,
@@ -53,16 +55,16 @@
                     queue = AddObjectToArray(queue, signal.song);
                     break;
                 case Notification.Skip:
-                case Notification.Finished:
+                case Notification.Finished: // Song skipped or finished
                     queue = RemoveFirstObjectFromArray(queue);
                     queue = SetPause(queue, false);
                     break;
-                case Notification.Clear:
+                case Notification.Clear: // Queue cleared
                     queue = ClearArray(queue);
                     queue = SetPause(queue, false);
                     break;
                 case Notification.Resume:
-                case Notification.Pause:
+                case Notification.Pause: // Song paused or resumed
                     queue = TogglePause(queue);
                     break;
             }
@@ -71,47 +73,61 @@
 
 </script>
 
+<!-- Modal Button -->
 <Button class="w-25 absolute right-9 bottom-5" on:click={() => (showModal = true)}>
     Add to Queue
 </Button>
 
+<!-- Modal component -->
 <Modal title="Add To Queue" bind:open={showModal} autoclose>
     <form id="form">
         <div class="grid grid-rows-2">
+            <!-- Song input -->
             <div>
                 <Label for="song" class="mb-2">Song Link/Name</Label>
-                <Input type="text" id="song" required/>
+                <Input type="text" id="song" on:keydown={(e) => (KeyPressed(e, "queue", GuildId, token, host))} required/>
             </div>
-            <div class="grid grid-cols-4">
+            <!-- Checkboxes -->
+            <div class="flex gap-3">
                 <Checkbox on:click={() => (isPlaylist=!isPlaylist)} id="playlist">Playlist</Checkbox>
-                <Checkbox disabled={!isPlaylist} id="shuffle">Shuffle</Checkbox>
+                {#if isPlaylist}
+                    <Checkbox id="shuffle">Shuffle</Checkbox>
+                {:else}
+                    <Checkbox disabled id="shuffle">Shuffle</Checkbox>
+                {/if}
                 <Checkbox id="loop">Loop song</Checkbox>
                 <Checkbox id="priority">Priority</Checkbox>
             </div>
         </div>
     </form>
+    <!-- Submit Button -->
     <svelte:fragment slot="footer">
-        <Button on:click={() => AddToQueueHTML(GuildId, token, host)} on:keydown={(e) => (KeyPressed(e, "queue", GuildId, token, host))}>Add</Button>
+        <Button on:click={() => AddToQueueHTML(GuildId, token, host)}>Add</Button>
     </svelte:fragment>
 </Modal>
 
-
+<!-- Queue -->
 {#await queue} 
 <P>Fetching Queue</P>
 {:then json}
 {#if json.length !== 0 && typeof(json) != "number"}
 <div class="grid grid-cols-2 gap-4">
+    <!-- Left side of the grid shows the current song -->
     <div >
+        <!-- Thumbnail and pause/resume buttons -->
         <img alt="thumbnail" src={json[0].thumbnail} class="justify-self-center"/>
         <div class="mt-5 grid grid-cols-2 gap-2">
             <div class="justify-self-end"><Button on:click={() => ToggleSong(GuildId, token, "pause", host)} disabled={json[0].isPaused}><PauseSolid /></Button></div>
             <div class="justify-self-start"><Button on:click={() => ToggleSong(GuildId, token, "resume", host) } disabled={!json[0].isPaused}><PlaySolid  /></Button></div>
         </div>
+        <!-- Title and various info -->
         <a class="mt-5" href={json[0].link}>{json[0].title}</a>
         <P>Requested by {json[0].user}</P>
+        <!-- Skip button -->
         <Button on:click={() => RemoveFromQueue(GuildId, token, false, host)}>Skip song</Button>
     </div>
 
+    <!-- Right side of the grid just renders the actual queue -->
     <div>
         <Heading tag="h4" class="mb-5" align="center">Queue</Heading>
         {#each json as song, index}
@@ -129,6 +145,8 @@
 
     </div>
 </div>
+
+<!-- If there are any errors the 'Error' component is rendered instead -->
 {:else if typeof(json) === "number"}
     <Error code={json} />
 {:else}