<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<title>{{ configuration['pagetitle'] }} - {{ appname }}: {{ streamname }}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.default.css') }}">
</head>
<body>
<header>
	<a href="{{ url_for('frontend.start') }}"><h1>{{ configuration["pagetitle"] }}</h1></a>
	<h2>{{ configuration["subtitle"] }}</h2>
</header>
<div id="videocontainer">
    <h1>{{ streamname }}</h1>
    <video id="player" controls>
    </video>
</div>
<script src="{{ url_for('static', filename='flv.min.js') }}"></script>
<script type="application/javascript">
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('player');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: '{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ appname }}&stream={{ streamname }}'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>
</body>
</html>
