From a374dfd510ed45e622239481a702394447c8d4ab Mon Sep 17 00:00:00 2001
From: "Alexander \"Arav\" Andreev" <me@arav.su>
Date: Sat, 11 May 2024 05:35:14 +0400
Subject: [PATCH] Changed layout for a song info.

---
 web/assets/js/main.js |  6 ++++--
 web/index.templ       | 12 ++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/assets/js/main.js b/web/assets/js/main.js
index 45e36b1..c8ac224 100644
--- a/web/assets/js/main.js
+++ b/web/assets/js/main.js
@@ -11,8 +11,9 @@ async function updateStatus() {
 
 	if (!resp.ok || 200 != resp.status) {
 		$("radio-song").textContent =
-			$("radio-duration-estimate").textContent =
-				$("radio-duration").textContent = "";
+			$("radio-song-listeners").textContent =
+				$("radio-duration-estimate").textContent =
+					$("radio-duration").textContent = "";
 		$("radio-listeners").textContent =
 			$("radio-listener-peak").textContent = "0";
 		$("last-songs").lastChild.remove();
@@ -36,6 +37,7 @@ 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-duration").textContent = formatDuration(new Date(s.current_song.duration_msec));
 	$("radio-listeners").textContent = s.listeners.current;
 	$("radio-listener-peak").textContent = s.listeners.peak;
diff --git a/web/index.templ b/web/index.templ
index 8f9d549..a9acd48 100644
--- a/web/index.templ
+++ b/web/index.templ
@@ -67,16 +67,16 @@ 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>
-                    Now playing: <span id="radio-song">{ curSong.Artist } - { curSong.Title }</span>
-                    <abbr id="radio-song-listeners" title="Overall and peak numbers of listeners for a currently playing song">{ strconv.FormatInt(lstnrs.Overall(), 10) }/{ strconv.FormatInt(lstnrs.CurrentPeak(), 10) }</abbr>
-                    <span id="radio-duration-estimate"></span> <span id="radio-duration">{ curSong.DurationString() }</span>
+                    <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>
                 </p>
             } else {
+                <p>Now playing: <span id="radio-song"></span></p>
                 <p>
-                    Now playing: <span id="radio-song"></span>
-                    <abbr id="radio-song-listeners" title="Overall and peak numbers of listeners for a currently playing song"></abbr>
-                    <span id="radio-duration-estimate"></span> <span id="radio-duration"></span>
+                    <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>
                 </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>