{{template "header" .}}
<div class="player-page">
  <div>
    <div class="player-wrap">
      {{if eq .Stream.Kind "youtube"}}
        <div class="player yt-lite" id="yt-lite" data-id="{{.Stream.Playback}}"></div>
        <script src="/static/cinema-player.js?v={{.Version}}"></script>
        <script>deimosLiteYT(document.getElementById('yt-lite'), {{printf "%q" .Stream.Playback}}, { title: {{printf "%q" .Stream.Title}} });</script>
      {{else if eq .Stream.Kind "twitch"}}
        <iframe class="player" src="https://player.twitch.tv/?channel={{.Stream.Playback}}&parent=localhost&autoplay=true&muted=true" allowfullscreen></iframe>
      {{else}}
        <video id="player" class="player" controls autoplay muted playsinline></video>
        <button type="button" class="unmute-pop" id="unmute" hidden>Unmute</button>
        <p id="iptv-err" class="alert" hidden></p>
        <script src="/static/vendor/hls.min.js?v={{.Version}}"></script>
        <script src="/static/vendor/mpegts.min.js?v={{.Version}}"></script>
        <script src="/static/iptv-player.js?v={{.Version}}"></script>
        <script>
        (function () {
          var v = document.getElementById('player');
          var btn = document.getElementById('unmute');
          deimosIPTV({
            src: {{.Stream.Playback}},
            kind: {{.Stream.Kind}},
            video: v,
            unmute: btn,
            error: document.getElementById('iptv-err')
          });
        })();
        </script>
      {{end}}
    </div>
    <div class="video-info">
      <h1>{{.Stream.Title}} <span class="live-dot">LIVE</span></h1>
      <div class="meta">{{.Stream.Kind}} · {{.Stream.Owner}}</div>
      <div class="desc">{{.Stream.Description}}</div>
    </div>
  </div>
</div>
{{template "footer" .}}