feat: added error page + join endpoint
This commit is contained in:
Mat12143
parent
d9e7b8f0ff
commit
ab9bfa41c9
10 changed files with 184 additions and 71 deletions
|
|
@ -1 +1,15 @@
|
|||
@import 'tailwindcss';
|
||||
|
||||
@keyframes spin-slower {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.spin-slower {
|
||||
animation: spin-slower 15s linear infinite;
|
||||
}
|
||||
|
|
|
|||
8
frontend/src/lib/components/Error.svelte
Normal file
8
frontend/src/lib/components/Error.svelte
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<script lang="ts">
|
||||
let { code, message } = $props()
|
||||
</script>
|
||||
|
||||
<div class="flex h-screen w-full flex-col items-center justify-center">
|
||||
<h1 class="p-2 text-xl">Error {code}</h1>
|
||||
<p>{message}</p>
|
||||
</div>
|
||||
|
|
@ -1,30 +1,38 @@
|
|||
<script lang="ts">
|
||||
import { type Song, createEmptySong } from "$lib/types"
|
||||
|
||||
let { songs, playing } = $props()
|
||||
|
||||
let displaySongs = $derived([
|
||||
playing > 0 && playing < songs.length ? songs[playing - 1] : { name: "", image: "" },
|
||||
let displaySongs = $derived<Song[]>([
|
||||
playing > 0 && playing < songs.length ? songs[playing - 1] : createEmptySong(),
|
||||
songs[playing],
|
||||
playing == songs.length - 1 ? { name: "", image: "" } : songs[playing + 1],
|
||||
playing == songs.length - 1 ? createEmptySong() : songs[playing + 1],
|
||||
])
|
||||
</script>
|
||||
|
||||
<div class="relative flex w-full justify-center overflow-hidden">
|
||||
<div class="flex w-fit flex-row gap-4">
|
||||
{#each displaySongs as song, i}
|
||||
{#if song.name != ""}
|
||||
{#if song?.title && song.title != ""}
|
||||
<div class={`relative flex flex-col items-center transition-all duration-300 ${i === 1 ? "z-10" : "z-0 scale-85 opacity-50"}`}>
|
||||
<img
|
||||
class="h-[60vw] max-h-[250px] w-[60vw]
|
||||
max-w-[250px] rounded object-cover transition-all duration-300"
|
||||
src={song.image}
|
||||
alt="Song cover"
|
||||
/>
|
||||
<div
|
||||
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-white"></div>
|
||||
{/if}
|
||||
<img class={`h-full overflow-hidden ${i === 1 ? "rounded-full" : "rounded"}`} src={song.image_id} alt="Song cover" />
|
||||
</div>
|
||||
{#if i === 1}
|
||||
<h1 class="mt-2">{song.name}</h1>
|
||||
<h1 class="mt-2">{song.title} - {song.artist}</h1>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="h-[60vw] max-h-[250px] w-[60vw] max-w-[250px]"></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>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,27 @@
|
|||
import * as z from "zod"
|
||||
import { z } from "zod"
|
||||
|
||||
export const SongSchema = z.object({
|
||||
name: z.string(),
|
||||
image: z.string(),
|
||||
points: z.number().optional().default(0),
|
||||
uuid: z.string(),
|
||||
title: z.string(),
|
||||
artist: z.string(),
|
||||
tags: z.array(z.string()),
|
||||
image_id: z.string(),
|
||||
youtube_id: z.number().optional().default(0),
|
||||
})
|
||||
|
||||
export type Song = z.infer<typeof SongSchema>
|
||||
|
||||
export const parseSong = async function (song: any): Promise<Song> {
|
||||
let resp = await SongSchema.parseAsync(song)
|
||||
return resp
|
||||
}
|
||||
|
||||
export const createEmptySong = function (): Song {
|
||||
return {
|
||||
uuid: "-1",
|
||||
title: "",
|
||||
artist: "",
|
||||
tags: [""],
|
||||
image_id: "",
|
||||
youtube_id: 0,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,12 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte"
|
||||
|
||||
let pos = $state()
|
||||
|
||||
function onGPS(t: GeolocationPosition) {
|
||||
pos = t.coords
|
||||
}
|
||||
|
||||
function failGPS(t: GeolocationPositionError) {
|
||||
console.log(t)
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
navigator.geolocation.getCurrentPosition(onGPS, failGPS)
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="flex h-full w-full items-center justify-center">
|
||||
<div></div>
|
||||
<div class="flex h-full w-full items-center justify-center p-4">
|
||||
<div class="w-1/2">
|
||||
<h1>Scan your nearby rooms</h1>
|
||||
<a href="/room/123">Room Test</a>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Create your room</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
37
frontend/src/routes/admin/[id]/+page.svelte
Normal file
37
frontend/src/routes/admin/[id]/+page.svelte
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<script lang="ts">
|
||||
import QueueSlider from "$lib/components/QueueSlider.svelte"
|
||||
|
||||
let songs = $state([
|
||||
{
|
||||
name: "Cisco PT - Cantarex",
|
||||
image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
|
||||
points: 0,
|
||||
},
|
||||
{
|
||||
name: "Io e i miei banchi - Paul Ham",
|
||||
image: "https://i.prcdn.co/img?regionKey=RbtvKb5E1Cv4j1VWm2uGrw%3D%3D",
|
||||
points: 0,
|
||||
},
|
||||
{
|
||||
name: "Ragatthi - Bersatetthi",
|
||||
image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
|
||||
points: 0,
|
||||
},
|
||||
{
|
||||
name: "Quarta",
|
||||
image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
|
||||
points: 0,
|
||||
},
|
||||
{
|
||||
name: "Quinta",
|
||||
image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
|
||||
points: 0,
|
||||
},
|
||||
])
|
||||
|
||||
let playing = $state(1)
|
||||
</script>
|
||||
|
||||
<div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
|
||||
<QueueSlider {songs} {playing} />
|
||||
</div>
|
||||
|
|
@ -1,45 +1,56 @@
|
|||
<script lang="ts">
|
||||
import QueueSlider from "$lib/components/QueueSlider.svelte"
|
||||
import SuggestionInput from "$lib/components/SuggestionInput.svelte"
|
||||
import SuggestionList from "$lib/components/SuggestionList.svelte"
|
||||
import Error from "$lib/components/Error.svelte"
|
||||
import { parseSong, type Song } from "$lib/types.js"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
let songs = $state([
|
||||
{
|
||||
name: "Cisco PT - Cantarex",
|
||||
image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
|
||||
points: 0,
|
||||
},
|
||||
{
|
||||
name: "Io e i miei banchi - Paul Ham",
|
||||
image: "https://i.prcdn.co/img?regionKey=RbtvKb5E1Cv4j1VWm2uGrw%3D%3D",
|
||||
points: 0,
|
||||
},
|
||||
{
|
||||
name: "Ragatthi - Bersatetthi",
|
||||
image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
|
||||
points: 0,
|
||||
},
|
||||
{
|
||||
name: "Quarta",
|
||||
image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
|
||||
points: 0,
|
||||
},
|
||||
{
|
||||
name: "Quinta",
|
||||
image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
|
||||
points: 0,
|
||||
},
|
||||
])
|
||||
let { data } = $props()
|
||||
|
||||
let playing = $state(1)
|
||||
let songs = $state<Song[]>([])
|
||||
let playing = $state(0)
|
||||
|
||||
let error = $state({ code: 0, message: "" })
|
||||
|
||||
onMount(async () => {
|
||||
// Join the room
|
||||
let resp = await fetch("/api/join?room=" + data.roomId)
|
||||
|
||||
if (resp.status != 200) {
|
||||
error = { code: 400, message: "Failed to join the room. Maybe wrong code or location?" }
|
||||
return
|
||||
}
|
||||
|
||||
// Setup websocket connection
|
||||
|
||||
// Get the room queue
|
||||
|
||||
resp = await fetch("/api/queue?room=" + data.roomId)
|
||||
if (resp.status != 200) {
|
||||
error = { code: 404, message: "Room not found" }
|
||||
return
|
||||
}
|
||||
let json = await resp.json()
|
||||
|
||||
json["queue"].forEach(async (i: any) => {
|
||||
songs.push(await parseSong(i))
|
||||
})
|
||||
|
||||
// Get room suggestions
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
|
||||
<QueueSlider {songs} {playing} />
|
||||
<div class="w-full py-6 lg:w-[30vw]">
|
||||
<SuggestionInput />
|
||||
<!-- Check if the room exists -->
|
||||
{#if error.code != 0}
|
||||
<Error code={error.code} message={error.message} />
|
||||
{:else}
|
||||
<div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
|
||||
<QueueSlider {songs} {playing} />
|
||||
<div class="w-full py-6 lg:w-[30vw]">
|
||||
<SuggestionInput />
|
||||
</div>
|
||||
<div class="w-full py-6 lg:w-[30vw]">
|
||||
<!-- <SuggestionList suggestions={songs} /> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full py-6 lg:w-[30vw]">
|
||||
<SuggestionList suggestions={songs} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
11
frontend/src/routes/room/[id]/+page.ts
Normal file
11
frontend/src/routes/room/[id]/+page.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { error, type Load, type ServerLoad } from "@sveltejs/kit"
|
||||
import type { PageLoad } from "./$types"
|
||||
|
||||
export const load: PageLoad = async ({ params }) => {
|
||||
if (params.id) {
|
||||
return {
|
||||
roomId: params.id,
|
||||
}
|
||||
}
|
||||
error(400, "Please provide a room id")
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue