Merge branch '34c3-cherries'

5 files changed, 98 insertions, 25 deletions

diff --git a/template/assemblies/feedback.phtml b/template/assemblies/feedback.phtml
index 6df80cc..d50daf4 100644
--- a/template/assemblies/feedback.phtml
+++ b/template/assemblies/feedback.phtml
@@ -12,8 +12,8 @@
 				<option>DSL &gt;6000</option>
 				<option>VDSL</option>
 				<option>Public Hotspot</option>
-				<option>WiFi inside the CCH</option>
-				<option>Ethernet inside the CCH</option>
+				<option>WiFi on site</option>
+				<option>Ethernet on site</option>
 				<option>Something else</option>
 			</select>
 		</div>
diff --git a/template/assemblies/player/dash.phtml b/template/assemblies/player/dash.phtml
index 7048006..24a3df6 100644
--- a/template/assemblies/player/dash.phtml
+++ b/template/assemblies/player/dash.phtml
@@ -1,4 +1,4 @@
-<script type="text/javascript" src="<?=h($assets)?>clapprio/dash-shaka-playback.js"></script>
+<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>
 
@@ -11,19 +11,102 @@
  interference with the new dash-player.
 -->
 <script type="text/javascript">
-	var nativeHLS = document.createElement('video').canPlayType('application/vnd.apple.mpegURL') != "";
-	var player = new Clappr.Player({
-			source: nativeHLS ? '<?=h($room->getHLSPlaylistUrl())?>' : '<?=h($room->getDashManifestUrl())?>',
+(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%",
 			plugins: [DashShakaPlayback, LevelSelector, AudioSelector],
 			shakaConfiguration: {
-		        abr: {
-		          defaultBandwidthEstimate: 600000
-		        },
+				abr: {
+					defaultBandwidthEstimate: 1000000
+				},
+				streaming: {
+					rebufferingGoal: 12,
+					jumpLargeGaps: true,
+
+					// Todo: handle streaming failure
+					// failureCallback: function() {
+					// 	console.log("streaming failure callback", arguments)
+					// }
+				}
+			},
+			levelSelectorConfig: {
+				labels: {
+					// HLS
+					0: 'Slides',
+					1: 'SD',
+					2: 'HD',
+
+					// DASH
+					7: 'HD',
+					8: 'SD',
+					9: 'Slides',
+					10: 'HD',
+					11: 'SD',
+					12: 'Slides',
+					13: 'HD',
+					14: 'SD',
+					15: 'Slides',
+				}
 			},
 			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>
 
 
@@ -35,11 +118,4 @@
 body.room .player-wrap.tab-content {
 	padding: 0;
 }
-.level_selector[data-level-selector] {
-	margin-top: 7px;
-}
-.level_selector[data-level-selector] button,
-.level_selector[data-level-selector] li {
-	font-size: 12px;
-}
 </style>
diff --git a/template/assemblies/switcher/dash.phtml b/template/assemblies/switcher/dash.phtml
index 63b8381..70c6405 100644
--- a/template/assemblies/switcher/dash.phtml
+++ b/template/assemblies/switcher/dash.phtml
@@ -1,10 +1,10 @@
 <div class="container-fluid">
 
 	<div class="notes well">
-		<h3 class="beta">WARNING! BETA!</h3>
+		<h3 class="beta">WebM DASH</h3>
 		<p><a href="https://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP">DASH</a> is an adaptive-bitrate HTTP-based streaming solution, that is (unlike existing proprietary solutions such as HLS) internationally standardized.</p>
 		<p>Support for DASH in open source software such as ffmpeg is still pretty rough, so consider this a technology-preview, it's not yet a stable solution.</p>
-		<p>Please report your experience to <a href="https://twitter.com/c3streaming">@c3streaming</a>, but please don't expect full support.</p>
+		<p>Please report your experience to <a href="https://twitter.com/c3streaming">@c3streaming</a>.</p>
 	</div>
 
 
diff --git a/template/overview.phtml b/template/overview.phtml
index e9cee8e..513f8e5 100644
--- a/template/overview.phtml
+++ b/template/overview.phtml
@@ -28,11 +28,7 @@
 						col-xs-12
 					<? else: ?>
 						narrow
-						<? if($room->hasPreview() && $room->hasSchedule()): ?>
-							col-md-6
-						<? else: ?>
-							col-sm-6
-						<? endif ?>
+						col-md-6
 					<? endif ?>
 
 					<? if($room->hasPreview()): ?>
diff --git a/template/room.phtml b/template/room.phtml
index 236ccc5..814efe2 100644
--- a/template/room.phtml
+++ b/template/room.phtml
@@ -29,7 +29,7 @@
 				<a href="#schedule" role="tab" data-toggle="tab">Fahrplan</a>
 			</li>
 		<? endif ?>
-    <li>
+		<li <? if (! $room->hasSchedule()): ?>class="active"<? endif ?>>
 			<a href="#switcher" role="tab" data-toggle="tab">Formats</a>
 		</li>
 		<? if($room->hasChat()): ?>
@@ -55,7 +55,8 @@
 				<? require("$assemblies/schedule.phtml") ?>
 			</div>
 		<? endif ?>
-    <div role="tabpanel" class="tab-pane" id="switcher">
+		<div role="tabpanel" class="tab-pane<? if (! $room->hasSchedule()): ?> active<? endif ?>"
+			id="switcher">
 			<? require("$assemblies/switcher/".$stream->getPlayerType().".phtml") ?>
 		</div>
 		<? if($room->hasChat()): ?>