diff options
Diffstat (limited to '')
| -rw-r--r-- | assets/css/_structure.less | 34 | ||||
| -rw-r--r-- | assets/js/lustiges-script.js | 85 | ||||
| -rw-r--r-- | index.php | 5 | ||||
| -rw-r--r-- | model/Room.php | 15 | ||||
| -rw-r--r-- | template/multiview.phtml | 23 | ||||
| -rw-r--r-- | view/multiview.php | 8 |
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(); + }); +}); @@ -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(), +)); |