$def with ()
$var title: Live Stream

<link href=https://vjs.zencdn.net/5.8.8/video-js.css rel=stylesheet>
<script src=https://vjs.zencdn.net/5.8.8/video.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/3.6.12/videojs-contrib-hls.js></script>
<div id=stream></div>
<script>
fetch('/stream-stats')
  .then(response => response.text())
  .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
  .then(data => {
    const streams = data.getElementsByTagName('stream')
    if (streams.length) {
      document.querySelector('#stream').innerHTML = `
      <video id=livestream class="video-js vjs-default-skin" controls>
        <source src=$tx.origin/hls/foo.m3u8 type=application/x-mpegURL>
      </video>
      <div style=font-size:.75em>
        <span id=watching></span> watching &bull;
        started <span id=streamduration></span> minutes ago
      </div>
      `
      player = videojs('livestream', {fluid: true})
      player.play()
      document.querySelector('#watching').innerHTML = streams[0].getElementsByTagName('nclients')[0].textContent
      document.querySelector('#streamduration').innerHTML = Math.round(parseInt(streams[0].getElementsByTagName('time')[0].textContent) / 60000)
    }
  })
</script>
