{% extends "base.html" %}

{% block extrahead %}
<xscript src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.13/hls.min.js"></script>

<style>
.video-main {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 5fr;
  background: var(--bg);
  color: var(--fg);
}
.video-main aside {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px;
}
.video-main aside button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 9px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.video-main aside button:hover {
  background: var(--accent);
}
.video-main aside button[aria-current="true"] {
  background: var(--accent);
  color: var(--bg);
}
.video-main video {
  width: 100%;
  max-height: 100%;
  background: #000;
}
</style>
{% endblock extrahead %}

{% block content %}
<div class="video-main">
<aside>
  <nav id="list">
    {% for e in entries %}
      <button onclick="play('{{e.slug}}', this)">{{ e.name }}</button>
    {% endfor %}
  </nav>
</aside>
<main>
<video id="player" controls playsinline></video>
</main>
</div>

<script>
const video = document.getElementById("player");
const list = document.getElementById("list");
let hls = null
let current = null;

function play(slug, btn) {
  const src = "/vid/" + slug + "/stream.m3u8";

  if (current)
    current.removeAttribute("aria-current");
  btn.setAttribute("aria-current", "true");
  current = btn;

  if (video.canPlayType("application/vnd.apple.mpegurl")) {
    video.src = src;
  } else if (window.Hls && Hls.isSupported()) {
    if (hls) {
      hls.destroy();
    }
    hls = new Hls();
    hls.loadSource(src);
    hls.attachMedia(video);
  } else {
    alert("HLS not supported in this browser.");
    return;
  }
  video.play().catch(() => {});
}
</script>
{% endblock content %}