README.md

@@ -1,40 +1,3 @@
-# ChillBox
+# team-1
 
-> *A project by Pausetta.org, Simone Tesini, Francesco De Carlo, Leonardo Segala, Matteo Peretto*
+Test
-
-**ChillBox** is a web app that lets you create a shared radio station with a democratic voting system, so everyone gets to enjoy their favorite music together.
-Perfect for venues like swimming pools, cafés, or even lively parties.
-
----
-
-## 🎵 Voting System
-
-Joining a ChillBox room is easy: users can either scan the QR code displayed on the host screen or use GPS to find nearby rooms.
-Hosts can set a location range, ensuring only people physically present can add or vote for songs.
-
----
-
-## 📊 Ranking Algorithm
-
-ChillBox uses a smart ranking algorithm to decide what plays next. The score of each song is based on:
-
-* Votes from users
-* How recently similar songs (same genre or artist) have been played (less = better)
-* A bit of randomness to keep things interesting
-* A strong penalty for songs played too recently
-
----
-
-## 👐 Hands-Off Experience
-
-ChillBox is designed to be almost entirely hands-free.
-Once the host sets up a room and optionally connects a screen or projector 
-(to show the current track, QR code, etc.), ChillBox takes care of the rest.
-
-ChillBox comes with built-in automatic moderation to keep the music fair and on-theme.
-
-* Users can’t vote for the same song multiple times.
-* A cooldown prevents users from spamming song requests.
-* Hosts can define preferred genres and overall mood, so no one can hijack your chill beach vibes with unexpected death metal.
-
-That said, hosts still have access to essential controls, like pause and skip, if needed.

SPEECH.md

@@ -1,15 +0,0 @@
-# speech
-
-## Home screen
-We start here in the home page. 
-We can see this little radar animation, which means that the app is looking for nearby ChillBox rooms to join.
-It uses GPS for this feature.
-
-## Join room
-When we join a room, the server checks our location and checks if it's within a specified range.
-That way, you must physically be in the location to actually be able to add new songs
-
-## Talk about the host
-As you can see here (and hear) on the left, the host is already playing some music.
-Now i will add a song on the client side and it will pop up in the list.
-

backend/Dockerfile

@@ -12,6 +12,5 @@ RUN pip install --no-cache-dir -r requirements.txt
 COPY . .
 
 EXPOSE 5000
-# CMD ["flask", "--app", "src.app", "run", "--debug", "--host=0.0.0.0"]
+CMD ["flask", "--app", "src.app", "run", "--debug", "--host=0.0.0.0"]
-CMD ["python3", "src/app.py"]
 # flask --app src.app run --host=0.0.0.0 --port=5001 --debug

backend/requirements.txt

@@ -5,4 +5,3 @@ dotenv
 requests
 qrcode
 Pillow
-eventlet>=0.33

backend/src/app.py

@@ -1,17 +1,17 @@
 import uuid
 from dataclasses import asdict
-
 import dotenv
-from connect import get_connection
 from flask import Flask, Response, jsonify, request
 from flask_cors import CORS
 from flask_socketio import SocketIO, join_room, leave_room
-from gps import Coordinates, distance_between_coords
+
-from qrcode_gen import generate_qr
+from .state import State
-from room import Room
+from .connect import get_connection
-from song import Song, add_song_in_db, get_song_by_title_artist, get_song_by_uuid, init_db
+from .room import Room
-from song_fetch import query_search, yt_get_audio_url, yt_search_song
+from .song import Song, init_db, get_song_by_title_artist, add_song_in_db, get_song_by_uuid
-from state import State
+from .song_fetch import query_search, yt_get_audio_url, yt_search_song
+from .qrcode_gen import generate_qr
+
 
 dotenv.load_dotenv()
 
