Lazy load video.js only when stream is live

 $def with ()
 $var title: Live Stream
 
-<link href=/assets/video.js-5.8.8.css rel=stylesheet>
-<script src=/assets/video.js-5.8.8.js></script>
-<script src=/assets/video.js-contrib-hls-3.6.12.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>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)
-    }
-  })
+document.addEventListener('DOMContentLoaded', ev => {
+  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) {
+        window.injectStylesheet('/assets/video.js-5.8.8.css')
+        window.injectScript('/assets/video.js-5.8.8.js')
+        window.injectScript('/assets/video.js-contrib-hls-3.6.12.js')
+
+        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>started <span id=streamduration></span>
+          minutes ago</div>
+        `
+        player = videojs('livestream', {fluid: true})
+        player.play()
+
+        const ms = parseInt(streams[0].getElementsByTagName('time')[0].textContent)
+        document.querySelector('#streamduration').innerHTML = Math.round(ms / 1000 / 60)
+      }
+    })
+})
 </script>