add updated stream player

template/assemblies/player/dash.phtml

@@ -1,120 +1,30 @@
-<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>
-
+<script type="text/javascript" src="<?=h($assets)?>js/player.js"></script>
 
 <div class="dashContainer" style="min-height: 100px" >
-	<div id="player"></div>
+	<div id="stream-player"></div>
 </div>
 
 <!--
- this is an experimental hack, trying to protect the remaining page from
- interference with the new dash-player.
+ TODO: do this properly
 -->
 <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);
+	new VOCPlayer.default({
+		parentId: "#stream-player",
+		vocStream: "<?=h($room->getStream())?>",
+		poster: "<?=h($stream->getPoster())?>",
 	});
 }());
 </script>
 
-
 <style type="text/css">
-#player > [data-player] {
+#stream-player > [data-player] {
 	padding-bottom: 56.25%;
 	height: auto !important;
 }
+#stream-player > .fullscreen {
+  padding-bottom: 0;
+}
 body.room .player-wrap.tab-content {
 	padding: 0;
 }