From 4bdbc28f43e1469e1acf344813ca5321d4afecb4 Mon Sep 17 00:00:00 2001
From: "Alexander \"Arav\" Andreev" <me@arav.su>
Date: Sun, 20 Aug 2023 01:20:13 +0400
Subject: [PATCH] Added custom player that is diplayed if JS is enabled.

---
 web/templates/index.pug | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/web/templates/index.pug b/web/templates/index.pug
index 0f47ac7..27d3883 100644
--- a/web/templates/index.pug
+++ b/web/templates/index.pug
@@ -36,18 +36,24 @@ html(lang='en')
                 a(href='http://radio.arav.i2p/live/stream.ogg') direct link (I2P)
                 a(href="https://dir.xiph.org/search?q=arav's+dwelling") Xiph
                 | OGG 128 Kb/s
-            audio(preload='none' controls='')
-                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]!
-            if status.ServerStartDate != ""
-                p#radio-status On-air since 
-                    time(datetime=status.ServerStartISO8601)= status.ServerStartDate
-            else
-                p#radio-status Radio is offline.
-            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(id='btn-update') update] it forcibly.
+            div#radio
+                div.player
+                    button#play
+                    small#cur-time
+                    div #[button#vol-down &#128264;] #[input#volume(type="range", name="volume" min="0" max="100")] #[button#vol-up &#128266;]
+                audio(preload='none' controls='' playsinline='')
+                    source(src='http://radio.arav.home.arpa/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]!
+                div
+                    if status.ServerStartDate != ""
+                        p#radio-status On-air since 
+                            time(datetime=status.ServerStartISO8601)= status.ServerStartDate
+                    else
+                        p#radio-status Radio is offline.
+                    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(id='btn-update') update] it forcibly.
         section
             h2 Last #{songsNum} songs
             table#last-played