{% extends "base.njk" %}
{% block head %}
  <!--<script src="/videojs/video.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/videojs/video-js.min.css">-->
  <script src="/dashjs/dash.all.min.js"></script>
  <script>
	  async function startVideo(){
	//var url = "/live/{{username}}/index.mpd";
  	//var player = dashjs.MediaPlayer().create();
  	//player.initialize(document.querySelector("#videoPlayer"), url, true);
  	//console.log('called startvideo');
  	while(true){
		if(document.querySelector('#videoPlayer') === null)
			break;

	    if(window.location.pathname.substring(window.location.pathname.length - 1) !== '/'){
			var url = "/api/"+window.location.pathname.substring(7)+"/config";
			console.log(url)
			var xhr = JSON.parse(await makeRequest("GET", url));
			if(xhr.live){
				var player = dashjs.MediaPlayer().create();
				player.initialize(document.querySelector("#videoPlayer"), url, true);
				break;
			}
		}

		else{
			var url = "/api/"+window.location.pathname.substring(7, window.location.pathname.length - 1)+"/config";
			console.log(url)
			var xhr = JSON.parse(await makeRequest("GET", url));
			if(xhr.live){
				var player = dashjs.MediaPlayer().create();
				player.initialize(document.querySelector("#videoPlayer"), url, true);
				break;
			}
		}
		await sleep(60000);
	}
}

function sleep(ms) {
	return new Promise(resolve => setTimeout(resolve, ms));
}
  </script>
{% endblock %}
{% block content %}
<script>
function newPopup(url) {
	popupWindow = window.open(
		url,'popUpWindow','height=700,width=450,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
  </br>
	<span style="float: left;font-size: large;"><a href="/live/{{ username }}/index.mpd">{{ username }}</a> | {{ title | escape }}</b></span><span style="float: right;font-size: large;"> Links | <a href="rtmp://{{ domain }}/live/{{ username }}">Watch</a> <a href="JavaScript:newPopup('/chat?room={{ username }}');">Chat</a> <a href="/vods/{{ username }}">VODs</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%;min-height: 500px;"></video>-->
			<video id="videoPlayer" style="width:100%;height:100%;width: 950px;height: 534px;background-color: rgb(0, 0, 0);" poster="/thumbnail.jpg" autoplay muted></video>

			<!--this spits errors fucking constantly after it tries to reload a video that's already running.. I dunno if it's bad or causing problems so let's just push it to develop and wait for issues!-->
			<!--it plays the stream without reloading the page tho lol-->
			<script>startVideo()</script>
		</div>
		<div id="jschild" class="webchat" style="width: 30%;height: 100%;position: relative;">
			<iframe src="/chat?room={{ username }}" frameborder="0" style="width: 100%;height: 100%; min-height: 534px;" allowfullscreen></iframe>
		</div>
	</div>
  </br>
    <noscript>The webclients for the stream and the chat require javascript, but feel free to use the direct links above!</br></br></noscript>
    {{ about | escape }}
  <!--<script>
    window.HELP_IMPROVE_VIDEOJS = false;
    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/{{ username }}/index.mpd',
        type: 'application/dash+xml'
      });
    })
  </script>-->
{% endblock %}