@@ -28,11 +28,11 @@ init_db(state.db)
 
 state.rooms[1000] = Room(
     id=1000,
-    coord=Coordinates(46.6769043, 11.1851585),
+    coord=(1.0, 5.5),
-    name="Lido Scena",
+    name="Test Room",
-    pin=1234,
+    pin=None,
-    tags=set(["chill", "raggaetton", "spanish", "latino", "mexican", "rock"]),
+    tags=set(),
-    range_size=150,
+    range_size=100,
     songs={},
     history=[],
     playing=[],
@@ -73,7 +73,7 @@ def on_leave(data):
 @app.get("/api/join")
 def join():
     room_id = request.args.get("room")
-    code = request.args.get("pin")
+    code = request.args.get("code")
 
     if room_id is None:
         return error("Missing room id")
@@ -81,23 +81,9 @@ def join():
     if (room := state.rooms.get(int(room_id))) is None:
         return error("Invalid room")
 
-    if room.pin is not None:
+    if room.pin is not None and room.pin != code:
-        if code is None:
-            return error("Missing code")
-        if int(room.pin) != int(code):
         return error("Invalid code")
 
-    distance = distance_between_coords(
-        lhs=room.coord,
-        rhs=Coordinates(
-            latitude=float(request.args["lat"]),
-            longitude=float(request.args["lon"]),
-        ),
-    )
-
-    if distance > room.range_size:
-        return error("You are not within the room range")
-
     return {"success": True, "ws": f"/ws/{room_id}"}
 
 
@@ -154,8 +140,8 @@ def room_new():
     lat, lon = room_cords.split(",")
 
     room = Room(
-        id=max(state.rooms or [0]) + 1,
+        id=max(state.rooms or [0]) + 1,  #
-        coord=Coordinates(float(lat), float(lon)),
+        coord=(float(lat), float(lon)),
         range_size=int(room_range),
         name=room_name,
         pin=room_pin,
@@ -173,14 +159,6 @@ def room_new():
 
 @app.get("/api/room")
 def room():
-    lat = request.args.get("lat")
-    lon = request.args.get("lon")
-
-    if lat and lon:
-        user_coords = Coordinates(latitude=float(lat), longitude=float(lon))
-    else:
-        return error("Missing user coordinates")
-
     return [
         {
             "id": room.id,
@@ -188,10 +166,8 @@ def room():
             "private": room.pin is not None,
             "coords": room.coord,
             "range": room.range_size,
-            "distance": d,
         }
         for room in state.rooms.values()
-        if (d := distance_between_coords(user_coords, room.coord)) <= room.range_size
     ]
 
 
@@ -213,9 +189,6 @@ def add_song():
         ## song not found, downolad from YT
         yt_video_id = yt_search_song(info.title, info.artist)
 
-        if yt_video_id is None:
-            return error("No video found on youtube")
-
         ## add in DB
         song = Song(
             uuid=str(uuid.uuid4()),
@@ -228,15 +201,6 @@ def add_song():
 
         add_song_in_db(song)
 
-    if len(room.tags) > 0:
-        tag_ok = False
-        for tag in song.tags:
-            if tag in room.tags:
-                tag_ok = True
-
-        if not tag_ok:
-            return error("Song genre does not belong to this room")
-
     ## add the song in the room if does not exists
     if song.uuid not in room.songs:
         room.songs[song.uuid] = (song, 1)  # start with one vote
@@ -309,4 +273,4 @@ def get_audio_url():
 
 
 if __name__ == "__main__":
-    socketio.run(app, host="0.0.0.0", port=5000, debug=True)
+    socketio.run(app, debug=True)

backend/src/gps.py

@@ -1,11 +1,9 @@
 import math
-from dataclasses import dataclass
 
 
-@dataclass
 class Coordinates:
-    latitude: float
+    latitude: int
-    longitude: float
+    longitude: int
 
 
 def distance_between_coords(lhs: Coordinates, rhs: Coordinates) -> float:

backend/src/room.py

@@ -1,8 +1,7 @@
 import random
 from dataclasses import dataclass
 
-from gps import Coordinates
+from .song import Song
-from song import Song
 
 USER_SCORE_WEIGHT = 0.7
 ARTIST_WEIGHT = 0.1
@@ -31,7 +30,7 @@ class Rank:
 @dataclass
 class Room:
     id: int
-    coord: Coordinates
+    coord: tuple[float, float]
     name: str
     pin: int | None
     tags: set[str]

backend/src/song.py

@@ -1,7 +1,7 @@
 from dataclasses import dataclass
 from sqlite3 import Cursor
 
-from connect import get_connection
+from .connect import get_connection
 
 
 def init_db(db: Cursor):

backend/src/song_fetch.py

@@ -1,10 +1,9 @@
-import os
-import os.path
-import sys
-import urllib.parse
-from dataclasses import dataclass
-
 import requests
+import urllib.parse
+import os.path
+import os
+import sys
+from dataclasses import dataclass
 
 sys.path.append("/yt-dlp")
 import yt_dlp
@@ -18,7 +17,7 @@ class SongInfo:
     tags: list[str]
 
 
-def _lastfm_search(query: str) -> tuple[str, str] | None:
+def _lastfm_search(query: str) -> tuple[str, str]:
     response = requests.get(
         url="https://ws.audioscrobbler.com/2.0/?method=track.search&format=json",
         params={"limit": 5, "track": query, "api_key": os.environ["LASTFM_API_KEY"]},
@@ -26,10 +25,7 @@ def _lastfm_search(query: str) -> tuple[str, str] | None:
 
     assert response.status_code == 200
 
-    tracks = response.json()["results"]["trackmatches"]["track"]
+    track_info = response.json()["results"]["trackmatches"]["track"][0]
-    if len(tracks) == 0:
-        return None
-    track_info = tracks[0]
 
     return track_info["name"], track_info["artist"]
 
@@ -46,16 +42,11 @@ def _lastfm_getinfo(name: str, artist: str) -> tuple[str, list[str]]:  # ( image
 
     track_info = response.json()["track"]
 
-    image_id = ""
-    if "album" in track_info:
     image_url = urllib.parse.urlparse(track_info["album"]["image"][0]["#text"])
-        image_id = os.path.splitext(os.path.basename(image_url.path))[0]
-    else:
-        print("this song haas no image", flush=True)
 
     return (
         # track_info["mbid"],
-        image_id,
+        os.path.splitext(os.path.basename(image_url.path))[0],
         [t["name"] for t in track_info["toptags"]["tag"]],
     )
 
@@ -77,17 +68,14 @@ def _yt_search(query: str) -> tuple[str, str]:
 
 
 def query_search(query: str) -> SongInfo | None:
-    res = _lastfm_search(query)
+    name, artist = _lastfm_search(query)
-    if res is None:
-        return None
 
-    name, artist = res
     img_id, tags = _lastfm_getinfo(name, artist)
 
     return SongInfo(artist=artist, title=name, img_id=img_id, tags=tags)
 
 
-def yt_search_song(name: str, artist: str) -> str | None:  # video id
+def yt_search_song(name: str, artist: str) -> str:  # video id
     ydl_opts = {
         "format": "bestaudio",
         "default_search": "ytsearch1",
@@ -98,9 +86,6 @@ def yt_search_song(name: str, artist: str) -> str | None:  # video id
     with yt_dlp.YoutubeDL(ydl_opts) as ydl:
         info = ydl.extract_info(f"{name!r} - {artist!r}", download=False)
 
-    if len(info["entries"]) == 0:
-        return None
-
     return info["entries"][0]["id"]
 
 

backend/src/state.py

@@ -4,7 +4,7 @@ from sqlite3 import Cursor
 from flask import Flask
 from flask_socketio import SocketIO
 
-from room import Room
+from .room import Room
 
 
 @dataclass

frontend/src/app.html

@@ -1,13 +1,15 @@
 <!doctype html>
 <html lang="en">
-    <head>
+
+<head>
     <meta charset="utf-8" />
-        <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
-        <link rel="manifest" href="manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
-    </head>
+</head>
-    <body data-sveltekit-preload-data="hover" class="h-max">
+
+<body data-sveltekit-preload-data="hover" class="h-max">
     <div style="display: contents">%sveltekit.body%</div>
-    </body>
+</body>
+
 </html>

frontend/src/lib/components/QueueSlider.svelte

@@ -8,10 +8,6 @@
         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">
@@ -23,22 +19,20 @@
                         class={`flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center ${i === 1 ? "spin-slower rounded-full border-2 border-black" : "rounded"} object-cover`}
                     >
                         {#if i === 1}
-                            <div class="absolute z-20 h-16 w-16 rounded-full border-2 border-black bg-light-pine-base dark:bg-dark-pine-base"></div>
+                            <div class="absolute z-20 h-16 w-16 rounded-full border-2 border-black bg-white"></div>
                         {/if}
-                        <img
+                        <img class={`h-full overflow-hidden ${i === 1 ? "rounded-full" : "rounded"}`} src={`https://lastfm.freetls.fastly.net/i/u/174s/${song.image_id}.png`} alt="Song cover" />
-                            class={`h-full overflow-hidden ${i === 1 ? "rounded-full" : "rounded"}`}
-                            src={song.image_id != ""
-                                ? `https://lastfm.freetls.fastly.net/i/u/174s/${song.image_id}.png`
-                                : "https://s2.qwant.com/thumbr/474x474/f/6/b50687db1ebb262ac78b98a8f3c56a1e62235aaeebe0346dd27d4fbf1edec8/OIP.kXN41HyriW5dLTkjm0QQoAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.kXN41HyriW5dLTkjm0QQoAHaHa%3Fpid%3DApi&q=0&b=1&p=0&a=0"}
-                            alt="Song cover"
-                        />
                     </div>
                     {#if i === 1}
-                        <h1 class="mt-5">{song.title} - {song.artist}</h1>
+                        <h1 class="mt-2">{song.title} - {song.artist}</h1>
                     {/if}
                 </div>
             {:else}
-                <div class="flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center"></div>
+                <div class="flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center">
+                    {#if i === 1}
+                        <p>No song in queue</p>
+                    {/if}
+                </div>
             {/if}
         {/each}
     </div>

frontend/src/lib/components/RoomComponent.svelte

@@ -1,45 +1,18 @@
 <script lang="ts">
     import { type Room } from "$lib/types"
     let { room }: { room: Room } = $props()
-    let showPinModal: boolean = $state(false)
-    let pin: number = $state()
 </script>
 
-<div
+<button
-    class="flex gap-2 w-82 cursor-pointer flex-col rounded-md border border-dark-pine-muted bg-light-pine-overlay p-3 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
+    class="flex w-82 cursor-pointer flex-row items-center rounded-md border border-dark-pine-muted bg-light-pine-overlay p-3 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
 >
-    <button
-        class="flex flex-row items-center"
-        onclick={() => {
-            if (!room.private) {
-                window.location.href = "/room/" + room.id
-                return
-            }
-            showPinModal = !showPinModal
-        }}
-    >
     <div class="flex flex-row">
         {room.name}
         {room.private ? "🔒" : ""}
     </div>
     <div class="grow"></div>
     <div class="flex flex-row items-center gap-2">
-            <div class="font-mono">{Math.round(room.distance)}m</div>
+        <div class="font-mono">64m</div>
         <div class="rounded bg-light-pine-blue px-2 py-0.5 text-dark-pine-text dark:bg-dark-pine-blue">Join</div>
     </div>
-    </button>
+</button>
-    {#if showPinModal}
-        <input
-            placeholder="PIN (requied)"
-            class="p-2 text-xl rounded-md border-dark-pine-muted bg-light-pine-overlay dark:bg-dark-pine-base hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2"
-            type="number"
-            bind:value={pin}
-        />
-        <button
-            onclick={() => {
-                window.location.href = `/room/${room.id}?pin=${pin}`
-            }}
-            class="p-2 text-xl rounded-md border-dark-pine-muted bg-light-pine-overlay dark:bg-dark-pine-base hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2">JOIN</button
-        >
-    {/if}
-</div>

frontend/src/lib/components/SuggestionInput.svelte

@@ -1,69 +1,19 @@
 <script lang="ts">
-    import { LoaderCircle } from "@lucide/svelte"
-
-    const COOLDOWN_SECS = 10
-
     let { roomId } = $props()
-    let input = $state("")
-    let loading: boolean = $state(false)
-    let cooldowned: boolean = $state(false)
-    let errorMsg: string = $state()
 
-    $effect(() => {
+    let input = $state("")
-        console.log("cooldowned is now", cooldowned)
-    })
 
     async function sendSong() {
-        loading = true
+        let resp = await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
-        const res = await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
-        const json = await res.json()
         input = ""
-        loading = false
-
-        if (!json.success) {
-            errorMsg = json.error
-        }
-
-        cooldowned = true
-        setTimeout(() => {
-            cooldowned = false
-            console.log("unset cooldown")
-        }, COOLDOWN_SECS * 1000)
     }
 </script>
 
-<div
+<div class="bg-lime-500 flex h-full w-full flex-row items-center gap-2 rounded border-2 border-lime-600">
-    class={`flex h-full w-full flex-row items-center gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 ${loading ? "disabled" : ""}`}
+    <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) => {
-            errorMsg = null
-            if (e.key == "Enter") {
-                sendSong()
-            }
-        }}
-        disabled={loading}
-    />
-    {#if loading}
-        <span class="animate-spin">
-            <LoaderCircle />
-        </span>
-    {/if}
-
     <button
-        disabled={cooldowned}
+        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 rounded font-semibold shadow-xl duration-100 active:scale-90 {!cooldowned
-            ? 'cursor-pointer bg-light-pine-blue hover:scale-105 dark:bg-dark-pine-blue '
-            : 'bg-light-pine-muted dark:bg-light-pine-muted'}"
         onclick={sendSong}>Add</button
     >
     <span class="i-lucide-chevrons-left"></span>
 </div>
-
-<p class="text-red-500 font-semibold">
-    {errorMsg}
-</p>

frontend/src/lib/components/SuggestionList.svelte

@@ -1,62 +1,41 @@
 <script lang="ts">
     import type { Suggestion } from "$lib/types"
-    import { ThumbsUp, ThumbsDown } from "@lucide/svelte"
-    import { onMount } from "svelte"
 
     let { suggestions = $bindable(), roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
 
-    let picked_suggestions: string[] = $state([])
+    async function vote(idx: number, amount: number, songId: string) {
-
+        suggestions[idx].upvote += amount
-    async function vote(amount: number, songId: string) {
-        if (picked_suggestions.includes(songId)) return console.log("rejecting vote")
         await fetch(`/api/song/voting?room=${roomId}&song=${songId}&increment=${amount}`, { method: "POST" })
-        picked_suggestions.push(songId)
-        console.log("accepted vote")
-        sessionStorage.setItem("picked_suggestions", JSON.stringify(picked_suggestions))
     }
-
-    onMount(() => {
-        picked_suggestions = JSON.parse(sessionStorage.getItem("picked_suggestions") ?? "[]")
-    })
 </script>
 
 <div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
     {#if suggestions.length == 0}
-        <p>No suggestions yet! Try to add a new one using the Add button</p>
+        <p>No suggestions yet! Try to add a new one using the <b>Add</b> button</p>
     {/if}
 
-    {#each suggestions as sug}
+    {#each suggestions as sug, idx}
-        <div
+        <div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-indigo-600 bg-indigo-500 p-2 shadow-md duration-100 hover:bg-indigo-400">
-            class="flex h-[80px] w-full flex-row gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay p-2 shadow-md duration-100 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
+            <div class="flex w-3/4 flex-row gap-2">
-        >
+                <img class="w-[60px] min-w-[60px] rounded" src={`https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`} alt="Song cover" />
-            <div class="flex w-3/4 flex-row items-center gap-2">
+                <div class="text-white">
-                <img
+                    <p>{sug.title}</p>
-                    class="w-[60px] min-w-[60px] rounded"
-                    alt="Song cover"
-                    src={sug.image_id != ""
-                        ? `https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`
-                        : "https://s2.qwant.com/thumbr/474x474/f/6/b50687db1ebb262ac78b98a8f3c56a1e62235aaeebe0346dd27d4fbf1edec8/OIP.kXN41HyriW5dLTkjm0QQoAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.kXN41HyriW5dLTkjm0QQoAHaHa%3Fpid%3DApi&q=0&b=1&p=0&a=0"}
-                />
-                <div class="h-fit w-fit flex-col text-white">
-                    <b>{sug.title}</b>
                     <p>{sug.artist}</p>
                 </div>
             </div>
             <div class="flex w-1/4 flex-row items-center justify-center gap-2">
                 <button
-                    class={!picked_suggestions.includes(sug.uuid) ? "text-light-pine-green duration-100 hover:scale-150 dark:text-dark-pine-green" : "text-light-pine-muted dark:text-dark-pine-muted"}
+                    class="grayscale"
-                    disabled={!!picked_suggestions.includes(sug.uuid)}
+                    onclick={() => {
-                    onclick={async () => {
+                        vote(idx, 1, sug.uuid)
-                        await vote(1, sug.uuid)
+                    }}>👍</button
-                    }}><ThumbsUp /></button
                 >
-                <p class="font-semibold text-light-pine-text dark:text-dark-pine-text">{sug.upvote}</p>
+                <p class="font-semibold text-white">{sug.upvote}</p>
                 <button
-                    class={!picked_suggestions.includes(sug.uuid) ? "text-light-pine-red duration-100 hover:scale-150 dark:text-dark-pine-red" : "text-light-pine-muted dark:text-dark-pine-muted"}
+                    class="duration-100 hover:scale-150"
-                    disabled={!!picked_suggestions.includes(sug.uuid)}
+                    onclick={() => {
-                    onclick={async () => {
+                        vote(idx, -1, sug.uuid)
-                        await vote(-1, sug.uuid)
+                    }}><div class="rotate-180">👍</div></button
-                    }}><ThumbsDown /></button
                 >
             </div>
         </div>

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: "",
+        youtube_id: 0,
     }
 }
 
@@ -31,22 +31,21 @@ 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
 }
 
 const RoomSchema = z.object({
-    id: z.number(),
+    id: z.string(),
     name: z.string(),
     private: z.boolean(),
-    coords: z.object({ latitude: z.number(), longitude: z.number() }),
+    coords: z.tuple([z.number(), z.number()]),
-    range: z.number().int(),
+    range: z.number().int()
-    distance: z.number()
 })
 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,10 +1,9 @@
-import { type Coordinates } from "./gps"
 import { parseSong, parseSuggestion, type FetchError, type Song, type Suggestion } from "./types"
 
-export const joinRoom = async function (roomId: string, coords: Coordinates, pin: string): Promise<[FetchError | null, string]> {
+export const joinRoom = async function (roomId: string): Promise<[FetchError | null, string]> {
-    let res = await fetch(`/api/join?room=${roomId}&lat=${coords.latitude}&lon=${coords.longitude}&pin=${pin}`)
+    let resp = await fetch("/api/join?room=" + roomId)
 
-    if (res.status != 200) {
+    if (resp.status != 200) {
         return [{ code: 400, message: "Cannot join the room" }, ""]
     }
 

frontend/src/routes/+layout.svelte

@@ -4,6 +4,6 @@
     let { children } = $props()
 </script>
 
-<div class="min-h-screen w-full bg-light-pine-base px-1 text-light-pine-text sm:px-20 md:px-40 lg:px-80 dark:bg-dark-pine-base dark:text-dark-pine-text">
+<div class="min-h-screen w-full bg-light-pine-base px-0 text-light-pine-text sm:px-20 md:px-40 lg:px-80 dark:bg-dark-pine-base dark:text-dark-pine-text">
     {@render children()}
 </div>

frontend/src/routes/+page.svelte

@@ -1,20 +1,9 @@
 <script lang="ts">
     import RoomComponent from "$lib/components/RoomComponent.svelte"
-    import { get_coords } from "$lib/gps"
     import { parseRoom, type Room } from "$lib/types"
     import { Plus } from "@lucide/svelte"
-    import { onMount } from "svelte"
 
-    let rooms: Room[] = $state([])
+    let room: Room = { id: "asd", coords: [0.123, 0.456], name: "scatolame party", private: true, range: 124 }
-
-    onMount(async () => {
-        let { coords, error } = await get_coords()
-        if (error != null || coords == null) coords = { latitude: 46.6769043, longitude: 11.1851585 }
-
-        let res = await fetch(`/api/room?lat=${coords.latitude}&lon=${coords.longitude}`)
-        let json = await res.json()
-        for (let room of json) rooms.push(await parseRoom(room))
-    })
 </script>
 
 <div class="flex flex-col items-center gap-2">
@@ -23,22 +12,46 @@
         <span class="lilita-one-regular text-6xl font-bold">ChillBox</span>
     </div>
 
-    <img src="/radar_bonus.gif" alt="radar" class="h-64 w-64" />
+    <img src="/smerdo_radar_bonus.gif" alt="radar" class="h-64 w-64" />
     <span class="animate-pulse text-sm italic">Scanning for rooms near you...</span>
 
-    <button
+    <button class="fixed right-4 bottom-4 flex flex-row gap-1 rounded-xl bg-light-pine-blue p-2 text-dark-pine-text sm:right-20 md:right-40 lg:right-80 dark:bg-dark-pine-blue">
-        onclick={() => {
-            window.location.href = "/room/create"
-        }}
-        class="fixed right-4 bottom-4 flex flex-row gap-1 rounded-xl bg-light-pine-blue p-2 text-dark-pine-text sm:right-20 md:right-40 lg:right-80 dark:bg-dark-pine-blue"
-    >
         <span> New Room </span>
         <Plus />
     </button>
 
     <div class="flex flex-col gap-2">
-        {#each rooms as room}
+        <RoomComponent {room}></RoomComponent>
-            <RoomComponent {room} />
+        <RoomComponent {room}></RoomComponent>
-        {/each}
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
     </div>
 </div>
+<!-- <div class="h-full w-full flex-row justify-center p-4"> -->
+<!--     <div class="relative min-h-screen justify-center justify-items-center"> -->
+<!--         <h1>Scan your nearby rooms</h1> -->
+<!--         <img src="/smerdoradar.gif" alt="radar" class="h-64 w-64" /> -->
+<!--         <div class="max-h-50 w-full overflow-y-auto"> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--         </div> -->
+<!--         <div class="fixed right-0 bottom-0"> -->
+<!--             <button class="mt-4 justify-end rounded bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600 active:bg-blue-700"> + </button> -->
+<!--         </div> -->
+<!--     </div> -->
+<!-- </div> -->

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

@@ -15,37 +15,14 @@
     let currentPlaying = $derived<Song>(queueSongs[playingIndex])
     let audioController = $state<HTMLAudioElement>()
 
-    let playerInfo = $state({
-        playing: false,
-        currentTime: 0,
-        duration: 0,
-    })
-
     async function playOnEnd() {
         let url = await getStreamingUrl(currentPlaying.uuid)
         if (audioController) {
             audioController.src = url
-            await audioController.play()
+            audioController.play()
         }
     }
 
-    $effect(() => {
-        if (audioController) {
-            audioController.ontimeupdate = () => {
-                playerInfo.currentTime = audioController?.currentTime || 0
-            }
-            audioController.onloadedmetadata = () => {
-                playerInfo.duration = audioController?.duration || 0
-            }
-            audioController.onplay = () => {
-                playerInfo.playing = true
-            }
-            audioController.onpause = () => {
-                playerInfo.playing = false
-            }
-        }
-    })
-
     onMount(async () => {
         let songs, index
         ;[returnError, songs, index] = await getQueueSongs(data.roomId)
@@ -53,21 +30,12 @@
         queueSongs = songs
         playingIndex = index
 
-        if (queueSongs.length == 0) {
+        if (audioController) {
-            playNext()
+            audioController.src = await getStreamingUrl(currentPlaying.uuid)
+            audioController.play()
         }
     })
 
-    $effect(() => {
-        playOnEnd()
-    })
-
-    const formatTime = (t: number) => {
-        const min = Math.floor(t / 60)
-        const sec = Math.floor(t % 60)
-        return `${min}:${sec.toString().padStart(2, "0")}`
-    }
-
     async function playNext() {
         let songs, index
         ;[returnError, songs, index] = await triggerPlayNext(data.roomId)
@@ -76,20 +44,6 @@
 
         queueSongs = songs
         playingIndex = index
-
-        if (audioController) {
-            audioController.pause()
-            audioController.currentTime = 0
-        }
-    }
-
-    function seek(e: Event) {
-        const target = e.target as HTMLInputElement
-        const seekTime = parseFloat(target.value)
-        playerInfo.currentTime = seekTime
-        if (audioController) {
-            audioController.currentTime = seekTime
-        }
     }
 </script>
 
@@ -98,21 +52,7 @@
 {:else}
     <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 autoplay bind:this={audioController} hidden onended={playNext}></audio>
+        <audio controls autoplay bind:this={audioController} onended={playOnEnd}></audio>
-
-        <div class="flex w-full flex-col items-start justify-start gap-4 p-2 lg:w-[30vw]">
-            <p>{formatTime(playerInfo.currentTime)} - {formatTime(playerInfo.duration)}</p>
-            <input type="range" min="0" max={playerInfo.duration} step="0.1" value={playerInfo.currentTime} class="w-full accent-blue-500" oninput={seek} />
-            <div class="flex w-full flex-row items-center justify-center gap-6">
-                <button
-                    class="rounded-md border border-dark-pine-muted p-2 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue"
-                    onclick={() => (playerInfo.playing ? audioController?.pause() : audioController?.play())}>{playerInfo.playing ? "Pause" : "Unpause"}</button
-                >
-                <button class="rounded-md border border-dark-pine-muted p-2 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue" onclick={playNext}>Next</button>
-            </div>
-        </div>
-        <img class="absolute right-1 bottom-1" src="/api/room/qrcode?room=1000&pin=1234" />
-        <!-- @PERETTO fix here pls -->
     </div>
 {/if}

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

@@ -8,7 +8,6 @@
     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"
 
     let { data } = $props()
 
@@ -24,14 +23,8 @@
     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, coords, data.pin)
+        ;[returnError] = await joinRoom(data.roomId)
         if (returnError) {
             return
         }
@@ -76,7 +69,7 @@
 {#if returnError}
     <Error {returnError} />
 {:else}
-    <div class="flex w-full flex-col items-center justify-center px-2 py-4 lg:p-10">
+    <div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
         <QueueSlider {queueSongs} {playingIndex} />
         <div class="w-full py-6 lg:w-[30vw]">
             <SuggestionInput roomId={data.roomId} />

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

@@ -1,8 +1,13 @@
+import { error, type Load, type ServerLoad } from "@sveltejs/kit"
 import type { PageLoad } from "./$types"
+import type { FetchError } from "$lib/util"
+import { parseSuggestion, type Suggestion } from "$lib/types"
 
-export const load: PageLoad = ({ params, url }) => {
+export const load: PageLoad = async ({ params }) => {
+    if (params.id) {
         return {
-        roomId: params.id || "",
+            roomId: params.id,
-        pin: url.searchParams.get("pin") || "",
         }
+    }
+    error(400, "Please provide a room id")
 }

frontend/src/routes/room/create/+page.svelte

@@ -1,83 +0,0 @@
-<script lang="ts">
-    import { get_coords } from "$lib/gps"
-    import { X, Check, Plus } from "@lucide/svelte"
-    import { onMount } from "svelte"
-
-    let privateRoom: boolean = $state(true)
-    let coord = $state({ latitude: 0, longitude: 0 })
-    let creating: boolean = $state(false)
-
-    let name: string = $state()
-    let range: number = $state()
-    let pin: number = $state()
-
-    async function createRoom() {
-        if (creating) {
-            return
-        }
-
-        if (!name) {
-            return
-        }
-
-        creating = true
-
-        const res = await fetch(
-            `/api/room/new?name=${encodeURIComponent(name)}&coords=${coord.latitude},${coord.longitude}&range=${encodeURIComponent(range ?? "100")}&pin=${encodeURIComponent(pin ?? "")}`,
-            { method: "POST" }
-        )
-
-        const json = await res.json()
-
-        window.location.href = `/admin/${json.room_id}`
-    }
-
-    onMount(async () => {
-        const res = await get_coords()
-        coord = res.coords ?? { latitude: 46.6769043, longitude: 11.1851585 }
-    })
-</script>
-
-<form class="flex flex-col items-center">
-    <h1 class="text-4xl my-10">Create Room</h1>
-
-    <div class="flex flex-col gap-3 w-1/2">
-        <input
-            bind:value={name}
-            placeholder="Room name (Required)"
-            class="{name
-                ? ''
-                : 'border-2 border-red-500'} p-2 text-xl rounded-md bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2"
-        />
-
-        <input
-            bind:value={range}
-            type="number"
-            min="10"
-            placeholder="Range (in meters)"
-            class="p-2 text-xl rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2"
-        />
-
-        <p>
-            Room Coordinates:
-            <span>{coord.latitude},{coord.longitude}</span>
-        </p>
-
-        <input
-            bind:value={pin}
-            type="number"
-            max="9999"
-            placeholder="PIN  (none if public)"
-            class="p-2 text-xl rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2"
-        />
-
-        <button
-            type="button"
-            class="cursor-pointer flex flex-row items-center justify-center gap-3 border border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 duration-100 rounded-lg h-10 font-bold"
-            onclick={createRoom}
-        >
-            CREA
-            <Plus />
-        </button>
-    </div>
-</form>

frontend/static/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

frontend/static/manifest.json

@@ -8,12 +8,12 @@
 	"orientation": "portrait-primary",
 	"icons": [
 		{
-            "src": "/android-chrome-512x512.png",
+			"src": "/icon-512.png",
 			"sizes": "512x512",
 			"type": "image/png"
 		},
 		{
-            "src": "/android-chrome-192x192.png",
+			"src": "/icon-192.png",
 			"sizes": "192x192",
 			"type": "image/png"
 		}