html + js implementation of nip-93 (alt urls)

html + js implementation of nip-93 (alt urls)
⎗
✓
<html>
  <head>
  <style>
  body {
    margin: 0;
    text-align: center;
  }
  img {
    max-width: 100vh;
    max-height: 100vh;
    display: none;
  }
  #status {
    padding: 0 1em;
    text-align: left;
  }
  </style>
  </head>
  <body>
    <div id="status"><p></p></div>
    <img/>
    <script>
    console.log("hello")
    status_el = document.querySelector("#status")
    status_text = document.querySelector("#status p")

    function next_img_url(){
      url = urls.shift()

      if(url){
        status_text.innerText = "load url " + url

        img = document.createElement("img")
        img.src = url
        img.onerror = function(){
          console.log("img load error")
          console.log("try next url")
          next_img_url()
        }
        img.onload = function(){
          status_el.style.display = "none"
          document.querySelector("img").style.display = "inline-block"
        }
        document.querySelector("img").replaceWith(img)
      }else{
        console.log("no more urls")
        status_el.innerHTML = "<p>unable to load image from any of the urls</p>"
        const ul = document.createElement("ul")

        for(let alturl of ogurls){
          const li = document.createElement("li")
          const link = document.createElement("a")
          link.href = link.innerText = alturl
          li.append(link)
          ul.append(li)
        }

        status_el.append(ul)
      }
    }

    socket = new WebSocket("wss://relay.nostr.band")
    socket.onopen = function(){
      this.send(JSON.stringify(
        ["REQ", "q", {"ids": [location.hash.substring(1)]}]
      ))
    }
    socket.onmessage = function(msg){

      try{
        data = JSON.parse(msg.data)

        if(data[0] == "NOTICE"){
          document.write(data[0] + ": " + data[1])
          socket.close()
          return
        }

        if(data[2]){
          ogurls = data[2].tags.find(e => e[0] == "alturl").slice(1)
          urls = ogurls.slice()
          next_img_url()
        }
      }catch(e){
        console.log("e", e)
      }
    }
    </script>
  </body>
</html>
Warning
