Experimental Multi-Viewer

assets/css/_structure.less

@@ -137,3 +137,37 @@ body.feedback-read {
 		}
 	}
 }
+
+body.multiview {
+	.cell {
+		background-color: white;
+
+		h2 {
+			font-size: 14px;
+			padding: 10px;
+			margin: 0;
+		}
+
+		.meter {
+			background-color: gray;
+			height: 45px;
+			position: relative;
+
+			.bar {
+				background-color: red;
+				position: absolute;
+				bottom: 0;
+			}
+		}
+
+		.timer {
+			background-color: #909090;
+			height: 30px;
+
+			text-align: right;
+			font-size: 22px;
+			padding-right: 5px;
+			color: white;
+		}
+	}
+}

assets/js/lustiges-script.js

@@ -429,3 +429,88 @@ $(function() {
 		});
 	}, 1000*60);
 });
+
+
+// multiviewer
+$(function() {
+	$('body.multiview')
+		.find('audio, video')
+			//.prop('muted', true)
+			.each(function(idx, player) {
+
+				var
+					$player = $(player),
+					$meter = $player.closest('.cell').find('.meter'),
+					$timer = $player.closest('.cell').find('.timer'),
+					ctx = new AudioContext(),
+					audioSrc = ctx.createMediaElementSource(player),
+					analyser = ctx.createAnalyser();
+
+				$player.on("timeupdate", function(e)
+				{
+					var
+						s = Math.floor(this.currentTime % 60),
+						m = Math.floor(this.currentTime / 60) % 60,
+						h = Math.floor(this.currentTime / 60 / 60) % 24,
+						d = Math.floor(this.currentTime / 60 / 60 / 24),
+						f = Math.floor((this.currentTime - Math.floor(this.currentTime)) * 1000),
+						txt = '';
+
+					txt += d+'d ';
+
+					if(h < 10) txt += '0';
+					txt += h+'h ';
+
+					if(m < 10) txt += '0';
+					txt += m+'m ';
+
+					if(s < 10) txt += '0';
+					txt += s+'s ';
+
+					if(f < 10) txt += '00';
+					else if(f < 100) txt += '0';
+					txt += f+'ms';
+
+					$timer.text(txt);
+				});
+
+				// we have to connect the MediaElementSource with the analyser 
+				audioSrc.connect(analyser);
+
+				// we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
+				analyser.fftSize = 64;
+
+				var w = 100 / analyser.frequencyBinCount;
+				for (var i = 0; i < analyser.frequencyBinCount; i++) {
+					var c = Math.floor( i * 255 / analyser.frequencyBinCount );
+					console.log(c);
+					$('<div class="bar">')
+						.css({
+							'width': w+'%',
+							'left': (i*w)+'%',
+							'background-color': 'rgb('+c+', '+(192 - c)+', 0)'
+						})
+						.appendTo($meter);
+				}
+
+				var $bars = $meter.find('.bar');
+
+				// frequencyBinCount tells you how many values you'll receive from the analyser
+				var frequencyData = new Uint8Array(analyser.frequencyBinCount);
+
+				// we're ready to receive some data!
+				// loop
+				function renderFrame() {
+					// update data in frequencyData
+					analyser.getByteFrequencyData(frequencyData);
+					// render frame based on values in frequencyData
+
+					for (var i = 0; i < frequencyData.length; i++) {
+						$($bars[i]).css('height', frequencyData[i] / 255 * 40);
+					}
+
+					requestAnimationFrame(renderFrame);
+				}
+				renderFrame();
+			});
+});

index.php

@@ -50,6 +50,11 @@ try {
 		require('view/schedule-json.php');
 	}
 
+	else if(preg_match('@^multiview$@', $route, $m))
+	{
+		require('view/multiview.php');
+	}
+
 	else if(preg_match('@^feedback$@', $route, $m))
 	{
 		require('view/feedback.php');

model/Room.php

@@ -247,6 +247,21 @@ class Room extends ModelBase
 		return $res;
 	}
 
+	public function getStreams()
+	{
+		$selections = $this->getSelectionNames();
+		$streams = array();
+
+		foreach ($selections as $selection) {
+			$streams[] = $this->createStreamObject($selection, 'native');
+
+			if($this->hasTranslation())
+				$streams[] = $this->createStreamObject($selection, 'translated');
+		}
+
+		return $streams;
+	}
+
 	public function selectStream($selection, $language = 'native')
 	{
 		$selections = $this->getSelectionNames();

template/multiview.phtml

@@ -0,0 +1,23 @@
+<div class="container-fluid">
+	<div class="row headline">
+		<div class="col-xs-12">
+			<h1><?=h($title)?></h1>
+		</div>
+	</div>
+
+	<div class="row room-group">
+		<? foreach($rooms as $room): ?>
+				<? foreach($room->getStreams() as $stream): ?>
+				<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
+					<div class="cell">
+						<h2><?=h($stream->getDisplay())?></h2>
+						<? require("$assemblies/player/".$stream->getPlayerType().".phtml") ?>
+						<div class="meter"></div>
+						<div class="timer"></div>
+					</div>
+				</div>
+			<? endforeach ?>
+		<? endforeach ?>
+	</div>
+
+</div>

view/multiview.php

@@ -0,0 +1,8 @@
+<?php
+
+echo $tpl->render(array(
+	'page' => 'multiview',
+	'title' => 'Stream-Übersicht',
+
+	'rooms' => Room::rooms(),
+));