From 2a24e19809e3fabf6bf18f8c98040d7769052c4d Mon Sep 17 00:00:00 2001 From: MaZderMind Date: Fri, 3 Apr 2015 20:46:10 +0200 Subject: 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 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); + $('
') + .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 @@ +
+
+
+

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

getDisplay())?>

+ getPlayerType().".phtml") ?> +
+
+
+
+ + +
+ +
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 @@ +render(array( + 'page' => 'multiview', + 'title' => 'Stream-Übersicht', + + 'rooms' => Room::rooms(), +)); -- cgit v1.2.3 From 084098645828740a5f96a011eb3bd1d69c5a9e6e Mon Sep 17 00:00:00 2001 From: MaZderMind Date: Sat, 4 Apr 2015 12:22:51 +0200 Subject: Disable Meter in !Chrome browsers --- assets/js/lustiges-script.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js index d4db5f6..417b234 100644 --- a/assets/js/lustiges-script.js +++ b/assets/js/lustiges-script.js @@ -433,18 +433,15 @@ $(function() { // multiviewer $(function() { + var audioMeter = !!window.chrome; $('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(); + $timer = $player.closest('.cell').find('.timer'); $player.on("timeupdate", function(e) { @@ -474,6 +471,18 @@ $(function() { $timer.text(txt); }); + if(!audioMeter) + { + $player.prop('muted', true); + $meter.hide(); + return; + } + + var + ctx = new AudioContext(), + audioSrc = ctx.createMediaElementSource(player), + analyser = ctx.createAnalyser(); + // we have to connect the MediaElementSource with the analyser audioSrc.connect(analyser); @@ -483,7 +492,6 @@ $(function() { 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+'%', @@ -499,7 +507,6 @@ $(function() { var frequencyData = new Uint8Array(analyser.frequencyBinCount); // we're ready to receive some data! - // loop function renderFrame() { // update data in frequencyData analyser.getByteFrequencyData(frequencyData); @@ -509,6 +516,7 @@ $(function() { $($bars[i]).css('height', frequencyData[i] / 255 * 40); } + // loop requestAnimationFrame(renderFrame); } renderFrame(); -- cgit v1.2.3