diff --git a/backend/src/app.py b/backend/src/app.py index a484a46..02e6594 100644 --- a/backend/src/app.py +++ b/backend/src/app.py @@ -1,9 +1,9 @@ +import uuid +from dataclasses import asdict import dotenv from flask import Flask, Response, jsonify, request from flask_cors import CORS -from flask_socketio import SocketIO, emit -import uuid -from dataclasses import asdict +from flask_socketio import SocketIO, join_room, leave_room from .state import State from .connect import get_connection @@ -12,16 +12,16 @@ from .song import Song, init_db, get_song_by_title_artist, add_song_in_db, get_s from .song_fetch import lastfm_query_search, yt_get_audio_url, yt_search_song from .qrcode_gen import generate_qr -from typing import Any dotenv.load_dotenv() app = Flask(__name__) app.config["SECRET_KEY"] = "your_secret_key" -socketio = SocketIO(app) +socketio = SocketIO(app, cors_allowed_origins="*", path="/ws") CORS(app) + db_conn = get_connection() state = State(app, socketio, db_conn.cursor()) init_db(state.db) @@ -46,15 +46,28 @@ def error(msg: str, status: int = 400) -> Response: return res -def ws_broadcast(event: str, *, room_id: int | None = None, data: Any) -> None: - final = {} +@socketio.on("connect") +def handle_connection(): + print("somebody connected to socket.io", flush=True) - if room_id is not None: - final["room_id"] = room_id - final["data"] = data +@socketio.on("disconnect") +def handle_disconnection(): + print("somebody disconnected from socket.io", flush=True) - emit(event, final, broadcast=True, namespace="/") + +@socketio.on("join_room") +def on_join(data): + room = data["id"] + join_room(room) + print(f"somebody joined {room=}", flush=True) + + +@socketio.on("leave_room") +def on_leave(data): + room = data["id"] + leave_room(room) + print(f"somebody left {room=}", flush=True) @app.get("/api/join") @@ -98,10 +111,11 @@ def queue_next(): if room.playing_idx >= len(room.playing): ## queue ended - room.renew_queue() - emit("update_songs", {"songs": [1, 2, 3]}, broadcast=True, namespace="/") + # room.renew_queue() + data = {"success": True, "ended": True, "index": room.playing_idx, "queue": room.playing} + state.socketio.emit("new_queue", data, to=str(room.id)) - return {"success": True, "ended": True, "index": room.playing_idx, "queue": room.playing} + return data return {"success": True, "ended": False, "index": room.playing_idx} @@ -188,6 +202,7 @@ def add_song(): ## 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 + socketio.emit("new_song", {"song": song, "user_score": 1}, to=str(room.id)) return {"success": True, "song": song} @@ -219,6 +234,7 @@ def post_song_vote(): ## update the song room.songs[song_id] = (song_info[0], song_info[1] + int(request.args["increment"])) + socketio.emit("new_vote", {"song": song_info[0], "user_score": song_info[1]}) return {"success": True} diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cf0b463..a545ce8 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,6 +8,7 @@ "name": "frontend", "version": "0.0.1", "dependencies": { + "socket.io-client": "^4.8.1", "zod": "^4.0.14" }, "devDependencies": { @@ -820,6 +821,12 @@ "win32" ] }, + "node_modules/@socket.io/component-emitter": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz", + "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==", + "license": "MIT" + }, "node_modules/@sveltejs/acorn-typescript": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz", @@ -1203,6 +1210,18 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/node": { + "version": "24.1.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.1.0.tgz", + "integrity": "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "undici-types": "~7.8.0" + } + }, "node_modules/acorn": { "version": "8.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", @@ -1327,6 +1346,45 @@ "dev": true, "license": "MIT" }, + "node_modules/engine.io-client": { + "version": "6.6.3", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz", + "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==", + "license": "MIT", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.17.1", + "xmlhttprequest-ssl": "~2.1.1" + } + }, + "node_modules/engine.io-client/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/engine.io-parser": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz", + "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==", + "license": "MIT", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/enhanced-resolve": { "version": "5.18.2", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz", @@ -1786,7 +1844,6 @@ "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true, "license": "MIT" }, "node_modules/nanoid": { @@ -2060,6 +2117,68 @@ "node": ">=18" } }, + "node_modules/socket.io-client": { + "version": "4.8.1", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz", + "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==", + "license": "MIT", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.2", + "engine.io-client": "~6.6.1", + "socket.io-parser": "~4.2.4" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-client/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/socket.io-parser": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", + "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==", + "license": "MIT", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -2196,6 +2315,15 @@ "node": ">=14.17" } }, + "node_modules/undici-types": { + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz", + "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/vite": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.6.tgz", @@ -2291,6 +2419,35 @@ } } }, + "node_modules/ws": { + "version": "8.17.1", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz", + "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==", + "license": "MIT", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz", + "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/yallist": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index cdbbe97..d5aa485 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,6 +28,7 @@ "vite": "^7.0.4" }, "dependencies": { - "zod": "^4.0.14" + "zod": "^4.0.14", + "socket.io-client": "^4.8.1" } } diff --git a/frontend/src/lib/components/Error.svelte b/frontend/src/lib/components/Error.svelte index 47e6a19..414657e 100644 --- a/frontend/src/lib/components/Error.svelte +++ b/frontend/src/lib/components/Error.svelte @@ -1,8 +1,10 @@
-

