kennethnym/infinifi
1
0
Fork 0
Code Issues 2 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: add basic play/pause web ui

Browse Source
This commit is contained in:
Kenneth
2024-07-20 21:18:41 +01:00
parent 074d96b76d
commit a6794dafca
4 changed files with 150 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
server.py
View File

@@ -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")

9
web/index.html
View File

@@ -2,10 +2,15 @@
<html>
<head>
<title>infinifi</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<main>
<p>test</p>
<main class="container">
<h1 class="header">infinifi</h1>
<h2>infinite lo-fi music in the background</h2>
<div class="button-container">
<button id="play-btn" class="button">play</button>
</div>
</main>
<script type="text/javascript" src="/script.js"></script>
</body>

34
web/script.js
View File

@@ -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();
}
};

95
web/style.css Normal file
View File

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