diff options
| author | Physick <96335032+DegustatorPonos@users.noreply.github.com> | 2025-12-13 12:45:50 +0500 |
|---|---|---|
| committer | Physick <96335032+DegustatorPonos@users.noreply.github.com> | 2025-12-13 12:45:50 +0500 |
| commit | 44884dd29d8812cfd38f8fe2a8e3a28cfa944253 (patch) | |
| tree | d984abce773e286b04799ba3025e3c3ae4b7821d /static | |
| parent | ae11ed555cb350ea4c11fc1625f4a56229969ddd (diff) | |
Frontend changes
Diffstat (limited to 'static')
| -rw-r--r-- | static/index.css | 3 | ||||
| -rw-r--r-- | static/index.html | 14 | ||||
| -rw-r--r-- | static/index.js | 24 |
3 files changed, 30 insertions, 11 deletions
diff --git a/static/index.css b/static/index.css index 7748957..8b552c2 100644 --- a/static/index.css +++ b/static/index.css @@ -17,8 +17,7 @@ body { .controls { background-color: rgb(0%, 0%, 0%, 0.5); height: 5%; - padding: 0px; - padding-top: 3px; + padding: 3px; padding-left: 10px; padding-right: 10px; border-radius: 10px 10px 0px 0px; diff --git a/static/index.html b/static/index.html index 4ebe902..20d5f41 100644 --- a/static/index.html +++ b/static/index.html @@ -6,10 +6,12 @@ <body> <div class="Info"> <h1> Rock culture exam </h1> - <h1 id="Artist" > Artist </h1> - <h1 id="Title" > Title </h1> - <h1 id="Album" > Album </h1> - <h1 id="Start" > Start position </h1> + <div id="InfoBlock"> + <h1 id="Artist"> Artist </h1> + <h1 id="Title"> Title </h1> + <h1 id="Album"> Album </h1> + <h1 id="Start"> Start position </h1> + </div> </div> <div class="controls"> <button onclick="Pause()" class="controlBtn"> @@ -21,6 +23,10 @@ <button onclick="SetRandomSong()" class="controlBtn"> <h1 onclick="Pause" class="controlElem"> Next song </h1> </button> + <h1 id="Status" class="controlElem"> No music </h1> + <button onclick="ToggleInfo()" class="controlBtn"> + <h1 onclick="Pause" class="controlElem" id="ToggleBtn"> Hide info </h1> + </button> </div> <audio id="mainAudio"> <source type="audio/mpeg" /> diff --git a/static/index.js b/static/index.js index 6cda2f7..237386c 100644 --- a/static/index.js +++ b/static/index.js @@ -1,3 +1,4 @@ +let isInfoShown = true; function GetSongs() { fetch("/api/getSongs").then(r => r.json().then(body => { @@ -11,24 +12,37 @@ function SetRandomSong() { console.log(player); console.log(body); player.src = "/api/getSong?name=" + encodeURI(body.Name); - player.play(); - document.getElementById("Artist").innerHTML = "Artist: " + body.Meta.Name; - document.getElementById("Title").innerHTML = "Title: " + body.Meta.Author; + document.getElementById("Artist").innerHTML = "Artist: " + body.Meta.Author; + document.getElementById("Title").innerHTML = "Title: " + body.Meta.Name; document.getElementById("Album").innerHTML = "Album: " + body.Meta.Album; document.getElementById("Start").innerHTML = "Start: " + body.Start + "s"; + player.play(); + document.getElementById("Status").innerHTML = "Playing"; })); } function Pause() { const player = document.getElementById("mainAudio"); player.pause(); - console.log("Paused audio"); + document.getElementById("Status").innerHTML = "Paused"; } function Resume() { const player = document.getElementById("mainAudio"); player.play(); - console.log("Paused audio"); + document.getElementById("Status").innerHTML = "Playing"; +} + +function ToggleInfo() { + if (isInfoShown) { + document.getElementById("InfoBlock").style.display = 'none'; + document.getElementById("ToggleBtn").innerHTML = 'Show info'; + isInfoShown = false; + } else { + document.getElementById("InfoBlock").style.display = 'block'; + document.getElementById("ToggleBtn").innerHTML = 'Hide info'; + isInfoShown = true; + } } |