<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/main.css">
<body>

<div class="text-center">
<h3>
Now Playing
</h3>
</div>

<style type="text/css">
   body { background: cyan !important; }
</style>

<style type="text/css">
centered-thing {
    position: absolute;
    margin: auto
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
$(document).ready(function(){
  if ("WebSocket" in window) {
      ws = new WebSocket("ws://" + document.domain + ":5000/websocket");
      var num = 0;
      ws.onmessage = function (msg) {
          var message = JSON.parse(msg.data);
          $("p#log").html(message.output);
          num+=1;
          player.loadVideoById(message.output, 5, "large");
      };
  };
});

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
	height: '390',
	width: '640',
	videoId: 'M7lc1UVf-VE',
	events: {
		'onReady': onPlayerReady,
		'onStateChange': onPlayerStateChange
	}
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
var r = "Done"
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED && !done) {
        ws.send(JSON.stringify({'output': r}));
    }
}
</script>
</body>
</head>
</html>
