<script type="text/javascript" src="<?=h($assets)?>clapprio/dash-shaka-playback.min.js"></script>
<script type="text/javascript" src="<?=h($assets)?>clapprio/level-selector.min.js"></script>
<script type="text/javascript" src="<?=h($assets)?>clapprio/audio-selector.min.js"></script>


<div class="dashContainer" style="min-height: 100px" >
	<div id="player"></div>
</div>

<!--
 this is an experimental hack, trying to protect the remaining page from
 interference with the new dash-player.
-->
<script type="text/javascript">
(function(){
	// Select relay from cdn url, retry indefinitely
	var selectRelay = function(url, cb) {
		$.ajax({
			url: url,
			cache: false,
			dataType: "text",
			timeout: 3000,
			success: function(result, state, xhr) {
				var relay = xhr.getResponseHeader("X-Host");
				if (!relay)
					setTimeout(selectRelay.bind(null, url, cb), 2000);

				console.log("selected relay", relay);
				cb(relay);
			},
			error: function(err) {
				console.error("Error while selecting relay: ", err.status, err.statusText)
				setTimeout(selectRelay.bind(null, url, cb), 2000);
			}
		});
	}

	var getRelayUrl = function(relay, cdnUrl) {
		var proto = cdnUrl.match(/^https?:\/\//),
			path = "/" + cdnUrl.split("/").slice(3).join("/");
		return proto + relay + path;
	}

	var createPlayer = function(sources) {
		return new Clappr.Player({
			sources: sources,
			width: "100%",
			poster: "<?=h($stream->getPoster())?>",
			plugins: [DashShakaPlayback, LevelSelector, AudioSelector],
			shakaConfiguration: {
				abr: {
					defaultBandwidthEstimate: 1000000
				},
				streaming: {
					rebufferingGoal: 12,
					jumpLargeGaps: true,

					// Todo: handle streaming failure
					// failureCallback: function() {
					// 	console.log("streaming failure callback", arguments)
					// }
				}
			},
			levelSelectorConfig: {
				labelCallback: function(playbackLevel, customLabel) {
					// playbackLevel.videoBandwidth is set for DASH
					// playbackLevel.level.bitrate is set for HLS
					var bw = playbackLevel.videoBandwidth || playbackLevel.level.bitrate;

					if(bw <= 100000) {
						return 'Slides';
					}
					else if(bw <= 800000) {
						return 'SD';
					}
					else {
						return 'HD'
					}
				},
			},
			autoPlay: true,
			parentId: '#player'
		});
	}

	selectRelay("<?=h($room->getDashManifestUrl())?>", function(relay) {
		// WebM fallback
		var sources = [{
			source: "<?=h($stream->getVideoUrl('webm', 'hd'))?>",
		}];

		// HLS playlist
		var hasMSE = "MediaSource" in window;
		if (hasMSE || document.createElement('video').canPlayType('application/vnd.apple.mpegURL') != "") {
			sources.unshift({
				source: "<?=h($room->getHLSPlaylistUrl())?>"
			});
		}

		// VP9 dash player
		if (hasMSE && MediaSource.isTypeSupported('video/webm; codecs="vp9,vorbis"')) {
			sources.unshift({
				source: "<?=h($room->getDashManifestUrl())?>"
			});
		}

		createPlayer(sources);
	});
}());
</script>


<style type="text/css">
#player > [data-player] {
	padding-bottom: 56.25%;
	height: auto !important;
}
body.room .player-wrap.tab-content {
	padding: 0;
}
</style>