{% extends "base.njk" %}
{% block head %}
<script src="/shaka-player.compiled.js"></script>
<script>
shakaPolyFilled = false;
var manifestUri = document.location.protocol+'//'+document.location.host+'/live/{{ username }}/index.mpd';
async function initPlayer() {
  console.log('Trying to initialize player.');
  if(!shakaPolyFilled){
  	shaka.polyfill.installAll();
  	shakaPolyFilled = true;
  }
  var live = JSON.parse(await makeRequest("GET", "/api/{{ username }}/config")).live;
  if(live){
  	// Create a Player instance.
  	const video = document.getElementById('video');
  	const player = new shaka.Player(video);
  	// Listen for error events.
  	player.addEventListener('error', onErrorEvent);

  	video.addEventListener('play', () => {
		  document.getElementById('playbtn').style.visibility = 'hidden';
  	});
  	video.addEventListener('pause', () => {
		  document.getElementById('playbtn').style.visibility = 'visible';
  	});
  	// Try to load a manifest.
  	// This is an asynchronous process.
  	try {
		await player.load(manifestUri);
		// This runs if the asynchronous load is successful.
   	 	console.log('The video has now been loaded!');
  	} catch (e) {
    	// onError is executed if the asynchronous load fails.
    	onError(e);
  	}
  } else {
	setTimeout(initPlayer, 5000);
  }
}

function onErrorEvent(event) {
  // Extract the shaka.util.Error object from the event.
  onError(event.detail);
}

function onError(error) {
  // Log the error.
  console.error('Error code', error.code, 'object', error);
}

document.addEventListener('DOMContentLoaded', initPlayer);
</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%;position: relative;">
			<image id="playbtn" src="/play.svg" alt="Play Stream" style="width:100%;height:100%;width: 950px;height: 534px;position: absolute;" onclick="document.getElementById('video').paused ? document.getElementById('video').play() : document.getElementById('video')	.pause();"></image>
			<video id="video" style="width:100%;height:100%;width: 950px;height: 534px;background-color: rgb(0, 0, 0);" poster="/thumbnail.jpg" autoplay onclick="this.paused ? this.play() : this.pause();"></video>
		</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 }}
{% endblock %}