From 2a24e19809e3fabf6bf18f8c98040d7769052c4d Mon Sep 17 00:00:00 2001 From: MaZderMind Date: Fri, 3 Apr 2015 20:46:10 +0200 Subject: [PATCH] Experimental Multi-Viewer --- assets/css/_structure.less | 34 +++++++++++++++ assets/js/lustiges-script.js | 85 ++++++++++++++++++++++++++++++++++++ index.php | 5 +++ model/Room.php | 15 +++++++ template/multiview.phtml | 23 ++++++++++ view/multiview.php | 8 ++++ 6 files changed, 170 insertions(+) create mode 100644 template/multiview.phtml create mode 100644 view/multiview.php diff --git a/assets/css/_structure.less b/assets/css/_structure.less index f779cd83..6e302c88 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 11e4bdf9..d4db5f6b 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); + $('
') + .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 0e5117f0..c1a44388 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 47f5b263..33beb9f6 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 00000000..e07446b4 --- /dev/null +++ b/template/multiview.phtml @@ -0,0 +1,23 @@ +
+
+
+

+
+
+ +
+ + getStreams() as $stream): ?> +
+
+

getDisplay())?>

+ getPlayerType().".phtml") ?> +
+
+
+
+ + +
+ +
diff --git a/view/multiview.php b/view/multiview.php new file mode 100644 index 00000000..5951ff1b --- /dev/null +++ b/view/multiview.php @@ -0,0 +1,8 @@ +render(array( + 'page' => 'multiview', + 'title' => 'Stream-Übersicht', + + 'rooms' => Room::rooms(), +));