<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="{{description}}">
	<meta name="author" content="datarhei restreamer">
	<title>{{name}}</title>
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<link rel="alternate" type="application/json+oembed" href="channels/{{channelid}}/oembed.json" title="{{name}}">
	<link rel="alternate" type="text/xml+oembed" href="channels/{{channelid}}/oembed.xml" title="{{name}}">
	<script src="channels/{{channelid}}/config.js"></script>
	<script src="player/clappr/dist/clappr.min.js"></script>
	<script src="player/clappr/dist/clappr-stats.min.js"></script>
	<script src="player/clappr/dist/clappr-nerd-stats.min.js"></script>
	<style>
		.player-poster[data-poster] .poster-background[data-poster] {
			height: initial !important;
		}
	</style>
</head>
<body>
<div id="player" style="position:absolute;top:0;right:0;bottom:0;left:0"></div>
<script>
	function getQueryParam(key, defaultValue) {
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for(var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if(pair[0] == key) {
				return pair[1];
			}
		}
		return defaultValue;
	}

	function convertBoolParam(key, defaultValue) {
		var val = getQueryParam(key, defaultValue);
		return val === true || val === "true" || val === "1" || val === "yes" || val === "on";
	}

	function convertColorParam(parameter, defaultColor) {
		var re = new RegExp("^#([0-9a-f]{3}|[0-9a-f]{6})$");
		var c = getQueryParam(parameter, defaultColor);
		// decode color as # has to be represented by %23
		var c = decodeURIComponent(c);
		// if color was given without leading #, prepend it
		if (!String(c).startsWith("#")) c = "#" + c;

		if (re.test(c)) {
			return c;
		} else {
			return defaultColor;
		}
	}

	var autoplay = convertBoolParam("autoplay", playerConfig.autoplay);
	var mute = convertBoolParam("mute", playerConfig.mute);
	var statistics = convertBoolParam("stats", playerConfig.statistics);
	var color = convertColorParam("color", playerConfig.color.buttons);

	var plugins = [];

	if(statistics == true) {
		plugins.push(ClapprNerdStats);
		plugins.push(ClapprStats);
	}

	var config = {
		source: playerConfig.source,
		parentId: '#player',
		baseUrl: 'clappr/',
		plugins: plugins,
		poster: playerConfig.poster + '?t=' + String(new Date().getTime()),
		mediacontrol: {
			seekbar: playerConfig.color.seekbar,
			buttons: color
		},
		height: '100%',
		width: '100%',
		disableCanAutoPlay: true,
		autoPlay: autoplay,
		mute: mute,
		clapprStats: {
			runEach: 1000,
			onReport: (metrics) => {},
		},
		clapprNerdStats: {
			shortcut: ['command+shift+s', 'ctrl+shift+s'],
			iconPosition: 'top-right'
		}
	};

	if(playerConfig.logo.image.length != 0) {
		config.watermark = playerConfig.logo.image;
		config.position = playerConfig.logo.position;

		if(playerConfig.logo.link.length != 0) {
			config.watermarkLink = playerConfig.logo.link;
		}
	}

	var player = new window.Clappr.Player(config);
	var posterPlugin = player.core.mediaControl.container.getPlugin('poster');
	player.on(window.Clappr.Events.PLAYER_STOP, function updatePoster () {
		posterPlugin.options.poster = playerConfig.poster + '?t=' + String(new Date().getTime());
		posterPlugin.render();
	});
</script>
</body>
</html>
