{{define "viewer"}}
<div class="container">
    <div class="col-video">
        <!-- Video -->
        <video id="player"></video>

        <!-- Links under video -->
        <p>
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-box-arrow-up-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h8a1.5 1.5 0 0 0 1.5-1.5V9a.5.5 0 0 0-1 0v4a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 5v8zm7-11a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.5H9a.5.5 0 0 1-.5-.5z"/>
                <path fill-rule="evenodd" d="M14.354 1.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"/>
            </svg>
            <code>rtmps://SITE_HOSTNAME:1935/play/{{.path}}</code>
            <a href="#" id="chatToggle" title="Cacher/Afficher le chat">»</a>
        </p>
    </div>

    <!-- Chat -->
    <div class="col-chat" id="chatCol">
        <iframe src="https://irc.crans.org/web/?join=stream_{{.path}}&nick=viewer&password=&realname=Viewer" title="Chat"></iframe>
    </div>
</div>

<script src="/static/ovenplayer/ovenplayer.js"></script>
<script>
// Toggle chat
const chatToggle = document.getElementById("chatToggle")
chatToggle.addEventListener("click", function () {
  const chatCol = document.getElementById("chatCol")
  if (chatCol.style.display === "none") {
    chatCol.style.display = "block"
    chatToggle.textContent = "»"
  } else {
    chatCol.style.display = "none"
    chatToggle.textContent = "«"
  }
})

// Create player
player = OvenPlayer.create("player", {
  autoStart: true,
  mute: true,
  expandFullScreenUI: true,
  sources: [
    {
      "file": "wss://SITE_HOSTNAME/play/{{.path}}",
      "type": "webrtc",
      "label": "WebRTC Source"
    }
  ]
});
player.on("error", function(error){
  if (error.code === 501) {
    // Change message
    const errorMsg = document.getElementsByClassName("op-message-text")[0]
    errorMsg.textContent = "Le stream semble inactif. Cette page se rafraîchit toutes les 30 secondes."

    // Reload in 5s
    setTimeout(function () {
      player.load()
    }, 30000)
  } else {
    console.log(error);
  }
});
</script>
{{end}}