feat(web): Queue now checks if the song is paused.

chore(web): hostname now corresponds to the actual host machine
TheTipo01 · Oct 26, 2023 · e5f8c50 · e5f8c50
1 parent 487929f
commit e5f8c50
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 29 deletions.
diff --git a/web/src/lib/favorites.js b/web/src/lib/favorites.js
@@ -1,12 +1,12 @@
 import { Response } from "./error";
 
-export async function AddFavorite(token) {
+export async function AddFavorite(token, host) {
     let name = document.getElementById("name").value;
     let link = document.getElementById("link").value;
     let folder = document.getElementById("folder")?.value;
 
     // Request
-    let route = `https://gerry.thetipo.rocks/favorites`
+    let route = `https://${host}/favorites`
     let response = await fetch(route, {
         method: 'POST',
         headers: {
@@ -32,9 +32,9 @@ export async function AddFavorite(token) {
     }
 }
 
-export async function RemoveFavorite(token, name) {
+export async function RemoveFavorite(token, name, host) {
     // Request
-    let route = `https://gerry.thetipo.rocks/favorites?` + new URLSearchParams({'name': name, 'token': token}).toString();
+    let route = `https://${host}/favorites?` + new URLSearchParams({'name': name, 'token': token}).toString();
     let response = await fetch(route, {
         method: 'DELETE',
         headers: {
@@ -58,9 +58,9 @@ export async function RemoveFavorite(token, name) {
     }
 }
 
-export async function GetFavorites(token) {
+export async function GetFavorites(token, host) {
     // Request
-    let route = `https://gerry.thetipo.rocks/favorites?` + new URLSearchParams({"token": token}).toString();
+    let route = `https://${host}/favorites?` + new URLSearchParams({"token": token}).toString();
     let response = await fetch(route, {
         method: "GET",
         headers: {

diff --git a/web/src/lib/queue.js b/web/src/lib/queue.js
@@ -1,8 +1,7 @@
 // This file contains every function used in the queue.svelte component
 import { Response } from "./error";
-import { GetToken } from "./utilities";
 
-export async function AddToQueue(GuildID, token) {
+export async function AddToQueue(GuildID, token, host) {
     // Values needed for adding a song to a queue
     let song = document.getElementById("song").value;
     let shuffle;
@@ -13,7 +12,7 @@ export async function AddToQueue(GuildID, token) {
         shuffle = document.getElementById("shuffle")?.checked;
     }
     // Request
-    let route = `https://gerry.thetipo.rocks/queue/${GuildID}`
+    let route = `https://${host}/queue/${GuildID}`
     let response = await fetch(route, {
         method: 'POST',
         headers: {
@@ -43,9 +42,9 @@ export async function AddToQueue(GuildID, token) {
     }
 }
 
-export async function RemoveFromQueue(GuildID, token, clear=false) { // AKA skip
+export async function RemoveFromQueue(GuildID, token, clear=false, host) { // AKA skip
     // Request
-    let route = `https://gerry.thetipo.rocks/queue/${GuildID}?` + new URLSearchParams({'clean': clear, 'token': token}).toString();
+    let route = `https://${host}/queue/${GuildID}?` + new URLSearchParams({'clean': clear, 'token': token}).toString();
     let response = await fetch(route, {
         method: "DELETE",
         headers: {
@@ -67,9 +66,9 @@ export async function RemoveFromQueue(GuildID, token, clear=false) { // AKA skip
     }
 }
 
-export async function GetQueue(GuildID, token) {
+export async function GetQueue(GuildID, token, host) {
     // Request
-    let route = `https://gerry.thetipo.rocks/queue/${GuildID}?` + new URLSearchParams({"token": token}).toString();
+    let route = `https://${host}/queue/${GuildID}?` + new URLSearchParams({"token": token}).toString();
     let response = await fetch(route, {
         method: "GET",
         headers: {

diff --git a/web/src/lib/song.js b/web/src/lib/song.js
@@ -1,12 +1,12 @@
 // This file contains a function used in the queue.svelte component
 
-export async function ToggleSong(GuildID, token, action = "") {  // AKA Pause/Resume Song
+export async function ToggleSong(GuildID, token, action = "", host) {  // AKA Pause/Resume Song
     // Request
     if(action === "") {
         return -8
     }
     else {
-        let route = `https://gerry.thetipo.rocks/song/${action}/${GuildID}?` + new URLSearchParams({"token": token}).toString();
+        let route = `https://${host}/${action}/${GuildID}?` + new URLSearchParams({"token": token}).toString();
         let response = await fetch(route, {
             method: "GET",
             headers: {

diff --git a/web/src/lib/utilities.js b/web/src/lib/utilities.js
@@ -1,4 +1,3 @@
-import { onMount } from "svelte";
 
 // Function to add an object to the array 
 export function addObjectToArray(promise, objectToAdd) {
@@ -30,3 +29,7 @@ export function GetToken() {
     let query = new URLSearchParams(window.location.search);
     return query.get('token');
 }
+
+export function GetHost() {
+    return window.location.host;
+}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
@@ -5,18 +5,20 @@
     import {Avatar} from "flowbite-svelte"
     import StarSolid from "flowbite-svelte-icons/StarSolid.svelte"
     import ListMusicSolid from "flowbite-svelte-icons/ListMusicSolid.svelte"
-    import {GetGuildID, GetToken} from "../lib/utilities"
+    import {GetGuildID, GetToken, GetHost} from "../lib/utilities"
 	import { onMount } from "svelte";
     import logo from "../assets/logo_yadmb.png"
 
     // variables
     let GuildId = '';
     let token = '';
+    let host = '';
     let activetab = "queue";
 
     onMount(() => {
         GuildId = GetGuildID();
         token = GetToken();
+        host = GetHost();
     });
     
 
@@ -33,8 +35,8 @@
             Queue
         </div>
         {#if activetab === "queue"}
-            {#if GuildId !== '' && token !== ''}
-                <Queue GuildId={GuildId} token={token} />
+            {#if GuildId !== '' && token !== '' && host !== ''}
+                <Queue GuildId={GuildId} token={token} host={host} />
             {/if}
         {/if}
     </TabItem>
@@ -44,7 +46,7 @@
             Favorites
         </div>
         {#if activetab === "favorites"}
-            {#if token !== ''}
+            {#if token !== '' && host !== ''}
                 <Favorites token={token} />
             {/if}
         {/if}

diff --git a/web/src/routes/favorites.svelte b/web/src/routes/favorites.svelte
@@ -8,9 +8,10 @@
 
     // props
     export let token;
+    export let host;
 
     //variables
-    let favorites = GetFavorites(token);
+    let favorites = GetFavorites(token, host);
     let showModal = false;
 </script>
 
@@ -36,7 +37,7 @@
         </div>
     </form>
     <svelte:fragment slot="footer">
-        <Button on:click={() => AddFavorite(token)}>Add</Button>
+        <Button on:click={() => AddFavorite(token, host)}>Add</Button>
     </svelte:fragment>
 </Modal>
 
@@ -55,7 +56,7 @@
                 <P>{song.link}</P>
                 <div class="grid grid-cols-2">
                     <P>{song.folder}</P>
-                    <Button on:click={() => RemoveFavorite(token, song.name)} class="w-1/3"><TrashBinSolid /></Button>
+                    <Button on:click={() => RemoveFavorite(token, song.name, host)} class="w-1/3"><TrashBinSolid /></Button>
                 </div>
 
             </div>

diff --git a/web/src/routes/queue.svelte b/web/src/routes/queue.svelte
@@ -12,9 +12,10 @@
     // props
     export let GuildId;
     export let token;
+    export let host;
 
     // variables
-    let queue = GetQueue(GuildId, token);
+    let queue = GetQueue(GuildId, token, host);
     let isPaused = false;
     let showModal = false;
     let isPlaylist = false;
@@ -79,7 +80,7 @@
         </div>
     </form>
     <svelte:fragment slot="footer">
-        <Button on:click={() => AddToQueue(GuildId, token)}>Add</Button>
+        <Button on:click={() => AddToQueue(GuildId, token, host)}>Add</Button>
     </svelte:fragment>
 </Modal>
 
@@ -92,12 +93,17 @@
     <div >
         <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")} disabled={isPaused}><PauseSolid /></Button></div>
-            <div class="justify-self-start"><Button on:click={() => ToggleSong(GuildId, token, "resume") } disabled={!isPaused}><PlaySolid  /></Button></div>
+            {#if json[0].isPaused}
+                <div class="justify-self-end"><Button on:click={() => ToggleSong(GuildId, token, "pause", host)} disabled={!isPaused}><PauseSolid /></Button></div>
+                <div class="justify-self-start"><Button on:click={() => ToggleSong(GuildId, token, "resume", host) } disabled={isPaused}><PlaySolid  /></Button></div>
+            {:else}
+                <div class="justify-self-end"><Button on:click={() => ToggleSong(GuildId, token, "pause", host)} disabled={isPaused}><PauseSolid /></Button></div>
+                <div class="justify-self-start"><Button on:click={() => ToggleSong(GuildId, token, "resume", host) } disabled={!isPaused}><PlaySolid  /></Button></div>
+            {/if}
         </div>
         <a class="mt-5" href={json[0].link}>{json[0].title}</a>
         <P>Requested by {json[0].user}</P>
-        <Button on:click={() => RemoveFromQueue(GuildId, token)}>Skip song</Button>
+        <Button on:click={() => RemoveFromQueue(GuildId, token, false, host)}>Skip song</Button>
     </div>
     <div>
         <Heading tag="h4" class="mb-5" align="center">Queue</Heading>
@@ -111,7 +117,7 @@
             {/if}
         {/each}
         <div class="grid grid-rows-1 justify-items-end mt-5">
-            <Button align="right" on:click={() => RemoveFromQueue(GuildId, token, true)}>Clear Queue</Button>
+            <Button align="right" on:click={() => RemoveFromQueue(GuildId, token, true, host)}>Clear Queue</Button>
         </div>
 
     </div>