feat(web): user can now add a song to the queue or favorites by press…

…ing Enter key fix(web): DOM now has title.
TheTipo01 · Oct 27, 2023 · 0303cee · 0303cee
1 parent 9a56372
commit 0303cee
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/web/src/lib/utilities.js b/web/src/lib/utilities.js
@@ -1,3 +1,5 @@
+import { AddFavorite } from "./favorites";
+import { AddToQueue } from "./queue";
 
 // Function to add an object to the array 
 export function addObjectToArray(promise, objectToAdd) {
@@ -33,3 +35,16 @@ export function GetToken() {
 export function GetHost() {
     return window.location.protocol + "//" + window.location.host;
 }
+
+export function KeyPressed(e, scope, GuildId = "", token = "", host = "") {
+    switch(e.key) {
+        case 'Enter':
+            switch(scope) {
+                case 'queue':
+                    AddToQueue(GuildId, token, host);
+                case 'favorite':
+                    AddFavorite(token, host);
+            }
+            break;
+    }
+}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
@@ -19,6 +19,7 @@
         GuildId = GetGuildID();
         token = GetToken();
         host = GetHost();
+        document.title = "YADMB Web UI"
     });
     
 

diff --git a/web/src/routes/favorites.svelte b/web/src/routes/favorites.svelte
@@ -1,6 +1,7 @@
 <script>
     import { Button } from "flowbite-svelte";
     import { GetFavorites, AddFavorite, RemoveFavorite} from "../lib/favorites";
+    import {KeyPressed} from "../lib/utilities"
     import {Modal} from "flowbite-svelte";
     import {Input, Label} from "flowbite-svelte"
     import {Heading, P} from "flowbite-svelte"
@@ -37,7 +38,7 @@
         </div>
     </form>
     <svelte:fragment slot="footer">
-        <Button on:click={() => AddFavorite(token, host)}>Add</Button>
+        <Button on:click={() => AddFavorite(token, host)} on:keydown={(e) => (KeyPressed(e, "favorite", "", token, host))}>Add</Button>
     </svelte:fragment>
 </Modal>
 

diff --git a/web/src/routes/queue.svelte b/web/src/routes/queue.svelte
@@ -3,7 +3,7 @@
     import {A, Avatar, Button, Checkbox, Heading, Input, Label, Modal, P} from "flowbite-svelte";
     import {AddToQueue, GetQueue, RemoveFromQueue} from "../lib/queue";
     import {ToggleSong} from "../lib/song";
-    import {addObjectToArray, RemoveObjectFromArray, ClearArray} from "../lib/utilities"
+    import {addObjectToArray, RemoveObjectFromArray, ClearArray, KeyPressed} from "../lib/utilities"
     import PlaySolid from "flowbite-svelte-icons/PlaySolid.svelte";
     import PauseSolid from "flowbite-svelte-icons/PauseSolid.svelte";
     import Error from "./errors.svelte"
@@ -16,12 +16,7 @@
 
     // variables
     let queue = GetQueue(GuildId, token, host);
-    let isPaused = queue.then((json) => {
-        if (json.length !== 0) {
-            return json[0].isPaused;
-        }
-        return false;
-    });
+    let isPaused = false;
     let showModal = false;
     let isPlaylist = false;
 
@@ -60,19 +55,14 @@
                     queue = ClearArray(queue);
                     isPaused = false;
                     break;
-                case Notification.Pause:
-                    isPaused = true;
-                    break;
                 case Notification.Resume:
-                    isPaused = false;
+                case Notification.Pause:
+                    isPaused = !isPaused;
                     break;
             }
         }
-
-        return () => socket.close();
     });
 
-
 </script>
 
 <Button class="w-25 absolute right-9 bottom-5" on:click={() => (showModal = true)}>
@@ -95,7 +85,7 @@
         </div>
     </form>
     <svelte:fragment slot="footer">
-        <Button on:click={() => AddToQueue(GuildId, token, host)}>Add</Button>
+        <Button on:click={() => AddToQueue(GuildId, token, host)} on:keydown={(e) => (KeyPressed(e, "queue", GuildId, token, host))}>Add</Button>
     </svelte:fragment>
 </Modal>