<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<title>{{ configuration['pagetitle'] }} - {{ appname }}: {{ stream }}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.default.css') }}">
</head>
<body>
<script src="{{ url_for('static', filename='hls.min.js') }}"></script>

<header>
	<a href="{{ url_for('frontend.start') }}"><h1>{{ configuration["pagetitle"] }}</h1></a>
	<h2>{{ configuration["subtitle"] }}</h2>
</header>

<div id="videocontainer">
    <h1>{{ stream }}</h1>
    <video id="video" controls>
    </video>
</div>
<script>
  var video = document.getElementById('video');
  if (Hls.isSupported()) {
    var hls = new Hls({
      debug: true,
    });
    hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ stream }}.m3u8");
    hls.attachMedia(video);
    hls.on(Hls.Events.MEDIA_ATTACHED, function () {
      video.muted = true;
      video.play();
    });
  }
  // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
  // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
  // This is using the built-in support of the plain video element, without using hls.js.
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = "{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ stream }}.m3u8";
    video.addEventListener('canplay', function () {
      video.play();
    });
  }
</script>
</body>
</html>
