diff --git a/web/assets/css/main.css b/web/assets/css/main.css index 0c4b925..5a79198 100644 --- a/web/assets/css/main.css +++ b/web/assets/css/main.css @@ -125,7 +125,7 @@ section { margin-top: 1rem; } #player p { text-indent: 1rem; } -button[name="play"] { +button#radio-play { -webkit-mask-image: url(/assets/img/play.svg); background-color: var(--primary-color); height: 3rem; @@ -133,9 +133,9 @@ button[name="play"] { min-width: 3rem; width: 3rem; } -button[name="play"]:hover { text-decoration: none; } +button#radio-play:hover { text-decoration: none; } -input[name="volume"] { +input#radio-volume { accent-color: var(--primary-color); height: 5rem; margin-left: .5rem; } @@ -150,12 +150,12 @@ input[name="volume"] { flex-direction: column; } -#last-played { +#last-songs { margin: 0 auto; min-width: 80%; width: 80%; } -#last-played tbody tr { +#last-songs tbody tr { display: grid; gap: .5rem; grid-template-columns: 3rem 2rem 1fr; } @@ -168,7 +168,7 @@ footer { @media screen and (max-width: 640px) { header { display: block; } - #logo { + header svg { margin: 0 auto; width: 100%; } diff --git a/web/assets/js/main.js b/web/assets/js/main.js index 64e82ef..400f036 100644 --- a/web/assets/js/main.js +++ b/web/assets/js/main.js @@ -18,29 +18,29 @@ function updateLastPlayedSong() { fetch("/lastsong") .then(r => r.json()) .then(last_played => { - if ($("last-played").firstChild === null) - $("last-played").appendChild(document.createElement("tbody")) - else if (last_played.time == $("last-played").firstChild.lastChild.firstChild.innerText) + if ($("last-songs").firstChild === null) + $("last-songs").appendChild(document.createElement("tbody")) + else if (last_played.time == $("last-songs").firstChild.lastChild.firstChild.innerText) return; - if ($("last-played").firstChild.children.length == 10) - $("last-played").firstChild.firstChild.remove(); + if ($("last-songs").firstChild.children.length == 10) + $("last-songs").firstChild.firstChild.remove(); - let row = $("last-played").insertRow(); + let row = $("last-songs").insertRow(); row.insertCell().appendChild(document.createTextNode(last_played.time)); row.insertCell().appendChild(document.createTextNode(last_played.listeners == 0 ? "" : last_played.listeners)); row.insertCell().appendChild(document.createTextNode(last_played.song)); }); } -document.getElementsByName("update")[0].addEventListener("click", () => { +$("radio-update").addEventListener("click", () => { updateLastPlayedSong(); updateRadioStatus(); }); setInterval(updateRadioStatus, 45000); setInterval(updateLastPlayedSong, 45000); -const volume = document.getElementsByName("volume"); +const volume = $("radio-volume"); volume.addEventListener("input", e => { audio.volume = parseFloat(e.target.value) / 100.0; }); @@ -55,12 +55,12 @@ audio.addEventListener("timeupdate", e => { const s = Math.floor(ct % 60); const m = Math.floor((ct / 60) % 60); const h = Math.floor(ct / 3600); - document.getElementsByClassName("elapsed")[0].textContent = `${h}h ${m}m ${s}s`; }); + $("radio-elapsed").textContent = `${h}h ${m}m ${s}s`; }); $("player").firstChild.style.display = "flex"; $("player").style.display = "flex"; -document.getElementsByName("play")[0].addEventListener("click", e => { +$("radio-play").addEventListener("click", e => { if (audio.paused) { audio.src = audio_src; audio.play(); diff --git a/web/templates/index.pug b/web/templates/index.pug index 41845da..d306839 100644 --- a/web/templates/index.pug +++ b/web/templates/index.pug @@ -39,9 +39,9 @@ html(lang='en') div#player div div - button(name='play') - small.elapsed 0h 0m 0s - input(type="range" name="volume" min="0" max="100" orient="vertical") + button#radio-play + small#radio-elapsed 0h 0m 0s + input#radio-volume(type="range" min="0" max="100" orient="vertical") audio(preload='none' controls='' playsinline='') source(src='/live/stream.ogg' type='audio/ogg') | Your browser doesn't support an audio element, it's sad... But you always can take the #[a(href='/playlist') playlist]! @@ -49,10 +49,10 @@ html(lang='en') p Now playing: #[span#radio-song #{status.SongName}] p Current/peak listeners: #[span#radio-listeners #{status.Listeners}] / #[span#radio-listener-peak #{status.ListenerPeak}] p - small Notice: information updates every 45 seconds. But you can #[button(name='update') update] it forcibly. + small Notice: information updates every 45 seconds. But you can #[button#radio-update update] it forcibly. section h2 Last #{songsNum} songs - table#last-played + table#last-songs each song in *songs tr td= song.Time