<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Non-stop dancing music</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
          :root { color-scheme: light dark }
          * { margin: 0 }
          *, *::before, *::after { box-sizing: inherit }
          html { box-sizing: border-box; font-family: monospace; background-color: #fafbfc }
          body { max-width: 42rem; margin: 0 auto; padding: 1rem 1rem 2rem }
          h1 &gt; p:last-child { display: flex; flex-wrap: wrap; align-items: baseline }
          #artist { font-size: 1.25rem; font-weight: normal }
          #album { margin-right: 1rem }
          #date, time { font-size: 1rem; font-weight: normal; color: #555 }
          audio { display: block; width: 100%; margin: 1rem 0 }
          #details { display: flex; justify-content: space-between; margin-bottom: 1rem }
          #title { margin-right: 1rem }
          ul { margin: 2rem 0; padding: 0; list-style-type: none }
          li { margin-bottom: 1rem }
          i { font-size: .875rem; color: #333 }
        </style>
    <link rel="shortcut icon" href="/assets/img/favicon.svg" />
  </head>
  <body>
    <h1>
      <p>
        <span id="artist">…</span>
      </p>
      <p>
        <span id="album">…</span>
        <span id="date">…</span>
      </p>
    </h1>
    <audio controls="controls" preload="none">
      <source src="/stream.opus" type="audio/ogg"></source>
      <source src="/stream" type="audio/mpeg"></source>
      <p>Your browser does not support audio.</p>
      <p>Use the links below to open it with a media player (e.g. MPV, VLC, &amp;c.).</p>
    </audio>
    <div id="details">
      <p id="title">…</p>
      <time id="duration">…</time>
    </div>
    <hr />
    <ul>
      <li>
        <a href="/stream.opus">https://radio.pub.pink/stream.opus</a>
        <br />
        <i>Works with most players and devices.</i>
      </li>
      <li>
        <a href="/stream">https://radio.pub.pink/stream</a>
        <br />
        <i>Works with old, proprietary gadgets.</i>
      </li>
    </ul>
    <p>
      <a href="https://jm.pub.pink/radio/" target="_blank">The show so far…</a>
    </p>
    <script>
          const album = document.querySelector("#album")
          const artist = document.querySelector("#artist")
          const date = document.querySelector("#date")
          const duration = document.querySelector("#duration")
          const title = document.querySelector("#title")
          const events = new EventSource("/event-stream")
          events.addEventListener("message", event =&gt; {
            const data = JSON.parse(event.data)
            const time = Math.round(data.duration)
            const minutes = Math.floor(time / 60)
            const seconds = String(time % 60)
            album.textContent = data.album
            artist.textContent = data.artist
            duration.textContent = `${minutes}:${seconds.padStart(2, "0")}`
            title.textContent = data.title
            date.textContent = data.date
          })
        </script>
  </body>
</html>
