From a6794dafca8f7aecd31eeb513fd9e8278c1a92c0 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sat, 20 Jul 2024 21:18:41 +0100 Subject: [PATCH] feat: add basic play/pause web ui --- server.py | 18 +++++++--- web/index.html | 9 +++-- web/script.js | 34 ++++++++++++++++++ web/style.css | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 150 insertions(+), 6 deletions(-) create mode 100644 web/style.css diff --git a/server.py b/server.py index 2c3f332..9928dbd 100644 --- a/server.py +++ b/server.py @@ -1,13 +1,12 @@ import threading -from .generate import generate + +# from generate import generate from fastapi import FastAPI from fastapi.responses import FileResponse from fastapi.staticfiles import StaticFiles app = FastAPI() -current_index = 0 - -app.mount("/", StaticFiles(directory="web", html=True), name="web") +current_index = -1 def advance(): @@ -23,8 +22,19 @@ def advance(): else: current_index = current_index + 1 + print(f"advancing, current index {current_index}") + t = threading.Timer(60, advance) t.start() advance() + + +@app.get("/current.mp3") +def get_current_audio(): + print("hello") + return FileResponse(f"{current_index}.mp3") + + +app.mount("/", StaticFiles(directory="web", html=True), name="web") diff --git a/web/index.html b/web/index.html index 42b9237..d98131b 100644 --- a/web/index.html +++ b/web/index.html @@ -2,10 +2,15 @@ infinifi + -
-

test

+
+

infinifi

+

infinite lo-fi music in the background

+
+ +
diff --git a/web/script.js b/web/script.js index e69de29..f8f4a7a 100644 --- a/web/script.js +++ b/web/script.js @@ -0,0 +1,34 @@ +const playBtn = document.getElementById("play-btn"); + +let isPlaying = false; +let currentAudio; +let volume = 1; + +function playAudio() { + currentAudio = new Audio("/current.mp3"); + currentAudio.onplay = () => { + isPlaying = true; + playBtn.innerText = "pause"; + }; + currentAudio.onpause = () => { + isPlaying = false; + playBtn.innerText = "play"; + }; + + currentAudio.volume = volume; + + currentAudio.load(); + currentAudio.play(); +} + +function pauseAudio() { + currentAudio.pause(); +} + +playBtn.onclick = () => { + if (isPlaying) { + pauseAudio(); + } else { + playAudio(); + } +}; diff --git a/web/style.css b/web/style.css new file mode 100644 index 0000000..070bcd6 --- /dev/null +++ b/web/style.css @@ -0,0 +1,95 @@ +:root { + font-family: monospace; + --background-color: #f0f0f0; +} + +html, +body { + width: 100%; +} + +body { + height: 100vh; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + background-color: #f0f0f0; + opacity: 1; + background-image: radial-gradient(#000000 0.5px, #f0f0f0 0.5px); + background-size: 10px 10px; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + opacity: 80%; + font-weight: 400; +} + +.header { + font-weight: 800; + margin-bottom: 1rem; +} + +.container { + width: 50%; + display: flex; + flex-direction: column; + align-items: start; +} + +.button-container { + margin-top: 2rem; + display: flex; +} + +.button { + border: 2px solid black; + position: relative; + font-family: monospace; + font-weight: 800; + padding: 0.5rem 1rem; +} + +.button:hover { + background-color: #f0f0f0; + background-size: 10px 10px; + background-image: repeating-linear-gradient( + 45deg, + #c9c9c9 0, + #c9c9c9 1px, + #f0f0f0 0, + #f0f0f0 50% + ); +} + +.button:active { + background: black !important; + color: white; + transform: translate(2px, 2px); +} + +.button:active::after { + content: none; +} + +.button:after { + display: block; + position: absolute; + margin: -2px; + width: inherit; + top: 1px; + left: 1px; + right: -1px; + bottom: -1px; + padding: 0.5rem 1rem; + content: ""; + background-color: black; + z-index: -1; + transform: translate(2px, 2px); +}