From 154682ea4febbcd3e9f1acfcf78e8644fdc84ea0 Mon Sep 17 00:00:00 2001
From: "Alexander \"Arav\" Andreev" <me@arav.su>
Date: Sun, 12 May 2024 03:58:35 +0400
Subject: [PATCH] A page layout was changed.

---
 web/assets/css/main.css |  2 +-
 web/assets/js/main.js   | 18 +++++-------------
 web/index.templ         | 18 ++++++++++--------
 3 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/web/assets/css/main.css b/web/assets/css/main.css
index d5153cb..c7b58cf 100644
--- a/web/assets/css/main.css
+++ b/web/assets/css/main.css
@@ -140,7 +140,7 @@ input#radio-volume {
 	appearance: slider-vertical;
 	-webkit-appearance: slider-vertical;
 	accent-color: var(--primary-color);
-	height: 5rem;
+	height: 4rem;
 	margin-left: .5rem; }
 
 #player div:first-child {
diff --git a/web/assets/js/main.js b/web/assets/js/main.js
index c8ac224..f342a98 100644
--- a/web/assets/js/main.js
+++ b/web/assets/js/main.js
@@ -11,11 +11,9 @@ async function updateStatus() {
 
 	if (!resp.ok || 200 != resp.status) {
 		$("radio-song").textContent =
-			$("radio-song-listeners").textContent =
-				$("radio-duration-estimate").textContent =
-					$("radio-duration").textContent = "";
-		$("radio-listeners").textContent =
-			$("radio-listener-peak").textContent = "0";
+			$("radio-duration-estimate").textContent =
+				$("radio-duration").textContent = "";
+		$("radio-listeners").textContent = "0";
 		$("last-songs").lastChild.remove();
 		return [-1, null];
 	}
@@ -28,7 +26,7 @@ async function updateStatus() {
 		for (let i = 0; i < s.last_songs.length; ++i) {
 			let row = $("last-songs").lastChild.insertRow();
 			row.insertCell().appendChild(document.createTextNode(formatStartAt(new Date(s.last_songs[i].start_at))));
-			row.insertCell().appendChild(document.createTextNode((s.last_songs[i].listeners == 0 ? "" : s.last_songs[i].listeners + "/") + (s.last_songs[i].peak_listeners == 0 ? "" : s.last_songs[i].peak_listeners)));
+			row.insertCell().appendChild(document.createTextNode((s.last_songs[i].listeners == undefined ? "" : s.last_songs[i].listeners + "/") + (s.last_songs[i].peak_listeners == undefined ? "" : s.last_songs[i].peak_listeners)));
 			row.insertCell().appendChild(document.createTextNode(`${s.last_songs[i].artist} - ${s.last_songs[i].title}`));
 		}
 	}
@@ -37,10 +35,8 @@ async function updateStatus() {
 		return [-1, null];
 
 	$("radio-song").textContent = `${s.current_song.artist} - ${s.current_song.title}`;
-	$("radio-song-listeners").textContent = `${s.listeners.overall} / ${s.listeners.current_peak}`;
+	$("radio-listeners").textContent = s.listeners;
 	$("radio-duration").textContent = formatDuration(new Date(s.current_song.duration_msec));
-	$("radio-listeners").textContent = s.listeners.current;
-	$("radio-listener-peak").textContent = s.listeners.peak;
 
 	return [s.current_song.duration_msec, new Date(s.current_song.start_at)];
 }
@@ -58,10 +54,6 @@ async function update() {
 	return 0;
 }
 
-$("radio-update").addEventListener("click", async () =>
-	[cursong_duration_msec, cursong_startat] = await updateStatus());
-
-
 let update_interval_id = null;
 async function interval() {
 	switch (await update()) {
diff --git a/web/index.templ b/web/index.templ
index a9acd48..270f2d0 100644
--- a/web/index.templ
+++ b/web/index.templ
@@ -67,20 +67,22 @@ templ Index(curSong *radio.Song, sl []radio.Song, slLen int64, lstnrs *radio.Lis
             </audio>
             <div>
             if curSong != nil && curSong.Artist != "" {
-                <p>Now playing: <span id="radio-song">{ curSong.Artist } - { curSong.Title }</span></p>
                 <p>
-                    <abbr title="Overall and peak numbers of listeners for a currently playing song">O/P</abbr>: <span id="radio-song-listeners">{ strconv.FormatInt(lstnrs.Overall(), 10) } / { strconv.FormatInt(lstnrs.CurrentPeak(), 10) }</span>
-                    Time: <span id="radio-duration-estimate"></span><span id="radio-duration">{ curSong.DurationString() }</span>
+                    <b>Listeners:</b> <span id="radio-listeners">{ strconv.FormatInt(lstnrs.Current(), 10) }</span>
+                    <b>Duration:</b> <span id="radio-duration-estimate"></span><span id="radio-duration">{ curSong.DurationString() }</span>
+                </p>
+                <p>
+                    <b>Song:</b> <span id="radio-song">{ curSong.Artist } - { curSong.Title }</span>
                 </p>
             } else {
-                <p>Now playing: <span id="radio-song"></span></p>
                 <p>
-                    <abbr title="Overall and peak numbers of listeners for a currently playing song">O/P</abbr>: <span id="radio-song-listeners"></span>
-                    Time: <span id="radio-duration-estimate"></span><span id="radio-duration"></span>
+                    <b>Listeners:</b> <span id="radio-listeners">{ strconv.FormatInt(lstnrs.Current(), 10) }</span>
+                    <b>Duration:</b> <span id="radio-duration-estimate"></span><span id="radio-duration">0:00</span>
+                </p>
+                <p>
+                    <b>Song:</b> <span id="radio-song">-</span>
                 </p>
             }
-                <p>Current/peak listeners: <span id="radio-listeners">{ strconv.FormatInt(lstnrs.Current(), 10) }</span> / <span id="radio-listener-peak">{ strconv.FormatInt(lstnrs.Peak(), 10) }</span></p>
-                <p class="small">Notice: information updates every new song. But you can <button id="radio-update">update</button> it forcibly.</p>
             </div>
         </div>
     </section>