Error {code}

-

{message}

+

Error {returnError.code}

+

{returnError.message}

diff --git a/frontend/src/lib/components/QueueSlider.svelte b/frontend/src/lib/components/QueueSlider.svelte index 430a9bc..ec5a647 100644 --- a/frontend/src/lib/components/QueueSlider.svelte +++ b/frontend/src/lib/components/QueueSlider.svelte @@ -1,12 +1,12 @@ diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts index 3f10d61..7de4960 100644 --- a/frontend/src/lib/types.ts +++ b/frontend/src/lib/types.ts @@ -35,3 +35,8 @@ export const parseSuggestion = async function (sugg: any): Promise { let resp = await SuggestionSchema.parseAsync(sugg) return resp } + +export type FetchError = { + code: number + message: string +} diff --git a/frontend/src/lib/util.ts b/frontend/src/lib/util.ts new file mode 100644 index 0000000..df0d44e --- /dev/null +++ b/frontend/src/lib/util.ts @@ -0,0 +1 @@ +export type FetchError = { code: number, message: string } diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts new file mode 100644 index 0000000..1babeb9 --- /dev/null +++ b/frontend/src/lib/utils.ts @@ -0,0 +1,69 @@ +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) + + if (resp.status != 200) { + return [{ code: 400, message: "Cannot join the room" }, ""] + } + + return [null, "test"] +} + +export const getSuggestions = async function (roomId: string): Promise<[FetchError | null, Suggestion[]]> { + let resp = await fetch("/api/room/suggestions?room=" + roomId) + + if (resp.status != 200) { + return [{ code: 400, message: "Failed to retrieve suggestions" }, []] + } + + let json = await resp.json() + let suggestions: Suggestion[] = [] + + json["songs"].forEach(async (i: any) => { + suggestions.push(await parseSuggestion(i)) + }) + + suggestions = suggestions.sort((a, b) => { + return a.upvote - b.upvote + }) + + return [null, suggestions] +} + +export const getQueueSongs = async function (roomId: string): Promise<[FetchError | null, Song[], number]> { + let resp = await fetch("/api/queue?room=" + roomId) + if (resp.status != 200) { + return [{ code: 400, message: "Failed to load queue songs" }, [], 0] + } + + let json = await resp.json() + let songs: Song[] = [] + + json["queue"].forEach(async (i: any) => { + songs.push(await parseSong(i)) + }) + + let playingId = json["index"] + + return [null, songs, playingId] +} + +export const triggerPlayNext = async function (roomId: string): Promise<[FetchError | null, Song[], number]> { + let resp = await fetch("/api/queue/next?room=" + roomId, { method: "POST" }) + + if (resp.status != 200) { + return [{ code: 400, message: "Failed to trigger next song playback" }, [], 0] + } + + let json = await resp.json() + + let songs: Song[] = [] + + if (json["ended"]) { + json["queue"].forEach(async (i: any) => { + songs.push(await parseSong(i)) + }) + } + return [null, songs, json["index"]] +} diff --git a/frontend/src/routes/admin/[id]/+page.svelte b/frontend/src/routes/admin/[id]/+page.svelte index 7573aa2..55d93a5 100644 --- a/frontend/src/routes/admin/[id]/+page.svelte +++ b/frontend/src/routes/admin/[id]/+page.svelte @@ -1,37 +1,43 @@ +{returnError} +
- + +
diff --git a/frontend/src/routes/admin/[id]/+page.ts b/frontend/src/routes/admin/[id]/+page.ts new file mode 100644 index 0000000..216a08b --- /dev/null +++ b/frontend/src/routes/admin/[id]/+page.ts @@ -0,0 +1,11 @@ +import { error } from "@sveltejs/kit" +import type { PageLoad } from "../../room/[id]/$types" + +export const load: PageLoad = function ({ params }) { + if (params.id) { + return { + roomId: params.id, + } + } + error(400, "Please provide a room id") +} diff --git a/frontend/src/routes/room/[id]/+page.svelte b/frontend/src/routes/room/[id]/+page.svelte index f3905e6..9d9702b 100644 --- a/frontend/src/routes/room/[id]/+page.svelte +++ b/frontend/src/routes/room/[id]/+page.svelte @@ -2,71 +2,56 @@ import QueueSlider from "$lib/components/QueueSlider.svelte" import SuggestionInput from "$lib/components/SuggestionInput.svelte" import Error from "$lib/components/Error.svelte" - import { parseSong, parseSuggestion, type Suggestion, type Song } from "$lib/types.js" + import { type Suggestion, type Song } from "$lib/types.js" import { onMount } from "svelte" import SuggestionList from "$lib/components/SuggestionList.svelte" + import { getQueueSongs, getSuggestions, joinRoom } from "$lib/utils.js" + import type { FetchError } from "$lib/types.js" + import { io } from "socket.io-client" let { data } = $props() - let songs = $state([]) - let playing = $state(0) + let queueSongs = $state([]) + let playingIndex = $state(0) let suggestions = $state([]) - let error = $state({ code: 0, message: "" }) + let returnError = $state() + + let wsUrl = "" 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?" } + let sugg, queue, index + ;[returnError, wsUrl] = await joinRoom(data.roomId) + if (returnError) { return } + ;[returnError, sugg] = await getSuggestions(data.roomId) + if (returnError) return + // Setup websocket connection - - // Get room suggestions - - resp = await fetch("/api/room/suggestions?room=" + data.roomId) - - if (resp.status != 200) { - error = { code: 500, message: "Failed to retrive suggestions" } + let socket = io("/", { path: "/ws" }) + await socket.emitWithAck("join_room", { id: data.roomId }) + ;[returnError, queue, index] = await getQueueSongs(data.roomId) + if (returnError) { return } - let json = await resp.json() - - json["songs"].forEach(async (i: any) => { - suggestions.push(await parseSuggestion(i)) - }) - - suggestions = suggestions.sort((a, b) => { - return a.upvote - b.upvote - }) - - // Get the room queue - - resp = await fetch("/api/queue?room=" + data.roomId) - if (resp.status != 200) { - error = { code: 404, message: "Room not found" } - return - } - json = await resp.json() - - json["queue"].forEach(async (i: any) => { - songs.push(await parseSong(i)) - }) - console.log(songs) + queueSongs = queue + suggestions = sugg + playingIndex = index }) -{#if error.code != 0} - +{#if returnError} + {:else}
- +
diff --git a/frontend/src/routes/room/[id]/+page.ts b/frontend/src/routes/room/[id]/+page.ts index 1776db6..969ffc5 100644 --- a/frontend/src/routes/room/[id]/+page.ts +++ b/frontend/src/routes/room/[id]/+page.ts @@ -1,5 +1,7 @@ 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 = async ({ params }) => { if (params.id) { diff --git a/frontend/src/routes/zesty/wsio/+page.svelte b/frontend/src/routes/zesty/wsio/+page.svelte new file mode 100644 index 0000000..32b44d5 --- /dev/null +++ b/frontend/src/routes/zesty/wsio/+page.svelte @@ -0,0 +1,8 @@ + diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index eccff34..3548199 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -10,6 +10,11 @@ export default defineConfig({ target: "http://backend:5000", changeOrigin: false, secure: false + }, + '/ws': { + target: "http://backend:5000", + changeOrigin: false, + secure: false } } }