diff --git a/pyrite.py b/pyrite.py
index f902698..b2ac916 100644
--- a/pyrite.py
+++ b/pyrite.py
@@ -22,6 +22,11 @@ async def index(request: Request):
context = {"request": request}
return templates.TemplateResponse('index.html', context)
+@app.get("/player", response_class=HTMLResponse)
+async def player(request: Request):
+ context = {"request": request}
+ return templates.TemplateResponse('player.html', context)
+
@app.get("/rand_track/")
async def get_rand_track():
"""Return a random track."""
diff --git a/static/pause.svg b/static/pause.svg
new file mode 100644
index 0000000..8d31d0e
--- /dev/null
+++ b/static/pause.svg
@@ -0,0 +1,16 @@
+
+
+
+
\ No newline at end of file
diff --git a/static/play.svg b/static/play.svg
new file mode 100644
index 0000000..41e7e73
--- /dev/null
+++ b/static/play.svg
@@ -0,0 +1,13 @@
+
+
+
\ No newline at end of file
diff --git a/static/prev.svg b/static/prev.svg
new file mode 100644
index 0000000..9a486fa
--- /dev/null
+++ b/static/prev.svg
@@ -0,0 +1,14 @@
+
+
+
+
\ No newline at end of file
diff --git a/static/pyrite.css b/static/pyrite.css
index fd6bc6f..e99c8ab 100644
--- a/static/pyrite.css
+++ b/static/pyrite.css
@@ -4,6 +4,7 @@ body {
padding: 8px;
box-sizing: border-box;
font-family: Helvetica, sans-serif;
+ background-color: #eed89b;
}
main {
@@ -32,6 +33,7 @@ input[type="radio"]:checked+div {
.list {
overflow: auto;
border: 1px solid;
+ background-color: #e8e2d7;
}
#artist_list {
@@ -81,3 +83,19 @@ img {
margin-left: auto;
font-size: 80%;
}
+
+input[type='range'] {
+ accent-color: green;
+}
+
+.btn {
+ height: 3em;
+}
+
+button img {
+ height: 2em;
+}
+
+#next-track-btn img {
+ transform: rotate(180deg);
+}
diff --git a/static/pyrite.js b/static/pyrite.js
index 3ef703e..1f3ade1 100644
--- a/static/pyrite.js
+++ b/static/pyrite.js
@@ -38,17 +38,26 @@ async function playTrack() {
player.play();
navigator.mediaSession.playbackState = "playing";
setMediaSession(track);
+
+ document.querySelector("#play-btn").style.display = "none";
+ document.querySelector("#pause-btn").style.display = "initial";
}
function pauseTrack() {
player.pause();
navigator.mediaSession.playbackState = "paused";
+
+ document.querySelector("#play-btn").style.display = "initial";
+ document.querySelector("#pause-btn").style.display = "none";
}
function stopTrack() {
player.pause();
player.load();
navigator.mediaSession.playbackState = "none";
+
+ document.querySelector("#play-btn").style.display = "initial";
+ document.querySelector("#pause-btn").style.display = "none";
}
function setMediaSession(track) {
diff --git a/static/volume-max.svg b/static/volume-max.svg
new file mode 100644
index 0000000..056c3f3
--- /dev/null
+++ b/static/volume-max.svg
@@ -0,0 +1,25 @@
+
+
+
+
\ No newline at end of file
diff --git a/static/volume-off.svg b/static/volume-off.svg
new file mode 100644
index 0000000..26fa713
--- /dev/null
+++ b/static/volume-off.svg
@@ -0,0 +1,19 @@
+
+
+
+
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 670c5ce..3b5202f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -39,8 +39,19 @@
-
-
-
+
+
+
+
+
@@ -69,5 +80,4 @@
-