aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--assets/css/_structure.less34
-rw-r--r--assets/js/lustiges-script.js85
-rw-r--r--index.php5
-rw-r--r--model/Room.php15
-rw-r--r--template/multiview.phtml23
-rw-r--r--view/multiview.php8
6 files changed, 170 insertions, 0 deletions
diff --git a/assets/css/_structure.less b/assets/css/_structure.less
index f779cd8..6e302c8 100644
--- a/assets/css/_structure.less
+++ b/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;
+ }
+ }
+}
diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
index 11e4bdf..d4db5f6 100644
--- a/assets/js/lustiges-script.js
+++ b/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();
+ });
+});
diff --git a/index.php b/index.php
index 0e5117f..c1a4438 100644
--- a/index.php
+++ b/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');
diff --git a/model/Room.php b/model/Room.php
index 47f5b26..33beb9f 100644
--- a/model/Room.php
+++ b/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();
diff --git a/template/multiview.phtml b/template/multiview.phtml
new file mode 100644
index 0000000..e07446b
--- /dev/null
+++ b/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>
diff --git a/view/multiview.php b/view/multiview.php
new file mode 100644
index 0000000..5951ff1
--- /dev/null
+++ b/view/multiview.php
@@ -0,0 +1,8 @@
+<?php
+
+echo $tpl->render(array(
+ 'page' => 'multiview',
+ 'title' => 'Stream-Übersicht',
+
+ 'rooms' => Room::rooms(),
+));