$def with ()
$var title: Chat

$# <p>...</p>

$# <iframe style=height:60vh;width:100%
$#         src=https://v3demo.mediasoup.org/?roomId=ragtag
$#         allow=display-capture;camera;microphone></iframe>

<script src=https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js></script>

$# <script type=module>
$# const client = new WebTorrent()
$# const torrentId = 'magnet:?xt=urn:btih:2111e0cf5edb0b526eb5e0061b84f72275ad3a7d&dn=2023-05-20+13-53-10.mkv&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com'
$# client.add(torrentId, function (torrent) {
$#   const file = torrent.files.find(function (file) {
$#     return file.name.endsWith('.mkv')
$#   })
$#   console.log(file)
$#   file.getBlobURL(function (err, url) {
$#     if (err) return console.log(err.message)
$#     console.log('File done.')
$#     console.log('<a href="' + url + '">Download full file: ' + file.name + '</a>')
$#   })
$# })
$# </script>

<form id=torr>
  <label for="torrentId">Download from a magnet link: </label>
  <input name="torrentId", placeholder="magnet:" value="">
  <button type="submit">Download</button>
</form>

<h2>Log</h2>
<div class="log"></div>

<script>
  const client = new WebTorrent()

  client.on('error', function (err) {
    console.error('ERROR: ' + err.message)
  })

  document.querySelector('form#torr').addEventListener('submit', function (e) {
    e.preventDefault() // Prevent page refresh

    const torrentId = document.querySelector('form input[name=torrentId]').value
    log('Adding ' + torrentId)
    client.add(torrentId, onTorrent)
  })

  function onTorrent (torrent) {
    log('Got torrent metadata!')
    log(
      'Torrent info hash: ' + torrent.infoHash + ' ' +
      '<a href="' + torrent.magnetURI + '" target="_blank">[Magnet URI]</a> ' +
      '<a href="' + torrent.torrentFileBlobURL + '" target="_blank" download="' + torrent.name + '.torrent">[Download .torrent]</a>'
    )

    // Print out progress every 5 seconds
    const interval = setInterval(function () {
      log('Progress: ' + (torrent.progress * 100).toFixed(1) + '%')
    }, 5000)

    torrent.on('done', function () {
      log('Progress: 100%')
      clearInterval(interval)
    })

    // Render all files into to the page
    torrent.files.forEach(function (file) {
      file.appendTo('.log')
      log('(Blob URLs only work if the file is loaded from a server. "http//localhost" works. "file://" does not.)')
      file.getBlobURL(function (err, url) {
        if (err) return log(err.message)
        log('File done.')
        log('<a href="' + url + '">Download full file: ' + file.name + '</a>')
      })
    })
  }

  function log (str) {
    const p = document.createElement('p')
    p.innerHTML = str
    document.querySelector('.log').appendChild(p)
  }
</script>