{% extends "base.njk" %}
{% block content %}
	<span style="float: left;font-size: large;"><b>{{ user | capitalize }}'s Stream</b></span><span style="float: right;font-size: large;">Direct Links: <a href="rtmp://{{ domain }}/live/{{ user }}">RTMP</a> <a href="/live/{{ user }}/index.m3u8">HLS</a></span>
	<div id="jscontainer">
		<div id="jschild" style="width: 70%;height: 100%;">
			<video controls poster="/thumbnail.jpg" class="video-js vjs-default-skin" id="live-video" style="width:100%;height:100%;"></video>
		</div>
		<div id="jschild" style="width: 30%;height: 100%;">
			<img src="/chat.jpg" style="width: 100%;height: 100%" />
		</div>
	</div>
	<script>window.HELP_IMPROVE_VIDEOJS = false;</script>
	<script src="/videojs/video.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/videojs/video-js.min.css">
	<script>
    var player = videojs('live-video', {
      html: {
        nativeCaptions: false,
      },
    });
    player.ready(function() {
      player.on("error", () => {
        document.querySelector(".vjs-modal-dialog-content").textContent = "The stream is currently offline.";
      });
      player.src({
        src: '/live/{{ user }}/index.m3u8',
        type: 'application/x-mpegURL'
      });
    })
    </script></br>
{% endblock %}