From 912da7c28be1ef9972a47884d3ed3bb8ac06a531 Mon Sep 17 00:00:00 2001 From: iou1name Date: Tue, 12 Nov 2024 13:49:35 -0500 Subject: [PATCH] added player control buttons --- pyrite.py | 5 +++++ static/pause.svg | 16 ++++++++++++++++ static/play.svg | 13 +++++++++++++ static/prev.svg | 14 ++++++++++++++ static/pyrite.css | 18 ++++++++++++++++++ static/pyrite.js | 9 +++++++++ static/volume-max.svg | 25 +++++++++++++++++++++++++ static/volume-off.svg | 19 +++++++++++++++++++ templates/index.html | 16 +++++++++++++--- 9 files changed, 132 insertions(+), 3 deletions(-) create mode 100644 static/pause.svg create mode 100644 static/play.svg create mode 100644 static/prev.svg create mode 100644 static/volume-max.svg create mode 100644 static/volume-off.svg 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 @@ -