Arav/dwelling-radio
1
0
Fork 0
Code Releases 25 Activity

Replaced everything with id. Also #last-played renamed to #last-songs. Everything in #player got a prefix radio-.

Browse Source
This commit is contained in:
Alexander Andreev 2023-08-22 04:37:17 +04:00
parent 5e247f8d5c
commit bc9437cd2c
Signed by: Arav
GPG Key ID: D22A817D95815393
3 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/assets/css/main.css
View File

@ -125,7 +125,7 @@ section { margin-top: 1rem; }
#player p { text-indent: 1rem; } #player p { text-indent: 1rem; }
button[name="play"] { button#radio-play {
-webkit-mask-image: url(/assets/img/play.svg); -webkit-mask-image: url(/assets/img/play.svg);
background-color: var(--primary-color); background-color: var(--primary-color);
height: 3rem; height: 3rem;
@ -133,9 +133,9 @@ button[name="play"] {
min-width: 3rem; min-width: 3rem;
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); accent-color: var(--primary-color);
height: 5rem; height: 5rem;
margin-left: .5rem; } margin-left: .5rem; }
@ -150,12 +150,12 @@ input[name="volume"] {
flex-direction: column; flex-direction: column;
} }
#last-played { #last-songs {
margin: 0 auto; margin: 0 auto;
min-width: 80%; min-width: 80%;
width: 80%; } width: 80%; }
#last-played tbody tr { #last-songs tbody tr {
display: grid; display: grid;
gap: .5rem; gap: .5rem;
grid-template-columns: 3rem 2rem 1fr; } grid-template-columns: 3rem 2rem 1fr; }
@ -168,7 +168,7 @@ footer {
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
header { display: block; } header { display: block; }
#logo { header svg {
margin: 0 auto; margin: 0 auto;
width: 100%; } width: 100%; }

20
web/assets/js/main.js
View File

@ -18,29 +18,29 @@ function updateLastPlayedSong() {
fetch("/lastsong") fetch("/lastsong")
.then(r => r.json()) .then(r => r.json())
.then(last_played => { .then(last_played => {
if ($("last-played").firstChild === null) if ($("last-songs").firstChild === null)
$("last-played").appendChild(document.createElement("tbody")) $("last-songs").appendChild(document.createElement("tbody"))
else if (last_played.time == $("last-played").firstChild.lastChild.firstChild.innerText) else if (last_played.time == $("last-songs").firstChild.lastChild.firstChild.innerText)
return; return;
if ($("last-played").firstChild.children.length == 10) if ($("last-songs").firstChild.children.length == 10)
$("last-played").firstChild.firstChild.remove(); $("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.time));
row.insertCell().appendChild(document.createTextNode(last_played.listeners == 0 ? "" : last_played.listeners)); row.insertCell().appendChild(document.createTextNode(last_played.listeners == 0 ? "" : last_played.listeners));
row.insertCell().appendChild(document.createTextNode(last_played.song)); row.insertCell().appendChild(document.createTextNode(last_played.song));
}); });
} }
document.getElementsByName("update")[0].addEventListener("click", () => { $("radio-update").addEventListener("click", () => {
updateLastPlayedSong(); updateLastPlayedSong();
updateRadioStatus(); }); updateRadioStatus(); });
setInterval(updateRadioStatus, 45000); setInterval(updateRadioStatus, 45000);
setInterval(updateLastPlayedSong, 45000); setInterval(updateLastPlayedSong, 45000);
const volume = document.getElementsByName("volume"); const volume = $("radio-volume");
volume.addEventListener("input", e => { volume.addEventListener("input", e => {
audio.volume = parseFloat(e.target.value) / 100.0; }); audio.volume = parseFloat(e.target.value) / 100.0; });
@ -55,12 +55,12 @@ audio.addEventListener("timeupdate", e => {
const s = Math.floor(ct % 60); const s = Math.floor(ct % 60);
const m = Math.floor((ct / 60) % 60); const m = Math.floor((ct / 60) % 60);
const h = Math.floor(ct / 3600); 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").firstChild.style.display = "flex";
$("player").style.display = "flex"; $("player").style.display = "flex";
document.getElementsByName("play")[0].addEventListener("click", e => { $("radio-play").addEventListener("click", e => {
if (audio.paused) { if (audio.paused) {
audio.src = audio_src; audio.src = audio_src;
audio.play(); audio.play();

10
web/templates/index.pug
View File

@ -39,9 +39,9 @@ html(lang='en')
div#player div#player
div div
div div
button(name='play') button#radio-play
small.elapsed 0h 0m 0s small#radio-elapsed 0h 0m 0s
input(type="range" name="volume" min="0" max="100" orient="vertical") input#radio-volume(type="range" min="0" max="100" orient="vertical")
audio(preload='none' controls='' playsinline='') audio(preload='none' controls='' playsinline='')
source(src='/live/stream.ogg' type='audio/ogg') 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]! | 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 Now playing: #[span#radio-song #{status.SongName}]
p Current/peak listeners: #[span#radio-listeners #{status.Listeners}] / #[span#radio-listener-peak #{status.ListenerPeak}] p Current/peak listeners: #[span#radio-listeners #{status.Listeners}] / #[span#radio-listener-peak #{status.ListenerPeak}]
p 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 section
h2 Last #{songsNum} songs h2 Last #{songsNum} songs
table#last-played table#last-songs
each song in *songs each song in *songs
tr tr
td= song.Time td= song.Time