add admin overview for screens

modules/admin.js

@@ -223,8 +223,9 @@ class admin {
             });
 
             socket.on('admin.dashboard.sync', function (data) {
-                syncDashboard(socket, 0);
-                updateDashboard(socket, data.displayId);
+               cli.error("admin.dashboard.sync is deprecated!");
+                // syncDashboard(socket, 0);
+               // updateDashboard(socket, data.displayId);
             });
 
             socket.on('admin.setDisplay', function (data) {

public/js/dashboard.js

@@ -1,12 +1,13 @@
 var serverOptions;
 var bundleSettings;
 var bundleDirs;
-var displayId = 0;
 var displayList;
 
 
 socket.on('connect', function () {
-    emit('admin.dashboard.sync');
+    emit("admin.setDisplay", {display: displayId});
+    var program = document.getElementById('program');
+    program.src = "/display/" + displayId;
 });
 
 socket.on("callback.update", function (data) {

public/js/display.js

@@ -304,6 +304,7 @@ function checkStream(serverOptions) {
             });
             try {
                 flvPlayer.attachMediaElement(videoElement);
+                flvPlayer.volume = videoVolume;
                 flvPlayer.load();
                 flvPlayer.play();
                 showBackgroundOnly();

public/js/displayLite.js

@@ -160,7 +160,7 @@ function nextSlide(data) {
     if (serverOptions.isAnnounce) {
         $("#" + getWebLayer()).addClass("fadeOut").removeClass("fadeIn");
         $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
-        setTimeout(function() {
+        setTimeout(function () {
             clearIFrame(getLayer());
             clearIFrame(getLayer(1));
         }, 1000);
@@ -184,7 +184,7 @@ function nextSlide(data) {
                 $(elem).show();
                 $("#" + getWebLayer()).addClass("fadeOut").removeClass("fadeIn");
                 $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
-                setTimeout(function() {
+                setTimeout(function () {
                     clearIFrame(getLayer());
                     clearIFrame(getLayer(1));
                 }, 1000);
@@ -250,11 +250,16 @@ function checkStream(serverOptions) {
         if (flvjs.isSupported()) {
             var videoElement = document.getElementById('bgvid');
             flvPlayer = flvjs.createPlayer({
-                type: 'flv',
-                url: serverOptions.streamSource
-            });
+                    type: 'flv',
+                    url: serverOptions.streamSource
+                }, {
+                    enableStashBuffer: false,   // enable for much longer buffer, note, video may stall if network jitter
+                    isLive: true
+                }
+            );
             try {
                 flvPlayer.attachMediaElement(videoElement);
+                flvPlayer.volume = videoVolume;
                 flvPlayer.load();
                 flvPlayer.play();
                 showBackgroundOnly();

routes/admin.js

@@ -9,7 +9,8 @@ let busboy = require("connect-busboy");
 function ensureIsAdmin(req, res, next) {
 
     if (!req.isAuthenticated || !req.isAuthenticated()) {
-        req.session.location = "/admin";
+        console.log(req.originalUrl);
+        req.session.location = req.originalUrl;
         return res.redirect("/login");
     } else {
         if (!req.user.permissions.isAdmin) {
@@ -27,15 +28,19 @@ module.exports = function (websocket, dispatcher) {
     router.use(busboy({immediate: true}));
 
     router.get('/', function (req, res, next) {
-        res.render('admin/dashboard', {config: config, permission: req.user.permissions});
+        let displayId = req.query['displayId'] || 0;
+        res.render('admin/dashboard', {config: config, displayId: displayId, permission: req.user.permissions});
     });
 
     router.get('/preview', function (req, res, next) {
         let socketId = req.query['socket'];
-        let displayId = req.query['displayId'] || 0;
+        let displayId = parseInt(req.query['displayId']) || 0;
         res.render('preview', {config: config, socketId: socketId, displayId: displayId});
     });
 
+    router.get('/overview', function (req, res, next) {
+        res.render('admin/overview', {config: config});
+    });
 
     router.get('/edit/slide', function (req, res, next) {
         let bundle = req.query['bundle'];

routes/index.js

@@ -7,7 +7,8 @@ const cli = require('../modules/cli.js');
 
 function ensureIsAdmin(req, res, next) {
     if (!req.isAuthenticated || !req.isAuthenticated()) {
-        req.session.location = "/";
+        console.log(req.originalUrl);
+        req.session.location = req.originalUrl;
         return res.redirect("/login");
     }
     return next();
@@ -17,6 +18,7 @@ module.exports = function (websocket, dispatcher) {
     if (config.secureViews) {
         router.use(ensureIsAdmin);
     }
+
     router.get('/', function (req, res, next) {
         res.header('Access-Control-Allow-Origin', '*');
         res.render('index', {config: config});
@@ -25,13 +27,15 @@ module.exports = function (websocket, dispatcher) {
     router.get('/display/:id/lite', function (req, res, next) {
         res.header('Access-Control-Allow-Origin', '*');
         let idx = parseInt(req.params.id);
-        res.render('liteDisplay', {config: config, display: availableDisplays[idx], displayId: idx});
+        let volume = req.params.videoVolume || 1.;
+        res.render('liteDisplay', {config: config, display: availableDisplays[idx], displayId: idx, videoVolume: volume});
     });
 
     router.get('/display/:id', function (req, res, next) {
         res.header('Access-Control-Allow-Origin', '*');
         let idx = parseInt(req.params.id);
-        res.render('display', {config: config, display: availableDisplays[idx], displayId: idx});
+        let volume = req.params.videoVolume || 1.;
+        res.render('display', {config: config, display: availableDisplays[idx], displayId: idx, videoVolume: volume});
     });
 
     router.get('/images/:dir/:name', function (req, res, next) {

views/admin/dashboard.twig

@@ -168,6 +168,7 @@
 
     <script>
         var socket = io.connect("{{ config.serverUrl }}:{{ config.serverListenPort }}/admin");
+        var displayId = {{ displayId }};
     </script>
     <script src="/js/dashboard.js"></script>
 {% endblock %}

views/admin/overview.twig

@@ -0,0 +1,30 @@
+{% extends 'layout/admin.twig' %}
+
+{% block header %}
+    <script src="/socket.io/socket.io.js"></script>
+{% endblock %}
+
+
+{% block body %}
+    <div class="ui container">
+        <div class="ui basic segment">
+            <h2 class="ui center aligned inverted dividing header">{{ t("index.displays") }}</h2>
+
+            <div class="ui three stackable cards" id="displayList">
+                {% for display in config.displays %}
+                    <div class="ui card">
+                        <iframe class="ui img fluid" src="/display/{{ loop.index0 }}/lite?videoVolume=0"></iframe>
+                        <div class="content">
+                            <h3 class="ui center aligned header">{{ display.name }}</h3>
+                        </div>
+                        <div class="extra content">
+                            <a href="/admin?displayId={{ loop.index0 }}" class="ui small button">View</a>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+

views/display.twig

@@ -37,6 +37,7 @@
 
     <script>
         var socket = io.connect("{{ config.serverUrl }}:{{ config.serverListenPort }}/display-{{ displayId }}");
+        var videoVolume = {{ videoVolume }};
     </script>
 
     <script src="/js/display.js"></script>

views/liteDisplay.twig

@@ -42,6 +42,7 @@
     <script>
         var socket = io.connect("{{ config.serverUrl }}:{{ config.serverListenPort }}/display-{{ displayId }}");
         var displayId = {{ displayId }};
+        var videoVolume = {{ videoVolume }};
     </script>
     <script src="/js/displayLite.js"></script>
 {% endblock %}