2025-summer/team-1
12
Fork 0
Code Issues Pull requests Projects Releases Activity

Merge remote-tracking branch 'refs/remotes/origin/main'

Browse source
This commit is contained in:
Leonardo Segala 2025-08-02 09:24:58 +02:00
commit d50979077a
6 changed files with 42 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/lib/components/QueueSlider.svelte
View file

@ -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">
{#if i === 1}
<p>No song in queue</p>
{/if}
</div>
<div class="flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center"></div>
{/if}
{/each}
</div>

18
frontend/src/lib/components/SuggestionInput.svelte
View file

@ -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">
<input type="text" placeholder="Song & Artist" class="font-bold outline-none text-white h-[50px] px-4 w-3/4 rounded" bind:value={input} />
<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="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>

12
frontend/src/lib/types.ts
View file

@ -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
}

4
frontend/src/lib/utils.ts
View file

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

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

@ -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) {
audioController.src = await getStreamingUrl(currentPlaying.uuid)
audioController.play()
}
$effect(() => {
playOnEnd()
})
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}

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

@ -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} />