<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="/files/reset.css" type="text/css" media="screen">
		<link rel="stylesheet" href="/files/web.css" type="text/css" media="screen">
		<link rel="stylesheet" href="/files/web-narrow.css" type="text/css" media="screen and (max-width: 1080px)">
		<link rel="stylesheet" href="/files/web-wide.css" type="text/css" media="screen and (min-width: 1081px)">
		<link rel="icon" href="/files/favicon.ico" type="image/x-icon">
		<script src="/files/jquery.min.js"></script>
		<script src="/files/jquery.ums.js"></script>
		<script src="/files/js.cookie-2.1.0.min.js"></script>
		<!-- New webUI -->
		<script src="/files/util/bootstrap.min.js"></script>
		<script src="/files/util/html5.js"></script>
		<link rel="stylesheet" href="/files/util/bootstrap.min.css" type="text/css" media="screen">
		<!--TV - REMOTE CONTROL-->
		<script src="/files/util/keycode.js"></script>
		<script src="/files/util/keycontroller.js"></script>
		<link rel="stylesheet" href="/files/util/remoteui.css" type="text/css" media="screen">
		<link rel="stylesheet" href="/files/util/fontawesome/css/all.min.css" crossorigin="anonymous">
		<!--VideoJS 7.2.3 Support -->
		<link href="/files/util/video-js/video-js.min.css" rel="stylesheet">
		<script src="/files/util/video-js/video.min.js"></script>
		<title>{{name}}</title>
	</head>
	<body id="ContentPage">
		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container-fluid">
				<div class="navbar-header">
					<a id="HomeButton" class="navbar-brand" href="javascript:history.back();" title="UMS"></a>
				</div>
			</div>
		</nav>
		<script>
{{#prevId}}
			function prev() {window.location.replace('/play/{{prevId}}?html5=1');}
{{/prevId}}
{{#nextId}}
			function next() {window.location.replace('/play/{{nextId}}?html5=1');}
{{/nextId}}
{{#isVideo}}
			function flash() {window.location.replace('/play/{{id1}}?flash=1');}
{{/isVideo}}
		</script>
		<div id="Container">
			<div id="VideoContainer">
				{{^isVideo}}
				<link rel="stylesheet" href="/files/util/flipper.css" type="text/css" media="screen">
				{{/isVideo}}
				<{{mediaType}} id="player" class="video-js vjs-default-skin {{^isVideo}}full-card card{{/isVideo}}" controls {{auto}} fullscreen width="{{width}}" height="{{height}}"
					   data-setup='{ "html5" : { "nativeTextTracks" : true } }'
					   poster="/thumb/{{id1}}" data-setup="{}">

					<source src="/media/{{id1}}" type="{{mime}}">
				{{#sub}}
					<track kind="captions" src="/files/{{this}}" default>
				{{/sub}}
				<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
				</{{mediaType}}>
				{{^isVideo}}
				<div class="well {{^isVideo}}full-card{{/isVideo}}">
					<h2>{{name}}</h2>
				</div>
				{{/isVideo}}
				<div id="toolbar" class=" {{^isVideo}}full-card{{/isVideo}}">
					<button id="prev" onclick="prev()"{{prevAttr}} type="button" class="btn btn-sm btn-playbar"><span class="icon-player-prev"></span></button>
					<button id="play" onclick="play()" type="button" class="btn btn-sm btn-playbar"><span class="icon-player-play"></span></button>
					<button id="pause" onclick="pause()" type="button" class="btn btn-sm btn-playbar"><span class="icon-player-pause"></span></button>
					<button id="next" onclick="next()"{{nextAttr}} type="button" class="btn btn-sm btn-playbar"><span class="icon-player-next"></span></button>
					{{#plsSign}}
					<button id="playlist" title="{{plsAttr}}" onclick="umsAjax('/playlist/{{plsOp}}/{{id1}}', false);return false;" type="button" class="btn btn-sm btn-playbar">{{plsSign}}</button>
					{{/plsSign}}
					{{#isVideo}}
					<button id="flash" onclick="flash()" title="Switch to flash player" type="button" class="btn btn-sm btn-playbar"><span>Flash</span></button>
					{{/isVideo}}
					<a href="/raw/{{id1}}" target="_blank" download="{{name}}" id="DownloadLink" title="Download this {{mediaType}}" class="btn btn-sm btn-playbar"><span class="fa fa-download"></span></a>
					<button id="fullscreen" onclick="GoInFullscreen(videojs('player'));" title="Fullscreen Mode" class="btn btn-sm btn-playbar"><span class="icon-player-size-fullscreen"></span></button>
				</div>
			</div>
		</div>
		<script>
			var state = {};
			var player = document.getElementById('player');

			function status(k, v, wait) {
				//console.log('status '+JSON.stringify(arguments));
				state[k] = v;
				if (! wait) {
					$.post('/playerstatus/', JSON.stringify(state));
				}
			}

			function volumeStatus() {
				status('mute', player.muted ? '1' : '0', true);
				status('volume', (player.volume * 100).toFixed(0));
			}

			player.addEventListener('playing', function(){status('playback', 'PLAYING');});
			player.addEventListener('play', function(){status('playback', 'PLAYING');});
			player.addEventListener('pause', function(){status('playback', 'PAUSED');});
			player.addEventListener('canplay', function(){status('playback', 'STOPPED');});
			player.addEventListener('ended', function(){status('playback', 'STOPPED');});
			player.addEventListener('error', function(){status('playback', 'STOPPED');});
			player.addEventListener('timeupdate', function(){status('position', player.currentTime.toFixed(0));});
			player.addEventListener('volumechange', volumeStatus);
{{#autoContinue}}
			player.addEventListener('ended', next, false);
{{/autoContinue}}
			window.onbeforeunload = function(){status('playback','STOPPED');}
			// Send initial status
			volumeStatus();

{{#push}}
			function control(op, arg) {
				//console.log('control '+JSON.stringify(arguments));
				var player = document.getElementById('player');
				switch (op) {
					case 'play':
						player.play();
						break;
					case 'pause':
						player.pause(!player.paused);
						break;
					case 'stop':
						player.pause();
						break;
					case 'setvolume':
						player.volume = arg/100;
						break;
					case 'mute':
						player.muted = !player.muted;
						break;
				}
			}
{{/push}}			
		</script>
		<input type="hidden" class="jQKeyboard" name="dummy">
		<script defer src="/files/util/fontawesome/js/all.min.js" crossorigin="anonymous"></script>
	</body>
</html>

