mbasaglia/pony_stream.htm

## pony_stream.htm
<!DOCTYPE html>
<html>
<head>
    <title>Pony!</title>
</head>
<body>
    <h1>Pony! <span id="next_pony"></span></h1>
    <iframe
        id="stream"
        width="1024"
        height="576"
        src=""
        allowfullscreen="true"
        webkitallowfullscreen="true"
        scrolling="no"
        frameborder="0"
        style="border: 0px none transparent;"
    ></iframe>
    <p>
        <a href="" id="link">Direct link</a>
        <select id="size" onchange="resize_stream(this.value);">
            <option>240</option>
            <option>720</option>
            <option>1080</option>
        </select>
        <select id="source" onchange="switch_stream(this.value);">
            <option value="16227134">Bronystate</option>
            <option value="20308283">Spazz</option>
        </select>
    </p>
    <script>
        var pony_data = null;
        function time_delta_to_string(time)
        {
            var now = new Date();
            var diff = Math.round((time - now) / 60000);

            if ( diff <= 30 )
                return "right now"
            if ( diff <= 60 )
                return "1 minute"

            var minutes = diff % 60;
            var time_string = minutes + " minutes";
            diff = Math.floor(diff / 60);

            var hours = diff % 24;
            if ( diff )
                time_string = hours + " hours " + time_string;

            var days = Math.floor(diff / 24);
            if ( days )
                time_string = days + " days " + time_string;

            return time_string;
        }

        function update_next_pony(pony_data)
        {
            var pony_date = new Date(pony_data.time);
            document.getElementById("next_pony").innerText =
                "Next episode " + pony_data.season + "x" + pony_data.episode + " in "
                + time_delta_to_string(pony_date) + "!";

            var now = new Date();
            if ( pony_date < now && (now - pony_date) / 60000 > 30 )
                load_countdown();
            else
                window.setTimeout(function(){ update_next_pony(pony_data); }, 60*1000);
        }

        function load_countdown()
        {
            function on_error()
            {
                document.getElementById("next_pony").innerText = "No next pony! D:";
                cleanup();
            }

            function on_pony(json)
            {
                cleanup();
                update_next_pony(json);
            }

            function cleanup()
            {
                script.parentNode.removeChild(script);
                clearTimeout(timeout);
            }

            window["on_pony"] = on_pony;
            var script = document.createElement('script');
            script.src = "http://api.ponycountdown.com/next?callback=on_pony";

            var timeout = window.setTimeout(on_error, 10*1000);

            script.onerror = on_error;

            document.body.appendChild(script);
        }

        function resize_stream(height)
        {
            height = parseInt(height);
            document.getElementById("stream").height = height;
            document.getElementById("stream").width = height / 9 * 16;
            document.getElementById("size").value = height;
        }

        function switch_stream(id)
        {
            var quality = document.getElementById("size").value
            var url = "http://www.ustream.tv/embed/" + id + "?html5ui=1&htmlplayback=1&quality=" + quality;
            document.getElementById("stream").src = url;
            document.getElementById("link").href = url;
        }

        resize_stream(720)
        switch_stream(document.getElementById("source").value);
        load_countdown();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pony!</title>
	</head>
	<body>
	<h1>Pony! <span id="next_pony"></span></h1>
	<iframe
	id="stream"
	width="1024"
	height="576"
	src=""
	allowfullscreen="true"
	webkitallowfullscreen="true"
	scrolling="no"
	frameborder="0"
	style="border: 0px none transparent;"
	></iframe>
	<p>
	<a href="" id="link">Direct link</a>
	<select id="size" onchange="resize_stream(this.value);">
	<option>240</option>
	<option>720</option>
	<option>1080</option>
	</select>
	<select id="source" onchange="switch_stream(this.value);">
	<option value="16227134">Bronystate</option>
	<option value="20308283">Spazz</option>
	</select>
	</p>
	<script>
	var pony_data = null;
	function time_delta_to_string(time)
	{
	var now = new Date();
	var diff = Math.round((time - now) / 60000);

	if ( diff <= 30 )
	return "right now"
	if ( diff <= 60 )
	return "1 minute"

	var minutes = diff % 60;
	var time_string = minutes + " minutes";
	diff = Math.floor(diff / 60);

	var hours = diff % 24;
	if ( diff )
	time_string = hours + " hours " + time_string;

	var days = Math.floor(diff / 24);
	if ( days )
	time_string = days + " days " + time_string;

	return time_string;
	}

	function update_next_pony(pony_data)
	{
	var pony_date = new Date(pony_data.time);
	document.getElementById("next_pony").innerText =
	"Next episode " + pony_data.season + "x" + pony_data.episode + " in "
	+ time_delta_to_string(pony_date) + "!";

	var now = new Date();
	if ( pony_date < now && (now - pony_date) / 60000 > 30 )
	load_countdown();
	else
	window.setTimeout(function(){ update_next_pony(pony_data); }, 60*1000);
	}

	function load_countdown()
	{
	function on_error()
	{
	document.getElementById("next_pony").innerText = "No next pony! D:";
	cleanup();
	}

	function on_pony(json)
	{
	cleanup();
	update_next_pony(json);
	}

	function cleanup()
	{
	script.parentNode.removeChild(script);
	clearTimeout(timeout);
	}

	window["on_pony"] = on_pony;
	var script = document.createElement('script');
	script.src = "http://api.ponycountdown.com/next?callback=on_pony";

	var timeout = window.setTimeout(on_error, 10*1000);

	script.onerror = on_error;

	document.body.appendChild(script);
	}

	function resize_stream(height)
	{
	height = parseInt(height);
	document.getElementById("stream").height = height;
	document.getElementById("stream").width = height / 9 * 16;
	document.getElementById("size").value = height;
	}

	function switch_stream(id)
	{
	var quality = document.getElementById("size").value
	var url = "http://www.ustream.tv/embed/" + id + "?html5ui=1&htmlplayback=1&quality=" + quality;
	document.getElementById("stream").src = url;
	document.getElementById("link").href = url;
	}

	resize_stream(720)
	switch_stream(document.getElementById("source").value);
	load_countdown();
	</script>
	</body>
	</html>