feat: implemented gps location check

frontend/src/lib/components/QueueSlider.svelte

@@ -8,6 +8,10 @@
         queueSongs[playingIndex],
         playingIndex == queueSongs.length - 1 ? createEmptySong() : queueSongs[playingIndex + 1],
     ])
+
+    $effect(() => {
+        console.log(displaySongs)
+    })
 </script>
 
 <div class="relative flex w-full justify-center overflow-hidden">
@@ -28,11 +32,7 @@
                     {/if}
                 </div>
             {:else}
-                <div class="flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center">
+                <div class="flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center"></div>
-                    {#if i === 1}
-                        <p>No song in queue</p>
-                    {/if}
-                </div>
             {/if}
         {/each}
     </div>

frontend/src/lib/components/SuggestionInput.svelte

@@ -4,15 +4,25 @@
     let input = $state("")
 
     async function sendSong() {
-        let resp = await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
+        await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
         input = ""
     }
 </script>
 
-<div class="bg-lime-500 flex h-full w-full flex-row items-center gap-2 rounded border-2 border-lime-600">
+<div class="flex h-full w-full flex-row items-center gap-2 rounded border-2 border-lime-600 bg-lime-500">
-    <input type="text" placeholder="Song & Artist" class="font-bold outline-none text-white h-[50px] px-4 w-3/4 rounded" bind:value={input} />
+    <input
+        type="text"
+        placeholder="Song & Artist"
+        class="h-[50px] w-3/4 rounded px-4 font-bold text-white outline-none"
+        bind:value={input}
+        onkeydown={(e) => {
+            if (e.key == "Enter") {
+                sendSong()
+            }
+        }}
+    />
     <button
-        class="shadow-xl hover:scale-105 w-1/4 h-[40px] cursor-pointer bg-lime-600 border-lime-700 font-semibold text-white border-2 i-lucide-check rounded active:scale-90 duration-100"
+        class="i-lucide-check h-[40px] w-1/4 cursor-pointer rounded border-2 border-lime-700 bg-lime-600 font-semibold text-white shadow-xl duration-100 hover:scale-105 active:scale-90"
         onclick={sendSong}>Add</button
     >
     <span class="i-lucide-chevrons-left"></span>

frontend/src/lib/types.ts

@@ -10,19 +10,19 @@ const SongSchema = z.object({
 })
 export type Song = z.infer<typeof SongSchema>
 
-export const parseSong = async function(song: any): Promise<Song> {
+export const parseSong = async function (song: any): Promise<Song> {
     let resp = await SongSchema.parseAsync(song)
     return resp
 }
 
-export const createEmptySong = function(): Song {
+export const createEmptySong = function (): Song {
     return {
         uuid: "-1",
         title: "",
         artist: "",
         tags: [""],
         image_id: "",
-        youtube_id: 0,
+        youtube_id: "",
     }
 }
 
@@ -31,7 +31,7 @@ const SuggestionSchema = SongSchema.extend({
 })
 export type Suggestion = z.infer<typeof SuggestionSchema>
 
-export const parseSuggestion = async function(sugg: any): Promise<Suggestion> {
+export const parseSuggestion = async function (sugg: any): Promise<Suggestion> {
     let resp = await SuggestionSchema.parseAsync(sugg)
     return resp
 }
@@ -41,11 +41,11 @@ const RoomSchema = z.object({
     name: z.string(),
     private: z.boolean(),
     coords: z.tuple([z.number(), z.number()]),
-    range: z.number().int()
+    range: z.number().int(),
 })
 export type Room = z.infer<typeof RoomSchema>
 
-export const parseRoom = async function(room: any): Promise<Room> {
+export const parseRoom = async function (room: any): Promise<Room> {
     let resp = await RoomSchema.parseAsync(room)
     return resp
 }

frontend/src/lib/utils.ts

@@ -1,7 +1,7 @@
 import { parseSong, parseSuggestion, type FetchError, type Song, type Suggestion } from "./types"
 
-export const joinRoom = async function (roomId: string): Promise<[FetchError | null, string]> {
+export const joinRoom = async function (roomId: string, lat: number, lon: number): Promise<[FetchError | null, string]> {
-    let resp = await fetch("/api/join?room=" + roomId)
+    let resp = await fetch(`/api/join?room=${roomId}&lat=${lat}&lon=${lon}`)
 
     if (resp.status != 200) {
         return [{ code: 400, message: "Cannot join the room" }, ""]

frontend/src/routes/admin/[id]/+page.svelte

@@ -19,7 +19,7 @@
         let url = await getStreamingUrl(currentPlaying.uuid)
         if (audioController) {
             audioController.src = url
-            audioController.play()
+            await audioController.play()
         }
     }
 
@@ -29,11 +29,10 @@
 
         queueSongs = songs
         playingIndex = index
+    })
 
-        if (audioController) {
+    $effect(() => {
-            audioController.src = await getStreamingUrl(currentPlaying.uuid)
+        playOnEnd()
-            audioController.play()
-        }
     })
 
     async function playNext() {
@@ -53,6 +52,6 @@
     <div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
         <QueueSlider {queueSongs} {playingIndex} />
         <button onclick={playNext}>Next</button>
-        <audio controls autoplay bind:this={audioController} onended={playOnEnd}></audio>
+        <audio controls autoplay bind:this={audioController} onended={playNext}></audio>
     </div>
 {/if}

frontend/src/routes/room/[id]/+page.svelte

@@ -8,6 +8,8 @@
     import { getQueueSongs, getSuggestions, joinRoom } from "$lib/utils.js"
     import type { FetchError } from "$lib/types.js"
     import { io, Socket } from "socket.io-client"
+    import { get_coords } from "$lib/gps.js"
+    import type { Coordinates } from "$lib/gps.js"
 
     let { data } = $props()
 
@@ -23,8 +25,14 @@
     onMount(async () => {
         // Join the room
 
+        let { coords, error } = await get_coords()
+        if (error || coords == null) {
+            // Default to Lido
+            coords = { latitude: 46.6769043, longitude: 11.1851585 }
+        }
+
         let sugg, queue, index
-        ;[returnError] = await joinRoom(data.roomId)
+        ;[returnError] = await joinRoom(data.roomId, coords.latitude, coords.longitude)
         if (returnError) {
             return
         }
@@ -69,7 +77,7 @@
 {#if returnError}
     <Error {returnError} />
 {:else}
-    <div class="flex w-full flex-col items-center justify-center py-4 px-2 lg:p-10">
+    <div class="flex w-full flex-col items-center justify-center px-2 py-4 lg:p-10">
         <QueueSlider {queueSongs} {playingIndex} />
         <div class="w-full py-6 lg:w-[30vw]">
             <SuggestionInput roomId={data.roomId} />